@kushagradhawan/kookie-ui 0.1.17 → 0.1.18

package/src/components/sidebar.tsx

@@ -8,13 +8,26 @@ import { Accordion } from 'radix-ui';
 import { sidebarPropDefs } from './sidebar.props';
 import { Theme, useThemeContext } from './theme';
 import { IconButton } from './icon-button';
-import { ScrollArea } from './scroll-area';
-import { Separator } from './separator';
-import { ChevronDownIcon, ThickChevronRightIcon } from './icons';
-import { extractProps } from '../helpers/extract-props';
+import { ScrollArea } from './scroll-area.js';
+import { Separator } from './separator.js';
+import { ChevronDownIcon, ThickChevronRightIcon } from './icons.js';
+import { extractProps } from '../helpers/extract-props.js';
+import { Kbd } from './kbd.js';
+import { Badge } from './badge.js';
 
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props';
 import type { GetPropDefTypes } from '../props/prop-def';
+import type { BadgeProps } from './badge.js';
+
+// Badge configuration type for sidebar menu buttons
+type BadgeConfig = {
+  content: React.ReactNode;
+  variant?: BadgeProps['variant'];
+  size?: BadgeProps['size'];
+  color?: BadgeProps['color'];
+  highContrast?: BadgeProps['highContrast'];
+  radius?: BadgeProps['radius'];
+};
 
 // Sidebar context for state management
 type SidebarContextProps = {
@@ -46,17 +59,17 @@ function useSidebar() {
 // Hook to detect mobile (simplified version)
 function useIsMobile() {
   const [isMobile, setIsMobile] = React.useState(false);
-  
+
   React.useEffect(() => {
     const checkIsMobile = () => {
       setIsMobile(window.innerWidth < 768);
     };
-    
+
     checkIsMobile();
     window.addEventListener('resize', checkIsMobile);
     return () => window.removeEventListener('resize', checkIsMobile);
   }, []);
-  
+
   return isMobile;
 }
 
@@ -69,24 +82,38 @@ interface SidebarProviderProps extends React.ComponentPropsWithoutRef<'div'> {
 }
 
 const SidebarProvider = React.forwardRef<HTMLDivElement, SidebarProviderProps>(
-  ({ defaultOpen = true, open: openProp, onOpenChange: setOpenProp, side = 'left', className, children, ...props }, forwardedRef) => {
+  (
+    {
+      defaultOpen = true,
+      open: openProp,
+      onOpenChange: setOpenProp,
+      side = 'left',
+      className,
+      children,
+      ...props
+    },
+    forwardedRef,
+  ) => {
     const isMobile = useIsMobile();
     const [openMobile, setOpenMobile] = React.useState(false);
-    
+
     // Internal state for uncontrolled mode
     const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
-    
+
     // Use controlled state if provided, otherwise internal state
     const open = openProp ?? internalOpen;
-    
-    const setOpen = React.useCallback((value: boolean | ((value: boolean) => boolean)) => {
-      const openState = typeof value === 'function' ? value(open) : value;
-      if (setOpenProp) {
-        setOpenProp(openState);
-      } else {
-        setInternalOpen(openState);
-      }
-    }, [setOpenProp, open]);
+
+    const setOpen = React.useCallback(
+      (value: boolean | ((value: boolean) => boolean)) => {
+        const openState = typeof value === 'function' ? value(open) : value;
+        if (setOpenProp) {
+          setOpenProp(openState);
+        } else {
+          setInternalOpen(openState);
+        }
+      },
+      [setOpenProp, open],
+    );
 
     // Helper to toggle the sidebar
     const toggleSidebar = React.useCallback(() => {
@@ -95,7 +122,7 @@ const SidebarProvider = React.forwardRef<HTMLDivElement, SidebarProviderProps>(
 
     // State for data attributes
     const state = open ? 'expanded' : 'collapsed';
-    
+
     const contextValue = React.useMemo<Partial<SidebarContextProps>>(
       () => ({
         state,
@@ -107,7 +134,7 @@ const SidebarProvider = React.forwardRef<HTMLDivElement, SidebarProviderProps>(
         toggleSidebar,
         side,
       }),
-      [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar, side]
+      [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar, side],
     );
 
     return (
@@ -123,7 +150,7 @@ const SidebarProvider = React.forwardRef<HTMLDivElement, SidebarProviderProps>(
         </SidebarContext.Provider>
       </div>
     );
-  }
+  },
 );
 SidebarProvider.displayName = 'Sidebar.Provider';
 
@@ -131,91 +158,40 @@ SidebarProvider.displayName = 'Sidebar.Provider';
 type SidebarOwnProps = GetPropDefTypes<typeof sidebarPropDefs>;
 interface SidebarProps extends ComponentPropsWithout<'div', RemovedProps>, SidebarOwnProps {}
 
-const Sidebar = React.forwardRef<HTMLDivElement, SidebarProps>(
-  (props, forwardedRef) => {
-    const themeContext = useThemeContext();
-    const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
-
-    const {
-      size = sidebarPropDefs.size.default,
-      variant = sidebarPropDefs.variant.default,
-      menuVariant = sidebarPropDefs.menuVariant.default,
-      type = sidebarPropDefs.type.default,
-      side = sidebarPropDefs.side.default,
-      collapsible = sidebarPropDefs.collapsible.default,
-      color,
-      highContrast = sidebarPropDefs.highContrast.default,
-      asChild,
-    } = props;
-
-    const { className, children, ...rootProps } = extractProps(props, sidebarPropDefs);
-    const { asChild: _, ...safeRootProps } = rootProps; // Remove asChild from DOM props
-    const resolvedColor = color || themeContext.accentColor;
-
-    // Update context with current props - we'll pass the resolved values
-    const resolvedSize = typeof size === 'object' ? size.initial || '2' : size;
-    const context = React.useContext(SidebarContext);
-    if (context) {
-      context.side = side;
-      context.type = type;
-      context.variant = variant;
-      context.menuVariant = menuVariant;
-      context.collapsible = collapsible;
-      context.size = resolvedSize;
-    }
-
-    if (collapsible === 'none') {
-      return (
-        <div
-          {...safeRootProps}
-          ref={forwardedRef}
-          data-accent-color={resolvedColor}
-          data-state={state}
-          data-side={side}
-          data-type={type}
-          data-collapsible={collapsible}
-          className={classNames('rt-SidebarRoot', `rt-r-size-${size}`, className)}
-        >
-          <Theme>
-            <div 
-              className={classNames('rt-SidebarContainer', `rt-variant-${variant}`)}
-              data-accent-color={resolvedColor}
-              data-high-contrast={highContrast || undefined}
-              data-side={side}
-            >
-              {children}
-            </div>
-          </Theme>
-        </div>
-      );
-    }
-
-    if (isMobile) {
-      return (
-        <div
-          {...safeRootProps}
-          ref={forwardedRef}
-          data-accent-color={resolvedColor}
-          data-state={openMobile ? 'open' : 'closed'}
-          data-side={side}
-          data-type={type}
-          data-collapsible={collapsible}
-          className={classNames('rt-SidebarRoot', 'rt-SidebarRoot--mobile', className)}
-        >
-          <Theme>
-            <div 
-              className={classNames('rt-SidebarContainer', `rt-variant-${variant}`, `rt-r-size-${size}`)}
-              data-accent-color={resolvedColor}
-              data-high-contrast={highContrast || undefined}
-              data-side={side}
-            >
-              {children}
-            </div>
-          </Theme>
-        </div>
-      );
-    }
+const Sidebar = React.forwardRef<HTMLDivElement, SidebarProps>((props, forwardedRef) => {
+  const themeContext = useThemeContext();
+  const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+
+  const {
+    size = sidebarPropDefs.size.default,
+    variant = sidebarPropDefs.variant.default,
+    menuVariant = sidebarPropDefs.menuVariant.default,
+    type = sidebarPropDefs.type.default,
+    side = sidebarPropDefs.side.default,
+    collapsible = sidebarPropDefs.collapsible.default,
+    panelBackground,
+    color,
+    highContrast = sidebarPropDefs.highContrast.default,
+    asChild,
+  } = props;
+
+  const { className, children, ...rootProps } = extractProps(props, sidebarPropDefs);
+  const { asChild: _, panelBackground: __, ...safeRootProps } = rootProps; // Remove asChild and panelBackground from DOM props
+  const resolvedColor = color || themeContext.accentColor;
+
+  // Update context with current props - we'll pass the resolved values
+  const resolvedSize = typeof size === 'object' ? size.initial || '2' : size;
+  const context = React.useContext(SidebarContext);
+  if (context) {
+    context.side = side;
+    context.type = type;
+    context.variant = variant;
+    context.menuVariant = menuVariant;
+    context.collapsible = collapsible;
+    context.size = resolvedSize;
+  }
 
+  if (collapsible === 'none') {
     return (
       <div
         {...safeRootProps}
@@ -225,14 +201,15 @@ const Sidebar = React.forwardRef<HTMLDivElement, SidebarProps>(
         data-side={side}
         data-type={type}
         data-collapsible={collapsible}
-        className={classNames('rt-SidebarRoot', className)}
+        className={classNames('rt-SidebarRoot', `rt-r-size-${size}`, className)}
       >
         <Theme>
-          <div 
-            className={classNames('rt-SidebarContainer', `rt-variant-${variant}`, `rt-r-size-${size}`)}
+          <div
+            className={classNames('rt-SidebarContainer', `rt-variant-${variant}`)}
             data-accent-color={resolvedColor}
             data-high-contrast={highContrast || undefined}
             data-side={side}
+            data-panel-background={panelBackground}
           >
             {children}
           </div>
@@ -240,7 +217,67 @@ const Sidebar = React.forwardRef<HTMLDivElement, SidebarProps>(
       </div>
     );
   }
-);
+
+  if (isMobile) {
+    return (
+      <div
+        {...safeRootProps}
+        ref={forwardedRef}
+        data-accent-color={resolvedColor}
+        data-state={openMobile ? 'open' : 'closed'}
+        data-side={side}
+        data-type={type}
+        data-collapsible={collapsible}
+        className={classNames('rt-SidebarRoot', 'rt-SidebarRoot--mobile', className)}
+      >
+        <Theme>
+          <div
+            className={classNames(
+              'rt-SidebarContainer',
+              `rt-variant-${variant}`,
+              `rt-r-size-${size}`,
+            )}
+            data-accent-color={resolvedColor}
+            data-high-contrast={highContrast || undefined}
+            data-side={side}
+            data-panel-background={panelBackground}
+          >
+            {children}
+          </div>
+        </Theme>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      {...safeRootProps}
+      ref={forwardedRef}
+      data-accent-color={resolvedColor}
+      data-state={state}
+      data-side={side}
+      data-type={type}
+      data-collapsible={collapsible}
+      className={classNames('rt-SidebarRoot', className)}
+    >
+      <Theme>
+        <div
+          className={classNames(
+            'rt-SidebarContainer',
+            `rt-variant-${variant}`,
+            `rt-r-size-${size}`,
+          )}
+          data-accent-color={resolvedColor}
+          data-high-contrast={highContrast || undefined}
+          data-side={side}
+          data-panel-background={panelBackground}
+        >
+          {children}
+        </div>
+      </Theme>
+    </div>
+  );
+});
 Sidebar.displayName = 'Sidebar.Root';
 
 // Sidebar content area
@@ -250,24 +287,24 @@ const SidebarContent = React.forwardRef<HTMLDivElement, SidebarContentProps>(
   ({ className, children, ...props }, forwardedRef) => {
     const context = React.useContext(SidebarContext);
     const { size = '2', menuVariant = 'soft' } = context || {};
-    
+
     return (
       <ScrollArea type="auto">
         <div
           {...props}
           ref={forwardedRef}
           className={classNames(
-            'rt-SidebarContent', 
+            'rt-SidebarContent',
             `rt-r-size-${size}`,
             `rt-menu-variant-${menuVariant}`,
-            className
+            className,
           )}
         >
           {children}
         </div>
       </ScrollArea>
     );
-  }
+  },
 );
 SidebarContent.displayName = 'Sidebar.Content';
 
@@ -284,7 +321,7 @@ const SidebarHeader = React.forwardRef<HTMLDivElement, SidebarHeaderProps>(
   ({ className, asContainer = true, ...props }, forwardedRef) => {
     const context = React.useContext(SidebarContext);
     const { size = '2', menuVariant = 'soft' } = context || {};
-    
+
     return (
       <div
         {...props}
@@ -296,11 +333,11 @@ const SidebarHeader = React.forwardRef<HTMLDivElement, SidebarHeaderProps>(
           {
             'rt-SidebarHeader--container': asContainer,
           },
-          className
+          className,
         )}
       />
     );
-  }
+  },
 );
 SidebarHeader.displayName = 'Sidebar.Header';
 
@@ -317,7 +354,7 @@ const SidebarFooter = React.forwardRef<HTMLDivElement, SidebarFooterProps>(
   ({ className, asContainer = true, ...props }, forwardedRef) => {
     const context = React.useContext(SidebarContext);
     const { size = '2', menuVariant = 'soft' } = context || {};
-    
+
     return (
       <div
         {...props}
@@ -329,37 +366,36 @@ const SidebarFooter = React.forwardRef<HTMLDivElement, SidebarFooterProps>(
           {
             'rt-SidebarFooter--container': asContainer,
           },
-          className
+          className,
         )}
       />
     );
-  }
+  },
 );
 SidebarFooter.displayName = 'Sidebar.Footer';
 
 // Sidebar trigger button
 interface SidebarTriggerProps extends ComponentPropsWithout<typeof IconButton, RemovedProps> {}
 
-const SidebarTrigger = React.forwardRef<
-  React.ElementRef<typeof IconButton>,
-  SidebarTriggerProps
->(({ onClick, children, ...props }, forwardedRef) => {
-  const { toggleSidebar } = useSidebar();
-  
-  return (
-    <IconButton
-      {...props}
-      ref={forwardedRef}
-      variant="ghost"
-      onClick={(event) => {
-        onClick?.(event);
-        toggleSidebar();
-      }}
-    >
-      {children || <ChevronDownIcon />}
-    </IconButton>
-  );
-});
+const SidebarTrigger = React.forwardRef<React.ElementRef<typeof IconButton>, SidebarTriggerProps>(
+  ({ onClick, children, ...props }, forwardedRef) => {
+    const { toggleSidebar } = useSidebar();
+
+    return (
+      <IconButton
+        {...props}
+        ref={forwardedRef}
+        variant="ghost"
+        onClick={(event) => {
+          onClick?.(event);
+          toggleSidebar();
+        }}
+      >
+        {children || <ChevronDownIcon />}
+      </IconButton>
+    );
+  },
+);
 SidebarTrigger.displayName = 'Sidebar.Trigger';
 
 // Removed SidebarInset - not needed
@@ -384,12 +420,8 @@ interface SidebarMenuProps extends React.ComponentPropsWithoutRef<'ul'> {}
 
 const SidebarMenu = React.forwardRef<HTMLUListElement, SidebarMenuProps>(
   ({ className, ...props }, forwardedRef) => (
-    <ul
-      {...props}
-      ref={forwardedRef}
-      className={classNames('rt-SidebarMenu', className)}
-    />
-  )
+    <ul {...props} ref={forwardedRef} className={classNames('rt-SidebarMenu', className)} />
+  ),
 );
 SidebarMenu.displayName = 'Sidebar.Menu';
 
@@ -397,34 +429,44 @@ interface SidebarMenuItemProps extends React.ComponentPropsWithoutRef<'li'> {}
 
 const SidebarMenuItem = React.forwardRef<HTMLLIElement, SidebarMenuItemProps>(
   ({ className, ...props }, forwardedRef) => (
-    <li
-      {...props}
-      ref={forwardedRef}
-      className={classNames('rt-SidebarMenuItem', className)}
-    />
-  )
+    <li {...props} ref={forwardedRef} className={classNames('rt-SidebarMenuItem', className)} />
+  ),
 );
 SidebarMenuItem.displayName = 'Sidebar.MenuItem';
 
 interface SidebarMenuButtonProps extends React.ComponentPropsWithoutRef<'button'> {
   asChild?: boolean;
   isActive?: boolean;
+  shortcut?: React.ReactNode;
+  badge?: string | BadgeConfig;
 }
 
 const SidebarMenuButton = React.forwardRef<HTMLButtonElement, SidebarMenuButtonProps>(
-  ({ asChild = false, isActive = false, className, onMouseEnter, onMouseLeave, ...props }, forwardedRef) => {
+  (
+    {
+      asChild = false,
+      isActive = false,
+      shortcut,
+      badge,
+      className,
+      children,
+      onMouseEnter,
+      onMouseLeave,
+      ...props
+    },
+    forwardedRef,
+  ) => {
     const [isHighlighted, setIsHighlighted] = React.useState(false);
+    const context = React.useContext(SidebarContext);
+    const { size: sidebarSize = '2' } = context || {};
+
     const Comp = asChild ? Slot : 'button';
-    
+
     return (
       <Comp
         {...props}
         ref={forwardedRef}
-        className={classNames(
-          'rt-reset',
-          'rt-SidebarMenuButton',
-          className
-        )}
+        className={classNames('rt-reset', 'rt-SidebarMenuButton', className)}
         data-active={isActive || undefined}
         data-highlighted={isHighlighted || undefined}
         onMouseEnter={(event) => {
@@ -435,9 +477,42 @@ const SidebarMenuButton = React.forwardRef<HTMLButtonElement, SidebarMenuButtonP
           setIsHighlighted(false);
           onMouseLeave?.(event);
         }}
-      />
+      >
+        {asChild ? (
+          children
+        ) : (
+          <>
+            {children}
+            {/* Badge with soft variant default and size mapping to sidebar size */}
+            {badge && (
+              <div className="rt-SidebarMenuBadge">
+                {typeof badge === 'string' ? (
+                  <Badge size={sidebarSize} variant="soft">
+                    {badge}
+                  </Badge>
+                ) : (
+                  <Badge
+                    size={badge.size || sidebarSize}
+                    variant={badge.variant || 'soft'}
+                    color={badge.color}
+                    highContrast={badge.highContrast}
+                    radius={badge.radius}
+                  >
+                    {badge.content}
+                  </Badge>
+                )}
+              </div>
+            )}
+            {shortcut && (
+              <div className="rt-BaseMenuShortcut rt-SidebarMenuShortcut">
+                <Kbd size={sidebarSize}>{shortcut}</Kbd>
+              </div>
+            )}
+          </>
+        )}
+      </Comp>
     );
-  }
+  },
 );
 SidebarMenuButton.displayName = 'Sidebar.MenuButton';
 
@@ -450,75 +525,76 @@ const SidebarMenuSub = React.forwardRef<HTMLDivElement, SidebarMenuSubProps>(
   ({ defaultOpen = false, children, ...props }, forwardedRef) => {
     return (
       <div {...props} ref={forwardedRef}>
-        <Accordion.Root
-          type="single"
-          collapsible
-          defaultValue={defaultOpen ? 'item' : undefined}
-        >
-          <Accordion.Item value="item">
-            {children}
-          </Accordion.Item>
+        <Accordion.Root type="single" collapsible defaultValue={defaultOpen ? 'item' : undefined}>
+          <Accordion.Item value="item">{children}</Accordion.Item>
         </Accordion.Root>
       </div>
     );
-  }
+  },
 );
 SidebarMenuSub.displayName = 'Sidebar.MenuSub';
 
-interface SidebarMenuSubTriggerProps extends React.ComponentPropsWithoutRef<typeof Accordion.Trigger> {
+interface SidebarMenuSubTriggerProps
+  extends React.ComponentPropsWithoutRef<typeof Accordion.Trigger> {
   asChild?: boolean;
 }
 
 const SidebarMenuSubTrigger = React.forwardRef<
   React.ElementRef<typeof Accordion.Trigger>,
   SidebarMenuSubTriggerProps
->(({ asChild = false, className, children, onMouseEnter, onMouseLeave, ...props }, forwardedRef) => {
-  const [isHighlighted, setIsHighlighted] = React.useState(false);
-  
-  return (
-    <Accordion.Header asChild>
-      <div>
-        <Accordion.Trigger
-          {...props}
-          ref={forwardedRef}
-          asChild={asChild}
-          className={classNames(
-            'rt-reset',
-            'rt-SidebarMenuButton',
-            'rt-SidebarMenuSubTrigger',
-            className
-          )}
-          data-highlighted={isHighlighted || undefined}
-          onMouseEnter={(event) => {
-            setIsHighlighted(true);
-            onMouseEnter?.(event);
-          }}
-          onMouseLeave={(event) => {
-            setIsHighlighted(false);
-            onMouseLeave?.(event);
-          }}
-        >
-          {asChild ? (
-            children
-          ) : (
-            <>
-              {children}
-              <ThickChevronRightIcon 
-                className={classNames(
-                  'rt-BaseMenuSubTriggerIcon',
-                  'rt-SidebarMenuSubTriggerIcon'
-                )}
-              />
-            </>
-          )}
-        </Accordion.Trigger>
-      </div>
-    </Accordion.Header>
-  );
-});
+>(
+  (
+    { asChild = false, className, children, onMouseEnter, onMouseLeave, ...props },
+    forwardedRef,
+  ) => {
+    const [isHighlighted, setIsHighlighted] = React.useState(false);
+
+    return (
+      <Accordion.Header asChild>
+        <div>
+          <Accordion.Trigger
+            {...props}
+            ref={forwardedRef}
+            asChild={asChild}
+            className={classNames(
+              'rt-reset',
+              'rt-SidebarMenuButton',
+              'rt-SidebarMenuSubTrigger',
+              className,
+            )}
+            data-highlighted={isHighlighted || undefined}
+            onMouseEnter={(event) => {
+              setIsHighlighted(true);
+              onMouseEnter?.(event);
+            }}
+            onMouseLeave={(event) => {
+              setIsHighlighted(false);
+              onMouseLeave?.(event);
+            }}
+          >
+            {asChild ? (
+              children
+            ) : (
+              <>
+                {children}
+                <ThickChevronRightIcon
+                  className={classNames(
+                    'rt-BaseMenuSubTriggerIcon',
+                    'rt-SidebarMenuSubTriggerIcon',
+                  )}
+                />
+              </>
+            )}
+          </Accordion.Trigger>
+        </div>
+      </Accordion.Header>
+    );
+  },
+);
 SidebarMenuSubTrigger.displayName = 'Sidebar.MenuSubTrigger';
 
-interface SidebarMenuSubContentProps extends React.ComponentPropsWithoutRef<typeof Accordion.Content> {}
+interface SidebarMenuSubContentProps
+  extends React.ComponentPropsWithoutRef<typeof Accordion.Content> {}
 
 const SidebarMenuSubContent = React.forwardRef<
   React.ElementRef<typeof Accordion.Content>,
@@ -530,9 +606,7 @@ const SidebarMenuSubContent = React.forwardRef<
       ref={forwardedRef}
       className={classNames('rt-SidebarMenuSubContent', className)}
     >
-      <div className="rt-SidebarMenuSubList">
-        {children}
-      </div>
+      <div className="rt-SidebarMenuSubList">{children}</div>
     </Accordion.Content>
   );
 });
@@ -543,12 +617,8 @@ interface SidebarGroupProps extends React.ComponentPropsWithoutRef<'div'> {}
 
 const SidebarGroup = React.forwardRef<HTMLDivElement, SidebarGroupProps>(
   ({ className, ...props }, forwardedRef) => (
-    <div
-      {...props}
-      ref={forwardedRef}
-      className={classNames('rt-SidebarGroup', className)}
-    />
-  )
+    <div {...props} ref={forwardedRef} className={classNames('rt-SidebarGroup', className)} />
+  ),
 );
 SidebarGroup.displayName = 'Sidebar.Group';
 
@@ -559,7 +629,7 @@ interface SidebarGroupLabelProps extends React.ComponentPropsWithoutRef<'div'> {
 const SidebarGroupLabel = React.forwardRef<HTMLDivElement, SidebarGroupLabelProps>(
   ({ asChild = false, className, ...props }, forwardedRef) => {
     const Comp = asChild ? Slot : 'div';
-    
+
     return (
       <Comp
         {...props}
@@ -567,7 +637,7 @@ const SidebarGroupLabel = React.forwardRef<HTMLDivElement, SidebarGroupLabelProp
         className={classNames('rt-SidebarGroupLabel', className)}
       />
     );
-  }
+  },
 );
 SidebarGroupLabel.displayName = 'Sidebar.GroupLabel';
 
@@ -580,7 +650,7 @@ const SidebarGroupContent = React.forwardRef<HTMLDivElement, SidebarGroupContent
       ref={forwardedRef}
       className={classNames('rt-SidebarGroupContent', className)}
     />
-  )
+  ),
 );
 SidebarGroupContent.displayName = 'Sidebar.GroupContent';
 
@@ -608,13 +678,13 @@ export {
 
 /**
  * Enhanced Sidebar Header and Footer Usage Examples:
- * 
+ *
  * 1. Simple default container (backwards compatible):
  * <Sidebar.Header>
  *   <Logo />
  *   <span>App Name</span>
  * </Sidebar.Header>
- * 
+ *
  * 2. Custom flex layout:
  * <Sidebar.Header className="rt-justify-between rt-gap-3">
  *   <Logo />
@@ -622,7 +692,7 @@ export {
  *     <SettingsIcon />
  *   </Sidebar.MenuButton>
  * </Sidebar.Header>
- * 
+ *
  * 3. Column layout for multiple rows:
  * <Sidebar.Header className="rt-flex-col rt-gap-2" asContainer={false}>
  *   <div className="rt-flex rt-items-center rt-gap-2">
@@ -634,7 +704,7 @@ export {
  *     <span>John Doe</span>
  *   </Sidebar.MenuButton>
  * </Sidebar.Header>
- * 
+ *
  * 4. Interactive footer with menu button:
  * <Sidebar.Footer>
  *   <Sidebar.MenuButton>
@@ -643,7 +713,7 @@ export {
  *     <ChevronUpIcon />
  *   </Sidebar.MenuButton>
  * </Sidebar.Footer>
- * 
+ *
  * 5. Custom footer layout:
  * <Sidebar.Footer className="rt-justify-between">
  *   <span>v1.0.0</span>
@@ -651,7 +721,7 @@ export {
  *     <HelpIcon />
  *   </Sidebar.MenuButton>
  * </Sidebar.Footer>
- * 
+ *
  * Available utility classes:
  * - Layout: rt-flex-row, rt-flex-col
  * - Alignment: rt-items-center, rt-items-start, rt-items-end
@@ -666,4 +736,5 @@ export type {
   SidebarHeaderProps as HeaderProps,
   SidebarFooterProps as FooterProps,
   SidebarTriggerProps as TriggerProps,
-}; 
+  BadgeConfig,
+};