; }); SidebarInset.displayName = 'SidebarInset'; export interface SidebarInputProps extends React.ComponentProps {} const SidebarInput = React.forwardRef(({ className = '', ...props }, ref) => { return ; }); SidebarInput.displayName = 'SidebarInput'; export interface SidebarHeaderProps extends React.HTMLAttributes {} const SidebarHeader = React.forwardRef(({ className = '', ...props }, ref) => { return

; }); SidebarHeader.displayName = 'SidebarHeader'; export interface SidebarFooterProps extends React.HTMLAttributes {} const SidebarFooter = React.forwardRef(({ className = '', ...props }, ref) => { return

; }); SidebarFooter.displayName = 'SidebarFooter'; export interface SidebarSeparatorProps extends React.ComponentProps {} const SidebarSeparator = React.forwardRef, SidebarSeparatorProps>(({ className = '', ...props }, ref) => { return ; }); SidebarSeparator.displayName = 'SidebarSeparator'; export interface SidebarContentProps extends React.HTMLAttributes {} const SidebarContent = React.forwardRef(({ className = '', ...props }, ref) => { return

; }); SidebarContent.displayName = 'SidebarContent'; export interface SidebarGroupProps extends React.HTMLAttributes {} const SidebarGroup = React.forwardRef(({ className = '', ...props }, ref) => { return

; }); SidebarGroup.displayName = 'SidebarGroup'; export interface SidebarGroupLabelProps extends React.HTMLAttributes { asChild?: boolean; } const SidebarGroupLabel = React.forwardRef(({ className = '', asChild = false, ...props }, ref) => { const Comp = asChild ? Slot : 'div'; return ; }); SidebarGroupLabel.displayName = 'SidebarGroupLabel'; export interface SidebarGroupActionProps extends React.ButtonHTMLAttributes { asChild?: boolean; } const SidebarGroupAction = React.forwardRef(({ className = '', asChild = false, ...props }, ref) => { const Comp = asChild ? Slot : 'button'; return ; }); SidebarGroupAction.displayName = 'SidebarGroupAction'; export interface SidebarGroupContentProps extends React.HTMLAttributes {} const SidebarGroupContent = React.forwardRef(({ className = '', ...props }, ref) => { return

; }); SidebarGroupContent.displayName = 'SidebarGroupContent'; export interface SidebarMenuProps extends React.HTMLAttributes {} const SidebarMenu = React.forwardRef(({ className = '', ...props }, ref) => { return

{} const SidebarMenuItem = React.forwardRef(({ className = '', ...props }, ref) => { return

; }); SidebarMenuItem.displayName = 'SidebarMenuItem'; export interface SidebarMenuButtonProps extends React.ButtonHTMLAttributes { asChild?: boolean; isActive?: boolean; tooltip?: string | React.ComponentProps; variant?: SidebarMenuButtonVariant; size?: SidebarMenuButtonSize; } const SidebarMenuButton = React.forwardRef( ({ asChild = false, isActive = false, variant = 'default', size = 'default', tooltip, className = '', ...props }, ref) => { const Comp = asChild ? Slot : 'button'; const styleKeys = getSidebarMenuButtonStyleKeys(variant, size); const button = ( ); if (!tooltip) { return button; } const tooltipProps = typeof tooltip === 'string' ? { children: tooltip } : tooltip; return ( {button} ); }, ); SidebarMenuButton.displayName = 'SidebarMenuButton'; export interface SidebarMenuActionProps extends React.ButtonHTMLAttributes { asChild?: boolean; showOnHover?: boolean; } const SidebarMenuAction = React.forwardRef(({ className = '', asChild = false, showOnHover = false, ...props }, ref) => { const Comp = asChild ? Slot : 'button'; return ; }); SidebarMenuAction.displayName = 'SidebarMenuAction'; export interface SidebarMenuBadgeProps extends React.HTMLAttributes {} const SidebarMenuBadge = React.forwardRef(({ className = '', ...props }, ref) => { return

; }); SidebarMenuBadge.displayName = 'SidebarMenuBadge'; export interface SidebarMenuSkeletonProps extends React.HTMLAttributes { showIcon?: boolean; } const SidebarMenuSkeleton = React.forwardRef(({ className = '', showIcon = false, ...props }, ref) => { const width = useMemo(() => `${Math.floor(Math.random() * 40) + 50}%`, []); return (

{showIcon && }

); }); SidebarMenuSkeleton.displayName = 'SidebarMenuSkeleton'; export interface SidebarMenuSubProps extends React.HTMLAttributes {} const SidebarMenuSub = React.forwardRef(({ className = '', ...props }, ref) => { return

{} const SidebarMenuSubItem = React.forwardRef(({ className = '', ...props }, ref) => { return

; }); SidebarMenuSubItem.displayName = 'SidebarMenuSubItem'; export interface SidebarMenuSubButtonProps extends React.AnchorHTMLAttributes { asChild?: boolean; size?: 'sm' | 'md'; isActive?: boolean; } const SidebarMenuSubButton = React.forwardRef(({ asChild = false, size = 'md', isActive = false, className = '', ...props }, ref) => { const Comp = asChild ? Slot : 'a'; const styleKeys = getSidebarMenuSubButtonStyleKeys(size); return ( ); }); 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, useSidebar, }; export default Sidebar; 4f:T1e1b,@use '../../../styles/variables/colors' as *; // 侧边栏使用标准 shadcn 扩展令牌。 $sidebar-bg: var(--sidebar); $sidebar-fg: var(--sidebar-foreground); $sidebar-border: var(--sidebar-border); $sidebar-accent: var(--sidebar-accent); $sidebar-accent-fg: var(--sidebar-accent-foreground); $sidebar-ring: var(--sidebar-ring); // 根包裹层 .wrapper { display: flex; width: 100%; min-height: 100vh; } // 桌面端侧边栏 .container { display: none; flex-direction: column; flex-shrink: 0; width: var(--sidebar-width); overflow: hidden; transition: width $transition-normal; @media (min-width: 768px) { display: flex; } &[data-side='left'] { border-right: 1px solid $sidebar-border; } &[data-side='right'] { border-left: 1px solid $sidebar-border; } } // 折叠为 offcanvas 时收起 .container[data-collapsible='offcanvas'][data-state='collapsed'] { width: 0; border: none; } // 折叠为 icon 时收窄 .container[data-collapsible='icon'][data-state='collapsed'] { width: var(--sidebar-width-icon); } // 侧边栏主体 .sidebar { display: flex; flex-direction: column; width: 100%; flex: 1; background-color: $sidebar-bg; color: $sidebar-fg; } // floating 变体（data-variant 位于 .container 上） .container[data-variant='floating'] .sidebar { border-radius: $radius-lg; border: 1px solid $sidebar-border; box-shadow: $shadow-sm; } // 内容区 .content { display: flex; min-height: 0; flex: 1; flex-direction: column; gap: $spacing-2; overflow: auto; } .header, .footer { display: flex; flex-direction: column; gap: $spacing-2; padding: $spacing-2; } // 分组 .group { position: relative; display: flex; width: 100%; min-width: 0; flex-direction: column; padding: $spacing-2; } .groupLabel { display: flex; height: 2rem; flex-shrink: 0; align-items: center; border-radius: $radius; padding-inline: $spacing-2; font-size: $text-xs; font-weight: $font-medium; color: color-mix(in srgb, $sidebar-fg 70%, transparent); svg { width: 1rem; height: 1rem; flex-shrink: 0; } } .groupAction { position: absolute; top: $spacing-3; right: $spacing-3; display: flex; aspect-ratio: 1; width: 1.25rem; align-items: center; justify-content: center; border: none; border-radius: $radius; padding: 0; background-color: transparent; color: $sidebar-fg; cursor: pointer; &:hover { background-color: $sidebar-accent; color: $sidebar-accent-fg; } svg { width: 1rem; height: 1rem; } } .groupContent { width: 100%; font-size: $text-sm; } // 菜单 .menu { display: flex; width: 100%; min-width: 0; flex-direction: column; gap: $spacing-1; margin: 0; padding: 0; list-style: none; } .menuItem { position: relative; } // 菜单按钮 .menuButton { display: flex; width: 100%; height: 2rem; align-items: center; gap: $spacing-2; overflow: hidden; border: none; border-radius: $radius; background-color: transparent; color: $sidebar-fg; text-align: left; font-size: $text-sm; cursor: pointer; outline: none; transition: width $transition-normal, height $transition-normal, padding $transition-normal; &:hover { background-color: $sidebar-accent; color: $sidebar-accent-fg; } &:focus-visible { box-shadow: 0 0 0 2px $sidebar-ring; } &[data-active='true'] { background-color: $sidebar-accent; font-weight: $font-medium; color: $sidebar-accent-fg; } svg { width: 1rem; height: 1rem; flex-shrink: 0; } > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } // 菜单按钮变体 .variantDefault { &:hover { background-color: $sidebar-accent; color: $sidebar-accent-fg; } } .variantOutline { background-color: $background; box-shadow: 0 0 0 1px $sidebar-border; &:hover { background-color: $sidebar-accent; color: $sidebar-accent-fg; box-shadow: 0 0 0 1px $sidebar-accent; } } // 菜单按钮尺寸 (sizeSm 与子菜单按钮共享) .sizeDefault { height: 2rem; padding: $spacing-2; } .sizeSm { height: 1.75rem; padding-inline: $spacing-2; font-size: $text-xs; } .sizeLg { height: 3rem; padding: $spacing-2; } // 菜单操作按钮 .menuAction { position: absolute; top: $spacing-1_5; right: $spacing-1; display: flex; aspect-ratio: 1; width: 1.25rem; align-items: center; justify-content: center; border: none; border-radius: $radius; padding: 0; background-color: transparent; color: $sidebar-fg; cursor: pointer; &:hover { background-color: $sidebar-accent; color: $sidebar-accent-fg; } svg { width: 1rem; height: 1rem; } } // 菜单徽标 .menuBadge { position: absolute; right: $spacing-1; display: flex; height: 1.25rem; min-width: 1.25rem; align-items: center; justify-content: center; border-radius: $radius; padding-inline: $spacing-1; font-size: $text-xs; font-weight: $font-medium; color: $sidebar-fg; pointer-events: none; font-variant-numeric: tabular-nums; } // 子菜单 .menuSub { display: flex; min-width: 0; flex-direction: column; gap: $spacing-1; margin: 0; padding: $spacing-2 0; padding-left: $spacing-2_5; border-left: 1px solid $sidebar-border; list-style: none; } .menuSubItem { position: relative; } .menuSubButton { display: flex; height: 1.75rem; min-width: 0; align-items: center; gap: $spacing-2; overflow: hidden; border: none; border-radius: $radius; padding-inline: $spacing-2; background-color: transparent; color: $sidebar-fg; font-size: $text-sm; text-align: left; cursor: pointer; outline: none; &:hover { background-color: $sidebar-accent; color: $sidebar-accent-fg; } &[data-active='true'] { background-color: $sidebar-accent; color: $sidebar-accent-fg; } svg { width: 1rem; height: 1rem; flex-shrink: 0; } > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } // 子菜单按钮尺寸 (sizeSm 与菜单按钮共享) .sizeMd { font-size: $text-sm; } // 触发器按钮 .trigger { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border: none; border-radius: $radius; background-color: transparent; color: $foreground; cursor: pointer; &:hover { background-color: $accent; color: $accent-foreground; } svg { width: 1rem; height: 1rem; } } // 分隔线 .separator { width: 100%; } // 输入框 .input { width: 100%; height: 2rem; background-color: $background; border: 1px solid $sidebar-border; border-radius: $radius; padding-inline: $spacing-2; font-size: $text-sm; color: $foreground; box-shadow: none; &:focus { outline: none; border-color: $sidebar-ring; box-shadow: 0 0 0 1px $sidebar-ring; } } // 侧边栏占位 inset .inset { position: relative; display: flex; width: 100%; flex: 1; flex-direction: column; background-color: $background; } // 折叠为 icon 时隐藏文本内容 .container[data-collapsible='icon'][data-state='collapsed'] { .groupLabel, .menuButton > span:last-child, .menuSubButton > span:last-child, .menuBadge, .menuSub, .groupAction { display: none; } .menuButton { width: 2rem; height: 2rem; padding: $spacing-2; justify-content: center; } } // 骨架屏 .skeleton { display: flex; height: 2rem; align-items: center; gap: $spacing-2; border-radius: $radius; padding-inline: $spacing-2; } .skeletonIcon { width: 1rem; height: 1rem; border-radius: $radius; } .skeletonText { height: 1rem; max-width: var(--skeleton-width); flex: 1; } // 仅供读屏 .srOnly { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } 50:T442,export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar, type SidebarProviderProps, type SidebarProps, type SidebarTriggerProps, type SidebarRailProps, type SidebarInsetProps, type SidebarInputProps, type SidebarHeaderProps, type SidebarFooterProps, type SidebarSeparatorProps, type SidebarContentProps, type SidebarGroupProps, type SidebarGroupLabelProps, type SidebarGroupActionProps, type SidebarGroupContentProps, type SidebarMenuProps, type SidebarMenuItemProps, type SidebarMenuButtonProps, type SidebarMenuActionProps, type SidebarMenuBadgeProps, type SidebarMenuSkeletonProps, type SidebarMenuSubProps, type SidebarMenuSubItemProps, type SidebarMenuSubButtonProps, } from './sidebar'; 4b:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@radix-ui/react-slot",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-slot","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@radix-ui/react-slot"}]]}]}]]}],["$","$L4c",null,{"namespace":"@tile-ui","registryDependencies":["@tile-ui/core","button","input","separator","sheet","skeleton","tooltip","@tile-ui/styles"]}]]}],null]}],["$","$L4d",null,{"files":[{"path":"packages/react/src/components/sidebar/sidebar.tsx","content":"$4e","type":"registry:ui","target":"components/ui/sidebar/sidebar.tsx"},{"path":"packages/styles/scss/components/sidebar.module.scss","content":"$4f","type":"registry:file","target":"components/ui/sidebar/sidebar.module.scss"},{"path":"packages/react/src/components/sidebar/index.ts","content":"$50","type":"registry:ui","target":"components/ui/sidebar/index.ts"}],"className":"h-[70svh] min-h-80"}]]}]