{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "mc-sidebar",
  "title": "MicroClub Sidebar",
  "description": "A sidebar component for MicroClub UI",
  "dependencies": [
    "@base-ui/react",
    "lucide-react"
  ],
  "files": [
    {
      "path": "registry/ui/mc-sidebar.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { ChevronDownIcon, PanelLeftIcon } from 'lucide-react';\n\nimport { cn } from '@/lib/utils';\nimport { McButton } from '@/registry/ui/mc-button';\n\nconst SIDEBAR_COOKIE_NAME = 'sidebar_state';\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;\nconst SIDEBAR_WIDTH = '255px';\nconst SIDEBAR_WIDTH_ICON = '51px';\nconst SIDEBAR_KEYBOARD_SHORTCUT = 'b';\n\ntype SidebarContextProps = {\n  state: 'expanded' | 'collapsed';\n  open: boolean;\n  setOpen: (open: boolean) => void;\n  toggleSidebar: () => void;\n};\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null);\n\nfunction useSidebar() {\n  const context = React.useContext(SidebarContext);\n  if (!context) {\n    throw new Error('useSidebar must be used within a SidebarProvider.');\n  }\n  return context;\n}\n\nfunction SidebarProvider({\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange: setOpenProp,\n  className,\n  style,\n  children,\n  ...props\n}: React.ComponentProps<'div'> & {\n  defaultOpen?: boolean;\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n}) {\n  const [_open, _setOpen] = React.useState(() => {\n    if (typeof document === 'undefined') {\n      return defaultOpen;\n    }\n\n    const cookie = document.cookie\n      .split('; ')\n      .find((entry) => entry.startsWith(`${SIDEBAR_COOKIE_NAME}=`));\n\n    if (!cookie) {\n      return defaultOpen;\n    }\n\n    return cookie.split('=')[1] === 'true';\n  });\n  const open = openProp ?? _open;\n  const setOpen = React.useCallback(\n    (value: boolean | ((value: boolean) => boolean)) => {\n      const openState = typeof value === 'function' ? value(open) : value;\n      if (setOpenProp) {\n        setOpenProp(openState);\n      } else {\n        _setOpen(openState);\n      }\n    },\n    [setOpenProp, open]\n  );\n\n  React.useEffect(() => {\n    document.cookie = `${SIDEBAR_COOKIE_NAME}=${open}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;\n  }, [open]);\n\n  const toggleSidebar = React.useCallback(() => {\n    return setOpen((open) => !open);\n  }, [setOpen]);\n\n  React.useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {\n        event.preventDefault();\n        toggleSidebar();\n      }\n    };\n\n    window.addEventListener('keydown', handleKeyDown);\n    return () => window.removeEventListener('keydown', handleKeyDown);\n  }, [toggleSidebar]);\n\n  const state = open ? 'expanded' : 'collapsed';\n\n  const contextValue = React.useMemo<SidebarContextProps>(\n    () => ({\n      state,\n      open,\n      setOpen,\n      toggleSidebar,\n    }),\n    [state, open, setOpen, toggleSidebar]\n  );\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <div\n        data-slot=\"sidebar-wrapper\"\n        style={\n          {\n            '--sidebar-width': SIDEBAR_WIDTH,\n            '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,\n            ...style,\n          } as React.CSSProperties\n        }\n        className={cn(\n          'group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar',\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </SidebarContext.Provider>\n  );\n}\n\nfunction McSidebar({\n  side = 'left',\n  variant = 'sidebar',\n  collapsible = 'icon',\n  className,\n  children,\n  ...props\n}: React.ComponentProps<'div'> & {\n  side?: 'left' | 'right';\n  variant?: 'sidebar' | 'floating' | 'inset';\n  collapsible?: 'offcanvas' | 'icon' | 'none';\n}) {\n  const { state } = useSidebar();\n\n  return (\n    <div\n      className={cn(\n        'group peer hidden text-sidebar-foreground md:flex',\n        'data-[side=right]:flex-row-reverse'\n      )}\n      data-state={collapsible === 'none' ? 'expanded' : state}\n      data-collapsible={collapsible === 'none' ? '' : state === 'collapsed' ? collapsible : ''}\n      data-variant={variant}\n      data-side={side}\n      data-slot=\"sidebar\"\n    >\n      <div\n        data-slot=\"sidebar-gap\"\n        className={cn(\n          'relative w-0 bg-transparent transition-[width] duration-200 ease-linear',\n          'group-data-[side=left]:w-[calc(var(--sidebar-width)+1.25rem)]',\n          'group-data-[side=right]:w-[calc(var(--sidebar-width)+1.25rem)]',\n          'group-data-[collapsible=offcanvas]:w-0',\n          'group-data-[collapsible=icon]:w-0',\n          'group-data-[side=left]:group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+1.25rem)]',\n          'group-data-[side=right]:group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+1.25rem)]'\n        )}\n      />\n      <div\n        data-slot=\"sidebar-container\"\n        data-side={side}\n        className={cn(\n          'fixed top-5 z-10 hidden h-[calc(100svh-40px)] w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-5 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-5 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex',\n          'group-data-[collapsible=icon]:w-(--sidebar-width-icon)',\n          className\n        )}\n        {...props}\n      >\n        <div\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n          className={cn(\n            'flex size-full min-h-0 flex-col overflow-hidden rounded-lg border border-sidebar-border bg-sidebar',\n            'group-data-[variant=floating]:shadow-lg group-data-[variant=floating]:shadow-sidebar/10',\n            'group-data-[variant=inset]:bg-sidebar/95 group-data-[variant=inset]:backdrop-blur-sm'\n          )}\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nfunction McSidebarTrigger({ className, onClick, ...props }: React.ComponentProps<typeof McButton>) {\n  const { toggleSidebar } = useSidebar();\n  const handleClick: React.ComponentProps<typeof McButton>['onClick'] = (event) => {\n    onClick?.(event);\n    toggleSidebar();\n  };\n\n  return (\n    <McButton\n      type=\"button\"\n      data-sidebar=\"trigger\"\n      data-slot=\"sidebar-trigger\"\n      variant=\"tertiary\"\n      size=\"sm\"\n      className={cn('h-8 w-8 p-0', className)}\n      onClick={handleClick}\n      {...props}\n    >\n      <PanelLeftIcon className=\"cn-rtl-flip\" />\n      <span className=\"sr-only\">Toggle Sidebar</span>\n    </McButton>\n  );\n}\n\nfunction McSidebarRail({ className, ...props }: React.ComponentProps<'button'>) {\n  const { toggleSidebar } = useSidebar();\n\n  return (\n    <button\n      type=\"button\"\n      data-sidebar=\"rail\"\n      data-slot=\"sidebar-rail\"\n      aria-label=\"Toggle Sidebar\"\n      onClick={toggleSidebar}\n      title=\"Toggle Sidebar\"\n      className={cn(\n        '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        'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',\n        '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',\n        'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar',\n        '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',\n        '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction McSidebarInset({ className, ...props }: React.ComponentProps<'main'>) {\n  return (\n    <main\n      data-slot=\"sidebar-inset\"\n      className={cn(\n        'relative flex min-h-0 w-full flex-1 flex-col overflow-y-auto bg-background md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction McSidebarHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"sidebar-header\"\n      data-sidebar=\"header\"\n      className={cn(\n        'shrink-0 flex flex-col gap-2 p-2 group-data-[collapsible=icon]:p-1',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction McSidebarFooter({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"sidebar-footer\"\n      data-sidebar=\"footer\"\n      className={cn(\n        'shrink-0 flex flex-col gap-2 p-2 group-data-[collapsible=icon]:p-1',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction McSidebarSeparator({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"sidebar-separator\"\n      data-sidebar=\"separator\"\n      className={cn(\n        'mx-2 h-px w-auto shrink-0 bg-sidebar-border group-data-[collapsible=icon]:mx-1',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction McSidebarContent({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"sidebar-content\"\n      data-sidebar=\"content\"\n      className={cn(\n        'no-scrollbar flex min-h-0 flex-1 flex-col gap-0 overflow-x-hidden overflow-y-auto overscroll-contain group-data-[collapsible=icon]:overflow-hidden',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction McSidebarGroup({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"sidebar-group\"\n      data-sidebar=\"group\"\n      className={cn(\n        'relative flex w-full min-w-0 flex-col p-2 group-data-[collapsible=icon]:p-1',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction McSidebarGroupLabel({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<'div'> & React.ComponentProps<'div'>) {\n  return useRender({\n    defaultTagName: 'div',\n    props: mergeProps<'div'>(\n      {\n        className: cn(\n          'flex h-8 w-full shrink-0 items-center gap-2 rounded-md px-2 text-xs leading-4 font-normal tracking-normal text-sidebar-foreground opacity-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 group-data-[collapsible=icon]:hidden focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: 'sidebar-group-label',\n      sidebar: 'group-label',\n    },\n  });\n}\n\nfunction McSidebarGroupAction({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<'button'> & React.ComponentProps<'button'>) {\n  return useRender({\n    defaultTagName: 'button',\n    props: mergeProps<'button'>(\n      {\n        className: cn(\n          '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 group-data-[collapsible=icon]:w-4 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          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: 'sidebar-group-action',\n      sidebar: 'group-action',\n    },\n  });\n}\n\nfunction McSidebarGroupContent({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"sidebar-group-content\"\n      data-sidebar=\"group-content\"\n      className={cn('w-full text-sm', className)}\n      {...props}\n    />\n  );\n}\n\nfunction McSidebarMenu({ className, ...props }: React.ComponentProps<'ul'>) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu\"\n      data-sidebar=\"menu\"\n      className={cn('m-0 flex w-full min-w-0 list-none flex-col gap-0 p-0', className)}\n      {...props}\n    />\n  );\n}\n\nfunction McSidebarMenuItem({ className, ...props }: React.ComponentProps<'li'>) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-item\"\n      data-sidebar=\"menu-item\"\n      className={cn('list-none group/menu-item relative', className)}\n      {...props}\n    />\n  );\n}\n\ntype McSidebarCollapsibleProps = Omit<React.ComponentProps<'li'>, 'children'> & {\n  label: React.ReactNode;\n  icon?: React.ComponentType<{ className?: string }>;\n  tooltip?: string;\n  defaultOpen?: boolean;\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  triggerClassName?: string;\n  contentClassName?: string;\n  chevronClassName?: string;\n  children?: React.ReactNode;\n};\n\nfunction McSidebarCollapsible({\n  label,\n  icon: Icon,\n  tooltip,\n  defaultOpen = false,\n  open: openProp,\n  onOpenChange,\n  className,\n  triggerClassName,\n  contentClassName,\n  chevronClassName,\n  children,\n  ...props\n}: McSidebarCollapsibleProps) {\n  const hasChildren = React.Children.count(children) > 0;\n  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen);\n  const isOpen = openProp ?? uncontrolledOpen;\n\n  const setOpen = React.useCallback(\n    (value: boolean) => {\n      if (openProp === undefined) {\n        setUncontrolledOpen(value);\n      }\n      onOpenChange?.(value);\n    },\n    [openProp, onOpenChange]\n  );\n\n  const handleToggle = React.useCallback(() => {\n    if (!hasChildren) {\n      return;\n    }\n    setOpen(!isOpen);\n  }, [hasChildren, isOpen, setOpen]);\n\n  return (\n    <McSidebarMenuItem className={cn('h-auto', className)} {...props}>\n      <McSidebarMenuButton\n        tooltip={tooltip}\n        onClick={handleToggle}\n        aria-expanded={hasChildren ? isOpen : undefined}\n        className={cn('justify-between', triggerClassName)}\n      >\n        <span className=\"flex items-center gap-2 group-data-[collapsible=icon]:gap-0\">\n          {Icon ? <Icon /> : null}\n          <span className=\"group-data-[collapsible=icon]:hidden\">{label}</span>\n        </span>\n        {hasChildren ? (\n          <ChevronDownIcon\n            className={cn(\n              'h-4 w-4 shrink-0 transition-transform group-data-[collapsible=icon]:hidden',\n              isOpen && 'rotate-180',\n              chevronClassName\n            )}\n          />\n        ) : null}\n      </McSidebarMenuButton>\n\n      {hasChildren && isOpen ? (\n        <McSidebarMenuSub className={contentClassName}>{children}</McSidebarMenuSub>\n      ) : null}\n    </McSidebarMenuItem>\n  );\n}\n\nconst sidebarMenuButtonVariants = cva(\n  '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]:mx-auto group-data-[collapsible=icon]:p-0! group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:gap-0 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 group-data-[collapsible=icon]:[&_svg]:size-4 [&>span:last-child]:truncate group-data-[collapsible=icon]:[&>span>span]:hidden group-data-[collapsible=icon]:[&>svg+span]:hidden group-data-[collapsible=icon]:[&>span]:w-full group-data-[collapsible=icon]:[&>span]:justify-center group-data-[collapsible=icon]:[&>span]:gap-0',\n  {\n    variants: {\n      variant: {\n        default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',\n        outline:\n          'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',\n      },\n      size: {\n        default: 'h-8 text-sm',\n        sm: 'h-7 text-xs',\n        lg: 'h-12 text-sm group-data-[collapsible=icon]:p-0!',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  }\n);\n\nfunction McSidebarMenuButton({\n  render,\n  isActive = false,\n  variant = 'default',\n  size = 'default',\n  tooltip,\n  className,\n  ...props\n}: useRender.ComponentProps<'button'> &\n  React.ComponentProps<'button'> & {\n    isActive?: boolean;\n    tooltip?: string | React.HTMLAttributes<HTMLButtonElement>;\n  } & VariantProps<typeof sidebarMenuButtonVariants>) {\n  const { state } = useSidebar();\n  const tooltipLabel =\n    typeof tooltip === 'string'\n      ? tooltip\n      : typeof tooltip?.['aria-label'] === 'string'\n        ? tooltip['aria-label']\n        : undefined;\n  const comp = useRender({\n    defaultTagName: 'button',\n    props: mergeProps<'button'>(\n      {\n        type: 'button',\n        className: cn(sidebarMenuButtonVariants({ variant, size }), className),\n        title: state === 'collapsed' ? tooltipLabel : undefined,\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: 'sidebar-menu-button',\n      sidebar: 'menu-button',\n      size,\n      active: isActive,\n    },\n  });\n\n  if (!tooltip) {\n    return comp;\n  }\n\n  return comp;\n}\n\nfunction McSidebarMenuAction({\n  className,\n  render,\n  showOnHover = false,\n  ...props\n}: useRender.ComponentProps<'button'> &\n  React.ComponentProps<'button'> & {\n    showOnHover?: boolean;\n  }) {\n  return useRender({\n    defaultTagName: 'button',\n    props: mergeProps<'button'>(\n      {\n        className: cn(\n          '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 group-data-[collapsible=icon]:w-4 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          showOnHover &&\n            '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          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: 'sidebar-menu-action',\n      sidebar: 'menu-action',\n    },\n  });\n}\n\nfunction McSidebarMenuBadge({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"mc-sidebar-menu-badge\"\n      data-sidebar=\"menu-badge\"\n      className={cn(\n        '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 group-data-[collapsible=icon]:h-4 group-data-[collapsible=icon]:w-4 group-data-[collapsible=icon]:min-w-4 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        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction McSidebarMenuSkeleton({\n  className,\n  showIcon = false,\n  ...props\n}: React.ComponentProps<'div'> & {\n  showIcon?: boolean;\n}) {\n  const [width] = React.useState(() => {\n    return `${Math.floor(Math.random() * 40) + 50}%`;\n  });\n\n  return (\n    <div\n      data-slot=\"mc-sidebar-menu-skeleton\"\n      data-sidebar=\"menu-skeleton\"\n      className={cn('flex h-8 items-center gap-2 rounded-md px-2', className)}\n      {...props}\n    >\n      {showIcon && (\n        <div\n          className=\"size-4 rounded-md bg-muted animate-pulse\"\n          data-sidebar=\"menu-skeleton-icon\"\n        />\n      )}\n      <div\n        className=\"h-4 max-w-(--skeleton-width) flex-1 rounded-md bg-muted animate-pulse\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            '--skeleton-width': width,\n          } as React.CSSProperties\n        }\n      />\n    </div>\n  );\n}\n\nfunction McSidebarMenuSub({ className, ...props }: React.ComponentProps<'ul'>) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu-sub\"\n      data-sidebar=\"menu-sub\"\n      className={cn(\n        'mx-3.5 m-0 flex min-w-0 list-none translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5 group-data-[collapsible=icon]:hidden group-data-[collapsible=icon]:mx-1 group-data-[collapsible=icon]:px-1',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction McSidebarMenuSubItem({ className, ...props }: React.ComponentProps<'li'>) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-sub-item\"\n      data-sidebar=\"menu-sub-item\"\n      className={cn('list-none group/menu-sub-item relative', className)}\n      {...props}\n    />\n  );\n}\n\nfunction McSidebarMenuSubButton({\n  render,\n  size = 'md',\n  isActive = false,\n  className,\n  ...props\n}: useRender.ComponentProps<'a'> &\n  React.ComponentProps<'a'> & {\n    size?: 'sm' | 'md';\n    isActive?: boolean;\n  }) {\n  return useRender({\n    defaultTagName: 'a',\n    props: mergeProps<'a'>(\n      {\n        className: cn(\n          '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 group-data-[collapsible=icon]:px-1 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          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: 'sidebar-menu-sub-button',\n      sidebar: 'menu-sub-button',\n      size,\n      active: isActive,\n    },\n  });\n}\n\nexport {\n  McSidebar,\n  McSidebarContent,\n  McSidebarFooter,\n  McSidebarGroup,\n  McSidebarGroupAction,\n  McSidebarGroupContent,\n  McSidebarGroupLabel,\n  McSidebarHeader,\n  McSidebarInset,\n  McSidebarMenu,\n  McSidebarMenuAction,\n  McSidebarMenuBadge,\n  McSidebarMenuButton,\n  McSidebarCollapsible,\n  McSidebarMenuItem,\n  McSidebarMenuSkeleton,\n  McSidebarMenuSub,\n  McSidebarMenuSubButton,\n  McSidebarMenuSubItem,\n  SidebarProvider,\n  McSidebarRail,\n  McSidebarSeparator,\n  McSidebarTrigger,\n  useSidebar,\n};\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}