@delightui/components 0.1.165 → 0.1.167

package/dist/cjs/components/atoms/Tooltip/Tooltip.constants.d.ts

@@ -1,13 +1,7 @@
-import { TooltipDirectionEnum } from './Tooltip.types';
-export declare const TOOLTIP_ARROW_CONSTANTS: {
-    readonly WIDTH: 28;
-    readonly HEIGHT: 8;
-    readonly OFFSET: 12;
-};
-export declare const ARROW_DIMENSIONS_MAP: Record<TooltipDirectionEnum, {
-    width: number;
-    height: number;
-}>;
+import type { Placement } from 'react-overlays/usePopper';
+import type { TooltipAlignEnum, TooltipDirectionEnum } from './Tooltip.types';
+export declare const PLACEMENT_TO_DIRECTION: Record<string, string>;
+export declare const PLACEMENT_TO_ALIGNMENT: Record<string, string>;
 export declare const TOOLTIP_VARIANT_MAP: {
     readonly 'Top-Center': "center-top";
     readonly 'Top-Start': "start-top";
@@ -22,3 +16,4 @@ export declare const TOOLTIP_VARIANT_MAP: {
     readonly 'Right-Start': "start-right";
     readonly 'Right-End': "end-right";
 };
+export declare const getPlacement: (direction?: TooltipDirectionEnum, alignment?: TooltipAlignEnum) => Placement;

package/dist/cjs/components/atoms/Tooltip/Tooltip.d.ts

@@ -1,3 +1,3 @@
-import { TooltipProps } from './Tooltip.types';
+import type { TooltipProps } from './Tooltip.types';
 declare const Tooltip: (props: TooltipProps) => import("react/jsx-runtime").JSX.Element;
 export default Tooltip;

package/dist/cjs/components/atoms/Tooltip/Tooltip.examples.d.ts

@@ -0,0 +1,2 @@
+declare const TooltipExample: () => import("react/jsx-runtime").JSX.Element;
+export default TooltipExample;

package/dist/cjs/components/atoms/Tooltip/Tooltip.presenter.d.ts

@@ -2,23 +2,22 @@ import { CSSProperties } from 'react';
 import { TooltipProps } from './Tooltip.types';
 declare const usePresenter: (props: TooltipProps) => {
     direction: import("./Tooltip.types").TooltipDirectionEnum;
+    alignment: import("./Tooltip.types").TooltipAlignEnum;
     action: import("./Tooltip.types").TooltipActionType;
     target: import("react").ReactNode;
-    position: {
-        top: number;
-        left: number;
-    };
     showTooltip: () => void;
     hideTooltip: () => void;
     toggleTooltip: () => void;
     targetRef: import("react").RefObject<HTMLDivElement>;
-    tooltipRef: import("react").RefObject<HTMLDivElement>;
-    wrapperRef: import("react").RefObject<HTMLDivElement>;
+    cursorRef: import("react").RefObject<HTMLDivElement>;
+    updateRef: import("react").MutableRefObject<(() => void) | null>;
+    handleMouseMove: (e: React.MouseEvent) => void;
     variantProps: {
         'component-variant': string;
     };
-    arrowStyle: CSSProperties;
     style: import("./Tooltip.types").TooltipStyleEnum;
     visible: boolean;
+    placement: import("@popperjs/core").Placement;
+    arrowOffsetStyle: CSSProperties | undefined;
 };
 export default usePresenter;

package/dist/cjs/library.css

@@ -736,7 +736,7 @@
   padding-bottom: var(--tooltip-target-padding-bottom);
   padding-left: var(--tooltip-target-padding-left);
 }
-.Tooltip-module_tooltipWrapper__wwgA3 .Tooltip-module_tooltipContent__iio4V {
+.Tooltip-module_tooltipContent__iio4V {
   position: absolute;
   display: flex;
   flex-direction: column;
@@ -772,7 +772,7 @@
   border-radius: var(--tooltip-content-border-radius, 4px);
   box-shadow: var(--tooltip-content-box-shadow-x) var(--tooltip-content-box-shadow-blur) var(--tooltip-content-box-shadow-y) var(--tooltip-content-box-shadow-spread) var(--tooltip-content-box-shadow-color);
 }
-.Tooltip-module_tooltipWrapper__wwgA3 .Tooltip-module_tooltipContent__iio4V .Tooltip-module_text__Or6qX {
+.Tooltip-module_tooltipContent__iio4V .Tooltip-module_text__Or6qX {
   --text-font-family: var(--tooltip-content-font-family);
   --text-font-weight: var(--tooltip-content-font-weight);
   --text-font-size: var(--tooltip-content-font-size);
@@ -784,62 +784,100 @@
   line-height: var(--tooltip-content-line-height);
   letter-spacing: var(--tooltip-content-letter-spacing);
 }
-.Tooltip-module_tooltipWrapper__wwgA3 .Tooltip-module_tooltipContent__iio4V .Tooltip-module_tooltipArrow__4y3Pi {
+.Tooltip-module_tooltipContent__iio4V .Tooltip-module_tooltipArrow__4y3Pi {
   position: absolute;
 }
-.Tooltip-module_tooltipWrapper__wwgA3 .Tooltip-module_tooltipContent__iio4V .Tooltip-module_tooltipArrowIcon__XKQ-5 {
+.Tooltip-module_tooltipContent__iio4V .Tooltip-module_tooltipArrowIcon__XKQ-5 {
   --icon-size: fit-content;
 }
-.Tooltip-module_tooltipWrapper__wwgA3 .Tooltip-module_tooltipContent__iio4V .Tooltip-module_tailFill__1Iv5j {
+.Tooltip-module_tooltipContent__iio4V .Tooltip-module_tailFill__1Iv5j {
   --icon-fill: var(--tooltip-content-background, var(--surface-background-6));
   z-index: 1;
 }
-.Tooltip-module_tooltipWrapper__wwgA3 .Tooltip-module_tooltipContent__iio4V .Tooltip-module_tailOutline__7l774 {
+.Tooltip-module_tooltipContent__iio4V .Tooltip-module_tailOutline__7l774 {
   display: none;
 }
-.Tooltip-module_tooltipWrapper__wwgA3 .Tooltip-module_tooltipContent__iio4V[data-direction=Top] .Tooltip-module_tooltipArrow__4y3Pi {
+.Tooltip-module_tooltipContent__iio4V[data-direction=Top] .Tooltip-module_tooltipArrow__4y3Pi {
   top: 100%;
   left: 50%;
   transform: translateX(-50%);
 }
-.Tooltip-module_tooltipWrapper__wwgA3 .Tooltip-module_tooltipContent__iio4V[data-direction=Top] .Tooltip-module_tailOutline__7l774 {
-  --svg-stroke-width: calc(var(--tooltip-content-border-bottom-width, 2px) - 1);
+.Tooltip-module_tooltipContent__iio4V[data-direction=Top] .Tooltip-module_tailOutline__7l774 {
+  --svg-stroke-width: calc(var(--tooltip-content-border-bottom-width, 2px) - 1px);
 }
-.Tooltip-module_tooltipWrapper__wwgA3 .Tooltip-module_tooltipContent__iio4V[data-direction=Bottom] .Tooltip-module_tooltipArrow__4y3Pi {
-  bottom: calc(100% - 2px);
+.Tooltip-module_tooltipContent__iio4V[data-direction=Top][data-align=Start] .Tooltip-module_tooltipArrow__4y3Pi {
+  left: 14px;
+  left: var(--arrow-offset, 14px);
+}
+.Tooltip-module_tooltipContent__iio4V[data-direction=Top][data-align=End] .Tooltip-module_tooltipArrow__4y3Pi {
+  left: auto;
+  left: initial;
+  right: 0;
+}
+.Tooltip-module_tooltipContent__iio4V[data-direction=Bottom] .Tooltip-module_tooltipArrow__4y3Pi {
+  bottom: 100%;
   left: 50%;
   transform: translateX(-50%) rotate(180deg);
 }
-.Tooltip-module_tooltipWrapper__wwgA3 .Tooltip-module_tooltipContent__iio4V[data-direction=Bottom] .Tooltip-module_tailOutline__7l774 {
-  --svg-stroke-width: calc(var(--tooltip-content-border-top-width, 2px) - 1);
+.Tooltip-module_tooltipContent__iio4V[data-direction=Bottom] .Tooltip-module_tailOutline__7l774 {
+  --svg-stroke-width: calc(var(--tooltip-content-border-top-width, 2px) - 1px);
   opacity: clamp(0, 2px / 1px, 1);
   opacity: clamp(0, var(--tooltip-content-border-top-width, 2px) / 1px, 1);
 }
-.Tooltip-module_tooltipWrapper__wwgA3 .Tooltip-module_tooltipContent__iio4V[data-direction=Left] .Tooltip-module_tooltipArrow__4y3Pi {
+.Tooltip-module_tooltipContent__iio4V[data-direction=Bottom][data-align=Start] .Tooltip-module_tooltipArrow__4y3Pi {
+  left: 14px;
+  left: var(--arrow-offset, 14px);
+}
+.Tooltip-module_tooltipContent__iio4V[data-direction=Bottom][data-align=End] .Tooltip-module_tooltipArrow__4y3Pi {
+  left: auto;
+  left: initial;
+  right: 0;
+}
+.Tooltip-module_tooltipContent__iio4V[data-direction=Left] .Tooltip-module_tooltipArrow__4y3Pi {
   width: -moz-max-content;
   width: max-content;
   right: -18px;
   top: 50%;
   transform: translateY(-50%) rotate(-90deg);
 }
-.Tooltip-module_tooltipWrapper__wwgA3 .Tooltip-module_tooltipContent__iio4V[data-direction=Left] .Tooltip-module_tailOutline__7l774 {
-  --svg-stroke-width: calc(var(--tooltip-content-border-right-width, 2px) - 1);
+.Tooltip-module_tooltipContent__iio4V[data-direction=Left] .Tooltip-module_tailOutline__7l774 {
+  --svg-stroke-width: calc(var(--tooltip-content-border-right-width, 2px) - 1px);
   opacity: clamp(0, 2px / 1px, 1);
   opacity: clamp(0, var(--tooltip-content-border-right-width, 2px) / 1px, 1);
 }
-.Tooltip-module_tooltipWrapper__wwgA3 .Tooltip-module_tooltipContent__iio4V[data-direction=Right] .Tooltip-module_tooltipArrow__4y3Pi {
+.Tooltip-module_tooltipContent__iio4V[data-direction=Left][data-align=Start] .Tooltip-module_tooltipArrow__4y3Pi {
+  top: 50%;
+  top: var(--arrow-offset, 50%);
+}
+.Tooltip-module_tooltipContent__iio4V[data-direction=Left][data-align=End] .Tooltip-module_tooltipArrow__4y3Pi {
+  top: auto;
+  top: initial;
+  top: 50%;
+  top: var(--arrow-offset, 50%);
+}
+.Tooltip-module_tooltipContent__iio4V[data-direction=Right] .Tooltip-module_tooltipArrow__4y3Pi {
   width: -moz-max-content;
   width: max-content;
   left: -18px;
   top: 50%;
   transform: translateY(-50%) rotate(90deg);
 }
-.Tooltip-module_tooltipWrapper__wwgA3 .Tooltip-module_tooltipContent__iio4V[data-direction=Right] .Tooltip-module_tailOutline__7l774 {
-  --svg-stroke-width: calc(var(--tooltip-content-border-left-width, 2px) - 1);
+.Tooltip-module_tooltipContent__iio4V[data-direction=Right] .Tooltip-module_tailOutline__7l774 {
+  --svg-stroke-width: calc(var(--tooltip-content-border-left-width, 2px) - 1px);
   opacity: clamp(0, 2px / 1px, 1);
   opacity: clamp(0, var(--tooltip-content-border-left-width, 2px) / 1px, 1);
 }
-.Tooltip-module_tooltipWrapper__wwgA3.Tooltip-module_outlined__EUk52 .Tooltip-module_tooltipContent__iio4V {
+.Tooltip-module_tooltipContent__iio4V[data-direction=Right][data-align=Start] .Tooltip-module_tooltipArrow__4y3Pi {
+  top: 50%;
+  top: var(--arrow-offset, 50%);
+}
+.Tooltip-module_tooltipContent__iio4V[data-direction=Right][data-align=End] .Tooltip-module_tooltipArrow__4y3Pi {
+  top: auto;
+  top: initial;
+  top: 50%;
+  top: var(--arrow-offset, 50%);
+}
+.Tooltip-module_tooltipContent__iio4V.Tooltip-module_outlined__EUk52 {
   border-bottom-width: 2px;
   border-bottom-width: var(--tooltip-content-border-bottom-width, 2px);
   border-left-width: 2px;
@@ -856,7 +894,7 @@
   outline-style: var(--tooltip-content-outline-style);
   outline-color: var(--tooltip-content-outline-color);
 }
-.Tooltip-module_tooltipWrapper__wwgA3.Tooltip-module_outlined__EUk52 .Tooltip-module_tooltipContent__iio4V .Tooltip-module_tailOutline__7l774 {
+.Tooltip-module_tooltipContent__iio4V.Tooltip-module_outlined__EUk52 .Tooltip-module_tailOutline__7l774 {
   --svg-stroke: var(--tooltip-content-border-color, #4E5059);
   --icon-fill: var(--tooltip-content-border-color, #4E5059);
   display: block;