@exegia/corpora-ui 0.17.0 → 0.18.0

package/src/components/motion/animated-sidebar.tsx

@@ -1,1171 +0,0 @@
-"use client"
-// beui.dev/components/motion/animated-sidebar
-
-import { ChevronRight } from "lucide-react"
-import {
-  AnimatePresence,
-  type HTMLMotionProps,
-  motion,
-  useReducedMotion,
-  type Variants,
-} from "motion/react"
-import {
-  type ButtonHTMLAttributes,
-  type CSSProperties,
-  createContext,
-  forwardRef,
-  type HTMLAttributes,
-  type ReactNode,
-  useCallback,
-  useContext,
-  useEffect,
-  useId,
-  useMemo,
-  useRef,
-  useState,
-  useSyncExternalStore,
-} from "react"
-import { createPortal } from "react-dom"
-import { SharedLayoutBg } from "@/components/motion/shared-layout-bg"
-import { EASE_DRAWER, EASE_OUT, SPRING_LAYOUT, SPRING_PRESS } from "@/lib/ease"
-import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button";
-
-export type SidebarSide = "left" | "right"
-/** Open flags keyed by the side. Sides left out stay uncontrolled / at their
- * default — there is no per-side prop, the record IS the API. */
-export type SidebarOpenState = Partial<Record<SidebarSide, boolean>>
-type SidebarVariant = "sidebar" | "floating" | "inset"
-type SidebarCollapsible = "offcanvas" | "icon" | "none"
-
-const MOBILE_QUERY = "(max-width: 767px)"
-const SIDEBAR_KEYBOARD_SHORTCUT = "b"
-
-const PANEL_TRANSITION = {
-  duration: 0.36,
-  ease: EASE_DRAWER,
-} as const
-
-// The desktop rail settles at a hard zero-width boundary. Keep the spring
-// critically damped so it cannot overshoot, pause against that boundary, and
-// then snap back during the final frame.
-const SIDEBAR_MORPH_TRANSITION = {
-  type: "spring",
-  stiffness: 380,
-  damping: 35,
-  mass: 0.75,
-} as const
-
-const LABEL_ENTER_TRANSITION = {
-  duration: 0.2,
-  delay: 0.08,
-  ease: EASE_OUT,
-} as const
-
-const LABEL_EXIT_TRANSITION = {
-  duration: 0.12,
-  ease: EASE_OUT,
-} as const
-
-const SUBMENU_TRANSITION = {
-  duration: 0.18,
-  ease: EASE_OUT,
-} as const
-
-const SUBMENU_VARIANTS: Variants = {
-  closed: {
-    opacity: 0,
-    clipPath: "inset(0 0 100% 0 round 8px)",
-    transition: {
-      duration: 0.14,
-      ease: EASE_OUT,
-      staggerChildren: 0.025,
-      staggerDirection: -1,
-    },
-  },
-  open: {
-    opacity: 1,
-    clipPath: "inset(0 0 0% 0 round 8px)",
-    transition: {
-      duration: 0.2,
-      delayChildren: 0.035,
-      ease: EASE_OUT,
-      staggerChildren: 0.045,
-    },
-  },
-}
-
-const SUBMENU_ITEM_VARIANTS: Variants = {
-  closed: {
-    opacity: 0,
-    y: -6,
-    filter: "blur(3px)",
-  },
-  open: {
-    opacity: 1,
-    y: 0,
-    filter: "blur(0px)",
-    transition: SUBMENU_TRANSITION,
-  },
-}
-
-const REDUCED_TRANSITION = {
-  duration: 0.16,
-  ease: EASE_OUT,
-} as const
-
-const FOCUSABLE_SELECTOR = [
-  "a[href]",
-  "button:not([disabled])",
-  "input:not([disabled])",
-  "select:not([disabled])",
-  "textarea:not([disabled])",
-  "[tabindex]:not([tabindex='-1'])",
-].join(",")
-
-function subscribeToMobileQuery(callback: () => void) {
-  const query = window.matchMedia(MOBILE_QUERY)
-  query.addEventListener("change", callback)
-  return () => query.removeEventListener("change", callback)
-}
-
-function getMobileSnapshot() {
-  return window.matchMedia(MOBILE_QUERY).matches
-}
-
-function getServerMobileSnapshot() {
-  return false
-}
-
-function useIsMobile() {
-  return useSyncExternalStore(
-    subscribeToMobileQuery,
-    getMobileSnapshot,
-    getServerMobileSnapshot
-  )
-}
-
-interface AnimatedSidebarContextValue {
-  isMobile: boolean
-  layoutId: string
-  /** Desktop open state, keyed by side. */
-  open: Record<SidebarSide, boolean>
-  /** Mobile overlay open state, keyed by side. */
-  openMobile: Record<SidebarSide, boolean>
-  reduce: boolean
-  setOpen: (open: boolean, side: SidebarSide) => void
-  setOpenMobile: (open: boolean, side: SidebarSide) => void
-  /** Mobile-aware: toggles the overlay below md, the docked panel above. */
-  toggleSidebar: (side: SidebarSide) => void
-  triggerRefs: Record<SidebarSide, React.RefObject<HTMLButtonElement | null>>
-}
-
-const AnimatedSidebarContext =
-  createContext<AnimatedSidebarContextValue | null>(null)
-
-interface AnimatedSidebarPanelContextValue {
-  collapsed: boolean
-  collapsible: SidebarCollapsible
-  side: SidebarSide
-}
-
-const AnimatedSidebarPanelContext =
-  createContext<AnimatedSidebarPanelContextValue | null>(null)
-
-export function useAnimatedSidebar() {
-  const context = useContext(AnimatedSidebarContext)
-  if (!context) {
-    throw new Error(
-      "useAnimatedSidebar must be used inside AnimatedSidebarProvider."
-    )
-  }
-  return context
-}
-
-function useAnimatedSidebarPanel() {
-  const context = useContext(AnimatedSidebarPanelContext)
-  if (!context) {
-    throw new Error(
-      "Animated Sidebar parts must be used inside AnimatedSidebar."
-    )
-  }
-  return context
-}
-
-type SidebarProviderStyle = CSSProperties & {
-  "--sidebar-width"?: string
-  "--sidebar-width-icon"?: string
-  "--sidebar-width-mobile"?: string
-}
-
-export interface AnimatedSidebarProviderProps extends HTMLAttributes<HTMLDivElement> {
-  /** Controlled desktop open state, keyed by the side. A side left undefined
-   * stays uncontrolled. */
-  open?: SidebarOpenState
-  /** Initial desktop open state, merged over `{ left: true, right: false }`. */
-  defaultOpen?: SidebarOpenState
-  onOpenChange?: (open: boolean, side: SidebarSide) => void
-  /** Controlled mobile overlay state, keyed by side. */
-  openMobile?: SidebarOpenState
-  /** Initial mobile overlay state — every side starts closed. */
-  defaultOpenMobile?: SidebarOpenState
-  onOpenMobileChange?: (open: boolean, side: SidebarSide) => void
-  style?: SidebarProviderStyle
-}
-
-export function AnimatedSidebarProvider({
-  children,
-  open,
-  defaultOpen,
-  onOpenChange,
-  openMobile,
-  defaultOpenMobile,
-  onOpenMobileChange,
-  className,
-  style,
-  ...props
-}: AnimatedSidebarProviderProps) {
-  const [internalOpen, setInternalOpen] = useState<
-    Record<SidebarSide, boolean>
-  >(() => ({
-    left: defaultOpen?.left ?? true,
-    right: defaultOpen?.right ?? false,
-  }))
-  const [internalOpenMobile, setInternalOpenMobile] = useState<
-    Record<SidebarSide, boolean>
-  >(() => ({
-    left: defaultOpenMobile?.left ?? false,
-    right: defaultOpenMobile?.right ?? false,
-  }))
-  const isMobile = useIsMobile()
-  const reduce = useReducedMotion() ?? false
-  const generatedId = useId()
-  const leftTriggerRef = useRef<HTMLButtonElement>(null)
-  const rightTriggerRef = useRef<HTMLButtonElement>(null)
-
-  // Per-side controlled/uncontrolled merge — a side is controlled exactly
-  // when its key is present on the controlled record.
-  const controlledLeft = open?.left
-  const controlledRight = open?.right
-  const controlledMobileLeft = openMobile?.left
-  const controlledMobileRight = openMobile?.right
-
-  const openState = useMemo<Record<SidebarSide, boolean>>(
-    () => ({
-      left: controlledLeft ?? internalOpen.left,
-      right: controlledRight ?? internalOpen.right,
-    }),
-    [controlledLeft, controlledRight, internalOpen]
-  )
-  const openMobileState = useMemo<Record<SidebarSide, boolean>>(
-    () => ({
-      left: controlledMobileLeft ?? internalOpenMobile.left,
-      right: controlledMobileRight ?? internalOpenMobile.right,
-    }),
-    [controlledMobileLeft, controlledMobileRight, internalOpenMobile]
-  )
-
-  const setOpen = useCallback(
-    (nextOpen: boolean, side: SidebarSide) => {
-      const controlled = side === "left" ? controlledLeft : controlledRight
-      if (controlled === undefined) {
-        setInternalOpen((prev) =>
-          prev[side] === nextOpen ? prev : { ...prev, [side]: nextOpen }
-        )
-      }
-      onOpenChange?.(nextOpen, side)
-    },
-    [controlledLeft, controlledRight, onOpenChange]
-  )
-
-  const setOpenMobile = useCallback(
-    (nextOpen: boolean, side: SidebarSide) => {
-      const controlled =
-        side === "left" ? controlledMobileLeft : controlledMobileRight
-      if (controlled === undefined) {
-        setInternalOpenMobile((prev) =>
-          prev[side] === nextOpen ? prev : { ...prev, [side]: nextOpen }
-        )
-      }
-      onOpenMobileChange?.(nextOpen, side)
-    },
-    [controlledMobileLeft, controlledMobileRight, onOpenMobileChange]
-  )
-
-  const toggleSidebar = useCallback(
-    (side: SidebarSide) => {
-      if (isMobile) setOpenMobile(!openMobileState[side], side)
-      else setOpen(!openState[side], side)
-    },
-    [isMobile, openMobileState, openState, setOpen, setOpenMobile]
-  )
-
-  const triggerRefs = useMemo(
-    () => ({ left: leftTriggerRef, right: rightTriggerRef }),
-    []
-  )
-
-  useEffect(() => {
-    const handleShortcut = (event: KeyboardEvent) => {
-      if (
-        event.key.toLowerCase() === SIDEBAR_KEYBOARD_SHORTCUT &&
-        (event.metaKey || event.ctrlKey)
-      ) {
-        event.preventDefault()
-        toggleSidebar("left")
-      }
-    }
-
-    window.addEventListener("keydown", handleShortcut)
-    return () => window.removeEventListener("keydown", handleShortcut)
-  }, [toggleSidebar])
-
-  return (
-    <AnimatedSidebarContext.Provider
-      value={{
-        isMobile,
-        layoutId: `${generatedId}-active`,
-        open: openState,
-        openMobile: openMobileState,
-        reduce,
-        setOpen,
-        setOpenMobile,
-        toggleSidebar,
-        triggerRefs,
-      }}
-    >
-      <div
-        {...props}
-        data-slot="sidebar-wrapper"
-        data-state-left={openState.left ? "expanded" : "collapsed"}
-        data-state-right={openState.right ? "expanded" : "collapsed"}
-        style={{
-          "--sidebar-width": "19rem",
-          "--sidebar-width-icon": "4.25rem",
-          "--sidebar-width-mobile": "18rem",
-          ...style,
-        }}
-        className={cn(
-          "group/sidebar-wrapper flex min-h-svh w-full min-w-0",
-          className
-        )}
-      >
-        {children}
-      </div>
-    </AnimatedSidebarContext.Provider>
-  )
-}
-
-function MobileSidebar({
-  ariaLabel,
-  children,
-  className,
-  side,
-}: {
-  ariaLabel: string
-  children: ReactNode
-  className?: string
-  side: SidebarSide
-}) {
-  const context = useAnimatedSidebar()
-  const open = context.openMobile[side]
-  const setOpen = (nextOpen: boolean) => context.setOpenMobile(nextOpen, side)
-  const triggerRef = context.triggerRefs[side]
-  const panelRef = useRef<HTMLDivElement>(null)
-  const [mounted, setMounted] = useState(false)
-
-  useEffect(() => setMounted(true), [])
-
-  useEffect(() => {
-    if (!open) return
-
-    const body = document.body
-    const scrollY = window.scrollY
-    const trigger = triggerRef.current
-    const previousBodyStyles = {
-      left: body.style.left,
-      overflow: body.style.overflow,
-      position: body.style.position,
-      right: body.style.right,
-      top: body.style.top,
-    }
-
-    body.style.position = "fixed"
-    body.style.top = `-${scrollY}px`
-    body.style.left = "0"
-    body.style.right = "0"
-    body.style.overflow = "hidden"
-
-    const focusFrame = requestAnimationFrame(() => {
-      const firstFocusable =
-        panelRef.current?.querySelector<HTMLElement>(FOCUSABLE_SELECTOR)
-      ;(firstFocusable ?? panelRef.current)?.focus({ preventScroll: true })
-    })
-
-    return () => {
-      cancelAnimationFrame(focusFrame)
-      body.style.position = previousBodyStyles.position
-      body.style.top = previousBodyStyles.top
-      body.style.left = previousBodyStyles.left
-      body.style.right = previousBodyStyles.right
-      body.style.overflow = previousBodyStyles.overflow
-      window.scrollTo(0, scrollY)
-      trigger?.focus({ preventScroll: true })
-    }
-  }, [open, triggerRef])
-
-  if (!mounted) return null
-
-  return createPortal(
-    <div
-      className={cn(
-        "pointer-events-none fixed inset-0 z-50 md:hidden",
-        open ? "visible" : "invisible"
-      )}
-    >
-      <motion.button
-        type="button"
-        aria-label="Close sidebar"
-        tabIndex={open ? 0 : -1}
-        initial={false}
-        animate={{ opacity: open ? 1 : 0 }}
-        transition={context.reduce ? REDUCED_TRANSITION : PANEL_TRANSITION}
-        onClick={() => setOpen(false)}
-        className={cn(
-          "absolute inset-0",
-          open ? "pointer-events-auto" : "pointer-events-none"
-        )}
-      />
-
-      <motion.div
-        ref={panelRef}
-        role="dialog"
-        aria-modal="true"
-        aria-label={ariaLabel}
-        aria-hidden={!open}
-        inert={!open}
-        tabIndex={-1}
-        data-mobile="true"
-        data-state={open ? "expanded" : "collapsed"}
-        data-side={side}
-        initial={false}
-        animate={{
-          opacity: context.reduce ? (open ? 1 : 0) : 1,
-          x: context.reduce
-            ? 0
-            : open
-              ? "0%"
-              : side === "left"
-                ? "-100%"
-                : "100%",
-        }}
-        transition={context.reduce ? REDUCED_TRANSITION : PANEL_TRANSITION}
-        onKeyDown={(event) => {
-          if (event.key === "Escape") {
-            event.preventDefault()
-            setOpen(false)
-            return
-          }
-
-          if (event.key !== "Tab") return
-          const focusable = panelRef.current
-            ? Array.from(
-                panelRef.current.querySelectorAll<HTMLElement>(
-                  FOCUSABLE_SELECTOR
-                )
-              )
-            : []
-
-          if (focusable.length === 0) {
-            event.preventDefault()
-            panelRef.current?.focus()
-            return
-          }
-
-          const first = focusable[0]
-          const last = focusable[focusable.length - 1]
-          if (event.shiftKey && document.activeElement === first) {
-            event.preventDefault()
-            last.focus()
-          } else if (!event.shiftKey && document.activeElement === last) {
-            event.preventDefault()
-            first.focus()
-          }
-        }}
-        className={cn(
-          "pointer-events-auto absolute inset-y-0 flex h-dvh w-(--sidebar-width-mobile) max-w-[88vw] flex-col overflow-hidden",
-          "will-change-transform",
-          side === "left" ? "left-0 border-r" : "right-0",
-          !open && "pointer-events-none",
-          className
-        )}
-      >
-        <AnimatedSidebarPanelContext.Provider
-          value={{ collapsed: false, collapsible: "none", side }}
-        >
-          {children}
-        </AnimatedSidebarPanelContext.Provider>
-      </motion.div>
-    </div>,
-    document.body
-  )
-}
-
-export interface AnimatedSidebarProps extends Omit<
-  HTMLMotionProps<"aside">,
-  "children"
-> {
-  children?: ReactNode
-  side?: SidebarSide
-  variant?: SidebarVariant
-  collapsible?: SidebarCollapsible
-  ariaLabel?: string
-  panelClassName?: string
-}
-
-export const AnimatedSidebar = forwardRef<HTMLElement, AnimatedSidebarProps>(
-  function AnimatedSidebar(
-    {
-      side = "left",
-      variant = "sidebar",
-      collapsible = "icon",
-      ariaLabel = "Sidebar",
-      children,
-      className,
-      panelClassName,
-      style,
-      ...props
-    },
-    forwardedRef
-  ) {
-    const context = useAnimatedSidebar()
-    const sideOpen = context.open[side]
-    const collapsed = collapsible !== "none" && !sideOpen
-    const offcanvas = collapsed && collapsible === "offcanvas"
-    const width = offcanvas
-      ? "0px"
-      : collapsed
-        ? "var(--sidebar-width-icon)"
-        : "var(--sidebar-width)"
-
-    if (context.isMobile) {
-      return (
-        <MobileSidebar ariaLabel={ariaLabel} className={className} side={side}>
-          {children}
-        </MobileSidebar>
-      )
-    }
-
-    return (
-      <motion.aside
-        {...props}
-        ref={forwardedRef}
-        initial={false}
-        aria-label={ariaLabel}
-        data-slot="sidebar"
-        data-state={collapsed ? "collapsed" : "expanded"}
-        data-collapsible={collapsible}
-        data-variant={variant}
-        data-side={side}
-        animate={{ width }}
-        transition={context.reduce ? { duration: 0 } : SIDEBAR_MORPH_TRANSITION}
-        style={style}
-        className={cn(
-          "group/sidebar relative hidden h-auto shrink-0 will-change-[width] md:block",
-          "peer flex!",
-          // The off canvas panel keeps its full width and slides out of the
-          // zero-width rail, so clip it rather than letting it bleed past the
-          // shell edge. The clip margin lets the panel's own shadow escape
-          // without letting the slid-out panel escape with it
-          collapsible === "offcanvas" &&
-            "overflow-x-visible [overflow-clip-margin:1rem]",
-          side === "right" && "order-last",
-          className
-        )}
-      >
-        {side === "right" && !collapsed && (
-          <motion.div className="flex h-full cursor-col-resize justify-center p-1 group relative">
-            <motion.div className="h-full w-full scale-y-0 animate-in bg-radial/decreasing from-amber-300/70 to-amber-500/0 to-40% transition-[colors,scale] duration-200 ease-smooth-out  group-hover:scale-y-100 absolute" />
-          </motion.div>
-        )}
-        <motion.div
-          initial={false}
-          animate={{
-            opacity: offcanvas ? 0 : 1,
-            x: offcanvas ? (side === "left" ? "-100%" : "100%") : "0%",
-          }}
-          transition={context.reduce ? REDUCED_TRANSITION : PANEL_TRANSITION}
-          className={cn(
-            "sticky top-0 flex h-svh w-full flex-col overflow-hidden",
-            "bg-neutral-50 dark:bg-neutral-900",
-            "outline-offset-0.5 border-t-3 border-white outline-neutral-100 dark:border-neutral-800 dark:inset-ring-black",
-            "rounded-lg shadow-md shadow-neutral-200 dark:shadow-neutral-950",
-            collapsible === "offcanvas" && "w-(--sidebar-width)",
-
-            variant === "floating" && "m-2 h-[calc(100svh-1rem)]",
-            variant === "inset" && "my-2 h-[calc(100svh-1rem)]",
-            variant === "inset" &&
-              side === "right" &&
-              "w-[calc(var(--sidebar-width)-0.5rem)]",
-            variant === "inset" &&
-              side === "left" &&
-              "border-transparent! bg-transparent! shadow-none!",
-            panelClassName
-          )}
-        >
-          <AnimatedSidebarPanelContext.Provider
-            value={{ collapsed, collapsible, side }}
-          >
-            {children}
-          </AnimatedSidebarPanelContext.Provider>
-        </motion.div>
-      </motion.aside>
-    )
-  }
-)
-
-export interface AnimatedSidebarTriggerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  side?: SidebarSide
-}
-
-export const AnimatedSidebarTrigger = forwardRef<
-  HTMLButtonElement,
-  AnimatedSidebarTriggerProps
->(function AnimatedSidebarTrigger(
-  { onClick, side = "left", type = "button", ...props },
-  forwardedRef
-) {
-  const context = useAnimatedSidebar()
-  const expanded = context.isMobile
-    ? context.openMobile[side]
-    : context.open[side]
-  const triggerRef = context.triggerRefs[side]
-
-  return (
-    <Button
-      {...props}
-      ref={(node) => {
-        triggerRef.current = node
-        if (typeof forwardedRef === "function") forwardedRef(node)
-        else if (forwardedRef) forwardedRef.current = node
-      }}
-      type={type}
-      variant="ghost"
-      size="icon-xl"
-      aria-label={props["aria-label"] ?? "Toggle sidebar"}
-      aria-expanded={expanded}
-      data-slot="sidebar-trigger"
-      data-side={side}
-      data-state={expanded ? "expanded" : "collapsed"}
-      onClick={(event) => {
-        onClick?.(event)
-        if (event.defaultPrevented) return
-        context.toggleSidebar(side)
-      }}
-    />
-  )
-})
-
-export interface AnimatedSidebarCloseProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  side?: SidebarSide
-}
-
-export const AnimatedSidebarClose = forwardRef<
-  HTMLButtonElement,
-  AnimatedSidebarCloseProps
->(function AnimatedSidebarClose(
-  { className, onClick, side = "left", type = "button", ...props },
-  forwardedRef
-) {
-  const context = useAnimatedSidebar()
-
-  return (
-    <button
-      {...props}
-      ref={forwardedRef}
-      type={type}
-      data-side={side}
-      aria-label={props["aria-label"] ?? "Close sidebar"}
-      onClick={(event) => {
-        onClick?.(event)
-        if (event.defaultPrevented) return
-        if (context.isMobile) context.setOpenMobile(false, side)
-        else context.setOpen(false, side)
-      }}
-      className={cn(
-        "inline-flex size-10 shrink-0 items-center justify-center rounded-xl outline-none",
-        "focus-visible:ring-2 focus-visible:ring-ring",
-        className
-      )}
-    />
-  )
-})
-
-
-export interface AnimatedSidebarInsetProps extends HTMLMotionProps<"main"> {}
-
-export const AnimatedSidebarInset = forwardRef<
-  HTMLElement,
-  AnimatedSidebarInsetProps
->(function AnimatedSidebarInset({ className, ...props }, forwardedRef) {
-  return (
-    <motion.main
-      {...props}
-      ref={forwardedRef}
-      data-slot="sidebar-inset"
-      className={cn(
-        "relative flex min-w-0 flex-1 flex-col bg-neutral-50 dark:bg-neutral-900",
-        "outline-offset-0.5 overflow-hidden border-t-3 border-white outline-neutral-100 dark:border-neutral-800 dark:inset-ring-black",
-        "m-2 mx-0 rounded-lg shadow-md shadow-neutral-200 dark:shadow-neutral-950",
-        className
-      )}
-    />
-  )
-})
-
-export const AnimatedSidebarHeader = forwardRef<
-  HTMLDivElement,
-  HTMLAttributes<HTMLDivElement>
->(function AnimatedSidebarHeader({ className, ...props }, forwardedRef) {
-  return (
-    <div
-      {...props}
-      ref={forwardedRef}
-      data-slot="sidebar-header"
-      className={cn("flex shrink-0 flex-col gap-2 p-3", className)}
-    />
-  )
-})
-
-export const AnimatedSidebarContent = forwardRef<
-  HTMLDivElement,
-  HTMLAttributes<HTMLDivElement>
->(function AnimatedSidebarContent({ className, ...props }, forwardedRef) {
-  return (
-    <div
-      {...props}
-      ref={forwardedRef}
-      data-slot="sidebar-content"
-      className={cn(
-        "flex min-h-0 flex-1 flex-col gap-2 overflow-x-hidden overflow-y-auto overscroll-contain px-2 py-2",
-        className
-      )}
-    />
-  )
-})
-
-export const AnimatedSidebarFooter = forwardRef<
-  HTMLDivElement,
-  HTMLAttributes<HTMLDivElement>
->(function AnimatedSidebarFooter({ className, ...props }, forwardedRef) {
-  return (
-    <div
-      {...props}
-      ref={forwardedRef}
-      data-slot="sidebar-footer"
-      className={cn(
-        "flex shrink-0 flex-col gap-2 border-t border-border p-3 pb-[max(0.75rem,env(safe-area-inset-bottom))]",
-        className
-      )}
-    />
-  )
-})
-
-export const AnimatedSidebarGroup = forwardRef<
-  HTMLDivElement,
-  HTMLAttributes<HTMLDivElement>
->(function AnimatedSidebarGroup({ className, ...props }, forwardedRef) {
-  return (
-    <div
-      {...props}
-      ref={forwardedRef}
-      data-slot="sidebar-group"
-      className={cn("flex w-full min-w-0 flex-col px-1 py-1.5", className)}
-    />
-  )
-})
-
-export const AnimatedSidebarGroupLabel = forwardRef<
-  HTMLDivElement,
-  HTMLAttributes<HTMLDivElement>
->(function AnimatedSidebarGroupLabel(
-  { children, className, ...props },
-  forwardedRef
-) {
-  const { collapsed } = useAnimatedSidebarPanel()
-
-  return (
-    <div
-      {...props}
-      ref={forwardedRef}
-      aria-hidden={collapsed}
-      data-slot="sidebar-group-label"
-      className={cn(
-        "mb-1 h-7 overflow-hidden px-2 text-[10px] font-medium tracking-[0.14em] text-muted-foreground uppercase transition-opacity",
-        collapsed ? "opacity-0" : "opacity-100",
-        className
-      )}
-    >
-      {children}
-    </div>
-  )
-})
-
-export const AnimatedSidebarGroupContent = forwardRef<
-  HTMLDivElement,
-  HTMLAttributes<HTMLDivElement>
->(function AnimatedSidebarGroupContent({ className, ...props }, forwardedRef) {
-  return (
-    <div
-      {...props}
-      ref={forwardedRef}
-      data-slot="sidebar-group-content"
-      className={cn("w-full min-w-0", className)}
-    />
-  )
-})
-
-export const AnimatedSidebarMenu = forwardRef<
-  HTMLUListElement,
-  HTMLAttributes<HTMLUListElement>
->(function AnimatedSidebarMenu(
-  { children, className, ...props },
-  forwardedRef
-) {
-  return (
-    <SharedLayoutBg
-      {...props}
-      ref={forwardedRef as React.Ref<HTMLElement>}
-      as="ul"
-      inset={0}
-      pillClassName="rounded-xl bg-muted/70"
-      pillContainerClassName="inset-y-auto top-0 h-9"
-      data-slot="sidebar-menu"
-      className={cn(
-        "flex w-full min-w-0 list-none flex-col gap-0.5",
-        className
-      )}
-    >
-      {children}
-    </SharedLayoutBg>
-  )
-})
-
-export const AnimatedSidebarMenuItem = forwardRef<
-  HTMLLIElement,
-  HTMLMotionProps<"li">
->(function AnimatedSidebarMenuItem({ className, ...props }, forwardedRef) {
-  return (
-    <motion.li
-      {...props}
-      ref={forwardedRef}
-      layout="position"
-      transition={SPRING_LAYOUT}
-      data-slot="sidebar-menu-item"
-      className={cn("relative", className)}
-    />
-  )
-})
-
-export interface AnimatedSidebarMenuSubProps extends Omit<
-  HTMLMotionProps<"ul">,
-  "children"
-> {
-  open: boolean
-  children?: ReactNode
-}
-
-export const AnimatedSidebarMenuSub = forwardRef<
-  HTMLUListElement,
-  AnimatedSidebarMenuSubProps
->(function AnimatedSidebarMenuSub(
-  { open, children, className, ...props },
-  forwardedRef
-) {
-  const context = useAnimatedSidebar()
-  const panel = useAnimatedSidebarPanel()
-
-  return (
-    <AnimatePresence initial={false} mode="popLayout">
-      {open && !panel.collapsed ? (
-        <motion.ul
-          {...props}
-          ref={forwardedRef}
-          key="sidebar-submenu"
-          variants={context.reduce ? undefined : SUBMENU_VARIANTS}
-          initial={context.reduce ? false : "closed"}
-          animate={context.reduce ? { opacity: 1 } : "open"}
-          exit={context.reduce ? { opacity: 0 } : "closed"}
-          transition={context.reduce ? { duration: 0.12 } : undefined}
-          data-slot="sidebar-menu-sub"
-          className={cn(
-            "relative mt-1 ml-5 flex min-w-0 flex-col gap-0.5 border-l border-border pl-3",
-            className
-          )}
-        >
-          {children}
-        </motion.ul>
-      ) : null}
-    </AnimatePresence>
-  )
-})
-
-export const AnimatedSidebarMenuSubItem = forwardRef<
-  HTMLLIElement,
-  HTMLMotionProps<"li">
->(function AnimatedSidebarMenuSubItem({ className, ...props }, forwardedRef) {
-  return (
-    <motion.li
-      {...props}
-      ref={forwardedRef}
-      variants={SUBMENU_ITEM_VARIANTS}
-      data-slot="sidebar-menu-sub-item"
-      className={cn("relative min-w-0", className)}
-    />
-  )
-})
-
-export interface AnimatedSidebarMenuSubButtonProps {
-  children: ReactNode
-  icon?: ReactNode
-  href?: string
-  isActive?: boolean
-  disabled?: boolean
-  closeOnSelect?: boolean
-  target?: "_blank" | "_self" | "_parent" | "_top"
-  rel?: string
-  onSelect?: () => void
-  className?: string
-}
-
-export function AnimatedSidebarMenuSubButton({
-  children,
-  icon,
-  href,
-  isActive = false,
-  disabled = false,
-  closeOnSelect = true,
-  target,
-  rel,
-  onSelect,
-  className,
-}: AnimatedSidebarMenuSubButtonProps) {
-  const context = useAnimatedSidebar()
-  const panel = useAnimatedSidebarPanel()
-
-  const select = (
-    event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>
-  ) => {
-    if (disabled) {
-      event.preventDefault()
-      return
-    }
-    onSelect?.()
-    if (context.isMobile && closeOnSelect) {
-      context.setOpenMobile(false, panel.side)
-    }
-  }
-
-  const content = (
-    <>
-      <span
-        aria-hidden="true"
-        className="grid size-4 shrink-0 place-items-center"
-      >
-        {icon ?? <span className="size-1 rounded-full bg-current" />}
-      </span>
-      <span className="min-w-0 flex-1 truncate">{children}</span>
-    </>
-  )
-
-  const interactiveClassName = cn(
-    "flex min-h-8 w-full min-w-0 items-center gap-2 rounded-lg px-2 text-left text-xs outline-none",
-    "text-muted-foreground transition-colors hover:bg-muted/60 hover:text-foreground",
-    "focus-visible:bg-muted/70 focus-visible:ring-2 focus-visible:ring-ring",
-    isActive && "bg-muted/70 text-foreground",
-    disabled && "cursor-not-allowed opacity-40",
-    className
-  )
-
-  return href ? (
-    <motion.a
-      href={href}
-      target={target}
-      rel={rel ?? (target === "_blank" ? "noreferrer noopener" : undefined)}
-      aria-current={isActive ? "page" : undefined}
-      aria-disabled={disabled || undefined}
-      tabIndex={disabled ? -1 : undefined}
-      onClick={select}
-      whileTap={context.reduce || disabled ? undefined : { scale: 0.98 }}
-      transition={SPRING_PRESS}
-      className={interactiveClassName}
-    >
-      {content}
-    </motion.a>
-  ) : (
-    <motion.button
-      type="button"
-      disabled={disabled}
-      aria-current={isActive ? "page" : undefined}
-      onClick={select}
-      whileTap={context.reduce || disabled ? undefined : { scale: 0.98 }}
-      transition={SPRING_PRESS}
-      className={interactiveClassName}
-    >
-      {content}
-    </motion.button>
-  )
-}
-
-export interface AnimatedSidebarMenuButtonProps {
-  children: ReactNode
-  icon?: ReactNode
-  badge?: ReactNode
-  href?: string
-  isActive?: boolean
-  ariaExpanded?: boolean
-  disabled?: boolean
-  closeOnSelect?: boolean
-  target?: "_blank" | "_self" | "_parent" | "_top"
-  rel?: string
-  onSelect?: () => void
-  className?: string
-}
-
-export function AnimatedSidebarMenuButton({
-  children,
-  icon,
-  badge,
-  href,
-  isActive = false,
-  ariaExpanded,
-  disabled = false,
-  closeOnSelect,
-  target,
-  rel,
-  onSelect,
-  className,
-}: AnimatedSidebarMenuButtonProps) {
-  const context = useAnimatedSidebar()
-  const panel = useAnimatedSidebarPanel()
-  const textLabel = typeof children === "string" ? children : undefined
-
-  const select = (
-    event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>
-  ) => {
-    if (disabled) {
-      event.preventDefault()
-      return
-    }
-    onSelect?.()
-    const shouldCloseOnSelect = closeOnSelect ?? ariaExpanded === undefined
-    if (context.isMobile && shouldCloseOnSelect) {
-      context.setOpenMobile(false, panel.side)
-    }
-  }
-
-  const content = (
-    <>
-      {isActive ? (
-        <motion.span
-          layoutId={context.layoutId}
-          transition={context.reduce ? { duration: 0 } : SPRING_LAYOUT}
-          className="absolute inset-0 rounded-xl bg-muted"
-        />
-      ) : null}
-      {icon ? (
-        <span
-          aria-hidden="true"
-          className="relative z-10 grid size-5 shrink-0 place-items-center"
-        >
-          {icon}
-        </span>
-      ) : null}
-      <motion.span
-        initial={false}
-        animate={{
-          opacity: panel.collapsed ? 0 : 1,
-          x: panel.collapsed ? -4 : 0,
-        }}
-        transition={
-          context.reduce
-            ? REDUCED_TRANSITION
-            : panel.collapsed
-              ? LABEL_EXIT_TRANSITION
-              : LABEL_ENTER_TRANSITION
-        }
-        aria-hidden={panel.collapsed}
-        className={cn(
-          "relative z-10 min-w-0 flex-1 truncate",
-          panel.collapsed && "pointer-events-none"
-        )}
-      >
-        {children}
-      </motion.span>
-      {badge && !panel.collapsed ? (
-        <span className="relative z-10 shrink-0 text-xs text-muted-foreground">
-          {badge}
-        </span>
-      ) : null}
-      {ariaExpanded !== undefined ? (
-        <motion.span
-          aria-hidden="true"
-          initial={false}
-          animate={{
-            opacity: panel.collapsed ? 0 : 1,
-            rotate: ariaExpanded ? 90 : 0,
-            x: panel.collapsed ? 4 : 0,
-          }}
-          transition={context.reduce ? { duration: 0 } : SPRING_LAYOUT}
-          className="relative z-10 grid size-4 shrink-0 place-items-center text-muted-foreground"
-        >
-          <ChevronRight className="size-3.5" />
-        </motion.span>
-      ) : null}
-    </>
-  )
-
-  const interactiveClassName = cn(
-    "relative flex min-h-9 w-full min-w-0 items-center gap-2.5 overflow-hidden rounded-xl px-3 text-left text-sm font-medium outline-none",
-    "text-muted-foreground transition-colors hover:text-foreground",
-    "focus-visible:bg-muted/70 focus-visible:ring-2 focus-visible:ring-ring",
-    isActive && "text-foreground",
-    disabled && "cursor-not-allowed opacity-40",
-    className
-  )
-
-  return href ? (
-    <motion.a
-      href={href}
-      target={target}
-      rel={rel ?? (target === "_blank" ? "noreferrer noopener" : undefined)}
-      aria-current={isActive ? "page" : undefined}
-      aria-expanded={ariaExpanded}
-      aria-disabled={disabled || undefined}
-      aria-label={panel.collapsed ? textLabel : undefined}
-      title={panel.collapsed ? textLabel : undefined}
-      tabIndex={disabled ? -1 : undefined}
-      onClick={select}
-      whileTap={context.reduce || disabled ? undefined : { scale: 0.98 }}
-      transition={SPRING_PRESS}
-      className={interactiveClassName}
-    >
-      {content}
-    </motion.a>
-  ) : (
-    <motion.button
-      type="button"
-      disabled={disabled}
-      aria-current={isActive ? "page" : undefined}
-      aria-expanded={ariaExpanded}
-      aria-label={panel.collapsed ? textLabel : undefined}
-      title={panel.collapsed ? textLabel : undefined}
-      onClick={select}
-      whileTap={context.reduce || disabled ? undefined : { scale: 0.98 }}
-      transition={SPRING_PRESS}
-      className={interactiveClassName}
-    >
-      {content}
-    </motion.button>
-  )
-}