@womp/kookie-ui 0.5.0 → 0.6.2

package/src/components/schemas/shell.schema.ts

@@ -74,15 +74,8 @@ const ResponsivePresentationSchema = z
 // Size persistence adapter
 const PaneSizePersistenceSchema = z
   .object({
-    load: z
-      .function()
-      .returns(z.union([z.number(), z.promise(z.number()), z.undefined()]))
-      .optional(),
-    save: z
-      .function()
-      .args(z.number())
-      .returns(z.union([z.void(), z.promise(z.void())]))
-      .optional(),
+    load: z.function({ output: z.union([z.number(), z.promise(z.number()), z.undefined()]) }).optional(),
+    save: z.function({ input: [z.number()], output: z.union([z.void(), z.promise(z.void())]) }).optional(),
   })
   .describe('Size persistence adapter');
 
@@ -92,18 +85,18 @@ const PanePropsSchema = z
     presentation: ResponsivePresentationSchema.optional(),
     mode: PaneModeSchema.optional(),
     defaultMode: ResponsiveModeSchema.optional(),
-    onModeChange: z.function().args(PaneModeSchema).returns(z.void()).optional(),
+    onModeChange: z.function({ input: [PaneModeSchema], output: z.void() }).optional(),
     expandedSize: z.number().optional(),
     minSize: z.number().optional(),
     maxSize: z.number().optional(),
     resizable: z.boolean().optional(),
     collapsible: z.boolean().optional(),
-    onExpand: z.function().returns(z.void()).optional(),
-    onCollapse: z.function().returns(z.void()).optional(),
-    onResize: z.function().args(z.number()).returns(z.void()).optional(),
+    onExpand: z.function({ output: z.void() }).optional(),
+    onCollapse: z.function({ output: z.void() }).optional(),
+    onResize: z.function({ input: [z.number()], output: z.void() }).optional(),
     resizer: z.any().optional(),
-    onResizeStart: z.function().args(z.number()).returns(z.void()).optional(),
-    onResizeEnd: z.function().args(z.number()).returns(z.void()).optional(),
+    onResizeStart: z.function({ input: [z.number()], output: z.void() }).optional(),
+    onResizeEnd: z.function({ input: [z.number()], output: z.void() }).optional(),
     snapPoints: z.array(z.number()).optional(),
     snapTolerance: z.number().optional(),
     collapseThreshold: z.number().optional(),
@@ -156,11 +149,11 @@ export const ShellRailSchema = z
     presentation: ResponsivePresentationSchema.optional(),
     mode: PaneModeSchema.optional(),
     defaultMode: ResponsiveModeSchema.optional(),
-    onModeChange: z.function().args(PaneModeSchema).returns(z.void()).optional(),
+    onModeChange: z.function({ input: [PaneModeSchema], output: z.void() }).optional(),
     expandedSize: z.number().default(64).describe('Default width in pixels'),
     collapsible: z.boolean().optional(),
-    onExpand: z.function().returns(z.void()).optional(),
-    onCollapse: z.function().returns(z.void()).optional(),
+    onExpand: z.function({ output: z.void() }).optional(),
+    onCollapse: z.function({ output: z.void() }).optional(),
     className: z.string().optional().describe('Additional CSS class name'),
     style: z
       .record(z.string(), z.union([z.string(), z.number()]))

package/src/components/scroll-area.css

@@ -108,7 +108,6 @@
  ***************************************************************************************************/
 
 .rt-ScrollAreaScrollbar {
-  background-color: var(--gray-a3);
   border-radius: var(--scrollarea-scrollbar-border-radius);
 
   animation-duration: var(--motion-duration-micro);
@@ -135,13 +134,13 @@
 }
 
 .rt-ScrollAreaThumb {
-  background-color: var(--gray-a8);
+  background-color: var(--gray-a6);
   border-radius: inherit;
   transition: background-color var(--motion-duration-micro) var(--motion-ease-standard);
 
   @media (hover: hover) {
     &:where(:hover) {
-      background-color: var(--gray-a9);
+      background-color: var(--gray-a8);
     }
   }
 }

package/src/components/theme.props.tsx

@@ -64,7 +64,7 @@ const themePropDefs = {
    * @link
    * https://www.radix-ui.com/themes/docs/theme/visual-style
    */
-  radius: { type: 'enum', values: radii, default: 'medium' },
+  radius: { type: 'enum', values: radii, default: 'full' },
   /**
    * Sets a scaling multiplier for values like spacing, font sizes, line heights, etc. are scaled.
    *

package/src/components/virtual-menu.tsx

@@ -3,7 +3,8 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import { useVirtualizer } from '@tanstack/react-virtual';
-import { useMenuContext, menuSizeToItemHeight } from './_internal/menu-context.js';
+import { useMenuContext, getMenuItemHeight } from './_internal/menu-context.js';
+import { useThemeContext } from './theme.js';
 
 /**
  * VirtualMenu - A virtualized menu component for rendering large lists efficiently.
@@ -192,13 +193,16 @@ function VirtualMenuRoot<T>({
   const menuId = React.useId();
   const parentRef = React.useRef<HTMLDivElement>(null);
   const [highlightedIndex, setHighlightedIndex] = React.useState<number>(-1);
-  const { isInsideMenu, size: contextSize } = useMenuContext();
-
-  // Resolve size: prop > context > default '2'
-  const resolvedSize = sizeProp ?? contextSize ?? '2';
-  
-  // Resolve item height: explicit prop > derived from size
-  const estimatedItemSize = estimatedItemSizeProp ?? menuSizeToItemHeight[resolvedSize];
+  const { isInsideMenu, size: contextSize, itemHeight: contextItemHeight } = useMenuContext();
+  const { scaling } = useThemeContext();
+
+  // Resolve item height: explicit prop > own size > parent menu > default size '2'.
+  // Heights follow the theme scaling, like the --base-menu-item-height token.
+  const estimatedItemSize =
+    estimatedItemSizeProp ??
+    (sizeProp
+      ? getMenuItemHeight(sizeProp, scaling)
+      : (contextItemHeight ?? getMenuItemHeight(contextSize ?? '2', scaling)));
 
   // Validate props
   if (!itemLabel && !RenderItem) {

package/src/hooks/use-breakpoint.ts

@@ -87,6 +87,9 @@ function getServerSnapshot(): Breakpoint {
 const getReadySnapshot = () => true;
 const getReadyServerSnapshot = () => false;
 
+const noopSubscribe = () => () => {};
+const getInitialSnapshot = (): Breakpoint => 'initial';
+
 /**
  * The current breakpoint, and whether it has been resolved against a real
  * viewport yet (`false` on the server and during hydration).
@@ -95,10 +98,23 @@ const getReadyServerSnapshot = () => false;
  * effect. On a client render the very first pass already has the real
  * breakpoint, instead of rendering the whole shell at `initial` and correcting
  * it after the browser has painted.
+ *
+ * Pass `enabled = false` to skip the subscription (the breakpoint then reads as
+ * `initial`).
  */
-export function useBreakpoint(): { breakpoint: Breakpoint; ready: boolean } {
-  const breakpoint = React.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
-  const ready = React.useSyncExternalStore(subscribe, getReadySnapshot, getReadyServerSnapshot);
+export function useBreakpoint(enabled = true): { breakpoint: Breakpoint; ready: boolean } {
+  // Callers with a non-responsive value pass `enabled = false` so they neither
+  // subscribe to the media queries nor re-render when the viewport crosses one.
+  const breakpoint = React.useSyncExternalStore(
+    enabled ? subscribe : noopSubscribe,
+    enabled ? getSnapshot : getInitialSnapshot,
+    getServerSnapshot,
+  );
+  const ready = React.useSyncExternalStore(
+    enabled ? subscribe : noopSubscribe,
+    getReadySnapshot,
+    getReadyServerSnapshot,
+  );
 
   return React.useMemo(() => ({ breakpoint, ready }), [breakpoint, ready]);
 }

package/src/styles/fonts.css

@@ -9,7 +9,7 @@
  *   import '@womp/kookie-ui/styles.css';                                                          *
  *   import '@womp/kookie-ui/fonts.css';                                                           *
  *                                                                                                 *
- * This costs three render-blocking requests to Google Fonts. If you already load fonts yourself   *
+ * This costs four render-blocking requests to Google Fonts. If you already load fonts yourself    *
  * (`next/font`, a self-hosted @font-face, a CDN), skip this file and point the stacks at your     *
  * own faces instead:                                                                              *
  *                                                                                                 *
@@ -20,6 +20,7 @@
  ***************************************************************************************************/
 
 @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=Inter+Tight: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');
 
@@ -27,4 +28,8 @@
   --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI (Custom)', Roboto, 'Helvetica Neue', system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
   --font-mono: 'JetBrains Mono', 'Menlo', 'Consolas (Custom)', 'Liberation Mono', monospace, 'Apple Color Emoji', 'Segoe UI Emoji';
   --font-serif: 'Playfair Display', 'Times New Roman', 'Times', 'Georgia', 'Cambria', serif;
+
+  /* Headings get Inter Tight; body stays Inter. Inter is listed next so a heading rendered before
+     Inter Tight arrives falls back to the body face rather than to a system sans. */
+  --font-display: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI (Custom)', Roboto, 'Helvetica Neue', system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
 }

package/src/styles/tokens/font-family.css

@@ -7,9 +7,11 @@
  *                                                                                                 *
  * There are exactly two tiers:                                                                    *
  *                                                                                                 *
- *   1. STACKS  — which typefaces exist. Three of them: --font-sans, --font-mono, --font-serif.    *
- *                Declared on `:root`, because a typeface is an app-wide resource (and because     *
- *                that is where `next/font` and friends put theirs). Override at `:root`.          *
+ *   1. STACKS  — which typefaces exist: --font-sans, --font-mono, --font-serif, plus the         *
+ *                optional --font-display for headings. Declared on `:root`, because a typeface    *
+ *                is an app-wide resource (and because that is where `next/font` and friends put   *
+ *                theirs). Override at `:root`. --font-display is unset by default; define it and  *
+ *                headings use it, leave it alone and they follow the body.                        *
  *                                                                                                 *
  *   2. ROLES   — which stack each piece of text uses: --font-body, --font-heading, --font-code,   *
  *                --font-strong, --font-em, --font-quote. Declared on `.radix-themes`, because a   *
@@ -17,7 +19,7 @@
  *                per subtree. Override at `.radix-themes`.                                        *
  *                                                                                                 *
  * No webfonts are loaded here. The defaults below are system stacks. To use Kookie's own          *
- * typefaces (Inter / JetBrains Mono / Playfair Display), additionally import                      *
+ * typefaces (Inter / Inter Tight / JetBrains Mono / Playfair Display), additionally import        *
  * '@womp/kookie-ui/fonts.css'.                                                                    *
  *                                                                                                 *
  ***************************************************************************************************/
@@ -29,13 +31,19 @@
     'Segoe UI Emoji';
   --font-mono: 'Menlo', 'Consolas (Custom)', 'Bitstream Vera Sans Mono', monospace, 'Apple Color Emoji', 'Segoe UI Emoji';
   --font-serif: 'Times New Roman', 'Times', 'Georgia', 'Cambria', serif;
+
+  /* --font-display, the heading typeface, is deliberately NOT declared here. It is left undefined
+     so that the fallback in --font-heading below stays live: define it and headings use it, leave
+     it alone and they follow the body. Declaring it here as `var(--font-body)` would not work —
+     --font-body only exists on `.radix-themes`, and a var() inside a custom property resolves
+     against the element the declaration sits on, which would make this guaranteed-invalid. */
 }
 
 .radix-themes {
   /* Tier 2: roles. Each one points at a stack. Override these to give a role its own typeface —
      e.g. `--font-heading: var(--font-serif)` for serif headings over a sans body. */
   --font-body: var(--font-sans);
-  --font-heading: var(--font-body); /* follows the body unless you say otherwise */
+  --font-heading: var(--font-display, var(--font-body)); /* a display face if one is defined, else the body */
   --font-code: var(--font-mono);
   --font-strong: var(--font-body);
   --font-em: var(--font-serif);