@womp/kookie-ui 0.3.22

package/src/components/_internal/base-sidebar.css

@@ -0,0 +1,116 @@
+/*
+  Base Sidebar Layout and Container Styles
+  - Slot containers: Root, Container, Header, Content, Footer, Separator
+  - No visual variants here; only structure and slot-level primitives
+  - Shared tokens defined/consumed: --sidebar-base-border-radius, etc.
+*/
+
+/* Removed Sidebar Provider (unused) */
+
+/* Sidebar Root Container */
+.rt-SidebarRoot {
+  --sidebar-base-border-radius: 0; /* Default to no radius */
+
+  width: 100%;
+  height: 100%;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+
+  /* Make sure Theme wrapper also participates in flex layout */
+  & :where(.radix-themes) {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    height: 100%;
+  }
+}
+
+/* Sidebar Container */
+.rt-SidebarContainer {
+  --sidebar-base-border-radius: 0; /* Default to no radius */
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  background-color: var(--color-panel);
+  backdrop-filter: var(--backdrop-filter-panel);
+  border-radius: inherit;
+  flex: 1;
+}
+
+/* Sidebar Header */
+.rt-SidebarHeader {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  border-radius: var(--sidebar-base-border-radius) var(--sidebar-base-border-radius) 0 0;
+}
+
+/* Sidebar Content - based on rt-BaseMenuContent */
+.rt-SidebarContent {
+  --scrollarea-scrollbar-vertical-margin-top: var(--base-menu-content-padding);
+  --scrollarea-scrollbar-vertical-margin-bottom: var(--base-menu-content-padding);
+  --scrollarea-scrollbar-horizontal-margin-left: var(--base-menu-content-padding);
+  --scrollarea-scrollbar-horizontal-margin-right: var(--base-menu-content-padding);
+
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  box-sizing: border-box;
+  min-height: 0; /* Critical for flex children to shrink */
+
+  /* Override base menu styling that's not appropriate for sidebars */
+  background-color: transparent !important;
+  backdrop-filter: none !important;
+  box-shadow: none !important;
+  border-radius: 0 !important;
+
+  /* Step 2: stabilize text rasterization to avoid Chrome AA flicker */
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+
+  /* Add gap between groups using flex */
+  /* stylelint-disable-next-line selector-max-specificity */
+  & .rt-BaseMenuViewport {
+    /* gap: var(--base-menu-content-padding); */
+    gap: var(--space-5);
+  }
+
+  /* Ensure ScrollArea takes full height within SidebarContent */
+  & :where(.rt-ScrollAreaRoot) {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+  }
+
+  & :where(.rt-ScrollAreaViewport) {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+  }
+
+  /* Isolate painting to prevent cross-layer nudges */
+  & :where(.rt-BaseMenuViewport) {
+    contain: paint;
+  }
+}
+
+/* Sidebar Footer */
+.rt-SidebarFooter {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  margin-top: auto;
+  border-radius: 0 0 var(--sidebar-base-border-radius) var(--sidebar-base-border-radius);
+}
+
+/* Sidebar Separator - ensure full width and proper spacing */
+.rt-SidebarSeparator {
+  width: 100%;
+  margin: var(--space-2) 0;
+}
+
+/* Removed mobile hide rule; Shell handles overlay vs inline */

package/src/components/_internal/base-tab-list.css

@@ -0,0 +1,240 @@
+.rt-BaseTabList {
+  display: flex;
+  justify-content: flex-start;
+  overflow-x: auto;
+  white-space: nowrap;
+  min-width: 0;
+
+  font-family: var(--default-font-family);
+  font-style: normal;
+
+  scrollbar-width: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+.rt-BaseTabListTrigger {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  position: relative;
+  user-select: none;
+  transition: var(--transition-tabs);
+  scroll-behavior: smooth;
+}
+
+.rt-BaseTabListTriggerInner,
+.rt-BaseTabListTriggerInnerHidden {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: var(--transition-tabs), var(--transition-background-blur);
+}
+
+.rt-BaseTabListTriggerInner {
+  position: absolute;
+
+  :where(.rt-BaseTabListTrigger[data-state='inactive'], .rt-TabNavLink:not([data-active])) & {
+    letter-spacing: var(--tab-inactive-letter-spacing);
+    word-spacing: var(--tab-inactive-word-spacing);
+    transition-delay: var(--duration-1); /* 100ms - allows staggered effect vs active state's 0ms */
+  }
+
+  :where(.rt-BaseTabListTrigger[data-state='active'], .rt-TabNavLink[data-active]) & {
+    font-weight: var(--font-weight-medium);
+    letter-spacing: var(--tab-active-letter-spacing);
+    word-spacing: var(--tab-active-word-spacing);
+    transition-delay: 0ms; /* Immediate transition for active state */
+  }
+}
+
+.rt-BaseTabListTriggerInnerHidden {
+  visibility: hidden;
+  font-weight: var(--font-weight-medium);
+  letter-spacing: var(--tab-active-letter-spacing);
+  word-spacing: var(--tab-active-word-spacing);
+}
+
+/***************************************************************************************************
+ *                                                                                                 *
+ * SIZES                                                                                           *
+ *                                                                                                 *
+ ***************************************************************************************************/
+
+.rt-BaseTabListTrigger {
+  box-sizing: border-box;
+  height: var(--tab-height);
+  padding-left: var(--tab-padding-x);
+  padding-right: var(--tab-padding-x);
+}
+
+.rt-BaseTabListTriggerInner,
+.rt-BaseTabListTriggerInnerHidden {
+  box-sizing: border-box;
+  padding: var(--tab-inner-padding-y) var(--tab-inner-padding-x);
+  border-radius: var(--tab-inner-border-radius);
+}
+
+@breakpoints {
+  .rt-BaseTabList {
+    &:where(.rt-r-size-1) {
+      font-size: var(--font-size-1);
+      line-height: var(--line-height-1);
+      letter-spacing: var(--letter-spacing-1);
+      --tab-height: var(--space-6);
+      --tab-padding-x: var(--space-1);
+      --tab-inner-padding-x: var(--space-1);
+      --tab-inner-padding-y: calc(var(--space-1) * var(--spacing-multiplier-small));
+      --tab-inner-border-radius: var(--radius-1);
+
+      /* Icon sizing for size 1 */
+      /* stylelint-disable-next-line selector-max-type */
+      & :where(svg) {
+        width: var(--content-icon-size-1);
+        height: var(--content-icon-size-1);
+      }
+
+      & :where(.rt-BaseTabListTriggerInner, .rt-BaseTabListTriggerInnerHidden) {
+        gap: var(--component-gap-1);
+      }
+    }
+    &:where(.rt-r-size-2) {
+      font-size: var(--font-size-2);
+      line-height: var(--line-height-2);
+      letter-spacing: var(--letter-spacing-2);
+      --tab-height: var(--space-7);
+      --tab-padding-x: var(--space-2);
+      --tab-inner-padding-x: var(--space-2);
+      --tab-inner-padding-y: var(--space-1);
+      --tab-inner-border-radius: var(--radius-2);
+
+      /* Icon sizing for size 2 */
+      /* stylelint-disable-next-line selector-max-type */
+      & :where(svg) {
+        width: var(--content-icon-size-2);
+        height: var(--content-icon-size-2);
+      }
+
+      & :where(.rt-BaseTabListTriggerInner, .rt-BaseTabListTriggerInnerHidden) {
+        gap: var(--component-gap-2);
+      }
+    }
+  }
+}
+
+/***************************************************************************************************
+ *                                                                                                 *
+ * VARIANTS                                                                                        *
+ *                                                                                                 *
+ ***************************************************************************************************/
+
+.rt-BaseTabList {
+  box-shadow: inset 0 calc(-1 * var(--border-width-standard)) 0 0 var(--gray-a5);
+}
+
+.rt-BaseTabListTrigger {
+  color: var(--gray-a11);
+
+  @media (hover: hover) {
+    &:where(:hover) {
+      color: var(--gray-12);
+    }
+    &:where(:hover) :where(.rt-BaseTabListTriggerInner) {
+      /* Base state: solid gray for solid panels */
+      background-color: var(--gray-a3);
+
+      /* Theme-level translucent override for hover */
+      :where([data-panel-background='translucent']) & {
+        background-color: var(--gray-a3);
+        backdrop-filter: var(--backdrop-filter-components);
+      }
+
+      /* Component-level overrides for hover */
+      :where(.rt-BaseTabList[data-panel-background='solid']) & {
+        background-color: var(--gray-a3);
+        backdrop-filter: none;
+        --backdrop-filter-components: none;
+      }
+
+      :where(.rt-BaseTabList[data-panel-background='translucent']) & {
+        background-color: var(--gray-a3);
+        backdrop-filter: var(--backdrop-filter-components);
+        --backdrop-filter-components: blur(var(--backdrop-blur-components));
+      }
+
+      /* Disable backdrop-filter when inside elements that already have backdrop-filter */
+      :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) & {
+        backdrop-filter: none !important;
+      }
+    }
+    &:where(:focus-visible:hover) :where(.rt-BaseTabListTriggerInner) {
+      /* Base state: solid accent for solid panels */
+      background-color: var(--accent-a3);
+
+      /* Theme-level translucent override for focus+hover */
+      :where([data-panel-background='translucent']) & {
+        background-color: var(--accent-a3);
+        backdrop-filter: var(--backdrop-filter-components);
+      }
+
+      /* Component-level overrides for focus+hover */
+      :where(.rt-BaseTabList[data-panel-background='solid']) & {
+        background-color: var(--accent-a3);
+        backdrop-filter: none;
+        --backdrop-filter-components: none;
+      }
+
+      :where(.rt-BaseTabList[data-panel-background='translucent']) & {
+        background-color: var(--accent-a3);
+        backdrop-filter: var(--backdrop-filter-components);
+        --backdrop-filter-components: blur(var(--backdrop-blur-components));
+      }
+    }
+  }
+  &:where([data-state='active'], [data-active]) {
+    color: var(--gray-12);
+  }
+  &:where(:focus-visible) :where(.rt-BaseTabListTriggerInner) {
+    outline: var(--focus-outline-width) solid var(--focus-8);
+    outline-offset: var(--focus-outline-offset-inset);
+    scroll-margin: var(--space-2);
+  }
+  &:where([data-state='active'], [data-active])::before {
+    box-sizing: border-box;
+    content: '';
+    height: var(--focus-outline-width); /* Consistent with focus outline thickness */
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: var(--accent-indicator);
+    transform-origin: center;
+    transition: 
+      transform var(--duration-3) var(--ease-3),
+      opacity var(--duration-2) var(--ease-1),
+      background-color var(--duration-2) var(--ease-1);
+  }
+
+  :where(.rt-BaseTabList.rt-high-contrast) & {
+    &:where([data-state='active'], [data-active])::before {
+      background-color: var(--accent-12);
+    }
+  }
+}
+
+/* Forced colors support */
+@media (forced-colors: active) {
+  .rt-BaseTabListTrigger:where([data-state='active'])::before,
+  .rt-TabNavLink:where([data-active])::before {
+    background-color: Highlight;
+  }
+  
+  .rt-BaseTabListTrigger:where(:focus-visible) :where(.rt-BaseTabListTriggerInner) {
+    outline: 2px solid Highlight;
+    outline-offset: 2px;
+  }
+}
+
+

package/src/components/_internal/base-tab-list.props.ts

@@ -0,0 +1,35 @@
+import { colorPropDef } from '../../props/color.prop.js';
+import { highContrastPropDef } from '../../props/high-contrast.prop.js';
+
+import type { PropDef } from '../../props/prop-def.js';
+
+const sizes = ['1', '2'] as const;
+const wrapValues = ['nowrap', 'wrap', 'wrap-reverse'] as const;
+const justifyValues = ['start', 'center', 'end'] as const;
+const panelBackgrounds = ['solid', 'translucent'] as const;
+
+const baseTabListPropDefs = {
+  size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },
+  wrap: {
+    type: 'enum',
+    className: 'rt-r-fw',
+    values: wrapValues,
+    responsive: true,
+  },
+  justify: {
+    type: 'enum',
+    className: 'rt-r-jc',
+    values: justifyValues,
+    responsive: true,
+  },
+  ...colorPropDef,
+  ...highContrastPropDef,
+  panelBackground: { type: 'enum', values: panelBackgrounds, default: undefined },
+} satisfies {
+  size: PropDef<(typeof sizes)[number]>;
+  wrap: PropDef<(typeof wrapValues)[number]>;
+  justify: PropDef<(typeof justifyValues)[number]>;
+  panelBackground: PropDef<(typeof panelBackgrounds)[number] | undefined>;
+};
+
+export { baseTabListPropDefs };

package/src/components/_internal/dropdown-menu-drill-down.tsx

@@ -0,0 +1,249 @@
+'use client';
+
+import * as React from 'react';
+import type { Breakpoint, Responsive } from '../../props/prop-def.js';
+import type { submenuBehaviors } from './base-menu.props.js';
+import { useBreakpoint } from '../../hooks/use-breakpoint.js';
+
+type SubmenuBehavior = (typeof submenuBehaviors)[number];
+
+/**
+ * Resolves a responsive value to its current value based on the breakpoint.
+ * Falls back through smaller breakpoints if the current one isn't defined.
+ */
+function resolveResponsiveValue<T>(
+  value: T | Partial<Record<Breakpoint, T>> | undefined,
+  currentBreakpoint: Breakpoint,
+  defaultValue: T
+): T {
+  if (value === undefined || value === null) {
+    return defaultValue;
+  }
+
+  // Non-object values are returned directly
+  if (typeof value !== 'object') {
+    return value;
+  }
+
+  const map = value as Partial<Record<Breakpoint, T>>;
+
+  // Check if current breakpoint has a value
+  if (map[currentBreakpoint] !== undefined) {
+    return map[currentBreakpoint] as T;
+  }
+
+  // Fall back through smaller breakpoints
+  const bpOrder: Breakpoint[] = ['xl', 'lg', 'md', 'sm', 'xs', 'initial'];
+  const startIdx = bpOrder.indexOf(currentBreakpoint);
+
+  for (let i = startIdx + 1; i < bpOrder.length; i++) {
+    const bp = bpOrder[i];
+    if (map[bp] !== undefined) {
+      return map[bp] as T;
+    }
+  }
+
+  return defaultValue;
+}
+
+// ============================================================================
+// DrillDown Context
+// ============================================================================
+
+type AnimationDirection = 'forward' | 'backward' | null;
+
+/**
+ * Stable actions context - callbacks that don't change identity.
+ * Separated from state to prevent unnecessary re-renders of components
+ * that only need to call push/pop/reset.
+ */
+interface DrillDownActionsContextValue {
+  /** Navigate into a submenu */
+  push: (id: string) => void;
+  /** Navigate back to parent menu */
+  pop: () => void;
+  /** Reset to root menu */
+  reset: () => void;
+}
+
+/**
+ * Mutable state context - values that change when navigation occurs.
+ * Subscribers to this context will re-render on stack changes.
+ */
+interface DrillDownStateContextValue {
+  /** Current submenu behavior mode */
+  behavior: SubmenuBehavior;
+  /** Whether the breakpoint has been resolved (client-side only) */
+  ready: boolean;
+  /** Stack of active submenu IDs. Empty means root menu is shown. */
+  stack: string[];
+  /** Check if a specific submenu is the currently active one */
+  isActive: (id: string) => boolean;
+  /** Check if we're at root level (no submenus open) */
+  isRoot: boolean;
+  /** The currently active submenu ID (or null if at root) */
+  currentId: string | null;
+  /** Current animation direction for transitions */
+  animationDirection: AnimationDirection;
+}
+
+const DrillDownActionsContext = React.createContext<DrillDownActionsContextValue | null>(null);
+const DrillDownStateContext = React.createContext<DrillDownStateContextValue | null>(null);
+
+interface DrillDownProviderProps {
+  children: React.ReactNode;
+  submenuBehavior: Responsive<SubmenuBehavior> | undefined;
+}
+
+function DrillDownProvider({ children, submenuBehavior }: DrillDownProviderProps) {
+  const { breakpoint, ready } = useBreakpoint();
+  const [stack, setStack] = React.useState<string[]>([]);
+  const [animationDirection, setAnimationDirection] = React.useState<AnimationDirection>(null);
+
+  // Resolve the current behavior based on breakpoint
+  const behavior = React.useMemo(
+    () => resolveResponsiveValue(submenuBehavior, breakpoint, 'cascade'),
+    [submenuBehavior, breakpoint]
+  );
+
+  // Reset stack when behavior changes from drill-down to cascade
+  const prevBehaviorRef = React.useRef(behavior);
+  React.useEffect(() => {
+    if (prevBehaviorRef.current === 'drill-down' && behavior === 'cascade') {
+      setStack([]);
+      setAnimationDirection(null);
+    }
+    prevBehaviorRef.current = behavior;
+  }, [behavior]);
+
+  // Stable action callbacks - these never change identity
+  const push = React.useCallback((id: string) => {
+    setAnimationDirection('forward');
+    setStack((prev) => [...prev, id]);
+  }, []);
+
+  const pop = React.useCallback(() => {
+    setAnimationDirection('backward');
+    setStack((prev) => prev.slice(0, -1));
+  }, []);
+
+  const reset = React.useCallback(() => {
+    setStack([]);
+    setAnimationDirection(null);
+  }, []);
+
+  // Memoize actions context value - completely stable, never changes
+  const actionsValue = React.useMemo(
+    (): DrillDownActionsContextValue => ({ push, pop, reset }),
+    [push, pop, reset]
+  );
+
+  // isActive depends on stack - this is expected to change
+  const isActive = React.useCallback(
+    (id: string) => {
+      if (stack.length === 0) return false;
+      return stack[stack.length - 1] === id;
+    },
+    [stack]
+  );
+
+  // Memoize state context value - changes when stack/behavior changes
+  const stateValue = React.useMemo(
+    (): DrillDownStateContextValue => ({
+      behavior,
+      ready,
+      stack,
+      isActive,
+      isRoot: stack.length === 0,
+      currentId: stack.length > 0 ? stack[stack.length - 1] : null,
+      animationDirection,
+    }),
+    [behavior, ready, stack, isActive, animationDirection]
+  );
+
+  return (
+    <DrillDownActionsContext.Provider value={actionsValue}>
+      <DrillDownStateContext.Provider value={stateValue}>
+        {children}
+      </DrillDownStateContext.Provider>
+    </DrillDownActionsContext.Provider>
+  );
+}
+
+/**
+ * Hook to access only the stable action callbacks (push, pop, reset).
+ * Use this in components that only need to trigger navigation,
+ * not react to state changes. Prevents unnecessary re-renders.
+ */
+function useDrillDownActions() {
+  const ctx = React.useContext(DrillDownActionsContext);
+  if (!ctx) {
+    throw new Error('useDrillDownActions must be used within a DropdownMenu.Content');
+  }
+  return ctx;
+}
+
+/**
+ * Hook to access drill-down state (behavior, stack, isActive, etc.).
+ * Components using this will re-render when navigation state changes.
+ */
+function useDrillDownState() {
+  const ctx = React.useContext(DrillDownStateContext);
+  if (!ctx) {
+    throw new Error('useDrillDownState must be used within a DropdownMenu.Content');
+  }
+  return ctx;
+}
+
+/**
+ * Optional version of useDrillDownActions for components that may be outside Content.
+ */
+function useDrillDownActionsOptional() {
+  return React.useContext(DrillDownActionsContext);
+}
+
+/**
+ * Optional version of useDrillDownState for components that may be outside Content.
+ */
+function useDrillDownStateOptional() {
+  return React.useContext(DrillDownStateContext);
+}
+
+// ============================================================================
+// Sub Context (for individual submenu instances)
+// ============================================================================
+
+interface SubContextValue {
+  /** Unique ID for this submenu */
+  id: string;
+  /** Label for the back button */
+  label: React.ReactNode;
+}
+
+const SubContext = React.createContext<SubContextValue | null>(null);
+
+function useSubContext() {
+  return React.useContext(SubContext);
+}
+
+export {
+  DrillDownProvider,
+  DrillDownActionsContext,
+  DrillDownStateContext,
+  SubContext,
+  useDrillDownActions,
+  useDrillDownActionsOptional,
+  useDrillDownState,
+  useDrillDownStateOptional,
+  useSubContext,
+  useBreakpoint,
+  resolveResponsiveValue,
+};
+
+export type {
+  SubmenuBehavior,
+  DrillDownActionsContextValue,
+  DrillDownStateContextValue,
+  SubContextValue,
+  AnimationDirection,
+};

package/src/components/_internal/menu-context.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+import * as React from 'react';
+import type { Responsive } from '../../props/prop-def.js';
+
+/**
+ * Context to detect if a component is rendered inside a menu (DropdownMenu, ContextMenu, etc.)
+ * Used by VirtualMenu to adjust its behavior:
+ * - Skip role="menu" when inside a parent menu (parent owns the role)
+ * - Delegate certain keyboard handling to parent
+ * - Use the correct item height based on menu size
+ */
+
+export type MenuSize = '1' | '2';
+
+interface MenuContextValue {
+  /** Whether we're inside a menu that owns the menu role */
+  isInsideMenu: boolean;
+  /** Menu size for calculating item heights (resolved to non-responsive value) */
+  size?: MenuSize;
+}
+
+const MenuContext = React.createContext<MenuContextValue>({ isInsideMenu: false });
+
+interface MenuProviderProps {
+  children: React.ReactNode;
+  /** Menu size passed from parent (DropdownMenu.Content, ContextMenu.Content, etc.) */
+  size?: Responsive<MenuSize>;
+}
+
+/** Extract the base size from a potentially responsive value */
+function resolveSize(size: Responsive<MenuSize> | undefined): MenuSize | undefined {
+  if (!size) return undefined;
+  if (typeof size === 'string') return size;
+  // For responsive objects, use the 'initial' value
+  return size.initial;
+}
+
+export function MenuProvider({ children, size }: MenuProviderProps) {
+  const resolvedSize = resolveSize(size);
+  const value = React.useMemo(() => ({ isInsideMenu: true, size: resolvedSize }), [resolvedSize]);
+  return <MenuContext.Provider value={value}>{children}</MenuContext.Provider>;
+}
+
+export function useMenuContext() {
+  return React.useContext(MenuContext);
+}
+
+/** Map menu size to item height in pixels */
+export const menuSizeToItemHeight: Record<MenuSize, number> = {
+  '1': 24, // --space-5
+  '2': 32, // --space-6
+};