@kushagradhawan/kookie-ui 0.1.39 → 0.1.41

package/src/components/_internal/base-menu.css

@@ -8,18 +8,18 @@
   flex-direction: column;
   box-sizing: border-box;
   overflow: hidden;
-  
+
   background-color: var(--color-panel);
   backdrop-filter: var(--backdrop-filter-panel);
   box-shadow: var(--shadow-5);
   transition: var(--transition-background-blur);
-  
+
   /* GPU optimization: limit paint scope and prevent backdrop-filter layering */
   contain: paint;
   isolation: isolate;
 
   /* Optimize backdrop-filter performance during animations */
-  &:where([data-state="open"]) {
+  &:where([data-state='open']) {
     will-change: transform, opacity;
   }
 
@@ -188,6 +188,7 @@
         font-size: var(--font-size-1);
         line-height: var(--line-height-1);
         letter-spacing: var(--letter-spacing-1);
+        padding-left: calc(var(--base-menu-item-padding-left) + var(--component-gap-2));
       }
 
       & :where(.rt-BaseMenuItemIndicatorIcon, .rt-BaseMenuSubTriggerIcon) {
@@ -231,6 +232,7 @@
         font-size: var(--font-size-2);
         line-height: var(--line-height-2);
         letter-spacing: var(--letter-spacing-2);
+        padding-left: calc(var(--base-menu-item-padding-left) + var(--component-gap-3));
       }
 
       & :where(.rt-BaseMenuItemIndicatorIcon, .rt-BaseMenuSubTriggerIcon) {
@@ -274,6 +276,7 @@
         font-size: var(--font-size-2);
         line-height: var(--line-height-2);
         letter-spacing: var(--letter-spacing-2);
+        padding-left: calc(var(--base-menu-item-padding-left) + var(--component-gap-4));
       }
 
       & :where(.rt-BaseMenuItemIndicatorIcon, .rt-BaseMenuSubTriggerIcon) {
@@ -308,7 +311,8 @@
 }
 
 /* Ensure gray text appears muted in non-highlighted state */
-.rt-BaseMenuItem :where(.rt-Text[data-accent-color='gray'], [data-accent-color='gray']:not(.rt-Badge)) {
+.rt-BaseMenuItem
+  :where(.rt-Text[data-accent-color='gray'], [data-accent-color='gray']:not(.rt-Badge)) {
   color: var(--gray-a10);
 }
 .rt-BaseMenuItem:where([data-disabled], [data-highlighted]),
@@ -326,23 +330,27 @@
 .rt-BaseMenuContent:where(.rt-variant-solid, .rt-variant-soft) {
   & :where(.rt-BaseMenuSubTrigger) {
     transition: var(--transition-menu);
-    
+
     /* Enhanced reduced motion support */
     @media (prefers-reduced-motion: reduce) {
       transition: none;
       backdrop-filter: none; /* Remove backdrop effects for motion-sensitive users */
     }
-    
+
     /* Remove backdrop-filter transitions in translucent mode to prevent flickering */
     :where([data-panel-background='translucent']) & {
-      transition: background var(--motion-duration-micro) var(--motion-ease-standard), color var(--motion-duration-small) var(--motion-ease-standard);
+      transition:
+        background var(--motion-duration-micro) var(--motion-ease-standard),
+        color var(--motion-duration-small) var(--motion-ease-standard);
     }
   }
-  
+
   & :where(.rt-BaseMenuItem) {
     /* Remove backdrop-filter transitions in translucent mode to prevent flickering */
     :where([data-panel-background='translucent']) & {
-      transition: background var(--motion-duration-micro) var(--motion-ease-standard), color var(--motion-duration-small) var(--motion-ease-standard);
+      transition:
+        background var(--motion-duration-micro) var(--motion-ease-standard),
+        color var(--motion-duration-small) var(--motion-ease-standard);
     }
   }
 }
@@ -352,7 +360,7 @@
   & :where(.rt-BaseMenuSubTrigger[data-state='open']) {
     /* Base state: solid gray for solid panels */
     background-color: var(--gray-3);
-    
+
     /* Theme-level translucent override */
     :where([data-panel-background='translucent']) & {
       background-color: var(--gray-a3);
@@ -371,7 +379,7 @@
       /* No backdrop-filter here to prevent double-blur with container */
     }
   }
-  
+
   & :where(.rt-BaseMenuItem[data-highlighted]) {
     background-color: var(--accent-9);
     color: var(--accent-contrast);
@@ -390,7 +398,7 @@
       color: inherit !important;
     }
   }
-  
+
   &:where(.rt-high-contrast) {
     & :where(.rt-BaseMenuItem[data-highlighted]) {
       background-color: var(--accent-12);
@@ -431,7 +439,7 @@
   & :where(.rt-BaseMenuSubTrigger[data-state='open']) {
     /* Base state: solid accent for solid panels */
     background-color: var(--accent-3);
-    
+
     /* Theme-level translucent override */
     :where([data-panel-background='translucent']) & {
       background-color: var(--accent-a3);
@@ -450,11 +458,11 @@
       /* No backdrop-filter here to prevent double-blur with container */
     }
   }
-  
+
   & :where(.rt-BaseMenuItem[data-highlighted]) {
     /* Base state: solid accent for solid panels */
     background-color: var(--accent-4);
-    
+
     /* Theme-level translucent override */
     :where([data-panel-background='translucent']) & {
       background-color: var(--accent-a4);
@@ -486,11 +494,11 @@
     outline: 2px solid Highlight;
     outline-offset: 2px;
   }
-  
+
   .rt-BaseMenuContent {
     border: 1px solid CanvasText;
   }
-  
+
   .rt-BaseMenuSeparator {
     background-color: CanvasText;
   }

package/src/components/_internal/base-sidebar-menu.css

@@ -99,26 +99,26 @@
   & :where(.rt-SidebarMenuSubTriggerIcon) {
     transition: transform var(--motion-duration-micro) var(--motion-ease-standard);
   }
-  
-  &:where([data-state="open"]) :where(.rt-SidebarMenuSubTriggerIcon) {
+
+  &:where([data-state='open']) :where(.rt-SidebarMenuSubTriggerIcon) {
     transform: rotate(90deg);
   }
 }
 
 .rt-SidebarMenuSubContent {
   overflow: hidden;
-  
+
   /* Allow focus outlines to show */
   &:where(:focus-within) {
     overflow: visible;
   }
-  
+
   /* Radix Accordion animation support */
-  &:where([data-state="open"]) {
+  &:where([data-state='open']) {
     animation: rt-sidebar-slide-down var(--motion-duration-small) var(--motion-ease-standard);
   }
-  
-  &:where([data-state="closed"]) {
+
+  &:where([data-state='closed']) {
     animation: rt-sidebar-slide-up var(--motion-duration-small) var(--motion-ease-standard);
   }
 }
@@ -195,7 +195,7 @@
   :where(.rt-SidebarContent.rt-r-size-1) & {
     padding-right: var(--base-menu-item-padding-y); /* Matches top/bottom padding */
   }
-  
+
   :where(.rt-SidebarContent.rt-r-size-2) & {
     padding-right: var(--base-menu-item-padding-y); /* Matches top/bottom padding */
   }
@@ -220,4 +220,4 @@
 .rt-SidebarContent :where(.rt-BaseMenuItem) {
   margin-top: calc(var(--space-1) / 2);
   margin-bottom: calc(var(--space-1) / 2);
-} 
+}

package/src/components/_internal/base-sidebar.css

@@ -3,12 +3,12 @@
 /* Sidebar Provider - handles positioning */
 .rt-SidebarProvider {
   /* Positioning based on side */
-  &:where([data-side="left"]) {
+  &:where([data-side='left']) {
     /* Left side is default - no additional positioning needed */
     order: -1; /* Ensure it appears first in flex container */
   }
-  
-  &:where([data-side="right"]) {
+
+  &:where([data-side='right']) {
     /* Position on the right side */
     order: 999; /* Push to end in flex container */
   }
@@ -18,7 +18,7 @@
 .rt-SidebarRoot {
   --sidebar-width: 16rem; /* Fixed width */
   --sidebar-base-border-radius: 0; /* Default to no radius */
-  
+
   width: var(--sidebar-width);
   height: 100%;
   flex-shrink: 0;
@@ -34,13 +34,13 @@
   }
 
   /* Floating type - ONLY visual changes */
-  &:where([data-type="floating"]) {
+  &:where([data-type='floating']) {
     border-radius: var(--sidebar-base-border-radius);
     margin: var(--space-2);
     height: calc(100% - var(--space-4));
     overflow: visible; /* Ensure shadow is not clipped */
     position: relative; /* Ensure proper stacking context for floating sidebars */
-    
+
     /* Ensure Theme wrapper has proper border radius in floating mode */
     & :where(.radix-themes) {
       border-radius: inherit;
@@ -49,14 +49,14 @@
 }
 
 /* Set border radius for floating sidebars based on size - set on the root where it's used */
-.rt-SidebarRoot:where([data-type="floating"]) {
+.rt-SidebarRoot:where([data-type='floating']) {
   /* Default radius for floating sidebars */
   --sidebar-base-border-radius: var(--radius-5);
-  
+
   &:where(.rt-r-size-1) {
     --sidebar-base-border-radius: var(--radius-5);
   }
-  
+
   &:where(.rt-r-size-2) {
     --sidebar-base-border-radius: var(--radius-6);
   }
@@ -133,9 +133,9 @@
   margin: var(--space-2) 0;
 }
 
-/* Responsive behavior */
+/* Responsive behavior - only hide when not in Sheet overlay mode */
 @media (max-width: 768px) {
-  .rt-SidebarRoot {
+  .rt-SidebarRoot:not(:where(.rt-SheetContent .rt-SidebarRoot)) {
     display: none;
   }
-} 
+}

package/src/components/dialog.css

@@ -1 +1,13 @@
 @import './_internal/base-dialog.css';
+
+/* Add blur effect to Dialog overlay */
+.rt-DialogOverlay::before {
+  backdrop-filter: var(--backdrop-filter-components) !important;
+}
+
+/* Safari backdrop-filter fallback */
+@supports not (backdrop-filter: blur(1px)) {
+  .rt-DialogOverlay::before {
+    backdrop-filter: none !important;
+  }
+}

package/src/components/sheet.css

@@ -55,7 +55,17 @@
 }
 
 /* Overlay adjustments: avoid double-fade jank from base dialog */
-:where(.rt-SheetOverlay)::before { opacity: 1; }
+.rt-SheetOverlay::before {
+  opacity: 1 !important;
+  backdrop-filter: var(--backdrop-filter-components) !important;
+}
+
+/* Safari backdrop-filter fallback */
+@supports not (backdrop-filter: blur(1px)) {
+  .rt-SheetOverlay::before {
+    backdrop-filter: none !important;
+  }
+}
 
 @media (prefers-reduced-motion: no-preference) {
   /* Override base dialog animations specifically for Sheet */
@@ -72,19 +82,37 @@
     animation-fill-mode: both;
   }
 
-  .rt-SheetContent:where([data-state='open'][data-side='start']) { animation-name: rt-sheet-open-from-start, rt-fade-in !important; }
-  .rt-SheetContent:where([data-state='closed'][data-side='start']) { animation-name: rt-sheet-close-to-start, rt-fade-out !important; }
+  .rt-SheetContent:where([data-state='open'][data-side='start']) {
+    animation-name: rt-sheet-open-from-start, rt-fade-in !important;
+  }
+  .rt-SheetContent:where([data-state='closed'][data-side='start']) {
+    animation-name: rt-sheet-close-to-start, rt-fade-out !important;
+  }
 
-  .rt-SheetContent:where([data-state='open'][data-side='end']) { animation-name: rt-sheet-open-from-end, rt-fade-in !important; }
-  .rt-SheetContent:where([data-state='closed'][data-side='end']) { animation-name: rt-sheet-close-to-end, rt-fade-out !important; }
+  .rt-SheetContent:where([data-state='open'][data-side='end']) {
+    animation-name: rt-sheet-open-from-end, rt-fade-in !important;
+  }
+  .rt-SheetContent:where([data-state='closed'][data-side='end']) {
+    animation-name: rt-sheet-close-to-end, rt-fade-out !important;
+  }
 
-  .rt-SheetContent:where([data-state='open'][data-side='top']) { animation-name: rt-sheet-open-from-top, rt-fade-in !important; }
-  .rt-SheetContent:where([data-state='closed'][data-side='top']) { animation-name: rt-sheet-close-to-top, rt-fade-out !important; }
+  .rt-SheetContent:where([data-state='open'][data-side='top']) {
+    animation-name: rt-sheet-open-from-top, rt-fade-in !important;
+  }
+  .rt-SheetContent:where([data-state='closed'][data-side='top']) {
+    animation-name: rt-sheet-close-to-top, rt-fade-out !important;
+  }
 
-  .rt-SheetContent:where([data-state='open'][data-side='bottom']) { animation-name: rt-sheet-open-from-bottom, rt-fade-in !important; }
-  .rt-SheetContent:where([data-state='closed'][data-side='bottom']) { animation-name: rt-sheet-close-to-bottom, rt-fade-out !important; }
+  .rt-SheetContent:where([data-state='open'][data-side='bottom']) {
+    animation-name: rt-sheet-open-from-bottom, rt-fade-in !important;
+  }
+  .rt-SheetContent:where([data-state='closed'][data-side='bottom']) {
+    animation-name: rt-sheet-close-to-bottom, rt-fade-out !important;
+  }
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .rt-SheetContent { animation: none !important; }
+  .rt-SheetContent {
+    animation: none !important;
+  }
 }

package/src/components/shell.css

@@ -18,7 +18,9 @@
   --shell-overlay-width: auto;
 }
 @supports (height: 100dvh) {
-  .rt-ShellRoot { block-size: 100dvh; }
+  .rt-ShellRoot {
+    block-size: 100dvh;
+  }
 }
 
 /* Global Header (sticky) */
@@ -27,7 +29,8 @@
   top: 0;
   inset-inline: 0;
   z-index: var(--shell-z-header, 10);
-  block-size: var(--shell-header-height, 64px);
+  height: var(--shell-header-height, 64px);
+  min-height: var(--shell-header-height, 64px);
   display: flex;
   align-items: center;
   background-color: var(--color-panel);
@@ -85,8 +88,6 @@
   overflow: hidden;
 }
 
-
-
 /* Single-markup morph container */
 .rt-ShellSidebarSingle {
   /* Staggered animation: width first, then content fade */
@@ -106,7 +107,8 @@
   /* Exit animation: fade out content first, then collapse width */
   transition:
     opacity var(--motion-duration-small) var(--motion-ease-standard),
-    inline-size var(--motion-duration-small) var(--motion-ease-standard) var(--motion-duration-small);
+    inline-size var(--motion-duration-small) var(--motion-ease-standard)
+      var(--motion-duration-small);
 }
 
 /* When visible: show content after width settles */
@@ -135,3 +137,19 @@
 :where(.rt-SheetContent) :where(.rt-ShellSidebarPanel) {
   transition: none !important;
 }
+
+/* Overlay mode: ensure sidebar content has proper styling when rendered in Sheet */
+:where(.rt-SheetContent) :where(.rt-SidebarRoot) {
+  height: 100%;
+  width: 100%;
+}
+
+:where(.rt-SheetContent) :where(.rt-SidebarContainer) {
+  height: 100%;
+  width: 100%;
+}
+
+:where(.rt-SheetContent) :where(.rt-SidebarContent) {
+  height: 100%;
+  width: 100%;
+}

package/src/components/shell.tsx

@@ -161,6 +161,8 @@ interface ShellRootProps extends React.ComponentPropsWithoutRef<'div'> {
   onToolChange?: (id: string | null) => void;
   activeContext?: string | null;
   onContextChange?: (id: string | null) => void;
+  /** Custom cycling order for single-markup sidebars. Defaults to ['panel', 'rail', 'collapsed'] */
+  singleViewCycle?: SingleView[];
 }
 
 const Root = React.forwardRef<HTMLDivElement, ShellRootProps>(
@@ -175,6 +177,7 @@ const Root = React.forwardRef<HTMLDivElement, ShellRootProps>(
       onToolChange,
       activeContext: activeContextProp,
       onContextChange,
+      singleViewCycle = ['panel', 'rail', 'collapsed'],
       className,
       style,
       children,
@@ -237,13 +240,13 @@ const Root = React.forwardRef<HTMLDivElement, ShellRootProps>(
     }, []);
     const cycleSingleView = React.useCallback(
       (side: ShellSide) => {
-        const order: SingleView[] = ['panel', 'rail', 'collapsed'];
+        const order = singleViewCycle;
         const current = singleViewBySide[side];
         const idx = order.indexOf(current);
         const next = order[(idx + 1) % order.length];
         setSingleViewBySide(side, next);
       },
-      [singleViewBySide, setSingleViewBySide],
+      [singleViewBySide, setSingleViewBySide, singleViewCycle],
     );
 
     // === Active tool coordination state ===
@@ -433,7 +436,6 @@ const Header = React.forwardRef<HTMLElement, ShellHeaderProps>(
         role="banner"
         className={classNames('rt-ShellHeader', className)}
         style={{
-          ['--shell-header-height' as any]: headerHeight,
           ['--shell-z-header' as any]: zHeader,
           ...style,
         }}

package/src/components/table.css

@@ -131,4 +131,8 @@
 .rt-TableRoot:where(.rt-variant-ghost) {
   --scrollarea-scrollbar-horizontal-margin-left: 0;
   --scrollarea-scrollbar-horizontal-margin-right: 0;
+
+  & :where(.rt-TableBody) :where(.rt-TableRow:last-child) {
+    --table-row-box-shadow: none;
+  }
 }

package/src/hooks/use-body-pointer-events-cleanup.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-let bodyCleanupInstalled = false;
+let cleanupInstalled = false;
 
 /**
  * Hook to cleanup stuck pointer-events: none on document.body
@@ -12,70 +12,101 @@ let bodyCleanupInstalled = false;
 export function useBodyPointerEventsCleanup() {
   React.useEffect(() => {
     if (typeof document === 'undefined') return;
+    if (cleanupInstalled) return;
 
-    let timeoutId: number | undefined;
+    cleanupInstalled = true;
 
     const hasOpenModal = (): boolean => {
-      // Detect any open modal dialogs/alertdialogs
-      return Boolean(
+      // Check for open dialogs/alertdialogs
+      const hasDialogs = Boolean(
         document.querySelector(
           '[role="dialog"][aria-modal="true"], [role="alertdialog"][aria-modal="true"]',
         ),
       );
+
+      // Also check for any Radix overlays that are still mounted
+      const hasRadixOverlays = Boolean(
+        document.querySelector('[data-radix-popper-content-wrapper], [data-state="open"]'),
+      );
+
+      return hasDialogs || hasRadixOverlays;
     };
 
-    const cleanup = () => {
+    const forceCleanup = () => {
+      // Aggressive cleanup - remove pointer-events regardless
+      if (document.body.style.pointerEvents === 'none') {
+        console.log('[KookieUI] Force cleaning stuck pointer-events: none from body');
+        document.body.style.pointerEvents = '';
+
+        // Also remove any scroll-lock related attributes
+        document.body.removeAttribute('data-scroll-locked');
+        document.body.removeAttribute('data-remove-scroll');
+
+        // Remove any classes that might be causing issues
+        document.body.classList.remove('ReactModal__Body--open');
+      }
+    };
+
+    const safeCleanup = () => {
       if (document.body.style.pointerEvents === 'none' && !hasOpenModal()) {
+        console.log('[KookieUI] Safe cleaning stuck pointer-events: none from body');
         document.body.style.pointerEvents = '';
       }
     };
 
-    const scheduleCleanup = (delay = 50) => {
-      if (timeoutId) window.clearTimeout(timeoutId);
-      timeoutId = window.setTimeout(cleanup, delay);
+    // Force cleanup on any click outside modal content
+    const onDocumentClick = (event: Event) => {
+      const target = event.target as Element;
+      if (
+        target &&
+        !target.closest(
+          '[role="dialog"], [role="alertdialog"], [data-radix-popper-content-wrapper]',
+        )
+      ) {
+        // Clicked outside any modal - force cleanup after a short delay
+        setTimeout(forceCleanup, 100);
+      }
     };
 
-    // Initial run to catch already-stuck state
-    scheduleCleanup(100);
+    // Force cleanup on ESC key
+    const onEscapeKey = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        setTimeout(forceCleanup, 200);
+      }
+    };
 
-    // If already installed globally, don't re-register listeners/observers
-    if (bodyCleanupInstalled) {
-      return () => {
-        if (timeoutId) window.clearTimeout(timeoutId);
-      };
-    }
+    // Safe cleanup on other interactions
+    const onInteraction = () => {
+      setTimeout(safeCleanup, 50);
+    };
 
-    bodyCleanupInstalled = true;
+    // Install global listeners
+    document.addEventListener('click', onDocumentClick, true);
+    document.addEventListener('keydown', onEscapeKey, true);
+    document.addEventListener('pointerup', onInteraction, true);
+    document.addEventListener('transitionend', onInteraction, true);
+    document.addEventListener('animationend', onInteraction, true);
 
-    const onPointer = () => scheduleCleanup(50);
-    const onKey = (event: KeyboardEvent) => {
-      if (event.key === 'Escape' || event.key === 'Enter' || event.key === ' ') scheduleCleanup(50);
-    };
-    const onVisibility = () => {
-      if (!document.hidden) scheduleCleanup(50);
-    };
-    const onTransitionEnd = () => scheduleCleanup(0);
-    const onAnimationEnd = () => scheduleCleanup(0);
-
-    // Listen for common interactions that close overlays/menus
-    document.addEventListener('pointerup', onPointer, true);
-    document.addEventListener('click', onPointer, true);
-    document.addEventListener('keydown', onKey, true);
-    document.addEventListener('keyup', onKey, true);
-    document.addEventListener('visibilitychange', onVisibility);
-    document.addEventListener('transitionend', onTransitionEnd, true);
-    document.addEventListener('animationend', onAnimationEnd, true);
-
-    // Observe body style changes (where pointer-events is applied) and DOM mutations
-    const bodyObserver = new MutationObserver(() => scheduleCleanup(0));
-    bodyObserver.observe(document.body, { attributes: true, attributeFilter: ['style'] });
-
-    const domObserver = new MutationObserver(() => scheduleCleanup(0));
-    domObserver.observe(document, { childList: true, subtree: true });
-
-    // Keep listeners/observers for the app lifetime to ensure cleanup even after overlays unmount
+    // Watch for DOM changes that might indicate overlay removal
+    const observer = new MutationObserver(() => {
+      setTimeout(safeCleanup, 0);
+    });
+    observer.observe(document.body, { childList: true, subtree: true, attributes: true });
+
+    // Fallback periodic cleanup
+    const intervalId = setInterval(() => {
+      if (document.body.style.pointerEvents === 'none' && !hasOpenModal()) {
+        console.log('[KookieUI] Periodic cleanup of stuck pointer-events');
+        document.body.style.pointerEvents = '';
+      }
+    }, 1000);
+
+    // Initial cleanup
+    setTimeout(safeCleanup, 100);
+
+    // Cleanup function (keep listeners for app lifetime)
     return () => {
-      if (timeoutId) window.clearTimeout(timeoutId);
+      clearInterval(intervalId);
     };
   }, []);
 }

package/src/styles/tokens/cursor.css

@@ -3,7 +3,7 @@
   --cursor-checkbox: default;
   --cursor-disabled: not-allowed;
   --cursor-link: pointer;
-  --cursor-menu-item: default;
+  --cursor-menu-item: pointer;
   --cursor-radio: default;
   --cursor-slider-thumb: default;
   --cursor-slider-thumb-active: default;