{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sidebar",
  "type": "registry:ui",
  "title": "Sidebar",
  "description": "Sidebar layout for Tile UI.",
  "dependencies": [
    "@radix-ui/react-slot"
  ],
  "devDependencies": [
    "sass"
  ],
  "registryDependencies": [
    "@tile-ui/core",
    "button",
    "input",
    "separator",
    "sheet",
    "skeleton",
    "tooltip",
    "@tile-ui/styles"
  ],
  "files": [
    {
      "path": "packages/react/src/components/sidebar/sidebar.tsx",
      "type": "registry:ui",
      "target": "components/ui/sidebar/sidebar.tsx",
      "content": "import React, { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';\nimport { Slot } from '@radix-ui/react-slot';\nimport {\n\tcreateMediaQueryWatcher,\n\tgetSidebarMenuButtonStyleKeys,\n\tgetSidebarMenuSubButtonStyleKeys,\n\tgetSidebarState,\n\tmatchesSidebarToggleShortcut,\n\tSIDEBAR_MEDIA_QUERY,\n\tSIDEBAR_WIDTH,\n\tSIDEBAR_WIDTH_ICON,\n\tSIDEBAR_WIDTH_MOBILE,\n\tsidebarStyleKeys,\n} from '../lib/core';\nimport type { SidebarBaseProps, SidebarContextValue, SidebarMenuButtonSize, SidebarMenuButtonVariant, SidebarProviderBaseProps } from '../lib/core';\nimport { Button } from '../button';\nimport { Input } from '../input';\nimport { Separator } from '../separator';\nimport { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from '../sheet';\nimport { Skeleton } from '../skeleton';\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../tooltip';\nimport styles from './sidebar.module.scss';\n\nconst SidebarContext = createContext<SidebarContextValue | null>(null);\n\nfunction useSidebar(): SidebarContextValue {\n\tconst context = useContext(SidebarContext);\n\tif (!context) {\n\t\tthrow new Error('useSidebar must be used within a <SidebarProvider>.');\n\t}\n\treturn context;\n}\n\nexport interface SidebarProviderProps extends React.HTMLAttributes<HTMLDivElement>, SidebarProviderBaseProps {\n\tchildren?: React.ReactNode;\n}\n\nfunction SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange: setOpenProp, className = '', style, children, ...props }: SidebarProviderProps) {\n\tconst [isMobile, setIsMobile] = useState(false);\n\tconst [openMobile, setOpenMobile] = useState(false);\n\n\tconst [_open, _setOpen] = useState(defaultOpen);\n\tconst open = openProp ?? _open;\n\tconst setOpen = useCallback(\n\t\t(value: boolean | ((value: boolean) => boolean)) => {\n\t\t\tconst openState = typeof value === 'function' ? value(open) : value;\n\t\t\tif (setOpenProp) {\n\t\t\t\tsetOpenProp(openState);\n\t\t\t} else {\n\t\t\t\t_setOpen(openState);\n\t\t\t}\n\t\t},\n\t\t[setOpenProp, open],\n\t);\n\n\tconst toggleSidebar = useCallback(() => {\n\t\treturn isMobile ? setOpenMobile((value) => !value) : setOpen((value) => !value);\n\t}, [isMobile, setOpen, setOpenMobile]);\n\n\tuseEffect(() => {\n\t\tconst handleKeyDown = (event: KeyboardEvent) => {\n\t\t\tif (matchesSidebarToggleShortcut({ key: event.key, metaKey: event.metaKey, ctrlKey: event.ctrlKey })) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\ttoggleSidebar();\n\t\t\t}\n\t\t};\n\t\twindow.addEventListener('keydown', handleKeyDown);\n\t\treturn () => window.removeEventListener('keydown', handleKeyDown);\n\t}, [toggleSidebar]);\n\n\tuseEffect(() => {\n\t\treturn createMediaQueryWatcher(SIDEBAR_MEDIA_QUERY, setIsMobile);\n\t}, []);\n\n\tconst state = getSidebarState(open);\n\n\tconst contextValue = useMemo<SidebarContextValue>(\n\t\t() => ({ state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar }),\n\t\t[state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar],\n\t);\n\n\treturn (\n\t\t<SidebarContext.Provider value={contextValue}>\n\t\t\t<TooltipProvider delayDuration={0}>\n\t\t\t\t<div\n\t\t\t\t\tdata-slot=\"sidebar-wrapper\"\n\t\t\t\t\tstyle={{ '--sidebar-width': SIDEBAR_WIDTH, '--sidebar-width-icon': SIDEBAR_WIDTH_ICON, ...style } as React.CSSProperties}\n\t\t\t\t\tclassName={`${styles[sidebarStyleKeys.wrapper]} ${className}`}\n\t\t\t\t\t{...props}>\n\t\t\t\t\t{children}\n\t\t\t\t</div>\n\t\t\t</TooltipProvider>\n\t\t</SidebarContext.Provider>\n\t);\n}\n\nSidebarProvider.displayName = 'SidebarProvider';\n\nexport interface SidebarProps extends React.HTMLAttributes<HTMLDivElement>, SidebarBaseProps {}\n\nfunction Sidebar({ side = 'left', variant = 'sidebar', collapsible = 'offcanvas', className = '', style, children, ...props }: SidebarProps) {\n\tconst { isMobile, state, openMobile, setOpenMobile } = useSidebar();\n\n\tif (collapsible === 'none') {\n\t\treturn (\n\t\t\t<div data-slot=\"sidebar\" data-side={side} className={`${styles[sidebarStyleKeys.sidebar]} ${className}`} {...props} style={style}>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t);\n\t}\n\n\tif (isMobile) {\n\t\treturn (\n\t\t\t<Sheet open={openMobile} onOpenChange={setOpenMobile}>\n\t\t\t\t<SheetContent\n\t\t\t\t\tdata-slot=\"sidebar\"\n\t\t\t\t\tdata-mobile=\"true\"\n\t\t\t\t\tside={side}\n\t\t\t\t\tclassName={`${styles[sidebarStyleKeys.sheetContent]} ${className}`}\n\t\t\t\t\tstyle={{ '--sidebar-width': SIDEBAR_WIDTH_MOBILE, ...style } as React.CSSProperties}>\n\t\t\t\t\t<SheetHeader className={styles[sidebarStyleKeys.srOnly]}>\n\t\t\t\t\t\t<SheetTitle>Sidebar</SheetTitle>\n\t\t\t\t\t\t<SheetDescription>Displays the mobile sidebar.</SheetDescription>\n\t\t\t\t\t</SheetHeader>\n\t\t\t\t\t<div className={styles[sidebarStyleKeys.sidebar]}>{children}</div>\n\t\t\t\t</SheetContent>\n\t\t\t</Sheet>\n\t\t);\n\t}\n\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"sidebar-container\"\n\t\t\tdata-state={state}\n\t\t\tdata-collapsible={state === 'collapsed' ? collapsible : ''}\n\t\t\tdata-variant={variant}\n\t\t\tdata-side={side}\n\t\t\tclassName={styles[sidebarStyleKeys.container]}\n\t\t\tstyle={style}>\n\t\t\t<div data-slot=\"sidebar\" className={`${styles[sidebarStyleKeys.sidebar]} ${className}`} {...props}>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nSidebar.displayName = 'Sidebar';\n\nexport interface SidebarTriggerProps extends React.ComponentProps<typeof Button> {}\n\nconst SidebarTrigger = React.forwardRef<HTMLButtonElement, SidebarTriggerProps>(({ className = '', onClick, children, ...props }, ref) => {\n\tconst { toggleSidebar } = useSidebar();\n\n\treturn (\n\t\t<Button\n\t\t\tref={ref}\n\t\t\tdata-slot=\"sidebar-trigger\"\n\t\t\tvariant=\"ghost\"\n\t\t\tsize=\"icon\"\n\t\t\tclassName={`${styles[sidebarStyleKeys.trigger]} ${className}`}\n\t\t\tonClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n\t\t\t\tonClick?.(event);\n\t\t\t\ttoggleSidebar();\n\t\t\t}}\n\t\t\t{...props}>\n\t\t\t{children ?? (\n\t\t\t\t<svg\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\twidth=\"24\"\n\t\t\t\t\theight=\"24\"\n\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\tfill=\"none\"\n\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\tstrokeWidth=\"2\"\n\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\taria-hidden=\"true\">\n\t\t\t\t\t<rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\" />\n\t\t\t\t\t<path d=\"M9 3v18\" />\n\t\t\t\t</svg>\n\t\t\t)}\n\t\t\t<span className={styles[sidebarStyleKeys.srOnly]}>Toggle Sidebar</span>\n\t\t</Button>\n\t);\n});\nSidebarTrigger.displayName = 'SidebarTrigger';\n\nexport interface SidebarRailProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {}\n\nconst SidebarRail = React.forwardRef<HTMLButtonElement, SidebarRailProps>(({ className = '', ...props }, ref) => {\n\tconst { toggleSidebar } = useSidebar();\n\n\treturn (\n\t\t<button\n\t\t\tref={ref}\n\t\t\tdata-slot=\"sidebar-rail\"\n\t\t\taria-label=\"Toggle Sidebar\"\n\t\t\ttabIndex={-1}\n\t\t\tonClick={toggleSidebar}\n\t\t\ttitle=\"Toggle Sidebar\"\n\t\t\tclassName={`${styles[sidebarStyleKeys.rail] ?? ''} ${className}`}\n\t\t\t{...props}\n\t\t/>\n\t);\n});\nSidebarRail.displayName = 'SidebarRail';\n\nexport interface SidebarInsetProps extends React.HTMLAttributes<HTMLElement> {}\n\nconst SidebarInset = React.forwardRef<HTMLElement, SidebarInsetProps>(({ className = '', ...props }, ref) => {\n\treturn <main ref={ref} data-slot=\"sidebar-inset\" className={`${styles[sidebarStyleKeys.inset]} ${className}`} {...props} />;\n});\nSidebarInset.displayName = 'SidebarInset';\n\nexport interface SidebarInputProps extends React.ComponentProps<typeof Input> {}\n\nconst SidebarInput = React.forwardRef<HTMLInputElement, SidebarInputProps>(({ className = '', ...props }, ref) => {\n\treturn <Input ref={ref} data-slot=\"sidebar-input\" className={`${styles[sidebarStyleKeys.input]} ${className}`} {...props} />;\n});\nSidebarInput.displayName = 'SidebarInput';\n\nexport interface SidebarHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nconst SidebarHeader = React.forwardRef<HTMLDivElement, SidebarHeaderProps>(({ className = '', ...props }, ref) => {\n\treturn <div ref={ref} data-slot=\"sidebar-header\" className={`${styles[sidebarStyleKeys.header]} ${className}`} {...props} />;\n});\nSidebarHeader.displayName = 'SidebarHeader';\n\nexport interface SidebarFooterProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nconst SidebarFooter = React.forwardRef<HTMLDivElement, SidebarFooterProps>(({ className = '', ...props }, ref) => {\n\treturn <div ref={ref} data-slot=\"sidebar-footer\" className={`${styles[sidebarStyleKeys.footer]} ${className}`} {...props} />;\n});\nSidebarFooter.displayName = 'SidebarFooter';\n\nexport interface SidebarSeparatorProps extends React.ComponentProps<typeof Separator> {}\n\nconst SidebarSeparator = React.forwardRef<React.ElementRef<typeof Separator>, SidebarSeparatorProps>(({ className = '', ...props }, ref) => {\n\treturn <Separator ref={ref} data-slot=\"sidebar-separator\" className={`${styles[sidebarStyleKeys.separator]} ${className}`} {...props} />;\n});\nSidebarSeparator.displayName = 'SidebarSeparator';\n\nexport interface SidebarContentProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nconst SidebarContent = React.forwardRef<HTMLDivElement, SidebarContentProps>(({ className = '', ...props }, ref) => {\n\treturn <div ref={ref} data-slot=\"sidebar-content\" className={`${styles[sidebarStyleKeys.content]} ${className}`} {...props} />;\n});\nSidebarContent.displayName = 'SidebarContent';\n\nexport interface SidebarGroupProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nconst SidebarGroup = React.forwardRef<HTMLDivElement, SidebarGroupProps>(({ className = '', ...props }, ref) => {\n\treturn <div ref={ref} data-slot=\"sidebar-group\" className={`${styles[sidebarStyleKeys.group]} ${className}`} {...props} />;\n});\nSidebarGroup.displayName = 'SidebarGroup';\n\nexport interface SidebarGroupLabelProps extends React.HTMLAttributes<HTMLDivElement> {\n\tasChild?: boolean;\n}\n\nconst SidebarGroupLabel = React.forwardRef<HTMLDivElement, SidebarGroupLabelProps>(({ className = '', asChild = false, ...props }, ref) => {\n\tconst Comp = asChild ? Slot : 'div';\n\n\treturn <Comp ref={ref} data-slot=\"sidebar-group-label\" className={`${styles[sidebarStyleKeys.groupLabel]} ${className}`} {...props} />;\n});\nSidebarGroupLabel.displayName = 'SidebarGroupLabel';\n\nexport interface SidebarGroupActionProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n\tasChild?: boolean;\n}\n\nconst SidebarGroupAction = React.forwardRef<HTMLButtonElement, SidebarGroupActionProps>(({ className = '', asChild = false, ...props }, ref) => {\n\tconst Comp = asChild ? Slot : 'button';\n\n\treturn <Comp ref={ref} data-slot=\"sidebar-group-action\" className={`${styles[sidebarStyleKeys.groupAction]} ${className}`} {...props} />;\n});\nSidebarGroupAction.displayName = 'SidebarGroupAction';\n\nexport interface SidebarGroupContentProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nconst SidebarGroupContent = React.forwardRef<HTMLDivElement, SidebarGroupContentProps>(({ className = '', ...props }, ref) => {\n\treturn <div ref={ref} data-slot=\"sidebar-group-content\" className={`${styles[sidebarStyleKeys.groupContent]} ${className}`} {...props} />;\n});\nSidebarGroupContent.displayName = 'SidebarGroupContent';\n\nexport interface SidebarMenuProps extends React.HTMLAttributes<HTMLUListElement> {}\n\nconst SidebarMenu = React.forwardRef<HTMLUListElement, SidebarMenuProps>(({ className = '', ...props }, ref) => {\n\treturn <ul ref={ref} data-slot=\"sidebar-menu\" className={`${styles[sidebarStyleKeys.menu]} ${className}`} {...props} />;\n});\nSidebarMenu.displayName = 'SidebarMenu';\n\nexport interface SidebarMenuItemProps extends React.HTMLAttributes<HTMLLIElement> {}\n\nconst SidebarMenuItem = React.forwardRef<HTMLLIElement, SidebarMenuItemProps>(({ className = '', ...props }, ref) => {\n\treturn <li ref={ref} data-slot=\"sidebar-menu-item\" className={`${styles[sidebarStyleKeys.menuItem]} ${className}`} {...props} />;\n});\nSidebarMenuItem.displayName = 'SidebarMenuItem';\n\nexport interface SidebarMenuButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n\tasChild?: boolean;\n\tisActive?: boolean;\n\ttooltip?: string | React.ComponentProps<typeof TooltipContent>;\n\tvariant?: SidebarMenuButtonVariant;\n\tsize?: SidebarMenuButtonSize;\n}\n\nconst SidebarMenuButton = React.forwardRef<HTMLButtonElement, SidebarMenuButtonProps>(\n\t({ asChild = false, isActive = false, variant = 'default', size = 'default', tooltip, className = '', ...props }, ref) => {\n\t\tconst Comp = asChild ? Slot : 'button';\n\t\tconst styleKeys = getSidebarMenuButtonStyleKeys(variant, size);\n\n\t\tconst button = (\n\t\t\t<Comp\n\t\t\t\tref={ref}\n\t\t\t\tdata-slot=\"sidebar-menu-button\"\n\t\t\t\tdata-size={size}\n\t\t\t\tdata-active={isActive}\n\t\t\t\tclassName={`${styles[styleKeys.base]} ${styles[styleKeys.variant]} ${styles[styleKeys.size]} ${className}`}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\n\t\tif (!tooltip) {\n\t\t\treturn button;\n\t\t}\n\n\t\tconst tooltipProps = typeof tooltip === 'string' ? { children: tooltip } : tooltip;\n\n\t\treturn (\n\t\t\t<Tooltip>\n\t\t\t\t<TooltipTrigger asChild>{button}</TooltipTrigger>\n\t\t\t\t<TooltipContent side=\"right\" {...tooltipProps} />\n\t\t\t</Tooltip>\n\t\t);\n\t},\n);\nSidebarMenuButton.displayName = 'SidebarMenuButton';\n\nexport interface SidebarMenuActionProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n\tasChild?: boolean;\n\tshowOnHover?: boolean;\n}\n\nconst SidebarMenuAction = React.forwardRef<HTMLButtonElement, SidebarMenuActionProps>(({ className = '', asChild = false, showOnHover = false, ...props }, ref) => {\n\tconst Comp = asChild ? Slot : 'button';\n\n\treturn <Comp ref={ref} data-slot=\"sidebar-menu-action\" data-show-on-hover={showOnHover} className={`${styles[sidebarStyleKeys.menuAction]} ${className}`} {...props} />;\n});\nSidebarMenuAction.displayName = 'SidebarMenuAction';\n\nexport interface SidebarMenuBadgeProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nconst SidebarMenuBadge = React.forwardRef<HTMLDivElement, SidebarMenuBadgeProps>(({ className = '', ...props }, ref) => {\n\treturn <div ref={ref} data-slot=\"sidebar-menu-badge\" className={`${styles[sidebarStyleKeys.menuBadge]} ${className}`} {...props} />;\n});\nSidebarMenuBadge.displayName = 'SidebarMenuBadge';\n\nexport interface SidebarMenuSkeletonProps extends React.HTMLAttributes<HTMLDivElement> {\n\tshowIcon?: boolean;\n}\n\nconst SidebarMenuSkeleton = React.forwardRef<HTMLDivElement, SidebarMenuSkeletonProps>(({ className = '', showIcon = false, ...props }, ref) => {\n\tconst width = useMemo(() => `${Math.floor(Math.random() * 40) + 50}%`, []);\n\n\treturn (\n\t\t<div ref={ref} data-slot=\"sidebar-menu-skeleton\" className={`${styles[sidebarStyleKeys.skeleton]} ${className}`} {...props}>\n\t\t\t{showIcon && <Skeleton className={styles[sidebarStyleKeys.skeletonIcon]} />}\n\t\t\t<Skeleton className={styles[sidebarStyleKeys.skeletonText]} style={{ '--skeleton-width': width } as React.CSSProperties} />\n\t\t</div>\n\t);\n});\nSidebarMenuSkeleton.displayName = 'SidebarMenuSkeleton';\n\nexport interface SidebarMenuSubProps extends React.HTMLAttributes<HTMLUListElement> {}\n\nconst SidebarMenuSub = React.forwardRef<HTMLUListElement, SidebarMenuSubProps>(({ className = '', ...props }, ref) => {\n\treturn <ul ref={ref} data-slot=\"sidebar-menu-sub\" className={`${styles[sidebarStyleKeys.menuSub]} ${className}`} {...props} />;\n});\nSidebarMenuSub.displayName = 'SidebarMenuSub';\n\nexport interface SidebarMenuSubItemProps extends React.HTMLAttributes<HTMLLIElement> {}\n\nconst SidebarMenuSubItem = React.forwardRef<HTMLLIElement, SidebarMenuSubItemProps>(({ className = '', ...props }, ref) => {\n\treturn <li ref={ref} data-slot=\"sidebar-menu-sub-item\" className={`${styles[sidebarStyleKeys.menuSubItem]} ${className}`} {...props} />;\n});\nSidebarMenuSubItem.displayName = 'SidebarMenuSubItem';\n\nexport interface SidebarMenuSubButtonProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n\tasChild?: boolean;\n\tsize?: 'sm' | 'md';\n\tisActive?: boolean;\n}\n\nconst SidebarMenuSubButton = React.forwardRef<HTMLAnchorElement, SidebarMenuSubButtonProps>(({ asChild = false, size = 'md', isActive = false, className = '', ...props }, ref) => {\n\tconst Comp = asChild ? Slot : 'a';\n\tconst styleKeys = getSidebarMenuSubButtonStyleKeys(size);\n\n\treturn (\n\t\t<Comp\n\t\t\tref={ref}\n\t\t\tdata-slot=\"sidebar-menu-sub-button\"\n\t\t\tdata-size={size}\n\t\t\tdata-active={isActive}\n\t\t\tclassName={`${styles[styleKeys.base]} ${styles[styleKeys.size]} ${className}`}\n\t\t\t{...props}\n\t\t/>\n\t);\n});\nSidebarMenuSubButton.displayName = 'SidebarMenuSubButton';\n\nexport {\n\tSidebar,\n\tSidebarContent,\n\tSidebarFooter,\n\tSidebarGroup,\n\tSidebarGroupAction,\n\tSidebarGroupContent,\n\tSidebarGroupLabel,\n\tSidebarHeader,\n\tSidebarInput,\n\tSidebarInset,\n\tSidebarMenu,\n\tSidebarMenuAction,\n\tSidebarMenuBadge,\n\tSidebarMenuButton,\n\tSidebarMenuItem,\n\tSidebarMenuSkeleton,\n\tSidebarMenuSub,\n\tSidebarMenuSubButton,\n\tSidebarMenuSubItem,\n\tSidebarProvider,\n\tSidebarRail,\n\tSidebarSeparator,\n\tSidebarTrigger,\n\tuseSidebar,\n};\nexport default Sidebar;\n"
    },
    {
      "path": "packages/styles/scss/components/sidebar.module.scss",
      "type": "registry:file",
      "target": "components/ui/sidebar/sidebar.module.scss",
      "content": "@use '../../../styles/variables/colors' as *;\n\n// 侧边栏使用标准 shadcn 扩展令牌。\n$sidebar-bg: var(--tile-sidebar-background, var(--sidebar));\n$sidebar-fg: var(--tile-sidebar-foreground, var(--sidebar-foreground));\n$sidebar-border: var(--tile-sidebar-border, var(--sidebar-border));\n$sidebar-accent: var(--tile-sidebar-hover-background, var(--sidebar-accent));\n$sidebar-accent-fg: var(--tile-sidebar-hover-foreground, var(--sidebar-accent-foreground));\n$sidebar-ring: var(--tile-sidebar-focus, var(--sidebar-ring));\n\n// 根包裹层\n.wrapper {\n\tdisplay: flex;\n\twidth: 100%;\n\tmin-height: 100vh;\n}\n\n// 桌面端侧边栏\n.container {\n\tdisplay: none;\n\tflex-direction: column;\n\tflex-shrink: 0;\n\twidth: var(--sidebar-width);\n\toverflow: hidden;\n\ttransition: width $transition-normal;\n\n\t@media (min-width: 768px) {\n\t\tdisplay: flex;\n\t}\n\n\t&[data-side='left'] {\n\t\tborder-right: 1px solid $sidebar-border;\n\t}\n\n\t&[data-side='right'] {\n\t\tborder-left: 1px solid $sidebar-border;\n\t}\n}\n\n// 折叠为 offcanvas 时收起\n.container[data-collapsible='offcanvas'][data-state='collapsed'] {\n\twidth: 0;\n\tborder: none;\n}\n\n// 折叠为 icon 时收窄\n.container[data-collapsible='icon'][data-state='collapsed'] {\n\twidth: var(--sidebar-width-icon);\n}\n\n// 侧边栏主体\n.sidebar {\n\tdisplay: flex;\n\tflex-direction: column;\n\twidth: 100%;\n\tflex: 1;\n\tbackground-color: $sidebar-bg;\n\tcolor: $sidebar-fg;\n}\n\n// floating 变体（data-variant 位于 .container 上）\n.container[data-variant='floating'] .sidebar {\n\tborder-radius: var(--tile-sidebar-panel-radius, $radius-lg);\n\tborder: 1px solid $sidebar-border;\n\tbox-shadow: var(--tile-sidebar-floating-shadow, $shadow-sm);\n}\n\n// 内容区\n.content {\n\tdisplay: flex;\n\tmin-height: 0;\n\tflex: 1;\n\tflex-direction: column;\n\tgap: var(--tile-sidebar-content-gap, $spacing-2);\n\toverflow: auto;\n}\n\n.header,\n.footer {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: $spacing-2;\n\tpadding: var(--tile-sidebar-header-padding, $spacing-2);\n}\n\n// 分组\n.group {\n\tposition: relative;\n\tdisplay: flex;\n\twidth: 100%;\n\tmin-width: 0;\n\tflex-direction: column;\n\tpadding: var(--tile-sidebar-group-padding, $spacing-2);\n}\n\n.groupLabel {\n\tdisplay: flex;\n\theight: 2rem;\n\tflex-shrink: 0;\n\talign-items: center;\n\tborder-radius: $radius;\n\tpadding-inline: $spacing-2;\n\tfont-size: $text-xs;\n\tfont-weight: $font-medium;\n\tcolor: var(--tile-sidebar-label-foreground, color-mix(in srgb, $sidebar-fg 70%, transparent));\n\n\tsvg {\n\t\twidth: 1rem;\n\t\theight: 1rem;\n\t\tflex-shrink: 0;\n\t}\n}\n\n.groupAction {\n\tposition: absolute;\n\ttop: $spacing-3;\n\tright: $spacing-3;\n\tdisplay: flex;\n\taspect-ratio: 1;\n\twidth: 1.25rem;\n\talign-items: center;\n\tjustify-content: center;\n\tborder: none;\n\tborder-radius: $radius;\n\tpadding: 0;\n\tbackground-color: transparent;\n\tcolor: $sidebar-fg;\n\tcursor: pointer;\n\n\t&:hover {\n\t\tbackground-color: $sidebar-accent;\n\t\tcolor: $sidebar-accent-fg;\n\t}\n\n\tsvg {\n\t\twidth: 1rem;\n\t\theight: 1rem;\n\t}\n}\n\n.groupContent {\n\twidth: 100%;\n\tfont-size: $text-sm;\n}\n\n// 菜单\n.menu {\n\tdisplay: flex;\n\twidth: 100%;\n\tmin-width: 0;\n\tflex-direction: column;\n\tgap: var(--tile-sidebar-menu-gap, $spacing-1);\n\tmargin: 0;\n\tpadding: 0;\n\tlist-style: none;\n}\n\n.menuItem {\n\tposition: relative;\n}\n\n// 菜单按钮\n.menuButton {\n\tdisplay: flex;\n\twidth: 100%;\n\theight: var(--tile-sidebar-button-height, 2rem);\n\talign-items: center;\n\tgap: var(--tile-sidebar-button-gap, $spacing-2);\n\toverflow: hidden;\n\tborder: none;\n\tborder-radius: var(--tile-sidebar-button-radius, $radius);\n\tbackground-color: transparent;\n\tcolor: $sidebar-fg;\n\ttext-align: left;\n\tfont-size: $text-sm;\n\tcursor: pointer;\n\toutline: none;\n\ttransition:\n\t\twidth $transition-normal,\n\t\theight $transition-normal,\n\t\tpadding $transition-normal;\n\n\t&:hover {\n\t\tbackground-color: $sidebar-accent;\n\t\tcolor: $sidebar-accent-fg;\n\t}\n\n\t&:focus-visible {\n\t\tbox-shadow: 0 0 0 2px $sidebar-ring;\n\t}\n\n\t&[data-active='true'] {\n\t\tbackground-color: var(--tile-sidebar-active-background, $sidebar-accent);\n\t\tfont-weight: $font-medium;\n\t\tcolor: var(--tile-sidebar-active-foreground, $sidebar-accent-fg);\n\t}\n\n\tsvg {\n\t\twidth: 1rem;\n\t\theight: 1rem;\n\t\tflex-shrink: 0;\n\t}\n\n\t> span:last-child {\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\twhite-space: nowrap;\n\t}\n}\n\n// 菜单按钮变体\n.variantDefault {\n\t&:hover {\n\t\tbackground-color: $sidebar-accent;\n\t\tcolor: $sidebar-accent-fg;\n\t}\n}\n\n.variantOutline {\n\tbackground-color: var(--tile-sidebar-outline-background, $background);\n\tbox-shadow: 0 0 0 1px $sidebar-border;\n\n\t&:hover {\n\t\tbackground-color: $sidebar-accent;\n\t\tcolor: $sidebar-accent-fg;\n\t\tbox-shadow: 0 0 0 1px $sidebar-accent;\n\t}\n}\n\n// 菜单按钮尺寸 (sizeSm 与子菜单按钮共享)\n.sizeDefault {\n\theight: var(--tile-sidebar-button-height, 2rem);\n\tpadding: var(--tile-sidebar-button-padding, $spacing-2);\n}\n\n.sizeSm {\n\theight: var(--tile-sidebar-sm-height, 1.75rem);\n\tpadding-inline: $spacing-2;\n\tfont-size: var(--tile-sidebar-sm-font-size, $text-xs);\n}\n\n.sizeLg {\n\theight: var(--tile-sidebar-lg-height, 3rem);\n\tpadding: var(--tile-sidebar-button-padding, $spacing-2);\n}\n\n// 菜单操作按钮\n.menuAction {\n\tposition: absolute;\n\ttop: $spacing-1_5;\n\tright: $spacing-1;\n\tdisplay: flex;\n\taspect-ratio: 1;\n\twidth: 1.25rem;\n\talign-items: center;\n\tjustify-content: center;\n\tborder: none;\n\tborder-radius: $radius;\n\tpadding: 0;\n\tbackground-color: transparent;\n\tcolor: $sidebar-fg;\n\tcursor: pointer;\n\n\t&:hover {\n\t\tbackground-color: $sidebar-accent;\n\t\tcolor: $sidebar-accent-fg;\n\t}\n\n\tsvg {\n\t\twidth: 1rem;\n\t\theight: 1rem;\n\t}\n}\n\n// 菜单徽标\n.menuBadge {\n\tposition: absolute;\n\tright: $spacing-1;\n\tdisplay: flex;\n\theight: 1.25rem;\n\tmin-width: 1.25rem;\n\talign-items: center;\n\tjustify-content: center;\n\tborder-radius: $radius;\n\tpadding-inline: $spacing-1;\n\tfont-size: $text-xs;\n\tfont-weight: $font-medium;\n\tcolor: $sidebar-fg;\n\tpointer-events: none;\n\tfont-variant-numeric: tabular-nums;\n}\n\n// 子菜单\n.menuSub {\n\tdisplay: flex;\n\tmin-width: 0;\n\tflex-direction: column;\n\tgap: $spacing-1;\n\tmargin: 0;\n\tpadding: $spacing-2 0;\n\tpadding-left: $spacing-2_5;\n\tborder-left: 1px solid $sidebar-border;\n\tlist-style: none;\n}\n\n.menuSubItem {\n\tposition: relative;\n}\n\n.menuSubButton {\n\tdisplay: flex;\n\theight: 1.75rem;\n\tmin-width: 0;\n\talign-items: center;\n\tgap: $spacing-2;\n\toverflow: hidden;\n\tborder: none;\n\tborder-radius: var(--tile-sidebar-button-radius, $radius);\n\tpadding-inline: $spacing-2;\n\tbackground-color: transparent;\n\tcolor: $sidebar-fg;\n\tfont-size: $text-sm;\n\ttext-align: left;\n\tcursor: pointer;\n\toutline: none;\n\n\t&:hover {\n\t\tbackground-color: $sidebar-accent;\n\t\tcolor: $sidebar-accent-fg;\n\t}\n\n\t&[data-active='true'] {\n\t\tbackground-color: var(--tile-sidebar-active-background, $sidebar-accent);\n\t\tcolor: var(--tile-sidebar-active-foreground, $sidebar-accent-fg);\n\t}\n\n\tsvg {\n\t\twidth: 1rem;\n\t\theight: 1rem;\n\t\tflex-shrink: 0;\n\t}\n\n\t> span:last-child {\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\twhite-space: nowrap;\n\t}\n}\n\n// 子菜单按钮尺寸 (sizeSm 与菜单按钮共享)\n.sizeMd {\n\tfont-size: $text-sm;\n}\n\n// 触发器按钮\n.trigger {\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\twidth: 1.75rem;\n\theight: 1.75rem;\n\tborder: none;\n\tborder-radius: var(--tile-sidebar-button-radius, $radius);\n\tbackground-color: transparent;\n\tcolor: var(--tile-sidebar-foreground, $foreground);\n\tcursor: pointer;\n\n\t&:hover {\n\t\tbackground-color: var(--tile-sidebar-hover-background, $accent);\n\t\tcolor: var(--tile-sidebar-hover-foreground, $accent-foreground);\n\t}\n\n\tsvg {\n\t\twidth: 1rem;\n\t\theight: 1rem;\n\t}\n}\n\n// 分隔线\n.separator {\n\twidth: 100%;\n}\n\n// 输入框\n.input {\n\twidth: 100%;\n\theight: 2rem;\n\tbackground-color: var(--tile-sidebar-input-background, $background);\n\tborder: 1px solid $sidebar-border;\n\tborder-radius: var(--tile-sidebar-button-radius, $radius);\n\tpadding-inline: $spacing-2;\n\tfont-size: $text-sm;\n\tcolor: var(--tile-sidebar-foreground, $foreground);\n\tbox-shadow: none;\n\n\t&:focus {\n\t\toutline: none;\n\t\tborder-color: $sidebar-ring;\n\t\tbox-shadow: 0 0 0 1px $sidebar-ring;\n\t}\n}\n\n// 侧边栏占位 inset\n.inset {\n\tposition: relative;\n\tdisplay: flex;\n\twidth: 100%;\n\tflex: 1;\n\tflex-direction: column;\n\tbackground-color: var(--tile-sidebar-inset-background, $background);\n}\n\n// 折叠为 icon 时隐藏文本内容\n.container[data-collapsible='icon'][data-state='collapsed'] {\n\t.groupLabel,\n\t.menuButton > span:last-child,\n\t.menuSubButton > span:last-child,\n\t.menuBadge,\n\t.menuSub,\n\t.groupAction {\n\t\tdisplay: none;\n\t}\n\n\t.menuButton {\n\t\twidth: 2rem;\n\t\theight: 2rem;\n\t\tpadding: $spacing-2;\n\t\tjustify-content: center;\n\t}\n}\n\n// 骨架屏\n.skeleton {\n\tdisplay: flex;\n\theight: 2rem;\n\talign-items: center;\n\tgap: $spacing-2;\n\tborder-radius: $radius;\n\tpadding-inline: $spacing-2;\n}\n\n.skeletonIcon {\n\twidth: 1rem;\n\theight: 1rem;\n\tborder-radius: $radius;\n}\n\n.skeletonText {\n\theight: 1rem;\n\tmax-width: var(--skeleton-width);\n\tflex: 1;\n}\n\n// 仅供读屏\n.srOnly {\n\tposition: absolute;\n\twidth: 1px;\n\theight: 1px;\n\tpadding: 0;\n\tmargin: -1px;\n\toverflow: hidden;\n\tclip: rect(0, 0, 0, 0);\n\twhite-space: nowrap;\n\tborder-width: 0;\n}\n\n@media (prefers-reduced-motion: reduce) {\n\t.container,\n\t.menuButton {\n\t\ttransition: none;\n\t}\n}\n"
    },
    {
      "path": "packages/react/src/components/sidebar/index.ts",
      "type": "registry:ui",
      "target": "components/ui/sidebar/index.ts",
      "content": "export {\n\tSidebar,\n\tSidebarContent,\n\tSidebarFooter,\n\tSidebarGroup,\n\tSidebarGroupAction,\n\tSidebarGroupContent,\n\tSidebarGroupLabel,\n\tSidebarHeader,\n\tSidebarInput,\n\tSidebarInset,\n\tSidebarMenu,\n\tSidebarMenuAction,\n\tSidebarMenuBadge,\n\tSidebarMenuButton,\n\tSidebarMenuItem,\n\tSidebarMenuSkeleton,\n\tSidebarMenuSub,\n\tSidebarMenuSubButton,\n\tSidebarMenuSubItem,\n\tSidebarProvider,\n\tSidebarRail,\n\tSidebarSeparator,\n\tSidebarTrigger,\n\tuseSidebar,\n\ttype SidebarProviderProps,\n\ttype SidebarProps,\n\ttype SidebarTriggerProps,\n\ttype SidebarRailProps,\n\ttype SidebarInsetProps,\n\ttype SidebarInputProps,\n\ttype SidebarHeaderProps,\n\ttype SidebarFooterProps,\n\ttype SidebarSeparatorProps,\n\ttype SidebarContentProps,\n\ttype SidebarGroupProps,\n\ttype SidebarGroupLabelProps,\n\ttype SidebarGroupActionProps,\n\ttype SidebarGroupContentProps,\n\ttype SidebarMenuProps,\n\ttype SidebarMenuItemProps,\n\ttype SidebarMenuButtonProps,\n\ttype SidebarMenuActionProps,\n\ttype SidebarMenuBadgeProps,\n\ttype SidebarMenuSkeletonProps,\n\ttype SidebarMenuSubProps,\n\ttype SidebarMenuSubItemProps,\n\ttype SidebarMenuSubButtonProps,\n} from './sidebar';\n"
    }
  ]
}