@flikk/ui 1.0.0-beta.30 → 1.0.0-beta.31

package/dist/components/core/CommandPalette/CommandPalette.js

@@ -5,7 +5,7 @@ import { commandPaletteTheme } from './CommandPalette.theme.js';
 import { containerAnimations, overlayAnimations } from './CommandPalette.animations.js';
 import { cn } from '../../../utils/cn.js';
 import { useSurfaceElevation, SurfaceProvider, surfaceClasses } from '../../../theme/SurfaceContext.js';
-import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
+import { MagnifyingGlass } from '@phosphor-icons/react';
 import { CommandItem } from './CommandItem.js';
 import { Overlay } from '../../effects/Overlay/Overlay.js';
 import { ScrollArea } from '../ScrollArea/ScrollArea.js';
@@ -107,7 +107,7 @@ const findNextEnabledIndex = (currentIndex, direction, commands) => {
  * />
  * ```
  */
-const CommandPalette = React__default.forwardRef(({ isOpen, onClose, commands = [], placeholder = "Type a command or search...", emptyMessage = "No results found.", maxHeight = "400px", className = "", overlayClassName = "", theme: themeOverrides, grouped = false, onSearchChange, filterFunction = defaultFilterFunction, closeOnOverlayClick = true, closeOnEsc = true, footer, footerClassName, elevation, lift, }, ref) => {
+const CommandPalette = React__default.forwardRef(({ isOpen, onClose, commands = [], placeholder = "Type a command or search...", emptyMessage = "No results found.", maxHeight = "400px", className = "", overlayClassName = "", theme: themeOverrides, grouped = false, onSearchChange, filterFunction = defaultFilterFunction, closeOnOverlayClick = true, closeOnEsc = true, footer, footerClassName, elevation, lift, onCommandSelect, }, ref) => {
     // Grounded backdrop overlay: the palette covers the viewport over a backdrop, so it
     // paints a FIXED rung 5 regardless of where its JSX sits. Content inside lifts relative.
     const surfaceLevel = useSurfaceElevation({ baseRung: 5, ground: true, elevation, lift });
@@ -190,8 +190,9 @@ const CommandPalette = React__default.forwardRef(({ isOpen, onClose, commands =
         if (command.disabled)
             return;
         command.onSelect();
+        onCommandSelect === null || onCommandSelect === void 0 ? void 0 : onCommandSelect(command.id);
         onClose();
-    }, [onClose]);
+    }, [onClose, onCommandSelect]);
     // Keep refs in sync for keydown handler to avoid re-attaching listener
     const flatFilteredCommandsRef = useRef(flatFilteredCommands);
     flatFilteredCommandsRef.current = flatFilteredCommands;
@@ -258,7 +259,7 @@ const CommandPalette = React__default.forwardRef(({ isOpen, onClose, commands =
     return (jsx(Overlay, { ref: ref, isOpen: isOpen, onClose: onClose, closeOnOverlayClick: closeOnOverlayClick, closeOnEsc: closeOnEsc, position: "top", overlayClassName: cn(theme.overlay, overlayClassName), contentClassName: cn(surfaceClasses(surfaceLevel, { translucent: true, shadow: false }), theme.container, className), animations: {
             overlay: overlayAnimations,
             content: containerAnimations,
-        }, children: jsxs(SurfaceProvider, { level: surfaceLevel, children: [jsx("div", { className: theme.searchWrapper, children: jsxs("div", { className: "flex items-center gap-3", children: [jsx(MagnifyingGlassIcon, { className: "w-5 h-5 text-[var(--color-text-muted)]", strokeWidth: 2 }), jsx("input", { ref: searchInputRef, type: "text", className: theme.searchInput, placeholder: placeholder, value: searchValue, onChange: handleSearchChange, autoComplete: "off", autoCorrect: "off", spellCheck: false, "aria-label": "Search commands" })] }) }), jsx(ScrollArea, { ref: listContainerRef, type: "hover", className: "overscroll-contain px-1", style: {
+        }, children: jsxs(SurfaceProvider, { level: surfaceLevel, children: [jsx("div", { className: theme.searchWrapper, children: jsxs("div", { className: "flex items-center gap-3", children: [jsx(MagnifyingGlass, { className: "w-5 h-5 text-[var(--color-text-muted)]", weight: "bold" }), jsx("input", { ref: searchInputRef, type: "text", className: theme.searchInput, placeholder: placeholder, value: searchValue, onChange: handleSearchChange, autoComplete: "off", autoCorrect: "off", spellCheck: false, "aria-label": "Search commands" })] }) }), jsx(ScrollArea, { ref: listContainerRef, type: "hover", className: "overscroll-contain px-1", style: {
                         maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight,
                     }, children: jsx("div", { role: "listbox", "aria-label": "Commands", children: renderCommandsList() }) }), footer && (jsx("div", { className: cn(theme.footer, footerClassName), children: footer }))] }) }));
 });

package/dist/components/core/CommandPalette/CommandPalette.theme.js

@@ -16,15 +16,11 @@ const commandPaletteTheme = {
     searchWrapper: "border-b border-[var(--color-border)] px-4 py-3 " + "",
     searchInput: "w-full px-0 py-0 text-sm bg-transparent border-none outline-none " +
         "text-[var(--color-text-primary)] placeholder:text-[var(--color-text-placeholder)] " +
-        "focus:outline-none focus:ring-0 " +
-        // Dark mode — matches Input's controlBaseStyle text/placeholder tokens
-        "dark:text-[var(--color-text-primary)] dark:placeholder:text-[var(--color-neutral-500)]",
-    groupLabel: "px-4 py-1 text-xs font-semibold text-[var(--color-text-muted)]/50 uppercase " +
-        "dark:text-[var(--color-neutral-500)]",
+        "focus:outline-none focus:ring-0",
+    groupLabel: "px-4 py-1 text-xs font-semibold text-[var(--color-text-muted)]/50 uppercase",
     // Command rows render via the shared MenuItem primitive and use its default
     // styling (subtle highlight + standard padding) — no per-row theme here.
-    emptyState: "px-4 py-12 text-center text-sm text-[var(--color-text-muted)] " +
-        "dark:text-[var(--color-neutral-500)]",
+    emptyState: "px-4 py-12 text-center text-sm text-[var(--color-text-muted)]",
     footer: "border-t border-[var(--color-border)] px-4 py-2 text-xs text-[var(--color-text-muted)]font-medium",
 };
 

package/dist/components/core/CommandPalette/CommandPalette.types.d.ts

@@ -79,6 +79,8 @@ export interface CommandPaletteProps {
     elevation?: SurfaceElevation;
     /** `false` opts out of the relative lift — paints at the palette's base rung. */
     lift?: boolean;
+    /** Fired with the selected command's id, in addition to that command's own onSelect. */
+    onCommandSelect?: (id: string) => void;
 }
 /**
  * Theme overrides for the CommandPalette component

package/dist/components/core/ContextMenu/ContextMenuItem.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import React__default, { useCallback } from 'react';
-import { CheckIcon } from '@heroicons/react/24/outline';
+import { Check } from '@phosphor-icons/react';
 import { useContextMenuContext } from './ContextMenuContext.js';
 import { MenuItem } from '../MenuItem/MenuItem.js';
 
@@ -22,7 +22,7 @@ const ContextMenuItem = React__default.forwardRef(({ children, className, checke
     // with icon rows AND the label never shifts when toggled — a `size-4` spacer holds
     // the gutter while unchecked.
     const isCheckable = checked !== undefined;
-    const checkIndicator = isCheckable ? (checked ? (jsx(CheckIcon, { className: theme.itemCheckedStyle, "aria-hidden": "true" })) : (jsx("span", { className: "size-4 shrink-0", "aria-hidden": "true" }))) : null;
+    const checkIndicator = isCheckable ? (checked ? (jsx(Check, { className: theme.itemCheckedStyle, "aria-hidden": "true" })) : (jsx("span", { className: "size-4 shrink-0", "aria-hidden": "true" }))) : null;
     const resolvedStartContent = checkIndicator || startContent ? (jsxs(Fragment, { children: [checkIndicator, startContent] })) : undefined;
     // Build end content: user's endContent OR shortcut display
     const resolvedEndContent = endContent ||

package/dist/components/core/ContextMenu/ContextMenuSubTrigger.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React__default, { useRef, useCallback } from 'react';
-import { ChevronRightIcon } from '@heroicons/react/24/outline';
+import { CaretRight } from '@phosphor-icons/react';
 import { cn } from '../../../utils/cn.js';
 import { useContextMenuContext, useSubMenuContext } from './ContextMenuContext.js';
 
@@ -54,7 +54,7 @@ const ContextMenuSubTrigger = React__default.forwardRef(({ children, className,
             ref.current = el;
         }
     }, [ref, triggerRef]);
-    return (jsxs("div", { ref: handleRef, role: "menuitem", "aria-haspopup": "true", "aria-expanded": isOpen, "aria-disabled": disabled, "data-state": isOpen ? "open" : "closed", "data-disabled": disabled, tabIndex: disabled ? undefined : -1, className: cn(theme.subTriggerStyle, theme.itemFocusStyle, className), onMouseEnter: handleMouseEnter, onKeyDown: handleKeyDown, ...props, children: [startContent && (jsx("div", { className: "flex items-center justify-center flex-shrink-0", children: startContent })), jsx("span", { className: "flex-1 truncate", children: children }), jsx(ChevronRightIcon, { className: "absolute right-2 top-1/2 -translate-y-1/2 size-3 text-[var(--color-text-secondary)]", "aria-hidden": "true", strokeWidth: 2 })] }));
+    return (jsxs("div", { ref: handleRef, role: "menuitem", "aria-haspopup": "true", "aria-expanded": isOpen, "aria-disabled": disabled, "data-state": isOpen ? "open" : "closed", "data-disabled": disabled, tabIndex: disabled ? undefined : -1, className: cn(theme.subTriggerStyle, theme.itemFocusStyle, className), onMouseEnter: handleMouseEnter, onKeyDown: handleKeyDown, ...props, children: [startContent && (jsx("div", { className: "flex items-center justify-center flex-shrink-0", children: startContent })), jsx("span", { className: "flex-1 truncate", children: children }), jsx(CaretRight, { className: "absolute right-2 top-1/2 -translate-y-1/2 size-3 text-[var(--color-text-secondary)]", "aria-hidden": "true", weight: "bold" })] }));
 });
 ContextMenuSubTrigger.displayName = "ContextMenuSubTrigger";
 

package/dist/components/core/Drawer/Drawer.theme.js

@@ -8,12 +8,15 @@ const drawerTheme = {
         "flex flex-col overflow-hidden rounded-[var(--drawer-radius)] " +
         "dark:ring-white/5",
     inner: "h-full flex flex-col",
-    header: "flex items-start justify-between p-4 border-b border-[var(--color-border)] shrink-0 text-[var(--color-text-primary)] gap-4",
+    header: "flex items-start justify-between px-[var(--drawer-px)] py-[var(--drawer-py)] border-b border-[var(--color-border)] shrink-0 text-[var(--color-text-primary)] gap-4",
     headerContent: "flex items-start gap-3 flex-1 min-w-0",
-    title: "text-base font-semibold leading-6 text-[var(--color-text-primary)]",
+    title: "text-[length:var(--drawer-title-size)] font-semibold leading-6 text-[var(--color-text-primary)]",
     subtitle: "text-sm text-[var(--color-text-secondary)] mt-0.5",
-    body: "flex-1 overflow-y-auto p-4",
-    footer: "flex items-center justify-end gap-3 p-4 py-3 border-t border-[var(--color-border)] shrink-0 " +
+    body: "flex-1 overflow-y-auto px-[var(--drawer-px)] py-[var(--drawer-py)]",
+    // Footer's vertical padding is deliberately lighter than header/body —
+    // proportional calc() off --drawer-py (today's ratio, 12/16) so it stays
+    // in that same relationship under a themed override; horizontal matches.
+    footer: "flex items-center justify-end gap-3 px-[var(--drawer-px)] py-[calc(var(--drawer-py)*0.75)] border-t border-[var(--color-border)] shrink-0 " +
         "",
 };
 // Position variants with margin support

package/dist/components/core/Drawer/DrawerHeader.js

@@ -4,12 +4,12 @@ import { cn } from '../../../utils/cn.js';
 import { useDrawerContext } from './DrawerContext.js';
 import { Button } from '../Button/Button.js';
 import 'react';
-import { XMarkIcon } from '@heroicons/react/24/outline';
+import { X } from '@phosphor-icons/react';
 
 const DrawerHeader = ({ children, icon, showCloseButton, className, ...props }) => {
     const { onClose, showCloseButton: contextShowCloseButton, theme, } = useDrawerContext();
     const shouldShowCloseButton = showCloseButton !== null && showCloseButton !== void 0 ? showCloseButton : contextShowCloseButton;
-    return (jsxs("div", { className: cn(theme.header, className), ...props, children: [jsxs("div", { className: cn(theme.headerContent), children: [icon && (jsx("div", { className: "flex-shrink-0 text-[var(--color-text-secondary)]", children: icon })), jsx("div", { className: "flex-1 min-w-0", children: children })] }), shouldShowCloseButton && (jsx(Button, { color: "neutral", variant: "outline", iconOnly: true, size: "sm", onClick: onClose, "aria-label": "Close drawer", className: "rounded-full shrink-0", children: jsx(XMarkIcon, { className: "size-4" }) }))] }));
+    return (jsxs("div", { className: cn(theme.header, className), ...props, children: [jsxs("div", { className: cn(theme.headerContent), children: [icon && (jsx("div", { className: "flex-shrink-0 text-[var(--color-text-secondary)]", children: icon })), jsx("div", { className: "flex-1 min-w-0", children: children })] }), shouldShowCloseButton && (jsx(Button, { color: "mono", variant: "outline", iconOnly: true, size: "sm", onClick: onClose, "aria-label": "Close drawer", className: "rounded-full shrink-0", children: jsx(X, { className: "size-4" }) }))] }));
 };
 DrawerHeader.displayName = "Drawer.Header";
 

package/dist/components/core/Dropdown/Dropdown.theme.js

@@ -4,7 +4,9 @@ const dropdownTheme = {
     // Menu container - similar to Popover but with menu-specific styling.
     // bg + shadow come from the relative-elevation engine (surfaceClasses) at runtime so
     // a nested menu lifts above its host; keep the frosted blur + border + radius here.
-    menuStyle: "min-w-[200px] max-h-[400px] overflow-y-auto rounded-[var(--dropdown-radius)] border border-[var(--color-border)] backdrop-blur-md focus:outline-none flex disabled:cursor-not-allowed gap-0.5",
+    // max-w caps runaway labels so MenuItem's `truncate` can engage (an unbounded
+    // menu can never ellipsize — it just stretches to fit the longest row).
+    menuStyle: "min-w-[200px] max-w-[20rem] max-h-[400px] overflow-y-auto rounded-[var(--dropdown-radius)] border border-[var(--color-border)] backdrop-blur-md focus:outline-none flex disabled:cursor-not-allowed gap-0.5",
     // Delegate item styles to shared MenuItem theme
     itemBaseStyle: menuItemTheme.baseStyle,
     itemDangerStyle: menuItemTheme.dangerStyle,

package/dist/components/core/Dropdown/DropdownItem.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import React__default, { useCallback } from 'react';
-import { CheckIcon } from '@heroicons/react/16/solid';
+import { Check } from '@phosphor-icons/react';
 import { cn } from '../../../utils/cn.js';
 import { useDropdownContext } from './DropdownContext.js';
 import { MenuItem } from '../MenuItem/MenuItem.js';
@@ -63,7 +63,7 @@ const DropdownItem = React__default.forwardRef(({ itemKey, children, className,
             : "menuitem";
     // Build end content: user's endContent OR selection checkmark
     const resolvedEndContent = endContent ||
-        (selectionMode !== "none" ? (jsx("div", { className: cn("flex items-center justify-center flex-shrink-0 w-5 h-5"), children: isSelected && (jsx(CheckIcon, { className: "size-4 text-[var(--color-text-secondary)]" })) })) : undefined);
+        (selectionMode !== "none" ? (jsx("div", { className: cn("flex items-center justify-center flex-shrink-0 w-5 h-5"), children: isSelected && (jsx(Check, { className: "size-4 text-[var(--color-text-secondary)]" })) })) : undefined);
     return (jsx(MenuItem, { ref: ref, role: itemRole, disabled: disabled, isDanger: isDanger, startContent: startContent, endContent: resolvedEndContent, subtitle: subtitle, shortcut: shortcut, onActivate: handleActivate, selected: isSelected, ...(selectionMode !== "none" ? { "aria-checked": isSelected } : {}), className: className, theme: {
             baseStyle: theme.itemBaseStyle,
             dangerStyle: theme.itemDangerStyle,

package/dist/components/core/Dropdown/DropdownTrigger.js

@@ -13,8 +13,14 @@ import { useDropdownContext } from './DropdownContext.js';
  * `data-state` (idle/loading), clobbering the open flag — `aria-expanded` is the reliable hook.
  *
  * Injected FIRST in the className merge, so a consumer's own `className` on the trigger child
- * always wins (shadcn override model). `hover` + `dark:hover` are both set because a Button
- * variant declares each as a separate variant, and twMerge only dedupes matching ones.
+ * always wins (shadcn override model).
+ *
+ * 🔴 Applied ONLY to non-`Button` triggers. A `Button` is a complete, self-styled component
+ * (its own hover/active/variant states), and a *filled* Button hovers via a `brightness` filter
+ * rather than a `hover:bg-*`, so this translucent tint would have nothing to override and would
+ * replace the Button's solid fill on hover/open (a filled trigger going see-through). Buttons
+ * therefore keep their own styling; this convenience tint is for plain/custom trigger elements
+ * that have no interaction state of their own.
  */
 const triggerInteractionStyle = "hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)] " +
     "dark:hover:bg-[var(--color-surface-hover)] " +
@@ -23,12 +29,17 @@ const triggerInteractionStyle = "hover:bg-[var(--color-surface-hover)] hover:tex
  * DropdownTrigger component - wraps the trigger element
  */
 const DropdownTrigger = ({ children, className }) => {
-    var _a;
+    var _a, _b;
     const { isOpen, onOpenChange, triggerRef, menuId } = useDropdownContext();
     const handleClick = useCallback(() => {
         onOpenChange(!isOpen);
     }, [isOpen, onOpenChange]);
     const childElement = children;
+    // A Button trigger brings its own complete interaction styling — don't inject
+    // the default tint over it (it would override a filled Button's fill). See the
+    // note on triggerInteractionStyle above.
+    const isButtonChild = React__default.isValidElement(childElement) &&
+        ((_a = childElement.type) === null || _a === void 0 ? void 0 : _a.displayName) === "Button";
     // Clone the child element and add our props
     const trigger = React__default.cloneElement(childElement, {
         ref: (el) => {
@@ -56,8 +67,8 @@ const DropdownTrigger = ({ children, className }) => {
         "aria-controls": isOpen ? menuId : undefined,
         "data-state": isOpen ? "open" : "closed",
         // Default interaction style first → child's own className (and the Trigger's
-        // `className` prop) override it.
-        className: cn(triggerInteractionStyle, (_a = childElement.props) === null || _a === void 0 ? void 0 : _a.className, className),
+        // `className` prop) override it. Skipped for Button children (they self-style).
+        className: cn(!isButtonChild && triggerInteractionStyle, (_b = childElement.props) === null || _b === void 0 ? void 0 : _b.className, className),
     });
     return trigger;
 };

package/dist/components/core/HeroCard/HeroCard.theme.js

@@ -1,6 +1,9 @@
 const heroCardTheme = {
-    // Shares Card's radius token; gradient runs on the primary scale so it follows the app theme.
-    baseStyle: "relative overflow-hidden rounded-[calc(var(--card-radius)*2)] p-10 text-[var(--color-primary-contrast)] bg-gradient-to-br from-[var(--color-primary-600)] via-[var(--color-primary-700)] to-[var(--color-primary-500)] ring-4 ring-[var(--color-primary)]/20 ",
+    // Shares --card-radius (HeroCard is a Card presentation, not a distinct
+    // container) — a consumer overrides per-instance via `className`, same as
+    // every other component (shadcn override pattern).
+    // Gradient runs on the primary scale so it follows the app theme.
+    baseStyle: "relative overflow-hidden rounded-[var(--card-radius)] p-10 text-[var(--color-primary-contrast)] bg-gradient-to-br from-[var(--color-primary-600)] via-[var(--color-primary-700)] to-[var(--color-primary-500)] ring-4 ring-[var(--color-primary)]/20 ",
     imageStyle: "absolute inset-0 z-0 pointer-events-none bg-cover",
     contentStyle: "relative z-10",
 };

package/dist/components/core/Kbd/Kbd.theme.js

@@ -3,9 +3,11 @@
  */
 const kbdTheme = {
     baseStyle: 'inline-flex items-center justify-center leading-none font-sans font-medium rounded-[calc(var(--radius-base)*0.75)] bg-[var(--color-surface-raised)] border border-[var(--color-border)] text-[var(--color-text-secondary)]',
+    // px tokenised (--kbd-px-*) so a theme can widen keycaps; height/min-width
+    // stay the fixed keycap size (h-5/h-6) and radius derives from --radius-base.
     sizes: {
-        sm: 'text-xs px-1 min-w-5 h-5',
-        md: 'text-xs px-1.5 min-w-6 h-6',
+        sm: 'text-xs px-[var(--kbd-px-sm)] min-w-5 h-5',
+        md: 'text-xs px-[var(--kbd-px-md)] min-w-6 h-6',
     },
     separatorStyle: 'text-[var(--color-text-muted)] text-xs',
 };

package/dist/components/core/Link/Link.js

@@ -18,14 +18,16 @@ const LINK_BASE = "relative inline-flex items-center justify-center gap-2 bg-tra
     "focus:outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2";
 // Animated underline — a bottom-anchored line that scales in from the left on
 // hover/focus. `bg-current` inherits each color variant's text tint.
-const LINK_UNDERLINE = "pointer-events-none absolute bottom-0 left-0 h-px w-full bg-current";
+// `-bottom-px` offsets the line 1px below the text so it doesn't crowd the
+// descenders — the pseudo-underline equivalent of `text-underline-offset`.
+const LINK_UNDERLINE = "pointer-events-none absolute -bottom-px left-0 h-px w-full bg-current";
 const UNDERLINE_VARIANTS = { rest: { scaleX: 0 }, hover: { scaleX: 1 } };
 // Text tint per semantic color — the one thing `color` drives.
 const LINK_COLORS = {
-    neutral: "text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] " +
+    mono: "text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] " +
         "focus-visible:outline-[var(--color-text-secondary)] dark:text-[var(--color-text-primary)]",
-    primary: "text-[var(--color-primary-600)] focus-visible:outline-[var(--color-primary-600)] " +
-        "dark:text-[var(--color-primary-300)]",
+    primary: "text-[var(--color-primary)]  " +
+        "dark:text-[var(--color-primary)]",
     success: "text-[var(--color-success-600)] focus-visible:outline-[var(--color-success-600)] " +
         "dark:text-[var(--color-success-300)]",
     warning: "text-[var(--color-warning-600)] focus-visible:outline-[var(--color-warning-600)] " +

package/dist/components/core/Message/Message.js

@@ -7,7 +7,7 @@ import { messageTheme } from './Message.theme.js';
 import { Avatar } from '../Avatar/Avatar.js';
 import { Button } from '../Button/Button.js';
 import { motion } from 'motion/react';
-import { DocumentDuplicateIcon, ArrowPathIcon } from '@heroicons/react/24/outline';
+import { Copy, ArrowsClockwise } from '@phosphor-icons/react';
 import { MessageContext } from './MessageContext.js';
 import { MessageAvatar } from './MessageAvatar.js';
 import { MessageBody } from './MessageBody.js';
@@ -119,7 +119,7 @@ const MessageRoot = React__default.forwardRef(({ role, variant: variantProp, con
     // Backward compatibility
     variant === "sender" && customTheme.senderTimestampStyle, variant === "receiver" && customTheme.receiverTimestampStyle, variant === "system" && customTheme.systemTimestampStyle);
     // Build default action buttons if needed
-    const defaultActionButtons = shouldShowDefaultActions ? (jsxs("div", { className: cn(messageTheme.actionsContainerStyle, customTheme.actionsContainerStyle), children: [onCopy && (jsx(Button, { variant: "ghost", color: "neutral", size: "sm", iconOnly: true, onClick: onCopy, "aria-label": "Copy message", className: "opacity-40 hover:opacity-100", children: jsx(DocumentDuplicateIcon, { className: "size-4" }) })), onRegenerate && (jsx(Button, { variant: "ghost", color: "neutral", size: "sm", iconOnly: true, onClick: onRegenerate, "aria-label": "Regenerate response", className: "opacity-40 hover:opacity-100", children: jsx(ArrowPathIcon, { className: "size-4" }) }))] })) : undefined;
+    const defaultActionButtons = shouldShowDefaultActions ? (jsxs("div", { className: cn(messageTheme.actionsContainerStyle, customTheme.actionsContainerStyle), children: [onCopy && (jsx(Button, { variant: "ghost", color: "mono", size: "sm", iconOnly: true, onClick: onCopy, "aria-label": "Copy message", className: "opacity-40 hover:opacity-100", children: jsx(Copy, { className: "size-4" }) })), onRegenerate && (jsx(Button, { variant: "ghost", color: "mono", size: "sm", iconOnly: true, onClick: onRegenerate, "aria-label": "Regenerate response", className: "opacity-40 hover:opacity-100", children: jsx(ArrowsClockwise, { className: "size-4" }) }))] })) : undefined;
     // Use custom actions if provided, otherwise use default actions
     const finalActions = actions !== null && actions !== void 0 ? actions : defaultActionButtons;
     // Use TypeWriter for streaming receiver/assistant messages with string content (props API)

package/dist/components/core/Message/Message.theme.js

@@ -4,14 +4,14 @@
  */
 const messageTheme = {
     // Shared base styles (apply to all variants)
-    bubbleBaseStyle: "max-w-[80%] sm:max-w-[85%] rounded-[calc(var(--radius-base)*1.5)] px-3 py-2 w-fit min-w-fit h-fit",
+    bubbleBaseStyle: "max-w-[80%] sm:max-w-[85%] rounded-[var(--message-bubble-radius)] px-3 py-2 w-fit min-w-fit h-fit",
     containerBaseStyle: "flex items-start gap-3 h-fit text-sm",
-    timestampStyle: "text-xs text-[var(--color-text-placeholder)] dark:text-[var(--color-neutral-500)]",
+    timestampStyle: "text-xs text-[var(--color-text-placeholder)]",
     // Variant-specific modifiers (only differences)
     variants: {
         sender: {
             containerModifier: "flex-row-reverse", // Reverse direction for right alignment
-            bubbleStyle: "bg-[var(--color-neutral-900)] text-[var(--color-neutral-100)] " +
+            bubbleStyle: "bg-[var(--color-mono-900)] text-[var(--color-mono-100)] " +
                 "rounded-tr-xs  " +
                 // Dark mode - slightly darker gradient for better contrast
                 " ",
@@ -22,13 +22,12 @@ const messageTheme = {
             bubbleStyle: " text-[var(--color-text-secondary)] rounded-tl-xs py-0 px-0 " +
                 " " +
                 // Dark mode - dark background with lighter text
-                " " +
                 "",
             timestampModifier: "text-left pl-1",
         },
         system: {
             containerModifier: "justify-center", // Center alignment
-            bubbleStyle: "bg-[var(--color-background)] text-[var(--color-text-muted)]/80 rounded-[calc(var(--radius-base)*0.75)] px-1 py-0.5 " +
+            bubbleStyle: "bg-[var(--color-background)] text-[var(--color-text-muted)]/80 rounded-[min(calc(var(--radius-base)*0.75),var(--surface-radius-cap-xs))] px-1 py-0.5 " +
                 "text-xs border-none " +
                 // Dark mode
                 "",
@@ -36,8 +35,7 @@ const messageTheme = {
         },
     },
     // Feature styles (streaming, actions)
-    streamingIndicatorStyle: "flex items-center gap-1 text-[var(--color-text-placeholder)] text-xs " +
-        "dark:text-[var(--color-neutral-500)]",
+    streamingIndicatorStyle: "flex items-center gap-1 text-[var(--color-text-placeholder)] text-xs",
     actionsContainerStyle: "flex items-start gap-3",
     // Status styles
     statusStyle: "flex items-center gap-1 text-xs mt-1",

package/dist/components/core/Message/MessageAudio.js

@@ -3,10 +3,10 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { cn } from '../../../utils/cn.js';
 import 'react';
 import { messageTheme } from './Message.theme.js';
-import { PlayIcon } from '@heroicons/react/24/solid';
+import { Play } from '@phosphor-icons/react';
 
 const MessageAudio = ({ duration, name, onClick, className, }) => {
-    return (jsxs("div", { className: cn(messageTheme.audioStyle, className), children: [jsx("button", { onClick: onClick, className: "flex items-center justify-center size-8 rounded-full bg-[var(--color-primary)] text-[var(--color-primary-contrast)] flex-shrink-0 cursor-pointer", "aria-label": name ? `Play ${name}` : "Play audio", type: "button", children: jsx(PlayIcon, { className: "size-4 ml-0.5" }) }), jsxs("div", { className: "flex flex-col min-w-0 flex-1", children: [name && (jsx("span", { className: "font-medium text-[var(--color-text-primary)] truncate", children: name })), duration && (jsx("span", { className: "text-xs text-[var(--color-text-muted)]", children: duration }))] })] }));
+    return (jsxs("div", { className: cn(messageTheme.audioStyle, className), children: [jsx("button", { onClick: onClick, className: "flex items-center justify-center size-8 rounded-full bg-[var(--color-primary)] text-[var(--color-primary-contrast)] flex-shrink-0 cursor-pointer", "aria-label": name ? `Play ${name}` : "Play audio", type: "button", children: jsx(Play, { className: "size-4 ml-0.5" }) }), jsxs("div", { className: "flex flex-col min-w-0 flex-1", children: [name && (jsx("span", { className: "font-medium text-[var(--color-text-primary)] truncate", children: name })), duration && (jsx("span", { className: "text-xs text-[var(--color-text-muted)]", children: duration }))] })] }));
 };
 
 export { MessageAudio };

package/dist/components/core/Message/MessageFile.js

@@ -3,10 +3,10 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { cn } from '../../../utils/cn.js';
 import 'react';
 import { messageTheme } from './Message.theme.js';
-import { DocumentIcon, ArrowDownTrayIcon } from '@heroicons/react/24/outline';
+import { File, DownloadSimple } from '@phosphor-icons/react';
 
 const MessageFile = ({ name = "File", url, size, onClick, className, }) => {
-    const content = (jsxs("div", { className: cn(messageTheme.fileStyle, className), onClick: !url ? onClick : undefined, role: !url && onClick ? "button" : undefined, tabIndex: !url && onClick ? 0 : undefined, children: [jsx(DocumentIcon, { className: "size-5 flex-shrink-0 text-[var(--color-text-muted)]" }), jsxs("div", { className: "flex flex-col min-w-0 flex-1", children: [jsx("span", { className: "font-medium text-[var(--color-text-primary)] truncate", children: name }), size && (jsx("span", { className: "text-xs text-[var(--color-text-muted)]", children: size }))] }), url && (jsx(ArrowDownTrayIcon, { className: "size-4 flex-shrink-0 text-[var(--color-text-muted)]" }))] }));
+    const content = (jsxs("div", { className: cn(messageTheme.fileStyle, className), onClick: !url ? onClick : undefined, role: !url && onClick ? "button" : undefined, tabIndex: !url && onClick ? 0 : undefined, children: [jsx(File, { className: "size-5 flex-shrink-0 text-[var(--color-text-muted)]" }), jsxs("div", { className: "flex flex-col min-w-0 flex-1", children: [jsx("span", { className: "font-medium text-[var(--color-text-primary)] truncate", children: name }), size && (jsx("span", { className: "text-xs text-[var(--color-text-muted)]", children: size }))] }), url && (jsx(DownloadSimple, { className: "size-4 flex-shrink-0 text-[var(--color-text-muted)]" }))] }));
     if (url) {
         return (jsx("a", { href: url, download: true, className: "no-underline", "aria-label": `Download ${name}`, children: content }));
     }

package/dist/components/core/Message/MessageLink.js

@@ -2,10 +2,10 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { cn } from '../../../utils/cn.js';
 import 'react';
 import { messageTheme } from './Message.theme.js';
-import { LinkIcon } from '@heroicons/react/16/solid';
+import { Link } from '@phosphor-icons/react';
 
 const MessageLink = ({ url, thumbnailUrl, title, description, domain, className, }) => {
-    const content = (jsxs("div", { className: cn(messageTheme.linkStyle, className), children: [thumbnailUrl && (jsx("img", { src: thumbnailUrl, alt: title || "Link preview", className: "w-full h-32 object-cover" })), jsxs("div", { className: "px-3 py-2.5 flex flex-col gap-0.5", children: [title && (jsx("span", { className: "font-medium text-[var(--color-text-primary)] line-clamp-1", children: title })), description && (jsx("span", { className: "text-[var(--color-text-muted)] line-clamp-2", children: description })), domain && (jsxs("span", { className: "flex items-center gap-1 text-xs text-[var(--color-text-placeholder)] mt-0.5", children: [jsx(LinkIcon, { className: "size-3" }), domain] }))] })] }));
+    const content = (jsxs("div", { className: cn(messageTheme.linkStyle, className), children: [thumbnailUrl && (jsx("img", { src: thumbnailUrl, alt: title || "Link preview", className: "w-full h-32 object-cover" })), jsxs("div", { className: "px-3 py-2.5 flex flex-col gap-0.5", children: [title && (jsx("span", { className: "font-medium text-[var(--color-text-primary)] line-clamp-1", children: title })), description && (jsx("span", { className: "text-[var(--color-text-muted)] line-clamp-2", children: description })), domain && (jsxs("span", { className: "flex items-center gap-1 text-xs text-[var(--color-text-placeholder)] mt-0.5", children: [jsx(Link, { className: "size-3" }), domain] }))] })] }));
     if (url) {
         return (jsx("a", { href: url, target: "_blank", rel: "noopener noreferrer", className: "no-underline", "aria-label": title ? `Open ${title}` : "Open link", children: content }));
     }

package/dist/components/core/Message/MessageStatusIndicator.js

@@ -4,20 +4,20 @@ import { cn } from '../../../utils/cn.js';
 import 'react';
 import { messageTheme } from './Message.theme.js';
 import { Link } from '../Link/Link.js';
-import { ExclamationCircleIcon, CheckIcon, ClockIcon } from '@heroicons/react/16/solid';
+import { WarningCircle, Check, Clock } from '@phosphor-icons/react';
 
-const DoubleCheck = ({ className }) => (jsxs("span", { className: cn("inline-flex items-center -space-x-2", className), children: [jsx(CheckIcon, { className: "size-3.5" }), jsx(CheckIcon, { className: "size-3.5" })] }));
+const DoubleCheck = ({ className }) => (jsxs("span", { className: cn("inline-flex items-center -space-x-2", className), children: [jsx(Check, { className: "size-3.5" }), jsx(Check, { className: "size-3.5" })] }));
 const MessageStatusIndicator = ({ status, readAt, onRetry, className, }) => {
     if (!status)
         return null;
     const statusConfig = {
         sending: {
-            icon: jsx(ClockIcon, { className: "size-3.5" }),
+            icon: jsx(Clock, { className: "size-3.5" }),
             style: messageTheme.statusSending,
             label: "Sending",
         },
         sent: {
-            icon: jsx(CheckIcon, { className: "size-3.5" }),
+            icon: jsx(Check, { className: "size-3.5" }),
             style: messageTheme.statusSent,
             label: "Sent",
         },
@@ -34,7 +34,7 @@ const MessageStatusIndicator = ({ status, readAt, onRetry, className, }) => {
                 : "Read",
         },
         failed: {
-            icon: jsx(ExclamationCircleIcon, { className: "size-3.5" }),
+            icon: jsx(WarningCircle, { className: "size-3.5" }),
             style: messageTheme.statusFailed,
             label: "Failed",
         },

package/dist/components/core/Modal/Modal.d.ts

@@ -1,7 +1,7 @@
 import { ModalProps } from "./Modal.types";
 export { ModalContext, useModalContext } from "./ModalContext";
 export declare const Modal: {
-    ({ isOpen, onClose, size, closeOnOverlayClick, closeOnEsc, showCloseButton, role, children, className, theme: themeOverrides, elevation, lift, ...props }: ModalProps): import("react/jsx-runtime").JSX.Element;
+    ({ isOpen, onClose, size, closeOnOverlayClick, closeOnEsc, showCloseButton, role, children, className, theme: themeOverrides, elevation, lift, darkMode, ...props }: ModalProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 } & {
     Header: {

package/dist/components/core/Modal/Modal.js

@@ -14,7 +14,7 @@ import { ModalBody } from './ModalBody.js';
 import { ModalFooter } from './ModalFooter.js';
 import { useSurfaceElevation, SurfaceProvider, surfaceClasses } from '../../../theme/SurfaceContext.js';
 
-const ModalRoot = ({ isOpen, onClose, size = "md", closeOnOverlayClick = true, closeOnEsc = true, showCloseButton = true, role = "dialog", children, className, theme: themeOverrides, elevation, lift, ...props }) => {
+const ModalRoot = ({ isOpen, onClose, size = "md", closeOnOverlayClick = true, closeOnEsc = true, showCloseButton = true, role = "dialog", children, className, theme: themeOverrides, elevation, lift, darkMode = false, ...props }) => {
     // Grounded backdrop overlay: a Modal covers the viewport, so it paints a FIXED rung 4
     // regardless of where its <Modal> JSX sits (a Modal declared inside a Card must not
     // inherit the Card's rung). Content inside still lifts relative to the modal.
@@ -54,7 +54,7 @@ const ModalRoot = ({ isOpen, onClose, size = "md", closeOnOverlayClick = true, c
         titleId,
         subtitleId,
     }), [isOpen, onClose, size, isSizeToken, closeOnOverlayClick, closeOnEsc, showCloseButton, theme, isBodyScrollable, setIsBodyScrollable, titleId, subtitleId]);
-    return (jsx(Overlay, { isOpen: isOpen, onClose: onClose, closeOnOverlayClick: closeOnOverlayClick, closeOnEsc: closeOnEsc, position: "center", role: role, ariaModal: true, ariaLabelledBy: titleId, ariaDescribedBy: subtitleId, contentClassName: cn(surfaceClasses(surfaceLevel, { translucent: true, shadow: false }), theme.container, isSizeToken ? modalSizeVariants[size] : size, className), animations: {
+    return (jsx(Overlay, { isOpen: isOpen, onClose: onClose, closeOnOverlayClick: closeOnOverlayClick, closeOnEsc: closeOnEsc, position: "center", role: role, ariaModal: true, ariaLabelledBy: titleId, ariaDescribedBy: subtitleId, contentClassName: cn(surfaceClasses(surfaceLevel, { translucent: true, shadow: false }), theme.container, isSizeToken ? modalSizeVariants[size] : size, darkMode && "dark", className), animations: {
             overlay: modalOverlayAnimations,
             content: modalContentAnimations,
         }, ...props, children: jsx(ModalContext.Provider, { value: contextValue, children: jsx(SurfaceProvider, { level: surfaceLevel, children: children }) }) }));

package/dist/components/core/Modal/Modal.theme.js

@@ -4,12 +4,17 @@ const modalTheme = {
     // bg comes from the relative-elevation engine (surfaceClasses) at runtime so a modal
     // lifts above its host substrate; keep the dramatic shadow + ring + border + radius here.
     container: "relative w-full max-h-[calc(100vh-2rem)] rounded-[var(--modal-radius)] shadow-2xl shadow-black/30 flex flex-col my-4 min-h-0 overflow-hidden ring-6 !ring-white/10 border border-[var(--color-border)]",
-    header: "flex items-start justify-between p-4 pb-0 shrink-0 border-b border-transparent gap-6 relative",
+    header: "flex items-start justify-between px-[var(--modal-px)] pt-[var(--modal-py)] pb-0 shrink-0 border-b border-transparent gap-6 relative",
     headerContent: "flex flex-col items-start gap-2 flex-1",
-    title: "text-base leading-6 font-semibold text-[var(--color-text-primary)]",
+    title: "text-[length:var(--modal-title-size)] leading-6 font-semibold text-[var(--color-text-primary)]",
     subtitle: "text-sm text-[var(--color-text-secondary)] mt-0.5",
-    body: "flex-1 overflow-y-auto p-4 pb-3",
-    footer: "flex items-center justify-end gap-2 p-3 py-2 border-t border-transparent",
+    // pb-[...*0.75] is the gap before the footer — proportional to --modal-py
+    // (today's ratio, 12/16) so a themed --modal-py increase widens it too.
+    body: "flex-1 overflow-y-auto px-[var(--modal-px)] pt-[var(--modal-py)] pb-[calc(var(--modal-py)*0.75)]",
+    // Footer is deliberately lighter/tighter than header/body — expressed as a
+    // proportional calc() off the same tokens (today's ratios: 0.75x/0.5x) so
+    // that relationship survives a themed --modal-px/--modal-py override.
+    footer: "flex items-center justify-end gap-2 px-[calc(var(--modal-px)*0.75)] py-[calc(var(--modal-py)*0.5)] border-t border-transparent",
 };
 // Size variants for the modal container
 const modalSizeVariants = {

package/dist/components/core/Modal/ModalHeader.js

@@ -4,12 +4,12 @@ import { cn } from '../../../utils/cn.js';
 import { useModalContext } from './ModalContext.js';
 import { Button } from '../Button/Button.js';
 import 'react';
-import { XMarkIcon } from '@heroicons/react/24/outline';
+import { X } from '@phosphor-icons/react';
 
 const ModalHeader = ({ children, icon, showCloseButton, className, ...props }) => {
     const { onClose, showCloseButton: contextShowCloseButton, theme, isBodyScrollable, } = useModalContext();
     const shouldShowCloseButton = showCloseButton !== null && showCloseButton !== void 0 ? showCloseButton : contextShowCloseButton;
-    return (jsxs("div", { className: cn(theme.header, isBodyScrollable && "border-[var(--color-border)] relative", className), ...props, children: [jsxs("div", { className: cn(theme.headerContent), children: [icon && (jsx("div", { className: "flex-shrink-0 text-[var(--color-text-secondary)]", children: icon })), jsx("div", { className: "flex-1", children: children })] }), shouldShowCloseButton && (jsx("div", { className: "", children: jsx(Button, { color: "neutral", variant: "outline", iconOnly: true, size: "sm", onClick: onClose, "aria-label": "Close modal", className: "rounded-full shrink-0", children: jsx(XMarkIcon, { className: "size-4" }) }) }))] }));
+    return (jsxs("div", { className: cn(theme.header, isBodyScrollable && "border-[var(--color-border)] relative", className), ...props, children: [jsxs("div", { className: cn(theme.headerContent), children: [icon && (jsx("div", { className: "flex-shrink-0 text-[var(--color-text-secondary)]", children: icon })), jsx("div", { className: "flex-1", children: children })] }), shouldShowCloseButton && (jsx("div", { className: "", children: jsx(Button, { color: "mono", variant: "outline", iconOnly: true, size: "sm", onClick: onClose, "aria-label": "Close modal", className: "rounded-full shrink-0", children: jsx(X, { className: "size-4" }) }) }))] }));
 };
 ModalHeader.displayName = "Modal.Header";
 

package/dist/components/core/ModalStack/ModalStackModal.js

@@ -5,7 +5,7 @@ import { cn } from '../../../utils/cn.js';
 import '../Modal/Modal.js';
 import { modalTheme, modalSizeVariants } from '../Modal/Modal.theme.js';
 import { SurfaceProvider, surfaceClasses } from '../../../theme/SurfaceContext.js';
-import { ArrowLeftIcon } from '@heroicons/react/24/outline';
+import { ArrowLeft } from '@phosphor-icons/react';
 import { modalStackTheme } from './ModalStack.theme.js';
 import { Link } from '../Link/Link.js';
 import { ModalContext } from '../Modal/ModalContext.js';
@@ -47,7 +47,7 @@ const ModalStackModal = ({ size = "md", showCloseButton = true, showBackButton =
         titleId,
         subtitleId,
     }), [closeHandler, size, isSizeToken, showCloseButton, theme, isBodyScrollable, setIsBodyScrollable, titleId, subtitleId]);
-    return (jsx(ModalContext.Provider, { value: contextValue, children: jsx("div", { className: cn(surfaceClasses(surfaceLevel, { translucent: true, shadow: false }), theme.container, modalSizeVariants[size], className), role: "dialog", "aria-modal": "true", "aria-labelledby": titleId, "aria-describedby": subtitleId, children: jsxs(SurfaceProvider, { level: surfaceLevel, children: [showBackButton && (jsx("div", { className: cn(modalStackTheme.backButton), children: jsxs(Link, { onClick: backHandler, "aria-label": "Go back", size: "sm", children: [jsx(ArrowLeftIcon, { className: "size-4" }), "Back"] }) })), children] }) }) }));
+    return (jsx(ModalContext.Provider, { value: contextValue, children: jsx("div", { className: cn(surfaceClasses(surfaceLevel, { translucent: true, shadow: false }), theme.container, modalSizeVariants[size], className), role: "dialog", "aria-modal": "true", "aria-labelledby": titleId, "aria-describedby": subtitleId, children: jsxs(SurfaceProvider, { level: surfaceLevel, children: [showBackButton && (jsx("div", { className: cn(modalStackTheme.backButton), children: jsxs(Link, { onClick: backHandler, "aria-label": "Go back", size: "sm", children: [jsx(ArrowLeft, { className: "size-4" }), "Back"] }) })), children] }) }) }));
 };
 ModalStackModal.displayName = "ModalStack.Modal";
 

package/dist/components/core/NavItem/NavItem.js

@@ -14,7 +14,7 @@ import { useSidebarContext, useAccordionNavContext, useSidebarDensity } from '..
 import { Tooltip } from '../Tooltip/Tooltip.js';
 import '../Tooltip/Tooltip.animations.js';
 import { Badge } from '../Badge/Badge.js';
-import { ChevronDownIcon } from '@heroicons/react/20/solid';
+import { CaretDown } from '@phosphor-icons/react';
 import { AnimatePresence, motion } from 'motion/react';
 
 const NavItem = React__default.forwardRef(({ children, startContent, endContent, notification, description, shortcut, href, onClick, active = false, isDisabled = false, hasSubmenu: propHasSubmenu = false, expanded: controlledExpanded, onToggleExpanded, items, defaultExpanded = false, level = 0, showTooltipWhenCollapsed = true, className, theme: customTheme = {}, ...props }, ref) => {
@@ -125,7 +125,7 @@ const NavItem = React__default.forwardRef(({ children, startContent, endContent,
             return (jsx("span", { className: cn(navItemTheme.notificationDot, customTheme.notificationDot) }));
         }
         if (typeof notification === "number" && notification > 0) {
-            return (jsx(Badge, { color: "neutral", variant: "soft", size: "sm", children: notification > 99 ? "99+" : notification }));
+            return (jsx(Badge, { color: "mono", variant: "soft", size: "sm", children: notification > 99 ? "99+" : notification }));
         }
         return null;
     }, [notification, customTheme.notificationDot]);
@@ -186,7 +186,7 @@ const NavItem = React__default.forwardRef(({ children, startContent, endContent,
     const iconClasses = cn(theme.icon, getIconStateClasses(), hasSubmenu && isExpanded && !isActive && "opacity-100", isCollapsedView && ((_b = theme.collapsed) === null || _b === void 0 ? void 0 : _b.icon), isHoveredOrDropdownOpen && "opacity-100");
     const textClasses = cn(theme.text);
     // Chevron for submenu
-    const chevron = hasSubmenu && !isCollapsedView ? (jsx(ChevronDownIcon, { strokeWidth: 2, className: cn("size-4 transition-transform duration-200 text-[var(--color-text-muted)]", isExpanded && "text-[var(--color-text-primary)]", isExpanded && "rotate-180") })) : null;
+    const chevron = hasSubmenu && !isCollapsedView ? (jsx(CaretDown, { weight: "bold", className: cn("size-4 transition-transform duration-200 text-[var(--color-text-muted)]", isExpanded && "text-[var(--color-text-primary)]", isExpanded && "rotate-180") })) : null;
     // Strip drag/animation DOM handlers that collide with motion's prop types.
     // `onSubmit`/`onSubmitCapture` are stripped too: NavItem renders as either
     // `motion.a` or `motion.button`, but `NavItemProps extends HTMLAttributes<HTMLElement>`
@@ -255,7 +255,7 @@ const NavItem = React__default.forwardRef(({ children, startContent, endContent,
                                 delay: idx * 0.055,
                                 duration: 0.16,
                                 ease: "easeOut",
-                            }, className: "absolute left-[-6px] top-1/2 h-[calc(100%+0.125rem)] w-px origin-top bg-[var(--color-neutral-400)] dark:bg-[var(--color-neutral-600)]", "aria-hidden": "true" })), jsx(motion.span, { initial: { opacity: 0, scale: 0.5 }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale: 0.5 }, transition: {
+                            }, className: "absolute left-[-6px] top-1/2 h-[calc(100%+0.125rem)] w-px origin-top bg-[var(--color-mono-400)] dark:bg-[var(--color-mono-600)]", "aria-hidden": "true" })), jsx(motion.span, { initial: { opacity: 0, scale: 0.5 }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale: 0.5 }, transition: {
                                 delay: idx * 0.055,
                                 type: "spring",
                                 stiffness: 520,
@@ -263,7 +263,7 @@ const NavItem = React__default.forwardRef(({ children, startContent, endContent,
                                 mass: 0.6,
                             }, className: cn("absolute left-[-8.5px] top-1/2 z-10 size-1.5 -translate-y-1/2 rounded-full", item.active
                                 ? "bg-[var(--color-primary)]"
-                                : "bg-[var(--color-neutral-400)] dark:bg-[var(--color-neutral-600)]"), "aria-hidden": "true" }), jsx(motion.div, { initial: { opacity: 0, x: -6 }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: -6 }, transition: {
+                                : "bg-[var(--color-mono-400)] dark:bg-[var(--color-mono-600)]"), "aria-hidden": "true" }), jsx(motion.div, { initial: { opacity: 0, x: -6 }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: -6 }, transition: {
                                 delay: idx * 0.055 + 0.035,
                                 type: "spring",
                                 stiffness: 460,
@@ -291,7 +291,7 @@ const NavItem = React__default.forwardRef(({ children, startContent, endContent,
                                     return (jsx("span", { className: cn(theme.notificationDot, customTheme.notificationDot) }));
                                 }
                                 if (typeof item.notification === "number" && item.notification > 0) {
-                                    return (jsx(Badge, { color: "neutral", variant: "soft", size: "sm", children: item.notification > 99 ? "99+" : item.notification }));
+                                    return (jsx(Badge, { color: "mono", variant: "soft", size: "sm", children: item.notification > 99 ? "99+" : item.notification }));
                                 }
                                 return null;
                             })();