@teamix-evo/ui 0.3.0 → 0.5.0

package/src/components/sidebar/sidebar.tsx

@@ -1,824 +0,0 @@
-/**
- * Sidebar — shadcn 完整版 25 primitives.
- *
- * **arbitrary value 豁免说明**:本组件少量使用 Tailwind arbitrary value
- * (`w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]` 等),原因:
- *
- * 1. Sidebar 折叠态需要在 `group-data-[collapsible=icon]` 选择器下响应父级 data
- *    属性 — 这只能通过 Tailwind selector 实现,无法 inline `style` 替代;
- * 2. floating/inset variant 的 gap/container 宽度是 `--sidebar-width-icon + p-2`
- *    的合成值,Tailwind 标尺无法直接表达;
- * 3. MenuButton outline variant 用 `box-shadow: 0 0 0 1px ...` 模拟 1px 边框
- *    避免占用尺寸,这是 shadcn outline 风格的核心实现技术。
- *
- * 这些 arbitrary value 是 Sidebar 复合组件的结构性必要,与 ADR 0008 视觉规则
- * 的本意(避免任意像素值/任意色值)相符 — 此处的值都是 token 引用,不是
- * 硬编码像素或色值。本文件单独豁免 `teamix-evo/no-arbitrary-tw-value`。
- */
-/* eslint-disable teamix-evo/no-arbitrary-tw-value */
-import * as React from 'react';
-import { Slot } from '@radix-ui/react-slot';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { PanelLeft } from 'lucide-react';
-
-import { cn } from '@/utils/cn';
-import { useIsMobile } from '@/hooks/use-mobile';
-import { Button } from '@/components/button/button';
-import { Input } from '@/components/input/input';
-import { Separator } from '@/components/separator/separator';
-import {
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetHeader,
-  SheetTitle,
-} from '@/components/sheet/sheet';
-import { Skeleton } from '@/components/skeleton/skeleton';
-import {
-  TooltipContent,
-  TooltipProvider,
-  TooltipRoot,
-  TooltipTrigger,
-} from '@/components/tooltip/tooltip';
-
-const SIDEBAR_COOKIE_NAME = 'sidebar_state';
-const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
-const SIDEBAR_WIDTH = '16rem';
-const SIDEBAR_WIDTH_MOBILE = '18rem';
-const SIDEBAR_WIDTH_ICON = '3rem';
-const SIDEBAR_KEYBOARD_SHORTCUT = 'b';
-
-interface SidebarContextValue {
-  state: 'expanded' | 'collapsed';
-  open: boolean;
-  setOpen: (open: boolean) => void;
-  openMobile: boolean;
-  setOpenMobile: (open: boolean) => void;
-  isMobile: boolean;
-  toggleSidebar: () => void;
-}
-
-const SidebarContext = React.createContext<SidebarContextValue | null>(null);
-
-export function useSidebar(): SidebarContextValue {
-  const ctx = React.useContext(SidebarContext);
-  if (!ctx) {
-    throw new Error('useSidebar must be used within a SidebarProvider.');
-  }
-  return ctx;
-}
-
-// ─── Provider ──────────────────────────────────────────────────────────────
-
-export interface SidebarProviderProps
-  extends React.HTMLAttributes<HTMLDivElement> {
-  defaultOpen?: boolean;
-  open?: boolean;
-  onOpenChange?: (open: boolean) => void;
-}
-
-const SidebarProvider = React.forwardRef<HTMLDivElement, SidebarProviderProps>(
-  (
-    {
-      defaultOpen = true,
-      open: openProp,
-      onOpenChange: setOpenProp,
-      className,
-      style,
-      children,
-      ...props
-    },
-    ref,
-  ) => {
-    const isMobile = useIsMobile();
-    const [openMobile, setOpenMobile] = React.useState(false);
-
-    const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
-    const open = openProp ?? internalOpen;
-    const setOpen = React.useCallback(
-      (value: boolean | ((value: boolean) => boolean)) => {
-        const openState = typeof value === 'function' ? value(open) : value;
-        if (setOpenProp) {
-          setOpenProp(openState);
-        } else {
-          setInternalOpen(openState);
-        }
-        document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
-      },
-      [setOpenProp, open],
-    );
-
-    const toggleSidebar = React.useCallback(() => {
-      return isMobile
-        ? setOpenMobile((current) => !current)
-        : setOpen((current) => !current);
-    }, [isMobile, setOpen, setOpenMobile]);
-
-    React.useEffect(() => {
-      const handleKeyDown = (event: KeyboardEvent) => {
-        if (
-          event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
-          (event.metaKey || event.ctrlKey)
-        ) {
-          event.preventDefault();
-          toggleSidebar();
-        }
-      };
-      window.addEventListener('keydown', handleKeyDown);
-      return () => window.removeEventListener('keydown', handleKeyDown);
-    }, [toggleSidebar]);
-
-    const state: 'expanded' | 'collapsed' = open ? 'expanded' : 'collapsed';
-
-    const contextValue = React.useMemo<SidebarContextValue>(
-      () => ({
-        state,
-        open,
-        setOpen,
-        isMobile,
-        openMobile,
-        setOpenMobile,
-        toggleSidebar,
-      }),
-      [
-        state,
-        open,
-        setOpen,
-        isMobile,
-        openMobile,
-        setOpenMobile,
-        toggleSidebar,
-      ],
-    );
-
-    return (
-      <SidebarContext.Provider value={contextValue}>
-        <TooltipProvider delayDuration={0}>
-          <div
-            ref={ref}
-            data-slot="sidebar-wrapper"
-            style={
-              {
-                '--sidebar-width': SIDEBAR_WIDTH,
-                '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
-                ...style,
-              } as React.CSSProperties
-            }
-            className={cn(
-              'group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full',
-              className,
-            )}
-            {...props}
-          >
-            {children}
-          </div>
-        </TooltipProvider>
-      </SidebarContext.Provider>
-    );
-  },
-);
-SidebarProvider.displayName = 'SidebarProvider';
-
-// ─── Main Sidebar container ────────────────────────────────────────────────
-
-export interface SidebarProps extends React.HTMLAttributes<HTMLDivElement> {
-  side?: 'left' | 'right';
-  variant?: 'sidebar' | 'floating' | 'inset';
-  collapsible?: 'offcanvas' | 'icon' | 'none';
-}
-
-const Sidebar = React.forwardRef<HTMLDivElement, SidebarProps>(
-  (
-    {
-      side = 'left',
-      variant = 'sidebar',
-      collapsible = 'offcanvas',
-      className,
-      children,
-      ...props
-    },
-    ref,
-  ) => {
-    const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
-
-    if (collapsible === 'none') {
-      return (
-        <div
-          ref={ref}
-          data-slot="sidebar"
-          className={cn(
-            'bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col',
-            className,
-          )}
-          {...props}
-        >
-          {children}
-        </div>
-      );
-    }
-
-    if (isMobile) {
-      return (
-        <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
-          <SheetContent
-            data-sidebar="sidebar"
-            data-slot="sidebar"
-            data-mobile="true"
-            className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
-            style={
-              {
-                '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
-              } as React.CSSProperties
-            }
-            side={side}
-          >
-            <SheetHeader className="sr-only">
-              <SheetTitle>Sidebar</SheetTitle>
-              <SheetDescription>Displays the mobile sidebar.</SheetDescription>
-            </SheetHeader>
-            <div className="flex h-full w-full flex-col">{children}</div>
-          </SheetContent>
-        </Sheet>
-      );
-    }
-
-    return (
-      <div
-        ref={ref}
-        className="group peer text-sidebar-foreground hidden md:block"
-        data-state={state}
-        data-collapsible={state === 'collapsed' ? collapsible : ''}
-        data-variant={variant}
-        data-side={side}
-        data-slot="sidebar"
-      >
-        {/* sidebar gap on desktop */}
-        <div
-          data-slot="sidebar-gap"
-          className={cn(
-            'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',
-            'group-data-[collapsible=offcanvas]:w-0',
-            'group-data-[side=right]:rotate-180',
-            variant === 'floating' || variant === 'inset'
-              ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'
-              : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)',
-          )}
-        />
-        <div
-          data-slot="sidebar-container"
-          data-side={side}
-          className={cn(
-            'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex',
-            'data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]',
-            'data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
-            variant === 'floating' || variant === 'inset'
-              ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
-              : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l border-sidebar-border',
-            className,
-          )}
-          {...props}
-        >
-          <div
-            data-sidebar="sidebar"
-            data-slot="sidebar-inner"
-            className="bg-sidebar group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:ring-sidebar-border flex size-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
-          >
-            {children}
-          </div>
-        </div>
-      </div>
-    );
-  },
-);
-Sidebar.displayName = 'Sidebar';
-
-// ─── Trigger / Rail / Inset / Input ────────────────────────────────────────
-
-const SidebarTrigger = React.forwardRef<
-  HTMLButtonElement,
-  React.ComponentProps<typeof Button>
->(({ className, onClick, ...props }, ref) => {
-  const { toggleSidebar } = useSidebar();
-  return (
-    <Button
-      ref={ref}
-      data-sidebar="trigger"
-      data-slot="sidebar-trigger"
-      variant="ghost"
-      size="icon"
-      className={cn('size-7', className)}
-      onClick={(event) => {
-        onClick?.(event);
-        toggleSidebar();
-      }}
-      aria-label="Toggle Sidebar"
-      {...props}
-    >
-      <PanelLeft />
-      <span className="sr-only">Toggle Sidebar</span>
-    </Button>
-  );
-});
-SidebarTrigger.displayName = 'SidebarTrigger';
-
-const SidebarRail = React.forwardRef<
-  HTMLButtonElement,
-  React.ButtonHTMLAttributes<HTMLButtonElement>
->(({ className, ...props }, ref) => {
-  const { toggleSidebar } = useSidebar();
-  return (
-    <button
-      ref={ref}
-      type="button"
-      data-sidebar="rail"
-      data-slot="sidebar-rail"
-      aria-label="Toggle Sidebar"
-      tabIndex={-1}
-      onClick={toggleSidebar}
-      title="Toggle Sidebar"
-      className={cn(
-        'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex',
-        'after:absolute after:inset-y-0 after:start-1/2 after:w-0.5',
-        'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',
-        '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
-        'group-data-[collapsible=offcanvas]:hover:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full',
-        '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
-        '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
-        className,
-      )}
-      {...props}
-    />
-  );
-});
-SidebarRail.displayName = 'SidebarRail';
-
-const SidebarInset = React.forwardRef<
-  HTMLElement,
-  React.HTMLAttributes<HTMLElement>
->(({ className, ...props }, ref) => (
-  <main
-    ref={ref}
-    data-slot="sidebar-inset"
-    className={cn(
-      'bg-background relative flex w-full flex-1 flex-col',
-      'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2',
-      className,
-    )}
-    {...(props as React.HTMLAttributes<HTMLElement>)}
-  />
-));
-SidebarInset.displayName = 'SidebarInset';
-
-const SidebarInput = React.forwardRef<
-  HTMLInputElement,
-  React.ComponentProps<typeof Input>
->(({ className, ...props }, ref) => (
-  <Input
-    ref={ref}
-    data-slot="sidebar-input"
-    data-sidebar="input"
-    className={cn('bg-background h-8 w-full shadow-none', className)}
-    {...props}
-  />
-));
-SidebarInput.displayName = 'SidebarInput';
-
-// ─── Header / Footer / Separator / Content ──────────────────────────────────
-
-const SidebarHeader = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    data-slot="sidebar-header"
-    data-sidebar="header"
-    className={cn('flex flex-col gap-2 p-2', className)}
-    {...props}
-  />
-));
-SidebarHeader.displayName = 'SidebarHeader';
-
-const SidebarFooter = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    data-slot="sidebar-footer"
-    data-sidebar="footer"
-    className={cn('flex flex-col gap-2 p-2', className)}
-    {...props}
-  />
-));
-SidebarFooter.displayName = 'SidebarFooter';
-
-const SidebarSeparator = React.forwardRef<
-  React.ElementRef<typeof Separator>,
-  React.ComponentPropsWithoutRef<typeof Separator>
->(({ className, ...props }, ref) => (
-  <Separator
-    ref={ref}
-    data-slot="sidebar-separator"
-    data-sidebar="separator"
-    className={cn('bg-sidebar-border mx-2 w-auto', className)}
-    {...props}
-  />
-));
-SidebarSeparator.displayName = 'SidebarSeparator';
-
-const SidebarContent = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    data-slot="sidebar-content"
-    data-sidebar="content"
-    className={cn(
-      'no-scrollbar flex min-h-0 flex-1 flex-col gap-0 overflow-auto group-data-[collapsible=icon]:overflow-hidden',
-      className,
-    )}
-    {...props}
-  />
-));
-SidebarContent.displayName = 'SidebarContent';
-
-// ─── Group / GroupLabel / GroupAction / GroupContent ────────────────────────
-
-const SidebarGroup = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    data-slot="sidebar-group"
-    data-sidebar="group"
-    className={cn('relative flex w-full min-w-0 flex-col p-2', className)}
-    {...props}
-  />
-));
-SidebarGroup.displayName = 'SidebarGroup';
-
-export interface SidebarGroupLabelProps
-  extends React.HTMLAttributes<HTMLDivElement> {
-  asChild?: boolean;
-}
-
-const SidebarGroupLabel = React.forwardRef<
-  HTMLDivElement,
-  SidebarGroupLabelProps
->(({ className, asChild = false, ...props }, ref) => {
-  const Comp = asChild ? Slot : 'div';
-  return (
-    <Comp
-      ref={ref}
-      data-slot="sidebar-group-label"
-      data-sidebar="group-label"
-      className={cn(
-        'text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium transition-[margin,opacity] duration-200 ease-linear outline-hidden group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
-        className,
-      )}
-      {...props}
-    />
-  );
-});
-SidebarGroupLabel.displayName = 'SidebarGroupLabel';
-
-export interface SidebarGroupActionProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  asChild?: boolean;
-}
-
-const SidebarGroupAction = React.forwardRef<
-  HTMLButtonElement,
-  SidebarGroupActionProps
->(({ className, asChild = false, ...props }, ref) => {
-  const Comp = asChild ? Slot : 'button';
-  return (
-    <Comp
-      ref={ref}
-      data-slot="sidebar-group-action"
-      data-sidebar="group-action"
-      className={cn(
-        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 transition-transform outline-hidden focus-visible:ring-2 group-data-[collapsible=icon]:hidden [&>svg]:size-4 [&>svg]:shrink-0',
-        'after:absolute after:-inset-2 md:after:hidden',
-        className,
-      )}
-      {...props}
-    />
-  );
-});
-SidebarGroupAction.displayName = 'SidebarGroupAction';
-
-const SidebarGroupContent = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    data-slot="sidebar-group-content"
-    data-sidebar="group-content"
-    className={cn('w-full text-xs', className)}
-    {...props}
-  />
-));
-SidebarGroupContent.displayName = 'SidebarGroupContent';
-
-// ─── Menu / MenuItem / MenuButton ──────────────────────────────────────────
-
-const SidebarMenu = React.forwardRef<
-  HTMLUListElement,
-  React.HTMLAttributes<HTMLUListElement>
->(({ className, ...props }, ref) => (
-  <ul
-    ref={ref}
-    data-slot="sidebar-menu"
-    data-sidebar="menu"
-    className={cn('flex w-full min-w-0 flex-col gap-0', className)}
-    {...props}
-  />
-));
-SidebarMenu.displayName = 'SidebarMenu';
-
-const SidebarMenuItem = React.forwardRef<
-  HTMLLIElement,
-  React.HTMLAttributes<HTMLLIElement>
->(({ className, ...props }, ref) => (
-  <li
-    ref={ref}
-    data-slot="sidebar-menu-item"
-    data-sidebar="menu-item"
-    className={cn('group/menu-item relative', className)}
-    {...props}
-  />
-));
-SidebarMenuItem.displayName = 'SidebarMenuItem';
-
-const sidebarMenuButtonVariants = cva(
-  'peer/menu-button group/menu-button ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:font-medium data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-xs outline-hidden transition-[width,height,padding] focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&_svg]:size-4 [&_svg]:shrink-0',
-  {
-    variants: {
-      variant: {
-        default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
-        outline:
-          'bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',
-      },
-      size: {
-        default: 'h-8 text-xs',
-        sm: 'h-7 text-xs',
-        lg: 'h-12 text-sm group-data-[collapsible=icon]:p-0!',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-      size: 'default',
-    },
-  },
-);
-
-export interface SidebarMenuButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof sidebarMenuButtonVariants> {
-  asChild?: boolean;
-  isActive?: boolean;
-  tooltip?: string | React.ComponentProps<typeof TooltipContent>;
-}
-
-const SidebarMenuButton = React.forwardRef<
-  HTMLButtonElement,
-  SidebarMenuButtonProps
->(
-  (
-    {
-      asChild = false,
-      isActive = false,
-      variant = 'default',
-      size = 'default',
-      tooltip,
-      className,
-      ...props
-    },
-    ref,
-  ) => {
-    const Comp = asChild ? Slot : 'button';
-    const { isMobile, state } = useSidebar();
-
-    const button = (
-      <Comp
-        ref={ref}
-        data-slot="sidebar-menu-button"
-        data-sidebar="menu-button"
-        data-size={size}
-        data-active={isActive ? 'true' : undefined}
-        className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
-        {...props}
-      />
-    );
-
-    if (!tooltip) {
-      return button;
-    }
-
-    const tooltipProps =
-      typeof tooltip === 'string' ? { children: tooltip } : tooltip;
-
-    return (
-      <TooltipRoot>
-        <TooltipTrigger asChild>{button}</TooltipTrigger>
-        <TooltipContent
-          side="right"
-          align="center"
-          hidden={state !== 'collapsed' || isMobile}
-          {...tooltipProps}
-        />
-      </TooltipRoot>
-    );
-  },
-);
-SidebarMenuButton.displayName = 'SidebarMenuButton';
-
-// ─── MenuAction / MenuBadge / MenuSkeleton ─────────────────────────────────
-
-export interface SidebarMenuActionProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  asChild?: boolean;
-  showOnHover?: boolean;
-}
-
-const SidebarMenuAction = React.forwardRef<
-  HTMLButtonElement,
-  SidebarMenuActionProps
->(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
-  const Comp = asChild ? Slot : 'button';
-  return (
-    <Comp
-      ref={ref}
-      data-slot="sidebar-menu-action"
-      data-sidebar="menu-action"
-      className={cn(
-        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 transition-transform outline-hidden focus-visible:ring-2 group-data-[collapsible=icon]:hidden [&>svg]:size-4 [&>svg]:shrink-0',
-        'after:absolute after:-inset-2 md:after:hidden',
-        'peer-data-[size=sm]/menu-button:top-1 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5',
-        showOnHover &&
-          'peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 aria-expanded:opacity-100 md:opacity-0',
-        className,
-      )}
-      {...props}
-    />
-  );
-});
-SidebarMenuAction.displayName = 'SidebarMenuAction';
-
-const SidebarMenuBadge = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    data-slot="sidebar-menu-badge"
-    data-sidebar="menu-badge"
-    className={cn(
-      'text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none group-data-[collapsible=icon]:hidden',
-      'peer-data-[size=sm]/menu-button:top-1 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5',
-      className,
-    )}
-    {...props}
-  />
-));
-SidebarMenuBadge.displayName = 'SidebarMenuBadge';
-
-export interface SidebarMenuSkeletonProps
-  extends React.HTMLAttributes<HTMLDivElement> {
-  showIcon?: boolean;
-}
-
-const SidebarMenuSkeleton = React.forwardRef<
-  HTMLDivElement,
-  SidebarMenuSkeletonProps
->(({ className, showIcon = false, ...props }, ref) => {
-  // Stable but varied widths so a stack of skeletons doesn't look uniform.
-  const [width] = React.useState(
-    () => `${Math.floor(Math.random() * 40) + 50}%`,
-  );
-  return (
-    <div
-      ref={ref}
-      data-slot="sidebar-menu-skeleton"
-      data-sidebar="menu-skeleton"
-      className={cn('flex h-8 items-center gap-2 rounded-md px-2', className)}
-      {...props}
-    >
-      {showIcon && (
-        <Skeleton
-          className="size-4 rounded-md"
-          data-sidebar="menu-skeleton-icon"
-        />
-      )}
-      <Skeleton
-        className="h-4 max-w-(--skeleton-width) flex-1"
-        data-sidebar="menu-skeleton-text"
-        style={
-          {
-            '--skeleton-width': width,
-          } as React.CSSProperties
-        }
-      />
-    </div>
-  );
-});
-SidebarMenuSkeleton.displayName = 'SidebarMenuSkeleton';
-
-// ─── MenuSub / MenuSubItem / MenuSubButton ─────────────────────────────────
-
-const SidebarMenuSub = React.forwardRef<
-  HTMLUListElement,
-  React.HTMLAttributes<HTMLUListElement>
->(({ className, ...props }, ref) => (
-  <ul
-    ref={ref}
-    data-slot="sidebar-menu-sub"
-    data-sidebar="menu-sub"
-    className={cn(
-      'border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-l-border px-2.5 py-0.5 group-data-[collapsible=icon]:hidden',
-      className,
-    )}
-    {...props}
-  />
-));
-SidebarMenuSub.displayName = 'SidebarMenuSub';
-
-const SidebarMenuSubItem = React.forwardRef<
-  HTMLLIElement,
-  React.HTMLAttributes<HTMLLIElement>
->(({ className, ...props }, ref) => (
-  <li
-    ref={ref}
-    data-slot="sidebar-menu-sub-item"
-    data-sidebar="menu-sub-item"
-    className={cn('group/menu-sub-item relative', className)}
-    {...props}
-  />
-));
-SidebarMenuSubItem.displayName = 'SidebarMenuSubItem';
-
-export interface SidebarMenuSubButtonProps
-  extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
-  asChild?: boolean;
-  size?: 'sm' | 'md';
-  isActive?: boolean;
-}
-
-const SidebarMenuSubButton = React.forwardRef<
-  HTMLAnchorElement,
-  SidebarMenuSubButtonProps
->(
-  (
-    { className, asChild = false, size = 'md', isActive = false, ...props },
-    ref,
-  ) => {
-    const Comp = asChild ? Slot : 'a';
-    return (
-      <Comp
-        ref={ref}
-        data-slot="sidebar-menu-sub-button"
-        data-sidebar="menu-sub-button"
-        data-size={size}
-        data-active={isActive ? 'true' : undefined}
-        className={cn(
-          'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 group-data-[collapsible=icon]:hidden aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0',
-          'data-[size=sm]:text-xs data-[size=md]:text-xs',
-          className,
-        )}
-        {...props}
-      />
-    );
-  },
-);
-SidebarMenuSubButton.displayName = 'SidebarMenuSubButton';
-
-export {
-  Sidebar,
-  SidebarContent,
-  SidebarFooter,
-  SidebarGroup,
-  SidebarGroupAction,
-  SidebarGroupContent,
-  SidebarGroupLabel,
-  SidebarHeader,
-  SidebarInput,
-  SidebarInset,
-  SidebarMenu,
-  SidebarMenuAction,
-  SidebarMenuBadge,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarMenuSkeleton,
-  SidebarMenuSub,
-  SidebarMenuSubButton,
-  SidebarMenuSubItem,
-  SidebarProvider,
-  SidebarRail,
-  SidebarSeparator,
-  SidebarTrigger,
-};