@womp/kookie-ui 0.4.0 → 0.6.2

package/src/components/hover-card.css

@@ -25,15 +25,15 @@
   .rt-HoverCardContent {
     &:where(.rt-r-size-1) {
       --hover-card-content-padding: var(--space-3);
-      border-radius: var(--radius-4);
+      border-radius: var(--radius-surface-4);
     }
     &:where(.rt-r-size-2) {
       --hover-card-content-padding: var(--space-4);
-      border-radius: var(--radius-4);
+      border-radius: var(--radius-surface-4);
     }
     &:where(.rt-r-size-3) {
       --hover-card-content-padding: var(--space-5);
-      border-radius: var(--radius-5);
+      border-radius: var(--radius-surface-5);
     }
   }
 }

package/src/components/popover.css

@@ -95,22 +95,22 @@
     &:where(.rt-r-size-1) {
       --popover-content-padding: var(--space-3);
       --popover-toolbar-padding: var(--space-2);
-      border-radius: min(var(--radius-3), calc(var(--radius-1) + var(--space-2)));
+      border-radius: min(var(--radius-surface-3), calc(var(--radius-surface-1) + var(--space-2)));
     }
     &:where(.rt-r-size-2) {
       --popover-content-padding: var(--space-4);
       --popover-toolbar-padding: var(--space-2);
-      border-radius: min(var(--radius-4), calc(var(--radius-2) + var(--space-3)));
+      border-radius: min(var(--radius-surface-4), calc(var(--radius-surface-2) + var(--space-3)));
     }
     &:where(.rt-r-size-3) {
       --popover-content-padding: var(--space-5);
       --popover-toolbar-padding: var(--space-3);
-      border-radius: min(var(--radius-5), calc(var(--radius-3) + var(--space-4)));
+      border-radius: min(var(--radius-surface-5), calc(var(--radius-surface-3) + var(--space-4)));
     }
     &:where(.rt-r-size-4) {
       --popover-content-padding: var(--space-6);
       --popover-toolbar-padding: var(--space-4);
-      border-radius: min(var(--radius-6), calc(var(--radius-4) + var(--space-5)));
+      border-radius: min(var(--radius-surface-6), calc(var(--radius-surface-4) + var(--space-5)));
     }
   }
 }

package/src/components/radio-cards.css

@@ -121,3 +121,33 @@
   }
   outline-color: var(--gray-8);
 }
+
+/*
+ * Pin the item shell to the control channel.
+ *
+ * These are selection controls that happen to be card-shaped, not surfaces:
+ * they sit in a row of choices and read as one large target each. Inheriting
+ * BaseCard's damped surface radius made them square off while every other
+ * control in the same form stayed round, so they take the control channel
+ * instead — the same formulas BaseCard used before the surface split. The
+ * mark inside keeps its own radius.
+ */
+@breakpoints {
+  .rt-RadioCardsItem {
+    &:where(.rt-r-size-1) {
+      --base-card-border-radius: min(var(--radius-5), calc(var(--radius-1) + var(--space-1)));
+    }
+    &:where(.rt-r-size-2) {
+      --base-card-border-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-2)));
+    }
+    &:where(.rt-r-size-3) {
+      --base-card-border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-3)));
+    }
+    &:where(.rt-r-size-4) {
+      --base-card-border-radius: min(var(--radius-8), calc(var(--radius-4) + var(--space-4)));
+    }
+    &:where(.rt-r-size-5) {
+      --base-card-border-radius: min(var(--radius-9), calc(var(--radius-5) + var(--space-5)));
+    }
+  }
+}

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/select.css

@@ -270,7 +270,7 @@
       --select-item-height: var(--space-5);
       --select-item-indicator-width: calc(var(--space-5) / var(--select-item-indicator-width-factor));
       --select-separator-margin-right: var(--space-2);
-      border-radius: var(--radius-3);
+      border-radius: var(--radius-surface-3);
 
       & :where(.rt-SelectLabel) {
         font-size: var(--font-size-1);
@@ -293,7 +293,7 @@
       --select-item-height: var(--space-6);
       --select-item-indicator-width: var(--space-5);
       --select-separator-margin-right: var(--space-3);
-      border-radius: var(--radius-4);
+      border-radius: var(--radius-surface-4);
 
       & :where(.rt-SelectLabel) {
         font-size: var(--font-size-2);

package/src/components/shell.css

@@ -672,7 +672,7 @@
 .rt-ShellBottom[data-inset] {
   --shell-inset-gap: var(--space-2);
   margin: var(--shell-inset-gap);
-  border-radius: var(--radius-3);
+  border-radius: var(--radius-surface-3);
   background: var(--color-background);
   box-shadow: var(--shadow-2);
   /* Override height: 100% so margin doesn't overflow */

package/src/components/table.css

@@ -60,7 +60,7 @@
 @breakpoints {
   .rt-TableRoot {
     &:where(.rt-r-size-1) {
-      --table-border-radius: min(var(--radius-5), calc(var(--radius-1) + var(--space-1)));
+      --table-border-radius: min(var(--radius-surface-5), calc(var(--radius-surface-1) + var(--space-1)));
       --table-cell-padding: var(--space-2);
       --table-cell-min-height: calc(36px * var(--scaling));
 
@@ -70,7 +70,7 @@
       }
     }
     &:where(.rt-r-size-2) {
-      --table-border-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-2)));
+      --table-border-radius: min(var(--radius-surface-6), calc(var(--radius-surface-2) + var(--space-2)));
       --table-cell-padding: var(--space-3);
       --table-cell-min-height: calc(44px * var(--scaling));
 
@@ -80,7 +80,7 @@
       }
     }
     &:where(.rt-r-size-3) {
-      --table-border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-3)));
+      --table-border-radius: min(var(--radius-surface-7), calc(var(--radius-surface-3) + var(--space-3)));
       --table-cell-padding: var(--space-4);
       --table-cell-min-height: var(--space-8);
 
@@ -90,7 +90,7 @@
       }
     }
     &:where(.rt-r-size-4) {
-      --table-border-radius: min(var(--radius-8), calc(var(--radius-4) + var(--space-4)));
+      --table-border-radius: min(var(--radius-surface-8), calc(var(--radius-surface-4) + var(--space-4)));
       --table-cell-padding: var(--space-5);
       --table-cell-min-height: var(--space-9);
 
@@ -100,7 +100,7 @@
       }
     }
     &:where(.rt-r-size-5) {
-      --table-border-radius: min(var(--radius-9), calc(var(--radius-5) + var(--space-5)));
+      --table-border-radius: min(var(--radius-surface-9), calc(var(--radius-surface-5) + var(--space-5)));
       --table-cell-padding: var(--space-6);
       --table-cell-min-height: var(--space-10);
 

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/tooltip.css

@@ -2,7 +2,7 @@
   box-sizing: border-box;
   padding: var(--space-1) var(--space-2);
   background-color: var(--gray-12);
-  border-radius: var(--radius-1);
+  border-radius: var(--radius-surface-1);
   z-index: 300; /* Tooltips always on top - above dialogs (100) and menus (200) */
 
   transform-origin: var(--radix-tooltip-content-transform-origin);

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);

package/src/styles/tokens/radius.css

@@ -1,45 +1,88 @@
+/*
+ * RADIUS
+ *
+ * Two channels, one theme.
+ *
+ * `--radius-*`         CONTROLS & MARKS — buttons, inputs, checkboxes, badges,
+ *                      switches, tabs. These scale aggressively with the theme
+ *                      and opt into `--radius-full` to become pills.
+ *
+ * `--radius-surface-*` SURFACES — cards, dialogs, popovers, menus, tables,
+ *                      callouts. These damp as the theme grows and never go
+ *                      pill. A surface at `full` is exactly as round as a
+ *                      surface at `medium`; `--radius-surface-factor` is
+ *                      capped at 1.
+ *
+ * The gap between the two channels is the point: round controls read as
+ * touchable, restrained surfaces read as architectural. Widening the theme
+ * widens that contrast instead of inflating everything at once.
+ */
+
 [data-radius] {
-  /*  */
+  /* Controls & marks */
   --radius-1: calc(6px * var(--scaling) * var(--radius-factor));
   --radius-2: calc(8px * var(--scaling) * var(--radius-factor));
   --radius-3: calc(10px * var(--scaling) * var(--radius-factor));
   --radius-4: calc(12px * var(--scaling) * var(--radius-factor));
-  
+
   /*  */
   --radius-5: calc(16px * var(--scaling) * var(--radius-factor));
   --radius-6: calc(20px * var(--scaling) * var(--radius-factor));
   --radius-7: calc(24px * var(--scaling) * var(--radius-factor));
   --radius-8: calc(28px * var(--scaling) * var(--radius-factor));
-  
+
   /*  */
   --radius-9: calc(32px * var(--scaling) * var(--radius-factor));
   --radius-10: calc(40px * var(--scaling) * var(--radius-factor));
   --radius-11: calc(48px * var(--scaling) * var(--radius-factor));
   --radius-12: calc(56px * var(--scaling) * var(--radius-factor));
+
+  /* Surfaces — same ramp, damped factor, no pill */
+  --radius-surface-1: calc(6px * var(--scaling) * var(--radius-surface-factor));
+  --radius-surface-2: calc(8px * var(--scaling) * var(--radius-surface-factor));
+  --radius-surface-3: calc(10px * var(--scaling) * var(--radius-surface-factor));
+  --radius-surface-4: calc(12px * var(--scaling) * var(--radius-surface-factor));
+
+  /*  */
+  --radius-surface-5: calc(16px * var(--scaling) * var(--radius-surface-factor));
+  --radius-surface-6: calc(20px * var(--scaling) * var(--radius-surface-factor));
+  --radius-surface-7: calc(24px * var(--scaling) * var(--radius-surface-factor));
+  --radius-surface-8: calc(28px * var(--scaling) * var(--radius-surface-factor));
+
+  /*  */
+  --radius-surface-9: calc(32px * var(--scaling) * var(--radius-surface-factor));
+  --radius-surface-10: calc(40px * var(--scaling) * var(--radius-surface-factor));
+  --radius-surface-11: calc(48px * var(--scaling) * var(--radius-surface-factor));
+  --radius-surface-12: calc(56px * var(--scaling) * var(--radius-surface-factor));
 }
 
 
 [data-radius='none'] {
   --radius-factor: 0;
+  --radius-surface-factor: 0;
   --radius-full: 0px;
 }
 
 [data-radius='small'] {
   --radius-factor: 0.75;
+  --radius-surface-factor: 0.5;
   --radius-full: 0px;
 }
 
 [data-radius='medium'] {
   --radius-factor: 1;
+  --radius-surface-factor: 0.75;
   --radius-full: 0px;
 }
 
 [data-radius='large'] {
   --radius-factor: 1.5;
+  --radius-surface-factor: 0.9;
   --radius-full: 0px;
 }
 
 [data-radius='full'] {
-  --radius-factor: 2.0;
+  --radius-factor: 2;
+  --radius-surface-factor: 1;
   --radius-full: 9999px;
 }