devnonla-ui 0.1.0 → 0.3.0

package/src/styles.css

@@ -3,26 +3,30 @@
 /**
  * NonlaUI theme — single source of color.
  *
- * Light-only. Warm paper + charcoal ink, amber brand.
+ * Layers:
+ *   Seed  — `--nonla-*` knobs in the first block. Consumer overrides these.
+ *   Map   — derived (brand-50…800, radius-sm/lg, z-popup). Do not set unless exception.
+ *   Alias — `--background`, `--brand`, `--destructive` (shadcn + Nonla names).
+ *
+ * Light-only defaults. `.dark` is not an alias of this sheet.
  * Override `--nonla-*` knobs in the consuming app (CSS or `<App theme>`).
  * Components read only these tokens — never edit Button/Tag/… to retheme.
  */
 
 :root,
-.dark,
 .nonla-ui {
   color-scheme: light;
 
-  /* ── Knobs (override these) ──────────────────────────────────────────── */
+  /* ── Knobs / Seed (override these) ──────────────────────────────────── */
   --nonla-bg: #fffcf1;
   --nonla-fg: #1f1f1e;
   /* Text rank on cream — same ink, contrast steps ~13.6 / 7 / 4.5 / 3 (WCAG AAA body → AA body → AA UI). */
   --nonla-fg-muted: color-mix(in oklab, var(--nonla-fg) 78%, var(--nonla-bg));
   --nonla-fg-tertiary: color-mix(in oklab, var(--nonla-fg) 64%, var(--nonla-bg));
   --nonla-fg-quaternary: color-mix(in oklab, var(--nonla-fg) 50%, var(--nonla-bg));
-  --nonla-brand: #eb9d29;
-  /* Ink on brand fills — charcoal, not white (white fails WCAG on amber). */
-  --nonla-solid-fg: var(--nonla-fg);
+  --nonla-brand: #f18d00;
+  /* Label on brand fills (Button primary, Tag solid, Checkbox). Override via `colors.solidFg`. */
+  --nonla-solid-fg: #ffffff;
   --nonla-danger: #c0392b;
   --nonla-success: #1f9d55;
   --nonla-warn: #c47d12;
@@ -53,6 +57,11 @@
   --nonla-ink-active: color-mix(in srgb, var(--nonla-ink) 8%, transparent);
   --nonla-ink-line: color-mix(in srgb, var(--nonla-ink) 14%, transparent);
   --nonla-desktop-bar-height: 42px;
+  --nonla-z-base: 0;
+  --nonla-z-desktop: 20;
+  --nonla-z-window: 30;
+  --nonla-z-header: 40;
+  --nonla-z-popup-base: 1000;
 
   /* Preset accents — Button color="blue" / Tag color="purple" / … */
   --nonla-blue: #1677ff;
@@ -69,9 +78,13 @@
   --nonla-lime: #a0d911;
   --nonla-gold: #faad14;
 
-  /* ── Derived map (do not set unless you need a one-off exception) ───── */
+  /* ── Map + Alias (do not set unless you need a one-off exception) ───── */
   --nonla-radius-sm: max(0px, calc(var(--nonla-radius) - 2px));
   --nonla-radius-lg: calc(var(--nonla-radius) + 2px);
+  --nonla-z-drawer: var(--nonla-z-popup-base);
+  --nonla-z-modal: var(--nonla-z-popup-base);
+  --nonla-z-message: calc(var(--nonla-z-popup-base) + 10);
+  --nonla-z-popup: calc(var(--nonla-z-popup-base) + 50);
   --radius: var(--nonla-radius);
   --background: var(--nonla-bg);
   --foreground: var(--nonla-fg);
@@ -106,6 +119,7 @@
   --brand-800: color-mix(in oklab, var(--nonla-brand) 48%, black);
   --brand: var(--brand-500);
   --brand-text: var(--brand-700);
+  --solid-fg: var(--nonla-solid-fg);
   --link: var(--nonla-link);
   --success: var(--nonla-success);
   --warn: var(--nonla-warn);
@@ -202,6 +216,7 @@
   --color-brand-700: var(--brand-700);
   --color-brand-800: var(--brand-800);
   --color-brand-text: var(--brand-text);
+  --color-solid-fg: var(--solid-fg);
   --color-link: var(--link);
   --color-success: var(--success);
   --color-warn: var(--warn);
@@ -225,13 +240,13 @@
   --shadow-panel: 0 0 0 1px var(--border), 0 4px 16px color-mix(in oklab, var(--nonla-fg) 10%, transparent);
 
   --spacing-control-xs: 24px;
-  --spacing-control-sm: 28px;
+  --spacing-control-sm: 24px;
   --spacing-control-md: 32px;
-  --spacing-control-lg: 36px;
+  --spacing-control-lg: 40px;
   --spacing-nav-item: 32px;
-  --spacing-field-sm: 28px;
+  --spacing-field-sm: 24px;
   --spacing-field-md: 32px;
-  --spacing-field-lg: 36px;
+  --spacing-field-lg: 40px;
   --spacing-field-nav: 32px;
   --spacing-desktop-bar: var(--nonla-desktop-bar-height);
 
@@ -271,7 +286,7 @@
   }
 }
 
-@keyframes nonla-chat-shimmer {
+@keyframes nonla-shimmer {
   0% {
     background-position: 100% 0;
   }
@@ -280,21 +295,31 @@
   }
 }
 
-.nonla-chat-shimmer {
-  background-image: linear-gradient(90deg, var(--muted-foreground) 0%, var(--foreground) 45%, var(--muted-foreground) 90%);
-  background-size: 200% 100%;
+.nonla-shimmer {
+  display: inline-block;
+  background-image: linear-gradient(
+    90deg,
+    var(--tertiary-foreground) 0%,
+    var(--foreground) 40%,
+    color-mix(in oklab, var(--foreground) 25%, white) 50%,
+    var(--foreground) 60%,
+    var(--tertiary-foreground) 100%
+  );
+  background-size: 220% 100%;
   background-clip: text;
   -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
   color: transparent;
-  animation: nonla-chat-shimmer 1.8s ease-in-out infinite;
+  animation: nonla-shimmer 1.6s ease-in-out infinite;
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .nonla-chat-shimmer {
+  .nonla-shimmer {
     animation: none;
     background-image: none;
     background-clip: border-box;
     -webkit-background-clip: border-box;
+    -webkit-text-fill-color: unset;
     color: var(--muted-foreground);
   }
 }
@@ -305,7 +330,7 @@
   top: 16px;
   left: 50%;
   transform: translateX(-50%);
-  z-index: 10000;
+  z-index: var(--nonla-z-message);
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -589,20 +614,31 @@
   }
 }
 
-/* Frosted overlay — macOS menu chrome: outer hairline + inner white rim */
+/* Frosted overlay — one hairline + lift. No stacked black/white rings. */
 .nonla-glass {
-  border: 1px solid rgb(255 255 255 / 0.78);
+  border: 1px solid var(--glass-border);
   background: var(--glass);
   color: var(--foreground);
-  box-shadow:
-    0 0 0 0.5px color-mix(in srgb, black 22%, transparent),
-    0 10px 28px color-mix(in srgb, black 14%, transparent),
-    inset 0 0 0 0.5px rgb(255 255 255 / 0.55),
-    inset 0 1px 0 rgb(255 255 255 / 0.92);
+  box-shadow: 0 10px 28px color-mix(in srgb, black 12%, transparent);
   -webkit-backdrop-filter: blur(24px) saturate(160%);
   backdrop-filter: blur(24px) saturate(160%);
 }
 
+/* Desktop window — cream wash + less saturate so meadow doesn't tint the panel. */
+.nonla-window-glass {
+  background: color-mix(in srgb, var(--nonla-bg) 81%, transparent);
+  -webkit-backdrop-filter: blur(40px) saturate(108%);
+  backdrop-filter: blur(40px) saturate(108%);
+}
+
+/* Fluent Color desktop tile — same frost as the window, macOS squircle. */
+.nonla-desktop-icon-plate {
+  overflow: hidden;
+  border: 0;
+  border-radius: 22%;
+  box-shadow: none;
+}
+
 .nonla-btn-glass {
   border-color: var(--glass-border);
   background: var(--glass);
@@ -646,6 +682,7 @@
 .nonla-overlay {
   position: fixed;
   inset: 0;
+  z-index: var(--nonla-z-drawer);
   background: var(--mask);
 }
 .nonla-overlay[data-state="open"] {
@@ -658,7 +695,7 @@
 .nonla-modal-overlay {
   position: fixed;
   inset: 0;
-  z-index: 9990;
+  z-index: var(--nonla-z-modal);
   background: var(--mask);
 }
 .nonla-modal-overlay[data-state="open"] {
@@ -673,7 +710,7 @@
   position: fixed;
   left: 50%;
   top: 60px;
-  z-index: 9991;
+  z-index: calc(var(--nonla-z-modal) + 1);
   transform: translate(-50%, 0);
   display: flex;
   flex-direction: column;
@@ -761,6 +798,7 @@
 
 .nonla-drawer-panel {
   will-change: transform;
+  z-index: calc(var(--nonla-z-drawer) + 1);
 }
 .nonla-drawer-panel[data-side="right"][data-state="open"] {
   animation: nonla-drawer-in-right var(--nonla-dur-slow) var(--nonla-ease-out);
@@ -787,6 +825,22 @@
   animation: nonla-drawer-out-top var(--nonla-dur) var(--nonla-ease-in);
 }
 
+.nonla-popup-layer {
+  z-index: var(--nonla-z-popup, 1050);
+}
+
+.nonla-desktop-layer {
+  z-index: var(--nonla-z-desktop, 20);
+}
+
+.nonla-window-layer {
+  z-index: var(--nonla-z-window, 30);
+}
+
+.nonla-header-layer {
+  z-index: var(--nonla-z-header, 40);
+}
+
 .nonla-popper {
   will-change: transform, opacity;
   transform-origin: var(--radix-popover-content-transform-origin, var(--radix-dropdown-menu-content-transform-origin, var(--radix-select-content-transform-origin, var(--radix-tooltip-content-transform-origin, center))));
@@ -895,3 +949,18 @@
 .group\/scroll:hover .nonla-overlay-thumb {
   background: var(--nonla-scrollbar-thumb-hover);
 }
+
+.nonla-color-checkered {
+  background-color: #fff;
+  background-image: conic-gradient(#d9d9d9 0.25turn, #fff 0.25turn 0.5turn, #d9d9d9 0.5turn 0.75turn, #fff 0.75turn);
+  background-size: 8px 8px;
+}
+
+.nonla-color-cleared {
+  background: linear-gradient(
+    to bottom left,
+    transparent calc(50% - 1px),
+    var(--destructive) calc(50% - 1px) calc(50% + 1px),
+    transparent calc(50% + 1px)
+  );
+}

package/src/switch/Switch.tsx

@@ -1,29 +1,30 @@
 import * as SwitchPrimitive from "@radix-ui/react-switch";
 import { type CSSProperties, type ComponentPropsWithoutRef, forwardRef } from "react";
 import { cn } from "../lib/cn";
-import { type ControlSize, controlRadiusVar, normalizeSize } from "../lib/sizes";
+import { type ControlSize, controlRadiusVar, useControlSize } from "../lib/sizes";
 
 export type SwitchVariant = "default" | "square";
 
 export type SwitchProps = Omit<ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>, "onCheckedChange" | "checked" | "onChange"> & {
   checked?: boolean;
   defaultChecked?: boolean;
-  /** antd-style — receives the next checked boolean (not a DOM event). */
+  /** Receives the next checked boolean (not a DOM event). */
   onChange?: (checked: boolean) => void;
   size?: ControlSize;
   variant?: SwitchVariant;
 };
 
-/** Switch track heights — shorter than Button/Input (antd-like). */
+/** Switch track heights — shorter than Button/Input. */
 const SWITCH_TRACK_H = { small: 16, default: 22, large: 28 } as const;
 
 export const Switch = forwardRef<HTMLButtonElement, SwitchProps>(function Switch({ className, checked, defaultChecked, onChange, size, variant = "default", disabled, style, ...rest }, ref) {
-  const trackH = SWITCH_TRACK_H[normalizeSize(size)];
+  const resolvedSize = useControlSize(size);
+  const trackH = SWITCH_TRACK_H[resolvedSize];
   const trackW = Math.round(trackH * 1.8);
   const thumb = trackH - 4;
   const travel = trackW - thumb - 3;
   const square = variant === "square";
-  const squareRadius = `max(3px, calc(${controlRadiusVar(size)} * 0.55))`;
+  const squareRadius = `max(3px, calc(${controlRadiusVar(resolvedSize)} * 0.55))`;
 
   return (
     <SwitchPrimitive.Root

package/src/table/Table.tsx

@@ -2,7 +2,7 @@ import { type CSSProperties, type Key, type ReactNode, useMemo, useState } from
 import { Checkbox } from "../checkbox/Checkbox";
 import { Empty } from "../empty/Empty";
 import { cn } from "../lib/cn";
-import { type ControlSize, normalizeSize } from "../lib/sizes";
+import { type CanonicalSize, type ControlSize, useControlSize } from "../lib/sizes";
 import { Pagination } from "../pagination/Pagination";
 import { Spin } from "../spin/Spin";
 
@@ -15,7 +15,7 @@ export type ColumnType<T> = {
   width?: number | string;
   minWidth?: number | string;
   align?: "left" | "center" | "right";
-  /** Custom cell — Ant Design style `(value, record, index) => ReactNode`. */
+  /** Custom cell — `(value, record, index) => ReactNode`. */
   render?: (value: any, record: T, index: number) => ReactNode;
   className?: string;
   ellipsis?: boolean;
@@ -127,8 +127,7 @@ function SortIcon({ order }: { order: SortOrder | undefined }) {
   );
 }
 
-function sizeClasses(size: ControlSize | undefined) {
-  const s = normalizeSize(size);
+function sizeClasses(s: CanonicalSize) {
   if (s === "small") {
     return {
       head: "h-9 px-2 text-xs",
@@ -152,7 +151,7 @@ function sizeClasses(size: ControlSize | undefined) {
 }
 
 export function Table<T extends object = Record<string, unknown>>({ columns = [], dataSource = [], rowKey, loading, pagination, className, size, bordered, scroll, onRow, locale, showHeader = true, title, footer, rowSelection, rowClassName, onChange }: TableProps<T>) {
-  const sz = sizeClasses(size);
+  const sz = sizeClasses(useControlSize(size));
 
   const selectionControlled = rowSelection?.selectedRowKeys !== undefined;
   const [innerSelected, setInnerSelected] = useState<Key[]>(() => rowSelection?.defaultSelectedRowKeys ?? []);
@@ -324,8 +323,8 @@ export function Table<T extends object = Record<string, unknown>>({ columns = []
                     return (
                       <tr key={key} data-slot="table-row" data-state={selected ? "selected" : undefined} className={cn("border-b border-border transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted", rowProps?.className, extraClass)} style={rowProps?.style} onClick={rowProps?.onClick}>
                         {rowSelection ? (
-                          <td data-slot="table-cell" className={cn(sz.cell, sz.check, "align-middle")} style={selectionColWidth != null ? { width: selectionColWidth } : undefined}>
-                            <div className="flex items-center justify-center" onClick={(e) => e.stopPropagation()}>
+                          <td data-slot="table-cell" className={cn(sz.cell, sz.check, "align-middle")} style={selectionColWidth != null ? { width: selectionColWidth } : undefined} onClick={(e) => e.stopPropagation()}>
+                            <div className="flex items-center justify-center">
                               {rowSelection.type === "radio" ? (
                                 <input type="radio" name="nonla-table-row-select" checked={selected} disabled={rowSelection.getCheckboxProps?.(record)?.disabled} aria-label="Select row" className="size-3.5 accent-foreground" onChange={() => emitSelection([key])} />
                               ) : (

package/src/tag/Tag.tsx

@@ -6,7 +6,7 @@ export type TagVariant = "soft" | "solid";
 export type TagProps = {
   children?: ReactNode;
   color?: string;
-  /** @deprecated prefer `variant="soft"` — kept for antd-ish callers */
+  /** @deprecated prefer `variant="soft"` */
   bordered?: boolean;
   /**
    * `soft` — quiet wash (default).
@@ -78,7 +78,7 @@ export function Tag({
   return (
     <span
       className={cn(
-        "inline-flex h-[22px] max-w-full items-center gap-1.5 rounded-full px-2.5 text-[11px] font-medium tracking-[0.01em]",
+        "inline-flex h-5.5 max-w-full items-center gap-1.5 rounded-full px-2.5 text-[11px] font-medium tracking-[0.01em]",
         isDefault && (solid ? "bg-foreground/10 text-(--nonla-ink)" : "bg-muted text-muted-foreground"),
         !isDefault && (solid ? SOLID : SOFT),
         className,

package/src/theme.ts

@@ -1,7 +1,7 @@
 /**
  * Theme knobs for NonlaUI.
  *
- * Defaults live in `styles.css` on `:root` / `.dark` / `.nonla-ui`.
+ * Defaults live in `styles.css` on `:root` / `.nonla-ui`.
  * `--brand-50`…`--brand-800` follow `--nonla-brand` (500 = the knob).
  * Consumers retheme without touching components:
  *   1. CSS:  `:root { --nonla-brand: #3b82f6; }`
@@ -43,6 +43,11 @@ export const NONLA_THEME_KEYS = {
   inkActive: "--nonla-ink-active",
   inkLine: "--nonla-ink-line",
   desktopBarHeight: "--nonla-desktop-bar-height",
+  zBase: "--nonla-z-base",
+  zDesktop: "--nonla-z-desktop",
+  zWindow: "--nonla-z-window",
+  zHeader: "--nonla-z-header",
+  zPopupBase: "--nonla-z-popup-base",
   blue: "--nonla-blue",
   purple: "--nonla-purple",
   cyan: "--nonla-cyan",
@@ -61,9 +66,12 @@ export const NONLA_THEME_KEYS = {
 export type NonlaThemeKnobName = keyof typeof NONLA_THEME_KEYS;
 export type NonlaThemeKnob = (typeof NONLA_THEME_KEYS)[NonlaThemeKnobName];
 
-const METRIC_KEYS = new Set<NonlaThemeKnobName>(["radius", "height", "heightSm", "heightLg", "desktopBarHeight"]);
+const METRIC_KEYS = new Set<NonlaThemeKnobName>(["radius", "height", "heightSm", "heightLg", "desktopBarHeight", "zBase", "zDesktop", "zWindow", "zHeader", "zPopupBase"]);
 
-export type NonlaThemeColorName = Exclude<NonlaThemeKnobName, "radius" | "height" | "heightSm" | "heightLg">;
+export type NonlaThemeColorName = Exclude<
+  NonlaThemeKnobName,
+  "radius" | "height" | "heightSm" | "heightLg" | "desktopBarHeight" | "zBase" | "zDesktop" | "zWindow" | "zHeader" | "zPopupBase"
+>;
 export type NonlaThemeColors = { [K in NonlaThemeColorName]?: string };
 
 /** Flat aliases → knob name (`colorBorder` == `colors.border`). */
@@ -117,6 +125,18 @@ function entriesOf(theme: NonlaThemeConfig): [string, string][] {
   return [...map.entries()];
 }
 
+export type NonlaTokenSnapshot = { [K in NonlaThemeKnobName]: string };
+
+/** Read computed `--nonla-*` knobs (`getDesignToken`). */
+export function getDesignToken(target?: HTMLElement): NonlaTokenSnapshot {
+  const el = target ?? (typeof document === "undefined" ? null : document.documentElement);
+  const token = {} as NonlaTokenSnapshot;
+  for (const name of Object.keys(NONLA_THEME_KEYS) as NonlaThemeKnobName[]) {
+    token[name] = el ? getComputedStyle(el).getPropertyValue(NONLA_THEME_KEYS[name]).trim() : "";
+  }
+  return token;
+}
+
 /** Apply knobs on an element (defaults to `:root`). Returns a restore function. */
 export function applyNonlaTheme(theme: NonlaThemeConfig, target: HTMLElement = document.documentElement): () => void {
   const entries = entriesOf(theme);

package/src/timepicker/TimePicker.tsx

@@ -12,10 +12,10 @@ import {
   useRef,
   useState,
 } from "react";
-import { useAppConfig } from "../app/App";
+import { usePopupContainer } from "../app/context";
 import { cn } from "../lib/cn";
 import { type PopperPlacement, placementToRadix } from "../lib/placement";
-import { type ControlSize, controlFieldFocusBorder, controlFieldStyle, controlFieldSurface, controlFieldTransition, controlStatusClass, getSizeTokens } from "../lib/sizes";
+import { type ControlSize, controlFieldFocusBorder, controlFieldStyle, controlFieldSurface, controlFieldTransition, controlStatusClass, getSizeTokens, useControlSize } from "../lib/sizes";
 import { glassOverlayClass } from "../lib/surface";
 
 export type TimeValue = { hours: number; minutes: number; seconds: number };
@@ -244,7 +244,7 @@ function StepperButton({
       tabIndex={-1}
       aria-label={label}
       className={cn(
-        "flex h-10 items-center justify-center rounded-[6px] text-muted-foreground transition-colors",
+        "flex h-10 items-center justify-center rounded-md text-muted-foreground transition-colors",
         "hover:bg-foreground/5 hover:text-foreground active:bg-foreground/8",
       )}
       style={{ width: size }}
@@ -370,7 +370,7 @@ function StepperBoard({
               tabIndex={-1}
               aria-label={`Choose ${col.label}`}
               className={cn(
-                "flex cursor-pointer items-center justify-center rounded-[6px] font-semibold leading-none tracking-tight transition-colors",
+                "flex cursor-pointer items-center justify-center rounded-md font-semibold leading-none tracking-tight transition-colors",
                 col.wide ? "text-[23px]" : "tabular-nums",
                 col.active ? "bg-foreground/6 text-foreground" : "text-foreground hover:bg-foreground/5",
               )}
@@ -414,7 +414,7 @@ export const TimePicker = forwardRef<HTMLInputElement, TimePickerProps>(function
   },
   ref,
 ) {
-  const app = useAppConfig();
+  const appPortal = usePopupContainer();
   const showSeconds = format === "HH:mm:ss";
   const controlled = value !== undefined;
   const [inner, setInner] = useState<TimeValue | null>(() => parseTime(defaultValue));
@@ -428,8 +428,9 @@ export const TimePicker = forwardRef<HTMLInputElement, TimePickerProps>(function
   const [fallback, setFallback] = useState<TimeValue>(nowParts);
   const inputRef = useRef<HTMLInputElement | null>(null);
   const fieldRef = useRef<HTMLDivElement | null>(null);
-  const tok = getSizeTokens(size);
-  const fieldStyle = controlFieldStyle(size);
+  const resolvedSize = useControlSize(size);
+  const tok = getSizeTokens(resolvedSize);
+  const fieldStyle = controlFieldStyle(resolvedSize);
   const { side, align } = placementToRadix(placement);
 
   useEffect(() => {
@@ -593,6 +594,7 @@ export const TimePicker = forwardRef<HTMLInputElement, TimePickerProps>(function
           <span className="inline-flex shrink-0 text-muted-foreground">
             <ClockIcon size={tok.icon} />
           </span>
+          {/* biome-ignore lint/a11y/useAriaPropsSupportedByRole: native time field exposes popup state */}
           <input
             ref={setRefs}
             id={id}
@@ -647,7 +649,7 @@ export const TimePicker = forwardRef<HTMLInputElement, TimePickerProps>(function
           ) : null}
         </div>
       </PopoverPrimitive.Anchor>
-      <PopoverPrimitive.Portal container={app.getPopupContainer?.()}>
+      <PopoverPrimitive.Portal container={appPortal?.()}>
         <PopoverPrimitive.Content
           side={side}
           align={align}
@@ -668,14 +670,14 @@ export const TimePicker = forwardRef<HTMLInputElement, TimePickerProps>(function
             if (fieldRef.current?.contains(e.target as Node)) e.preventDefault();
           }}
           className={cn(
-            "w-[300px] p-0",
+            "w-75 p-0",
             glassOverlayClass,
             popupClassName,
           )}
         >
           <div className="relative overflow-hidden rounded-[inherit]">
             {picking && pickOptions ? (
-              <div className="relative flex h-[220px] items-center px-3 pt-8 pb-3">
+              <div className="relative flex h-55 items-center px-3 pt-8 pb-3">
                 <button
                   type="button"
                   tabIndex={-1}
@@ -690,7 +692,7 @@ export const TimePicker = forwardRef<HTMLInputElement, TimePickerProps>(function
                 </div>
               </div>
             ) : (
-              <div className="flex h-[220px] flex-col items-center justify-center px-4">
+              <div className="flex h-55 flex-col items-center justify-center px-4">
                 <StepperBoard
                   columns={[
                     {

package/src/tooltip/Tooltip.tsx

@@ -1,6 +1,6 @@
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import { type ReactNode } from "react";
-import { useAppConfig } from "../app/App";
+import type { ReactNode } from "react";
+import { usePopupContainer } from "../app/context";
 import { cn } from "../lib/cn";
 import { type PopperPlacement, placementToRadix } from "../lib/placement";
 import { glassOverlayClass } from "../lib/surface";
@@ -16,10 +16,10 @@ export type TooltipProps = {
   onOpenChange?: (open: boolean) => void;
   mouseEnterDelay?: number;
   className?: string;
-  /** antd alias */
+  /** Extra class on the overlay panel. */
   overlayClassName?: string;
   getPopupContainer?: () => HTMLElement;
-  /** antd accepts `boolean | { pointAtCenter }` — we only honor truthiness. */
+  /** `boolean | { pointAtCenter }` — we only honor truthiness. */
   arrow?: boolean | { pointAtCenter?: boolean };
 };
 
@@ -35,15 +35,14 @@ export function Tooltip({
   overlayClassName,
   getPopupContainer,
 }: TooltipProps) {
-  const app = useAppConfig();
+  const getContainer = usePopupContainer(getPopupContainer);
   const { side, align } = placementToRadix(placement);
-  const container = getPopupContainer ?? app.getPopupContainer;
   if (title == null || title === false) return <>{children}</>;
   return (
     <TooltipPrimitive.Provider delayDuration={Math.round(mouseEnterDelay * 1000)}>
       <TooltipPrimitive.Root open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>
         <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>
-        <TooltipPrimitive.Portal container={container?.()}>
+        <TooltipPrimitive.Portal container={getContainer()}>
           <TooltipPrimitive.Content
             side={side}
             align={align}