adnbn-ui 0.2.6 → 0.2.7

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "adnbn-ui",
   "type": "module",
-  "version": "0.2.6",
+  "version": "0.2.7",
   "description": "A comprehensive React UI component library designed exclusively for the AddonBone browser extension framework with customizable theming and consistent design patterns",
   "keywords": [
     "react",

package/src/components/Tooltip/Tooltip.tsx

@@ -34,6 +34,7 @@ const Tooltip: ForwardRefRenderFunction<HTMLDivElement, TooltipProps> = (props,
 
         arrowWidth,
         arrowHeight,
+        collisionPadding = 8,
         matchTriggerWidth,
         content,
         arrowClassName,
@@ -62,6 +63,7 @@ const Tooltip: ForwardRefRenderFunction<HTMLDivElement, TooltipProps> = (props,
                             },
                             contentClassName
                         )}
+                        collisionPadding={collisionPadding}
                         {...other}
                     >
                         {content}

package/src/components/Tooltip/tooltip.module.scss

@@ -6,7 +6,7 @@ $root: tooltip;
     font-family: var(--tooltip-font-family, var(--font-family)), sans-serif;
     font-weight: var(--tooltip-font-weight, 500);
     font-size: var(--tooltip-font-size, var(--font-size, 14px));
-    line-height: var(--tooltip-line-height, var(--line-height, 1 rem));
+    line-height: var(--tooltip-line-height, var(--line-height, 1rem));
     color: var(--tooltip-color, var(--text-secondary-color));
     background-color: var(--tooltip-bg-color, var(--bg-secondary-color));
     border-radius: var(--tooltip-border-radius, 5px);
@@ -19,9 +19,7 @@ $root: tooltip;
     user-select: none;
     animation-duration: var(--transition-speed-md);
     will-change: transform, opacity;
-    box-shadow:
-      rgba(0, 6, 13, 0.35) 0 10px 38px -10px,
-      rgba(0, 6, 13, 0.2) 0px 10px 20px -15px;
+    box-shadow: var(--tooltip-box-shadow-offset, 0 0 5px 0) var(--tooltip-box-shadow-color, rgba(210, 208, 208, 0.47));
 
     &--trigger-width {
       width: var(--radix-tooltip-trigger-width);
@@ -42,10 +40,41 @@ $root: tooltip;
     &[data-state="delayed-open"][data-side="left"] {
       animation-name: slideRightAndFade;
     }
+
+    &:before {
+      content: "";
+      box-sizing: border-box;
+      position: absolute;
+      z-index: 100000;
+      inset: 0;
+      width: 100%;
+      height: 100%;
+      border: calc(var(--tooltip-border-width, 1px) + 2px) solid var(--tooltip-bg-color, var(--bg-secondary-color));
+      border-radius: calc(var(--tooltip-border-radius, 5px) - var(--tooltip-border-width, 1px));
+    }
+
+    & > span {
+      &:before {
+        content: "";
+        position: absolute;
+        border-radius: 100%;
+        width: 1px;
+        height: 1px;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        box-shadow: var(--tooltip-arrow-box-shadow-offset, 0 1px 4px 2px)
+          var(--tooltip-box-shadow-color, rgba(210, 208, 208, 0.47));
+      }
+    }
   }
 
   &-arrow {
+    position: relative;
     fill: var(--tooltip-bg-color, var(--bg-secondary-color));
+    stroke: var(--tooltip-border-color, var(--tooltip-bg-color, var(--bg-secondary-color)));
+    stroke-width: var(--tooltip-border-width, 1px);
+    margin-top: calc(var(--tooltip-border-width, 1px) * -1);
   }
 }
 

package/src/components/types.ts

@@ -58,7 +58,7 @@ export interface ComponentsProps {
         | "radius"
         | "color"
     >;
-    tooltip?: Pick<TooltipProps, "side" | "align" | "delayDuration" | "arrowHeight" | "arrowWidth">;
+    tooltip?: TooltipProps;
     view?: ViewProps;
     viewDrawer?: ViewDrawerProps;
     viewModal?: ViewModalProps;