@mirohq/design-system-tooltip 3.2.36 → 3.3.0

package/dist/main.js

@@ -7,6 +7,8 @@ var React = require('react');
 var reactTooltip = require('@radix-ui/react-tooltip');
 var designSystemStitches = require('@mirohq/design-system-stitches');
 var designSystemStyles = require('@mirohq/design-system-styles');
+var designSystemBaseHotkey = require('@mirohq/design-system-base-hotkey');
+var designSystemPrimitive = require('@mirohq/design-system-primitive');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -96,6 +98,12 @@ const useTooltipContext = () => React.useContext(ProviderContext);
 
 const Portal = (props) => /* @__PURE__ */ jsxRuntime.jsx(reactTooltip.Portal, { ...props });
 
+const StyledHotkey = designSystemStitches.styled(designSystemPrimitive.Primitive.span, {
+  marginLeft: "$100"
+});
+
+const Hotkey = React__default["default"].forwardRef(({ children, ...restProps }, forwardRef) => /* @__PURE__ */ jsxRuntime.jsx(StyledHotkey, { ...restProps, ref: forwardRef, children: /* @__PURE__ */ jsxRuntime.jsx(designSystemBaseHotkey.Hotkey, { variant: "inverted", children }) }));
+
 let delayTimer;
 let skipDelayTimer;
 let shouldSkipDelay = false;
@@ -186,6 +194,7 @@ Tooltip.Trigger = Trigger;
 Tooltip.Content = Content;
 Tooltip.Provider = Provider;
 Tooltip.Portal = Portal;
+Tooltip.Hotkey = Hotkey;
 
 var types = /*#__PURE__*/Object.freeze({
   __proto__: null

package/dist/main.js.map

@@ -1 +1 @@
-{"version":3,"file":"main.js","sources":["../src/partials/content.styled.tsx","../src/partials/content.tsx","../src/partials/trigger.styled.tsx","../src/partials/trigger.tsx","../src/partials/provider.tsx","../src/partials/portal.tsx","../src/tooltip.tsx"],"sourcesContent":["import type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport {\n  Content as RadixContent,\n  Arrow as RadixArrow,\n} from '@radix-ui/react-tooltip'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { animations } from '@mirohq/design-system-styles'\n\nexport const StyledArrowIcon = styled(RadixArrow, {\n  fill: '$black',\n  height: '5px',\n  transform: 'translateY(-1px)',\n  width: '15px',\n})\n\nexport const StyledContent = styled(RadixContent, {\n  backgroundColor: '$black',\n  borderRadius: '$50',\n  color: '$white',\n  fontSize: '14px',\n  fontWeight: '400',\n  lineHeight: '20px',\n  fontFamily: 'inherit',\n  padding: '$150',\n  '@media (prefers-reduced-motion: no-preference)': {\n    animationDuration: '220ms',\n    animationTimingFunction: 'ease',\n    willChange: 'opacity',\n    '&[data-state=\"delayed-open\"]': {\n      animationName: animations.fadeIn,\n    },\n    '&[data-state=\"closed\"]': {\n      animationName: animations.fadeOut,\n    },\n  },\n  zIndex: '$tooltip',\n})\n\nexport type StyledContentProps = StrictComponentProps<typeof StyledContent>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { StyledContent, StyledArrowIcon } from './content.styled'\nimport type { StyledContentProps } from './content.styled'\nimport type { PointerDownOutsideEvent, Side, Align } from '../types'\n\nexport interface ContentProps extends StyledContentProps {\n  /**\n   * The preferred alignment against the trigger. May change when collisions\n   * occur.\n   */\n  align?: Align\n\n  /**\n   * An offset in pixels from the \"start\" or \"end\" alignment options.\n   */\n  alignOffset?: number\n\n  /**\n   * The distance in pixels from the trigger.\n   */\n  sideOffset?: number\n\n  /** The preferred side of the trigger to render against when open.\n   * Will be reversed when collisions occur and avoidCollisions is enabled.\n   */\n  side?: Side\n\n  /**\n   * When true, overrides the side and align preferences to prevent collisions\n   * with window edges.\n   */\n  avoidCollisions?: boolean\n\n  /**\n   * The distance in pixels from window edges where collision detection should\n   * occur.\n   */\n  collisionPadding?: number\n\n  /**\n   * Used to force mounting when more control is needed. Useful when controlling\n   * animation with React animation libraries. It inherits from Tooltip.Portal.\n   */\n  forceMount?: true\n\n  /**\n   * The element used as the collision boundary. By default this is the\n   * viewport, though you can provide additional element(s) to be included in\n   * this check.\n   */\n  collisionBoundary?: Element | null\n\n  /**\n   * The sticky behavior on the align axis. \"partial\" will keep the content in\n   * the boundary as long as the trigger is at least partially in the boundary\n   * whilst \"always\" will keep the content in the boundary regardless.\n   */\n  sticky?: 'partial' | 'always'\n\n  /**\n   * Whether to hide the content when the trigger becomes fully occluded.\n   */\n  hideWhenDetached?: boolean\n\n  /**\n   * Event handler called when the escape key is down. It can be prevented by\n   * calling event.preventDefault.\n   */\n  onEscapeKeyDown?: (event: KeyboardEvent) => void\n\n  /**\n   * Event handler called when a pointer event occurs outside the bounds of the\n   * component. It can be prevented by calling event.preventDefault.\n   */\n  onPointerDownOutside?: (event: PointerDownOutsideEvent) => void\n}\n\nexport const Content = React.forwardRef<\n  ElementRef<typeof StyledContent>,\n  ContentProps\n>(\n  (\n    {\n      align = 'center',\n      alignOffset = 0,\n      avoidCollisions = true,\n      collisionPadding = 0,\n      children,\n      side = 'top',\n      sideOffset = 5,\n      sticky = 'partial',\n      ...restProps\n    },\n    forwardRef\n  ) => (\n    <StyledContent\n      {...restProps}\n      ref={forwardRef}\n      align={align}\n      alignOffset={alignOffset}\n      avoidCollisions={avoidCollisions}\n      collisionPadding={collisionPadding}\n      side={side}\n      sideOffset={sideOffset}\n      sticky={sticky}\n    >\n      {children}\n      <StyledArrowIcon />\n    </StyledContent>\n  )\n)\n\nContent.displayName = 'Tooltip.Content'\n","import { styled } from '@mirohq/design-system-stitches'\nimport { Trigger } from '@radix-ui/react-tooltip'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\nexport const StyledTrigger = styled(Trigger)\n\nexport type StyledTriggerProps = StrictComponentProps<typeof StyledTrigger>\n","import React from 'react'\nimport type { ElementRef, DOMAttributes } from 'react'\n\nimport { StyledTrigger } from './trigger.styled'\nimport type { StyledTriggerProps } from './trigger.styled'\n\nexport interface TriggerProps extends StyledTriggerProps {\n  /**\n   * temporary the same as onClick, later will be added touch events support\n   */\n  onPress?: DOMAttributes<HTMLElement>['onClick']\n}\n\nexport const Trigger = React.forwardRef<\n  ElementRef<typeof StyledTrigger>,\n  TriggerProps\n>(({ onPress, onClick, ...restProps }, forwardRef) => (\n  <StyledTrigger\n    {...restProps}\n    onClick={onPress ?? onClick}\n    data-tooltip-trigger=''\n    ref={forwardRef}\n  />\n))\n\nTrigger.displayName = 'Tooltip.Trigger'\n","import React, { createContext, useContext } from 'react'\n\nexport interface ProviderProps {\n  /**\n   * The duration from when the mouse enters a tooltip trigger until\n   * the tooltip opens.\n   */\n  delayDuration?: number\n\n  /**\n   * How much time a user has to enter another trigger without incurring\n   * a delay again.\n   */\n  skipDelayDuration?: number\n\n  /**\n   * The content\n   */\n  children?: React.ReactNode\n}\n\nexport const ProviderContext = createContext<ProviderProps>({} as any)\n\nexport const Provider: React.FC<ProviderProps> = ({\n  children,\n  ...restProps\n}) => (\n  <ProviderContext.Provider value={restProps}>\n    {children}\n  </ProviderContext.Provider>\n)\n\nProvider.displayName = 'Tooltip.Provider'\n\nexport const useTooltipContext = (): ProviderProps =>\n  useContext(ProviderContext)\n","import React from 'react'\nimport type { TooltipPortalProps } from '@radix-ui/react-tooltip'\nimport { Portal as RadixPortal } from '@radix-ui/react-tooltip'\n\nexport interface PortalProps extends TooltipPortalProps {\n  /**\n   * Used to force mounting when more control is needed. Useful when controlling\n   * animation with React animation libraries. If used on this part, it will be\n   * inherited by Tooltip.Content.\n   */\n  forceMount?: true\n\n  /**\n   * Specify a container element to portal the content into.\n   */\n  container?: HTMLElement | null\n}\n\nexport const Portal: React.FC<PortalProps> = props => <RadixPortal {...props} />\n","import React, { useState, useCallback, useEffect, useRef } from 'react'\nimport {\n  Provider as RadixProvider,\n  Root as RadixTooltip,\n} from '@radix-ui/react-tooltip'\n\nimport { Content } from './partials/content'\nimport { Trigger } from './partials/trigger'\nimport { Provider, useTooltipContext } from './partials/provider'\nimport { Portal } from './partials/portal'\n\nexport interface TooltipProps {\n  /**\n   * The open state of the tooltip when it is initially rendered. Use when you\n   * do not need to control its open state.\n   */\n  defaultOpen?: boolean\n\n  /**\n   * The current state of the tooltip.\n   */\n  open?: boolean\n\n  /**\n   * Event handler called when the tooltip opens.\n   */\n  onOpen?: () => void\n\n  /**\n   * Event handler called when the tooltip closes.\n   */\n  onClose?: () => void\n\n  /**\n   * Overrides the duration given to the `Provider` to customize the open delay\n   * for a specific tooltip.\n   * @default 200\n   */\n  delayDuration?: number\n\n  /**\n   * How much time a user has to enter another trigger without incurring\n   * a delay again.\n   * @default 500\n   */\n  skipDelayDuration?: number\n\n  /**\n   * Clears the delayDuration and skipDelayDuration timeouts when the component\n   * is unmounted. This flag is `true` by default when using NODE_ENV=test.\n   * @default false\n   */\n  clearDelaysOnUnmount?: boolean\n\n  /**\n   * Closes the tooltip as soon as the pointer leaves the trigger making it\n   * impossible to hover the content.\n   */\n  disableHoverableContent?: boolean\n\n  /**\n   * The content\n   */\n  children: React.ReactNode\n}\n\nlet delayTimer: ReturnType<typeof setTimeout> | undefined\nlet skipDelayTimer: ReturnType<typeof setTimeout> | undefined\nlet shouldSkipDelay = false\n\nexport const DEFAULT_SKIP_DELAY_DURATION = 500\nexport const DEFAULT_DELAY_DURATION = 200\n\nexport const Tooltip: React.FC<TooltipProps> & Partials = ({\n  defaultOpen = false,\n  open,\n  onOpen,\n  onClose,\n  skipDelayDuration,\n  delayDuration,\n  disableHoverableContent,\n  clearDelaysOnUnmount = process.env.NODE_ENV === 'test',\n  children,\n}) => {\n  const context = useTooltipContext()\n  const isMounted = useRef(false)\n\n  const [openState, setOpenState] = useState(defaultOpen)\n  const setDelayedOpen = useCallback(\n    (newOpenState: boolean) => {\n      clearTimeout(delayTimer)\n      clearTimeout(skipDelayTimer)\n\n      if (!newOpenState) {\n        skipDelayTimer = setTimeout(() => {\n          shouldSkipDelay = false\n        }, skipDelayDuration ?? context.skipDelayDuration ?? DEFAULT_SKIP_DELAY_DURATION)\n\n        setOpenState(false)\n        onClose?.()\n        return\n      }\n\n      if (\n        shouldSkipDelay ||\n        document.querySelector('[data-tooltip-trigger]:focus') != null\n      ) {\n        setOpenState(newOpenState)\n        return\n      }\n\n      delayTimer = setTimeout(() => {\n        // ignore it if the the user quickly hover the trigger and leave before the timeout\n        // (unfortunately JSDOM seems not to support :hover selector)\n        if (\n          document.querySelector('[data-tooltip-trigger]:hover') == null &&\n          process.env.NODE_ENV !== 'test'\n        ) {\n          return\n        }\n\n        shouldSkipDelay = true\n\n        if (isMounted.current) {\n          setOpenState(true)\n          onOpen?.()\n        }\n      }, delayDuration ?? context.delayDuration ?? DEFAULT_DELAY_DURATION)\n    },\n    [delayDuration, skipDelayDuration, context, onClose, onOpen]\n  )\n\n  const handleOpenChange = useCallback(\n    (newState: boolean) => {\n      if (open == null) {\n        setDelayedOpen(newState)\n        return\n      }\n\n      newState ? onOpen?.() : onClose?.()\n    },\n    [open, onOpen, onClose, setDelayedOpen]\n  )\n\n  useEffect(\n    () => () => {\n      if (clearDelaysOnUnmount) {\n        clearTimeout(delayTimer)\n        clearTimeout(skipDelayTimer)\n        shouldSkipDelay = false\n      }\n    },\n    [clearDelaysOnUnmount]\n  )\n\n  useEffect(() => {\n    isMounted.current = true\n    return () => {\n      isMounted.current = false\n    }\n  }, [])\n\n  return (\n    <RadixProvider delayDuration={0} skipDelayDuration={0}>\n      <RadixTooltip\n        disableHoverableContent={disableHoverableContent}\n        open={open ?? openState}\n        delayDuration={0} // we control it manually\n        onOpenChange={handleOpenChange}\n      >\n        {children}\n      </RadixTooltip>\n    </RadixProvider>\n  )\n}\n\n// Partials\n// -----------------------------------------------------------------------------\n\nexport interface Partials {\n  Trigger: typeof Trigger\n  Content: typeof Content\n  Provider: typeof Provider\n  Portal: typeof Portal\n}\n\nTooltip.Trigger = Trigger\nTooltip.Content = Content\nTooltip.Provider = Provider\nTooltip.Portal = Portal\n"],"names":["styled","RadixArrow","RadixContent","animations","React","jsxs","Trigger","jsx","createContext","useContext","RadixPortal","useRef","useState","useCallback","useEffect","RadixProvider","RadixTooltip"],"mappings":"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"}
+{"version":3,"file":"main.js","sources":["../src/partials/content.styled.tsx","../src/partials/content.tsx","../src/partials/trigger.styled.tsx","../src/partials/trigger.tsx","../src/partials/provider.tsx","../src/partials/portal.tsx","../src/partials/hotkey.styled.tsx","../src/partials/hotkey.tsx","../src/tooltip.tsx"],"sourcesContent":["import type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport {\n  Content as RadixContent,\n  Arrow as RadixArrow,\n} from '@radix-ui/react-tooltip'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { animations } from '@mirohq/design-system-styles'\n\nexport const StyledArrowIcon = styled(RadixArrow, {\n  fill: '$black',\n  height: '5px',\n  transform: 'translateY(-1px)',\n  width: '15px',\n})\n\nexport const StyledContent = styled(RadixContent, {\n  backgroundColor: '$black',\n  borderRadius: '$50',\n  color: '$white',\n  fontSize: '14px',\n  fontWeight: '400',\n  lineHeight: '20px',\n  fontFamily: 'inherit',\n  padding: '$150',\n  '@media (prefers-reduced-motion: no-preference)': {\n    animationDuration: '220ms',\n    animationTimingFunction: 'ease',\n    willChange: 'opacity',\n    '&[data-state=\"delayed-open\"]': {\n      animationName: animations.fadeIn,\n    },\n    '&[data-state=\"closed\"]': {\n      animationName: animations.fadeOut,\n    },\n  },\n  zIndex: '$tooltip',\n})\n\nexport type StyledContentProps = StrictComponentProps<typeof StyledContent>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { StyledContent, StyledArrowIcon } from './content.styled'\nimport type { StyledContentProps } from './content.styled'\nimport type { PointerDownOutsideEvent, Side, Align } from '../types'\n\nexport interface ContentProps extends StyledContentProps {\n  /**\n   * The preferred alignment against the trigger. May change when collisions\n   * occur.\n   */\n  align?: Align\n\n  /**\n   * An offset in pixels from the \"start\" or \"end\" alignment options.\n   */\n  alignOffset?: number\n\n  /**\n   * The distance in pixels from the trigger.\n   */\n  sideOffset?: number\n\n  /** The preferred side of the trigger to render against when open.\n   * Will be reversed when collisions occur and avoidCollisions is enabled.\n   */\n  side?: Side\n\n  /**\n   * When true, overrides the side and align preferences to prevent collisions\n   * with window edges.\n   */\n  avoidCollisions?: boolean\n\n  /**\n   * The distance in pixels from window edges where collision detection should\n   * occur.\n   */\n  collisionPadding?: number\n\n  /**\n   * Used to force mounting when more control is needed. Useful when controlling\n   * animation with React animation libraries. It inherits from Tooltip.Portal.\n   */\n  forceMount?: true\n\n  /**\n   * The element used as the collision boundary. By default this is the\n   * viewport, though you can provide additional element(s) to be included in\n   * this check.\n   */\n  collisionBoundary?: Element | null\n\n  /**\n   * The sticky behavior on the align axis. \"partial\" will keep the content in\n   * the boundary as long as the trigger is at least partially in the boundary\n   * whilst \"always\" will keep the content in the boundary regardless.\n   */\n  sticky?: 'partial' | 'always'\n\n  /**\n   * Whether to hide the content when the trigger becomes fully occluded.\n   */\n  hideWhenDetached?: boolean\n\n  /**\n   * Event handler called when the escape key is down. It can be prevented by\n   * calling event.preventDefault.\n   */\n  onEscapeKeyDown?: (event: KeyboardEvent) => void\n\n  /**\n   * Event handler called when a pointer event occurs outside the bounds of the\n   * component. It can be prevented by calling event.preventDefault.\n   */\n  onPointerDownOutside?: (event: PointerDownOutsideEvent) => void\n}\n\nexport const Content = React.forwardRef<\n  ElementRef<typeof StyledContent>,\n  ContentProps\n>(\n  (\n    {\n      align = 'center',\n      alignOffset = 0,\n      avoidCollisions = true,\n      collisionPadding = 0,\n      children,\n      side = 'top',\n      sideOffset = 5,\n      sticky = 'partial',\n      ...restProps\n    },\n    forwardRef\n  ) => (\n    <StyledContent\n      {...restProps}\n      ref={forwardRef}\n      align={align}\n      alignOffset={alignOffset}\n      avoidCollisions={avoidCollisions}\n      collisionPadding={collisionPadding}\n      side={side}\n      sideOffset={sideOffset}\n      sticky={sticky}\n    >\n      {children}\n      <StyledArrowIcon />\n    </StyledContent>\n  )\n)\n\nContent.displayName = 'Tooltip.Content'\n","import { styled } from '@mirohq/design-system-stitches'\nimport { Trigger } from '@radix-ui/react-tooltip'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\nexport const StyledTrigger = styled(Trigger)\n\nexport type StyledTriggerProps = StrictComponentProps<typeof StyledTrigger>\n","import React from 'react'\nimport type { ElementRef, DOMAttributes } from 'react'\n\nimport { StyledTrigger } from './trigger.styled'\nimport type { StyledTriggerProps } from './trigger.styled'\n\nexport interface TriggerProps extends StyledTriggerProps {\n  /**\n   * temporary the same as onClick, later will be added touch events support\n   */\n  onPress?: DOMAttributes<HTMLElement>['onClick']\n}\n\nexport const Trigger = React.forwardRef<\n  ElementRef<typeof StyledTrigger>,\n  TriggerProps\n>(({ onPress, onClick, ...restProps }, forwardRef) => (\n  <StyledTrigger\n    {...restProps}\n    onClick={onPress ?? onClick}\n    data-tooltip-trigger=''\n    ref={forwardRef}\n  />\n))\n\nTrigger.displayName = 'Tooltip.Trigger'\n","import React, { createContext, useContext } from 'react'\n\nexport interface ProviderProps {\n  /**\n   * The duration from when the mouse enters a tooltip trigger until\n   * the tooltip opens.\n   */\n  delayDuration?: number\n\n  /**\n   * How much time a user has to enter another trigger without incurring\n   * a delay again.\n   */\n  skipDelayDuration?: number\n\n  /**\n   * The content\n   */\n  children?: React.ReactNode\n}\n\nexport const ProviderContext = createContext<ProviderProps>({} as any)\n\nexport const Provider: React.FC<ProviderProps> = ({\n  children,\n  ...restProps\n}) => (\n  <ProviderContext.Provider value={restProps}>\n    {children}\n  </ProviderContext.Provider>\n)\n\nProvider.displayName = 'Tooltip.Provider'\n\nexport const useTooltipContext = (): ProviderProps =>\n  useContext(ProviderContext)\n","import React from 'react'\nimport type { TooltipPortalProps } from '@radix-ui/react-tooltip'\nimport { Portal as RadixPortal } from '@radix-ui/react-tooltip'\n\nexport interface PortalProps extends TooltipPortalProps {\n  /**\n   * Used to force mounting when more control is needed. Useful when controlling\n   * animation with React animation libraries. If used on this part, it will be\n   * inherited by Tooltip.Content.\n   */\n  forceMount?: true\n\n  /**\n   * Specify a container element to portal the content into.\n   */\n  container?: HTMLElement | null\n}\n\nexport const Portal: React.FC<PortalProps> = props => <RadixPortal {...props} />\n","import type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\n\nexport const StyledHotkey = styled(Primitive.span, {\n  marginLeft: '$100',\n})\n\nexport type StyledHotkeyProps = StrictComponentProps<typeof StyledHotkey>\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport { Hotkey as BaseHotkey } from '@mirohq/design-system-base-hotkey'\n\nimport type { StyledHotkeyProps } from './hotkey.styled'\nimport { StyledHotkey } from './hotkey.styled'\n\nexport interface HotkeyProps extends StyledHotkeyProps {\n  /**\n   * The content.\n   */\n  children: string\n}\n\nexport const Hotkey = React.forwardRef<\n  ElementRef<typeof StyledHotkey>,\n  HotkeyProps\n>(({ children, ...restProps }, forwardRef) => (\n  <StyledHotkey {...restProps} ref={forwardRef}>\n    <BaseHotkey variant='inverted'>{children}</BaseHotkey>\n  </StyledHotkey>\n))\n","import React, { useState, useCallback, useEffect, useRef } from 'react'\nimport {\n  Provider as RadixProvider,\n  Root as RadixTooltip,\n} from '@radix-ui/react-tooltip'\n\nimport { Content } from './partials/content'\nimport { Trigger } from './partials/trigger'\nimport { Provider, useTooltipContext } from './partials/provider'\nimport { Portal } from './partials/portal'\nimport { Hotkey } from './partials/hotkey'\n\nexport interface TooltipProps {\n  /**\n   * The open state of the tooltip when it is initially rendered. Use when you\n   * do not need to control its open state.\n   */\n  defaultOpen?: boolean\n\n  /**\n   * The current state of the tooltip.\n   */\n  open?: boolean\n\n  /**\n   * Event handler called when the tooltip opens.\n   */\n  onOpen?: () => void\n\n  /**\n   * Event handler called when the tooltip closes.\n   */\n  onClose?: () => void\n\n  /**\n   * Overrides the duration given to the `Provider` to customize the open delay\n   * for a specific tooltip.\n   * @default 200\n   */\n  delayDuration?: number\n\n  /**\n   * How much time a user has to enter another trigger without incurring\n   * a delay again.\n   * @default 500\n   */\n  skipDelayDuration?: number\n\n  /**\n   * Clears the delayDuration and skipDelayDuration timeouts when the component\n   * is unmounted. This flag is `true` by default when using NODE_ENV=test.\n   * @default false\n   */\n  clearDelaysOnUnmount?: boolean\n\n  /**\n   * Closes the tooltip as soon as the pointer leaves the trigger making it\n   * impossible to hover the content.\n   */\n  disableHoverableContent?: boolean\n\n  /**\n   * The content\n   */\n  children: React.ReactNode\n}\n\nlet delayTimer: ReturnType<typeof setTimeout> | undefined\nlet skipDelayTimer: ReturnType<typeof setTimeout> | undefined\nlet shouldSkipDelay = false\n\nexport const DEFAULT_SKIP_DELAY_DURATION = 500\nexport const DEFAULT_DELAY_DURATION = 200\n\nexport const Tooltip: React.FC<TooltipProps> & Partials = ({\n  defaultOpen = false,\n  open,\n  onOpen,\n  onClose,\n  skipDelayDuration,\n  delayDuration,\n  disableHoverableContent,\n  clearDelaysOnUnmount = process.env.NODE_ENV === 'test',\n  children,\n}) => {\n  const context = useTooltipContext()\n  const isMounted = useRef(false)\n\n  const [openState, setOpenState] = useState(defaultOpen)\n  const setDelayedOpen = useCallback(\n    (newOpenState: boolean) => {\n      clearTimeout(delayTimer)\n      clearTimeout(skipDelayTimer)\n\n      if (!newOpenState) {\n        skipDelayTimer = setTimeout(() => {\n          shouldSkipDelay = false\n        }, skipDelayDuration ?? context.skipDelayDuration ?? DEFAULT_SKIP_DELAY_DURATION)\n\n        setOpenState(false)\n        onClose?.()\n        return\n      }\n\n      if (\n        shouldSkipDelay ||\n        document.querySelector('[data-tooltip-trigger]:focus') != null\n      ) {\n        setOpenState(newOpenState)\n        return\n      }\n\n      delayTimer = setTimeout(() => {\n        // ignore it if the the user quickly hover the trigger and leave before the timeout\n        // (unfortunately JSDOM seems not to support :hover selector)\n        if (\n          document.querySelector('[data-tooltip-trigger]:hover') == null &&\n          process.env.NODE_ENV !== 'test'\n        ) {\n          return\n        }\n\n        shouldSkipDelay = true\n\n        if (isMounted.current) {\n          setOpenState(true)\n          onOpen?.()\n        }\n      }, delayDuration ?? context.delayDuration ?? DEFAULT_DELAY_DURATION)\n    },\n    [delayDuration, skipDelayDuration, context, onClose, onOpen]\n  )\n\n  const handleOpenChange = useCallback(\n    (newState: boolean) => {\n      if (open == null) {\n        setDelayedOpen(newState)\n        return\n      }\n\n      newState ? onOpen?.() : onClose?.()\n    },\n    [open, onOpen, onClose, setDelayedOpen]\n  )\n\n  useEffect(\n    () => () => {\n      if (clearDelaysOnUnmount) {\n        clearTimeout(delayTimer)\n        clearTimeout(skipDelayTimer)\n        shouldSkipDelay = false\n      }\n    },\n    [clearDelaysOnUnmount]\n  )\n\n  useEffect(() => {\n    isMounted.current = true\n    return () => {\n      isMounted.current = false\n    }\n  }, [])\n\n  return (\n    <RadixProvider delayDuration={0} skipDelayDuration={0}>\n      <RadixTooltip\n        disableHoverableContent={disableHoverableContent}\n        open={open ?? openState}\n        delayDuration={0} // we control it manually\n        onOpenChange={handleOpenChange}\n      >\n        {children}\n      </RadixTooltip>\n    </RadixProvider>\n  )\n}\n\n// Partials\n// -----------------------------------------------------------------------------\n\nexport interface Partials {\n  Trigger: typeof Trigger\n  Content: typeof Content\n  Provider: typeof Provider\n  Portal: typeof Portal\n  Hotkey: typeof Hotkey\n}\n\nTooltip.Trigger = Trigger\nTooltip.Content = Content\nTooltip.Provider = Provider\nTooltip.Portal = Portal\nTooltip.Hotkey = Hotkey\n"],"names":["styled","RadixArrow","RadixContent","animations","React","jsxs","Trigger","jsx","createContext","useContext","RadixPortal","Primitive","BaseHotkey","useRef","useState","useCallback","useEffect","RadixProvider","RadixTooltip"],"mappings":"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"}

package/dist/module.js

@@ -3,6 +3,8 @@ import React, { createContext, useContext, useRef, useState, useCallback, useEff
 import { Arrow, Content as Content$1, Trigger as Trigger$1, Portal as Portal$1, Provider as Provider$1, Root } from '@radix-ui/react-tooltip';
 import { styled } from '@mirohq/design-system-stitches';
 import { animations } from '@mirohq/design-system-styles';
+import { Hotkey as Hotkey$1 } from '@mirohq/design-system-base-hotkey';
+import { Primitive } from '@mirohq/design-system-primitive';
 
 const StyledArrowIcon = styled(Arrow, {
   fill: "$black",
@@ -88,6 +90,12 @@ const useTooltipContext = () => useContext(ProviderContext);
 
 const Portal = (props) => /* @__PURE__ */ jsx(Portal$1, { ...props });
 
+const StyledHotkey = styled(Primitive.span, {
+  marginLeft: "$100"
+});
+
+const Hotkey = React.forwardRef(({ children, ...restProps }, forwardRef) => /* @__PURE__ */ jsx(StyledHotkey, { ...restProps, ref: forwardRef, children: /* @__PURE__ */ jsx(Hotkey$1, { variant: "inverted", children }) }));
+
 let delayTimer;
 let skipDelayTimer;
 let shouldSkipDelay = false;
@@ -178,6 +186,7 @@ Tooltip.Trigger = Trigger;
 Tooltip.Content = Content;
 Tooltip.Provider = Provider;
 Tooltip.Portal = Portal;
+Tooltip.Hotkey = Hotkey;
 
 var types = /*#__PURE__*/Object.freeze({
   __proto__: null

package/dist/module.js.map

@@ -1 +1 @@
-{"version":3,"file":"module.js","sources":["../src/partials/content.styled.tsx","../src/partials/content.tsx","../src/partials/trigger.styled.tsx","../src/partials/trigger.tsx","../src/partials/provider.tsx","../src/partials/portal.tsx","../src/tooltip.tsx"],"sourcesContent":["import type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport {\n  Content as RadixContent,\n  Arrow as RadixArrow,\n} from '@radix-ui/react-tooltip'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { animations } from '@mirohq/design-system-styles'\n\nexport const StyledArrowIcon = styled(RadixArrow, {\n  fill: '$black',\n  height: '5px',\n  transform: 'translateY(-1px)',\n  width: '15px',\n})\n\nexport const StyledContent = styled(RadixContent, {\n  backgroundColor: '$black',\n  borderRadius: '$50',\n  color: '$white',\n  fontSize: '14px',\n  fontWeight: '400',\n  lineHeight: '20px',\n  fontFamily: 'inherit',\n  padding: '$150',\n  '@media (prefers-reduced-motion: no-preference)': {\n    animationDuration: '220ms',\n    animationTimingFunction: 'ease',\n    willChange: 'opacity',\n    '&[data-state=\"delayed-open\"]': {\n      animationName: animations.fadeIn,\n    },\n    '&[data-state=\"closed\"]': {\n      animationName: animations.fadeOut,\n    },\n  },\n  zIndex: '$tooltip',\n})\n\nexport type StyledContentProps = StrictComponentProps<typeof StyledContent>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { StyledContent, StyledArrowIcon } from './content.styled'\nimport type { StyledContentProps } from './content.styled'\nimport type { PointerDownOutsideEvent, Side, Align } from '../types'\n\nexport interface ContentProps extends StyledContentProps {\n  /**\n   * The preferred alignment against the trigger. May change when collisions\n   * occur.\n   */\n  align?: Align\n\n  /**\n   * An offset in pixels from the \"start\" or \"end\" alignment options.\n   */\n  alignOffset?: number\n\n  /**\n   * The distance in pixels from the trigger.\n   */\n  sideOffset?: number\n\n  /** The preferred side of the trigger to render against when open.\n   * Will be reversed when collisions occur and avoidCollisions is enabled.\n   */\n  side?: Side\n\n  /**\n   * When true, overrides the side and align preferences to prevent collisions\n   * with window edges.\n   */\n  avoidCollisions?: boolean\n\n  /**\n   * The distance in pixels from window edges where collision detection should\n   * occur.\n   */\n  collisionPadding?: number\n\n  /**\n   * Used to force mounting when more control is needed. Useful when controlling\n   * animation with React animation libraries. It inherits from Tooltip.Portal.\n   */\n  forceMount?: true\n\n  /**\n   * The element used as the collision boundary. By default this is the\n   * viewport, though you can provide additional element(s) to be included in\n   * this check.\n   */\n  collisionBoundary?: Element | null\n\n  /**\n   * The sticky behavior on the align axis. \"partial\" will keep the content in\n   * the boundary as long as the trigger is at least partially in the boundary\n   * whilst \"always\" will keep the content in the boundary regardless.\n   */\n  sticky?: 'partial' | 'always'\n\n  /**\n   * Whether to hide the content when the trigger becomes fully occluded.\n   */\n  hideWhenDetached?: boolean\n\n  /**\n   * Event handler called when the escape key is down. It can be prevented by\n   * calling event.preventDefault.\n   */\n  onEscapeKeyDown?: (event: KeyboardEvent) => void\n\n  /**\n   * Event handler called when a pointer event occurs outside the bounds of the\n   * component. It can be prevented by calling event.preventDefault.\n   */\n  onPointerDownOutside?: (event: PointerDownOutsideEvent) => void\n}\n\nexport const Content = React.forwardRef<\n  ElementRef<typeof StyledContent>,\n  ContentProps\n>(\n  (\n    {\n      align = 'center',\n      alignOffset = 0,\n      avoidCollisions = true,\n      collisionPadding = 0,\n      children,\n      side = 'top',\n      sideOffset = 5,\n      sticky = 'partial',\n      ...restProps\n    },\n    forwardRef\n  ) => (\n    <StyledContent\n      {...restProps}\n      ref={forwardRef}\n      align={align}\n      alignOffset={alignOffset}\n      avoidCollisions={avoidCollisions}\n      collisionPadding={collisionPadding}\n      side={side}\n      sideOffset={sideOffset}\n      sticky={sticky}\n    >\n      {children}\n      <StyledArrowIcon />\n    </StyledContent>\n  )\n)\n\nContent.displayName = 'Tooltip.Content'\n","import { styled } from '@mirohq/design-system-stitches'\nimport { Trigger } from '@radix-ui/react-tooltip'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\nexport const StyledTrigger = styled(Trigger)\n\nexport type StyledTriggerProps = StrictComponentProps<typeof StyledTrigger>\n","import React from 'react'\nimport type { ElementRef, DOMAttributes } from 'react'\n\nimport { StyledTrigger } from './trigger.styled'\nimport type { StyledTriggerProps } from './trigger.styled'\n\nexport interface TriggerProps extends StyledTriggerProps {\n  /**\n   * temporary the same as onClick, later will be added touch events support\n   */\n  onPress?: DOMAttributes<HTMLElement>['onClick']\n}\n\nexport const Trigger = React.forwardRef<\n  ElementRef<typeof StyledTrigger>,\n  TriggerProps\n>(({ onPress, onClick, ...restProps }, forwardRef) => (\n  <StyledTrigger\n    {...restProps}\n    onClick={onPress ?? onClick}\n    data-tooltip-trigger=''\n    ref={forwardRef}\n  />\n))\n\nTrigger.displayName = 'Tooltip.Trigger'\n","import React, { createContext, useContext } from 'react'\n\nexport interface ProviderProps {\n  /**\n   * The duration from when the mouse enters a tooltip trigger until\n   * the tooltip opens.\n   */\n  delayDuration?: number\n\n  /**\n   * How much time a user has to enter another trigger without incurring\n   * a delay again.\n   */\n  skipDelayDuration?: number\n\n  /**\n   * The content\n   */\n  children?: React.ReactNode\n}\n\nexport const ProviderContext = createContext<ProviderProps>({} as any)\n\nexport const Provider: React.FC<ProviderProps> = ({\n  children,\n  ...restProps\n}) => (\n  <ProviderContext.Provider value={restProps}>\n    {children}\n  </ProviderContext.Provider>\n)\n\nProvider.displayName = 'Tooltip.Provider'\n\nexport const useTooltipContext = (): ProviderProps =>\n  useContext(ProviderContext)\n","import React from 'react'\nimport type { TooltipPortalProps } from '@radix-ui/react-tooltip'\nimport { Portal as RadixPortal } from '@radix-ui/react-tooltip'\n\nexport interface PortalProps extends TooltipPortalProps {\n  /**\n   * Used to force mounting when more control is needed. Useful when controlling\n   * animation with React animation libraries. If used on this part, it will be\n   * inherited by Tooltip.Content.\n   */\n  forceMount?: true\n\n  /**\n   * Specify a container element to portal the content into.\n   */\n  container?: HTMLElement | null\n}\n\nexport const Portal: React.FC<PortalProps> = props => <RadixPortal {...props} />\n","import React, { useState, useCallback, useEffect, useRef } from 'react'\nimport {\n  Provider as RadixProvider,\n  Root as RadixTooltip,\n} from '@radix-ui/react-tooltip'\n\nimport { Content } from './partials/content'\nimport { Trigger } from './partials/trigger'\nimport { Provider, useTooltipContext } from './partials/provider'\nimport { Portal } from './partials/portal'\n\nexport interface TooltipProps {\n  /**\n   * The open state of the tooltip when it is initially rendered. Use when you\n   * do not need to control its open state.\n   */\n  defaultOpen?: boolean\n\n  /**\n   * The current state of the tooltip.\n   */\n  open?: boolean\n\n  /**\n   * Event handler called when the tooltip opens.\n   */\n  onOpen?: () => void\n\n  /**\n   * Event handler called when the tooltip closes.\n   */\n  onClose?: () => void\n\n  /**\n   * Overrides the duration given to the `Provider` to customize the open delay\n   * for a specific tooltip.\n   * @default 200\n   */\n  delayDuration?: number\n\n  /**\n   * How much time a user has to enter another trigger without incurring\n   * a delay again.\n   * @default 500\n   */\n  skipDelayDuration?: number\n\n  /**\n   * Clears the delayDuration and skipDelayDuration timeouts when the component\n   * is unmounted. This flag is `true` by default when using NODE_ENV=test.\n   * @default false\n   */\n  clearDelaysOnUnmount?: boolean\n\n  /**\n   * Closes the tooltip as soon as the pointer leaves the trigger making it\n   * impossible to hover the content.\n   */\n  disableHoverableContent?: boolean\n\n  /**\n   * The content\n   */\n  children: React.ReactNode\n}\n\nlet delayTimer: ReturnType<typeof setTimeout> | undefined\nlet skipDelayTimer: ReturnType<typeof setTimeout> | undefined\nlet shouldSkipDelay = false\n\nexport const DEFAULT_SKIP_DELAY_DURATION = 500\nexport const DEFAULT_DELAY_DURATION = 200\n\nexport const Tooltip: React.FC<TooltipProps> & Partials = ({\n  defaultOpen = false,\n  open,\n  onOpen,\n  onClose,\n  skipDelayDuration,\n  delayDuration,\n  disableHoverableContent,\n  clearDelaysOnUnmount = process.env.NODE_ENV === 'test',\n  children,\n}) => {\n  const context = useTooltipContext()\n  const isMounted = useRef(false)\n\n  const [openState, setOpenState] = useState(defaultOpen)\n  const setDelayedOpen = useCallback(\n    (newOpenState: boolean) => {\n      clearTimeout(delayTimer)\n      clearTimeout(skipDelayTimer)\n\n      if (!newOpenState) {\n        skipDelayTimer = setTimeout(() => {\n          shouldSkipDelay = false\n        }, skipDelayDuration ?? context.skipDelayDuration ?? DEFAULT_SKIP_DELAY_DURATION)\n\n        setOpenState(false)\n        onClose?.()\n        return\n      }\n\n      if (\n        shouldSkipDelay ||\n        document.querySelector('[data-tooltip-trigger]:focus') != null\n      ) {\n        setOpenState(newOpenState)\n        return\n      }\n\n      delayTimer = setTimeout(() => {\n        // ignore it if the the user quickly hover the trigger and leave before the timeout\n        // (unfortunately JSDOM seems not to support :hover selector)\n        if (\n          document.querySelector('[data-tooltip-trigger]:hover') == null &&\n          process.env.NODE_ENV !== 'test'\n        ) {\n          return\n        }\n\n        shouldSkipDelay = true\n\n        if (isMounted.current) {\n          setOpenState(true)\n          onOpen?.()\n        }\n      }, delayDuration ?? context.delayDuration ?? DEFAULT_DELAY_DURATION)\n    },\n    [delayDuration, skipDelayDuration, context, onClose, onOpen]\n  )\n\n  const handleOpenChange = useCallback(\n    (newState: boolean) => {\n      if (open == null) {\n        setDelayedOpen(newState)\n        return\n      }\n\n      newState ? onOpen?.() : onClose?.()\n    },\n    [open, onOpen, onClose, setDelayedOpen]\n  )\n\n  useEffect(\n    () => () => {\n      if (clearDelaysOnUnmount) {\n        clearTimeout(delayTimer)\n        clearTimeout(skipDelayTimer)\n        shouldSkipDelay = false\n      }\n    },\n    [clearDelaysOnUnmount]\n  )\n\n  useEffect(() => {\n    isMounted.current = true\n    return () => {\n      isMounted.current = false\n    }\n  }, [])\n\n  return (\n    <RadixProvider delayDuration={0} skipDelayDuration={0}>\n      <RadixTooltip\n        disableHoverableContent={disableHoverableContent}\n        open={open ?? openState}\n        delayDuration={0} // we control it manually\n        onOpenChange={handleOpenChange}\n      >\n        {children}\n      </RadixTooltip>\n    </RadixProvider>\n  )\n}\n\n// Partials\n// -----------------------------------------------------------------------------\n\nexport interface Partials {\n  Trigger: typeof Trigger\n  Content: typeof Content\n  Provider: typeof Provider\n  Portal: typeof Portal\n}\n\nTooltip.Trigger = Trigger\nTooltip.Content = Content\nTooltip.Provider = Provider\nTooltip.Portal = Portal\n"],"names":["RadixArrow","RadixContent","Trigger","RadixPortal","RadixProvider","RadixTooltip"],"mappings":"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"}
+{"version":3,"file":"module.js","sources":["../src/partials/content.styled.tsx","../src/partials/content.tsx","../src/partials/trigger.styled.tsx","../src/partials/trigger.tsx","../src/partials/provider.tsx","../src/partials/portal.tsx","../src/partials/hotkey.styled.tsx","../src/partials/hotkey.tsx","../src/tooltip.tsx"],"sourcesContent":["import type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport {\n  Content as RadixContent,\n  Arrow as RadixArrow,\n} from '@radix-ui/react-tooltip'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { animations } from '@mirohq/design-system-styles'\n\nexport const StyledArrowIcon = styled(RadixArrow, {\n  fill: '$black',\n  height: '5px',\n  transform: 'translateY(-1px)',\n  width: '15px',\n})\n\nexport const StyledContent = styled(RadixContent, {\n  backgroundColor: '$black',\n  borderRadius: '$50',\n  color: '$white',\n  fontSize: '14px',\n  fontWeight: '400',\n  lineHeight: '20px',\n  fontFamily: 'inherit',\n  padding: '$150',\n  '@media (prefers-reduced-motion: no-preference)': {\n    animationDuration: '220ms',\n    animationTimingFunction: 'ease',\n    willChange: 'opacity',\n    '&[data-state=\"delayed-open\"]': {\n      animationName: animations.fadeIn,\n    },\n    '&[data-state=\"closed\"]': {\n      animationName: animations.fadeOut,\n    },\n  },\n  zIndex: '$tooltip',\n})\n\nexport type StyledContentProps = StrictComponentProps<typeof StyledContent>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { StyledContent, StyledArrowIcon } from './content.styled'\nimport type { StyledContentProps } from './content.styled'\nimport type { PointerDownOutsideEvent, Side, Align } from '../types'\n\nexport interface ContentProps extends StyledContentProps {\n  /**\n   * The preferred alignment against the trigger. May change when collisions\n   * occur.\n   */\n  align?: Align\n\n  /**\n   * An offset in pixels from the \"start\" or \"end\" alignment options.\n   */\n  alignOffset?: number\n\n  /**\n   * The distance in pixels from the trigger.\n   */\n  sideOffset?: number\n\n  /** The preferred side of the trigger to render against when open.\n   * Will be reversed when collisions occur and avoidCollisions is enabled.\n   */\n  side?: Side\n\n  /**\n   * When true, overrides the side and align preferences to prevent collisions\n   * with window edges.\n   */\n  avoidCollisions?: boolean\n\n  /**\n   * The distance in pixels from window edges where collision detection should\n   * occur.\n   */\n  collisionPadding?: number\n\n  /**\n   * Used to force mounting when more control is needed. Useful when controlling\n   * animation with React animation libraries. It inherits from Tooltip.Portal.\n   */\n  forceMount?: true\n\n  /**\n   * The element used as the collision boundary. By default this is the\n   * viewport, though you can provide additional element(s) to be included in\n   * this check.\n   */\n  collisionBoundary?: Element | null\n\n  /**\n   * The sticky behavior on the align axis. \"partial\" will keep the content in\n   * the boundary as long as the trigger is at least partially in the boundary\n   * whilst \"always\" will keep the content in the boundary regardless.\n   */\n  sticky?: 'partial' | 'always'\n\n  /**\n   * Whether to hide the content when the trigger becomes fully occluded.\n   */\n  hideWhenDetached?: boolean\n\n  /**\n   * Event handler called when the escape key is down. It can be prevented by\n   * calling event.preventDefault.\n   */\n  onEscapeKeyDown?: (event: KeyboardEvent) => void\n\n  /**\n   * Event handler called when a pointer event occurs outside the bounds of the\n   * component. It can be prevented by calling event.preventDefault.\n   */\n  onPointerDownOutside?: (event: PointerDownOutsideEvent) => void\n}\n\nexport const Content = React.forwardRef<\n  ElementRef<typeof StyledContent>,\n  ContentProps\n>(\n  (\n    {\n      align = 'center',\n      alignOffset = 0,\n      avoidCollisions = true,\n      collisionPadding = 0,\n      children,\n      side = 'top',\n      sideOffset = 5,\n      sticky = 'partial',\n      ...restProps\n    },\n    forwardRef\n  ) => (\n    <StyledContent\n      {...restProps}\n      ref={forwardRef}\n      align={align}\n      alignOffset={alignOffset}\n      avoidCollisions={avoidCollisions}\n      collisionPadding={collisionPadding}\n      side={side}\n      sideOffset={sideOffset}\n      sticky={sticky}\n    >\n      {children}\n      <StyledArrowIcon />\n    </StyledContent>\n  )\n)\n\nContent.displayName = 'Tooltip.Content'\n","import { styled } from '@mirohq/design-system-stitches'\nimport { Trigger } from '@radix-ui/react-tooltip'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\nexport const StyledTrigger = styled(Trigger)\n\nexport type StyledTriggerProps = StrictComponentProps<typeof StyledTrigger>\n","import React from 'react'\nimport type { ElementRef, DOMAttributes } from 'react'\n\nimport { StyledTrigger } from './trigger.styled'\nimport type { StyledTriggerProps } from './trigger.styled'\n\nexport interface TriggerProps extends StyledTriggerProps {\n  /**\n   * temporary the same as onClick, later will be added touch events support\n   */\n  onPress?: DOMAttributes<HTMLElement>['onClick']\n}\n\nexport const Trigger = React.forwardRef<\n  ElementRef<typeof StyledTrigger>,\n  TriggerProps\n>(({ onPress, onClick, ...restProps }, forwardRef) => (\n  <StyledTrigger\n    {...restProps}\n    onClick={onPress ?? onClick}\n    data-tooltip-trigger=''\n    ref={forwardRef}\n  />\n))\n\nTrigger.displayName = 'Tooltip.Trigger'\n","import React, { createContext, useContext } from 'react'\n\nexport interface ProviderProps {\n  /**\n   * The duration from when the mouse enters a tooltip trigger until\n   * the tooltip opens.\n   */\n  delayDuration?: number\n\n  /**\n   * How much time a user has to enter another trigger without incurring\n   * a delay again.\n   */\n  skipDelayDuration?: number\n\n  /**\n   * The content\n   */\n  children?: React.ReactNode\n}\n\nexport const ProviderContext = createContext<ProviderProps>({} as any)\n\nexport const Provider: React.FC<ProviderProps> = ({\n  children,\n  ...restProps\n}) => (\n  <ProviderContext.Provider value={restProps}>\n    {children}\n  </ProviderContext.Provider>\n)\n\nProvider.displayName = 'Tooltip.Provider'\n\nexport const useTooltipContext = (): ProviderProps =>\n  useContext(ProviderContext)\n","import React from 'react'\nimport type { TooltipPortalProps } from '@radix-ui/react-tooltip'\nimport { Portal as RadixPortal } from '@radix-ui/react-tooltip'\n\nexport interface PortalProps extends TooltipPortalProps {\n  /**\n   * Used to force mounting when more control is needed. Useful when controlling\n   * animation with React animation libraries. If used on this part, it will be\n   * inherited by Tooltip.Content.\n   */\n  forceMount?: true\n\n  /**\n   * Specify a container element to portal the content into.\n   */\n  container?: HTMLElement | null\n}\n\nexport const Portal: React.FC<PortalProps> = props => <RadixPortal {...props} />\n","import type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\n\nexport const StyledHotkey = styled(Primitive.span, {\n  marginLeft: '$100',\n})\n\nexport type StyledHotkeyProps = StrictComponentProps<typeof StyledHotkey>\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport { Hotkey as BaseHotkey } from '@mirohq/design-system-base-hotkey'\n\nimport type { StyledHotkeyProps } from './hotkey.styled'\nimport { StyledHotkey } from './hotkey.styled'\n\nexport interface HotkeyProps extends StyledHotkeyProps {\n  /**\n   * The content.\n   */\n  children: string\n}\n\nexport const Hotkey = React.forwardRef<\n  ElementRef<typeof StyledHotkey>,\n  HotkeyProps\n>(({ children, ...restProps }, forwardRef) => (\n  <StyledHotkey {...restProps} ref={forwardRef}>\n    <BaseHotkey variant='inverted'>{children}</BaseHotkey>\n  </StyledHotkey>\n))\n","import React, { useState, useCallback, useEffect, useRef } from 'react'\nimport {\n  Provider as RadixProvider,\n  Root as RadixTooltip,\n} from '@radix-ui/react-tooltip'\n\nimport { Content } from './partials/content'\nimport { Trigger } from './partials/trigger'\nimport { Provider, useTooltipContext } from './partials/provider'\nimport { Portal } from './partials/portal'\nimport { Hotkey } from './partials/hotkey'\n\nexport interface TooltipProps {\n  /**\n   * The open state of the tooltip when it is initially rendered. Use when you\n   * do not need to control its open state.\n   */\n  defaultOpen?: boolean\n\n  /**\n   * The current state of the tooltip.\n   */\n  open?: boolean\n\n  /**\n   * Event handler called when the tooltip opens.\n   */\n  onOpen?: () => void\n\n  /**\n   * Event handler called when the tooltip closes.\n   */\n  onClose?: () => void\n\n  /**\n   * Overrides the duration given to the `Provider` to customize the open delay\n   * for a specific tooltip.\n   * @default 200\n   */\n  delayDuration?: number\n\n  /**\n   * How much time a user has to enter another trigger without incurring\n   * a delay again.\n   * @default 500\n   */\n  skipDelayDuration?: number\n\n  /**\n   * Clears the delayDuration and skipDelayDuration timeouts when the component\n   * is unmounted. This flag is `true` by default when using NODE_ENV=test.\n   * @default false\n   */\n  clearDelaysOnUnmount?: boolean\n\n  /**\n   * Closes the tooltip as soon as the pointer leaves the trigger making it\n   * impossible to hover the content.\n   */\n  disableHoverableContent?: boolean\n\n  /**\n   * The content\n   */\n  children: React.ReactNode\n}\n\nlet delayTimer: ReturnType<typeof setTimeout> | undefined\nlet skipDelayTimer: ReturnType<typeof setTimeout> | undefined\nlet shouldSkipDelay = false\n\nexport const DEFAULT_SKIP_DELAY_DURATION = 500\nexport const DEFAULT_DELAY_DURATION = 200\n\nexport const Tooltip: React.FC<TooltipProps> & Partials = ({\n  defaultOpen = false,\n  open,\n  onOpen,\n  onClose,\n  skipDelayDuration,\n  delayDuration,\n  disableHoverableContent,\n  clearDelaysOnUnmount = process.env.NODE_ENV === 'test',\n  children,\n}) => {\n  const context = useTooltipContext()\n  const isMounted = useRef(false)\n\n  const [openState, setOpenState] = useState(defaultOpen)\n  const setDelayedOpen = useCallback(\n    (newOpenState: boolean) => {\n      clearTimeout(delayTimer)\n      clearTimeout(skipDelayTimer)\n\n      if (!newOpenState) {\n        skipDelayTimer = setTimeout(() => {\n          shouldSkipDelay = false\n        }, skipDelayDuration ?? context.skipDelayDuration ?? DEFAULT_SKIP_DELAY_DURATION)\n\n        setOpenState(false)\n        onClose?.()\n        return\n      }\n\n      if (\n        shouldSkipDelay ||\n        document.querySelector('[data-tooltip-trigger]:focus') != null\n      ) {\n        setOpenState(newOpenState)\n        return\n      }\n\n      delayTimer = setTimeout(() => {\n        // ignore it if the the user quickly hover the trigger and leave before the timeout\n        // (unfortunately JSDOM seems not to support :hover selector)\n        if (\n          document.querySelector('[data-tooltip-trigger]:hover') == null &&\n          process.env.NODE_ENV !== 'test'\n        ) {\n          return\n        }\n\n        shouldSkipDelay = true\n\n        if (isMounted.current) {\n          setOpenState(true)\n          onOpen?.()\n        }\n      }, delayDuration ?? context.delayDuration ?? DEFAULT_DELAY_DURATION)\n    },\n    [delayDuration, skipDelayDuration, context, onClose, onOpen]\n  )\n\n  const handleOpenChange = useCallback(\n    (newState: boolean) => {\n      if (open == null) {\n        setDelayedOpen(newState)\n        return\n      }\n\n      newState ? onOpen?.() : onClose?.()\n    },\n    [open, onOpen, onClose, setDelayedOpen]\n  )\n\n  useEffect(\n    () => () => {\n      if (clearDelaysOnUnmount) {\n        clearTimeout(delayTimer)\n        clearTimeout(skipDelayTimer)\n        shouldSkipDelay = false\n      }\n    },\n    [clearDelaysOnUnmount]\n  )\n\n  useEffect(() => {\n    isMounted.current = true\n    return () => {\n      isMounted.current = false\n    }\n  }, [])\n\n  return (\n    <RadixProvider delayDuration={0} skipDelayDuration={0}>\n      <RadixTooltip\n        disableHoverableContent={disableHoverableContent}\n        open={open ?? openState}\n        delayDuration={0} // we control it manually\n        onOpenChange={handleOpenChange}\n      >\n        {children}\n      </RadixTooltip>\n    </RadixProvider>\n  )\n}\n\n// Partials\n// -----------------------------------------------------------------------------\n\nexport interface Partials {\n  Trigger: typeof Trigger\n  Content: typeof Content\n  Provider: typeof Provider\n  Portal: typeof Portal\n  Hotkey: typeof Hotkey\n}\n\nTooltip.Trigger = Trigger\nTooltip.Content = Content\nTooltip.Provider = Provider\nTooltip.Portal = Portal\nTooltip.Hotkey = Hotkey\n"],"names":["RadixArrow","RadixContent","Trigger","RadixPortal","BaseHotkey","RadixProvider","RadixTooltip"],"mappings":"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"}

package/dist/types.d.ts

@@ -6,6 +6,7 @@ import * as _stitches_react_types_styled_component from '@stitches/react/types/s
 import * as _stitches_react_types_css_util from '@stitches/react/types/css-util';
 import * as _radix_ui_react_tooltip from '@radix-ui/react-tooltip';
 import { TooltipPortalProps } from '@radix-ui/react-tooltip';
+import * as _mirohq_design_system_primitive from '@mirohq/design-system-primitive';
 
 declare const StyledContent: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<_stitches_react_types_styled_component.StyledComponent<react.ForwardRefExoticComponent<_radix_ui_react_tooltip.TooltipContentProps & react.RefAttributes<HTMLDivElement>>, {}, {}, _stitches_react_types_css_util.CSS<{}, {
     'border-widths': {
@@ -1108,6 +1109,505 @@ interface PortalProps extends TooltipPortalProps {
 }
 declare const Portal: react__default.FC<PortalProps>;
 
+declare const StyledHotkey: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<_stitches_react_types_styled_component.StyledComponent<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"span">>, {}, {}, _stitches_react_types_css_util.CSS<{}, {
+    'border-widths': {
+        readonly none: 0;
+        readonly sm: "1px";
+        readonly md: "2px";
+        readonly lg: "4px";
+    };
+    colors: {
+        readonly black: any;
+        readonly 'blue-100': any;
+        readonly 'blue-200': any;
+        readonly 'blue-300': any;
+        readonly 'blue-400': any;
+        readonly 'blue-500': any;
+        readonly 'blue-600': any;
+        readonly 'blue-700': any;
+        readonly 'blue-800': any;
+        readonly 'blue-900': any;
+        readonly 'blue-1000': any;
+        readonly 'gray-100': any;
+        readonly 'gray-200': any;
+        readonly 'gray-300': any;
+        readonly 'gray-400': any;
+        readonly 'gray-500': any;
+        readonly 'gray-600': any;
+        readonly 'gray-700': any;
+        readonly 'gray-800': any;
+        readonly 'gray-900': any;
+        readonly 'green-100': any;
+        readonly 'green-200': any;
+        readonly 'green-300': any;
+        readonly 'green-400': any;
+        readonly 'green-500': any;
+        readonly 'green-600': any;
+        readonly 'green-700': any;
+        readonly 'green-800': any;
+        readonly 'green-900': any;
+        readonly 'indigo-100': any;
+        readonly 'indigo-200': any;
+        readonly 'indigo-300': any;
+        readonly 'indigo-400': any;
+        readonly 'indigo-500': any;
+        readonly 'indigo-600': any;
+        readonly 'indigo-700': any;
+        readonly 'indigo-800': any;
+        readonly 'indigo-900': any;
+        readonly 'red-100': any;
+        readonly 'red-200': any;
+        readonly 'red-300': any;
+        readonly 'red-400': any;
+        readonly 'red-500': any;
+        readonly 'red-600': any;
+        readonly 'red-700': any;
+        readonly 'red-800': any;
+        readonly 'red-900': any;
+        readonly transparent: any;
+        readonly white: any;
+        readonly 'yellow-100': any;
+        readonly 'yellow-200': any;
+        readonly 'yellow-300': any;
+        readonly 'yellow-400': any;
+        readonly 'yellow-500': any;
+        readonly 'yellow-600': any;
+        readonly 'yellow-700': any;
+        readonly 'yellow-800': any;
+        readonly 'yellow-900': any;
+        "background-alpha-active"?: any;
+        "background-alpha-hover"?: any;
+        "background-danger-prominent"?: any;
+        "background-danger-prominent-active"?: any;
+        "background-danger-prominent-hover"?: any;
+        "background-danger-subtle"?: any;
+        "background-danger-subtle-active"?: any;
+        "background-danger-subtle-hover"?: any;
+        "background-neutrals"?: any;
+        "background-neutrals-active"?: any;
+        "background-neutrals-container"?: any;
+        "background-neutrals-controls-disabled"?: any;
+        "background-neutrals-disabled"?: any;
+        "background-neutrals-hover"?: any;
+        "background-neutrals-inactive"?: any;
+        "background-neutrals-inactive-hover"?: any;
+        "background-neutrals-inverted"?: any;
+        "background-neutrals-inverted-subtle"?: any;
+        "background-neutrals-page"?: any;
+        "background-neutrals-page-subtle"?: any;
+        "background-neutrals-scrolls"?: any;
+        "background-neutrals-scrolls-expanded"?: any;
+        "background-neutrals-scrolls-hover"?: any;
+        "background-neutrals-scrolls-pressed"?: any;
+        "background-neutrals-scrolls-pressed-hover"?: any;
+        "background-neutrals-subtle"?: any;
+        "background-neutrals-subtle-active"?: any;
+        "background-neutrals-subtle-hover"?: any;
+        "background-primary-prominent"?: any;
+        "background-primary-prominent-active"?: any;
+        "background-primary-prominent-expanded"?: any;
+        "background-primary-prominent-hover"?: any;
+        "background-primary-prominent-pressed"?: any;
+        "background-primary-prominent-pressed-hover"?: any;
+        "background-primary-prominent-selected"?: any;
+        "background-primary-subtle"?: any;
+        "background-primary-subtle-active"?: any;
+        "background-primary-subtle-expanded"?: any;
+        "background-primary-subtle-hover"?: any;
+        "background-primary-subtle-pressed"?: any;
+        "background-primary-subtle-pressed-hover"?: any;
+        "background-primary-subtle-selected"?: any;
+        "background-success"?: any;
+        "background-success-prominent"?: any;
+        "background-success-prominent-active"?: any;
+        "background-success-prominent-hover"?: any;
+        "background-warning-prominent"?: any;
+        "background-warning-subtle"?: any;
+        "border-danger"?: any;
+        "border-danger-active"?: any;
+        "border-danger-hover"?: any;
+        "border-focus-inner"?: any;
+        "border-focus-middle"?: any;
+        "border-focus-outer"?: any;
+        "border-neutrals"?: any;
+        "border-neutrals-active"?: any;
+        "border-neutrals-controls"?: any;
+        "border-neutrals-controls-disabled"?: any;
+        "border-neutrals-disabled"?: any;
+        "border-neutrals-hover"?: any;
+        "border-neutrals-inverted"?: any;
+        "border-neutrals-subtle"?: any;
+        "border-neutrals-text"?: any;
+        "border-neutrals-text-active"?: any;
+        "border-neutrals-text-hover"?: any;
+        "border-neutrals-text-subtle"?: any;
+        "border-neutrals-text-subtle-active"?: any;
+        "border-neutrals-text-subtle-hover"?: any;
+        "border-neutrals-transparent"?: any;
+        "border-primary"?: any;
+        "border-primary-active"?: any;
+        "border-primary-hover"?: any;
+        "border-primary-inverted"?: any;
+        "border-success"?: any;
+        "border-success-active"?: any;
+        "border-success-hover"?: any;
+        "border-warning"?: any;
+        "icon-danger"?: any;
+        "icon-danger-active"?: any;
+        "icon-danger-hover"?: any;
+        "icon-danger-inverted"?: any;
+        "icon-neutrals"?: any;
+        "icon-neutrals-disabled"?: any;
+        "icon-neutrals-inactive"?: any;
+        "icon-neutrals-inactive-hover"?: any;
+        "icon-neutrals-inverted"?: any;
+        "icon-neutrals-search"?: any;
+        "icon-neutrals-subtle"?: any;
+        "icon-neutrals-text"?: any;
+        "icon-primary"?: any;
+        "icon-primary-active"?: any;
+        "icon-primary-hover"?: any;
+        "icon-primary-inverted"?: any;
+        "icon-primary-selected"?: any;
+        "icon-success"?: any;
+        "icon-success-active"?: any;
+        "icon-success-hover"?: any;
+        "icon-success-inverted"?: any;
+        "icon-warning"?: any;
+        "icon-warning-prominent"?: any;
+        "icon-warning-subtle"?: any;
+        "text-danger"?: any;
+        "text-danger-active"?: any;
+        "text-danger-hover"?: any;
+        "text-danger-inverted"?: any;
+        "text-neutrals"?: any;
+        "text-neutrals-active"?: any;
+        "text-neutrals-disabled"?: any;
+        "text-neutrals-hover"?: any;
+        "text-neutrals-inverted"?: any;
+        "text-neutrals-placeholder"?: any;
+        "text-neutrals-placeholder-only"?: any;
+        "text-neutrals-subtle"?: any;
+        "text-neutrals-subtle-active"?: any;
+        "text-neutrals-subtle-hover"?: any;
+        "text-primary"?: any;
+        "text-primary-active"?: any;
+        "text-primary-hover"?: any;
+        "text-primary-inverted"?: any;
+        "text-primary-inverted-subtle"?: any;
+        "text-primary-selected"?: any;
+        "text-success"?: any;
+        "text-success-active"?: any;
+        "text-success-hover"?: any;
+        "text-success-inverted"?: any;
+        "text-warning"?: any;
+        "text-warning-subtle"?: any;
+    };
+    'font-sizes': {
+        readonly 150: "0.75rem";
+        readonly 175: "0.875rem";
+        readonly 200: "1rem";
+        readonly 225: "1.125rem";
+        readonly 250: "1.25rem";
+        readonly 300: "1.5rem";
+        readonly 400: "2rem";
+        readonly 500: "2.5rem";
+        readonly 600: "3rem";
+        readonly 800: "4rem";
+        readonly 900: "4.5rem";
+    };
+    fonts: {
+        readonly heading: "Roobert, sans-serif";
+        readonly body: "Open Sans, sans-serif";
+    };
+    radii: {
+        readonly none: 0;
+        readonly half: "999em";
+        readonly 25: "2px";
+        readonly 50: "4px";
+        readonly 75: "6px";
+        readonly 100: "8px";
+        readonly 200: "16px";
+    };
+    shadows: {
+        readonly 'focus-small': "0 0 0 2px $colors$border-focus-outer, inset 0 0 0 2px $colors$border-focus-middle, inset 0 0 0 3px $colors$border-focus-inner";
+        readonly 'focus-small-outline': "0 0 0 2px $colors$border-focus-outer, inset 0 0 0 1px $colors$border-focus-middle, inset 0 0 0 2px $colors$border-focus-inner";
+        readonly 'focus-large': "0 0 0 4px $colors$border-focus-inner, inset 0 0 0 2px $colors$border-focus-middle, inset 0 0 0 3px $colors$border-focus-outer";
+        readonly 'focus-controls': "0 0 0 1px $colors$border-focus-inner, 0 0 0 3px $colors$border-focus-middle, 0 0 0 5px $colors$border-focus-outer";
+        readonly 'focus-controls-error': "0 0 0 1px $colors$border-focus-inner, 0 0 0 3px $colors$border-danger, 0 0 0 5px $colors$background-danger-subtle-hover";
+        readonly 'focus-controls-success': "0 0 0 1px $colors$border-focus-inner, 0 0 0 3px $colors$background-success-prominent, 0 0 0 5px $colors$background-success";
+    };
+    sizes: {
+        readonly number: string;
+        readonly 'icon-200': "16px";
+        readonly 'icon-300': "24px";
+        readonly 'icon-400': "32px";
+    };
+    space: {
+        readonly 0: "0px";
+        readonly 25: "2px";
+        readonly 50: "4px";
+        readonly 100: "8px";
+        readonly 150: "12px";
+        readonly 200: "16px";
+        readonly 300: "24px";
+        readonly 400: "32px";
+        readonly 500: "40px";
+        readonly 600: "48px";
+        readonly 700: "56px";
+        readonly 800: "64px";
+        readonly 1200: "96px";
+        readonly 1600: "128px";
+    };
+    'space-gap': {
+        readonly 0: any;
+        readonly 50: any;
+        readonly 100: any;
+        readonly 200: any;
+        readonly 300: any;
+    };
+    'space-inset': {
+        readonly 0: any;
+        readonly 50: any;
+        readonly 100: any;
+        readonly 150: any;
+        readonly 200: any;
+        readonly 300: any;
+        readonly 400: any;
+        readonly 500: any;
+        readonly 600: any;
+        readonly 700: any;
+        readonly 800: any;
+        readonly 1200: any;
+        readonly 1600: any;
+    };
+    'space-offset': {
+        readonly 0: any;
+        readonly 50: any;
+        readonly 100: any;
+        readonly 150: any;
+        readonly 200: any;
+        readonly 300: any;
+        readonly 400: any;
+        readonly 600: any;
+        readonly 800: any;
+        readonly 1200: any;
+        readonly 1600: any;
+        readonly 'stacking-0': any;
+        readonly 'stacking-100': any;
+        readonly 'stacking-200': any;
+        readonly 'stacking-300': any;
+        readonly 'stacking-400': any;
+        readonly 'stacking-500': any;
+        readonly 'stacking-800': any;
+    };
+    'stroke-width': {
+        readonly thin: "1.5px";
+        readonly normal: "2px";
+        readonly bold: "4px";
+    };
+    'z-indices': {
+        readonly dropdownMenu: 100;
+        readonly select: 200;
+        readonly popover: 300;
+        readonly tooltip: 400;
+    };
+}, {
+    readonly background: "colors";
+    readonly backgroundColor: "colors";
+    readonly backgroundImage: "colors";
+    readonly blockSize: "sizes";
+    readonly border: "colors";
+    readonly borderBlock: "colors";
+    readonly borderBlockEnd: "colors";
+    readonly borderBlockStart: "colors";
+    readonly borderBottom: "colors";
+    readonly borderBottomColor: "colors";
+    readonly borderBottomLeftRadius: "radii";
+    readonly borderBottomRightRadius: "radii";
+    readonly borderBottomStyle: "border-styles";
+    readonly borderBottomWidth: "border-widths";
+    readonly borderColor: "colors";
+    readonly borderImage: "colors";
+    readonly borderInline: "colors";
+    readonly borderInlineEnd: "colors";
+    readonly borderInlineStart: "colors";
+    readonly borderLeft: "colors";
+    readonly borderLeftColor: "colors";
+    readonly borderLeftStyle: "border-styles";
+    readonly borderLeftWidth: "border-widths";
+    readonly borderRadius: "radii";
+    readonly borderRight: "colors";
+    readonly borderRightColor: "colors";
+    readonly borderRightStyle: "border-styles";
+    readonly borderRightWidth: "border-widths";
+    readonly borderSpacing: "space-offset";
+    readonly borderStyle: "border-styles";
+    readonly borderTop: "colors";
+    readonly borderTopColor: "colors";
+    readonly borderTopLeftRadius: "radii";
+    readonly borderTopRightRadius: "radii";
+    readonly borderTopStyle: "border-styles";
+    readonly borderTopWidth: "border-widths";
+    readonly borderWidth: "border-widths";
+    readonly bottom: "space";
+    readonly boxShadow: "shadows";
+    readonly caretColor: "colors";
+    readonly color: "colors";
+    readonly columnGap: "space-gap";
+    readonly columnRuleColor: "colors";
+    readonly fill: "colors";
+    readonly flexBasis: "sizes";
+    readonly fontFamily: "fonts";
+    readonly fontSize: "font-sizes";
+    readonly fontWeight: "font-weights";
+    readonly gap: "space-gap";
+    readonly gridColumnGap: "space-gap";
+    readonly gridGap: "space-gap";
+    readonly gridRowGap: "space-gap";
+    readonly gridTemplateColumns: "sizes";
+    readonly gridTemplateRows: "sizes";
+    readonly height: "sizes";
+    readonly inlineSize: "sizes";
+    readonly inset: "space-inset";
+    readonly insetBlock: "space-inset";
+    readonly insetBlockEnd: "space-inset";
+    readonly insetBlockStart: "space-inset";
+    readonly insetInline: "space-inset";
+    readonly insetInlineEnd: "space-inset";
+    readonly insetInlineStart: "space-inset";
+    readonly left: "space";
+    readonly letterSpacing: "letter-spacings";
+    readonly lineHeight: "line-heights";
+    readonly margin: "space-offset";
+    readonly marginBlock: "space-offset";
+    readonly marginBlockEnd: "space-offset";
+    readonly marginBlockStart: "space-offset";
+    readonly marginBottom: "space-offset";
+    readonly marginInline: "space-offset";
+    readonly marginInlineEnd: "space-offset";
+    readonly marginInlineStart: "space-offset";
+    readonly marginLeft: "space-offset";
+    readonly marginRight: "space-offset";
+    readonly marginTop: "space-offset";
+    readonly maxBlockSize: "sizes";
+    readonly maxHeight: "sizes";
+    readonly maxInlineSize: "sizes";
+    readonly maxWidth: "sizes";
+    readonly minBlockSize: "sizes";
+    readonly minHeight: "sizes";
+    readonly minInlineSize: "sizes";
+    readonly minWidth: "sizes";
+    readonly outline: "colors";
+    readonly outlineColor: "colors";
+    readonly padding: "space-inset";
+    readonly paddingBlock: "space-inset";
+    readonly paddingBlockEnd: "space-inset";
+    readonly paddingBlockStart: "space-inset";
+    readonly paddingBottom: "space-inset";
+    readonly paddingInline: "space-inset";
+    readonly paddingInlineEnd: "space-inset";
+    readonly paddingInlineStart: "space-inset";
+    readonly paddingLeft: "space-inset";
+    readonly paddingRight: "space-inset";
+    readonly paddingTop: "space-inset";
+    readonly right: "space";
+    readonly rowGap: "space-gap";
+    readonly scrollMargin: "space-offset";
+    readonly scrollMarginBlock: "space-offset";
+    readonly scrollMarginBlockEnd: "space-offset";
+    readonly scrollMarginBlockStart: "space-offset";
+    readonly scrollMarginBottom: "space-offset";
+    readonly scrollMarginInline: "space-offset";
+    readonly scrollMarginInlineEnd: "space-offset";
+    readonly scrollMarginInlineStart: "space-offset";
+    readonly scrollMarginLeft: "space-offset";
+    readonly scrollMarginRight: "space-offset";
+    readonly scrollMarginTop: "space-offset";
+    readonly scrollPadding: "space-inset";
+    readonly scrollPaddingBlock: "space-inset";
+    readonly scrollPaddingBlockEnd: "space-inset";
+    readonly scrollPaddingBlockStart: "space-inset";
+    readonly scrollPaddingBottom: "space-inset";
+    readonly scrollPaddingInline: "space-inset";
+    readonly scrollPaddingInlineEnd: "space-inset";
+    readonly scrollPaddingInlineStart: "space-inset";
+    readonly scrollPaddingLeft: "space-inset";
+    readonly scrollPaddingRight: "space-inset";
+    readonly scrollPaddingTop: "space-inset";
+    readonly stroke: "colors";
+    readonly strokeWidth: "stroke-width";
+    readonly textDecorationColor: "colors";
+    readonly textShadow: "shadows";
+    readonly top: "space";
+    readonly transition: "transitions";
+    readonly width: "sizes";
+    readonly zIndex: "z-indices";
+}, {
+    paddingX: (value: {
+        readonly [$$PropertyValue]: "padding";
+    }) => {
+        paddingLeft: {
+            readonly [$$PropertyValue]: "padding";
+        };
+        paddingRight: {
+            readonly [$$PropertyValue]: "padding";
+        };
+    };
+    paddingY: (value: {
+        readonly [$$PropertyValue]: "padding";
+    }) => {
+        paddingTop: {
+            readonly [$$PropertyValue]: "padding";
+        };
+        paddingBottom: {
+            readonly [$$PropertyValue]: "padding";
+        };
+    };
+    marginX: (value: {
+        readonly [$$PropertyValue]: "margin";
+    }) => {
+        marginLeft: {
+            readonly [$$PropertyValue]: "margin";
+        };
+        marginRight: {
+            readonly [$$PropertyValue]: "margin";
+        };
+    };
+    marginY: (value: {
+        readonly [$$PropertyValue]: "margin";
+    }) => {
+        marginTop: {
+            readonly [$$PropertyValue]: "margin";
+        };
+        marginBottom: {
+            readonly [$$PropertyValue]: "margin";
+        };
+    };
+    square: (value: {
+        readonly [$$PropertyValue]: "width";
+    }) => {
+        width: {
+            readonly [$$PropertyValue]: "width";
+        };
+        height: {
+            readonly [$$PropertyValue]: "width";
+        };
+    };
+    _hover: (css: _stitches_react_types_css_util.CSSProperties) => {
+        '&:hover, &[data-hovered]': _stitches_react_types_css_util.CSSProperties;
+    };
+}>>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLSpanElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"span">>, {}, {}>;
+declare type StyledHotkeyProps = StrictComponentProps<typeof StyledHotkey>;
+
+interface HotkeyProps extends StyledHotkeyProps {
+    /**
+     * The content.
+     */
+    children: string;
+}
+declare const Hotkey: react__default.ForwardRefExoticComponent<Omit<HotkeyProps, "ref"> & react__default.RefAttributes<HTMLSpanElement>>;
+
 interface TooltipProps {
     /**
      * The open state of the tooltip when it is initially rendered. Use when you
@@ -1162,6 +1662,7 @@ interface Partials {
     Content: typeof Content;
     Provider: typeof Provider;
     Portal: typeof Portal;
+    Hotkey: typeof Hotkey;
 }
 
 export { DEFAULT_DELAY_DURATION as TOOLTIP_DEFAULT_DELAY_DURATION, DEFAULT_SKIP_DELAY_DURATION as TOOLTIP_DEFAULT_SKIP_DELAY_DURATION, Tooltip, ContentProps as TooltipContentProps, PortalProps as TooltipPortalProps, TooltipProps, ProviderProps as TooltipProviderProps, TriggerProps as TooltipTriggerProps, types as TooltipTypes };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mirohq/design-system-tooltip",
-  "version": "3.2.36",
+  "version": "3.3.0",
   "description": "",
   "author": "Miro",
   "source": "src/index.ts",
@@ -28,10 +28,11 @@
   },
   "dependencies": {
     "@radix-ui/react-tooltip": "^1.0.3",
-    "@mirohq/design-system-styles": "^1.1.18",
-    "@mirohq/design-tokens": "^3.6.0",
+    "@mirohq/design-system-base-hotkey": "^0.1.0",
+    "@mirohq/design-system-stitches": "^2.6.0",
+    "@mirohq/design-system-styles": "^1.1.19",
     "@mirohq/design-system-utils": "^0.14.3",
-    "@mirohq/design-system-stitches": "^2.5.1"
+    "@mirohq/design-tokens": "^3.6.0"
   },
   "scripts": {
     "build": "rollup -c ../../../rollup.config.js",