@infomaximum/ui-kit 0.9.1

package/dist/components/Alert/Alert.styles.js

@@ -0,0 +1,124 @@
+import { getAlertTokens } from "./Alert.tokens.js";
+import { ANIMATION_DURATION } from "./Alert.utils.js";
+const iconColor = (theme) => ({
+  success: theme.positiveBase,
+  info: theme.infoBase,
+  warning: theme.warningBase,
+  error: theme.dangerBase
+});
+const colorStyles = (theme) => ({
+  success: {
+    borderColor: theme.positiveBorder,
+    background: theme.positiveBg
+  },
+  info: {
+    borderColor: theme.infoBorder,
+    background: theme.infoBg
+  },
+  warning: {
+    borderColor: theme.warningBorder,
+    background: theme.warningBg
+  },
+  error: {
+    borderColor: theme.dangerBorder,
+    background: theme.dangerBg
+  }
+});
+const getColorStyles = (theme, type) => {
+  return colorStyles(theme)[type];
+};
+const getBorder = (theme, banner) => ({
+  border: banner ? "none" : "1px solid",
+  borderRadius: banner ? "unset" : theme.borderRadiusL
+});
+const getIconColor = (theme, type) => {
+  return iconColor(theme)[type];
+};
+const getPadding = (alertTokens, withoutDescription, banner) => {
+  let verticalPadding;
+  let horizontalPadding;
+  if (withoutDescription) {
+    verticalPadding = alertTokens.alertPaddingVertical;
+    horizontalPadding = alertTokens.alertPaddingHorizontal;
+  } else {
+    verticalPadding = alertTokens.alertWithDescriptionPaddingVertical;
+    horizontalPadding = alertTokens.alertWithDescriptionPaddingHorizontal;
+  }
+  if (!banner) {
+    verticalPadding -= 1;
+    horizontalPadding -= 1;
+  }
+  return `${verticalPadding}px ${horizontalPadding}px`;
+};
+const getAlertDefaultStyle = ({
+  type,
+  alertHeight,
+  banner,
+  withoutMessage,
+  withoutDescription,
+  isCloseAnimation,
+  showIcon
+}) => {
+  return {
+    wrapper: (theme) => {
+      const alertTokens = getAlertTokens(theme);
+      return {
+        display: "flex",
+        gap: withoutDescription ? theme.marginM : theme.marginL,
+        alignItems: "flex-start",
+        height: "fit-content",
+        maxHeight: isCloseAnimation ? 0 : alertHeight ?? "100%",
+        opacity: isCloseAnimation ? 0 : 1,
+        overflow: "hidden",
+        padding: getPadding(alertTokens, withoutDescription, banner),
+        ...getBorder(theme, banner),
+        ...getColorStyles(theme, type),
+        transition: `max-height ${ANIMATION_DURATION}ms, opacity ${ANIMATION_DURATION}ms`
+      };
+    },
+    content: (theme) => ({
+      display: "flex",
+      flexDirection: "column",
+      gap: theme.marginM,
+      flex: "1 1 auto"
+    }),
+    iconWrapper: (theme) => ({
+      fontSize: withoutDescription ? theme.iconM : theme.iconL,
+      color: getIconColor(theme, type),
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      height: withoutDescription ? 20 : "fit-content"
+    }),
+    title: (theme) => {
+      const alertTokens = getAlertTokens(theme);
+      return {
+        ...withoutDescription ? theme.typography.body2 : theme.typography.body1,
+        color: alertTokens.alertText
+      };
+    },
+    closeIconWrapper: (theme) => ({
+      fontSize: theme.iconS,
+      color: theme.textIcon,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      height: 20,
+      cursor: "pointer",
+      ":hover": {
+        color: theme.textIconHover
+      }
+    }),
+    descriptionWrapper: (theme) => {
+      const alertTokens = getAlertTokens(theme);
+      return {
+        paddingTop: withoutMessage && showIcon ? 3 : 0,
+        ...theme.typography.body2,
+        color: alertTokens.alertText
+      };
+    }
+  };
+};
+export {
+  getAlertDefaultStyle
+};

package/dist/components/Alert/Alert.tokens.d.ts

@@ -0,0 +1,8 @@
+import { Theme } from '../../themes';
+export declare const getAlertTokens: (theme: Theme) => {
+    alertText: "#262626";
+    alertPaddingVertical: 8;
+    alertPaddingHorizontal: 12;
+    alertWithDescriptionPaddingVertical: 20;
+    alertWithDescriptionPaddingHorizontal: 24;
+};

package/dist/components/Alert/Alert.tokens.js

@@ -0,0 +1,10 @@
+const getAlertTokens = (theme) => ({
+  alertText: theme.textPrimary,
+  alertPaddingVertical: theme.x2,
+  alertPaddingHorizontal: theme.x3,
+  alertWithDescriptionPaddingVertical: theme.x5,
+  alertWithDescriptionPaddingHorizontal: theme.x6
+});
+export {
+  getAlertTokens
+};

package/dist/components/Alert/Alert.types.d.ts

@@ -0,0 +1,26 @@
+import { MouseEvent, ReactNode } from 'react';
+import { getAlertTokens } from './Alert.tokens';
+import { Theme } from '../../themes';
+import { Interpolation } from '@emotion/react';
+export type AlertType = "success" | "info" | "warning" | "error";
+export interface AlertProps {
+    type?: AlertType;
+    message?: ReactNode;
+    description?: ReactNode;
+    showIcon?: boolean;
+    icon?: ReactNode;
+    closable?: boolean;
+    banner?: boolean;
+    className?: string;
+    styles?: {
+        wrapper?: (theme: Theme) => Interpolation;
+        content?: (theme: Theme) => Interpolation;
+        title?: (theme: Theme) => Interpolation;
+        descriptionWrapper?: (theme: Theme) => Interpolation;
+        iconWrapper?: (theme: Theme) => Interpolation;
+        closeIconWrapper?: (theme: Theme) => Interpolation;
+    };
+    onClose?: (e: MouseEvent) => void;
+    afterClose?: () => void;
+}
+export type AlertTokensType = ReturnType<typeof getAlertTokens>;

package/dist/components/Alert/Alert.utils.d.ts

@@ -0,0 +1,7 @@
+import { AlertType } from './Alert.types';
+import { ReactNode } from 'react';
+import { Interpolation } from '@emotion/react';
+export declare const ANIMATION_DURATION = 200;
+export declare const getIconByType: (type: AlertType) => ReactNode;
+export declare const renderIcon: (icon: ReactNode, showIcon: boolean, style: Interpolation) => import("@emotion/react/jsx-runtime").JSX.Element | null;
+export declare const renderDescription: (description: ReactNode, style: Interpolation) => import("@emotion/react/jsx-runtime").JSX.Element | null;

package/dist/components/Alert/Alert.utils.js

@@ -0,0 +1,38 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { ExclamationCircleFilled, CloseCircleFilled, InfoCircleFilled, CheckCircleFilled } from "@infomaximum/icons";
+import { isNil } from "lodash-es";
+const ANIMATION_DURATION = 200;
+const getIconByType = (type) => {
+  switch (type) {
+    case "success": {
+      return /* @__PURE__ */ jsx(CheckCircleFilled, {});
+    }
+    case "info": {
+      return /* @__PURE__ */ jsx(InfoCircleFilled, {});
+    }
+    case "error": {
+      return /* @__PURE__ */ jsx(CloseCircleFilled, {});
+    }
+    default: {
+      return /* @__PURE__ */ jsx(ExclamationCircleFilled, {});
+    }
+  }
+};
+const renderIcon = (icon, showIcon, style) => {
+  if (!showIcon) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx("span", { css: style, children: icon });
+};
+const renderDescription = (description, style) => {
+  if (isNil(description)) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx("div", { css: style, children: description });
+};
+export {
+  ANIMATION_DURATION,
+  getIconByType,
+  renderDescription,
+  renderIcon
+};

package/dist/components/Alert/index.d.ts

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

package/dist/components/Avatar/Avatar.d.ts

@@ -0,0 +1,3 @@
+import { FC, PropsWithChildren } from 'react';
+import { AvatarProps } from './Avatar.types';
+export declare const Avatar: FC<PropsWithChildren<AvatarProps>>;

package/dist/components/Avatar/Avatar.js

@@ -0,0 +1,23 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { memo } from "react";
+import { withThemeProvider } from "../../hocs/withThemeProvider.js";
+import { getAvatarDefaultStyle } from "./Avatar.styles.js";
+import { isString } from "lodash-es";
+import { useTheme } from "../../hooks/useTheme/useTheme.js";
+const AvatarComponent = memo(({
+  size = "middle",
+  color = "neutral",
+  children,
+  styles
+}) => {
+  var _a;
+  const theme = useTheme();
+  const isStringChildren = isString(children);
+  const content = isStringChildren ? children.slice(0, 1).toUpperCase() : null;
+  const avatarDefaultStyle = getAvatarDefaultStyle(size, color);
+  return /* @__PURE__ */ jsx("div", { css: [avatarDefaultStyle.wrapper(theme), (_a = styles == null ? void 0 : styles.avatar) == null ? void 0 : _a.call(styles, theme), process.env.NODE_ENV === "production" ? "" : ";label:AvatarComponent;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9idWlsZHMvZnJvbnRlbmQvbGlicy91aS1raXQvc3JjL2NvbXBvbmVudHMvQXZhdGFyL0F2YXRhci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBZWdCIiwiZmlsZSI6Ii9idWlsZHMvZnJvbnRlbmQvbGlicy91aS1raXQvc3JjL2NvbXBvbmVudHMvQXZhdGFyL0F2YXRhci50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBtZW1vLCB0eXBlIEZDLCB0eXBlIFByb3BzV2l0aENoaWxkcmVuIH0gZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgdHlwZSB7IEF2YXRhclByb3BzIH0gZnJvbSBcIi4vQXZhdGFyLnR5cGVzXCI7XG5pbXBvcnQgeyB3aXRoVGhlbWVQcm92aWRlciB9IGZyb20gXCJob2NzL3dpdGhUaGVtZVByb3ZpZGVyXCI7XG5pbXBvcnQgeyB1c2VUaGVtZSB9IGZyb20gXCJob29rcy91c2VUaGVtZVwiO1xuaW1wb3J0IHsgZ2V0QXZhdGFyRGVmYXVsdFN0eWxlIH0gZnJvbSBcIi4vQXZhdGFyLnN0eWxlc1wiO1xuaW1wb3J0IHsgaXNTdHJpbmcgfSBmcm9tIFwibG9kYXNoLWVzXCI7XG5cbmNvbnN0IEF2YXRhckNvbXBvbmVudDogRkM8UHJvcHNXaXRoQ2hpbGRyZW48QXZhdGFyUHJvcHM+PiA9IG1lbW8oXG4gICh7IHNpemUgPSBcIm1pZGRsZVwiLCBjb2xvciA9IFwibmV1dHJhbFwiLCBjaGlsZHJlbiwgc3R5bGVzIH0pID0+IHtcbiAgICBjb25zdCB0aGVtZSA9IHVzZVRoZW1lKCk7XG5cbiAgICBjb25zdCBpc1N0cmluZ0NoaWxkcmVuID0gaXNTdHJpbmcoY2hpbGRyZW4pO1xuICAgIGNvbnN0IGNvbnRlbnQgPSBpc1N0cmluZ0NoaWxkcmVuID8gY2hpbGRyZW4uc2xpY2UoMCwgMSkudG9VcHBlckNhc2UoKSA6IG51bGw7XG4gICAgY29uc3QgYXZhdGFyRGVmYXVsdFN0eWxlID0gZ2V0QXZhdGFyRGVmYXVsdFN0eWxlKHNpemUsIGNvbG9yKTtcblxuICAgIHJldHVybiA8ZGl2IGNzcz17W2F2YXRhckRlZmF1bHRTdHlsZS53cmFwcGVyKHRoZW1lKSwgc3R5bGVzPy5hdmF0YXI/Lih0aGVtZSldfT57Y29udGVudH08L2Rpdj47XG4gIH1cbik7XG5cbmV4cG9ydCBjb25zdCBBdmF0YXIgPSB3aXRoVGhlbWVQcm92aWRlcjxBdmF0YXJQcm9wcz4oQXZhdGFyQ29tcG9uZW50KTtcbiJdfQ== */"], children: content });
+});
+const Avatar = withThemeProvider(AvatarComponent);
+export {
+  Avatar
+};

package/dist/components/Avatar/Avatar.styles.d.ts

@@ -0,0 +1,29 @@
+import { Theme } from 'themes';
+import { AvatarColorType, AvatarSizeType } from './Avatar.types';
+export declare const getAvatarDefaultStyle: (size: AvatarSizeType, color: AvatarColorType) => {
+    wrapper: (theme: Theme) => {
+        fontFamily: "Roboto";
+        fontSize: 16;
+        lineHeight: "24px";
+        color: "#FFFFFF";
+        background: "#1677FF" | "#13C2C2" | "#52C41A" | "#EB2F96" | "#8C8C8C" | "#FA8C16" | "#722ED1" | "#F5222D" | "#D4B106";
+        borderRadius: string;
+        width: number;
+        aspectRatio: number;
+        display: string;
+        justifyContent: string;
+        alignItems: string;
+    } | {
+        fontFamily: "Roboto";
+        fontSize: 14;
+        lineHeight: "20px";
+        color: "#FFFFFF";
+        background: "#1677FF" | "#13C2C2" | "#52C41A" | "#EB2F96" | "#8C8C8C" | "#FA8C16" | "#722ED1" | "#F5222D" | "#D4B106";
+        borderRadius: string;
+        width: number;
+        aspectRatio: number;
+        display: string;
+        justifyContent: string;
+        alignItems: string;
+    };
+};

package/dist/components/Avatar/Avatar.styles.js

@@ -0,0 +1,40 @@
+import { getAvatarTokens } from "./Avatar.tokens.js";
+const getBackgroundColors = (theme, color) => {
+  const backgroundColors = {
+    red: theme.tagRedContrast,
+    green: theme.tagGreenContrast,
+    blue: theme.tagBlueContrast,
+    neutral: theme.tagNeutralContrast,
+    orange: theme.tagOrangeContrast,
+    yellow: theme.tagYellowContrast,
+    cyan: theme.tagCyanContrast,
+    purple: theme.tagPurpleContrast,
+    magenta: theme.tagMagentaContrast
+  };
+  return {
+    background: backgroundColors[color]
+  };
+};
+const getSizeStyles = (avatarTokens, isMiddleSize) => ({
+  width: isMiddleSize ? avatarTokens.avatarSizeM : avatarTokens.avatarSizeS,
+  aspectRatio: 1
+});
+const getAvatarDefaultStyle = (size, color) => ({
+  wrapper: (theme) => {
+    const avatarTokens = getAvatarTokens(theme);
+    const isMiddleSize = size === "middle";
+    return {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      ...getSizeStyles(avatarTokens, isMiddleSize),
+      borderRadius: "50%",
+      ...getBackgroundColors(theme, color),
+      color: avatarTokens.avatarText,
+      ...isMiddleSize ? theme.typography.body1 : theme.typography.body2
+    };
+  }
+});
+export {
+  getAvatarDefaultStyle
+};

package/dist/components/Avatar/Avatar.tokens.d.ts

@@ -0,0 +1,7 @@
+import { Theme } from 'themes';
+export declare const getAvatarTokens: (theme: Theme) => {
+    avatarText: "#FFFFFF";
+    avatarSizeM: number;
+    avatarSizeS: number;
+};
+export type AvatarTokensType = ReturnType<typeof getAvatarTokens>;

package/dist/components/Avatar/Avatar.tokens.js

@@ -0,0 +1,8 @@
+const getAvatarTokens = (theme) => ({
+  avatarText: theme.textContrast,
+  avatarSizeM: 32,
+  avatarSizeS: 20
+});
+export {
+  getAvatarTokens
+};

package/dist/components/Avatar/Avatar.types.d.ts

@@ -0,0 +1,11 @@
+import { Interpolation } from '@emotion/react';
+import { Theme } from '../../themes';
+export type AvatarSizeType = "middle" | "small";
+export type AvatarColorType = "neutral" | "red" | "orange" | "yellow" | "green" | "cyan" | "blue" | "purple" | "magenta";
+export interface AvatarProps {
+    size?: AvatarSizeType;
+    color?: AvatarColorType;
+    styles?: {
+        avatar?: (theme: Theme) => Interpolation;
+    };
+}

package/dist/components/Avatar/index.d.ts

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

package/dist/components/BaseTooltip/BaseTooltip.d.ts

@@ -0,0 +1,3 @@
+import { FC, PropsWithChildren } from 'react';
+import { BaseTooltipProps } from './BaseTooltip.types';
+export declare const BaseTooltip: FC<PropsWithChildren<BaseTooltipProps>>;

package/dist/components/BaseTooltip/BaseTooltip.js

@@ -0,0 +1,87 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { memo, useState, useEffect } from "react";
+import { offset, flip, arrow, useFloating, autoUpdate, FloatingArrow } from "@floating-ui/react";
+import { ARROW_PADDING, convertBaseTooltipPlacement, getArrowPlacementCorrection, ARROW_WIDTH, ARROW_HEIGHT } from "./BaseTooltip.utils.js";
+import { createPortal } from "react-dom";
+import { useShowTooltipController } from "./hooks/useShowTooltipController.js";
+import { baseTooltipReferenceWrapperStyle, getBaseTooltipFloatingWrapperStyle } from "./BaseTooltip.styles.js";
+const floatingMiddleware = [offset()];
+const BaseTooltip = memo(({
+  floatingElement,
+  arrowColor,
+  withArrow = true,
+  placement = "top",
+  autoAdjustOverflow = true,
+  defaultOpen = false,
+  open,
+  zIndex,
+  trigger = ["click"],
+  mouseEnterDelay = 0.1,
+  mouseLeaveDelay = 0.1,
+  className,
+  onOpenChange,
+  children,
+  getPopupContainer = () => document.body
+}) => {
+  const [arrowRef, setArrowRef] = useState(null);
+  useEffect(() => {
+    if (autoAdjustOverflow) {
+      floatingMiddleware.push(flip());
+    }
+  }, [arrowRef, autoAdjustOverflow]);
+  useEffect(() => {
+    if (arrowRef && withArrow) {
+      floatingMiddleware.push(arrow({
+        element: arrowRef,
+        padding: ARROW_PADDING
+      }));
+    }
+  }, [arrowRef, withArrow]);
+  const {
+    refs,
+    floatingStyles,
+    context,
+    placement: floatingPlacement
+  } = useFloating({
+    whileElementsMounted: autoUpdate,
+    placement: convertBaseTooltipPlacement(placement),
+    middleware: floatingMiddleware
+  });
+  const {
+    isOpen,
+    handlePointerOver,
+    handlePointerOut,
+    handleFocus,
+    handleBlur,
+    handleClick,
+    handleContextMenu,
+    mouseUpHandle
+  } = useShowTooltipController({
+    trigger,
+    defaultOpen,
+    open,
+    mouseEnterDelay,
+    mouseLeaveDelay,
+    refs,
+    onOpenChange
+  });
+  const arrowPlacementCorrection = getArrowPlacementCorrection(floatingPlacement, context);
+  const renderFloatingElement = () => {
+    return /* @__PURE__ */ jsxs("div", { ref: refs.setFloating, css: getBaseTooltipFloatingWrapperStyle(floatingPlacement), style: {
+      ...floatingStyles,
+      zIndex
+    }, className, children: [
+      floatingElement,
+      withArrow && /* @__PURE__ */ jsx(FloatingArrow, { ref: setArrowRef, context, width: ARROW_WIDTH, height: ARROW_HEIGHT, fill: arrowColor, style: {
+        ...arrowPlacementCorrection
+      } })
+    ] });
+  };
+  return /* @__PURE__ */ jsxs("div", { ref: refs.setReference, css: baseTooltipReferenceWrapperStyle, onPointerOver: handlePointerOver, onPointerOut: handlePointerOut, onFocus: handleFocus, onBlur: handleBlur, onClick: handleClick, onContextMenu: handleContextMenu, onMouseUp: mouseUpHandle, children: [
+    children,
+    isOpen && createPortal(renderFloatingElement(), getPopupContainer())
+  ] });
+});
+export {
+  BaseTooltip
+};

package/dist/components/BaseTooltip/BaseTooltip.styles.d.ts

@@ -0,0 +1,6 @@
+import { Placement } from '@floating-ui/react';
+export declare const getBaseTooltipFloatingWrapperStyle: (placement: Placement) => {};
+export declare const baseTooltipReferenceWrapperStyle: {
+    display: string;
+    width: string;
+};

package/dist/components/BaseTooltip/BaseTooltip.styles.js

@@ -0,0 +1,36 @@
+import { isTopSide, FLOATING_OFFSET_WITH_ARROW_HEIGHT, isBottomSide, isLeftSide, isRightSide } from "./BaseTooltip.utils.js";
+const getPadding = (placement) => {
+  if (isTopSide(placement)) {
+    return {
+      paddingBottom: FLOATING_OFFSET_WITH_ARROW_HEIGHT
+    };
+  }
+  if (isBottomSide(placement)) {
+    return {
+      paddingTop: FLOATING_OFFSET_WITH_ARROW_HEIGHT
+    };
+  }
+  if (isLeftSide(placement)) {
+    return {
+      paddingRight: FLOATING_OFFSET_WITH_ARROW_HEIGHT
+    };
+  }
+  if (isRightSide(placement)) {
+    return {
+      paddingLeft: FLOATING_OFFSET_WITH_ARROW_HEIGHT
+    };
+  }
+};
+const getBaseTooltipFloatingWrapperStyle = (placement) => {
+  return {
+    ...getPadding(placement)
+  };
+};
+const baseTooltipReferenceWrapperStyle = {
+  display: "inline-block",
+  width: "fit-content"
+};
+export {
+  baseTooltipReferenceWrapperStyle,
+  getBaseTooltipFloatingWrapperStyle
+};

package/dist/components/BaseTooltip/BaseTooltip.types.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+export type BaseTooltipPlacementType = "top" | "left" | "right" | "bottom" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom";
+export type BaseTooltipTriggerType = "hover" | "focus" | "click" | "contextMenu";
+export interface BaseTooltipProps {
+    floatingElement: ReactNode;
+    arrowColor?: string;
+    withArrow?: boolean;
+    autoAdjustOverflow?: boolean;
+    defaultOpen?: boolean;
+    mouseEnterDelay?: number;
+    mouseLeaveDelay?: number;
+    placement?: BaseTooltipPlacementType;
+    trigger?: BaseTooltipTriggerType[];
+    open?: boolean;
+    zIndex?: number;
+    className?: string;
+    getPopupContainer?: () => HTMLElement;
+    onOpenChange?: (open: boolean) => void;
+}

package/dist/components/BaseTooltip/BaseTooltip.utils.d.ts

@@ -0,0 +1,12 @@
+import { FloatingContext, Placement } from '@floating-ui/react';
+import { BaseTooltipPlacementType } from './BaseTooltip.types';
+export declare const ARROW_WIDTH = 8;
+export declare const ARROW_HEIGHT = 4;
+export declare const ARROW_PADDING = 6;
+export declare const FLOATING_OFFSET_WITH_ARROW_HEIGHT: number;
+export declare const getArrowPlacementCorrection: (placement: Placement, context: FloatingContext) => {};
+export declare const isTopSide: (placement: Placement) => boolean;
+export declare const isBottomSide: (placement: Placement) => boolean;
+export declare const isLeftSide: (placement: Placement) => boolean;
+export declare const isRightSide: (placement: Placement) => boolean;
+export declare const convertBaseTooltipPlacement: (placement: BaseTooltipPlacementType) => Placement;

package/dist/components/BaseTooltip/BaseTooltip.utils.js

@@ -0,0 +1,101 @@
+import { isUndefined } from "lodash-es";
+import { FLOATING_OFFSET } from "../../utils/consts.js";
+const ARROW_WIDTH = 8;
+const ARROW_HEIGHT = 4;
+const ARROW_PADDING = 6;
+const FLOATING_OFFSET_WITH_ARROW_HEIGHT = FLOATING_OFFSET + ARROW_HEIGHT;
+const leftCorrectionValues = ["top", "bottom", "top-start", "bottom-start", "top-end", "bottom-end"];
+const arrowCenterValues = ["left", "right", "top", "bottom"];
+const arrowStartValues = ["left-start", "right-start", "top-start", "bottom-start"];
+const getArrowPosition = (placement, start, center, end) => {
+  if (arrowStartValues.includes(placement)) {
+    return start;
+  }
+  if (arrowCenterValues.includes(placement)) {
+    return center;
+  }
+  return end;
+};
+const getArrowPlacementCorrection = (placement, context) => {
+  var _a, _b;
+  const floatingWidth = (_a = context.refs.floating.current) == null ? void 0 : _a.offsetWidth;
+  const floatingHeight = (_b = context.refs.floating.current) == null ? void 0 : _b.offsetHeight;
+  const isLeftCorrecting = leftCorrectionValues.includes(placement);
+  const floatingCorrectingSize = isLeftCorrecting ? floatingWidth : floatingHeight;
+  if (isUndefined(floatingCorrectingSize)) {
+    return {};
+  }
+  const center = floatingCorrectingSize / 2 - ARROW_WIDTH / 2;
+  const start = ARROW_PADDING;
+  const end = floatingCorrectingSize - ARROW_PADDING - ARROW_WIDTH;
+  const wrapperPaddingCompensation = getWrapperPaddingCompensation(placement);
+  if (isLeftCorrecting) {
+    return {
+      left: getArrowPosition(placement, start, center, end),
+      ...wrapperPaddingCompensation
+    };
+  }
+  return {
+    top: getArrowPosition(placement, start, center, end),
+    ...wrapperPaddingCompensation
+  };
+};
+const getWrapperPaddingCompensation = (placement) => {
+  if (isTopSide(placement)) {
+    return {
+      bottom: 0,
+      top: void 0
+    };
+  }
+  if (isBottomSide(placement)) {
+    return {
+      top: 0,
+      bottom: void 0
+    };
+  }
+  if (isLeftSide(placement)) {
+    return {
+      right: 0,
+      left: void 0
+    };
+  }
+  if (isRightSide(placement)) {
+    return {
+      left: 0,
+      right: void 0
+    };
+  }
+};
+const isTopSide = (placement) => ["top", "top-start", "top-end"].includes(placement);
+const isBottomSide = (placement) => ["bottom", "bottom-start", "bottom-end"].includes(placement);
+const isLeftSide = (placement) => ["left", "left-start", "left-end"].includes(placement);
+const isRightSide = (placement) => ["right", "right-start", "right-end"].includes(placement);
+const placementBaseTooltipDictionary = {
+  bottom: "bottom",
+  bottomLeft: "bottom-start",
+  bottomRight: "bottom-end",
+  top: "top",
+  topLeft: "top-start",
+  topRight: "top-end",
+  left: "left",
+  leftTop: "left-start",
+  leftBottom: "left-end",
+  right: "right",
+  rightTop: "right-start",
+  rightBottom: "right-end"
+};
+const convertBaseTooltipPlacement = (placement) => {
+  return placementBaseTooltipDictionary[placement];
+};
+export {
+  ARROW_HEIGHT,
+  ARROW_PADDING,
+  ARROW_WIDTH,
+  FLOATING_OFFSET_WITH_ARROW_HEIGHT,
+  convertBaseTooltipPlacement,
+  getArrowPlacementCorrection,
+  isBottomSide,
+  isLeftSide,
+  isRightSide,
+  isTopSide
+};

package/dist/components/BaseTooltip/hooks/useShowTooltipController.d.ts

@@ -0,0 +1,22 @@
+import { MouseEvent as ReactMouseEvent } from 'react';
+import { BaseTooltipTriggerType } from '../BaseTooltip.types';
+import { ExtendedRefs, ReferenceType } from '@floating-ui/react';
+export interface UseShowTooltipControllerProp {
+    trigger: BaseTooltipTriggerType[];
+    defaultOpen: boolean;
+    open: boolean | undefined;
+    mouseEnterDelay: number;
+    mouseLeaveDelay: number;
+    refs: ExtendedRefs<ReferenceType>;
+    onOpenChange: ((open: boolean) => void) | undefined;
+}
+export declare const useShowTooltipController: ({ trigger, defaultOpen, open, mouseEnterDelay, mouseLeaveDelay, refs, onOpenChange, }: UseShowTooltipControllerProp) => {
+    isOpen: boolean;
+    handlePointerOver: (() => void) | undefined;
+    handlePointerOut: (() => void) | undefined;
+    handleFocus: (() => void) | undefined;
+    handleBlur: (() => void) | undefined;
+    handleClick: ((e: ReactMouseEvent) => void) | undefined;
+    handleContextMenu: ((e: ReactMouseEvent) => void) | undefined;
+    mouseUpHandle: ((e: ReactMouseEvent) => void) | undefined;
+};