@kushagradhawan/kookie-ui 0.1.56 → 0.1.58

package/src/components/separator.css

@@ -1,6 +1,6 @@
 .rt-Separator {
   display: block;
-  background-color: var(--accent-a6);
+  background-color: var(--accent-a5);
 }
 
 /***************************************************************************************************

package/src/components/shell.tsx

@@ -309,18 +309,24 @@ const Root = React.forwardRef<HTMLDivElement, ShellRootProps>(({ className, chil
       }
       dispatchPane({ type: 'TOGGLE_PANE', target });
     },
-    [paneState.sidebarMode],
+    [paneState.sidebarMode, setSidebarMode],
   );
 
-  const expandPane = React.useCallback((target: PaneTarget) => {
-    if (target === 'sidebar') return setSidebarMode('expanded');
-    dispatchPane({ type: 'EXPAND_PANE', target });
-  }, []);
+  const expandPane = React.useCallback(
+    (target: PaneTarget) => {
+      if (target === 'sidebar') return setSidebarMode('expanded');
+      dispatchPane({ type: 'EXPAND_PANE', target });
+    },
+    [setSidebarMode],
+  );
 
-  const collapsePane = React.useCallback((target: PaneTarget) => {
-    if (target === 'sidebar') return setSidebarMode('collapsed');
-    dispatchPane({ type: 'COLLAPSE_PANE', target });
-  }, []);
+  const collapsePane = React.useCallback(
+    (target: PaneTarget) => {
+      if (target === 'sidebar') return setSidebarMode('collapsed');
+      dispatchPane({ type: 'COLLAPSE_PANE', target });
+    },
+    [setSidebarMode],
+  );
 
   const baseContextValue = React.useMemo(
     () => ({
@@ -351,10 +357,15 @@ const Root = React.forwardRef<HTMLDivElement, ShellRootProps>(({ className, chil
     }),
     [
       paneState.leftMode,
+      setLeftMode,
       paneState.panelMode,
+      setPanelMode,
       paneState.sidebarMode,
+      setSidebarMode,
       paneState.inspectorMode,
+      setInspectorMode,
       paneState.bottomMode,
+      setBottomMode,
       hasLeft,
       hasSidebar,
       currentBreakpoint,
@@ -388,7 +399,7 @@ const Root = React.forwardRef<HTMLDivElement, ShellRootProps>(({ className, chil
     if (typeof firstRailOpen === 'undefined') return;
     const shouldOpen = Boolean(firstRailOpen);
     setLeftMode(shouldOpen ? 'expanded' : 'collapsed');
-  }, [firstRailOpen]);
+  }, [firstRailOpen, setLeftMode]);
 
   const heightStyle = React.useMemo(() => {
     if (height === 'full') return { height: '100vh' };
@@ -588,25 +599,27 @@ const Left = React.forwardRef<HTMLDivElement, LeftProps>(
 
     // Initialize from responsive defaultOpen once when uncontrolled and breakpoint ready
     const didInitFromDefaultOpenRef = React.useRef(false);
+    const propsOpen = (props as any).open;
+    const propsDefaultOpen = (props as any).defaultOpen;
     React.useEffect(() => {
       if (didInitFromDefaultOpenRef.current) return;
       if (!shell.currentBreakpointReady) return;
-      if (typeof (props as any).open !== 'undefined') return; // controlled
-      if (typeof (props as any).defaultOpen === 'undefined') return;
+      if (typeof propsOpen !== 'undefined') return; // controlled
+      if (typeof propsDefaultOpen === 'undefined') return;
       didInitFromDefaultOpenRef.current = true;
       const initial = Boolean(resolvedDefaultOpen);
       shell.setLeftMode(initial ? 'expanded' : 'collapsed');
       (props as any).onOpenChange?.(initial, { reason: 'init' });
-    }, [shell.currentBreakpointReady, (props as any).open, (props as any).defaultOpen, resolvedDefaultOpen]);
+    }, [shell, propsOpen, propsDefaultOpen, resolvedDefaultOpen, props]);
     React.useEffect(() => {
       // Controlled Left via Rail.open
-      if (typeof (props as any).open !== 'undefined') {
-        const shouldOpen = Boolean((props as any).open);
+      if (typeof propsOpen !== 'undefined') {
+        const shouldOpen = Boolean(propsOpen);
         shell.setLeftMode(shouldOpen ? 'expanded' : 'collapsed');
         return;
       }
       // defaultOpen is applied in Rail; Left no longer follows responsive defaults
-    }, [shell, (props as any).open]);
+    }, [shell, propsOpen]);
 
     // Sync controlled mode
     // removed mode sync
@@ -622,7 +635,7 @@ const Left = React.forwardRef<HTMLDivElement, LeftProps>(
         (props as any).onOpenChange?.(shell.leftMode === 'expanded', { reason: 'toggle' });
       }
       lastLeftModeRef.current = shell.leftMode;
-    }, [shell.leftMode, resolvedDefaultOpen]);
+    }, [shell, resolvedDefaultOpen, props]);
 
     // Emit expand/collapse events
     React.useEffect(() => {
@@ -739,7 +752,6 @@ const Rail = React.forwardRef<HTMLDivElement, RailProps>(({ className, presentat
   const wasControlledRef = React.useRef<boolean | null>(null);
   if (process.env.NODE_ENV !== 'production') {
     if (typeof props.open !== 'undefined' && typeof props.defaultOpen !== 'undefined') {
-      // eslint-disable-next-line no-console
       console.error('Shell.Rail: Do not pass both `open` and `defaultOpen`. Choose one.');
     }
   }
@@ -752,7 +764,6 @@ const Rail = React.forwardRef<HTMLDivElement, RailProps>(({ className, presentat
       return;
     }
     if (wasControlledRef.current !== isControlled) {
-      // eslint-disable-next-line no-console
       console.warn('Shell.Rail: Switching between controlled and uncontrolled `open` is not supported.');
       wasControlledRef.current = isControlled;
     }
@@ -891,11 +902,9 @@ const Panel = React.forwardRef<HTMLDivElement, PanelPublicProps>(
     // Dev-only runtime guard
     if (process.env.NODE_ENV !== 'production') {
       if (typeof open !== 'undefined' && typeof defaultOpen !== 'undefined') {
-        // eslint-disable-next-line no-console
         console.error('Shell.Panel: Do not pass both `open` and `defaultOpen`. Choose one.');
       }
       if (typeof size !== 'undefined' && typeof defaultSize !== 'undefined') {
-        // eslint-disable-next-line no-console
         console.error('Shell.Panel: Do not pass both `size` and `defaultSize`. Choose one.');
       }
     }
@@ -924,14 +933,13 @@ const Panel = React.forwardRef<HTMLDivElement, PanelPublicProps>(
       } else {
         if (shell.panelMode !== 'collapsed') shell.setPanelMode('collapsed');
       }
-    }, [open, shell.leftMode, shell.panelMode]);
+    }, [shell, open]);
 
     // Dev-only warning if switching controlled/uncontrolled between renders
     React.useEffect(() => {
       const isControlled = typeof open !== 'undefined';
       (Panel as any)._wasControlled = (Panel as any)._wasControlled ?? isControlled;
       if ((Panel as any)._wasControlled !== isControlled) {
-        // eslint-disable-next-line no-console
         console.warn('Shell.Panel: Switching between controlled and uncontrolled `open` is not supported.');
         (Panel as any)._wasControlled = isControlled;
       }
@@ -1057,7 +1065,7 @@ const Panel = React.forwardRef<HTMLDivElement, PanelPublicProps>(
         localRef.current.style.setProperty('--panel-size', `${clamped}px`);
         emitSizeChange(clamped, { reason: 'controlled' });
       }
-    }, [size, minSize, maxSize, normalizeToPx]);
+    }, [size, minSize, maxSize, normalizeToPx, emitSizeChange]);
 
     // Ensure Left container width is auto whenever Panel is expanded in fixed presentation
     React.useEffect(() => {

package/src/components/sidebar.css

@@ -510,11 +510,15 @@
   .rt-SidebarContainer {
     &:where(.rt-r-size-1) {
       --sidebar-base-padding: var(--space-3);
-      --sidebar-item-height: var(--space-5);
+      --sidebar-item-height: var(--space-6);
     }
     &:where(.rt-r-size-2) {
       --sidebar-base-padding: var(--space-4);
-      --sidebar-item-height: var(--space-6);
+      --sidebar-item-height: var(--space-7);
+    }
+    &:where(.rt-r-size-3) {
+      --sidebar-base-padding: var(--space-4);
+      --sidebar-item-height: var(--space-8);
     }
   }
 
@@ -525,6 +529,7 @@
       --sidebar-item-padding-left: var(--base-menu-item-padding-left);
       --sidebar-item-padding-right: var(--base-menu-item-padding-right);
       --sidebar-item-padding-y: var(--base-menu-item-padding-y);
+      --base-menu-item-height: var(--space-6);
       --sidebar-item-height: var(--base-menu-item-height);
     }
     &:where(.rt-r-size-2) {
@@ -532,6 +537,15 @@
       --sidebar-item-padding-left: var(--base-menu-item-padding-left);
       --sidebar-item-padding-right: var(--base-menu-item-padding-right);
       --sidebar-item-padding-y: var(--base-menu-item-padding-y);
+      --base-menu-item-height: var(--space-7);
+      --sidebar-item-height: var(--base-menu-item-height);
+    }
+    &:where(.rt-r-size-3) {
+      --sidebar-content-padding: var(--base-menu-content-padding);
+      --sidebar-item-padding-left: var(--base-menu-item-padding-left);
+      --sidebar-item-padding-right: var(--base-menu-item-padding-right);
+      --sidebar-item-padding-y: var(--base-menu-item-padding-y);
+      --base-menu-item-height: var(--space-8);
       --sidebar-item-height: var(--base-menu-item-height);
     }
   }
@@ -548,8 +562,8 @@
 
       /* stylelint-disable-next-line selector-max-type */
       & :where(svg) {
-        width: var(--content-icon-size-1);
-        height: var(--content-icon-size-1);
+        width: var(--content-icon-size-2);
+        height: var(--content-icon-size-2);
         flex-shrink: 0;
       }
     }
@@ -574,11 +588,23 @@
 
       /* stylelint-disable-next-line selector-max-type */
       & :where(svg) {
-        width: var(--content-icon-size-2);
-        height: var(--content-icon-size-2);
+        width: var(--content-icon-size-3);
+        height: var(--content-icon-size-3);
         flex-shrink: 0;
       }
     }
+    /* stylelint-disable-next-line selector-max-specificity */
+    .rt-SidebarContent:where(.rt-r-size-3) {
+      /* stylelint-disable-next-line selector-max-specificity */
+      & :where(.rt-SidebarMenuButton) {
+        /* stylelint-disable-next-line selector-max-type, selector-max-specificity */
+        & :where(svg) {
+          width: var(--content-icon-size-3);
+          height: var(--content-icon-size-3);
+          flex-shrink: 0;
+        }
+      }
+    }
 
     /* Sub-trigger icon sizing - matches base menu exactly */
     & :where(.rt-BaseMenuSubTriggerIcon) {

package/src/components/theme.props.tsx

@@ -8,7 +8,7 @@ const appearances = ['inherit', 'light', 'dark'] as const;
 const panelBackgrounds = ['solid', 'translucent'] as const;
 const materials = ['solid', 'translucent'] as const;
 const scalings = ['90%', '95%', '100%', '105%', '110%'] as const;
-const fontFamilies = ['sans', 'mono'] as const;
+const fontFamilies = ['sans', 'mono', 'serif'] as const;
 
 const themePropDefs = {
   ...asChildPropDef,

package/src/helpers/font-config.ts

@@ -13,10 +13,14 @@ export interface FontConfig {
   sans?: string;
   /** Monospace font stack for fontFamily="mono" */
   mono?: string;
+  /** Serif font stack for fontFamily="serif" */
+  serif?: string;
   /** Base Inter font replacement */
   inter?: string;
   /** Base JetBrains Mono font replacement */
   jetbrainsMono?: string;
+  /** Base Playfair Display font replacement */
+  playfairDisplay?: string;
 }
 
 /**
@@ -25,8 +29,10 @@ export interface FontConfig {
 export const FONT_CSS_VARIABLES = {
   sans: '--font-sans',
   mono: '--font-mono',
+  serif: '--font-serif',
   inter: '--font-inter',
   jetbrainsMono: '--font-jetbrains-mono',
+  playfairDisplay: '--font-playfair-display',
   defaultFamily: '--default-font-family',
   headingFamily: '--heading-font-family',
   strongFamily: '--strong-font-family',
@@ -39,8 +45,7 @@ export const FONT_CSS_VARIABLES = {
 export const FONT_STACKS = {
   // Sans-serif options
   inter: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
-  system:
-    "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
+  system: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
   poppins: "'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif",
   openSans: "'Open Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif",
 
@@ -49,6 +54,12 @@ export const FONT_STACKS = {
   firaCode: "'Fira Code', 'JetBrains Mono', 'Consolas', 'Liberation Mono', monospace",
   sourceCodePro: "'Source Code Pro', 'JetBrains Mono', 'Consolas', monospace",
   systemMono: "'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', 'Courier New', monospace",
+
+  // Serif options
+  playfair: "'Playfair Display', 'Times New Roman', 'Times', 'Georgia', 'Cambria', serif",
+  times: "'Times New Roman', 'Times', 'Georgia', 'Cambria', serif",
+  georgia: "'Georgia', 'Times New Roman', 'Times', serif",
+  lora: "'Lora', 'Times New Roman', 'Times', serif",
 } as const;
 
 /**
@@ -72,10 +83,7 @@ export const FONT_STACKS = {
  * });
  * ```
  */
-export function applyFontConfig(
-  config: FontConfig,
-  target: HTMLElement = document.documentElement,
-): void {
+export function applyFontConfig(config: FontConfig, target: HTMLElement = document.documentElement): void {
   const style = target.style;
 
   if (config.sans) {
@@ -86,6 +94,10 @@ export function applyFontConfig(
     style.setProperty(FONT_CSS_VARIABLES.mono, config.mono);
   }
 
+  if (config.serif) {
+    style.setProperty(FONT_CSS_VARIABLES.serif, config.serif);
+  }
+
   if (config.inter) {
     style.setProperty(FONT_CSS_VARIABLES.inter, config.inter);
   }
@@ -93,6 +105,10 @@ export function applyFontConfig(
   if (config.jetbrainsMono) {
     style.setProperty(FONT_CSS_VARIABLES.jetbrainsMono, config.jetbrainsMono);
   }
+
+  if (config.playfairDisplay) {
+    style.setProperty(FONT_CSS_VARIABLES.playfairDisplay, config.playfairDisplay);
+  }
 }
 
 /**
@@ -125,6 +141,10 @@ export function generateFontCSS(config: FontConfig): string {
     rules.push(`  ${FONT_CSS_VARIABLES.mono}: ${config.mono};`);
   }
 
+  if (config.serif) {
+    rules.push(`  ${FONT_CSS_VARIABLES.serif}: ${config.serif};`);
+  }
+
   if (config.inter) {
     rules.push(`  ${FONT_CSS_VARIABLES.inter}: ${config.inter};`);
   }
@@ -133,6 +153,10 @@ export function generateFontCSS(config: FontConfig): string {
     rules.push(`  ${FONT_CSS_VARIABLES.jetbrainsMono}: ${config.jetbrainsMono};`);
   }
 
+  if (config.playfairDisplay) {
+    rules.push(`  ${FONT_CSS_VARIABLES.playfairDisplay}: ${config.playfairDisplay};`);
+  }
+
   rules.push('}');
 
   return rules.join('\n');
@@ -147,8 +171,10 @@ export function resetFonts(target: HTMLElement = document.documentElement): void
   // Remove custom font variables to fall back to defaults
   style.removeProperty(FONT_CSS_VARIABLES.sans);
   style.removeProperty(FONT_CSS_VARIABLES.mono);
+  style.removeProperty(FONT_CSS_VARIABLES.serif);
   style.removeProperty(FONT_CSS_VARIABLES.inter);
   style.removeProperty(FONT_CSS_VARIABLES.jetbrainsMono);
+  style.removeProperty(FONT_CSS_VARIABLES.playfairDisplay);
 }
 
 /**
@@ -160,8 +186,9 @@ export function getCurrentFontConfig(target: HTMLElement = document.documentElem
   return {
     sans: computedStyle.getPropertyValue(FONT_CSS_VARIABLES.sans).trim() || undefined,
     mono: computedStyle.getPropertyValue(FONT_CSS_VARIABLES.mono).trim() || undefined,
+    serif: computedStyle.getPropertyValue(FONT_CSS_VARIABLES.serif).trim() || undefined,
     inter: computedStyle.getPropertyValue(FONT_CSS_VARIABLES.inter).trim() || undefined,
-    jetbrainsMono:
-      computedStyle.getPropertyValue(FONT_CSS_VARIABLES.jetbrainsMono).trim() || undefined,
+    jetbrainsMono: computedStyle.getPropertyValue(FONT_CSS_VARIABLES.jetbrainsMono).trim() || undefined,
+    playfairDisplay: computedStyle.getPropertyValue(FONT_CSS_VARIABLES.playfairDisplay).trim() || undefined,
   };
 }

package/src/styles/fonts.css

@@ -1,23 +1,19 @@
-/* Inter and JetBrains Mono from Google Fonts */
+/* Inter, JetBrains Mono, and Playfair Display from Google Fonts */
 @import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,100..900;1,100..900&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
 
 /* Font Variables - Customize these to change fonts throughout your app */
 :root {
-  /* Base font definitions - override these in your CSS to customize fonts */
-  --font-inter:
-    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
-    sans-serif;
-  --font-jetbrains-mono:
-    'JetBrains Mono', 'Fira Code', 'Consolas', 'Liberation Mono', 'Courier New', monospace;
+  /* Base font definitions - these are the actual font stacks */
+  --font-inter: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --font-jetbrains-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', 'Liberation Mono', 'Courier New', monospace;
+  --font-playfair-display: 'Playfair Display', 'Times New Roman', 'Times', 'Georgia', 'Cambria', serif;
 
-  /* Primary font variables - these map to theme fontFamily values */
-  --font-general-sans: var(--font-inter); /* Used when fontFamily="sans" */
-  --font-inter-mono: var(--font-jetbrains-mono); /* Used for code elements */
-
-  /* Tailwind-compatible aliases - override these to change theme fonts */
-  --font-sans: var(--font-inter); /* Theme fontFamily="sans" uses this */
-  --font-mono: var(--font-jetbrains-mono); /* Theme fontFamily="mono" uses this */
+  /* Theme font family overrides - change these to customize fonts globally */
+  --font-sans: var(--font-inter); /* Override this for custom sans-serif */
+  --font-mono: var(--font-jetbrains-mono); /* Override this for custom monospace */
+  --font-serif: var(--font-playfair-display); /* Override this for custom serif */
 
   /* Force proper font weight rendering */
   font-synthesis: none; /* Prevent browser from synthesizing weights */
@@ -26,7 +22,7 @@
 /* Radix Themes font weight enforcement */
 .radix-themes {
   font-synthesis: none;
-  font-family: var(--font-inter);
+  font-family: var(--default-font-family);
 }
 
 /* System font fallback for critical loading scenarios */

package/src/styles/tokens/typography.css

@@ -44,16 +44,15 @@
   /* default values */
 
   --default-font-family:
-    var(--font-inter, 'Inter'), -apple-system, BlinkMacSystemFont, 'Segoe UI (Custom)', Roboto,
-    'Helvetica Neue', 'Open Sans (Custom)', system-ui, sans-serif, 'Apple Color Emoji',
+    var(--font-sans, var(--font-inter, 'Inter')), -apple-system, BlinkMacSystemFont, 'Segoe UI (Custom)', Roboto, 'Helvetica Neue', 'Open Sans (Custom)', system-ui, sans-serif, 'Apple Color Emoji',
     'Segoe UI Emoji';
 
   /* Font family overrides based on theme data attribute */
   --default-font-family-sans:
-    var(--font-inter, 'Inter'), -apple-system, BlinkMacSystemFont, 'Segoe UI (Custom)', Roboto,
-    'Helvetica Neue', 'Open Sans (Custom)', system-ui, sans-serif, 'Apple Color Emoji',
+    var(--font-sans, var(--font-inter, 'Inter')), -apple-system, BlinkMacSystemFont, 'Segoe UI (Custom)', Roboto, 'Helvetica Neue', 'Open Sans (Custom)', system-ui, sans-serif, 'Apple Color Emoji',
     'Segoe UI Emoji';
   --default-font-family-mono: var(--font-mono);
+  --default-font-family-serif: var(--font-serif);
   --default-font-size: var(--font-size-3); /* Same size used for `<Text size="3">` */
   --default-font-style: normal;
   --default-font-weight: var(--font-weight-regular);
@@ -84,9 +83,7 @@
 
   /* Code */
 
-  --code-font-family:
-    var(--font-inter-mono, 'JetBrains Mono'), 'Menlo', 'Consolas (Custom)',
-    'Bitstream Vera Sans Mono', monospace, 'Apple Color Emoji', 'Segoe UI Emoji';
+  --code-font-family: var(--font-mono, var(--font-jetbrains-mono, 'JetBrains Mono')), 'Menlo', 'Consolas (Custom)', 'Bitstream Vera Sans Mono', monospace, 'Apple Color Emoji', 'Segoe UI Emoji';
   --code-font-size-adjust: 0.95;
   --code-font-style: normal;
   --code-font-weight: inherit;
@@ -327,3 +324,16 @@
   --heading-font-family: var(--default-font-family-mono);
   --strong-font-family: var(--default-font-family-mono);
 }
+
+[data-font-family='serif'] {
+  /* Map serif directly to --font-serif to avoid resolution issues */
+  --default-font-family: var(--font-serif);
+  --heading-font-family: var(--font-serif);
+  --strong-font-family: var(--font-serif);
+}
+
+/* Ensure serif font takes precedence over .radix-themes */
+/* stylelint-disable-next-line selector-max-specificity */
+.radix-themes[data-font-family='serif'] {
+  font-family: var(--font-serif) !important;
+}