@pushwoosh/dumb-components 1.0.0 → 1.0.2

package/Tabs/{tab-bar/tab-bar.js → components/TabBar/TabBar.js}

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 import { H4 } from '@pushwoosh/kit-typography';
-import { TabBarTitleBox, TabBarContainer } from './tab-bar.styles';
-import { TabBarScrollableFrame } from '../tabs-list-slide-frame';
+import { TabBarTitleBox, TabBarContainer } from './styles';
+import { TabBarScrollableFrame } from '../TabBarScrollableFrame';
 export const TabBar = forwardRef((props, ref) => {
   const {
     children,

package/Tabs/components/TabBar/index.d.ts

@@ -0,0 +1 @@
+export { TabBar } from './TabBar';

package/Tabs/components/TabBar/index.js

@@ -0,0 +1 @@
+export { TabBar } from './TabBar';

package/Tabs/{tab-bar/tab-bar.styles.js → components/TabBar/styles.js}

@@ -2,11 +2,11 @@ import styled from 'styled-components';
 import { Color, Spacing } from '@pushwoosh/kit-constants';
 export const TabBarContainer = styled.div.withConfig({
   displayName: "TabBarContainer",
-  componentId: "sc-1z0lfzo-0"
+  componentId: "sc-pu8yhh-0"
 })(["position:relative;display:grid;grid-template-columns:", ";width:100%;height:40px;background:", ";border-radius:8px;padding:", ";overflow:hidden;"], ({
   hasTitle
 }) => hasTitle ? 'max-content 1fr' : '1fr', Color.SOFT_LIGHT, Spacing.S1);
 export const TabBarTitleBox = styled.div.withConfig({
   displayName: "TabBarTitleBox",
-  componentId: "sc-1z0lfzo-1"
+  componentId: "sc-pu8yhh-1"
 })(["display:flex;align-items:center;position:relative;padding:0 ", " 0 ", ";"], Spacing.S4, Spacing.S5);

package/Tabs/components/TabBar/types.js

@@ -0,0 +1 @@
+export {};

package/Tabs/{tabs-list-slide-frame/tabs-list-slide-frame.d.ts → components/TabBarScrollableFrame/TabBarScrollableFrame.d.ts}

@@ -1,3 +1,3 @@
 import React from 'react';
-import { type TabsListSlideFrameProps } from './tabs-list-slide-frame.types';
+import type { TabsListSlideFrameProps } from './types';
 export declare const TabBarScrollableFrame: React.ForwardRefExoticComponent<TabsListSlideFrameProps & React.RefAttributes<HTMLDivElement>>;

package/Tabs/{tabs-list-slide-frame/tabs-list-slide-frame.js → components/TabBarScrollableFrame/TabBarScrollableFrame.js}

@@ -1,8 +1,8 @@
 import debounce from 'lodash/debounce';
 import React, { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
 import { ChevronIcon } from '@pushwoosh/kit-icons';
-import { TabBarContent, TabBarFrame, TabBarArrowContainer, TabBarWindow } from './tabs-list-slide-frame.styles';
-import { widthObserver } from '../tabs.helpers';
+import { TabBarContent, TabBarFrame, TabBarArrowContainer, TabBarWindow } from './styles';
+import { widthObserver } from '../../helpers';
 export const TabBarScrollableFrame = forwardRef(({
   children,
   ...props

package/Tabs/components/TabBarScrollableFrame/index.d.ts

@@ -0,0 +1 @@
+export { TabBarScrollableFrame } from './TabBarScrollableFrame';

package/Tabs/components/TabBarScrollableFrame/index.js

@@ -0,0 +1 @@
+export { TabBarScrollableFrame } from './TabBarScrollableFrame';

package/Tabs/{tabs-list-slide-frame/tabs-list-slide-frame.styles.js → components/TabBarScrollableFrame/styles.js}

@@ -2,25 +2,25 @@ import styled from 'styled-components';
 import { Color, Shadow, ShapeRadius, Spacing } from '@pushwoosh/kit-constants';
 export const TabBarArrowContainer = styled.div.withConfig({
   displayName: "TabBarArrowContainer",
-  componentId: "sc-u8lb05-0"
+  componentId: "sc-1sonok9-0"
 })(["position:absolute;top:0;", ":0;display:flex;align-items:center;height:32px;cursor:pointer;color:", ";background-color:", ";box-shadow:", ";border-radius:", ";padding:", " ", ";&:hover{color:", ";}"], ({
   $right
 }) => $right ? 'right' : 'left', Color.MAIN, Color.CLEAR, Shadow.SMALL, ShapeRadius.CONTROL, Spacing.S3, Spacing.S1, Color.PRIMARY_HOVER);
 export const TabBarWindow = styled.div.withConfig({
   displayName: "TabBarWindow",
-  componentId: "sc-u8lb05-1"
+  componentId: "sc-1sonok9-1"
 })(["position:relative;height:32px;width:100%;"]);
 export const TabsListContentBase = styled.div.withConfig({
   displayName: "TabsListContentBase",
-  componentId: "sc-u8lb05-2"
+  componentId: "sc-1sonok9-2"
 })(["position:absolute;top:0;display:flex;align-items:center;transition:left .4s ease-in;"]);
 export const TabBarContent = styled(TabsListContentBase).withConfig({
   displayName: "TabBarContent",
-  componentId: "sc-u8lb05-3"
+  componentId: "sc-1sonok9-3"
 })(["left:", "px;gap:", ";"], ({
   left
 }) => left, Spacing.S1);
 export const TabBarFrame = styled.div.withConfig({
   displayName: "TabBarFrame",
-  componentId: "sc-u8lb05-4"
+  componentId: "sc-1sonok9-4"
 })(["position:relative;width:100%;"]);

package/Tabs/components/TabBarScrollableFrame/types.js

@@ -0,0 +1 @@
+export {};

package/Tabs/{tab-base/tab-base.js → components/TabBase/TabBase.js}

@@ -1,5 +1,5 @@
 import React, { forwardRef } from 'react';
-import { TabIconBox, TabRedDot, TabBody, TabButtonLabel } from './tab-base.styles';
+import { TabIconBox, TabRedDot, TabBody, TabButtonLabel } from './styles';
 export const TabBase = forwardRef((props, ref) => {
   const {
     isActive,

package/Tabs/components/TabBase/index.d.ts

@@ -0,0 +1 @@
+export { TabBase } from './TabBase';

package/Tabs/components/TabBase/index.js

@@ -0,0 +1 @@
+export { TabBase } from './TabBase';

package/Tabs/{tab-base/tab-base.styles.js → components/TabBase/styles.js}

@@ -4,7 +4,7 @@ import { H4 } from '@pushwoosh/kit-typography';
 const tabBodyHover = css(["&:hover{color:", ";background-color:", ";}"], Color.PRIMARY_HOVER, Color.BRIGHT_LIGHT);
 export const TabBody = styled.div.withConfig({
   displayName: "TabBody",
-  componentId: "sc-1vksurj-0"
+  componentId: "sc-133yrgu-0"
 })(["display:flex;justify-content:center;align-items:center;position:relative;padding:", " ", " ", " ", ";background-color:", ";border-radius:", ";box-shadow:", ";cursor:", ";user-select:none;white-space:nowrap;color:", ";", ""], Spacing.S2, ({
   $hasIcon
 }) => $hasIcon ? Spacing.S4 : Spacing.S5, Spacing.S2, Spacing.S5, ({
@@ -27,15 +27,15 @@ export const TabBody = styled.div.withConfig({
 }) => !$isActive && !$isDisabled && tabBodyHover);
 export const TabRedDot = styled.div.withConfig({
   displayName: "TabRedDot",
-  componentId: "sc-1vksurj-1"
+  componentId: "sc-133yrgu-1"
 })(["width:4px;height:20px;position:relative;&::before{content:\"\";background-color:", ";position:absolute;top:0;left:0;width:4px;height:4px;border-radius:4px;}"], Color.DANGER);
 export const TabButtonLabel = styled(H4).withConfig({
   displayName: "TabButtonLabel",
-  componentId: "sc-1vksurj-2"
+  componentId: "sc-133yrgu-2"
 })(["opacity:", ";"], ({
   $isActive
 }) => $isActive ? 1 : 0.8);
 export const TabIconBox = styled.div.withConfig({
   displayName: "TabIconBox",
-  componentId: "sc-1vksurj-3"
+  componentId: "sc-133yrgu-3"
 })(["margin-left:", ";"], Spacing.S1);

package/Tabs/components/TabBase/types.js

@@ -0,0 +1 @@
+export {};

package/Tabs/{tab-panel/tab-panel.d.ts → components/TabPanel/TabPanel.d.ts}

@@ -1,3 +1,3 @@
 import { type FC } from 'react';
-import type { TabPanelProps } from './tab-panel.types';
+import type { TabPanelProps } from './types';
 export declare const TabPanel: FC<TabPanelProps>;

package/Tabs/{tab-panel/tab-panel.js → components/TabPanel/TabPanel.js}

@@ -1,6 +1,6 @@
 import React from 'react';
 import { TabPanelContainer } from './styles';
-import { useTabsContext } from '../tabs.context';
+import { useTabsContext } from '../../context';
 export const TabPanel = props => {
   const {
     code,

package/Tabs/components/TabPanel/index.d.ts

@@ -0,0 +1 @@
+export { TabPanel } from './TabPanel';

package/Tabs/components/TabPanel/index.js

@@ -0,0 +1 @@
+export { TabPanel } from './TabPanel';

package/Tabs/{tab-panel → components/TabPanel}/styles.js

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
 export const TabPanelContainer = styled.div.withConfig({
   displayName: "TabPanelContainer",
-  componentId: "sc-1kewjsc-0"
+  componentId: "sc-2k9ddn-0"
 })(["overflow:auto;flex:1;"]);

package/Tabs/{tab-panel/tab-panel.types.d.ts → components/TabPanel/types.d.ts}

@@ -1,5 +1,5 @@
 import type { PropsWithChildren } from 'react';
-import type { TabCode } from '../tabs.types';
+import type { TabCode } from '../../types';
 export type TabPanelProps = PropsWithChildren<Readonly<{
     code: TabCode;
 }>>;

package/Tabs/components/TabPanel/types.js

@@ -0,0 +1 @@
+export {};

package/Tabs/{tabs/tabs.d.ts → components/Tabs/Tabs.d.ts}

@@ -1,3 +1,3 @@
 import { type ReactElement } from 'react';
-import type { TabsProps } from './tabs.types';
+import type { TabsProps } from './types';
 export declare function Tabs(props: TabsProps): ReactElement;

package/Tabs/{tabs/tabs.js → components/Tabs/Tabs.js}

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 import { TabsContainer } from './styles';
-import { TabContext } from '../tabs.context';
+import { TabContext } from '../../context';
 export function Tabs(props) {
   const {
     activeCode: activeTabCode,

package/Tabs/components/Tabs/index.d.ts

@@ -0,0 +1 @@
+export { Tabs } from './Tabs';

package/Tabs/components/Tabs/index.js

@@ -0,0 +1 @@
+export { Tabs } from './Tabs';

package/Tabs/{tabs → components/Tabs}/styles.js

@@ -2,5 +2,5 @@ import styled from 'styled-components';
 import { Spacing } from '@pushwoosh/kit-constants';
 export const TabsContainer = styled.div.withConfig({
   displayName: "TabsContainer",
-  componentId: "sc-1z082s8-0"
+  componentId: "sc-1pr0dun-0"
 })(["display:flex;flex-direction:column;gap:", ";width:100%;height:100%;"], Spacing.S5);

package/Tabs/{tabs/tabs.types.d.ts → components/Tabs/types.d.ts}

@@ -1,5 +1,5 @@
 import type { PropsWithChildren } from 'react';
-import { type TabCode } from '../tabs.types';
+import { type TabCode } from '../../types';
 export type TabsProps = PropsWithChildren<Readonly<{
     activeCode: TabCode;
     onChange: (code: TabCode) => void;

package/Tabs/components/Tabs/types.js

@@ -0,0 +1 @@
+export {};

package/Tabs/{tabs.context.d.ts → context.d.ts}

@@ -1,4 +1,4 @@
 import React from 'react';
-import type { TabContextType } from './tabs.types';
+import type { TabContextType } from './types';
 export declare const TabContext: React.Context<TabContextType>;
 export declare function useTabsContext(): TabContextType;

package/Tabs/index.d.ts

@@ -1,5 +1,5 @@
-export * from './tabs.types';
-export * from './tab';
-export * from './tabs';
-export * from './tab-bar';
-export * from './tab-panel';
+export { Tab } from './components/Tab';
+export { TabBar } from './components/TabBar';
+export { TabPanel } from './components/TabPanel';
+export { Tabs } from './components/Tabs';
+export type { TabCode } from './types';

package/Tabs/index.js

@@ -1,5 +1,4 @@
-export * from './tabs.types';
-export * from './tab';
-export * from './tabs';
-export * from './tab-bar';
-export * from './tab-panel';
+export { Tab } from './components/Tab';
+export { TabBar } from './components/TabBar';
+export { TabPanel } from './components/TabPanel';
+export { Tabs } from './components/Tabs';

package/Tabs/types.js

@@ -0,0 +1 @@
+export {};

package/Toast/Toast.d.ts

@@ -0,0 +1,3 @@
+import { type ReactElement } from 'react';
+import type { ToastProps } from './types';
+export declare function Toast(props: ToastProps): ReactElement;

package/Toast/Toast.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import { createPortal } from 'react-dom';
+import { InfoRoundIcon, CheckRoundIcon, WarningRoundIcon, DangerTriangleIcon, CloseIcon } from '@pushwoosh/kit-icons';
+import { H4, Paragraph } from '@pushwoosh/kit-typography';
+import { TypeColorMap } from './constants';
+import { RootBox, IconBox, ContentBox, CloseBox } from './styles';
+function getIconByType(type) {
+  switch (type) {
+    case 'info':
+      return React.createElement(InfoRoundIcon, {
+        view: "filled",
+        size: "medium",
+        color: TypeColorMap[type]
+      });
+    case 'success':
+      return React.createElement(CheckRoundIcon, {
+        view: "filled",
+        type: "fill",
+        size: "medium",
+        color: TypeColorMap[type]
+      });
+    case 'warning':
+      return React.createElement(WarningRoundIcon, {
+        view: "filled",
+        size: "medium",
+        color: TypeColorMap[type]
+      });
+    case 'error':
+      return React.createElement(DangerTriangleIcon, {
+        view: "filled",
+        size: "medium",
+        color: TypeColorMap[type]
+      });
+    default:
+      return React.createElement(InfoRoundIcon, {
+        view: "filled",
+        size: "medium",
+        color: TypeColorMap[type]
+      });
+  }
+}
+export function Toast(props) {
+  const {
+    open,
+    toast,
+    onClose
+  } = props;
+  const {
+    title,
+    description,
+    type,
+    additionalContent
+  } = toast;
+  return createPortal(React.createElement(RootBox, {
+    open: open,
+    type: type
+  }, React.createElement(IconBox, null, getIconByType(type)), React.createElement(ContentBox, null, React.createElement(H4, null, title), description && React.createElement(Paragraph, null, description), additionalContent && React.createElement("div", null, additionalContent)), React.createElement(CloseBox, {
+    onClick: onClose
+  }, React.createElement(CloseIcon, {
+    size: "medium"
+  }))), document.body);
+}

package/Toast/ToastProvider.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { ToastContextProps, ToastProviderProps } from './types';
+export declare const ToastContext: React.Context<ToastContextProps | null>;
+export declare const ToastProvider: ({ children }: ToastProviderProps) => React.JSX.Element;

package/Toast/ToastProvider.js

@@ -0,0 +1,45 @@
+import React, { useState, useMemo, useCallback, createContext } from 'react';
+import { DEFAULT_DURATION } from './constants';
+import { Toast } from './Toast';
+export const ToastContext = createContext(null);
+export const ToastProvider = ({
+  children
+}) => {
+  const initialState = {
+    title: '',
+    description: '',
+    type: 'info',
+    duration: DEFAULT_DURATION
+  };
+  const [open, setOpen] = useState(false);
+  const [toast, setToast] = useState(initialState);
+  const closeToast = useCallback(() => setOpen(false), []);
+  const openToast = useCallback(({
+    title = '',
+    description = '',
+    duration = DEFAULT_DURATION,
+    type = 'info',
+    additionalContent = null
+  }) => {
+    setOpen(true);
+    setToast({
+      title,
+      description,
+      duration,
+      type,
+      additionalContent
+    });
+    setTimeout(closeToast, duration);
+  }, [closeToast]);
+  const contextValue = useMemo(() => ({
+    openToast,
+    closeToast
+  }), [openToast, closeToast]);
+  return React.createElement(ToastContext.Provider, {
+    value: contextValue
+  }, children, React.createElement(Toast, {
+    open: open,
+    toast: toast,
+    onClose: closeToast
+  }));
+};

package/Toast/constants.d.ts

@@ -0,0 +1,8 @@
+import { Color } from '@pushwoosh/kit-constants';
+export declare const DEFAULT_DURATION = 3000;
+export declare const TypeColorMap: {
+    info: Color;
+    success: Color;
+    warning: Color;
+    error: Color;
+};

package/Toast/constants.js

@@ -0,0 +1,8 @@
+import { Color } from '@pushwoosh/kit-constants';
+export const DEFAULT_DURATION = 3000;
+export const TypeColorMap = {
+  info: Color.BRIGHT,
+  success: Color.SUCCESS,
+  warning: Color.WARNING,
+  error: Color.DANGER
+};

package/Toast/hooks.d.ts

@@ -0,0 +1,2 @@
+import type { ToastContextProps } from './types';
+export declare const useToast: () => ToastContextProps;

package/Toast/hooks.js

@@ -0,0 +1,9 @@
+import { useContext } from 'react';
+import { ToastContext } from './ToastProvider';
+export const useToast = () => {
+  const context = useContext(ToastContext);
+  if (!context) {
+    throw new Error('useToast must be used within a ToastProvider');
+  }
+  return context;
+};

package/Toast/index.d.ts

@@ -0,0 +1,3 @@
+export { Toast } from './Toast';
+export { ToastProvider } from './ToastProvider';
+export { useToast } from './hooks';

package/Toast/index.js

@@ -0,0 +1,3 @@
+export { Toast } from './Toast';
+export { ToastProvider } from './ToastProvider';
+export { useToast } from './hooks';

package/Toast/styles.d.ts

@@ -0,0 +1,8 @@
+import type { ToastType } from './types';
+export declare const RootBox: import("styled-components").StyledComponent<"div", any, {
+    open: boolean;
+    type: ToastType;
+}, never>;
+export declare const IconBox: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ContentBox: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CloseBox: import("styled-components").StyledComponent<"div", any, {}, never>;

package/Toast/styles.js

@@ -0,0 +1,23 @@
+import styled from 'styled-components';
+import { Color, Spacing, Shadow, ShapeRadius } from '@pushwoosh/kit-constants';
+import { TypeColorMap } from './constants';
+export const RootBox = styled.div.withConfig({
+  displayName: "RootBox",
+  componentId: "sc-8jll5u-0"
+})(["position:fixed;display:flex;align-items:flex-start;width:380px;top:", ";left:50%;transform:translateX(-50%);color:", ";padding:", " 0 ", ";border-radius:", ";border:1px solid ", ";background:", ";box-shadow:", ";transition:top 250ms;z-index:999999999;"], ({
+  open
+}) => open ? '50px' : '-250px', Color.MAIN, Spacing.S5, Spacing.S5, ShapeRadius.DIALOG, ({
+  type
+}) => TypeColorMap[type], Color.CLEAR, Shadow.LARGE);
+export const IconBox = styled.div.withConfig({
+  displayName: "IconBox",
+  componentId: "sc-8jll5u-1"
+})(["display:flex;align-items:center;justify-content:center;width:56px;height:100%;padding:0 ", ";box-sizing:border-box;"], Spacing.S5);
+export const ContentBox = styled.div.withConfig({
+  displayName: "ContentBox",
+  componentId: "sc-8jll5u-2"
+})(["display:flex;flex-direction:column;justify-content:center;width:100%;min-height:24px;flex-grow:1;gap:", ";"], Spacing.S0);
+export const CloseBox = styled.div.withConfig({
+  displayName: "CloseBox",
+  componentId: "sc-8jll5u-3"
+})(["display:flex;padding:0 14px;cursor:pointer;"]);

package/Toast/types.d.ts

@@ -0,0 +1,28 @@
+import type { ReactNode } from 'react';
+export type ToastType = 'info' | 'success' | 'warning' | 'error';
+export type ToastParams = {
+    title: string;
+    description?: string;
+    duration: number;
+    type: ToastType;
+    additionalContent?: ReactNode;
+};
+export type OpenToastParams = {
+    title: string;
+    description?: string;
+    duration?: number;
+    type?: ToastType;
+    additionalContent?: ReactNode;
+};
+export interface ToastContextProps {
+    openToast: (params: OpenToastParams) => void;
+    closeToast: () => void;
+}
+export interface ToastProviderProps {
+    children: ReactNode;
+}
+export interface ToastProps {
+    open: boolean;
+    toast: ToastParams;
+    onClose: () => void;
+}

package/Toast/types.js

@@ -0,0 +1 @@
+export {};

package/Tooltip/Tooltip.d.ts

@@ -0,0 +1,3 @@
+import { type ReactElement } from 'react';
+import type { TooltipProps } from './types';
+export declare function Tooltip(props: TooltipProps): ReactElement;

package/Tooltip/Tooltip.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import { TooltipPositionToArrowOffsetMap, TooltipPositionToTippyOffsetMap, TooltipPositionToTippyPlacementMap } from './maps';
+import { TooltipBox } from './styles';
+export function Tooltip(props) {
+  const {
+    position = 'top-start',
+    arrowOffset = TooltipPositionToArrowOffsetMap[position],
+    offset = TooltipPositionToTippyOffsetMap[position],
+    maxWidth = 240,
+    zIndex = 999999,
+    isDisabled,
+    isVisible,
+    ...rest
+  } = props;
+  return React.createElement(TooltipBox, {
+    animation: false,
+    delay: 0,
+    duration: 0,
+    disabled: isDisabled,
+    maxWidth: maxWidth,
+    zIndex: zIndex,
+    placement: TooltipPositionToTippyPlacementMap[position],
+    visible: isVisible,
+    "$position": position,
+    "$arrowOffset": arrowOffset,
+    popperOptions: {
+      strategy: 'fixed',
+      modifiers: [{
+        name: 'offset',
+        options: {
+          offset
+        }
+      }, {
+        name: 'flip',
+        options: {
+          fallbackPlacements: []
+        }
+      }, {
+        name: 'preventOverflow',
+        options: {
+          mainAxis: false
+        }
+      }]
+    },
+    ...rest
+  });
+}

package/Tooltip/index.d.ts

@@ -0,0 +1,2 @@
+export { Tooltip } from './Tooltip';
+export type { TooltipPosition } from './types';

package/Tooltip/index.js

@@ -0,0 +1 @@
+export { Tooltip } from './Tooltip';

package/Tooltip/maps.d.ts

@@ -0,0 +1,48 @@
+import type { TooltipPosition } from './types';
+export declare const TooltipPositionToTippyPlacementMap: {
+    'top-start': "top-start";
+    'top-middle': "top";
+    'top-end': "top-end";
+    'right-start': "right-start";
+    'right-middle': "right";
+    'right-end': "right-end";
+    'bottom-start': "bottom-start";
+    'bottom-middle': "bottom";
+    'bottom-end': "bottom-end";
+    'left-start': "left-start";
+    'left-middle': "left";
+    'left-end': "left-end";
+};
+export declare const TooltipPositionToTippyOffsetMap: {
+    'top-start': number[];
+    'top-middle': number[];
+    'top-end': number[];
+    'right-start': number[];
+    'right-middle': number[];
+    'right-end': number[];
+    'bottom-start': number[];
+    'bottom-middle': number[];
+    'bottom-end': number[];
+    'left-start': number[];
+    'left-middle': number[];
+    'left-end': number[];
+};
+export declare const TooltipPositionToArrowOffsetMap: {
+    'top-start': string;
+    'top-middle': string;
+    'top-end': string;
+    'right-start': string;
+    'right-middle': string;
+    'right-end': string;
+    'bottom-start': string;
+    'bottom-middle': string;
+    'bottom-end': string;
+    'left-start': string;
+    'left-middle': string;
+    'left-end': string;
+};
+export declare function getTransform(position: TooltipPosition): "none" | "translateX(-50%) translateY(50%) rotate(45deg);" | "translateX(50%) translateY(50%) rotate(45deg);" | "translateX(-50%) translateY(-50%) rotate(45deg);" | "translateX(50%) translateY(-50%) rotate(45deg);";
+export declare function getTopPosition(position: TooltipPosition, offset: string): string;
+export declare function getRightPosition(position: TooltipPosition, offset: string): string;
+export declare function getBottomPosition(position: TooltipPosition, offset: string): string;
+export declare function getLeftPosition(position: TooltipPosition, offset: string): string;