{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sidebar",
  "type": "registry:ui",
  "title": "Sidebar",
  "files": [
    {
      "path": "ui/sidebar.tsrx",
      "type": "registry:ui",
      "target": "components/ui/sidebar.tsrx",
      "content": "// Base UI base sidebar — class strings from the maintainer-supplied radix source, verbatim. Composes\n// this base's own button, input, separator, sheet, skeleton and tooltip, so it inherits their\n// dialects (the sheet's transition motion, the separator's aria-orientation) for free.\n//\n// THE TOOLTIP TRIGGER USES `render`, WHICH IS THE WHOLE REASON THIS FAMILY IS PORTABLE. Radix wraps\n// the menu button with `<TooltipTrigger asChild>{button}</TooltipTrigger>`; Base UI has no Slot, but\n// `Tooltip.Trigger` accepts a `render` prop taking an element, which is the same composition —\n// `render={button}`. That is a real primitive with a documented prop, not a guess.\n//\n// `asChild` IS ABSENT FROM THIS BASE'S OWN PARTS, matching badge, breadcrumb and item. Five of them\n// take it in the radix source — GroupLabel, GroupAction, MenuButton, MenuAction, MenuSubButton — and\n// each renders a plain host element, so there is no primitive here whose `render` prop to borrow and\n// nothing settles which spelling upstream's Base UI sidebar uses. It is typed `never` so markup\n// carried over from the radix base fails to compile rather than silently rendering the wrapper AND\n// its child.\n//\n// THAT GAP IS LOAD-BEARING HERE, more than it was for badge: `<SidebarMenuButton asChild>` wrapping\n// a router link is the ordinary way to build a nav. Until the upstream source settles the spelling,\n// build the link inside the button, or apply the exported `sidebarMenuButtonVariants({ variant, size })`\n// to your own element.\n//\n// Octane adaptations: \"use client\" dropped, lucide-react -> @octanejs/lucide; the provider/Sheet\n// trees compose with createElement where a child must be a real element descriptor, and CSS custom\n// properties in `style` are cast (they sit outside CSSProperties).\nimport {\n\tcreateContext,\n\tcreateElement,\n\tuseCallback,\n\tuseContext,\n\tuseEffect,\n\tuseMemo,\n\tuseState,\n\ttype OctaneNode,\n} from 'octane';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { PanelLeftIcon } from '@octanejs/lucide';\n\nimport { cn } from '@/lib/utils';\nimport { useIsMobile } from '@/hooks/use-mobile';\nimport { Button } from '@/components/ui/button';\nimport { Input } from '@/components/ui/input';\nimport { Separator } from '@/components/ui/separator';\nimport { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from '@/components/ui/sheet';\nimport { Skeleton } from '@/components/ui/skeleton';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';\n\nconst SIDEBAR_COOKIE_NAME = 'sidebar_state';\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;\nconst SIDEBAR_WIDTH = '16rem';\nconst SIDEBAR_WIDTH_MOBILE = '18rem';\nconst SIDEBAR_WIDTH_ICON = '3rem';\nconst SIDEBAR_KEYBOARD_SHORTCUT = 'b';\n\ntype Props = { className?: string; children?: OctaneNode } & Record<string, unknown>;\n\nexport interface SidebarContextProps {\n\tstate: 'expanded' | 'collapsed';\n\topen: boolean;\n\tsetOpen: (open: boolean) => void;\n\topenMobile: boolean;\n\tsetOpenMobile: (open: boolean) => void;\n\tisMobile: boolean;\n\ttoggleSidebar: () => void;\n}\n\nconst SidebarContext = createContext<SidebarContextProps | null>(null);\n\nexport function useSidebar(): SidebarContextProps {\n\tconst context = useContext(SidebarContext);\n\tif (!context) {\n\t\tthrow new Error('useSidebar must be used within a SidebarProvider.');\n\t}\n\n\treturn context;\n}\n\nexport function SidebarProvider(props: Props & {\n\tdefaultOpen?: boolean;\n\topen?: boolean;\n\tonOpenChange?: (open: boolean) => void;\n\tstyle?: Record<string, string>;\n}) {\n\tconst {\n\t\tdefaultOpen = true,\n\t\topen: openProp,\n\t\tonOpenChange: setOpenProp,\n\t\tclassName,\n\t\tstyle,\n\t\tchildren: _children,\n\t\t...rest\n\t} = props;\n\tconst isMobile = useIsMobile();\n\tconst [openMobile, setOpenMobile] = useState(false);\n\n\t// This is the internal state of the sidebar.\n\t// We use openProp and setOpenProp for control from outside the component.\n\tconst [_open, _setOpen] = useState(defaultOpen);\n\tconst open = openProp ?? _open;\n\tconst setOpen = useCallback((value: boolean | ((value: boolean) => boolean)) => {\n\t\tconst openState =\n\t\t\ttypeof value === 'function' ? value(open) : value;\n\t\tif (setOpenProp) {\n\t\t\tsetOpenProp(openState);\n\t\t} else {\n\t\t\t_setOpen(openState);\n\t\t}\n\n\t\t// This sets the cookie to keep the sidebar state.\n\t\tdocument.cookie =\n\t\t\t`${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;\n\t});\n\n\t// Helper to toggle the sidebar.\n\tconst toggleSidebar = useCallback(() => {\n\t\treturn isMobile ? setOpenMobile((value) => !value) : setOpen((value) => !value);\n\t});\n\n\t// Adds a keyboard shortcut to toggle the sidebar.\n\tuseEffect(() => {\n\t\tconst handleKeyDown = (event: KeyboardEvent) => {\n\t\t\tif (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\ttoggleSidebar();\n\t\t\t}\n\t\t};\n\n\t\twindow.addEventListener('keydown', handleKeyDown);\n\t\treturn () => window.removeEventListener('keydown', handleKeyDown);\n\t});\n\n\t// We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n\t// This makes it easier to style the sidebar with Tailwind classes.\n\tconst state = open ? 'expanded' : 'collapsed';\n\n\tconst contextValue = useMemo<SidebarContextProps>(\n\t\t() => ({\n\t\t\tstate,\n\t\t\topen,\n\t\t\tsetOpen,\n\t\t\tisMobile,\n\t\t\topenMobile,\n\t\t\tsetOpenMobile,\n\t\t\ttoggleSidebar,\n\t\t}),\n\t);\n\n\treturn createElement(\n\t\tSidebarContext.Provider,\n\t\t{ value: contextValue },\n\t\tcreateElement(\n\t\t\t'div',\n\t\t\t{\n\t\t\t\t'data-slot': 'sidebar-wrapper',\n\t\t\t\tstyle: {\n\t\t\t\t\t'--sidebar-width': SIDEBAR_WIDTH,\n\t\t\t\t\t'--sidebar-width-icon': SIDEBAR_WIDTH_ICON,\n\t\t\t\t\t...style,\n\t\t\t\t} as Record<string, string>,\n\t\t\t\tclassName: cn(\n\t\t\t\t\t'group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar',\n\t\t\t\t\tclassName,\n\t\t\t\t),\n\t\t\t\t...rest,\n\t\t\t},\n\t\t\tprops.children,\n\t\t),\n\t);\n}\n\nexport function Sidebar(props: Props & {\n\tside?: 'left' | 'right';\n\tvariant?: 'sidebar' | 'floating' | 'inset';\n\tcollapsible?: 'offcanvas' | 'icon' | 'none';\n\tdir?: string;\n}) {\n\tconst {\n\t\tside = 'left',\n\t\tvariant = 'sidebar',\n\t\tcollapsible = 'offcanvas',\n\t\tclassName,\n\t\tchildren: _children,\n\t\tdir,\n\t\t...rest\n\t} = props;\n\tconst { isMobile, state, openMobile, setOpenMobile } = useSidebar();\n\n\tif (collapsible === 'none') {\n\t\treturn createElement(\n\t\t\t'div',\n\t\t\t{\n\t\t\t\t'data-slot': 'sidebar',\n\t\t\t\tclassName: cn(\n\t\t\t\t\t'flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground',\n\t\t\t\t\tclassName,\n\t\t\t\t),\n\t\t\t\t...rest,\n\t\t\t},\n\t\t\tprops.children,\n\t\t);\n\t}\n\n\tif (isMobile) {\n\t\treturn createElement(\n\t\t\tSheet,\n\t\t\t{ open: openMobile, onOpenChange: setOpenMobile, ...rest },\n\t\t\tcreateElement(\n\t\t\t\tSheetContent,\n\t\t\t\t{\n\t\t\t\t\tdir,\n\t\t\t\t\t'data-sidebar': 'sidebar',\n\t\t\t\t\t'data-slot': 'sidebar',\n\t\t\t\t\t'data-mobile': 'true',\n\t\t\t\t\tclassName: 'w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden',\n\t\t\t\t\tstyle: { '--sidebar-width': SIDEBAR_WIDTH_MOBILE } as Record<string, string>,\n\t\t\t\t\tside,\n\t\t\t\t},\n\t\t\t\tcreateElement(\n\t\t\t\t\tSheetHeader,\n\t\t\t\t\t{ key: 'header', className: 'sr-only' },\n\t\t\t\t\tcreateElement(SheetTitle, { key: 'title' }, 'Sidebar'),\n\t\t\t\t\tcreateElement(SheetDescription, { key: 'desc' }, 'Displays the mobile sidebar.'),\n\t\t\t\t),\n\t\t\t\tcreateElement(\n\t\t\t\t\t'div',\n\t\t\t\t\t{ key: 'body', className: 'flex h-full w-full flex-col' },\n\t\t\t\t\tprops.children,\n\t\t\t\t),\n\t\t\t),\n\t\t);\n\t}\n\n\treturn createElement(\n\t\t'div',\n\t\t{\n\t\t\tclassName: 'group peer hidden text-sidebar-foreground md:block',\n\t\t\t'data-state': state,\n\t\t\t'data-collapsible': state === 'collapsed' ? collapsible : '',\n\t\t\t'data-variant': variant,\n\t\t\t'data-side': side,\n\t\t\t'data-slot': 'sidebar',\n\t\t},\n\t\t// This is what handles the sidebar gap on desktop\n\t\tcreateElement('div', {\n\t\t\tkey: 'gap',\n\t\t\t'data-slot': 'sidebar-gap',\n\t\t\tclassName: cn(\n\t\t\t\t'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',\n\t\t\t\t'group-data-[collapsible=offcanvas]:w-0',\n\t\t\t\t'group-data-[side=right]:rotate-180',\n\t\t\t\tvariant === 'floating' || variant === 'inset'\n\t\t\t\t\t? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'\n\t\t\t\t\t: 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)',\n\t\t\t),\n\t\t}),\n\t\tcreateElement(\n\t\t\t'div',\n\t\t\t{\n\t\t\t\tkey: 'container',\n\t\t\t\t'data-slot': 'sidebar-container',\n\t\t\t\t'data-side': side,\n\t\t\t\tclassName: cn(\n\t\t\t\t\t'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear 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)] md:flex',\n\t\t\t\t\t// Adjust the padding for floating and inset variants.\n\t\t\t\t\tvariant === 'floating' || variant === 'inset'\n\t\t\t\t\t\t? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'\n\t\t\t\t\t\t: 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',\n\t\t\t\t\tclassName,\n\t\t\t\t),\n\t\t\t\t...rest,\n\t\t\t},\n\t\t\tcreateElement(\n\t\t\t\t'div',\n\t\t\t\t{\n\t\t\t\t\t'data-sidebar': 'sidebar',\n\t\t\t\t\t'data-slot': 'sidebar-inner',\n\t\t\t\t\tclassName: 'flex size-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-sidebar-border',\n\t\t\t\t},\n\t\t\t\tprops.children,\n\t\t\t),\n\t\t),\n\t);\n}\n\nexport function SidebarTrigger({ className, onClick, ...props }: Props & {\n\tonClick?: (event: MouseEvent) => void;\n}) @{\n\tconst { toggleSidebar } = useSidebar();\n\n\t<Button\n\t\tdata-sidebar=\"trigger\"\n\t\tdata-slot=\"sidebar-trigger\"\n\t\tvariant=\"ghost\"\n\t\tsize=\"icon-sm\"\n\t\tclassName={cn(className)}\n\t\tonClick={(event: MouseEvent) => {\n\t\t\tonClick?.(event);\n\t\t\ttoggleSidebar();\n\t\t}}\n\t\t{...props}\n\t>\n\t\t<PanelLeftIcon className=\"cn-rtl-flip\" />\n\t\t<span className=\"sr-only\">Toggle Sidebar</span>\n\t</Button>\n}\n\nexport function SidebarRail({ className, ...props }: Props) @{\n\tconst { toggleSidebar } = useSidebar();\n\n\t<button\n\t\tdata-sidebar=\"rail\"\n\t\tdata-slot=\"sidebar-rail\"\n\t\taria-label=\"Toggle Sidebar\"\n\t\ttabIndex={-1}\n\t\tonClick={toggleSidebar}\n\t\ttitle=\"Toggle Sidebar\"\n\t\tclassName={cn(\n\t\t\t'absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] hover:after:bg-sidebar-border sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2',\n\t\t\t'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',\n\t\t\t'[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',\n\t\t\t'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar',\n\t\t\t'[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',\n\t\t\t'[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n}\n\nexport function SidebarInset({ className, ...props }: Props) @{\n\t<main\n\t\tdata-slot=\"sidebar-inset\"\n\t\tclassName={cn(\n\t\t\t'relative flex w-full flex-1 flex-col bg-background 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',\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n}\n\nexport function SidebarInput({ className, ...props }: Props) @{\n\t<Input\n\t\tdata-slot=\"sidebar-input\"\n\t\tdata-sidebar=\"input\"\n\t\tclassName={cn('h-8 w-full bg-background shadow-none', className)}\n\t\t{...props}\n\t/>\n}\n\nexport function SidebarHeader({ className, ...props }: Props) @{\n\t<div\n\t\tdata-slot=\"sidebar-header\"\n\t\tdata-sidebar=\"header\"\n\t\tclassName={cn('flex flex-col gap-2 p-2', className)}\n\t\t{...props}\n\t/>\n}\n\nexport function SidebarFooter({ className, ...props }: Props) @{\n\t<div\n\t\tdata-slot=\"sidebar-footer\"\n\t\tdata-sidebar=\"footer\"\n\t\tclassName={cn('flex flex-col gap-2 p-2', className)}\n\t\t{...props}\n\t/>\n}\n\nexport function SidebarSeparator({ className, ...props }: Props) @{\n\t<Separator\n\t\tdata-slot=\"sidebar-separator\"\n\t\tdata-sidebar=\"separator\"\n\t\tclassName={cn('mx-2 w-auto bg-sidebar-border', className)}\n\t\t{...props}\n\t/>\n}\n\nexport function SidebarContent({ className, ...props }: Props) @{\n\t<div\n\t\tdata-slot=\"sidebar-content\"\n\t\tdata-sidebar=\"content\"\n\t\tclassName={cn(\n\t\t\t'no-scrollbar flex min-h-0 flex-1 flex-col gap-0 overflow-auto group-data-[collapsible=icon]:overflow-hidden',\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n}\n\nexport function SidebarGroup({ className, ...props }: Props) @{\n\t<div\n\t\tdata-slot=\"sidebar-group\"\n\t\tdata-sidebar=\"group\"\n\t\tclassName={cn('relative flex w-full min-w-0 flex-col p-2', className)}\n\t\t{...props}\n\t/>\n}\n\nexport function SidebarGroupLabel({ className, ...props }: Props & {\n\t/** Not supported in this base — see the header. Declared so it fails to compile, not silently. */\n\tasChild?: never;\n}) @{\n\t<div\n\t\tdata-slot=\"sidebar-group-label\"\n\t\tdata-sidebar=\"group-label\"\n\t\tclassName={cn(\n\t\t\t'flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n}\n\nexport function SidebarGroupAction({ className, ...props }: Props & {\n\t/** Not supported in this base — see the header. Declared so it fails to compile, not silently. */\n\tasChild?: never;\n}) @{\n\t<button\n\t\tdata-slot=\"sidebar-group-action\"\n\t\tdata-sidebar=\"group-action\"\n\t\tclassName={cn(\n\t\t\t'absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0',\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n}\n\nexport function SidebarGroupContent({ className, ...props }: Props) @{\n\t<div\n\t\tdata-slot=\"sidebar-group-content\"\n\t\tdata-sidebar=\"group-content\"\n\t\tclassName={cn('w-full text-sm', className)}\n\t\t{...props}\n\t/>\n}\n\nexport function SidebarMenu({ className, ...props }: Props) @{\n\t<ul\n\t\tdata-slot=\"sidebar-menu\"\n\t\tdata-sidebar=\"menu\"\n\t\tclassName={cn('flex w-full min-w-0 flex-col gap-0', className)}\n\t\t{...props}\n\t/>\n}\n\nexport function SidebarMenuItem({ className, ...props }: Props) @{\n\t<li\n\t\tdata-slot=\"sidebar-menu-item\"\n\t\tdata-sidebar=\"menu-item\"\n\t\tclassName={cn('group/menu-item relative', className)}\n\t\t{...props}\n\t/>\n}\n\n// EXPORTED, unlike the radix source it was ported from. This base drops `asChild`, and the header\n// above sends consumers here as the substitute for it — a helper they cannot import is not a\n// workaround. Every sibling family in this base already exports its cva map (badge, item, toggle),\n// so this also brings sidebar in line with them.\nexport const sidebarMenuButtonVariants = cva(\n\t'peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:font-medium data-active:text-sidebar-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate',\n\t{\n\t\tvariants: {\n\t\t\tvariant: {\n\t\t\t\tdefault: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',\n\t\t\t\toutline: 'bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_var(--sidebar-accent)]',\n\t\t\t},\n\t\t\tsize: {\n\t\t\t\tdefault: 'h-8 text-sm',\n\t\t\t\tsm: 'h-7 text-xs',\n\t\t\t\tlg: 'h-12 text-sm group-data-[collapsible=icon]:p-0!',\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\tvariant: 'default',\n\t\t\tsize: 'default',\n\t\t},\n\t},\n);\n\nexport function SidebarMenuButton(props: Props & {\n\t/** Not supported in this base — see the header. Declared so it fails to compile, not silently. */\n\tasChild?: never;\n\tisActive?: boolean;\n\ttooltip?: string | Record<string, unknown>;\n\tvariant?: VariantProps<typeof sidebarMenuButtonVariants>['variant'];\n\tsize?: VariantProps<typeof sidebarMenuButtonVariants>['size'];\n}) {\n\tconst {\n\t\tisActive = false,\n\t\tvariant = 'default',\n\t\tsize = 'default',\n\t\ttooltip,\n\t\tclassName,\n\t\tchildren: _children,\n\t\t...rest\n\t} = props;\n\tconst { isMobile, state } = useSidebar();\n\n\tconst button = createElement(\n\t\t'button',\n\t\t{\n\t\t\t'data-slot': 'sidebar-menu-button',\n\t\t\t'data-sidebar': 'menu-button',\n\t\t\t'data-size': size,\n\t\t\t'data-active': isActive,\n\t\t\tclassName: cn(sidebarMenuButtonVariants({ variant, size }), className),\n\t\t\t...rest,\n\t\t},\n\t\tprops.children,\n\t);\n\n\tif (!tooltip) {\n\t\treturn button;\n\t}\n\n\tconst tooltipProps =\n\t\ttypeof tooltip === 'string' ? { children: tooltip } : tooltip;\n\n\treturn createElement(\n\t\tTooltip,\n\t\t{},\n\t\tcreateElement(TooltipTrigger, { key: 'trigger', render: button }),\n\t\tcreateElement(TooltipContent, {\n\t\t\tkey: 'content',\n\t\t\tside: 'right',\n\t\t\talign: 'center',\n\t\t\thidden: state !== 'collapsed' || isMobile,\n\t\t\t...tooltipProps,\n\t\t}),\n\t);\n}\n\nexport function SidebarMenuAction({ className, showOnHover = false, ...props }: Props & {\n\t/** Not supported in this base — see the header. Declared so it fails to compile, not silently. */\n\tasChild?: never;\n\tshowOnHover?: boolean;\n}) @{\n\t<button\n\t\tdata-slot=\"sidebar-menu-action\"\n\t\tdata-sidebar=\"menu-action\"\n\t\tclassName={cn(\n\t\t\t'absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0',\n\t\t\tshowOnHover &&\n\t\t\t\t'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-active/menu-button:text-sidebar-accent-foreground aria-expanded:opacity-100 md:opacity-0',\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n}\n\nexport function SidebarMenuBadge({ className, ...props }: Props) @{\n\t<div\n\t\tdata-slot=\"sidebar-menu-badge\"\n\t\tdata-sidebar=\"menu-badge\"\n\t\tclassName={cn(\n\t\t\t'pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 peer-data-active/menu-button:text-sidebar-accent-foreground',\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n}\n\nexport function SidebarMenuSkeleton({ className, showIcon = false, ...props }: Props & {\n\tshowIcon?: boolean;\n}) @{\n\t// Random width between 50 to 90%.\n\tconst [width] = useState(() => `${Math.floor(Math.random() * 40) + 50}%`);\n\n\t<div\n\t\tdata-slot=\"sidebar-menu-skeleton\"\n\t\tdata-sidebar=\"menu-skeleton\"\n\t\tclassName={cn('flex h-8 items-center gap-2 rounded-md px-2', className)}\n\t\t{...props}\n\t>\n\t\t@if (showIcon) {\n\t\t\t<Skeleton className=\"size-4 rounded-md\" data-sidebar=\"menu-skeleton-icon\" />\n\t\t}\n\t\t<Skeleton\n\t\t\tclassName=\"h-4 max-w-(--skeleton-width) flex-1\"\n\t\t\tdata-sidebar=\"menu-skeleton-text\"\n\t\t\tstyle={{ '--skeleton-width': width } as Record<string, string>}\n\t\t/>\n\t</div>\n}\n\nexport function SidebarMenuSub({ className, ...props }: Props) @{\n\t<ul\n\t\tdata-slot=\"sidebar-menu-sub\"\n\t\tdata-sidebar=\"menu-sub\"\n\t\tclassName={cn(\n\t\t\t'mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5 group-data-[collapsible=icon]:hidden',\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n}\n\nexport function SidebarMenuSubItem({ className, ...props }: Props) @{\n\t<li\n\t\tdata-slot=\"sidebar-menu-sub-item\"\n\t\tdata-sidebar=\"menu-sub-item\"\n\t\tclassName={cn('group/menu-sub-item relative', className)}\n\t\t{...props}\n\t/>\n}\n\nexport function SidebarMenuSubButton({\n\tsize = 'md',\n\tisActive = false,\n\tclassName,\n\t...props\n}: Props & {\n\t/** Not supported in this base — see the header. Declared so it fails to compile, not silently. */\n\tasChild?: never;\n\tsize?: 'sm' | 'md';\n\tisActive?: boolean;\n}) @{\n\t<a\n\t\tdata-slot=\"sidebar-menu-sub-button\"\n\t\tdata-sidebar=\"menu-sub-button\"\n\t\tdata-size={size}\n\t\tdata-active={isActive}\n\t\tclassName={cn(\n\t\t\t'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground ring-sidebar-ring outline-hidden group-data-[collapsible=icon]:hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[size=md]:text-sm data-[size=sm]:text-xs data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground',\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n}\n"
    }
  ],
  "dependencies": [
    "@octanejs/lucide@0.1.33",
    "class-variance-authority"
  ],
  "registryDependencies": [
    "@octane/button",
    "@octane/input",
    "@octane/separator",
    "@octane/sheet",
    "@octane/skeleton",
    "@octane/tooltip",
    "@octane/use-mobile",
    "@octane/utils"
  ]
}