@wallarm-org/design-system 1.24.0 → 1.26.0

package/README.md

@@ -37,6 +37,8 @@ export const App = () => {
 };
 ```
 
+`ThemeProvider` also controls the Frame style (`useTheme().setFrameStyle`, `'neutral' | 'branded'`) - see [Installation Guide](docs/installation.md) for details.
+
 ```css
 /* App.css */
 @import 'tailwindcss';

package/dist/components/AppShell/story-content/_storyAccountDropdown.d.ts

@@ -1,5 +1,8 @@
-import type { Theme } from '../../ThemeProvider';
-export type SidebarMode = 'adaptive' | 'expanded';
+import { type NavRailMode } from '../../NavRail';
+import { type Theme } from '../../ThemeProvider';
+export type SidebarMode = 'adaptive' | 'expanded' | 'collapsed' | 'compact';
+/** Adaptive collapses the rail inside a product and expands it on Home; the other modes pin it. */
+export declare const railModeFor: (mode: SidebarMode, onHome: boolean) => NavRailMode;
 export declare const AccountDropdown: ({ sidebarMode, onSidebarModeChange, theme, onThemeChange, }: {
     sidebarMode: SidebarMode;
     onSidebarModeChange: (mode: SidebarMode) => void;

package/dist/components/AppShell/story-content/_storyAccountDropdown.js

@@ -1,20 +1,60 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Check, LogOut, PanelLeftDashed, PencilRuler, Settings, User } from "../../../icons/index.js";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemIcon, DropdownMenuItemText, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger, DropdownMenuTriggerItem } from "../../DropdownMenu/index.js";
+import { Fragment } from "react";
+import { LogOut, PanelLeftDashed, PencilRuler, Settings, User, UserRound } from "../../../icons/index.js";
+import { cn } from "../../../utils/cn.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemIcon, DropdownMenuItemText, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, DropdownMenuTriggerItem } from "../../DropdownMenu/index.js";
 import { NavRailItem } from "../../NavRail/index.js";
 import { HStack, VStack } from "../../Stack/index.js";
 import { Text } from "../../Text/index.js";
+import { useTheme } from "../../ThemeProvider/index.js";
+const railModeFor = (mode, onHome)=>{
+    if ('adaptive' === mode) return onHome ? 'expanded' : 'collapsed';
+    return mode;
+};
 const USER_NAME = 'Meow Meow';
 const USER_EMAIL = 'meow@meow.com';
+const THEMES = [
+    'light',
+    'dark'
+];
+const SIDEBAR_MODE_GROUPS = [
+    [
+        'adaptive'
+    ],
+    [
+        'expanded',
+        'collapsed'
+    ],
+    [
+        'compact'
+    ]
+];
+const SIDEBAR_MODES = SIDEBAR_MODE_GROUPS.flat();
 const THEME_LABELS = {
     light: 'Light',
     dark: 'Dark'
 };
+const FRAME_STYLES = [
+    'neutral',
+    'branded'
+];
+const FRAME_STYLE_LABELS = {
+    neutral: 'Neutral',
+    branded: 'Branded'
+};
+const FRAME_STYLE_SWATCH = {
+    neutral: 'bg-icon-secondary',
+    branded: 'bg-icon-brand'
+};
 const SIDEBAR_MODE_LABELS = {
     adaptive: 'Adaptive',
-    expanded: 'Always expanded'
+    expanded: 'Always expanded',
+    collapsed: 'Always collapsed',
+    compact: 'Compact'
 };
-const AccountDropdown = ({ sidebarMode, onSidebarModeChange, theme, onThemeChange })=>/*#__PURE__*/ jsxs(DropdownMenu, {
+const AccountDropdown = ({ sidebarMode, onSidebarModeChange, theme, onThemeChange })=>{
+    const { frameStyle, setFrameStyle } = useTheme();
+    return /*#__PURE__*/ jsxs(DropdownMenu, {
         positioning: {
             placement: 'right-end',
             gutter: 6,
@@ -25,8 +65,9 @@ const AccountDropdown = ({ sidebarMode, onSidebarModeChange, theme, onThemeChang
         children: [
             /*#__PURE__*/ jsx(DropdownMenuTrigger, {
                 children: /*#__PURE__*/ jsx(NavRailItem, {
-                    icon: User,
-                    label: USER_NAME
+                    icon: UserRound,
+                    label: USER_NAME,
+                    avatar: true
                 })
             }),
             /*#__PURE__*/ jsxs(DropdownMenuContent, {
@@ -79,12 +120,16 @@ const AccountDropdown = ({ sidebarMode, onSidebarModeChange, theme, onThemeChang
                                     /*#__PURE__*/ jsxs(DropdownMenuItemContent, {
                                         children: [
                                             /*#__PURE__*/ jsx(DropdownMenuItemText, {
-                                                children: "Theme"
+                                                children: "Appearance"
                                             }),
-                                            /*#__PURE__*/ jsx(Text, {
+                                            /*#__PURE__*/ jsxs(Text, {
                                                 size: "xs",
                                                 color: "secondary",
-                                                children: THEME_LABELS[theme]
+                                                children: [
+                                                    THEME_LABELS[theme],
+                                                    " and ",
+                                                    FRAME_STYLE_LABELS[frameStyle].toLowerCase()
+                                                ]
                                             })
                                         ]
                                     })
@@ -93,27 +138,42 @@ const AccountDropdown = ({ sidebarMode, onSidebarModeChange, theme, onThemeChang
                             /*#__PURE__*/ jsxs(DropdownMenuContent, {
                                 className: "w-132",
                                 children: [
-                                    /*#__PURE__*/ jsxs(DropdownMenuItem, {
-                                        onSelect: ()=>onThemeChange('light'),
-                                        children: [
-                                            /*#__PURE__*/ jsx(DropdownMenuItemText, {
-                                                children: "Light"
-                                            }),
-                                            'light' === theme && /*#__PURE__*/ jsx(DropdownMenuShortcut, {
-                                                children: /*#__PURE__*/ jsx(Check, {})
-                                            })
-                                        ]
+                                    /*#__PURE__*/ jsx(DropdownMenuRadioGroup, {
+                                        value: theme,
+                                        onValueChange: ({ value })=>{
+                                            const next = THEMES.find((t)=>t === value);
+                                            if (next) onThemeChange(next);
+                                        },
+                                        children: THEMES.map((t)=>/*#__PURE__*/ jsx(DropdownMenuRadioItem, {
+                                                value: t,
+                                                children: /*#__PURE__*/ jsx(DropdownMenuItemText, {
+                                                    children: THEME_LABELS[t]
+                                                })
+                                            }, t))
                                     }),
-                                    /*#__PURE__*/ jsxs(DropdownMenuItem, {
-                                        onSelect: ()=>onThemeChange('dark'),
-                                        children: [
-                                            /*#__PURE__*/ jsx(DropdownMenuItemText, {
-                                                children: "Dark"
-                                            }),
-                                            'dark' === theme && /*#__PURE__*/ jsx(DropdownMenuShortcut, {
-                                                children: /*#__PURE__*/ jsx(Check, {})
-                                            })
-                                        ]
+                                    /*#__PURE__*/ jsx(DropdownMenuSeparator, {}),
+                                    /*#__PURE__*/ jsx(DropdownMenuRadioGroup, {
+                                        value: frameStyle,
+                                        onValueChange: ({ value })=>{
+                                            const next = FRAME_STYLES.find((s)=>s === value);
+                                            if (next) setFrameStyle(next);
+                                        },
+                                        children: FRAME_STYLES.map((s)=>/*#__PURE__*/ jsxs(DropdownMenuRadioItem, {
+                                                value: s,
+                                                children: [
+                                                    /*#__PURE__*/ jsx(DropdownMenuItemIcon, {
+                                                        children: /*#__PURE__*/ jsx("span", {
+                                                            className: "flex size-16 items-center justify-center",
+                                                            children: /*#__PURE__*/ jsx("span", {
+                                                                className: cn('size-8 rounded-full', FRAME_STYLE_SWATCH[s])
+                                                            })
+                                                        })
+                                                    }),
+                                                    /*#__PURE__*/ jsx(DropdownMenuItemText, {
+                                                        children: FRAME_STYLE_LABELS[s]
+                                                    })
+                                                ]
+                                            }, s))
                                     })
                                 ]
                             })
@@ -140,32 +200,26 @@ const AccountDropdown = ({ sidebarMode, onSidebarModeChange, theme, onThemeChang
                                     })
                                 ]
                             }),
-                            /*#__PURE__*/ jsxs(DropdownMenuContent, {
+                            /*#__PURE__*/ jsx(DropdownMenuContent, {
                                 className: "w-200",
-                                children: [
-                                    /*#__PURE__*/ jsxs(DropdownMenuItem, {
-                                        onSelect: ()=>onSidebarModeChange('adaptive'),
-                                        children: [
-                                            /*#__PURE__*/ jsx(DropdownMenuItemText, {
-                                                children: "Adaptive"
-                                            }),
-                                            'adaptive' === sidebarMode && /*#__PURE__*/ jsx(DropdownMenuShortcut, {
-                                                children: /*#__PURE__*/ jsx(Check, {})
-                                            })
-                                        ]
-                                    }),
-                                    /*#__PURE__*/ jsxs(DropdownMenuItem, {
-                                        onSelect: ()=>onSidebarModeChange('expanded'),
-                                        children: [
-                                            /*#__PURE__*/ jsx(DropdownMenuItemText, {
-                                                children: "Always expanded"
-                                            }),
-                                            'expanded' === sidebarMode && /*#__PURE__*/ jsx(DropdownMenuShortcut, {
-                                                children: /*#__PURE__*/ jsx(Check, {})
-                                            })
-                                        ]
-                                    })
-                                ]
+                                children: /*#__PURE__*/ jsx(DropdownMenuRadioGroup, {
+                                    value: sidebarMode,
+                                    onValueChange: ({ value })=>{
+                                        const next = SIDEBAR_MODES.find((m)=>m === value);
+                                        if (next) onSidebarModeChange(next);
+                                    },
+                                    children: SIDEBAR_MODE_GROUPS.map((group, index)=>/*#__PURE__*/ jsxs(Fragment, {
+                                            children: [
+                                                index > 0 && /*#__PURE__*/ jsx(DropdownMenuSeparator, {}),
+                                                group.map((m)=>/*#__PURE__*/ jsx(DropdownMenuRadioItem, {
+                                                        value: m,
+                                                        children: /*#__PURE__*/ jsx(DropdownMenuItemText, {
+                                                            children: SIDEBAR_MODE_LABELS[m]
+                                                        })
+                                                    }, m))
+                                            ]
+                                        }, group.join('-')))
+                                })
                             })
                         ]
                     }),
@@ -184,4 +238,5 @@ const AccountDropdown = ({ sidebarMode, onSidebarModeChange, theme, onThemeChang
             })
         ]
     });
-export { AccountDropdown };
+};
+export { AccountDropdown, railModeFor };

package/dist/components/AppShell/story-content/_storyConfigRenderer.d.ts

@@ -3,7 +3,10 @@ import { type Product } from './_storyLib';
 export interface ConfigRemoteProps {
     config: NavConfig;
     basePath?: string;
+    /** Fake a 2s load whenever the product changes, to show the panel and content skeletons. */
+    simulateLoading?: boolean;
 }
-export declare const RemoteForProduct: ({ product }: {
+export declare const RemoteForProduct: ({ product, simulateLoading, }: {
     product: Product;
+    simulateLoading?: boolean;
 }) => import("react").JSX.Element;

package/dist/components/AppShell/story-content/_storyConfigRenderer.js

@@ -31,16 +31,18 @@ const RemotePageContent = ()=>{
         ]
     });
 };
-const ConfigRemote = ({ config, basePath })=>{
-    const [loading, setLoading] = useState(true);
+const ConfigRemote = ({ config, basePath, simulateLoading = true })=>{
+    const [loading, setLoading] = useState(simulateLoading);
     useEffect(()=>{
+        if (!simulateLoading) return;
         setLoading(true);
         const timer = setTimeout(()=>{
             setLoading(false);
         }, 2000);
         return ()=>clearTimeout(timer);
     }, [
-        config.productLabel
+        config.productLabel,
+        simulateLoading
     ]);
     return /*#__PURE__*/ jsx(RemoteShell, {
         config: config,
@@ -67,12 +69,13 @@ const ConfigRemote = ({ config, basePath })=>{
         })
     });
 };
-const RemoteForProduct = ({ product })=>{
+const RemoteForProduct = ({ product, simulateLoading = true })=>{
     if ('home' === product) return /*#__PURE__*/ jsx(HomeContent, {});
     const { config } = PRODUCT_CONFIGS[product];
     return /*#__PURE__*/ jsx(ConfigRemote, {
         config: config,
-        basePath: `/${product}`
+        basePath: `/${product}`,
+        simulateLoading: simulateLoading
     });
 };
 export { RemoteForProduct };

package/dist/components/AppShell/story-content/index.d.ts

@@ -1,4 +1,4 @@
-export { AccountDropdown, type SidebarMode } from './_storyAccountDropdown';
+export { AccountDropdown, railModeFor, type SidebarMode } from './_storyAccountDropdown';
 export { RemoteForProduct } from './_storyConfigRenderer';
 export { HeaderActions } from './_storyHeaderActions';
 export { HomeContent } from './_storyHomeContent';

package/dist/components/AppShell/story-content/index.js

@@ -1,4 +1,4 @@
-export { AccountDropdown } from "./_storyAccountDropdown.js";
+export { AccountDropdown, railModeFor } from "./_storyAccountDropdown.js";
 export { RemoteForProduct } from "./_storyConfigRenderer.js";
 export { HeaderActions } from "./_storyHeaderActions.js";
 export { HomeContent } from "./_storyHomeContent.js";

package/dist/components/DropdownMenu/DropdownMenuRadioItem.js

@@ -15,7 +15,7 @@ const DropdownMenuRadioItem = ({ children, value, disabled, closeOnSelect, varia
         "data-testid": testId,
         className: cn(dropdownMenuItemVariants({
             variant
-        }), className),
+        }), 'data-[state=checked]:bg-states-primary-active', className),
         children: [
             children,
             /*#__PURE__*/ jsx(DropdownMenuItemIndicator, {

package/dist/components/NavPanel/NavPanelBack.js

@@ -11,7 +11,7 @@ const NavPanelBack = ({ ref, className, children, ...props })=>{
         type: "button",
         "data-slot": "nav-panel-back",
         "data-testid": testId,
-        className: cn('overlay flex h-32 shrink-0 w-full cursor-pointer items-center gap-8 rounded-6 p-8 text-sm text-text-primary opacity-85 transition-colors outline-none hover:opacity-100 hover:overlay-states-primary-hover focus-visible:opacity-100 focus-visible:overlay-states-primary-hover active:overlay-states-primary-pressed', className),
+        className: cn('overlay flex h-32 shrink-0 w-full cursor-pointer items-center gap-8 rounded-10 p-8 text-sm text-text-primary transition-colors outline-none hover:overlay-states-primary-hover focus-visible:overlay-states-primary-hover active:overlay-states-primary-pressed', className),
         children: [
             /*#__PURE__*/ jsx(CornerUpLeft, {
                 size: "md"

package/dist/components/NavPanel/NavPanelGroupItem.js

@@ -4,7 +4,7 @@ import { cn } from "../../utils/cn.js";
 import { useTestId } from "../../utils/testId.js";
 import { Text } from "../Text/index.js";
 import { navPanelGroupItemVariants } from "./classes.js";
-import { useNavPanelDepth, useNavPanelIndent } from "./NavPanelContext.js";
+import { NAV_PANEL_BASE_PADDING, useNavPanelDepth, useNavPanelIndent } from "./NavPanelContext.js";
 const NavPanelGroupItem = ({ ref, asChild = false, icon: Icon, active = false, className, children, ...props })=>{
     const testId = useTestId('group-item');
     const depth = useNavPanelDepth();
@@ -33,6 +33,13 @@ const NavPanelGroupItem = ({ ref, asChild = false, icon: Icon, active = false, c
                 size: "sm",
                 truncate: true,
                 children: children
+            }),
+            active && depth > 0 && /*#__PURE__*/ jsx("span", {
+                "aria-hidden": true,
+                className: "absolute top-0 bottom-0 hidden w-px bg-border-brand branded:block",
+                style: {
+                    left: depth * indent - NAV_PANEL_BASE_PADDING
+                }
             })
         ]
     });

package/dist/components/NavPanel/NavPanelGroupLabel.js

@@ -22,7 +22,7 @@ const NavPanelGroupLabel = ({ ref, icon: Icon, className, children, ...props })=
         style: {
             paddingLeft: 8 + depth * indent
         },
-        className: cn('overlay flex h-32 shrink-0 w-full cursor-pointer items-center gap-8 rounded-6 py-8 pr-8 text-sm text-text-primary opacity-85 transition-colors outline-none hover:opacity-100 hover:overlay-states-primary-hover focus-visible:opacity-100 focus-visible:overlay-states-primary-hover active:overlay-states-primary-pressed', className),
+        className: cn('overlay flex h-32 shrink-0 w-full cursor-pointer items-center gap-8 rounded-10 py-8 pr-8 text-sm text-text-primary transition-colors outline-none hover:overlay-states-primary-hover focus-visible:overlay-states-primary-hover active:overlay-states-primary-pressed', className),
         children: [
             Icon && /*#__PURE__*/ jsx("span", {
                 className: "flex shrink-0 items-center justify-center",

package/dist/components/NavPanel/NavPanelSkeleton.js

@@ -15,7 +15,7 @@ const NavPanelSkeleton = ({ ref, className, count = 6, ...props })=>{
         }, (_, i)=>/*#__PURE__*/ jsx(Skeleton, {
                 width: "100%",
                 height: "28px",
-                rounded: 6
+                rounded: 10
             }, i))
     });
 };

package/dist/components/NavPanel/classes.js

@@ -1,20 +1,20 @@
 import { cva } from "class-variance-authority";
-const navPanelItemVariants = cva('overlay flex h-32 shrink-0 w-full cursor-pointer items-center gap-8 rounded-6 p-8 text-sm text-text-primary transition-colors outline-none', {
+const navPanelItemVariants = cva('overlay flex h-32 shrink-0 w-full cursor-pointer items-center gap-8 rounded-10 p-8 text-sm text-text-primary transition-colors outline-none', {
     variants: {
         active: {
-            true: 'overlay-states-primary-active font-semibold',
-            false: 'opacity-85 hover:opacity-100 hover:overlay-states-primary-hover focus-visible:opacity-100 focus-visible:overlay-states-primary-hover active:overlay-states-primary-pressed'
+            true: 'overlay-states-primary-active font-semibold branded:overlay-states-brand-active branded:text-text-brand',
+            false: 'hover:overlay-states-primary-hover focus-visible:overlay-states-primary-hover active:overlay-states-primary-pressed'
         }
     },
     defaultVariants: {
         active: false
     }
 });
-const navPanelGroupItemVariants = cva('overlay flex h-32 shrink-0 w-full cursor-pointer items-center gap-8 rounded-6 py-8 pr-8 text-sm text-text-primary transition-colors outline-none', {
+const navPanelGroupItemVariants = cva('overlay flex h-32 shrink-0 w-full cursor-pointer items-center gap-8 rounded-10 py-8 pr-8 text-sm text-text-primary transition-colors outline-none', {
     variants: {
         active: {
-            true: 'overlay-states-primary-active font-semibold',
-            false: 'opacity-85 hover:opacity-100 hover:overlay-states-primary-hover focus-visible:opacity-100 focus-visible:overlay-states-primary-hover active:overlay-states-primary-pressed'
+            true: 'overlay-states-primary-active font-semibold branded:overlay-states-brand-active branded:text-text-brand',
+            false: 'hover:overlay-states-primary-hover focus-visible:overlay-states-primary-hover active:overlay-states-primary-pressed'
         }
     },
     defaultVariants: {

package/dist/components/NavRail/NavRail.d.ts

@@ -1,8 +1,15 @@
 import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
 import { type TestableProps } from '../../utils/testId';
+import { type NavRailMode } from './NavRailContext';
 export interface NavRailProps extends HTMLAttributes<HTMLElement>, TestableProps {
     ref?: Ref<HTMLElement>;
     children?: ReactNode;
+    /**
+     * How the rail lays out its items: `expanded` (icon beside label), `collapsed` (icon only) or
+     * `compact` (icon over a short label). Wins over `collapsed` when both are set.
+     */
+    mode?: NavRailMode;
+    /** Shorthand for `mode='collapsed'`, kept so existing hosts keep working. Prefer `mode`. */
     collapsed?: boolean;
 }
 export declare const NavRail: FC<NavRailProps>;

package/dist/components/NavRail/NavRail.js

@@ -6,8 +6,9 @@ import { cn } from "../../utils/cn.js";
 import { TestIdProvider } from "../../utils/testId.js";
 import { navRailVariants } from "./classes.js";
 import { NavRailContextProvider } from "./NavRailContext.js";
-const NavRail = ({ ref, collapsed = false, className, children, 'data-testid': testId, ...props })=>{
+const NavRail = ({ ref, mode: modeProp, collapsed = false, className, children, 'data-testid': testId, ...props })=>{
     const internalRef = useRef(null);
+    const mode = modeProp ?? (collapsed ? 'collapsed' : 'expanded');
     const focusPanel = useCallback(()=>{
         const panel = document.querySelector('[data-slot="nav-panel"]');
         const target = panel?.querySelector('[tabindex="0"]');
@@ -37,16 +38,17 @@ const NavRail = ({ ref, collapsed = false, className, children, 'data-testid': t
         value: testId,
         children: /*#__PURE__*/ jsx(NavRailContextProvider, {
             value: {
-                collapsed
+                mode
             },
             children: /*#__PURE__*/ jsx("nav", {
                 ...props,
                 ref: composeRefs(internalRef, ref),
                 "aria-label": "Global navigation",
                 "data-slot": "nav-rail",
+                "data-mode": mode,
                 "data-testid": testId,
                 className: cn(navRailVariants({
-                    collapsed
+                    mode
                 }), className),
                 children: children
             })

package/dist/components/NavRail/NavRailBody.js

@@ -1,14 +1,19 @@
 import { jsx } from "react/jsx-runtime";
 import { cn } from "../../utils/cn.js";
 import { useTestId } from "../../utils/testId.js";
+import { navRailBodyVariants } from "./classes.js";
+import { useNavRailContext } from "./NavRailContext.js";
 const NavRailBody = ({ ref, className, children, ...props })=>{
+    const { mode } = useNavRailContext();
     const testId = useTestId('body');
     return /*#__PURE__*/ jsx("div", {
         ...props,
         ref: ref,
         "data-slot": "nav-rail-body",
         "data-testid": testId,
-        className: cn('flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto overscroll-none [scrollbar-width:thin]', className),
+        className: cn(navRailBodyVariants({
+            mode
+        }), className),
         children: children
     });
 };

package/dist/components/NavRail/NavRailContext.d.ts

@@ -1,5 +1,6 @@
+export type NavRailMode = 'expanded' | 'collapsed' | 'compact';
 interface NavRailContextValue {
-    collapsed: boolean;
+    mode: NavRailMode;
 }
 export declare const NavRailContextProvider: import("react").Provider<NavRailContextValue>;
 export declare function useNavRailContext(): NavRailContextValue;

package/dist/components/NavRail/NavRailContext.js

@@ -1,6 +1,6 @@
 import { createContext, useContext } from "react";
 const NavRailCtx = /*#__PURE__*/ createContext({
-    collapsed: false
+    mode: 'expanded'
 });
 const NavRailContextProvider = NavRailCtx.Provider;
 function useNavRailContext() {

package/dist/components/NavRail/NavRailFooter.js

@@ -1,14 +1,19 @@
 import { jsx } from "react/jsx-runtime";
 import { cn } from "../../utils/cn.js";
 import { useTestId } from "../../utils/testId.js";
+import { navRailFooterVariants } from "./classes.js";
+import { useNavRailContext } from "./NavRailContext.js";
 const NavRailFooter = ({ ref, className, children, ...props })=>{
+    const { mode } = useNavRailContext();
     const testId = useTestId('footer');
     return /*#__PURE__*/ jsx("div", {
         ...props,
         ref: ref,
         "data-slot": "nav-rail-footer",
         "data-testid": testId,
-        className: cn('mt-auto flex flex-col gap-2', className),
+        className: cn(navRailFooterVariants({
+            mode
+        }), className),
         children: children
     });
 };

package/dist/components/NavRail/NavRailItem.d.ts

@@ -8,5 +8,9 @@ export interface NavRailItemProps extends AnchorHTMLAttributes<HTMLAnchorElement
     label: ReactNode;
     shortcut?: string[];
     active?: boolean;
+    /** Seats the icon on a soft plate, for the signed-in user's item at the foot of the rail. */
+    avatar?: boolean;
+    /** User photo for the plate (implies `avatar`). The icon stays underneath and returns if the photo fails to load. */
+    avatarSrc?: string;
 }
 export declare const NavRailItem: FC<NavRailItemProps>;

package/dist/components/NavRail/NavRailItem.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Fragment, useRef } from "react";
+import { Fragment, useRef, useState } from "react";
 import { composeRefs } from "@radix-ui/react-compose-refs";
 import { Slot, Slottable } from "@radix-ui/react-slot";
 import { cn } from "../../utils/cn.js";
@@ -8,35 +8,61 @@ import { Kbd } from "../Kbd/index.js";
 import { Tooltip } from "../Tooltip/index.js";
 import { TooltipContent } from "../Tooltip/TooltipContent.js";
 import { TooltipTrigger } from "../Tooltip/TooltipTrigger.js";
-import { navRailItemVariants } from "./classes.js";
+import { navRailItemCompactLabelClassName, navRailItemVariants } from "./classes.js";
 import { useNavRailContext } from "./NavRailContext.js";
 import { useShortcut } from "./useShortcut.js";
-const NavRailItem = ({ ref, asChild = false, icon: Icon, label, shortcut, active = false, className, children, 'data-testid': testIdProp, ...props })=>{
-    const { collapsed } = useNavRailContext();
+const NavRailItem = ({ ref, asChild = false, icon: Icon, label, shortcut, active = false, avatar = false, avatarSrc, className, children, 'data-testid': testIdProp, ...props })=>{
+    const { mode } = useNavRailContext();
     const testId = useTestId('item', testIdProp);
     const Comp = asChild ? Slot : 'a';
     const internalRef = useRef(null);
+    const [failedSrc, setFailedSrc] = useState();
+    const photo = avatarSrc && avatarSrc !== failedSrc ? avatarSrc : void 0;
+    const hasPlate = avatar || void 0 !== avatarSrc;
+    const showsLabel = 'expanded' === mode || 'compact' === mode && !hasPlate;
+    const fallbackName = showsLabel || 'string' != typeof label ? void 0 : label;
     useShortcut(shortcut, internalRef);
     const element = /*#__PURE__*/ jsxs(Comp, {
         ...props,
         ref: composeRefs(internalRef, ref),
+        "aria-label": props['aria-label'] ?? fallbackName,
         "aria-current": active ? 'page' : void 0,
         "data-slot": "nav-rail-item",
         "data-testid": testId,
         className: cn(navRailItemVariants({
-            active
+            mode,
+            active,
+            avatar: hasPlate
         }), className),
         children: [
             /*#__PURE__*/ jsx("span", {
                 className: "flex shrink-0 items-center justify-center",
-                children: /*#__PURE__*/ jsx(Icon, {
+                children: hasPlate ? /*#__PURE__*/ jsxs("span", {
+                    "data-slot": "nav-rail-item-avatar",
+                    className: cn('-m-4 grid size-24 place-items-center overflow-hidden rounded-8 bg-states-primary-hover branded:bg-states-brand-hover branded:text-icon-brand *:col-start-1 *:row-start-1', !photo && 'border border-border-primary branded:border-border-brand'),
+                    children: [
+                        /*#__PURE__*/ jsx(Icon, {
+                            size: "md"
+                        }),
+                        photo && /*#__PURE__*/ jsx("img", {
+                            src: photo,
+                            alt: "",
+                            className: "size-full object-cover",
+                            onError: ()=>setFailedSrc(photo)
+                        })
+                    ]
+                }) : /*#__PURE__*/ jsx(Icon, {
                     size: "md"
                 })
             }),
-            !collapsed && /*#__PURE__*/ jsx("span", {
+            'expanded' === mode && /*#__PURE__*/ jsx("span", {
                 className: cn('truncate whitespace-nowrap transition-[opacity,width] duration-200 pl-8'),
                 children: label
             }),
+            showsLabel && 'compact' === mode && /*#__PURE__*/ jsx("span", {
+                className: navRailItemCompactLabelClassName,
+                children: label
+            }),
             /*#__PURE__*/ jsx(Slottable, {
                 children: children
             })