@rafal.lemieszewski/tide-ui 0.8.0 → 0.8.2

package/dist/index.es.js

@@ -62964,7 +62964,7 @@ const IKe = y.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ k(
 ));
 IKe.displayName = "SidebarMenuItem";
 const LKe = _e(
-  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md px-2 py-1.5 text-left text-body-medium-md outline-none ring-[var(--color-border-focused)] transition-all duration-150 ease-in-out focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-[var(--color-background-brand-selected)] data-[active=true]:font-medium data-[active=true]:text-[var(--color-text-selected)] data-[state=open]:bg-[var(--color-surface-secondary)] group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 group-data-[collapsible=icon]:justify-center [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 data-[active=true]:[&>svg]:text-[var(--color-text-selected)]",
+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md px-2 py-1.5 text-left text-body-medium-md outline-none ring-[var(--color-border-focused)] transition-all duration-150 ease-in-out focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-[var(--color-background-brand-selected)] data-[active=true]:text-[var(--color-text-selected)] data-[state=open]:bg-[var(--color-surface-secondary)] group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 group-data-[collapsible=icon]:justify-center [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 data-[active=true]:[&>svg]:text-[var(--color-text-selected)]",
   {
     variants: {
       variant: {
@@ -63025,11 +63025,11 @@ const LKe = _e(
       r === "sm" && "h-7 text-body-sm py-1",
       r === "default" && "h-8",
       r === "lg" && "h-12 py-3 text-body-lg group-data-[collapsible=icon]:!size-8",
-      // Enhanced hover behavior - only show background on active items when hovered
-      // Non-active items remain transparent on hover
+      // Enhanced hover behavior for non-active items
+      b && !w && !t && "bg-[var(--color-background-neutral-subtle-hovered)]",
+      // Enhanced hover behavior for active items
       b && !w && t && [
         "bg-[var(--color-background-brand-selected-hovered)]",
-        "text-[var(--color-text-brand-hovered)]",
         "[&>svg]:text-[var(--color-icon-brand-hover)]"
       ],
       // Focus styles - clean focus for non-active items
@@ -63038,6 +63038,7 @@ const LKe = _e(
       w && t && i && [
         "bg-[var(--color-background-brand-selected)]",
         "text-[var(--color-text-brand)]",
+        "[&]:text-body-medium-md [&]:font-normal",
         "ring-2 ring-[var(--color-border-brand)] ring-offset-1",
         "[&>svg]:text-[var(--color-text-brand)]"
       ],
@@ -63045,7 +63046,7 @@ const LKe = _e(
       t && !w && [
         "bg-[var(--color-background-brand-selected)]",
         "text-[var(--color-text-brand)]",
-        "font-medium",
+        "[&]:text-body-medium-md [&]:font-normal",
         "[&>svg]:text-[var(--color-text-brand)]"
       ],
       // Open state (for collapsible items)
@@ -63224,25 +63225,24 @@ const OKe = y.forwardRef(({
     // Size variants
     t === "sm" && "text-body-sm px-1.5 py-0.5",
     t === "md" && "text-body-md",
-    // Enhanced hover behavior - only show background on active items when hovered
-    // Non-active items remain transparent on hover
-    r && f && !m && n && [
-      "bg-[var(--color-background-brand-selected-hovered)]",
-      "text-[var(--color-text-brand-hovered)]"
-    ],
+    // Enhanced hover behavior for non-active items
+    r && f && !m && !n && "bg-[var(--color-background-neutral-subtle-hovered)]",
+    // Enhanced hover behavior for active items
+    r && f && !m && n && "bg-[var(--color-background-brand-selected-hovered)]",
     // Focus styles - clean focus for non-active items
     r && m && !n && "bg-transparent ring-2 ring-[var(--color-border-brand)] ring-offset-1",
     // Active item focus - preserve brand background when focused
     r && m && n && o && [
       "bg-[var(--color-background-brand-selected)]",
       "text-[var(--color-text-brand)]",
+      "[&]:text-body-md [&]:font-normal",
       "ring-2 ring-[var(--color-border-brand)] ring-offset-1"
     ],
     // Active item styles (non-focus state)
     n && !m && [
       "bg-[var(--color-background-brand-selected)]",
       "text-[var(--color-text-brand)]",
-      "font-medium"
+      "[&]:text-body-md [&]:font-normal"
     ],
     // Fallback for non-enhanced behavior
     !r && [