@kushagradhawan/kookie-ui 0.1.45 → 0.1.47

package/schemas/button.json

@@ -530,6 +530,6 @@
   "title": "Button Component Props",
   "description": "Props schema for the button component in Kookie UI",
   "version": "1.0.0",
-  "generatedAt": "2025-09-10T11:43:38.645Z",
+  "generatedAt": "2025-09-10T16:59:14.164Z",
   "source": "Zod schema"
 }

package/schemas/icon-button.json

@@ -313,6 +313,6 @@
   "title": "Icon-button Component Props",
   "description": "Props schema for the icon-button component in Kookie UI",
   "version": "1.0.0",
-  "generatedAt": "2025-09-10T11:43:38.646Z",
+  "generatedAt": "2025-09-10T16:59:14.185Z",
   "source": "Zod schema"
 }

package/schemas/index.json

@@ -3,7 +3,7 @@
   "title": "Kookie UI Button Components",
   "description": "Complete JSON Schema collection for all button components in Kookie UI",
   "version": "1.0.0",
-  "generatedAt": "2025-09-10T11:43:38.648Z",
+  "generatedAt": "2025-09-10T16:59:14.189Z",
   "source": "Zod schemas",
   "components": {
     "base-button": {
@@ -287,7 +287,7 @@
       "title": "Base-button Component Props",
       "description": "Props schema for the base-button component in Kookie UI",
       "version": "1.0.0",
-      "generatedAt": "2025-09-10T11:43:38.640Z",
+      "generatedAt": "2025-09-10T16:59:14.159Z",
       "source": "Zod schema"
     },
     "button": {
@@ -822,7 +822,7 @@
       "title": "Button Component Props",
       "description": "Props schema for the button component in Kookie UI",
       "version": "1.0.0",
-      "generatedAt": "2025-09-10T11:43:38.645Z",
+      "generatedAt": "2025-09-10T16:59:14.164Z",
       "source": "Zod schema"
     },
     "icon-button": {
@@ -1140,7 +1140,7 @@
       "title": "Icon-button Component Props",
       "description": "Props schema for the icon-button component in Kookie UI",
       "version": "1.0.0",
-      "generatedAt": "2025-09-10T11:43:38.646Z",
+      "generatedAt": "2025-09-10T16:59:14.185Z",
       "source": "Zod schema"
     },
     "toggle-button": {
@@ -1683,7 +1683,7 @@
       "title": "Toggle-button Component Props",
       "description": "Props schema for the toggle-button component in Kookie UI",
       "version": "1.0.0",
-      "generatedAt": "2025-09-10T11:43:38.647Z",
+      "generatedAt": "2025-09-10T16:59:14.187Z",
       "source": "Zod schema"
     },
     "toggle-icon-button": {
@@ -2009,7 +2009,7 @@
       "title": "Toggle-icon-button Component Props",
       "description": "Props schema for the toggle-icon-button component in Kookie UI",
       "version": "1.0.0",
-      "generatedAt": "2025-09-10T11:43:38.648Z",
+      "generatedAt": "2025-09-10T16:59:14.188Z",
       "source": "Zod schema"
     }
   }

package/schemas/toggle-button.json

@@ -538,6 +538,6 @@
   "title": "Toggle-button Component Props",
   "description": "Props schema for the toggle-button component in Kookie UI",
   "version": "1.0.0",
-  "generatedAt": "2025-09-10T11:43:38.647Z",
+  "generatedAt": "2025-09-10T16:59:14.187Z",
   "source": "Zod schema"
 }

package/schemas/toggle-icon-button.json

@@ -321,6 +321,6 @@
   "title": "Toggle-icon-button Component Props",
   "description": "Props schema for the toggle-icon-button component in Kookie UI",
   "version": "1.0.0",
-  "generatedAt": "2025-09-10T11:43:38.648Z",
+  "generatedAt": "2025-09-10T16:59:14.188Z",
   "source": "Zod schema"
 }

package/src/components/shell.css

@@ -335,6 +335,9 @@
 
 .rt-ShellBottom[data-mode='collapsed'] {
   height: 0px;
+  position: absolute;
+  inset-inline: 0;
+  inset-block-end: 0;
 }
 
 .rt-ShellBottomContent {
@@ -569,11 +572,10 @@
   width: var(--panel-size, 288px);
 }
 
-/* Sidebar peek: left edge; if collapsed, use fallback width */
+/* Sidebar peek: left edge; preview next width (thin or expanded) */
 .rt-ShellSidebar[data-peek] {
   inset-block: 0;
   inset-inline-start: 0;
-  /* Always use peek width when peeking */
   width: var(--peek-sidebar-width, var(--sidebar-size, 288px));
 }
 

package/src/components/shell.tsx

@@ -1085,7 +1085,7 @@ type SidebarComponent = React.ForwardRefExoticComponent<
     defaultMode?: ResponsiveSidebarMode;
     onModeChange?: (mode: SidebarMode) => void;
     thinSize?: number;
-    toggleModes?: Array<'thin' | 'expanded'>;
+    toggleModes?: 'both' | 'single';
   }) &
     React.RefAttributes<HTMLDivElement>
 > & { Handle: HandleComponent };
@@ -1294,7 +1294,7 @@ const Sidebar = React.forwardRef<
     defaultMode?: ResponsiveSidebarMode;
     onModeChange?: (mode: SidebarMode) => void;
     thinSize?: number;
-    toggleModes?: Array<'thin' | 'expanded'>;
+    toggleModes?: 'both' | 'single';
   }
 >(
   (
@@ -1427,39 +1427,57 @@ const Sidebar = React.forwardRef<
       };
     }, [resizable, persistenceAdapter, onResize, isOverlay]);
 
-    // Register custom toggle behavior based on toggleModes
+    // Always-follow responsive defaultMode for uncontrolled Sidebar (on breakpoint change only)
+    const resolveResponsiveMode = React.useCallback((): SidebarMode => {
+      if (typeof defaultMode === 'string') return defaultMode as SidebarMode;
+      const dm = defaultMode as Partial<Record<Breakpoint, SidebarMode>> | undefined;
+      if (dm && dm[shell.currentBreakpoint as Breakpoint]) {
+        return dm[shell.currentBreakpoint as Breakpoint] as SidebarMode;
+      }
+      const bpKeys = Object.keys(BREAKPOINTS) as Array<keyof typeof BREAKPOINTS>;
+      const order: Breakpoint[] = ([...bpKeys].reverse() as Breakpoint[]).concat(
+        'initial' as Breakpoint,
+      );
+      const startIdx = order.indexOf(shell.currentBreakpoint as Breakpoint);
+      for (let i = startIdx + 1; i < order.length; i++) {
+        const bp = order[i];
+        if (dm && dm[bp]) return dm[bp] as SidebarMode;
+      }
+      return 'collapsed';
+    }, [defaultMode, shell.currentBreakpoint]);
+
+    // Register custom toggle behavior based on toggleModes (both|single)
     const shellForToggle = useShell();
+    const resolveDefaultSidebarMode = React.useCallback((): SidebarMode => {
+      const resolved = resolveResponsiveMode();
+      return resolved === 'thin' || resolved === 'expanded' ? resolved : 'expanded';
+    }, [resolveResponsiveMode]);
+
     React.useEffect(() => {
       if (!shellForToggle.setSidebarToggleComputer) return;
-      // Build cycle from provided modes (defaults to both)
-      const enabled = (
-        toggleModes && toggleModes.length > 0 ? toggleModes : (['thin', 'expanded'] as const)
-      ) as Array<'thin' | 'expanded'>;
+      const strategy: 'both' | 'single' = toggleModes ?? 'both';
       const compute = (current: SidebarMode): SidebarMode => {
-        if (current === 'collapsed') return enabled[0] ?? 'expanded';
-        if (current === 'thin') {
-          // if thin not enabled, go to collapsed; else if expanded enabled go expanded; else collapsed
-          return enabled.includes('thin')
-            ? enabled.includes('expanded')
-              ? 'expanded'
-              : 'collapsed'
-            : 'collapsed';
-        }
-        // expanded
-        if (enabled.length === 2 && enabled.includes('thin') && enabled.includes('expanded')) {
+        if (strategy === 'both') {
+          // collapsed -> thin -> expanded -> collapsed
+          if (current === 'collapsed') return 'thin';
+          if (current === 'thin') return 'expanded';
           return 'collapsed';
         }
-        // if only expanded enabled, collapse next; if only thin enabled, go thin next
-        return enabled.includes('thin') && !enabled.includes('expanded') ? 'thin' : 'collapsed';
+        // single: toggle between collapsed and resolved default mode
+        const target = resolveDefaultSidebarMode();
+        if (current === 'collapsed') return target;
+        if (current === target) return 'collapsed';
+        // if in the other non-collapsed state, jump to the target
+        return target;
       };
       shellForToggle.setSidebarToggleComputer(compute);
       return () => {
-        // reset to default sequence when unmounting this Sidebar
+        // default fallback sequence when unmounting
         shellForToggle.setSidebarToggleComputer?.((cur) =>
           cur === 'collapsed' ? 'thin' : cur === 'thin' ? 'expanded' : 'collapsed',
         );
       };
-    }, [shellForToggle, toggleModes]);
+    }, [shellForToggle, toggleModes, resolveDefaultSidebarMode]);
 
     // Preserve last non-collapsed width for smooth overlay close animation
     const lastOverlayWidthRef = React.useRef<number>(expandedSize);
@@ -1471,24 +1489,7 @@ const Sidebar = React.forwardRef<
       }
     }, [shell.sidebarMode, thinSize, expandedSize]);
 
-    // Always-follow responsive defaultMode for uncontrolled Sidebar (on breakpoint change only)
-    const resolveResponsiveMode = React.useCallback((): SidebarMode => {
-      if (typeof defaultMode === 'string') return defaultMode as SidebarMode;
-      const dm = defaultMode as Partial<Record<Breakpoint, SidebarMode>> | undefined;
-      if (dm && dm[shell.currentBreakpoint as Breakpoint]) {
-        return dm[shell.currentBreakpoint as Breakpoint] as SidebarMode;
-      }
-      const bpKeys = Object.keys(BREAKPOINTS) as Array<keyof typeof BREAKPOINTS>;
-      const order: Breakpoint[] = ([...bpKeys].reverse() as Breakpoint[]).concat(
-        'initial' as Breakpoint,
-      );
-      const startIdx = order.indexOf(shell.currentBreakpoint as Breakpoint);
-      for (let i = startIdx + 1; i < order.length; i++) {
-        const bp = order[i];
-        if (dm && dm[bp]) return dm[bp] as SidebarMode;
-      }
-      return 'collapsed';
-    }, [defaultMode, shell.currentBreakpoint]);
+    // (moved above)
 
     const lastSidebarBpRef = React.useRef<Breakpoint | null>(null);
     React.useEffect(() => {
@@ -1563,7 +1564,7 @@ const Sidebar = React.forwardRef<
             <VisuallyHidden>
               <Sheet.Title>Sidebar</Sheet.Title>
             </VisuallyHidden>
-            {children}
+            {contentChildren}
           </Sheet.Content>
         </Sheet.Root>
       );
@@ -1584,25 +1585,31 @@ const Sidebar = React.forwardRef<
           ['--sidebar-thin-size' as any]: `${thinSize}px`,
           ['--sidebar-min-size' as any]: `${minSize}px`,
           ['--sidebar-max-size' as any]: `${maxSize}px`,
-          // When peeking in fixed presentation, use the next toggle target's width (thin or expanded)
-          ...(shell.peekTarget === 'sidebar' && !isOverlay
+          // When peeking in fixed presentation and collapsed, preview next state's width
+          ...(shell.peekTarget === 'sidebar' && shell.sidebarMode === 'collapsed' && !isOverlay
             ? (() => {
-                const enabled = (
-                  toggleModes && toggleModes.length > 0
-                    ? toggleModes
-                    : (['thin', 'expanded'] as const)
-                ) as Array<'thin' | 'expanded'>;
+                const strategy: 'both' | 'single' = toggleModes ?? 'both';
                 const current = shell.sidebarMode as SidebarMode;
-                let next: SidebarMode = 'collapsed';
-                if (current === 'collapsed') {
-                  next = (enabled[0] ?? 'expanded') as SidebarMode;
-                } else if (current === 'thin') {
-                  next = enabled.includes('expanded') ? 'expanded' : 'collapsed';
+                let next: SidebarMode;
+                if (strategy === 'both') {
+                  next =
+                    current === 'collapsed'
+                      ? 'thin'
+                      : current === 'thin'
+                        ? 'expanded'
+                        : 'collapsed';
                 } else {
-                  next = enabled.includes('thin') ? 'thin' : 'collapsed';
+                  const target = resolveDefaultSidebarMode();
+                  next = current === 'collapsed' ? target : 'collapsed';
                 }
-                const peekWidth = next === 'thin' ? thinSize : expandedSize;
-                return { ['--peek-sidebar-width' as any]: `${peekWidth}px` } as React.CSSProperties;
+                if (next === 'thin') {
+                  return {
+                    ['--peek-sidebar-width' as any]: `${thinSize}px`,
+                  } as React.CSSProperties;
+                }
+                return {
+                  ['--peek-sidebar-width' as any]: `var(--sidebar-size, ${expandedSize}px)`,
+                } as React.CSSProperties;
               })()
             : {}),
         }}
@@ -1826,7 +1833,7 @@ const Inspector = React.forwardRef<HTMLDivElement, PaneProps>(
             <VisuallyHidden>
               <Sheet.Title>Inspector</Sheet.Title>
             </VisuallyHidden>
-            {children}
+            {contentChildren}
           </Sheet.Content>
         </Sheet.Root>
       );
@@ -1910,17 +1917,60 @@ const Bottom = React.forwardRef<HTMLDivElement, PaneProps>(
       (el: React.ReactElement) => !(React.isValidElement(el) && el.type === BottomHandle),
     );
 
-    // Honor defaultMode on mount when uncontrolled
+    // Resolve responsive defaultMode for uncontrolled Bottom (on mount and breakpoint change)
+    const resolveResponsiveMode = React.useCallback((): PaneMode => {
+      if (typeof defaultMode === 'string') return defaultMode as PaneMode;
+      const dm = defaultMode as Partial<Record<Breakpoint, PaneMode>> | undefined;
+      if (dm && dm[shell.currentBreakpoint as Breakpoint]) {
+        return dm[shell.currentBreakpoint as Breakpoint] as PaneMode;
+      }
+      const bpKeys = Object.keys(BREAKPOINTS) as Array<keyof typeof BREAKPOINTS>;
+      const order: Breakpoint[] = ([...bpKeys].reverse() as Breakpoint[]).concat(
+        'initial' as Breakpoint,
+      );
+      const startIdx = order.indexOf(shell.currentBreakpoint as Breakpoint);
+      for (let i = startIdx + 1; i < order.length; i++) {
+        const bp = order[i];
+        if (dm && dm[bp]) {
+          return dm[bp] as PaneMode;
+        }
+      }
+      return 'collapsed';
+    }, [defaultMode, shell.currentBreakpoint]);
+
+    // Honor defaultMode on mount when uncontrolled (including responsive objects)
     const didInitRef = React.useRef(false);
     React.useEffect(() => {
       if (didInitRef.current) return;
       didInitRef.current = true;
-      if (mode === undefined && shell.bottomMode !== (defaultMode as PaneMode)) {
-        shell.setBottomMode(defaultMode as PaneMode);
+      if (mode === undefined) {
+        const initial = resolveResponsiveMode();
+        if (shell.bottomMode !== initial) shell.setBottomMode(initial);
       }
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
+    // Apply responsive defaultMode on breakpoint change when uncontrolled
+    const lastBottomBpRef = React.useRef<Breakpoint | null>(null);
+    const lastResolvedBottomRef = React.useRef<PaneMode | null>(null);
+    React.useEffect(() => {
+      if (mode !== undefined) return; // controlled wins
+      if (!shell.currentBreakpointReady) return; // avoid SSR mismatch
+      if (lastBottomBpRef.current === shell.currentBreakpoint) return; // only on bp change
+      lastBottomBpRef.current = shell.currentBreakpoint as Breakpoint;
+      const next = resolveResponsiveMode();
+      if (lastResolvedBottomRef.current === next) return; // no-op transition
+      lastResolvedBottomRef.current = next;
+      if (next !== shell.bottomMode) shell.setBottomMode(next);
+    }, [
+      mode,
+      shell.currentBreakpoint,
+      shell.currentBreakpointReady,
+      resolveResponsiveMode,
+      shell.bottomMode,
+      shell.setBottomMode,
+    ]);
+
     // Sync controlled mode
     React.useEffect(() => {
       if (mode !== undefined && shell.bottomMode !== mode) {
@@ -2032,7 +2082,7 @@ const Bottom = React.forwardRef<HTMLDivElement, PaneProps>(
             <VisuallyHidden>
               <Sheet.Title>Bottom panel</Sheet.Title>
             </VisuallyHidden>
-            {children}
+            {contentChildren}
           </Sheet.Content>
         </Sheet.Root>
       );
@@ -2099,6 +2149,11 @@ const Trigger = React.forwardRef<HTMLButtonElement, TriggerProps>(
       (event: React.MouseEvent<HTMLButtonElement>) => {
         onClick?.(event);
 
+        // Clear any active peek on this target before toggling to avoid sticky peek state
+        if ((shell as any).peekTarget === target) {
+          shell.clearPeek();
+        }
+
         switch (action) {
           case 'toggle':
             shell.togglePane(target);

package/styles.css

@@ -20131,6 +20131,9 @@
 }
 .rt-ShellBottom[data-mode='collapsed']{
   height: 0px;
+  position: absolute;
+  inset-inline: 0;
+  inset-block-end: 0;
 }
 .rt-ShellBottomContent{
   display: flex;