banhaten 0.2.0 → 0.4.0

package/registry/components/sidebar.tsx

@@ -2,8 +2,24 @@
 
 import * as React from "react"
 import { Slot } from "@radix-ui/react-slot"
-import { PanelLeftIcon } from "lucide-react"
+import {
+  Building2Icon,
+  ChevronDownIcon,
+  ChevronRightIcon,
+  ChevronsUpDownIcon,
+  FolderIcon,
+  PanelLeftIcon,
+  SearchIcon,
+  SparklesIcon,
+  UserIcon,
+} from "lucide-react"
 
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
 import { cn } from "@/lib/utils"
 
 type SidebarContextValue = {
@@ -23,21 +39,94 @@ type SidebarProps = React.ComponentProps<"aside"> & {
   side?: "start" | "end"
 }
 type SidebarSectionProps = React.ComponentProps<"div">
-type SidebarGroupLabelProps = React.ComponentProps<"div">
+type SidebarHeaderActionProps = React.ComponentProps<"button"> & {
+  label?: string
+}
+type SidebarHeaderBrandProps = React.ComponentProps<"div"> & {
+  brand?: React.ReactNode
+  collapseAction?: React.ReactNode | false
+  logo?: React.ReactNode
+  onSearchClick?: React.MouseEventHandler<HTMLButtonElement>
+  searchAction?: React.ReactNode | false
+  searchLabel?: string
+}
+type SidebarWorkspaceVariant = "actions" | "card"
+type SidebarHeaderWorkspaceSwitchProps = React.ComponentProps<"div"> & {
+  collapseAction?: React.ReactNode | false
+  image?: React.ReactNode
+  label?: React.ReactNode
+  onSearchClick?: React.MouseEventHandler<HTMLButtonElement>
+  onWorkspaceClick?: React.MouseEventHandler<HTMLButtonElement>
+  searchAction?: React.ReactNode | false
+  searchLabel?: string
+  supportText?: React.ReactNode
+  variant?: SidebarWorkspaceVariant
+  workspaceLabel?: string
+}
+type SidebarFooterUserProps = React.ComponentProps<"button"> & {
+  avatar?: React.ReactNode
+  name?: React.ReactNode
+  supportText?: React.ReactNode
+  trailingIcon?: React.ReactNode
+  variant?: "default" | "supporting-text"
+}
+type SidebarGroupLabelProps = React.ComponentProps<"div"> & {
+  actions?: React.ReactNode
+  expandIcon?: React.ReactNode
+  expandable?: boolean
+}
+type SidebarGroupActionProps = React.ComponentProps<"button"> & {
+  label?: string
+}
 type SidebarMenuProps = React.ComponentProps<"ul">
 type SidebarMenuItemProps = React.ComponentProps<"li">
+type SidebarInteractionState = "default" | "hover" | "active" | "focus"
+type SidebarMenuButtonVariant =
+  | "default"
+  | "avatar"
+  | "level2"
+  | "level2-line"
 type SidebarMenuButtonProps = React.ComponentProps<"button"> & {
   active?: boolean
   asChild?: boolean
+  badge?: React.ReactNode
   icon?: React.ReactNode
+  state?: SidebarInteractionState
+  supportText?: React.ReactNode
+  tooltip?: React.ReactNode
+  trailingIcon?: React.ReactNode
+  variant?: SidebarMenuButtonVariant
+}
+type SidebarMenuBadgeProps = React.ComponentProps<"span">
+type SidebarMenuSubProps = React.ComponentProps<"ul">
+type SidebarMenuSubButtonProps = Omit<SidebarMenuButtonProps, "variant"> & {
+  showLine?: boolean
+}
+type SidebarMenuTreeItemProps = React.ComponentProps<"button"> & {
+  active?: boolean
+  asChild?: boolean
+  expanded?: boolean
+  icon?: React.ReactNode
+  level?: 1 | 2 | 3 | 4
+  showChevron?: boolean
+  state?: SidebarInteractionState
+}
+type SidebarTreeGroupProps = SidebarSectionProps & {
+  actions?: React.ReactNode
+  expandable?: boolean
+  expandIcon?: React.ReactNode
+  label?: React.ReactNode
 }
 type SidebarToggleProps = React.ComponentProps<"button">
 type SidebarTriggerProps = SidebarToggleProps
 type SidebarRailProps = React.ComponentProps<"button">
-type SidebarInsetProps = React.ComponentProps<"main">
+type SidebarInsetProps = React.ComponentProps<"div"> & {
+  asChild?: boolean
+}
 
 const SidebarContext = React.createContext<SidebarContextValue | null>(null)
 
+/** Owns the controlled or uncontrolled collapsed state for a sidebar composition. */
 function SidebarProvider({
   children,
   className,
@@ -74,36 +163,42 @@ function SidebarProvider({
 
   return (
     <SidebarContext.Provider value={context}>
-      <div
-        data-collapsed={resolvedCollapsed ? "true" : undefined}
-        data-slot="sidebar-provider"
-        dir={dir}
-        className={cn("min-w-0", className)}
-        {...props}
-      >
-        {children}
-      </div>
+      <TooltipProvider delayDuration={0}>
+        <div
+          data-collapsed={resolvedCollapsed ? "true" : "false"}
+          data-slot="sidebar-provider"
+          dir={dir}
+          className={cn("relative min-w-0", className)}
+          {...props}
+        >
+          {children}
+        </div>
+      </TooltipProvider>
     </SidebarContext.Provider>
   )
 }
 
+/** The 280px navigation surface that contracts to the Figma 48px icon rail. */
 const Sidebar = React.forwardRef<HTMLElement, SidebarProps>(function Sidebar(
   { className, side = "start", ...props },
   ref
 ) {
-  const { collapsed, dir } = useSidebarContext()
+  const context = React.useContext(SidebarContext)
+  const collapsed = context?.collapsed ?? false
+  const dir = context?.dir
 
   return (
     <aside
-      data-collapsed={collapsed ? "true" : undefined}
+      data-collapsed={collapsed ? "true" : "false"}
       data-side={side}
       data-slot="sidebar"
       dir={dir}
       ref={ref}
       className={cn(
-        "group/sidebar flex h-full min-h-[var(--bh-space-19xl-384)] w-[var(--bh-sidebar-width)] max-w-full shrink-0 flex-col overflow-hidden bg-[var(--bh-sidebar-bg)] text-[var(--bh-content-default)] shadow-[var(--shadow-sidebar)] transition-[width,background-color]",
+        "group/sidebar flex h-full min-h-[var(--bh-space-19xl-384)] w-[var(--bh-sidebar-width)] max-w-full shrink-0 flex-col overflow-hidden bg-[var(--bh-sidebar-bg)] text-[var(--bh-content-default)] transition-[width,background-color]",
+        "border-e border-[var(--bh-sidebar-border)]",
         "data-[collapsed=true]:w-[var(--bh-sidebar-width-collapsed)] data-[collapsed=true]:bg-[var(--bh-sidebar-bg-collapsed)]",
-        side === "end" && "ms-auto",
+        side === "end" && "ms-auto border-e-0 border-s",
         className
       )}
       {...props}
@@ -111,12 +206,14 @@ const Sidebar = React.forwardRef<HTMLElement, SidebarProps>(function Sidebar(
   )
 })
 
+/** Header slot with the Figma 10px expanded and 4px/8px collapsed insets. */
 function SidebarHeader({ className, ...props }: SidebarSectionProps) {
   return (
     <div
       data-slot="sidebar-header"
       className={cn(
-        "flex min-h-[var(--bh-sidebar-item-height)] shrink-0 items-center gap-[var(--bh-sidebar-item-gap)] px-[var(--bh-sidebar-padding)] py-[var(--bh-space-xl-12)]",
+        "flex shrink-0 flex-col items-start gap-[var(--bh-space-lg-10)] overflow-hidden bg-[var(--bh-sidebar-bg)] p-[var(--bh-sidebar-padding)]",
+        "group-data-[collapsed=true]/sidebar:items-center group-data-[collapsed=true]/sidebar:px-[var(--bh-space-xs-4)] group-data-[collapsed=true]/sidebar:py-[var(--bh-space-md-8)]",
         className
       )}
       {...props}
@@ -124,12 +221,262 @@ function SidebarHeader({ className, ...props }: SidebarSectionProps) {
   )
 }
 
+/** Compact 28px ghost action used by Figma sidebar headers. */
+const SidebarHeaderAction = React.forwardRef<
+  HTMLButtonElement,
+  SidebarHeaderActionProps
+>(function SidebarHeaderAction(
+  { "aria-label": ariaLabel, children, className, label, type = "button", ...props },
+  ref
+) {
+  return (
+    <button
+      aria-label={ariaLabel ?? label ?? "Sidebar action"}
+      data-slot="sidebar-header-action"
+      ref={ref}
+      type={type}
+      className={cn(
+        "inline-flex size-[var(--bh-sidebar-header-action-size)] shrink-0 items-center justify-center rounded-[var(--bh-radius-full)] border border-transparent bg-[var(--bh-interactive-ghost-default)] text-[var(--bh-content-default)] outline-none transition-[background-color,border-color,box-shadow,color]",
+        "hover:bg-[var(--bh-interactive-ghost-hover)] focus-visible:border-[var(--bh-border-focus)] focus-visible:shadow-[var(--shadow-button-focus)]",
+        className
+      )}
+      {...props}
+    >
+      <span
+        aria-hidden="true"
+        data-slot="sidebar-header-action-icon"
+        className="inline-flex size-[var(--bh-sidebar-icon-slot-size)] items-center justify-center [&_svg]:size-[var(--bh-sidebar-icon-size)] [&_svg]:shrink-0"
+      >
+        {children}
+      </span>
+    </button>
+  )
+})
+
+/** Brand header with optional search and collapse actions; actions disappear on the icon rail. */
+function SidebarHeaderBrand({
+  brand = "Banhaten",
+  className,
+  collapseAction,
+  logo,
+  onSearchClick,
+  searchAction,
+  searchLabel = "Search",
+  ...props
+}: SidebarHeaderBrandProps) {
+  const { collapsed } = useSidebarContext()
+
+  return (
+    <div
+      data-collapsed={collapsed ? "true" : "false"}
+      data-slot="sidebar-header-brand"
+      className={cn(
+        "flex h-[var(--bh-sidebar-brand-height)] w-full items-center justify-between py-[var(--bh-space-xs-4)] ps-[var(--bh-space-sm-6)] pe-[var(--bh-space-xs-4)]",
+        collapsed &&
+          "size-[var(--bh-sidebar-compact-control-size)] justify-center gap-[var(--bh-space-md-8)] p-0",
+        className
+      )}
+      {...props}
+    >
+      <span
+        data-slot="sidebar-brand-content"
+        className="flex min-w-0 items-center gap-[var(--bh-space-md-8)]"
+      >
+        <span
+          data-slot="sidebar-brand-logo"
+          className="inline-flex size-[var(--bh-sidebar-header-action-size)] shrink-0 items-center justify-center overflow-hidden rounded-[var(--bh-radius-full)] [&>*]:size-full"
+        >
+          {logo ?? (
+            <span className="inline-flex size-full items-center justify-center bg-[var(--bh-bg-brand-default)] text-[var(--bh-content-on-brand)]">
+              <SparklesIcon
+                aria-hidden="true"
+                className="size-[var(--bh-sidebar-icon-size)]"
+              />
+            </span>
+          )}
+        </span>
+        {!collapsed ? (
+          <span
+            data-slot="sidebar-brand-name"
+            dir="auto"
+            className="truncate text-[length:var(--bh-text-body-xl-semibold-font-size)] font-[var(--bh-text-body-xl-semibold-font-weight)] leading-[var(--bh-text-body-xl-semibold-line-height)] tracking-[var(--bh-text-body-xl-semibold-letter-spacing)]"
+          >
+            {brand}
+          </span>
+        ) : null}
+      </span>
+
+      {!collapsed ? (
+        <span
+          data-slot="sidebar-brand-actions"
+          className="flex shrink-0 items-center gap-[var(--bh-space-sm-6)]"
+        >
+          {searchAction === false
+            ? null
+            : searchAction ?? (
+                <SidebarHeaderAction label={searchLabel} onClick={onSearchClick}>
+                  <SearchIcon aria-hidden="true" />
+                </SidebarHeaderAction>
+              )}
+          {collapseAction === false ? null : collapseAction ?? <SidebarTrigger />}
+        </span>
+      ) : null}
+    </div>
+  )
+}
+
+/** Workspace switcher in either the header-actions or bordered card treatment. */
+function SidebarHeaderWorkspaceSwitch({
+  className,
+  collapseAction,
+  image,
+  label = "Acme Inc",
+  onSearchClick,
+  onWorkspaceClick,
+  searchAction,
+  searchLabel = "Search",
+  supportText = "Pro plan",
+  variant = "actions",
+  workspaceLabel = "Switch workspace",
+  ...props
+}: SidebarHeaderWorkspaceSwitchProps) {
+  const { collapsed } = useSidebarContext()
+  const card = variant === "card"
+
+  const workspaceButton = (
+    <button
+      aria-label={workspaceLabel}
+      data-slot="sidebar-workspace-trigger"
+      onClick={onWorkspaceClick}
+      type="button"
+      className={cn(
+        "group/workspace relative flex min-w-0 items-center text-start outline-none transition-[background-color,border-color,box-shadow]",
+        card
+          ? "h-[var(--bh-sidebar-workspace-card-height)] w-full gap-[var(--bh-space-md-8)] overflow-hidden rounded-[var(--bh-radius-lg-8)] border border-[var(--bh-border-subtle)] bg-[var(--bh-bg-default)] p-[var(--bh-space-sm-6)] hover:bg-[var(--bh-bg-default-hover)] focus-visible:border-[length:var(--bh-border-width-strong)] focus-visible:border-[var(--bh-border-focus)]"
+          : "h-[var(--bh-sidebar-compact-control-size)] w-[var(--bh-sidebar-workspace-trigger-width)] max-w-[var(--bh-sidebar-workspace-trigger-max-width)] gap-[var(--bh-space-md-8)] rounded-[var(--bh-radius-md-6)] p-[var(--bh-space-sm-6)] hover:bg-[var(--bh-interactive-ghost-hover)] focus-visible:border-[length:var(--bh-border-width-strong)] focus-visible:border-[var(--bh-border-focus)]",
+        collapsed && card &&
+          "size-[var(--bh-sidebar-compact-control-size)] justify-center gap-0 p-0",
+        collapsed && !card &&
+          "size-[var(--bh-sidebar-item-height-collapsed)] max-w-[var(--bh-sidebar-item-height-collapsed)] justify-center gap-0 p-0"
+      )}
+    >
+      <span
+        data-slot="sidebar-workspace-image"
+        className={cn(
+          "inline-flex shrink-0 items-center justify-center overflow-hidden [&>*]:size-full",
+          card
+            ? "size-[var(--bh-space-6xl-32)] rounded-[var(--bh-radius-md-6)]"
+            : "size-[var(--bh-space-5xl-24)] rounded-[var(--bh-radius-lg-8)]",
+          collapsed && !card &&
+            "size-[var(--bh-sidebar-header-action-size)] rounded-[var(--bh-radius-full)]"
+        )}
+      >
+        {image ?? (
+          <Building2Icon
+            aria-hidden="true"
+            className="size-[var(--bh-sidebar-icon-size)]"
+          />
+        )}
+      </span>
+
+      {!collapsed ? (
+        card ? (
+          <span className="flex min-w-0 flex-1 flex-col items-start justify-center">
+            <span
+              data-slot="sidebar-workspace-label"
+              dir="auto"
+              className="w-full truncate text-[length:var(--bh-text-body-sm-medium-font-size)] font-[var(--bh-text-body-sm-medium-font-weight)] leading-[var(--bh-text-body-sm-medium-line-height)] tracking-[var(--bh-text-body-sm-medium-letter-spacing)]"
+            >
+              {label}
+            </span>
+            <span
+              data-slot="sidebar-workspace-support"
+              dir="auto"
+              className="w-full truncate text-[length:var(--bh-text-body-2xs-regular-font-size)] font-[var(--bh-text-body-2xs-regular-font-weight)] leading-[var(--bh-text-body-2xs-regular-line-height)] tracking-[var(--bh-text-body-2xs-regular-letter-spacing)] text-[var(--bh-content-subtle)]"
+            >
+              {supportText}
+            </span>
+          </span>
+        ) : (
+          <span className="flex min-w-0 items-center gap-[var(--bh-space-xxs-2)]">
+            <span
+              data-slot="sidebar-workspace-label"
+              dir="auto"
+              className="truncate text-[length:var(--bh-text-body-sm-medium-font-size)] font-[var(--bh-text-body-sm-medium-font-weight)] leading-[var(--bh-text-body-sm-medium-line-height)] tracking-[var(--bh-text-body-sm-medium-letter-spacing)]"
+            >
+              {label}
+            </span>
+            <ChevronDownIcon
+              aria-hidden="true"
+              className="size-[var(--bh-space-3xl-16)] shrink-0"
+              data-rtl-flip="true"
+            />
+          </span>
+        )
+      ) : !card ? (
+        <span
+          aria-hidden="true"
+          data-slot="sidebar-workspace-caret"
+          className="absolute end-0 top-1/2 inline-flex size-[var(--bh-space-3xl-16)] -translate-y-1/2 items-center justify-center rounded-[var(--bh-radius-full)] border border-[var(--bh-border-subtle)] bg-[var(--bh-bg-default)]"
+        >
+          <ChevronDownIcon className="size-[var(--bh-space-xl-12)]" />
+        </span>
+      ) : null}
+
+      {card && !collapsed ? (
+        <ChevronsUpDownIcon
+          aria-hidden="true"
+          className="size-[var(--bh-space-3xl-16)] shrink-0 text-[var(--bh-content-muted)]"
+        />
+      ) : null}
+    </button>
+  )
+
+  return (
+    <div
+      data-collapsed={collapsed ? "true" : "false"}
+      data-slot="sidebar-header-workspace-switch"
+      data-variant={variant}
+      className={cn(
+        "flex w-full items-center",
+        card
+          ? "h-[var(--bh-sidebar-workspace-card-height)]"
+          : "h-[var(--bh-sidebar-compact-control-size)] justify-between pe-[var(--bh-space-md-8)]",
+        collapsed && card && "size-[var(--bh-sidebar-compact-control-size)]",
+        collapsed && !card &&
+          "size-[var(--bh-sidebar-item-height-collapsed)] justify-center p-0",
+        className
+      )}
+      {...props}
+    >
+      {workspaceButton}
+      {!card && !collapsed ? (
+        <span
+          data-slot="sidebar-workspace-actions"
+          className="flex shrink-0 items-center gap-[var(--bh-space-sm-6)]"
+        >
+          {searchAction === false
+            ? null
+            : searchAction ?? (
+                <SidebarHeaderAction label={searchLabel} onClick={onSearchClick}>
+                  <SearchIcon aria-hidden="true" />
+                </SidebarHeaderAction>
+              )}
+          {collapseAction === false ? null : collapseAction ?? <SidebarTrigger />}
+        </span>
+      ) : null}
+    </div>
+  )
+}
+
+/** Scrollable content region with Figma's expanded and rail insets. */
 function SidebarBody({ className, ...props }: SidebarSectionProps) {
   return (
     <div
       data-slot="sidebar-body"
       className={cn(
-        "min-h-0 flex-1 overflow-auto px-[var(--bh-sidebar-padding)] py-[var(--bh-space-xl-12)]",
+        "min-h-0 flex-1 overflow-auto px-[var(--bh-space-xl-12)] py-0",
+        "group-data-[collapsed=true]/sidebar:px-0",
         className
       )}
       {...props}
@@ -137,12 +484,14 @@ function SidebarBody({ className, ...props }: SidebarSectionProps) {
   )
 }
 
+/** Bottom-pinned footer with the matching expanded and collapsed padding. */
 function SidebarFooter({ className, ...props }: SidebarSectionProps) {
   return (
     <div
       data-slot="sidebar-footer"
       className={cn(
-        "shrink-0 border-t border-[var(--bh-sidebar-border)] px-[var(--bh-sidebar-padding)] py-[var(--bh-space-xl-12)]",
+        "mt-auto shrink-0 border-t border-[var(--bh-sidebar-border)] bg-[var(--bh-sidebar-bg)] px-[var(--bh-sidebar-padding)] py-[var(--bh-space-md-8)]",
+        "group-data-[collapsed=true]/sidebar:p-[var(--bh-space-xs-4)]",
         className
       )}
       {...props}
@@ -150,17 +499,132 @@ function SidebarFooter({ className, ...props }: SidebarSectionProps) {
   )
 }
 
+/** User switcher used in the footer, with 48px supporting and 40px compact rows. */
+const SidebarFooterUser = React.forwardRef<
+  HTMLButtonElement,
+  SidebarFooterUserProps
+>(function SidebarFooterUser(
+  {
+    "aria-label": ariaLabel,
+    avatar,
+    className,
+    name = "Username",
+    supportText = "user@example.com",
+    trailingIcon,
+    type = "button",
+    variant = "supporting-text",
+    ...props
+  },
+  ref
+) {
+  const { collapsed } = useSidebarContext()
+  const supporting = variant === "supporting-text"
+  const resolvedLabel =
+    ariaLabel ?? (typeof name === "string" ? name : "Open user menu")
+
+  return (
+    <button
+      aria-label={resolvedLabel}
+      data-collapsed={collapsed ? "true" : "false"}
+      data-slot="sidebar-footer-user"
+      data-variant={variant}
+      ref={ref}
+      type={type}
+      className={cn(
+        "flex w-full items-center rounded-[var(--bh-radius-lg-8)] text-start outline-none transition-[background-color,border-color,box-shadow]",
+        supporting
+          ? "h-[var(--bh-space-8xl-48)] gap-[var(--bh-space-xs-4)] p-[var(--bh-space-sm-6)] hover:bg-[var(--bh-interactive-ghost-hover)]"
+          : "h-[var(--bh-sidebar-item-height-collapsed)] gap-[var(--bh-space-xs-4)] border border-[var(--bh-border-subtle)] bg-[var(--bh-bg-default)] px-[var(--bh-space-sm-6)] py-[var(--bh-space-md-8)] hover:bg-[var(--bh-bg-default-hover)]",
+        "focus-visible:border-[length:var(--bh-border-width-strong)] focus-visible:border-[var(--bh-border-focus)]",
+        collapsed &&
+          "mx-auto size-[var(--bh-sidebar-compact-control-size)] justify-center gap-0 rounded-[var(--bh-radius-full)] border-0 p-0 hover:bg-[var(--bh-interactive-ghost-hover)]",
+        className
+      )}
+      {...props}
+    >
+      <span
+        data-slot="sidebar-footer-user-content"
+        className={cn(
+          "flex min-w-0 flex-1 items-center gap-[var(--bh-space-md-8)] px-[var(--bh-space-xxs-2)]",
+          collapsed &&
+            "size-[var(--bh-sidebar-compact-control-size)] flex-none justify-center gap-0 p-0"
+        )}
+      >
+        <span
+          data-slot="sidebar-footer-user-avatar"
+          className={cn(
+            "inline-flex shrink-0 items-center justify-center overflow-hidden rounded-[var(--bh-radius-full)] [&>*]:size-full",
+            supporting ? "size-[var(--bh-space-6xl-32)]" : "size-[var(--bh-space-5xl-24)]",
+            collapsed && "size-[var(--bh-sidebar-compact-control-size)]"
+          )}
+        >
+          {avatar ?? (
+            <UserIcon
+              aria-hidden="true"
+              className="size-[var(--bh-sidebar-icon-size)]"
+            />
+          )}
+        </span>
+        {!collapsed ? (
+          <span
+            data-slot="sidebar-footer-user-text"
+            className="flex min-w-0 flex-1 flex-col items-start justify-center"
+          >
+            <span
+              data-slot="sidebar-footer-user-name"
+              dir="auto"
+              className="w-full truncate text-[length:var(--bh-text-body-sm-medium-font-size)] font-[var(--bh-text-body-sm-medium-font-weight)] leading-[var(--bh-text-body-sm-medium-line-height)] tracking-[var(--bh-text-body-sm-medium-letter-spacing)]"
+            >
+              {name}
+            </span>
+            {supporting ? (
+              <span
+                data-slot="sidebar-footer-user-support"
+                dir="auto"
+                className="w-full truncate text-[length:var(--bh-text-body-2xs-regular-font-size)] font-[var(--bh-text-body-2xs-regular-font-weight)] leading-[var(--bh-text-body-2xs-regular-line-height)] tracking-[var(--bh-text-body-2xs-regular-letter-spacing)] text-[var(--bh-content-subtle)]"
+              >
+                {supportText}
+              </span>
+            ) : null}
+          </span>
+        ) : null}
+      </span>
+      {!collapsed ? (
+        <span
+          aria-hidden="true"
+          data-slot="sidebar-footer-user-trailing"
+          className="inline-flex size-[var(--bh-space-4xl-20)] shrink-0 items-center justify-center text-[var(--bh-content-muted)] [&_svg]:size-[var(--bh-space-3xl-16)]"
+        >
+          {trailingIcon ?? <ChevronsUpDownIcon />}
+        </span>
+      ) : null}
+    </button>
+  )
+})
+
+/** A Figma sidebar group: 12px top padding, 6px bottom padding, and no menu gap. */
 function SidebarGroup({ className, ...props }: SidebarSectionProps) {
   return (
     <div
       data-slot="sidebar-group"
-      className={cn("grid gap-[var(--bh-space-md-8)]", className)}
+      className={cn(
+        "flex w-full flex-col items-start pb-[var(--bh-space-sm-6)] pt-[var(--bh-space-xl-12)]",
+        className
+      )}
       {...props}
     />
   )
 }
 
-function SidebarGroupLabel({ className, ...props }: SidebarGroupLabelProps) {
+/** Group label that reveals its disclosure and actions on hover or keyboard focus. */
+function SidebarGroupLabel({
+  actions,
+  children,
+  className,
+  expandIcon,
+  expandable = false,
+  ...props
+}: SidebarGroupLabelProps) {
   const { collapsed } = useSidebarContext()
 
   if (collapsed) return null
@@ -168,26 +632,84 @@ function SidebarGroupLabel({ className, ...props }: SidebarGroupLabelProps) {
   return (
     <div
       data-slot="sidebar-group-label"
-      dir="auto"
       className={cn(
-        "px-[var(--bh-sidebar-item-padding-x)] text-[length:var(--bh-text-body-xs-medium-font-size)] font-[var(--bh-text-body-xs-medium-font-weight)] uppercase leading-[var(--bh-text-body-xs-medium-line-height)] tracking-[var(--bh-text-body-xs-medium-letter-spacing)] text-[var(--bh-content-muted)]",
+        "group/label flex h-[var(--bh-space-5xl-24)] w-full items-center gap-[var(--bh-space-xs-4)] rounded-[var(--bh-radius-lg-8)] px-[var(--bh-space-sm-6)] pb-[var(--bh-space-xs-4)]",
         className
       )}
       {...props}
-    />
+    >
+      <span
+        data-slot="sidebar-group-label-content"
+        className="flex min-w-0 flex-1 items-center gap-[var(--bh-space-xxxs-1)]"
+      >
+        <span
+          data-slot="sidebar-group-label-text"
+          dir="auto"
+          className="truncate text-[length:var(--bh-text-body-sm-medium-font-size)] font-[var(--bh-text-body-sm-medium-font-weight)] leading-[var(--bh-text-body-sm-medium-line-height)] tracking-[var(--bh-text-body-sm-medium-letter-spacing)] text-[var(--bh-content-muted)]"
+        >
+          {children}
+        </span>
+        {expandable ? (
+          <span
+            aria-hidden="true"
+            data-slot="sidebar-group-label-expand"
+            className="inline-flex size-[var(--bh-space-3xl-16)] shrink-0 items-center justify-center opacity-[var(--bh-opacity-0)] transition-opacity group-hover/label:opacity-[var(--bh-opacity-100)] group-focus-within/label:opacity-[var(--bh-opacity-100)] [&_svg]:size-full"
+          >
+            {expandIcon ?? <ChevronRightIcon data-rtl-flip="true" />}
+          </span>
+        ) : null}
+      </span>
+      {actions ? (
+        <span
+          data-slot="sidebar-group-label-actions"
+          className="flex shrink-0 items-center gap-[var(--bh-space-xs-4)] opacity-[var(--bh-opacity-0)] transition-opacity group-hover/label:opacity-[var(--bh-opacity-100)] group-focus-within/label:opacity-[var(--bh-opacity-100)]"
+        >
+          {actions}
+        </span>
+      ) : null}
+    </div>
   )
 }
 
+/** 20px group-label icon slot matching the Default, Hover, and Focus variants. */
+const SidebarGroupAction = React.forwardRef<
+  HTMLButtonElement,
+  SidebarGroupActionProps
+>(function SidebarGroupAction(
+  { "aria-label": ariaLabel, children, className, label, type = "button", ...props },
+  ref
+) {
+  return (
+    <button
+      aria-label={ariaLabel ?? label ?? "Group action"}
+      data-slot="sidebar-group-action"
+      ref={ref}
+      type={type}
+      className={cn(
+        "inline-flex size-[var(--bh-sidebar-icon-slot-size)] items-center justify-center rounded-[var(--bh-control-sm)] border border-transparent bg-[var(--bh-interactive-ghost-default)] text-[var(--bh-content-muted)] outline-none transition-[background-color,border-color,color]",
+        "hover:bg-[var(--bh-interactive-ghost-hover)] hover:text-[var(--bh-content-default)] focus-visible:border-[var(--bh-border-focus)]",
+        "[&_svg]:size-[var(--bh-sidebar-icon-size)] [&_svg]:shrink-0",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </button>
+  )
+})
+
+/** List wrapper for contiguous 32px sidebar menu rows. */
 function SidebarMenu({ className, ...props }: SidebarMenuProps) {
   return (
     <ul
       data-slot="sidebar-menu"
-      className={cn("m-0 grid list-none gap-[var(--bh-space-xs-4)] p-0", className)}
+      className={cn("m-0 flex w-full list-none flex-col p-0", className)}
       {...props}
     />
   )
 }
 
+/** Semantic list item wrapper. */
 function SidebarMenuItem({ className, ...props }: SidebarMenuItemProps) {
   return (
     <li
@@ -198,50 +720,359 @@ function SidebarMenuItem({ className, ...props }: SidebarMenuItemProps) {
   )
 }
 
+/** Native 24px neutral count badge for sidebar rows. */
+function SidebarMenuBadge({ children, className, ...props }: SidebarMenuBadgeProps) {
+  return (
+    <span
+      data-slot="sidebar-menu-badge"
+      className={cn(
+        "inline-flex h-[var(--bh-space-5xl-24)] min-w-[var(--bh-space-5xl-24)] shrink-0 items-center justify-center rounded-[var(--bh-radius-full)] bg-[var(--bh-bg-neutral-subtle)] px-[var(--bh-space-xs-4)] text-center text-[length:var(--bh-text-body-3xs-semibold-font-size)] font-[var(--bh-text-body-3xs-semibold-font-weight)] leading-[var(--bh-text-body-3xs-semibold-line-height)] tracking-[var(--bh-text-body-3xs-semibold-letter-spacing)] text-[var(--bh-content-default)]",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </span>
+  )
+}
+
+/** Default, avatar, Level 2, and Level 2 line menu variants from the Figma set. */
 const SidebarMenuButton = React.forwardRef<
   HTMLButtonElement,
   SidebarMenuButtonProps
 >(function SidebarMenuButton(
-  { active = false, asChild = false, children, className, icon, ...props },
+  {
+    "aria-label": ariaLabel,
+    active = false,
+    asChild = false,
+    badge,
+    children,
+    className,
+    icon,
+    state = "default",
+    supportText,
+    tooltip,
+    trailingIcon,
+    type = "button",
+    variant = "default",
+    ...props
+  },
   ref
 ) {
-  const { collapsed } = useSidebarContext()
-  const Comp = asChild ? Slot : "button"
+  const { collapsed, dir } = useSidebarContext()
+  const isLevel2 = variant === "level2" || variant === "level2-line"
+  const label = getSlottableLabel(children, asChild)
+  const resolvedLabel =
+    ariaLabel ?? (typeof label === "string" ? label : undefined)
+
+  if (collapsed && isLevel2) return null
+
+  const content = (
+    <>
+      {isLevel2 ? (
+        <span
+          aria-hidden="true"
+          data-slot="sidebar-menu-indent"
+          className="relative h-full w-[var(--bh-sidebar-level-2-indent-width)] shrink-0"
+        >
+          {variant === "level2-line" ? (
+            <span
+              data-slot="sidebar-menu-guide"
+              className={cn(
+                "absolute start-[var(--bh-space-md-8)]",
+                active
+                  ? "top-1/2 h-[var(--bh-sidebar-active-guide-height)] -translate-y-1/2 border-e-[length:var(--bh-border-width-strong)] border-[var(--bh-bg-brand-default)]"
+                  : "inset-y-0 border-e-[length:var(--bh-border-width-default)] border-[var(--bh-border-subtle)]"
+              )}
+            />
+          ) : null}
+        </span>
+      ) : null}
 
-  return (
-    <Comp
-      aria-current={active ? "page" : undefined}
-      data-active={active ? "true" : undefined}
-      data-slot="sidebar-menu-button"
-      ref={ref}
-      className={cn(
-        "flex h-[var(--bh-sidebar-item-height)] w-full min-w-0 items-center gap-[var(--bh-sidebar-item-gap)] rounded-[var(--bh-radius-lg-8)] px-[var(--bh-sidebar-item-padding-x)] text-start text-[length:var(--bh-text-body-sm-medium-font-size)] font-[var(--bh-text-body-sm-medium-font-weight)] leading-[var(--bh-text-body-sm-medium-line-height)] tracking-[var(--bh-text-body-sm-medium-letter-spacing)] text-[var(--bh-sidebar-item-content)] outline-none transition-[background-color,box-shadow,color]",
-        "hover:bg-[var(--bh-sidebar-item-bg-hover)] focus-visible:shadow-[var(--shadow-button-focus)] data-[active=true]:bg-[var(--bh-sidebar-item-bg-active)] data-[active=true]:text-[var(--bh-sidebar-item-content-active)]",
-        collapsed && "justify-center px-[var(--bh-space-md-8)]",
-        className
-      )}
-      {...props}
-    >
       {icon ? (
         <span
           aria-hidden="true"
           data-slot="sidebar-menu-icon"
-          className="inline-flex size-[var(--bh-sidebar-icon-size)] shrink-0 items-center justify-center"
+          className={cn(
+            "inline-flex shrink-0 items-center justify-center overflow-hidden [&>*]:size-full [&_svg]:shrink-0",
+            variant === "avatar"
+              ? "size-[var(--bh-space-4xl-20)] rounded-[var(--bh-radius-md-6)]"
+              : "size-[var(--bh-sidebar-icon-slot-size)] [&_svg]:size-[var(--bh-sidebar-icon-size)]",
+            collapsed && variant === "avatar" &&
+              "size-[var(--bh-space-5xl-24)] rounded-[var(--bh-radius-lg-8)]",
+            collapsed && variant === "default" &&
+              "[&_svg]:size-[var(--bh-sidebar-icon-size-collapsed)]"
+          )}
         >
           {icon}
         </span>
       ) : null}
-      {collapsed ? null : (
-        <span data-slot="sidebar-menu-label" dir="auto" className="min-w-0 flex-1 truncate">
-          {children}
+
+      {!collapsed ? (
+        <span
+          data-slot="sidebar-menu-label"
+          dir="auto"
+          className="min-w-0 flex-1 truncate ps-[var(--bh-space-xs-4)]"
+        >
+          {label}
         </span>
-      )}
-    </Comp>
+      ) : null}
+
+      {!collapsed && supportText ? (
+        <span
+          data-slot="sidebar-menu-support"
+          dir="auto"
+          className="shrink-0 whitespace-nowrap text-[length:var(--bh-text-body-xs-regular-font-size)] font-[var(--bh-text-body-xs-regular-font-weight)] leading-[var(--bh-text-body-xs-regular-line-height)] tracking-[var(--bh-text-body-xs-regular-letter-spacing)] text-[var(--bh-content-muted)]"
+        >
+          {supportText}
+        </span>
+      ) : null}
+
+      {!collapsed && badge ? (
+        <span data-slot="sidebar-menu-badge-slot" className="inline-flex shrink-0">
+          {badge}
+        </span>
+      ) : null}
+
+      {!collapsed && trailingIcon ? (
+        <span
+          aria-hidden="true"
+          data-slot="sidebar-menu-trailing"
+          className="inline-flex size-[var(--bh-sidebar-icon-slot-size)] shrink-0 items-center justify-center text-[var(--bh-content-muted)] [&_svg]:size-[var(--bh-sidebar-icon-size)] [&_svg]:shrink-0"
+        >
+          {trailingIcon}
+        </span>
+      ) : null}
+    </>
+  )
+
+  const buttonClassName = cn(
+    "group/menu-button relative flex w-full min-w-0 items-center gap-[var(--bh-space-sm-6)] rounded-[var(--bh-radius-lg-8)] border-[length:var(--bh-border-width-strong)] border-transparent px-[var(--bh-sidebar-item-padding-x)] text-start text-[length:var(--bh-text-body-sm-regular-font-size)] font-[var(--bh-text-body-sm-regular-font-weight)] leading-[var(--bh-text-body-sm-regular-line-height)] tracking-[var(--bh-text-body-sm-regular-letter-spacing)] text-[var(--bh-sidebar-item-content)] outline-none transition-[background-color,border-color,color]",
+    "hover:rounded-[var(--bh-radius-md-6)] hover:bg-[var(--bh-sidebar-item-bg-hover)]",
+    "focus-visible:rounded-[var(--bh-radius-md-6)] focus-visible:border-[var(--bh-border-focus)]",
+    "data-[state=hover]:rounded-[var(--bh-radius-md-6)] data-[state=hover]:bg-[var(--bh-sidebar-item-bg-hover)]",
+    "data-[state=focus]:rounded-[var(--bh-radius-md-6)] data-[state=focus]:border-[var(--bh-border-focus)]",
+    "disabled:pointer-events-none disabled:text-[var(--bh-content-disabled)]",
+    variant === "avatar"
+      ? "h-[var(--bh-sidebar-compact-control-size)]"
+      : "h-[var(--bh-sidebar-item-height)]",
+    (active || state === "active") &&
+      "rounded-[var(--bh-radius-md-6)] bg-[var(--bh-sidebar-item-bg-active)] font-[var(--bh-text-body-sm-medium-font-weight)] text-[var(--bh-sidebar-item-content-active)]",
+    collapsed &&
+      "mx-auto size-[var(--bh-sidebar-item-height-collapsed)] justify-center gap-0 rounded-[var(--bh-radius-lg-8)] p-0",
+    className
+  )
+
+  const commonProps = {
+    "aria-current": active ? ("page" as const) : undefined,
+    "aria-label": resolvedLabel,
+    "data-active": active ? "true" : "false",
+    "data-collapsed": collapsed ? "true" : "false",
+    "data-slot": "sidebar-menu-button",
+    "data-state": state,
+    "data-variant": variant,
+    className: buttonClassName,
+  }
+
+  const button = asChild ? (
+    <Slot {...commonProps} ref={ref} {...props}>
+      {cloneSlottableChild(children, content)}
+    </Slot>
+  ) : (
+    <button {...commonProps} ref={ref} type={type} {...props}>
+      {content}
+    </button>
+  )
+
+  const resolvedTooltip = tooltip ?? resolvedLabel
+  if (!collapsed || !resolvedTooltip) return button
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>{button}</TooltipTrigger>
+      <TooltipContent
+        pointerPosition={dir === "rtl" ? "center-right" : "center-left"}
+        showShortcut={false}
+        side={dir === "rtl" ? "left" : "right"}
+      >
+        {resolvedTooltip}
+      </TooltipContent>
+    </Tooltip>
+  )
+})
+
+/** Nested menu list that unmounts when the parent sidebar is collapsed. */
+function SidebarMenuSub({ className, ...props }: SidebarMenuSubProps) {
+  const { collapsed } = useSidebarContext()
+  if (collapsed) return null
+
+  return (
+    <ul
+      data-slot="sidebar-menu-sub"
+      className={cn("m-0 flex w-full list-none flex-col p-0", className)}
+      {...props}
+    />
+  )
+}
+
+/** Level 2 menu row with an optional vertical guide. */
+const SidebarMenuSubButton = React.forwardRef<
+  HTMLButtonElement,
+  SidebarMenuSubButtonProps
+>(function SidebarMenuSubButton({ showLine = false, ...props }, ref) {
+  return (
+    <SidebarMenuButton
+      ref={ref}
+      variant={showLine ? "level2-line" : "level2"}
+      {...props}
+    />
+  )
+})
+
+const treeLevelClasses: Record<NonNullable<SidebarMenuTreeItemProps["level"]>, string> = {
+  1: "ps-[var(--bh-space-sm-6)]",
+  2: "ps-[calc(var(--bh-space-sm-6)+var(--bh-sidebar-tree-indent-step))]",
+  3: "ps-[calc(var(--bh-space-sm-6)+var(--bh-sidebar-tree-indent-step)+var(--bh-sidebar-tree-indent-step))]",
+  4: "ps-[calc(var(--bh-space-sm-6)+var(--bh-sidebar-tree-indent-step)+var(--bh-sidebar-tree-indent-step)+var(--bh-sidebar-tree-indent-step))]",
+}
+
+/** 28px file-tree row with four Figma indentation levels. */
+const SidebarMenuTreeItem = React.forwardRef<
+  HTMLButtonElement,
+  SidebarMenuTreeItemProps
+>(function SidebarMenuTreeItem(
+  {
+    "aria-label": ariaLabel,
+    active = false,
+    asChild = false,
+    children,
+    className,
+    expanded = false,
+    icon,
+    level = 1,
+    showChevron = true,
+    state = "default",
+    type = "button",
+    ...props
+  },
+  ref
+) {
+  const { collapsed } = useSidebarContext()
+  if (collapsed) return null
+
+  const label = getSlottableLabel(children, asChild)
+  const resolvedLabel =
+    ariaLabel ?? (typeof label === "string" ? label : undefined)
+  const content = (
+    <>
+      {showChevron ? (
+        <span
+          aria-hidden="true"
+          data-slot="sidebar-tree-chevron"
+          className="inline-flex size-[var(--bh-space-3xl-16)] shrink-0 items-center justify-center [&_svg]:size-full"
+        >
+          {expanded ? (
+            <ChevronDownIcon />
+          ) : (
+            <ChevronRightIcon data-rtl-flip="true" />
+          )}
+        </span>
+      ) : null}
+      <span
+        aria-hidden="true"
+        data-slot="sidebar-tree-icon"
+        className="inline-flex size-[var(--bh-space-3xl-16)] shrink-0 items-center justify-center [&_svg]:size-full"
+      >
+        {icon ?? <FolderIcon />}
+      </span>
+      <span
+        data-slot="sidebar-tree-label"
+        dir="auto"
+        className="min-w-0 flex-1 truncate"
+      >
+        {label}
+      </span>
+    </>
+  )
+
+  const commonProps = {
+    "aria-current": active ? ("page" as const) : undefined,
+    "aria-expanded": showChevron ? expanded : undefined,
+    "aria-label": resolvedLabel,
+    "data-active": active ? "true" : "false",
+    "data-level": String(level),
+    "data-slot": "sidebar-menu-tree-item",
+    "data-state": state,
+    className: cn(
+      "flex h-[var(--bh-sidebar-tree-item-height)] w-full min-w-0 items-center gap-[var(--bh-space-sm-6)] rounded-[var(--bh-radius-lg-8)] border-[length:var(--bh-border-width-strong)] border-transparent pe-[var(--bh-space-sm-6)] text-start text-[length:var(--bh-text-body-xs-regular-font-size)] font-[var(--bh-text-body-xs-regular-font-weight)] leading-[var(--bh-text-body-xs-regular-line-height)] tracking-[var(--bh-text-body-xs-regular-letter-spacing)] text-[var(--bh-content-subtle)] outline-none transition-[background-color,border-color,color]",
+      "hover:rounded-[var(--bh-radius-md-6)] hover:bg-[var(--bh-interactive-ghost-hover)] focus-visible:rounded-[var(--bh-radius-md-6)] focus-visible:border-[var(--bh-border-focus)]",
+      "data-[state=hover]:rounded-[var(--bh-radius-md-6)] data-[state=hover]:bg-[var(--bh-interactive-ghost-hover)] data-[state=focus]:rounded-[var(--bh-radius-md-6)] data-[state=focus]:border-[var(--bh-border-focus)]",
+      (active || state === "active") &&
+        "rounded-[var(--bh-radius-md-6)] bg-[var(--bh-interactive-ghost-active)] font-[var(--bh-text-body-xs-semibold-font-weight)] text-[var(--bh-content-default)]",
+      treeLevelClasses[level],
+      className
+    ),
+  }
+
+  return asChild ? (
+    <Slot {...commonProps} ref={ref} {...props}>
+      {cloneSlottableChild(children, content)}
+    </Slot>
+  ) : (
+    <button {...commonProps} ref={ref} type={type} {...props}>
+      {content}
+    </button>
   )
 })
 
+/** Labeled tree group used for file-browser and hierarchy sidebars. */
+function SidebarTreeGroup({
+  actions,
+  children,
+  className,
+  expandable = false,
+  expandIcon,
+  label,
+  ...props
+}: SidebarTreeGroupProps) {
+  const { collapsed } = useSidebarContext()
+  if (collapsed) return null
+
+  return (
+    <div
+      data-slot="sidebar-tree-group"
+      className={cn(
+        "flex w-full flex-col items-start gap-[var(--bh-space-sm-6)] pb-[var(--bh-space-sm-6)] pt-[var(--bh-space-xl-12)]",
+        className
+      )}
+      {...props}
+    >
+      {label ? (
+        <SidebarGroupLabel
+          actions={actions}
+          className={cn(
+            expandable &&
+              "[&_[data-slot=sidebar-group-label-expand]]:opacity-[var(--bh-opacity-100)]"
+          )}
+          expandable={expandable}
+          expandIcon={expandIcon ?? (expandable ? <ChevronDownIcon /> : undefined)}
+        >
+          {label}
+        </SidebarGroupLabel>
+      ) : null}
+      <div data-slot="sidebar-tree-menu" className="flex w-full flex-col">
+        {children}
+      </div>
+    </div>
+  )
+}
+
+/** 28px collapse control with accessible pressed state. */
 const SidebarToggle = React.forwardRef<HTMLButtonElement, SidebarToggleProps>(
-  function SidebarToggle({ children, className, onClick, type = "button", ...props }, ref) {
+  function SidebarToggle(
+    { children, className, onClick, type = "button", ...props },
+    ref
+  ) {
     const { collapsed, toggle } = useSidebarContext()
 
     return (
@@ -252,7 +1083,8 @@ const SidebarToggle = React.forwardRef<HTMLButtonElement, SidebarToggleProps>(
         ref={ref}
         type={type}
         className={cn(
-          "inline-flex size-[var(--bh-sidebar-item-height)] items-center justify-center rounded-[var(--bh-radius-lg-8)] text-[var(--bh-content-subtle)] outline-none transition-[background-color,box-shadow,color] hover:bg-[var(--bh-interactive-ghost-hover)] focus-visible:shadow-[var(--shadow-button-focus)]",
+          "inline-flex size-[var(--bh-sidebar-header-action-size)] shrink-0 items-center justify-center rounded-[var(--bh-radius-full)] border border-transparent bg-[var(--bh-interactive-ghost-default)] text-[var(--bh-content-default)] outline-none transition-[background-color,border-color,box-shadow,color]",
+          "hover:bg-[var(--bh-interactive-ghost-hover)] focus-visible:border-[var(--bh-border-focus)] focus-visible:shadow-[var(--shadow-button-focus)]",
           className
         )}
         onClick={(event) => {
@@ -261,13 +1093,18 @@ const SidebarToggle = React.forwardRef<HTMLButtonElement, SidebarToggleProps>(
         }}
         {...props}
       >
-        {children ?? (
-          <PanelLeftIcon
-            aria-hidden="true"
-            className="size-[var(--bh-space-5xl-24)] rtl:-scale-x-100"
-            strokeWidth="var(--bh-icon-stroke-200)"
-          />
-        )}
+        <span
+          aria-hidden="true"
+          data-slot="sidebar-toggle-icon"
+          className="inline-flex size-[var(--bh-sidebar-icon-slot-size)] items-center justify-center [&_svg]:size-[var(--bh-sidebar-icon-size)]"
+        >
+          {children ?? (
+            <PanelLeftIcon
+              className="rtl:-scale-x-100"
+              strokeWidth="var(--bh-icon-stroke-200)"
+            />
+          )}
+        </span>
       </button>
     )
   }
@@ -275,6 +1112,7 @@ const SidebarToggle = React.forwardRef<HTMLButtonElement, SidebarToggleProps>(
 
 const SidebarTrigger = SidebarToggle
 
+/** Edge-hugging pointer target for toggling the sidebar from its border. */
 const SidebarRail = React.forwardRef<HTMLButtonElement, SidebarRailProps>(
   function SidebarRail({ className, onClick, type = "button", ...props }, ref) {
     const { toggle } = useSidebarContext()
@@ -299,10 +1137,13 @@ const SidebarRail = React.forwardRef<HTMLButtonElement, SidebarRailProps>(
   }
 )
 
-const SidebarInset = React.forwardRef<HTMLElement, SidebarInsetProps>(
-  function SidebarInset({ className, ...props }, ref) {
+/** Main-content wrapper paired with a sidebar shell. */
+const SidebarInset = React.forwardRef<HTMLDivElement, SidebarInsetProps>(
+  function SidebarInset({ asChild = false, className, ...props }, ref) {
+    const Comp = asChild ? Slot : "div"
+
     return (
-      <main
+      <Comp
         data-slot="sidebar-inset"
         ref={ref}
         className={cn("min-w-0 flex-1", className)}
@@ -312,6 +1153,20 @@ const SidebarInset = React.forwardRef<HTMLElement, SidebarInsetProps>(
   }
 )
 
+function getSlottableLabel(children: React.ReactNode, asChild: boolean) {
+  if (!asChild || !React.isValidElement<{ children?: React.ReactNode }>(children)) {
+    return children
+  }
+  return children.props.children
+}
+
+function cloneSlottableChild(children: React.ReactNode, content: React.ReactNode) {
+  if (!React.isValidElement<{ children?: React.ReactNode }>(children)) {
+    throw new Error("Sidebar asChild expects one valid React element")
+  }
+  return React.cloneElement(children, undefined, content)
+}
+
 function useSidebarContext() {
   const context = React.useContext(SidebarContext)
   if (!context) {
@@ -325,28 +1180,51 @@ export {
   Sidebar,
   SidebarBody,
   SidebarFooter,
+  SidebarFooterUser,
   SidebarGroup,
+  SidebarGroupAction,
   SidebarGroupLabel,
   SidebarHeader,
+  SidebarHeaderAction,
+  SidebarHeaderBrand,
+  SidebarHeaderWorkspaceSwitch,
   SidebarInset,
   SidebarMenu,
+  SidebarMenuBadge,
   SidebarMenuButton,
   SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuTreeItem,
   SidebarProvider,
   SidebarRail,
-  SidebarTrigger,
   SidebarToggle,
+  SidebarTreeGroup,
+  SidebarTrigger,
 }
 export type {
+  SidebarFooterUserProps,
+  SidebarGroupActionProps,
   SidebarGroupLabelProps,
+  SidebarHeaderActionProps,
+  SidebarHeaderBrandProps,
+  SidebarHeaderWorkspaceSwitchProps,
   SidebarInsetProps,
+  SidebarInteractionState,
+  SidebarMenuBadgeProps,
   SidebarMenuButtonProps,
+  SidebarMenuButtonVariant,
   SidebarMenuItemProps,
   SidebarMenuProps,
+  SidebarMenuSubButtonProps,
+  SidebarMenuSubProps,
+  SidebarMenuTreeItemProps,
   SidebarProps,
   SidebarProviderProps,
   SidebarRailProps,
-  SidebarTriggerProps,
   SidebarSectionProps,
   SidebarToggleProps,
+  SidebarTreeGroupProps,
+  SidebarTriggerProps,
+  SidebarWorkspaceVariant,
 }