@dilipod/ui 0.4.35 → 0.4.36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dilipod/ui",
-  "version": "0.4.35",
+  "version": "0.4.36",
   "description": "Dilipod Design System - Shared UI components and styles",
   "author": "Dilipod <hello@dilipod.com>",
   "license": "MIT",

package/src/components/sidebar.tsx

@@ -25,9 +25,10 @@ export interface SidebarProps extends React.HTMLAttributes<HTMLElement> {
   }
   /** Optional help/support link */
   helpLink?: {
-    href: string
+    href?: string
     label?: string
     icon?: React.ComponentType<React.SVGProps<SVGSVGElement> & { weight?: 'fill' | 'regular' }>
+    onClick?: () => void
   }
   /** Optional assistant button configuration */
   assistantButton?: {
@@ -196,15 +197,28 @@ const Sidebar = React.forwardRef<HTMLElement, SidebarProps>(
               </button>
             )}
             {helpLink && (
-              <a
-                href={helpLink.href}
-                className="flex items-center gap-3 rounded-sm px-3 py-2 text-sm text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-colors"
-              >
-                {helpLink.icon && (
-                  <helpLink.icon className="h-4 w-4" />
-                )}
-                {helpLink.label}
-              </a>
+              helpLink.onClick ? (
+                <button
+                  type="button"
+                  onClick={helpLink.onClick}
+                  className="flex w-full items-center gap-3 rounded-sm px-3 py-2 text-sm text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-colors"
+                >
+                  {helpLink.icon && (
+                    <helpLink.icon className="h-4 w-4" />
+                  )}
+                  {helpLink.label}
+                </button>
+              ) : (
+                <a
+                  href={helpLink.href}
+                  className="flex items-center gap-3 rounded-sm px-3 py-2 text-sm text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-colors"
+                >
+                  {helpLink.icon && (
+                    <helpLink.icon className="h-4 w-4" />
+                  )}
+                  {helpLink.label}
+                </a>
+              )
             )}
           </div>
         )}