@vvedantb/ui 0.5.4 → 0.6.1

package/shell/src/SidebarChrome.tsx

@@ -0,0 +1,295 @@
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useId,
+  type ComponentProps,
+  type KeyboardEvent,
+  type ReactNode,
+} from "react";
+import { AnimatePresence, motion, type HTMLMotionProps, type PanInfo } from "motion/react";
+import { IconMenu2 } from "@tabler/icons-react";
+import { Button, type ButtonProps } from "../../src/ui/button";
+import { motionEase, motionTiming } from "../../src/motion/presets";
+import { cn } from "../../src/utils/cn";
+import { mobileMenuButtonClass } from "./app-shell-classes";
+import { SidebarResizeHandle, useSidebarResizeContext, type SidebarResizeHandleProps } from "./SidebarResize";
+
+type SidebarContextValue = {
+  isDesktop: boolean;
+  mobileOpen: boolean;
+  onMobileOpenChange: (open: boolean) => void;
+  collapsed: boolean;
+  panelHidden: boolean;
+  drawerId: string;
+};
+
+const SidebarContext = createContext<SidebarContextValue | null>(null);
+
+/** The nearest `Sidebar.Root`, or `null`. */
+export function useOptionalSidebar(): SidebarContextValue | null {
+  return useContext(SidebarContext);
+}
+
+function useSidebar(part: string): SidebarContextValue {
+  const sidebar = useContext(SidebarContext);
+  if (!sidebar) throw new Error(`Sidebar.${part} must be inside Sidebar.Root`);
+  return sidebar;
+}
+
+export type SidebarRootProps = {
+  /** From the app's desktop media query (for example `(min-width: 768px)`). */
+  isDesktop: boolean;
+  /** Mobile drawer state. Owned by the app (which also closes it on route change). */
+  mobileOpen: boolean;
+  onMobileOpenChange: (open: boolean) => void;
+  /** Desktop: show only the rail. `Sidebar.Panel` hides itself (`md:hidden`). Default `false`. */
+  collapsed?: boolean;
+  /** The current section has no panel: rail-wide on every viewport, `Sidebar.Panel` renders nothing. Default `false`. */
+  panelHidden?: boolean;
+  /** `id` of the drawer (`Sidebar.Aside`), used by the menu button `aria-controls`. Default from `useId`. */
+  id?: string;
+  children?: ReactNode;
+};
+
+/** Sidebar state for the other parts. Renders no DOM. Closes the drawer when the desktop breakpoint is reached. */
+function Root({
+  isDesktop,
+  mobileOpen,
+  onMobileOpenChange,
+  collapsed = false,
+  panelHidden = false,
+  id,
+  children,
+}: SidebarRootProps) {
+  const autoId = useId();
+
+  // Reaching the desktop breakpoint closes the drawer, so it does not reopen
+  // on the way back down. Runs on breakpoint change only.
+  useEffect(() => {
+    if (isDesktop && mobileOpen) onMobileOpenChange(false);
+  }, [isDesktop]);
+
+  return (
+    <SidebarContext.Provider
+      value={{ isDesktop, mobileOpen, onMobileOpenChange, collapsed, panelHidden, drawerId: id ?? autoId }}
+    >
+      {children}
+    </SidebarContext.Provider>
+  );
+}
+
+function closeOnEscape(sidebar: SidebarContextValue, event: KeyboardEvent) {
+  if (event.key === "Escape" && !sidebar.isDesktop && sidebar.mobileOpen) {
+    sidebar.onMobileOpenChange(false);
+  }
+}
+
+export type SidebarMobileHeaderProps = ComponentProps<"header">;
+
+/**
+ * Fixed header below `md`. Escape inside it closes the drawer. Three columns
+ * keep the title centred and stop it overlapping the actions: it truncates instead.
+ */
+function MobileHeader({ className, onKeyDown, ...props }: SidebarMobileHeaderProps) {
+  const sidebar = useSidebar("MobileHeader");
+  return (
+    <header
+      {...props}
+      onKeyDown={(event) => {
+        onKeyDown?.(event);
+        closeOnEscape(sidebar, event);
+      }}
+      className={cn(
+        "fixed inset-x-0 top-0 z-30 grid h-[var(--app-shell-mobile-header-height)] grid-cols-[minmax(max-content,1fr)_minmax(0,auto)_minmax(max-content,1fr)] items-center gap-2 bg-surface px-3 pt-[env(safe-area-inset-top,0px)] pl-[max(0.75rem,env(safe-area-inset-left))] pr-[max(0.75rem,env(safe-area-inset-right))] md:hidden",
+        className,
+      )}
+    />
+  );
+}
+
+const defaultMobileMenuIcon = () => <IconMenu2 size={20} />;
+
+export type SidebarMobileMenuButtonProps = Omit<ButtonProps, "children"> & {
+  /** `aria-label`. Default `"Open navigation menu"`. */
+  label?: string;
+  /** Icon for the drawer state. Default a 20px menu icon. */
+  icon?: (open: boolean) => ReactNode;
+};
+
+/** Opens the drawer. */
+function MobileMenuButton({
+  label = "Open navigation menu",
+  icon = defaultMobileMenuIcon,
+  className,
+  onClick,
+  ...props
+}: SidebarMobileMenuButtonProps) {
+  const sidebar = useSidebar("MobileMenuButton");
+  return (
+    <Button
+      type="button"
+      variant="ghost"
+      size="icon"
+      {...props}
+      onClick={(event) => {
+        onClick?.(event);
+        sidebar.onMobileOpenChange(true);
+      }}
+      aria-label={label}
+      aria-expanded={sidebar.mobileOpen}
+      aria-controls={sidebar.drawerId}
+      className={cn(mobileMenuButtonClass, "justify-self-start", className)}
+    >
+      {icon(sidebar.mobileOpen)}
+    </Button>
+  );
+}
+
+export type SidebarMobileTitleProps = ComponentProps<"h1">;
+
+/** Centred title in the mobile header. Without children, an empty `<span>` keeps the middle column. */
+function MobileTitle({ className, children, ...props }: SidebarMobileTitleProps) {
+  if (!children) return <span aria-hidden="true" />;
+  return (
+    <h1
+      {...props}
+      className={cn(
+        "pointer-events-none min-w-0 truncate text-center text-base font-semibold leading-tight tracking-tight text-foreground",
+        className,
+      )}
+    >
+      {children}
+    </h1>
+  );
+}
+
+export type SidebarMobileActionsProps = ComponentProps<"div">;
+
+/** Trailing actions in the mobile header. Without children, a menu-button-sized spacer keeps the title centred. */
+function MobileActions({ className, children, ...props }: SidebarMobileActionsProps) {
+  if (!children) {
+    return <div {...props} className={cn("h-11 w-11 shrink-0 justify-self-end", className)} aria-hidden="true" />;
+  }
+  return (
+    <div
+      data-app-sidebar-mobile-actions=""
+      {...props}
+      className={cn("flex shrink-0 items-center justify-self-end gap-2", className)}
+    >
+      {children}
+    </div>
+  );
+}
+
+export type SidebarBackdropProps = Omit<HTMLMotionProps<"button">, "children"> & {
+  /** `aria-label`. Default `"Close navigation"`. */
+  label?: string;
+};
+
+/** Drawer backdrop below `md`; a click closes the drawer. Fades in and out. */
+function Backdrop({ label = "Close navigation", className, onClick, ...props }: SidebarBackdropProps) {
+  const sidebar = useSidebar("Backdrop");
+  return (
+    <AnimatePresence initial={false}>
+      {sidebar.mobileOpen && !sidebar.isDesktop ? (
+        <motion.button
+          type="button"
+          aria-label={label}
+          {...props}
+          className={cn("fixed inset-0 z-40 bg-backdrop/80 md:hidden", className)}
+          onClick={(event) => {
+            onClick?.(event);
+            sidebar.onMobileOpenChange(false);
+          }}
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          transition={{ duration: motionTiming.sidebar, ease: motionEase }}
+        />
+      ) : null}
+    </AnimatePresence>
+  );
+}
+
+export type SidebarAsideProps = HTMLMotionProps<"aside">;
+
+/**
+ * The `<aside>`: fixed on desktop, a swipe-to-close drawer below it. Width
+ * reads the `--app-shell-*` variables. `id` overrides the Root drawer id
+ * (keep them equal so `aria-controls` points here).
+ */
+function Aside({ id, className, onKeyDown, children, ...props }: SidebarAsideProps) {
+  const sidebar = useSidebar("Aside");
+  const resize = useSidebarResizeContext();
+  const { isDesktop, mobileOpen, collapsed, panelHidden } = sidebar;
+
+  const handleDrawerDragEnd = (_event: MouseEvent | TouchEvent | PointerEvent, info: PanInfo) => {
+    if (isDesktop || !mobileOpen) return;
+    if (info.offset.x < -72 || info.velocity.x < -500) {
+      sidebar.onMobileOpenChange(false);
+    }
+  };
+
+  return (
+    <motion.aside
+      id={id ?? sidebar.drawerId}
+      data-sidebar-layout={isDesktop ? "desktop" : "drawer"}
+      {...props}
+      inert={!isDesktop && !mobileOpen}
+      onKeyDown={(event) => {
+        onKeyDown?.(event);
+        closeOnEscape(sidebar, event);
+      }}
+      className={cn(
+        "fixed inset-y-0 left-0 z-50 flex bg-background pb-[env(safe-area-inset-bottom,0px)] pt-[env(safe-area-inset-top,0px)] md:py-0",
+        panelHidden
+          ? "w-[var(--app-shell-rail-width)]"
+          : "w-[min(var(--app-shell-sidebar-width),calc(100vw-1.5rem))]",
+        collapsed || panelHidden
+          ? "md:w-[var(--app-shell-rail-width)]"
+          : "md:w-[var(--app-shell-sidebar-width)]",
+        !resize?.isResizing &&
+          "md:transition-[width] md:[transition-duration:280ms] md:[transition-timing-function:cubic-bezier(0.22,1,0.36,1)]",
+        className,
+      )}
+      initial={false}
+      animate={{ x: isDesktop || mobileOpen ? 0 : "-100%" }}
+      transition={{ duration: motionTiming.sidebar, ease: motionEase }}
+      drag={!isDesktop && mobileOpen ? "x" : false}
+      dragDirectionLock
+      dragConstraints={{ left: 0, right: 0 }}
+      dragElastic={{ left: 0.45, right: 0.08 }}
+      onDragEnd={handleDrawerDragEnd}
+    >
+      {children}
+    </motion.aside>
+  );
+}
+
+export type SidebarResizeHandlePartProps = SidebarResizeHandleProps;
+
+/**
+ * `SidebarResizeHandle` inside a resizable `AppShell`. Under a `Sidebar.Root`
+ * it shows only on desktop while the panel shows (not collapsed or hidden).
+ * Place it inside `Sidebar.Aside`.
+ */
+function ResizeHandle(props: SidebarResizeHandlePartProps) {
+  const sidebar = useOptionalSidebar();
+  const resize = useSidebarResizeContext();
+  const show =
+    resize !== null &&
+    (sidebar === null || (sidebar.isDesktop && !sidebar.collapsed && !sidebar.panelHidden));
+  return show ? <SidebarResizeHandle {...props} /> : null;
+}
+
+export const SidebarChromeParts = {
+  Root,
+  MobileHeader,
+  MobileMenuButton,
+  MobileTitle,
+  MobileActions,
+  Backdrop,
+  Aside,
+  ResizeHandle,
+};

package/shell/src/SidebarHeader.tsx

@@ -1,5 +1,7 @@
 import type { ReactNode } from "react";
+import { sidebarHeaderRowClass } from "./app-shell-classes";
 import { cn } from "./cn.js";
+import { PanelActions, PanelTitle } from "./SidebarPanel";
 
 export type SidebarHeaderProps = {
   title: string;
@@ -7,15 +9,12 @@ export type SidebarHeaderProps = {
   className?: string;
 };
 
+/** Header row: a title and optional trailing actions. Inside a panel, compose `Sidebar.PanelHeader` instead. */
 export function SidebarHeader({ title, trailing, className }: SidebarHeaderProps) {
   return (
-    <div className={cn("flex h-11 items-center gap-1 pl-3 pr-1", className)}>
-      <h2 className="min-w-0 flex-1 truncate text-left text-base font-semibold leading-none tracking-tight text-foreground">
-        {title}
-      </h2>
-      {trailing ? (
-        <div className="flex items-center justify-end gap-0.5">{trailing}</div>
-      ) : null}
+    <div className={cn(sidebarHeaderRowClass, className)}>
+      <PanelTitle>{title}</PanelTitle>
+      {trailing ? <PanelActions>{trailing}</PanelActions> : null}
     </div>
   );
 }

package/shell/src/SidebarPanel.tsx

@@ -1,19 +1,19 @@
-import type { ReactNode } from "react";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
 import { IconX } from "@tabler/icons-react";
-import { Button } from "../../src/ui/button";
+import { Button, type ButtonProps } from "../../src/ui/button";
 import { cn } from "../../src/utils/cn";
-import { panelCloseButtonClass } from "./app-shell-classes";
-import { SidebarHeader } from "./SidebarHeader";
+import { panelCloseButtonClass, sidebarHeaderRowClass } from "./app-shell-classes";
+import { useOptionalSidebar } from "./SidebarChrome";
 
 export type SidebarPanelProps = {
   title: string;
-  /** Rendered in the header, before the close button. */
+  /** Legacy (still supported): rendered in the header, before the close button. Compose `Sidebar.PanelActions`. */
   headerTrailing?: ReactNode;
-  /** When set, a close button follows `headerTrailing`. Pass it on the mobile drawer only. */
+  /** Legacy (still supported): when set, a close button follows `headerTrailing`. Pass it on the mobile drawer only. */
   onClose?: () => void;
-  /** Close button label. Default `"Close navigation"`. */
+  /** Legacy (still supported): close button label. Default `"Close navigation"`. */
   closeLabel?: string;
-  /** Merged onto the close button. */
+  /** Legacy (still supported): merged onto the close button. */
   closeButtonClassName?: string;
   /** Desktop: hides the panel (`md:hidden`) and leaves the rail. */
   collapsed?: boolean;
@@ -22,50 +22,112 @@ export type SidebarPanelProps = {
   children?: ReactNode;
 };
 
-/** Sidebar panel column beside the rail: a `SidebarHeader` and the app's body. */
+/** Sidebar panel column beside the rail: a header and the app's body. Composed from `Sidebar.Panel` parts. */
 export function SidebarPanel({
   title,
   headerTrailing,
   onClose,
-  closeLabel = "Close navigation",
+  closeLabel,
   closeButtonClassName,
   collapsed = false,
   className,
   children,
 }: SidebarPanelProps) {
-  const trailing =
-    headerTrailing || onClose ? (
-      <>
-        {headerTrailing}
-        {onClose ? (
-          <Button
-            type="button"
-            variant="ghost"
-            size="icon-sm"
-            onClick={onClose}
-            aria-label={closeLabel}
-            className={cn(panelCloseButtonClass, closeButtonClassName)}
-          >
-            <IconX className="h-4 w-4" />
-          </Button>
+  return (
+    <Panel collapsed={collapsed} panelHidden={false} className={className}>
+      <PanelHeader>
+        <PanelTitle>{title}</PanelTitle>
+        {headerTrailing || onClose ? (
+          <PanelActions>
+            {headerTrailing}
+            {onClose ? (
+              <PanelClose onClick={onClose} label={closeLabel} className={closeButtonClassName} />
+            ) : null}
+          </PanelActions>
         ) : null}
-      </>
-    ) : null;
+      </PanelHeader>
+      {children}
+    </Panel>
+  );
+}
 
+export type SidebarPanelRootProps = ComponentPropsWithoutRef<"div"> & {
+  /** Desktop: hides the panel (`md:hidden`). Default the `Sidebar.Root` `collapsed`, else `false`. */
+  collapsed?: boolean;
+  /** Renders nothing. Default the `Sidebar.Root` `panelHidden`, else `false`. */
+  panelHidden?: boolean;
+};
+
+/** Panel column `<div>` beside the rail. */
+export function Panel({ collapsed, panelHidden, className, ...props }: SidebarPanelRootProps) {
+  const sidebar = useOptionalSidebar();
+  if (panelHidden ?? sidebar?.panelHidden ?? false) return null;
   return (
     <div
+      {...props}
       className={cn(
         // No border-r: the main content card floats beside this panel, so a
         // right edge line reads as a hard divider.
         "relative flex h-full min-w-0 flex-1 flex-col overflow-hidden bg-background",
-        collapsed && "md:hidden",
+        (collapsed ?? sidebar?.collapsed ?? false) && "md:hidden",
         className,
       )}
-    >
-      <div className="px-2 pt-3">
-        <SidebarHeader title={title} trailing={trailing} />
-      </div>
-      {children}
+    />
+  );
+}
+
+export type SidebarPanelHeaderProps = ComponentPropsWithoutRef<"div">;
+
+/** Padded header row of the panel. Holds `PanelTitle` and `PanelActions`. `className` goes to the outer padding `<div>`. */
+export function PanelHeader({ className, children, ...props }: SidebarPanelHeaderProps) {
+  return (
+    <div {...props} className={cn("px-2 pt-3", className)}>
+      <div className={sidebarHeaderRowClass}>{children}</div>
     </div>
   );
 }
+
+export type SidebarPanelTitleProps = ComponentPropsWithoutRef<"h2">;
+
+/** Panel title `<h2>`, truncated. */
+export function PanelTitle({ className, ...props }: SidebarPanelTitleProps) {
+  return (
+    <h2
+      {...props}
+      className={cn(
+        "min-w-0 flex-1 truncate text-left text-base font-semibold leading-none tracking-tight text-foreground",
+        className,
+      )}
+    />
+  );
+}
+
+export type SidebarPanelActionsProps = ComponentPropsWithoutRef<"div">;
+
+/** Trailing actions in the panel header. */
+export function PanelActions({ className, ...props }: SidebarPanelActionsProps) {
+  return <div {...props} className={cn("flex items-center justify-end gap-0.5", className)} />;
+}
+
+export type SidebarPanelCloseProps = ButtonProps & {
+  /** `aria-label`. Default `"Close navigation"`. */
+  label?: string;
+};
+
+/** Ghost close button. Without `onClick` it closes the `Sidebar.Root` drawer. */
+export function PanelClose({ label = "Close navigation", onClick, className, children, ...props }: SidebarPanelCloseProps) {
+  const sidebar = useOptionalSidebar();
+  return (
+    <Button
+      type="button"
+      variant="ghost"
+      size="icon-sm"
+      {...props}
+      onClick={onClick ?? (() => sidebar?.onMobileOpenChange(false))}
+      aria-label={label}
+      className={cn(panelCloseButtonClass, className)}
+    >
+      {children ?? <IconX className="h-4 w-4" />}
+    </Button>
+  );
+}

package/shell/src/SidebarRail.tsx

@@ -28,7 +28,13 @@ export type SidebarRailProps = Omit<ComponentPropsWithoutRef<"div">, "children"
   footerClassName?: string;
 };
 
-/** Icon rail column. Width reads `--app-shell-rail-width`; override with `className`. Other props go to the root `<div>`. */
+/**
+ * Icon rail column. Width reads `--app-shell-rail-width`; override with `className`. Other props go to the root `<div>`.
+ *
+ * Legacy (still supported): the `top`, `footer`, `bodyAsChild`, `tabs` and
+ * `*ClassName` props. Compose `Sidebar.Rail`, `.RailHeader`, `.RailBody` and
+ * `.RailFooter` instead.
+ */
 export function SidebarRail({
   top,
   children,
@@ -42,11 +48,24 @@ export function SidebarRail({
   footerClassName,
   ...props
 }: SidebarRailProps) {
-  const Body = bodyAsChild ? Slot : "div";
-  const bodyClass = cn(
-    "flex w-full flex-1 flex-col items-center gap-1.5 overflow-y-auto py-2",
-    bodyClassName,
+  return (
+    <Rail {...props} showDivider={showDivider} className={className}>
+      {top == null ? null : <RailHeader className={topClassName}>{top}</RailHeader>}
+      <RailBody asChild={bodyAsChild} tabs={tabs} className={bodyClassName}>
+        {children}
+      </RailBody>
+      {footer == null ? null : <RailFooter className={footerClassName}>{footer}</RailFooter>}
+    </Rail>
   );
+}
+
+export type SidebarRailRootProps = ComponentPropsWithoutRef<"div"> & {
+  /** Adds a right border between the rail and the panel. Default `false`. */
+  showDivider?: boolean;
+};
+
+/** Rail column `<div>`. Width reads `--app-shell-rail-width`. */
+export function Rail({ showDivider = false, className, ...props }: SidebarRailRootProps) {
   return (
     <div
       {...props}
@@ -55,29 +74,43 @@ export function SidebarRail({
         showDivider && "border-r border-separator",
         className,
       )}
-    >
-      {top == null ? null : (
-        <div className={cn("flex w-full flex-col items-center gap-1.5 px-0 pt-3", topClassName)}>
-          {top}
-        </div>
-      )}
-      {tabs ? (
-        <TabsPrimitive.List asChild={bodyAsChild} className={bodyClass}>
-          {children}
-        </TabsPrimitive.List>
-      ) : (
-        <Body className={bodyClass}>{children}</Body>
-      )}
-      {footer == null ? null : (
-        <div className={cn("flex w-full flex-col items-center gap-1.5 py-3", footerClassName)}>
-          {footer}
-        </div>
-      )}
-    </div>
+    />
   );
 }
 
-export type RailTileProps = Omit<ComponentPropsWithoutRef<"button">, "children"> & {
+export type SidebarRailHeaderProps = ComponentPropsWithoutRef<"div">;
+
+/** Block pinned at the top of the rail, above the scroll body. */
+export function RailHeader({ className, ...props }: SidebarRailHeaderProps) {
+  return <div {...props} className={cn("flex w-full flex-col items-center gap-1.5 px-0 pt-3", className)} />;
+}
+
+export type SidebarRailBodyProps = ComponentPropsWithoutRef<"div"> & {
+  /** Render the body as its single child element (for example a `<nav>`), with the body classes merged. */
+  asChild?: boolean;
+  /**
+   * Render a Radix tabs list (arrow-key roving focus). Use it inside a Tabs
+   * root with `orientation="vertical"` and give each item a `tabValue`.
+   */
+  tabs?: boolean;
+};
+
+/** Scroll body of the rail. */
+export function RailBody({ asChild = false, tabs = false, className, ...props }: SidebarRailBodyProps) {
+  const bodyClass = cn("flex w-full flex-1 flex-col items-center gap-1.5 overflow-y-auto py-2", className);
+  if (tabs) return <TabsPrimitive.List {...props} asChild={asChild} className={bodyClass} />;
+  const Body = asChild ? Slot : "div";
+  return <Body {...props} className={bodyClass} />;
+}
+
+export type SidebarRailFooterProps = ComponentPropsWithoutRef<"div">;
+
+/** Block pinned at the bottom of the rail. */
+export function RailFooter({ className, ...props }: SidebarRailFooterProps) {
+  return <div {...props} className={cn("flex w-full flex-col items-center gap-1.5 py-3", className)} />;
+}
+
+export type SidebarRailItemProps = Omit<ComponentPropsWithoutRef<"button">, "children"> & {
   /** `aria-label`, and the tooltip unless `tooltip` is set. */
   label: string;
   /** Active state. With `asChild`, also sets `aria-current="page"`. */
@@ -99,7 +132,7 @@ export type RailTileProps = Omit<ComponentPropsWithoutRef<"button">, "children">
 };
 
 /** Rail tile with a right-side tooltip. Renders a native `<button>`, its child with `asChild`, or a tabs trigger with `tabValue`. */
-export function RailTile({
+export function RailItem({
   label,
   active = false,
   tooltip,
@@ -110,7 +143,7 @@ export function RailTile({
   className,
   children,
   ...props
-}: RailTileProps) {
+}: SidebarRailItemProps) {
   return (
     <SidebarIconTooltip label={tooltip ?? label} enabled={showTooltip}>
       {tabValue !== undefined ? (
@@ -148,8 +181,21 @@ export function RailTile({
   );
 }
 
+export type RailTileProps = SidebarRailItemProps;
+
+/** Legacy name of `Sidebar.RailItem`. */
+export const RailTile = RailItem;
+
+export type SidebarRailSeparatorProps = ComponentPropsWithoutRef<"div">;
+
+/** Short horizontal rule between rail items. */
+export function RailSeparator({ className, ...props }: SidebarRailSeparatorProps) {
+  return <div {...props} className={cn("h-px w-8 bg-separator", className)} aria-hidden />;
+}
+
 export type RailDividerProps = { className?: string };
 
+/** Legacy name of `Sidebar.RailSeparator`. */
 export function RailDivider({ className }: RailDividerProps) {
-  return <div className={cn("h-px w-8 bg-separator", className)} aria-hidden />;
+  return <RailSeparator className={className} />;
 }