@kushagradhawan/kookie-ui 0.1.123 → 0.1.124

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": "2026-01-09T16:57:47.916Z",
+  "generatedAt": "2026-01-11T18:27:18.411Z",
   "source": "Zod schema"
 }

package/src/components/_internal/shell-bottom.tsx

@@ -7,7 +7,7 @@ import { useResponsivePresentation, useResponsiveInitialState } from '../shell.h
 import { PaneResizeContext } from './shell-resize.js';
 import { BottomHandle, PaneHandle } from './shell-handles.js';
 import { _BREAKPOINTS } from '../shell.types.js';
-import type { Breakpoint, PaneMode, PaneSizePersistence, ResponsivePresentation, PaneBaseProps } from '../shell.types.js';
+import type { Breakpoint, PaneMode, PaneSizePersistence, ResponsivePresentation, PaneBaseProps, CSSPropertiesWithVars } from '../shell.types.js';
 import { extractPaneDomProps, mapResponsiveBooleanToPaneMode } from './shell-prop-helpers.js';
 import { normalizeToPx } from '../../helpers/normalize-to-px.js';
 
@@ -391,10 +391,10 @@ export const Bottom = React.forwardRef<HTMLDivElement, BottomPublicProps>((initi
       data-inset={inset || undefined}
       style={{
         ...style,
-        ['--bottom-size' as any]: `${expandedSize}px`,
-        ['--bottom-min-size' as any]: `${minSize}px`,
-        ['--bottom-max-size' as any]: `${maxSize}px`,
-      }}
+        '--bottom-size': `${expandedSize}px`,
+        '--bottom-min-size': `${minSize}px`,
+        '--bottom-max-size': `${maxSize}px`,
+      } as CSSPropertiesWithVars}
     >
       <div className="rt-ShellBottomContent" data-visible={isExpanded || undefined}>
         {contentChildren}

package/src/components/_internal/shell-handles.tsx

@@ -88,19 +88,19 @@ export const PaneHandle = React.forwardRef<HTMLDivElement, React.ComponentPropsW
           try {
             handleEl.releasePointerCapture(pointerId);
           } catch {}
-          window.removeEventListener('pointermove', handleMove as any);
-          document.removeEventListener('pointermove', handleMove as any);
-          window.removeEventListener('mousemove', handleMove as any);
-          document.removeEventListener('mousemove', handleMove as any);
-          handleEl.removeEventListener('pointermove', handleMove as any);
-          window.removeEventListener('pointerup', handleUp as any);
-          document.removeEventListener('pointerup', handleUp as any);
-          window.removeEventListener('mouseup', handleUp as any);
-          document.removeEventListener('mouseup', handleUp as any);
-          window.removeEventListener('pointercancel', handleUp as any);
-          document.removeEventListener('pointercancel', handleUp as any);
-          window.removeEventListener('keydown', handleKey as any);
-          handleEl.removeEventListener('lostpointercapture', handleUp as any);
+          window.removeEventListener('pointermove', handleMove as EventListener);
+          document.removeEventListener('pointermove', handleMove as EventListener);
+          window.removeEventListener('mousemove', handleMove as EventListener);
+          document.removeEventListener('mousemove', handleMove as EventListener);
+          handleEl.removeEventListener('pointermove', handleMove as EventListener);
+          window.removeEventListener('pointerup', handleUp as EventListener);
+          document.removeEventListener('pointerup', handleUp as EventListener);
+          window.removeEventListener('mouseup', handleUp as EventListener);
+          document.removeEventListener('mouseup', handleUp as EventListener);
+          window.removeEventListener('pointercancel', handleUp as EventListener);
+          document.removeEventListener('pointercancel', handleUp as EventListener);
+          window.removeEventListener('keydown', handleKey as EventListener);
+          handleEl.removeEventListener('lostpointercapture', handleUp as EventListener);
           container.removeAttribute('data-resizing');
           body.style.cursor = prevCursor;
           body.style.userSelect = prevUserSelect;
@@ -132,20 +132,20 @@ export const PaneHandle = React.forwardRef<HTMLDivElement, React.ComponentPropsW
             cleanup();
           }
         };
-        window.addEventListener('pointermove', handleMove as any);
-        document.addEventListener('pointermove', handleMove as any);
+        window.addEventListener('pointermove', handleMove as EventListener);
+        document.addEventListener('pointermove', handleMove as EventListener);
         // Fallbacks for environments that don't fully support PointerEvent on window
-        window.addEventListener('mousemove', handleMove as any);
-        document.addEventListener('mousemove', handleMove as any);
-        handleEl.addEventListener('pointermove', handleMove as any);
-        window.addEventListener('pointerup', handleUp as any);
-        document.addEventListener('pointerup', handleUp as any);
-        window.addEventListener('mouseup', handleUp as any);
-        document.addEventListener('mouseup', handleUp as any);
-        window.addEventListener('pointercancel', handleUp as any);
-        document.addEventListener('pointercancel', handleUp as any);
-        window.addEventListener('keydown', handleKey as any);
-        handleEl.addEventListener('lostpointercapture', handleUp as any);
+        window.addEventListener('mousemove', handleMove as EventListener);
+        document.addEventListener('mousemove', handleMove as EventListener);
+        handleEl.addEventListener('pointermove', handleMove as EventListener);
+        window.addEventListener('pointerup', handleUp as EventListener);
+        document.addEventListener('pointerup', handleUp as EventListener);
+        window.addEventListener('mouseup', handleUp as EventListener);
+        document.addEventListener('mouseup', handleUp as EventListener);
+        window.addEventListener('pointercancel', handleUp as EventListener);
+        document.addEventListener('pointercancel', handleUp as EventListener);
+        window.addEventListener('keydown', handleKey as EventListener);
+        handleEl.addEventListener('lostpointercapture', handleUp as EventListener);
         activeCleanupRef.current = cleanup;
       }}
       onDoubleClick={() => {

package/src/components/_internal/shell-inspector.tsx

@@ -7,7 +7,7 @@ import { useResponsivePresentation, useResponsiveInitialState } from '../shell.h
 import { PaneResizeContext } from './shell-resize.js';
 import { InspectorHandle, PaneHandle } from './shell-handles.js';
 import { _BREAKPOINTS } from '../shell.types.js';
-import type { Breakpoint, PaneMode, PaneSizePersistence, ResponsivePresentation, PaneBaseProps } from '../shell.types.js';
+import type { Breakpoint, PaneMode, PaneSizePersistence, ResponsivePresentation, PaneBaseProps, CSSPropertiesWithVars } from '../shell.types.js';
 import { extractPaneDomProps, mapResponsiveBooleanToPaneMode } from './shell-prop-helpers.js';
 import { normalizeToPx } from '../../helpers/normalize-to-px.js';
 
@@ -393,10 +393,10 @@ export const Inspector = React.forwardRef<HTMLDivElement, InspectorPublicProps>(
       data-inset={inset || undefined}
       style={{
         ...style,
-        ['--inspector-size' as any]: `${expandedSize}px`,
-        ['--inspector-min-size' as any]: `${minSize}px`,
-        ['--inspector-max-size' as any]: `${maxSize}px`,
-      }}
+        '--inspector-size': `${expandedSize}px`,
+        '--inspector-min-size': `${minSize}px`,
+        '--inspector-max-size': `${maxSize}px`,
+      } as CSSPropertiesWithVars}
     >
       <div className="rt-ShellInspectorContent" data-visible={isExpanded || undefined}>
         {contentChildren}

package/src/components/_internal/shell-prop-helpers.ts

@@ -7,7 +7,7 @@ export function omitPaneProps<T extends object, K extends KeyList<T>>(source: T,
   const result: Partial<T> = {};
   (Object.keys(source) as Array<keyof T>).forEach((key) => {
     if (!omitSet.has(key)) {
-      result[key] = (source as any)[key];
+      result[key] = source[key];
     }
   });
   return result as Omit<T, K[number]>;

package/src/components/_internal/shell-sidebar.tsx

@@ -7,7 +7,7 @@ import { useResponsivePresentation, useResponsiveInitialState } from '../shell.h
 import { PaneResizeContext } from './shell-resize.js';
 import { extractPaneDomProps } from './shell-prop-helpers.js';
 import { SidebarHandle, PaneHandle } from './shell-handles.js';
-import type { Breakpoint, PaneMode, PaneSizePersistence, ResponsivePresentation, SidebarMode, Responsive, PaneBaseProps } from '../shell.types.js';
+import type { Breakpoint, PaneMode, PaneSizePersistence, ResponsivePresentation, SidebarMode, Responsive, PaneBaseProps, CSSPropertiesWithVars } from '../shell.types.js';
 import { _BREAKPOINTS } from '../shell.types.js';
 import { normalizeToPx } from '../../helpers/normalize-to-px.js';
 
@@ -446,10 +446,10 @@ export const Sidebar = React.forwardRef<HTMLDivElement, SidebarPublicProps>((ini
       data-inset={inset || undefined}
       style={{
         ...style,
-        ['--sidebar-size' as any]: `${expandedSize}px`,
-        ['--sidebar-thin-size' as any]: `${thinSize}px`,
-        ['--sidebar-min-size' as any]: `${minSize}px`,
-        ['--sidebar-max-size' as any]: `${maxSize}px`,
+        '--sidebar-size': `${expandedSize}px`,
+        '--sidebar-thin-size': `${thinSize}px`,
+        '--sidebar-min-size': `${minSize}px`,
+        '--sidebar-max-size': `${maxSize}px`,
         ...(shell.peekTarget === 'sidebar' && shell.sidebarMode === 'collapsed' && !isOverlay
           ? (() => {
               const strategy: 'both' | 'single' = toggleModes ?? 'both';
@@ -463,15 +463,15 @@ export const Sidebar = React.forwardRef<HTMLDivElement, SidebarPublicProps>((ini
               }
               if (next === 'thin') {
                 return {
-                  ['--peek-sidebar-width' as any]: `${thinSize}px`,
-                } as React.CSSProperties;
+                  '--peek-sidebar-width': `${thinSize}px`,
+                } as CSSPropertiesWithVars;
               }
               return {
-                ['--peek-sidebar-width' as any]: `var(--sidebar-size, ${expandedSize}px)`,
-              } as React.CSSProperties;
+                '--peek-sidebar-width': `var(--sidebar-size, ${expandedSize}px)`,
+              } as CSSPropertiesWithVars;
             })()
           : {}),
-      }}
+      } as CSSPropertiesWithVars}
     >
       <div className="rt-ShellSidebarContent" data-visible={isContentVisible || undefined}>
         {contentChildren}

package/src/components/shell.context.tsx

@@ -41,6 +41,8 @@ export interface ShellContextValue {
   onLeftPres?: (p: PresentationValue) => void;
   // Sizing info for overlay grouping
   onLeftDefaults?: (size: number) => void;
+  onRailDefaults?: (size: number) => void;
+  onPanelDefaults?: (size: number) => void;
 }
 
 const ShellContext = React.createContext<ShellContextValue | null>(null);
@@ -61,35 +63,35 @@ export function ShellProvider({ value, children }: { value: ShellContextValue; c
 // Pane mode slice contexts
 type ModeSetter<T> = (mode: T) => void;
 
-export const LeftModeContext = React.createContext<{ leftMode: PaneMode; setLeftMode: ModeSetter<PaneMode> } | null>(null as any);
+export const LeftModeContext = React.createContext<{ leftMode: PaneMode; setLeftMode: ModeSetter<PaneMode> } | null>(null);
 export function useLeftMode() {
   const ctx = React.useContext(LeftModeContext);
   if (!ctx) throw new Error('useLeftMode must be used within Shell.Root');
   return ctx;
 }
 
-export const PanelModeContext = React.createContext<{ panelMode: PaneMode; setPanelMode: ModeSetter<PaneMode> } | null>(null as any);
+export const PanelModeContext = React.createContext<{ panelMode: PaneMode; setPanelMode: ModeSetter<PaneMode> } | null>(null);
 export function usePanelMode() {
   const ctx = React.useContext(PanelModeContext);
   if (!ctx) throw new Error('usePanelMode must be used within Shell.Root');
   return ctx;
 }
 
-export const SidebarModeContext = React.createContext<{ sidebarMode: SidebarMode; setSidebarMode: ModeSetter<SidebarMode> } | null>(null as any);
+export const SidebarModeContext = React.createContext<{ sidebarMode: SidebarMode; setSidebarMode: ModeSetter<SidebarMode> } | null>(null);
 export function useSidebarMode() {
   const ctx = React.useContext(SidebarModeContext);
   if (!ctx) throw new Error('useSidebarMode must be used within Shell.Root');
   return ctx;
 }
 
-export const InspectorModeContext = React.createContext<{ inspectorMode: PaneMode; setInspectorMode: ModeSetter<PaneMode> } | null>(null as any);
+export const InspectorModeContext = React.createContext<{ inspectorMode: PaneMode; setInspectorMode: ModeSetter<PaneMode> } | null>(null);
 export function useInspectorMode() {
   const ctx = React.useContext(InspectorModeContext);
   if (!ctx) throw new Error('useInspectorMode must be used within Shell.Root');
   return ctx;
 }
 
-export const BottomModeContext = React.createContext<{ bottomMode: PaneMode; setBottomMode: ModeSetter<PaneMode> } | null>(null as any);
+export const BottomModeContext = React.createContext<{ bottomMode: PaneMode; setBottomMode: ModeSetter<PaneMode> } | null>(null);
 export function useBottomMode() {
   const ctx = React.useContext(BottomModeContext);
   if (!ctx) throw new Error('useBottomMode must be used within Shell.Root');
@@ -97,7 +99,7 @@ export function useBottomMode() {
 }
 
 // Presentation slice
-export const PresentationContext = React.createContext<{ currentBreakpoint: Breakpoint; currentBreakpointReady: boolean; leftResolvedPresentation?: PresentationValue } | null>(null as any);
+export const PresentationContext = React.createContext<{ currentBreakpoint: Breakpoint; currentBreakpointReady: boolean; leftResolvedPresentation?: PresentationValue } | null>(null);
 export function usePresentation() {
   const ctx = React.useContext(PresentationContext);
   if (!ctx) throw new Error('usePresentation must be used within Shell.Root');
@@ -106,7 +108,7 @@ export function usePresentation() {
 
 // Peek slice
 export const PeekContext = React.createContext<{ peekTarget: PaneTarget | null; setPeekTarget: (t: PaneTarget | null) => void; peekPane: (t: PaneTarget) => void; clearPeek: () => void } | null>(
-  null as any,
+  null,
 );
 export function usePeek() {
   const ctx = React.useContext(PeekContext);
@@ -120,7 +122,7 @@ export const ActionsContext = React.createContext<{
   expandPane: (t: PaneTarget) => void;
   collapsePane: (t: PaneTarget) => void;
   setSidebarToggleComputer?: (fn: (current: SidebarMode) => SidebarMode) => void;
-} | null>(null as any);
+} | null>(null);
 export function useShellActions() {
   const ctx = React.useContext(ActionsContext);
   if (!ctx) throw new Error('useShellActions must be used within Shell.Root');
@@ -128,7 +130,7 @@ export function useShellActions() {
 }
 
 // Composition slice
-export const CompositionContext = React.createContext<{ hasLeft: boolean; setHasLeft: (v: boolean) => void; hasSidebar: boolean; setHasSidebar: (v: boolean) => void } | null>(null as any);
+export const CompositionContext = React.createContext<{ hasLeft: boolean; setHasLeft: (v: boolean) => void; hasSidebar: boolean; setHasSidebar: (v: boolean) => void } | null>(null);
 export function useComposition() {
   const ctx = React.useContext(CompositionContext);
   if (!ctx) throw new Error('useComposition must be used within Shell.Root');
@@ -142,7 +144,7 @@ export const InsetContext = React.createContext<{
   registerInset: (id: InsetPaneId) => void;
   unregisterInset: (id: InsetPaneId) => void;
   hasAnyInset: boolean;
-} | null>(null as any);
+} | null>(null);
 export function useInset() {
   const ctx = React.useContext(InsetContext);
   if (!ctx) throw new Error('useInset must be used within Shell.Root');

package/src/components/shell.tsx

@@ -36,7 +36,7 @@ import { omitPaneProps, extractPaneDomProps, mapResponsiveBooleanToPaneMode } fr
 import { Sidebar } from './_internal/shell-sidebar.js';
 import { Bottom } from './_internal/shell-bottom.js';
 import { Inspector } from './_internal/shell-inspector.js';
-import type { PresentationValue, ResponsivePresentation, PaneMode, SidebarMode, PaneSizePersistence, Breakpoint, PaneTarget, Responsive, PaneBaseProps } from './shell.types.js';
+import type { PresentationValue, ResponsivePresentation, PaneMode, SidebarMode, PaneSizePersistence, Breakpoint, PaneTarget, Responsive, PaneBaseProps, CSSPropertiesWithVars } from './shell.types.js';
 import { _BREAKPOINTS } from './shell.types.js';
 import { normalizeToPx } from '../helpers/normalize-to-px.js';
 import {
@@ -80,10 +80,11 @@ function useBreakpoint(): { bp: Breakpoint; ready: boolean } {
   React.useEffect(() => {
     if (typeof window === 'undefined') return;
 
-    const queries: [key: keyof typeof _BREAKPOINTS, query: string][] = Object.entries(_BREAKPOINTS) as any;
+    const queries = Object.entries(_BREAKPOINTS) as [keyof typeof _BREAKPOINTS, string][];
     const mqls = queries.map(([k, q]) => [k, window.matchMedia(q)] as const);
 
-    const compute = () => {
+    // Accept optional event param to satisfy MediaQueryList listener signature
+    const compute = (_e?: MediaQueryListEvent) => {
       // Highest matched wins
       const matched = mqls.filter(([, m]) => m.matches).map(([k]) => k);
       const next = (matched[matched.length - 1] as Breakpoint | undefined) ?? 'initial';
@@ -101,11 +102,11 @@ function useBreakpoint(): { bp: Breakpoint; ready: boolean } {
         removeListener?: (listener: (e: MediaQueryListEvent) => void) => void;
       };
       if (typeof mm.addEventListener === 'function' && typeof mm.removeEventListener === 'function') {
-        mm.addEventListener('change', compute as any);
-        cleanups.push(() => mm.removeEventListener?.('change', compute as any));
+        mm.addEventListener('change', compute);
+        cleanups.push(() => mm.removeEventListener?.('change', compute));
       } else if (typeof mm.addListener === 'function' && typeof mm.removeListener === 'function') {
-        mm.addListener(compute as any);
-        cleanups.push(() => mm.removeListener?.(compute as any));
+        mm.addListener(compute);
+        cleanups.push(() => mm.removeListener?.(compute));
       }
     });
 
@@ -568,8 +569,8 @@ const Root = React.forwardRef<HTMLDivElement, ShellRootProps>(({ className, chil
                               style={
                                 peekTarget === 'rail' || peekTarget === 'panel'
                                   ? ({
-                                      ['--peek-rail-width' as any]: `${railDefaultSizeRef.current}px`,
-                                    } as React.CSSProperties)
+                                      '--peek-rail-width': `${railDefaultSizeRef.current}px`,
+                                    } as CSSPropertiesWithVars)
                                   : undefined
                               }
                             >
@@ -631,8 +632,8 @@ const Header = React.forwardRef<HTMLElement, ShellHeaderProps>(({ className, hei
     className={classNames('rt-ShellHeader', className)}
     style={{
       ...style,
-      ['--shell-header-height' as any]: `${height}px`,
-    }}
+      '--shell-header-height': `${height}px`,
+    } as CSSPropertiesWithVars}
   />
 ));
 Header.displayName = 'Shell.Header';
@@ -698,7 +699,7 @@ const Left = React.forwardRef<HTMLDivElement, LeftProps>((initialProps, ref) =>
   const localRef = React.useRef<HTMLDivElement | null>(null);
   // Publish resolved presentation so Root can gate peeking in overlay
   React.useEffect(() => {
-    (shell as any).onLeftPres?.(resolvedPresentation);
+    shell.onLeftPres?.(resolvedPresentation);
   }, [shell, resolvedPresentation]);
   const setRef = React.useCallback(
     (node: HTMLDivElement | null) => {
@@ -864,7 +865,7 @@ const Rail = React.forwardRef<HTMLDivElement, RailProps>((initialProps, ref) =>
 
   // Register expanded size with Left container
   React.useEffect(() => {
-    (shell as any).onRailDefaults?.(expandedSize);
+    shell.onRailDefaults?.(expandedSize);
   }, [shell, expandedSize]);
 
   const isExpanded = shell.leftMode === 'expanded';
@@ -879,8 +880,8 @@ const Rail = React.forwardRef<HTMLDivElement, RailProps>((initialProps, ref) =>
       data-peek={(shell.currentBreakpointReady && shell.leftResolvedPresentation !== 'overlay' && shell.peekTarget === 'rail') || undefined}
       style={{
         ...style,
-        ['--rail-size' as any]: `${expandedSize}px`,
-      }}
+        '--rail-size': `${expandedSize}px`,
+      } as CSSPropertiesWithVars}
     >
       <div className="rt-ShellRailContent" data-visible={(shell.currentBreakpointReady && (isExpanded || (shell.leftResolvedPresentation !== 'overlay' && shell.peekTarget === 'rail'))) || undefined}>
         {children}
@@ -1068,7 +1069,7 @@ const Panel = assignShellSlot(
     }, [open]);
 
     React.useEffect(() => {
-      (shell as any).onPanelDefaults?.(expandedSize);
+      shell.onPanelDefaults?.(expandedSize);
     }, [shell, expandedSize]);
     const localRef = React.useRef<HTMLDivElement | null>(null);
     const setRef = React.useCallback(
@@ -1245,8 +1246,8 @@ const Panel = assignShellSlot(
         data-peek={(shell.currentBreakpointReady && shell.leftResolvedPresentation !== 'overlay' && shell.peekTarget === 'panel') || undefined}
         style={{
           ...style,
-          ['--panel-size' as any]: `${expandedSize}px`,
-        }}
+          '--panel-size': `${expandedSize}px`,
+        } as CSSPropertiesWithVars}
       >
         <div className="rt-ShellPanelContent" data-visible={isExpanded || undefined}>
           {contentChildren}
@@ -1312,7 +1313,7 @@ const Trigger = React.forwardRef<HTMLButtonElement, TriggerProps>(({ target, act
       onClick?.(event);
 
       // Clear any active peek on this target before toggling to avoid sticky peek state
-      if ((shell as any).peekTarget === target) {
+      if (shell.peekTarget === target) {
         shell.clearPeek();
       }
 
@@ -1361,7 +1362,7 @@ const Trigger = React.forwardRef<HTMLButtonElement, TriggerProps>(({ target, act
     (event: React.MouseEvent<HTMLButtonElement>) => {
       onMouseLeave?.(event);
       if (!peekOnHover) return;
-      if ((shell as any).peekTarget === target) {
+      if (shell.peekTarget === target) {
         shell.clearPeek();
       }
     },

package/src/components/shell.types.ts

@@ -50,3 +50,16 @@ export const _BREAKPOINTS = {
 export type Breakpoint = 'initial' | keyof typeof _BREAKPOINTS;
 
 export type PaneTarget = 'left' | 'rail' | 'panel' | 'sidebar' | 'inspector' | 'bottom';
+
+/**
+ * CSS custom property key type for type-safe style objects.
+ * Allows any string prefixed with '--'.
+ */
+export type CSSCustomProperty = `--${string}`;
+
+/**
+ * Style object that supports CSS custom properties.
+ */
+export type CSSPropertiesWithVars = React.CSSProperties & {
+  [key: CSSCustomProperty]: string | number | undefined;
+};