Sidebar

1"use client";2​3import * as React from "react";4import { Slot } from "radix-ui";5import { cva, type VariantProps } from "class-variance-authority";6import { SidebarSimpleIcon } from "@phosphor-icons/react/ssr";7​8import { Button } from "@/components/ui/button";9import { Input } from "@/components/ui/input";10import { Separator } from "@/components/ui/separator";11import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "@/components/ui/sheet";12import { Skeleton } from "@/components/ui/skeleton";13import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";14import { cn } from "@/lib/utils";15​16// The console's rail (Figma 427:2715: Dashboard - empty state, Agent Workspace - Inbox). The rail is 288px of white17// with a 1px #F3F1F5 edge; a 64px head holds the lockup 16px in. Rows are 38px with 8px corners on a 40px pitch, 12px in18// from the rail's sides: a filled glyph (the design's 22px, Phosphor's 24px) and a 14px regular ink label at 44px; the19// current row sits on the lilac. A labeled group starts 12px below the last one with a 13px purple label 16px in and its20// rows 8px under it; a group's action (the sliders glyph) sits 16px from the rail's right edge. The foot is ruled off21// above. `secondary` is the agent workspace's second rail: lilac, with the current row in white. Collapsing to icons22// narrows the rail to 63px (200ms, the strong ease-out); the keyboard shortcut toggles it instantly.23const SIDEBAR_WIDTH = "var(--ds-layout-rail)";24const SIDEBAR_WIDTH_ICON = "calc(var(--ds-space-9-5) + var(--ds-space-6) + 1px)";25const SIDEBAR_KEYBOARD_SHORTCUT = "b";26const MOBILE_QUERY = "(max-width: 767px)";27​28type SidebarContextProps = {29  state: "expanded" | "collapsed";30  open: boolean;31  setOpen: (open: boolean) => void;32  openMobile: boolean;33  setOpenMobile: (open: boolean) => void;34  isMobile: boolean;35  toggleSidebar: () => void;36};37​38const SidebarContext = React.createContext<SidebarContextProps | null>(null);39​40function useSidebar() {41  const context = React.useContext(SidebarContext);42  if (!context) throw new Error("useSidebar must be used within a SidebarProvider.");43  return context;44}45​46function useIsMobile() {47  const [isMobile, setIsMobile] = React.useState(false);48  React.useEffect(() => {49    const query = window.matchMedia(MOBILE_QUERY);50    const update = () => setIsMobile(query.matches);51    update();52    query.addEventListener("change", update);53    return () => query.removeEventListener("change", update);54  }, []);55  return isMobile;56}57​58/**59 * Holds whether the rail is open (expanded or collapsed on a desktop, shown in a sheet on a phone). Uncontrolled with60 * `defaultOpen`, or controlled with `open` and `onOpenChange`. Nothing is stored: keep the state yourself if it should61 * survive a reload. Cmd or Ctrl and B toggles it.62 */63function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }: React.ComponentProps<"div"> & { defaultOpen?: boolean; open?: boolean; onOpenChange?: (open: boolean) => void }) {64  const isMobile = useIsMobile();65  const [openMobile, setOpenMobile] = React.useState(false);66  const [instant, setInstant] = React.useState(false);67  const [internalOpen, setInternalOpen] = React.useState(defaultOpen);68  const open = openProp ?? internalOpen;69  const setOpen = React.useCallback(70    (value: boolean | ((value: boolean) => boolean)) => {71      const next = typeof value === "function" ? value(open) : value;72      if (setOpenProp) setOpenProp(next);73      else setInternalOpen(next);74    },75    [setOpenProp, open],76  );77  const toggleSidebar = React.useCallback(() => {78    setInstant(false);79    return isMobile ? setOpenMobile((o) => !o) : setOpen((o) => !o);80  }, [isMobile, setOpen]);81​82  React.useEffect(() => {83    // A shortcut is pressed many times a day: it changes the rail at once, with no motion.84    const onKeyDown = (event: KeyboardEvent) => {85      if (event.key !== SIDEBAR_KEYBOARD_SHORTCUT || !(event.metaKey || event.ctrlKey)) return;86      event.preventDefault();87      setInstant(true);88      if (isMobile) setOpenMobile((o) => !o);89      else setOpen((o) => !o);90    };91    window.addEventListener("keydown", onKeyDown);92    return () => window.removeEventListener("keydown", onKeyDown);93  }, [isMobile, setOpen]);94​95  const state = open ? "expanded" : "collapsed";96  const value = React.useMemo<SidebarContextProps>(() => ({ state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar }), [state, open, setOpen, isMobile, openMobile, toggleSidebar]);97​98  return (99    <SidebarContext.Provider value={value}>100      <TooltipProvider delayDuration={0}>101        <div102          data-slot="sidebar-wrapper"103          data-instant={instant || undefined}104          style={{ "--sidebar-width": SIDEBAR_WIDTH, "--sidebar-width-icon": SIDEBAR_WIDTH_ICON, ...style } as React.CSSProperties}105          className={cn("group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-subtle", className)}106          {...props}107        >108          {children}109        </div>110      </TooltipProvider>111    </SidebarContext.Provider>112  );113}114​115/**116 * The rail. `variant`: sidebar (the console's white rail), secondary (the lilac second rail), floating (a white panel117 * with Shadow/S, 8px from the edges) or inset (the rail on the lilac with the page as a raised white panel beside it).118 * `collapsible`: offcanvas (slides away), icon (narrows to its glyphs) or none.119 */120function Sidebar({121  side = "left",122  variant = "sidebar",123  collapsible = "offcanvas",124  className,125  children,126  ...props127}: React.ComponentProps<"div"> & { side?: "left" | "right"; variant?: "sidebar" | "secondary" | "floating" | "inset"; collapsible?: "offcanvas" | "icon" | "none" }) {128  const { isMobile, state, openMobile, setOpenMobile } = useSidebar();129  const ground = variant === "secondary" || variant === "inset" ? "bg-subtle" : "bg-surface";130​131  if (collapsible === "none") {132    return (133      <div data-slot="sidebar" data-variant={variant} className={cn("group/sidebar flex h-full w-(--sidebar-width) flex-col text-fg", ground, variant === "sidebar" && "border-r border-line-subtle", className)} {...props}>134        {children}135      </div>136    );137  }138​139  if (isMobile) {140    return (141      <Sheet open={openMobile} onOpenChange={setOpenMobile}>142        <SheetContent data-slot="sidebar" data-sidebar="sidebar" data-mobile="true" data-variant={variant} side={side} showCloseButton={false} className={cn("group/sidebar w-(--ds-layout-rail) max-w-[calc(100vw-var(--ds-space-12))] p-0 text-fg sm:max-w-(--ds-layout-rail) [&>button]:hidden", ground)}>143          <SheetHeader className="sr-only">144            <SheetTitle>Navigation</SheetTitle>145            <SheetDescription>The app's sections and settings.</SheetDescription>146          </SheetHeader>147          <div className="flex h-full w-full flex-col">{children}</div>148        </SheetContent>149      </Sheet>150    );151  }152​153  return (154    <div155      data-slot="sidebar"156      data-state={state}157      data-collapsible={state === "collapsed" ? collapsible : ""}158      data-variant={variant}159      data-side={side}160      className="group/sidebar peer hidden shrink-0 text-fg md:block"161    >162      {/* Holds the rail's room in the row, so the page beside it moves as it opens and closes. */}163      <div164        data-slot="sidebar-gap"165        className={cn(166          "relative h-full w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-out group-data-[collapsible=offcanvas]/sidebar:w-0 group-data-[collapsible=icon]/sidebar:w-(--sidebar-width-icon) in-data-[instant=true]:transition-none motion-reduce:transition-none",167          (variant === "floating" || variant === "inset") && "group-data-[collapsible=icon]/sidebar:w-[calc(var(--sidebar-width-icon)+var(--ds-space-4))]",168        )}169      >170        <div171          data-slot="sidebar-container"172          className={cn(173            "sticky top-0 z-10 flex h-svh max-h-full w-(--sidebar-width) overflow-hidden transition-[translate,width] duration-200 ease-out in-data-[instant=true]:transition-none motion-reduce:transition-none",174            side === "left" ? "left-0 group-data-[collapsible=offcanvas]/sidebar:-translate-x-full" : "ml-auto group-data-[collapsible=offcanvas]/sidebar:translate-x-full",175            variant === "floating" || variant === "inset" ? "p-2 group-data-[collapsible=icon]/sidebar:w-[calc(var(--sidebar-width-icon)+var(--ds-space-4))]" : "group-data-[collapsible=icon]/sidebar:w-(--sidebar-width-icon)",176            variant === "sidebar" && (side === "left" ? "border-r border-line-subtle" : "border-l border-line-subtle"),177            className,178          )}179          {...props}180        >181          <div data-sidebar="sidebar" data-slot="sidebar-inner" className={cn("flex h-full w-full flex-col", ground, variant === "floating" && "rounded-panel shadow-s")}>182            {children}183          </div>184        </div>185      </div>186    </div>187  );188}189​190function SidebarTrigger({ className, onClick, ...props }: React.ComponentProps<typeof Button>) {191  const { toggleSidebar, open, isMobile, openMobile } = useSidebar();192  return (193    <Button194      data-sidebar="trigger"195      data-slot="sidebar-trigger"196      variant="ghost"197      size="icon"198      aria-expanded={isMobile ? openMobile : open}199      className={cn("text-icon-default", className)}200      onClick={(event) => {201        onClick?.(event);202        toggleSidebar();203      }}204      {...props}205    >206      <SidebarSimpleIcon weight="fill" className="size-6" />207      <span className="sr-only">Toggle the rail</span>208    </Button>209  );210}211​212/** A thin strip along the rail's edge that toggles it, with a 2px line in the field edge color under the pointer. */213function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {214  const { toggleSidebar } = useSidebar();215  return (216    <button217      data-sidebar="rail"218      data-slot="sidebar-rail"219      aria-label="Toggle the rail"220      tabIndex={-1}221      onClick={toggleSidebar}222      title="Toggle the rail"223      className={cn(224        "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 outline-none after:absolute after:inset-y-0 after:left-1/2 after:w-0.5 after:bg-transparent after:transition-colors after:duration-150 after:ease-out hover:after:bg-line-field sm:flex",225        "in-data-[side=left]:-right-4 in-data-[side=left]:cursor-w-resize in-data-[side=right]:left-0 in-data-[side=right]:cursor-e-resize",226        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",227        className,228      )}229      {...props}230    />231  );232}233​234/** The page beside the rail. With the inset rail it becomes a raised white panel with Shadow/S and 10px corners. */235function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {236  return (237    <main238      data-slot="sidebar-inset"239      className={cn("relative flex w-full min-w-0 flex-1 flex-col bg-surface", "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-panel md:peer-data-[variant=inset]:shadow-s", className)}240      {...props}241    />242  );243}244​245function SidebarInput({ className, ...props }: React.ComponentProps<typeof Input>) {246  return <Input data-slot="sidebar-input" data-sidebar="input" className={cn("h-9 bg-surface", className)} {...props} />;247}248​249/** The rail's 64px head: the lockup 16px in, or the second rail's agent switcher. */250function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {251  return <div data-slot="sidebar-header" data-sidebar="header" className={cn("flex min-h-16 shrink-0 flex-col justify-center gap-2 px-3 py-3", className)} {...props} />;252}253​254/** The rail's foot (Help, the organization, the account, Collapse), ruled off above. */255function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {256  return <div data-slot="sidebar-footer" data-sidebar="footer" className={cn("flex shrink-0 flex-col gap-0.5 border-t border-line-subtle p-3", className)} {...props} />;257}258​259function SidebarSeparator({ className, ...props }: React.ComponentProps<typeof Separator>) {260  return <Separator data-slot="sidebar-separator" data-sidebar="separator" className={cn("mx-3 w-auto", className)} {...props} />;261}262​263function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {264  return (265    <div266      data-slot="sidebar-content"267      data-sidebar="content"268      className={cn("flex min-h-0 flex-1 flex-col overflow-auto overscroll-contain [scrollbar-width:none] group-data-[collapsible=icon]/sidebar:overflow-hidden", className)}269      {...props}270    />271  );272}273​274/** A group of rows. A labeled group keeps 12px above and below it; an unlabeled one (the rows under the head) none. */275function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {276  return <div data-slot="sidebar-group" data-sidebar="group" className={cn("relative flex w-full min-w-0 flex-col px-3 py-3 [&:not(:has(>[data-slot=sidebar-group-label]))]:py-0", className)} {...props} />;277}278​279/** A group's 13px purple label, 16px in from the rail; it folds away when the rail is narrowed to its glyphs. */280function SidebarGroupLabel({ className, asChild = false, ...props }: React.ComponentProps<"div"> & { asChild?: boolean }) {281  const Comp = asChild ? Slot.Root : "div";282  return (283    <Comp284      data-slot="sidebar-group-label"285      data-sidebar="group-label"286      className={cn(287        "mb-2 flex h-4 shrink-0 items-center px-1 font-sans text-body-sm leading-4 whitespace-nowrap text-fg-label outline-none transition-[margin,opacity] duration-200 ease-out focus-visible:outline-2 focus-visible:outline-focus-ring group-data-[collapsible=icon]/sidebar:-mt-4 group-data-[collapsible=icon]/sidebar:opacity-0 motion-reduce:transition-none [&>svg]:size-4 [&>svg]:shrink-0",288        className,289      )}290      {...props}291    />292  );293}294​295/** A group's action beside its label (the sliders glyph by Email and Agent2Agent): a 16px glyph, 16px from the edge. */296function SidebarGroupAction({ className, asChild = false, ...props }: React.ComponentProps<"button"> & { asChild?: boolean }) {297  const Comp = asChild ? Slot.Root : "button";298  return (299    <Comp300      data-slot="sidebar-group-action"301      data-sidebar="group-action"302      className={cn(303        "absolute top-2 right-3 flex size-6 cursor-pointer items-center justify-center rounded-xs text-icon-secondary outline-none transition-colors duration-150 ease-out hover:bg-subtle-hover hover:text-fg focus-visible:outline-2 focus-visible:outline-focus-ring group-data-[collapsible=icon]/sidebar:hidden motion-reduce:transition-none [&>svg]:size-4.5 [&>svg]:shrink-0 after:absolute after:-inset-2 md:after:hidden",304        className,305      )}306      {...props}307    />308  );309}310​311function SidebarGroupContent({ className, ...props }: React.ComponentProps<"div">) {312  return <div data-slot="sidebar-group-content" data-sidebar="group-content" className={cn("w-full", className)} {...props} />;313}314​315function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) {316  return <ul data-slot="sidebar-menu" data-sidebar="menu" className={cn("flex w-full min-w-0 flex-col gap-0.5", className)} {...props} />;317}318​319function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {320  return <li data-slot="sidebar-menu-item" data-sidebar="menu-item" className={cn("group/menu-item relative", className)} {...props} />;321}322​323// A row: the glyph sits 11px in (Phosphor's 24px box puts its center where the design's 22px glyph at 12px has it), the324// label 9px after it, at the design's 44px. Hover washes the row; the current row takes the lilac (white on the lilac325// rail). Narrowed to icons, the row is a 38px square around its glyph.326const sidebarMenuButtonVariants = cva(327  "peer/menu-button flex w-full cursor-pointer items-center gap-2.25 overflow-hidden rounded-control pr-3 pl-2.75 text-left font-sans text-fg outline-none transition-[background-color,color] duration-150 ease-out group-has-data-[sidebar=menu-action]/menu-item:pr-9 group-data-[collapsible=icon]/sidebar:size-9.5! group-data-[collapsible=icon]/sidebar:justify-center group-data-[collapsible=icon]/sidebar:p-0! group-data-[collapsible=icon]/sidebar:[&>span:not([data-slot=avatar])]:sr-only focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-focus-ring disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-subtle group-data-[variant=secondary]/sidebar:data-[active=true]:bg-surface group-data-[variant=inset]/sidebar:data-[active=true]:bg-surface data-[state=open]:bg-subtle motion-reduce:transition-none [&>span:last-child]:truncate [&>svg]:shrink-0 [&>svg:not([class*='size-'])]:size-6",328  {329    variants: {330      variant: {331        default: "hover:bg-subtle group-data-[variant=secondary]/sidebar:hover:bg-subtle-hover group-data-[variant=secondary]/sidebar:data-[active=true]:hover:bg-surface group-data-[variant=inset]/sidebar:hover:bg-subtle-hover",332        outline: "bg-surface shadow-s hover:bg-subtle",333      },334      size: {335        default: "h-9.5 text-body leading-tight",336        sm: "h-8 text-body-sm leading-tight [&>svg:not([class*='size-'])]:size-5",337        lg: "h-12 text-body leading-tight group-data-[collapsible=icon]/sidebar:p-0!",338      },339    },340    defaultVariants: { variant: "default", size: "default" },341  },342);343​344function SidebarMenuButton({345  asChild = false,346  isActive = false,347  variant = "default",348  size = "default",349  tooltip,350  className,351  ...props352}: React.ComponentProps<"button"> & { asChild?: boolean; isActive?: boolean; tooltip?: string | React.ComponentProps<typeof TooltipContent> } & VariantProps<typeof sidebarMenuButtonVariants>) {353  const Comp = asChild ? Slot.Root : "button";354  const { isMobile, state } = useSidebar();355  // The tooltip names a row only while the rail shows glyphs alone; otherwise it stays shut, so it never catches Escape.356  const [tipOpen, setTipOpen] = React.useState(false);357  const showTip = state === "collapsed" && !isMobile;358  const button = (359    <Comp360      data-slot="sidebar-menu-button"361      data-sidebar="menu-button"362      data-size={size}363      data-active={isActive || undefined}364      aria-current={isActive ? "page" : undefined}365      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}366      {...props}367    />368  );369  if (!tooltip) return button;370  const content = typeof tooltip === "string" ? { children: tooltip } : tooltip;371  return (372    <Tooltip open={showTip && tipOpen} onOpenChange={setTipOpen}>373      <TooltipTrigger asChild>{button}</TooltipTrigger>374      <TooltipContent side="right" align="center" {...content} />375    </Tooltip>376  );377}378​379/** An action at a row's right end (a row's more glyph). `showOnHover` keeps it hidden until the row is hovered or open. */380function SidebarMenuAction({ className, asChild = false, showOnHover = false, ...props }: React.ComponentProps<"button"> & { asChild?: boolean; showOnHover?: boolean }) {381  const Comp = asChild ? Slot.Root : "button";382  return (383    <Comp384      data-slot="sidebar-menu-action"385      data-sidebar="menu-action"386      className={cn(387        "absolute top-1.25 right-1.5 flex size-7 cursor-pointer items-center justify-center rounded-sm text-icon-secondary outline-none transition-[background-color,color,opacity] duration-150 ease-out hover:bg-subtle-hover hover:text-fg focus-visible:outline-2 focus-visible:outline-focus-ring group-data-[collapsible=icon]/sidebar:hidden motion-reduce:transition-none [&>svg]:size-5 [&>svg]:shrink-0 after:absolute after:-inset-2 md:after:hidden",388        "peer-data-[size=sm]/menu-button:top-0.5 peer-data-[size=lg]/menu-button:top-2.5",389        showOnHover && "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-fg md:opacity-0",390        className,391      )}392      {...props}393    />394  );395}396​397/**398 * A mark at a row's right end, 12px in (ADMIN by My Organisation): the pink edge, 6px corners and 12px pink text.399 * `count` is a quiet 13px number instead (unread mail). For a mark right after the label (BETA by Agent2Agent), put a400 * Badge with variant pink inside the row's button.401 */402function SidebarMenuBadge({ className, variant = "mark", ...props }: React.ComponentProps<"div"> & { variant?: "mark" | "count" }) {403  return (404    <div405      data-slot="sidebar-menu-badge"406      data-sidebar="menu-badge"407      className={cn(408        "pointer-events-none absolute top-2 right-3 flex h-5.5 items-center justify-center font-sans whitespace-nowrap select-none group-data-[collapsible=icon]/sidebar:hidden",409        "peer-data-[size=sm]/menu-button:top-1.25 peer-data-[size=lg]/menu-button:top-3.25",410        variant === "mark" ? "rounded-sm border border-pink bg-surface px-1.5 text-caption leading-tight text-pink" : "min-w-5 px-1 text-body-sm text-fg-muted tabular-nums",411        className,412      )}413      {...props}414    />415  );416}417​418/** A row's placeholder while the rail loads: a glyph square and a label of varying width on the lilac. */419function SidebarMenuSkeleton({ className, showIcon = false, ...props }: React.ComponentProps<"div"> & { showIcon?: boolean }) {420  // A width between 50 and 90 percent that differs from row to row but is the same on the server and in the browser.421  const id = React.useId();422  const width = `${50 + (([...id].reduce((sum, c) => (sum * 31 + c.charCodeAt(0)) % 997, 7) % 41))}%`;423  return (424    <div data-slot="sidebar-menu-skeleton" data-sidebar="menu-skeleton" className={cn("flex h-9.5 items-center gap-2.25 rounded-control pr-3 pl-2.75", className)} {...props}>425      {showIcon && <Skeleton className="size-5.5 rounded-sm" data-sidebar="menu-skeleton-icon" />}426      <Skeleton className="h-3.5 max-w-(--skeleton-width) flex-1 rounded-xs" data-sidebar="menu-skeleton-text" style={{ "--skeleton-width": width } as React.CSSProperties} />427    </div>428  );429}430​431/** Rows nested under a row, hung from a hairline under the parent's glyph. */432function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {433  return (434    <ul435      data-slot="sidebar-menu-sub"436      data-sidebar="menu-sub"437      className={cn("mx-5.5 mt-0.5 flex min-w-0 flex-col gap-0.5 border-l border-line-subtle py-0.5 pl-2.5 group-data-[collapsible=icon]/sidebar:hidden", className)}438      {...props}439    />440  );441}442​443function SidebarMenuSubItem({ className, ...props }: React.ComponentProps<"li">) {444  return <li data-slot="sidebar-menu-sub-item" data-sidebar="menu-sub-item" className={cn("group/menu-sub-item relative", className)} {...props} />;445}446​447function SidebarMenuSubButton({ asChild = false, size = "md", isActive = false, className, ...props }: React.ComponentProps<"a"> & { asChild?: boolean; size?: "sm" | "md"; isActive?: boolean }) {448  const Comp = asChild ? Slot.Root : "a";449  return (450    <Comp451      data-slot="sidebar-menu-sub-button"452      data-sidebar="menu-sub-button"453      data-size={size}454      data-active={isActive || undefined}455      aria-current={isActive ? "page" : undefined}456      className={cn(457        "flex h-8 min-w-0 cursor-pointer items-center gap-2 overflow-hidden rounded-control px-2.5 font-sans text-fg-secondary outline-none transition-[background-color,color] duration-150 ease-out hover:bg-subtle hover:text-fg focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-focus-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-subtle data-[active=true]:text-fg group-data-[variant=secondary]/sidebar:hover:bg-subtle-hover group-data-[variant=secondary]/sidebar:data-[active=true]:bg-surface motion-reduce:transition-none [&>span:last-child]:truncate [&>svg]:size-5 [&>svg]:shrink-0",458        size === "sm" ? "text-body-sm" : "text-body",459        className,460      )}461      {...props}462    />463  );464}465​466export {467  Sidebar,468  SidebarContent,469  SidebarFooter,470  SidebarGroup,471  SidebarGroupAction,472  SidebarGroupContent,473  SidebarGroupLabel,474  SidebarHeader,475  SidebarInput,476  SidebarInset,477  SidebarMenu,478  SidebarMenuAction,479  SidebarMenuBadge,480  SidebarMenuButton,481  SidebarMenuItem,482  SidebarMenuSkeleton,483  SidebarMenuSub,484  SidebarMenuSubButton,485  SidebarMenuSubItem,486  SidebarProvider,487  SidebarRail,488  SidebarSeparator,489  SidebarTrigger,490  useSidebar,491};