@grandbazar/ui-baza 1.2.0 → 1.2.2

package/dist/style.css

@@ -1086,11 +1086,17 @@ textarea {
   }
 }
 @layer ui_baza_components {
-  ._dropdownPortal_ne1k6_2 {
+  ._dropdownPortal_p3tdk_2 {
+    --dropdown-portal-translate-x: 0%;
+    --dropdown-portal-translate-y: 0%;
+    --dropdown-portal-max-width: auto;
+    --dropdown-portal-max-height: auto;
+
     z-index: var(--z-index-dropdown);
     position: absolute;
-    margin-top: var(--space-md);
-    transform: scale(1);
+    max-width: var(--dropdown-portal-max-width);
+    max-height: var(--dropdown-portal-max-height);
+    transform: translate(var(--dropdown-portal-translate-x), var(--dropdown-portal-translate-y)) scale(1);
     transform-origin: top left;
     opacity: 1;
     transition:
@@ -1098,7 +1104,7 @@ textarea {
       transform 0.2s ease-out;
 
     @starting-style {
-      transform: scale(0.95);
+      transform: translate(var(--dropdown-portal-translate-x), var(--dropdown-portal-translate-y)) scale(0.95);
       opacity: 0;
     }
   }
@@ -1851,3 +1857,104 @@ textarea {
     }
   }
 }
+@layer ui_baza_components {
+  ._tooltipContent_1267q_2 {
+    --tooltip-content-arrow-width: 16px;
+    --tooltip-content-arrow-height: 8px;
+    --tooltip-content-arrow-square-side: calc(var(--tooltip-content-arrow-height) * sqrt(2));
+    --tooltip-content-arrow-border-radius: 2px;
+    --tooltip-content-arrow-offset-inline: var(--space-xl);
+    --tooltip-content-arrow-offset-block: var(--space-lg);
+
+    display: flex;
+    position: relative;
+    flex-direction: column;
+    justify-content: center;
+    padding-inline: var(--space-xl);
+    padding-block: var(--space-lg);
+    gap: var(--space-xs);
+    border-radius: var(--radius-tooltip);
+    background-color: var(--color-neutral);
+    color: var(--color-white);
+    font-size: var(--size-sm);
+    line-height: var(--line-height-md);
+
+    &::before {
+      visibility: hidden;
+      position: absolute;
+      width: var(--tooltip-content-arrow-square-side);
+      height: var(--tooltip-content-arrow-square-side);
+      transform: rotate(45deg);
+      background-color: var(--color-neutral);
+      content: '';
+    }
+
+    &[data-position='top']::before {
+      visibility: visible;
+      bottom: calc(var(--tooltip-content-arrow-square-side) / -2);
+      border-radius: 0 0 var(--tooltip-content-arrow-border-radius) 0;
+    }
+
+    &[data-position='bottom']::before {
+      visibility: visible;
+      top: calc(var(--tooltip-content-arrow-square-side) / -2);
+      border-radius: var(--tooltip-content-arrow-border-radius) 0 0 0;
+    }
+
+    &[data-position='right']::before {
+      visibility: visible;
+      left: calc(var(--tooltip-content-arrow-square-side) / -2);
+      border-radius: 0 0 0 var(--tooltip-content-arrow-border-radius);
+    }
+
+    &[data-position='left']::before {
+      visibility: visible;
+      right: calc(var(--tooltip-content-arrow-square-side) / -2);
+      border-radius: 0 var(--tooltip-content-arrow-border-radius) 0 0;
+    }
+
+    &[data-align='center'][data-position='top']::before,
+    &[data-align='center'][data-position='bottom']::before {
+      visibility: visible;
+      left: 50%;
+      transform: translateX(-50%) rotate(45deg);
+    }
+
+    &[data-align='center'][data-position='left']::before,
+    &[data-align='center'][data-position='right']::before {
+      visibility: visible;
+      top: 50%;
+      transform: translateY(-50%) rotate(45deg);
+    }
+
+    &[data-align='start'][data-position='top']::before,
+    &[data-align='start'][data-position='bottom']::before {
+      visibility: visible;
+      left: var(--tooltip-content-arrow-offset-inline);
+    }
+
+    &[data-align='end'][data-position='top']::before,
+    &[data-align='end'][data-position='bottom']::before {
+      visibility: visible;
+      right: var(--tooltip-content-arrow-offset-inline);
+    }
+
+    &[data-align='start'][data-position='left']::before,
+    &[data-align='start'][data-position='right']::before {
+      visibility: visible;
+      top: var(--tooltip-content-arrow-offset-block);
+    }
+
+    &[data-align='end'][data-position='left']::before,
+    &[data-align='end'][data-position='right']::before {
+      visibility: visible;
+      bottom: var(--tooltip-content-arrow-offset-block);
+    }
+  }
+
+  ._tooltipTitle_1267q_96 {
+    font-weight: var(--font-weight-medium);
+    font-size: var(--size-md);
+    line-height: var(--line-height-lg);
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grandbazar/ui-baza",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "description": "A lightweight and modular UI kit for building modern, accessible web interfaces. Designed for flexibility, scalability, and developer happiness.",
   "repository": {
     "type": "git",