@neynar/ui 0.1.1 → 0.1.2

package/src/components/ui/sidebar.tsx

@@ -31,6 +31,366 @@ const SIDEBAR_WIDTH_MOBILE = "18rem";
 const SIDEBAR_WIDTH_ICON = "3rem";
 const SIDEBAR_KEYBOARD_SHORTCUT = "b";
 
+/**
+ * Context props for sidebar state management (Documentation only - NOT used in component implementation)
+ * These types are for documentation generation and should not replace inferred context types
+ */
+// eslint-disable-next-line unused-imports/no-unused-vars
+type SidebarContextDocsProps = {
+  /** Current visual state of the sidebar */
+  state: "expanded" | "collapsed";
+  /** Whether sidebar is open on desktop */
+  open: boolean;
+  /** Function to control desktop sidebar open state */
+  setOpen: (open: boolean) => void;
+  /** Whether sidebar is open on mobile (sheet overlay) */
+  openMobile: boolean;
+  /** Function to control mobile sidebar open state */
+  setOpenMobile: (open: boolean) => void;
+  /** Whether current viewport is considered mobile */
+  isMobile: boolean;
+  /** Function to toggle sidebar state (responsive) */
+  toggleSidebar: () => void;
+};
+
+/**
+ * Props for SidebarProvider component (Documentation only - NOT used in component implementation)
+ * These types are for documentation generation and should not replace React.ComponentProps inferred types
+ */
+// eslint-disable-next-line unused-imports/no-unused-vars
+type SidebarProviderDocsProps = {
+  /** Initial open state when uncontrolled @default true */
+  defaultOpen?: boolean;
+  /** Controlled open state (makes component controlled) */
+  open?: boolean;
+  /** Callback fired when open state changes */
+  onOpenChange?: (open: boolean) => void;
+  /** Child components */
+  children?: React.ReactNode;
+} & React.ComponentProps<"div">;
+
+/**
+ * Props for Sidebar component (Documentation only - NOT used in component implementation)
+ * These types are for documentation generation and should not replace React.ComponentProps inferred types
+ */
+// eslint-disable-next-line unused-imports/no-unused-vars
+type SidebarDocsProps = {
+  /**
+   * Which side of the screen the sidebar appears on @default "left"
+   *
+   * Controls the horizontal positioning and slide direction of the sidebar.
+   * Affects the direction of collapse animations and the positioning of
+   * the interactive rail component.
+   */
+  side?: "left" | "right";
+  /** Visual appearance variant @default "sidebar" */
+  variant?: "sidebar" | "floating" | "inset";
+  /** Collapse behavior mode @default "offcanvas" */
+  collapsible?: "offcanvas" | "icon" | "none";
+  /** Additional CSS classes */
+  className?: string;
+  /** Sidebar content components */
+  children?: React.ReactNode;
+} & React.ComponentProps<"div">;
+
+/**
+ * Props for SidebarTrigger component (Documentation only - NOT used in component implementation)
+ * These types are for documentation generation and should not replace React.ComponentProps inferred types
+ */
+// eslint-disable-next-line unused-imports/no-unused-vars
+type SidebarTriggerDocsProps = {
+  /** Additional CSS classes */
+  className?: string;
+  /** Additional click handler called before toggle */
+  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+} & Omit<React.ComponentProps<typeof Button>, "onClick">;
+
+/**
+ * Props for SidebarRail component (Documentation only - NOT used in component implementation)
+ * These types are for documentation generation and should not replace React.ComponentProps inferred types
+ */
+// eslint-disable-next-line unused-imports/no-unused-vars
+type SidebarRailDocsProps = {
+  /** Additional CSS classes */
+  className?: string;
+} & React.ComponentProps<"button">;
+
+/**
+ * Props for SidebarInset component (Documentation only - NOT used in component implementation)
+ * These types are for documentation generation and should not replace React.ComponentProps inferred types
+ */
+// eslint-disable-next-line unused-imports/no-unused-vars
+type SidebarInsetDocsProps = {
+  /** Additional CSS classes */
+  className?: string;
+} & React.ComponentProps<"main">;
+
+/**
+ * Props for SidebarInput component (Documentation only - NOT used in component implementation)
+ * These types are for documentation generation and should not replace React.ComponentProps inferred types
+ */
+// eslint-disable-next-line unused-imports/no-unused-vars
+type SidebarInputDocsProps = {
+  /** Additional CSS classes */
+  className?: string;
+} & React.ComponentProps<typeof Input>;
+
+/**
+ * Props for SidebarHeader component (Documentation only - NOT used in component implementation)
+ * These types are for documentation generation and should not replace React.ComponentProps inferred types
+ */
+// eslint-disable-next-line unused-imports/no-unused-vars
+type SidebarHeaderDocsProps = {
+  /** Additional CSS classes */
+  className?: string;
+} & React.ComponentProps<"div">;
+
+/**
+ * Props for SidebarFooter component (Documentation only - NOT used in component implementation)
+ * These types are for documentation generation and should not replace React.ComponentProps inferred types
+ */
+// eslint-disable-next-line unused-imports/no-unused-vars
+type SidebarFooterDocsProps = {
+  /** Additional CSS classes */
+  className?: string;
+} & React.ComponentProps<"div">;
+
+/**
+ * Props for SidebarSeparator component (Documentation only - NOT used in component implementation)
+ * These types are for documentation generation and should not replace React.ComponentProps inferred types
+ */
+// eslint-disable-next-line unused-imports/no-unused-vars
+type SidebarSeparatorDocsProps = {
+  /** Additional CSS classes */
+  className?: string;
+} & React.ComponentProps<typeof Separator>;
+
+/**
+ * Props for SidebarContent component (Documentation only - NOT used in component implementation)
+ * These types are for documentation generation and should not replace React.ComponentProps inferred types
+ */
+// eslint-disable-next-line unused-imports/no-unused-vars
+type SidebarContentDocsProps = {
+  /** Additional CSS classes */
+  className?: string;
+} & React.ComponentProps<"div">;
+
+/**
+ * Props for SidebarGroup component (Documentation only - NOT used in component implementation)
+ * These types are for documentation generation and should not replace React.ComponentProps inferred types
+ */
+// eslint-disable-next-line unused-imports/no-unused-vars
+type SidebarGroupDocsProps = {
+  /** Additional CSS classes */
+  className?: string;
+} & React.ComponentProps<"div">;
+
+/**
+ * Props for SidebarGroupLabel component (Documentation only - NOT used in component implementation)
+ * These types are for documentation generation and should not replace React.ComponentProps inferred types
+ */
+// eslint-disable-next-line unused-imports/no-unused-vars
+type SidebarGroupLabelDocsProps = {
+  /** Additional CSS classes */
+  className?: string;
+  /**
+   * Render as child element using Radix UI Slot composition pattern @default false
+   *
+   * When true, the component will not render its default element,
+   * instead merging its props with its immediate child. This enables
+   * composition with custom elements (like Link components) while
+   * preserving the component's behavior and styling.
+   */
+  asChild?: boolean;
+} & React.ComponentProps<"div">;
+
+/**
+ * Props for SidebarGroupAction component (Documentation only - NOT used in component implementation)
+ * These types are for documentation generation and should not replace React.ComponentProps inferred types
+ */
+// eslint-disable-next-line unused-imports/no-unused-vars
+type SidebarGroupActionDocsProps = {
+  /** Additional CSS classes */
+  className?: string;
+  /**
+   * Render as child element using Radix UI Slot composition pattern @default false
+   *
+   * When true, the component will not render its default element,
+   * instead merging its props with its immediate child. This enables
+   * composition with custom elements (like Link components) while
+   * preserving the component's behavior and styling.
+   */
+  asChild?: boolean;
+} & React.ComponentProps<"button">;
+
+/**
+ * Props for SidebarGroupContent component (Documentation only - NOT used in component implementation)
+ * These types are for documentation generation and should not replace React.ComponentProps inferred types
+ */
+// eslint-disable-next-line unused-imports/no-unused-vars
+type SidebarGroupContentDocsProps = {
+  /** Additional CSS classes */
+  className?: string;
+} & React.ComponentProps<"div">;
+
+/**
+ * Props for SidebarMenu component (Documentation only - NOT used in component implementation)
+ * These types are for documentation generation and should not replace React.ComponentProps inferred types
+ */
+// eslint-disable-next-line unused-imports/no-unused-vars
+type SidebarMenuDocsProps = {
+  /** Additional CSS classes */
+  className?: string;
+} & React.ComponentProps<"ul">;
+
+/**
+ * Props for SidebarMenuItem component (Documentation only - NOT used in component implementation)
+ * These types are for documentation generation and should not replace React.ComponentProps inferred types
+ */
+// eslint-disable-next-line unused-imports/no-unused-vars
+type SidebarMenuItemDocsProps = {
+  /** Additional CSS classes */
+  className?: string;
+} & React.ComponentProps<"li">;
+
+/**
+ * Props for SidebarMenuButton component (Documentation only - NOT used in component implementation)
+ * These types are for documentation generation and should not replace React.ComponentProps inferred types
+ */
+// eslint-disable-next-line unused-imports/no-unused-vars
+type SidebarMenuButtonDocsProps = {
+  /**
+   * Render as child element using Radix UI Slot composition pattern @default false
+   *
+   * When true, the component will not render its default element,
+   * instead merging its props with its immediate child. This enables
+   * composition with custom elements (like Link components) while
+   * preserving the component's behavior and styling.
+   */
+  asChild?: boolean;
+  /** Whether this menu item is currently active @default false */
+  isActive?: boolean;
+  /** Visual appearance variant @default "default" */
+  variant?: "default" | "outline";
+  /** Button size variant @default "default" */
+  size?: "default" | "sm" | "lg";
+  /**
+   * Tooltip content shown when sidebar is collapsed to icon mode
+   *
+   * Can be either a string for simple text or a full TooltipContent props object
+   * for advanced configuration. Tooltip is automatically shown/hidden based on
+   * sidebar state and is never displayed on mobile devices.
+   *
+   * @example Simple string tooltip
+   * ```tsx
+   * <SidebarMenuButton tooltip=\"Dashboard\">
+   *   <Home />Dashboard
+   * </SidebarMenuButton>
+   * ```
+   *
+   * @example Advanced tooltip with props
+   * ```tsx
+   * <SidebarMenuButton tooltip={{
+   *   children: \"Go to Dashboard\",
+   *   side: \"right\",
+   *   sideOffset: 10
+   * }}>
+   *   <Home />Dashboard
+   * </SidebarMenuButton>
+   * ```
+   */
+  tooltip?: string | React.ComponentProps<typeof TooltipContent>;
+  /** Additional CSS classes */
+  className?: string;
+} & React.ComponentProps<"button">;
+
+/**
+ * Props for SidebarMenuAction component (Documentation only - NOT used in component implementation)
+ * These types are for documentation generation and should not replace React.ComponentProps inferred types
+ */
+// eslint-disable-next-line unused-imports/no-unused-vars
+type SidebarMenuActionDocsProps = {
+  /** Additional CSS classes */
+  className?: string;
+  /**
+   * Render as child element using Radix UI Slot composition pattern @default false
+   *
+   * When true, the component will not render its default element,
+   * instead merging its props with its immediate child. This enables
+   * composition with custom elements (like Link components) while
+   * preserving the component's behavior and styling.
+   */
+  asChild?: boolean;
+  /** Only show button on menu item hover @default false */
+  showOnHover?: boolean;
+} & React.ComponentProps<"button">;
+
+/**
+ * Props for SidebarMenuBadge component (Documentation only - NOT used in component implementation)
+ * These types are for documentation generation and should not replace React.ComponentProps inferred types
+ */
+// eslint-disable-next-line unused-imports/no-unused-vars
+type SidebarMenuBadgeDocsProps = {
+  /** Additional CSS classes */
+  className?: string;
+} & React.ComponentProps<"div">;
+
+/**
+ * Props for SidebarMenuSkeleton component (Documentation only - NOT used in component implementation)
+ * These types are for documentation generation and should not replace React.ComponentProps inferred types
+ */
+// eslint-disable-next-line unused-imports/no-unused-vars
+type SidebarMenuSkeletonDocsProps = {
+  /** Additional CSS classes */
+  className?: string;
+  /** Whether to show icon placeholder @default false */
+  showIcon?: boolean;
+} & React.ComponentProps<"div">;
+
+/**
+ * Props for SidebarMenuSub component (Documentation only - NOT used in component implementation)
+ * These types are for documentation generation and should not replace React.ComponentProps inferred types
+ */
+// eslint-disable-next-line unused-imports/no-unused-vars
+type SidebarMenuSubDocsProps = {
+  /** Additional CSS classes */
+  className?: string;
+} & React.ComponentProps<"ul">;
+
+/**
+ * Props for SidebarMenuSubItem component (Documentation only - NOT used in component implementation)
+ * These types are for documentation generation and should not replace React.ComponentProps inferred types
+ */
+// eslint-disable-next-line unused-imports/no-unused-vars
+type SidebarMenuSubItemDocsProps = {
+  /** Additional CSS classes */
+  className?: string;
+} & React.ComponentProps<"li">;
+
+/**
+ * Props for SidebarMenuSubButton component (Documentation only - NOT used in component implementation)
+ * These types are for documentation generation and should not replace React.ComponentProps inferred types
+ */
+// eslint-disable-next-line unused-imports/no-unused-vars
+type SidebarMenuSubButtonDocsProps = {
+  /**
+   * Render as child element using Radix UI Slot composition pattern @default false
+   *
+   * When true, the component will not render its default element,
+   * instead merging its props with its immediate child. This enables
+   * composition with custom elements (like Link components) while
+   * preserving the component's behavior and styling.
+   */
+  asChild?: boolean;
+  /** Button size variant @default "md" */
+  size?: "sm" | "md";
+  /** Whether this submenu item is currently active @default false */
+  isActive?: boolean;
+  /** Additional CSS classes */
+  className?: string;
+} & React.ComponentProps<"a">;
+
+// Internal context type (inferred from implementation)
 type SidebarContextProps = {
   state: "expanded" | "collapsed";
   open: boolean;
@@ -175,11 +535,12 @@ function SidebarProvider({
   style,
   children,
   ...props
-}: React.ComponentProps<"div"> & {
+}: {
   defaultOpen?: boolean;
   open?: boolean;
   onOpenChange?: (open: boolean) => void;
-}) {
+  children?: React.ReactNode;
+} & React.ComponentProps<"div">) {
   const isMobile = useIsMobile();
   const [openMobile, setOpenMobile] = React.useState(false);
 
@@ -394,11 +755,13 @@ function Sidebar({
   className,
   children,
   ...props
-}: React.ComponentProps<"div"> & {
+}: {
   side?: "left" | "right";
   variant?: "sidebar" | "floating" | "inset";
   collapsible?: "offcanvas" | "icon" | "none";
-}) {
+  className?: string;
+  children?: React.ReactNode;
+} & React.ComponentProps<"div">) {
   const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
 
   if (collapsible === "none") {
@@ -536,7 +899,10 @@ function SidebarTrigger({
   className,
   onClick,
   ...props
-}: React.ComponentProps<typeof Button>) {
+}: {
+  className?: string;
+  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+} & Omit<React.ComponentProps<typeof Button>, "onClick">) {
   const { toggleSidebar } = useSidebar();
 
   return (
@@ -590,7 +956,12 @@ function SidebarTrigger({
  * @see {@link SidebarTrigger} - Alternative toggle button
  * @since 1.0.0
  */
-function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
+function SidebarRail({
+  className,
+  ...props
+}: {
+  className?: string;
+} & React.ComponentProps<"button">) {
   const { toggleSidebar } = useSidebar();
 
   return (
@@ -666,7 +1037,12 @@ function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
  * @see {@link SidebarProvider} - Required context provider
  * @since 1.0.0
  */
-function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
+function SidebarInset({
+  className,
+  ...props
+}: {
+  className?: string;
+} & React.ComponentProps<"main">) {
   return (
     <main
       data-slot="sidebar-inset"
@@ -725,7 +1101,9 @@ function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
 function SidebarInput({
   className,
   ...props
-}: React.ComponentProps<typeof Input>) {
+}: {
+  className?: string;
+} & React.ComponentProps<typeof Input>) {
   return (
     <Input
       data-slot="sidebar-input"
@@ -797,7 +1175,12 @@ function SidebarInput({
  * @see {@link SidebarContent} - Main scrollable content area
  * @since 1.0.0
  */
-function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {
+function SidebarHeader({
+  className,
+  ...props
+}: {
+  className?: string;
+} & React.ComponentProps<"div">) {
   return (
     <div
       data-slot="sidebar-header"
@@ -860,7 +1243,12 @@ function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {
  * @see {@link SidebarContent} - Main content area
  * @since 1.0.0
  */
-function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
+function SidebarFooter({
+  className,
+  ...props
+}: {
+  className?: string;
+} & React.ComponentProps<"div">) {
   return (
     <div
       data-slot="sidebar-footer"
@@ -925,7 +1313,9 @@ function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
 function SidebarSeparator({
   className,
   ...props
-}: React.ComponentProps<typeof Separator>) {
+}: {
+  className?: string;
+} & React.ComponentProps<typeof Separator>) {
   return (
     <Separator
       data-slot="sidebar-separator"
@@ -1000,7 +1390,12 @@ function SidebarSeparator({
  * @see {@link SidebarMenu} - Menu container component
  * @since 1.0.0
  */
-function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
+function SidebarContent({
+  className,
+  ...props
+}: {
+  className?: string;
+} & React.ComponentProps<"div">) {
   return (
     <div
       data-slot="sidebar-content"
@@ -1064,7 +1459,12 @@ function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
  * @see {@link SidebarGroupContent} - Group content container
  * @since 1.0.0
  */
-function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
+function SidebarGroup({
+  className,
+  ...props
+}: {
+  className?: string;
+} & React.ComponentProps<"div">) {
   return (
     <div
       data-slot="sidebar-group"
@@ -1126,7 +1526,10 @@ function SidebarGroupLabel({
   className,
   asChild = false,
   ...props
-}: React.ComponentProps<"div"> & { asChild?: boolean }) {
+}: {
+  className?: string;
+  asChild?: boolean;
+} & React.ComponentProps<"div">) {
   const Comp = asChild ? Slot : "div";
 
   return (
@@ -1200,7 +1603,10 @@ function SidebarGroupAction({
   className,
   asChild = false,
   ...props
-}: React.ComponentProps<"button"> & { asChild?: boolean }) {
+}: {
+  className?: string;
+  asChild?: boolean;
+} & React.ComponentProps<"button">) {
   const Comp = asChild ? Slot : "button";
 
   return (
@@ -1279,7 +1685,9 @@ function SidebarGroupAction({
 function SidebarGroupContent({
   className,
   ...props
-}: React.ComponentProps<"div">) {
+}: {
+  className?: string;
+} & React.ComponentProps<"div">) {
   return (
     <div
       data-slot="sidebar-group-content"
@@ -1353,7 +1761,12 @@ function SidebarGroupContent({
  * @see {@link SidebarMenuButton} - Interactive menu button
  * @since 1.0.0
  */
-function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) {
+function SidebarMenu({
+  className,
+  ...props
+}: {
+  className?: string;
+} & React.ComponentProps<"ul">) {
   return (
     <ul
       data-slot="sidebar-menu"
@@ -1436,7 +1849,12 @@ function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) {
  * @see {@link SidebarMenuBadge} - Badge indicator component
  * @since 1.0.0
  */
-function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
+function SidebarMenuItem({
+  className,
+  ...props
+}: {
+  className?: string;
+} & React.ComponentProps<"li">) {
   return (
     <li
       data-slot="sidebar-menu-item"
@@ -1447,6 +1865,16 @@ function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
   );
 }
 
+/**
+ * SidebarMenuButton variant configuration for visual appearances and sizes
+ *
+ * @variant default - Standard menu button with subtle hover states
+ * @variant outline - Button with border background that highlights on interaction
+ *
+ * @size default - Standard button height (h-8) with text-sm
+ * @size sm - Compact button height (h-7) with text-xs for dense layouts
+ * @size lg - Large button height (h-12) with text-sm, collapses to icon padding when sidebar is collapsed
+ */
 const sidebarMenuButtonVariants = cva(
   "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] 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 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
   {
@@ -1573,11 +2001,13 @@ function SidebarMenuButton({
   tooltip,
   className,
   ...props
-}: React.ComponentProps<"button"> & {
+}: {
   asChild?: boolean;
   isActive?: boolean;
   tooltip?: string | React.ComponentProps<typeof TooltipContent>;
-} & VariantProps<typeof sidebarMenuButtonVariants>) {
+  className?: string;
+} & VariantProps<typeof sidebarMenuButtonVariants> &
+  React.ComponentProps<"button">) {
   const Comp = asChild ? Slot : "button";
   const { isMobile, state } = useSidebar();
 
@@ -1694,10 +2124,11 @@ function SidebarMenuAction({
   asChild = false,
   showOnHover = false,
   ...props
-}: React.ComponentProps<"button"> & {
+}: {
+  className?: string;
   asChild?: boolean;
   showOnHover?: boolean;
-}) {
+} & React.ComponentProps<"button">) {
   const Comp = asChild ? Slot : "button";
 
   return (
@@ -1789,7 +2220,9 @@ function SidebarMenuAction({
 function SidebarMenuBadge({
   className,
   ...props
-}: React.ComponentProps<"div">) {
+}: {
+  className?: string;
+} & React.ComponentProps<"div">) {
   return (
     <div
       data-slot="sidebar-menu-badge"
@@ -1884,9 +2317,10 @@ function SidebarMenuSkeleton({
   className,
   showIcon = false,
   ...props
-}: React.ComponentProps<"div"> & {
+}: {
+  className?: string;
   showIcon?: boolean;
-}) {
+} & React.ComponentProps<"div">) {
   // Random width between 50 to 90%.
   const width = `${Math.floor(Math.random() * 40) + 50}%`;
 
@@ -1995,7 +2429,12 @@ function SidebarMenuSkeleton({
  * @see {@link SidebarMenuItem} - Parent menu item
  * @since 1.0.0
  */
-function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
+function SidebarMenuSub({
+  className,
+  ...props
+}: {
+  className?: string;
+} & React.ComponentProps<"ul">) {
   return (
     <ul
       data-slot="sidebar-menu-sub"
@@ -2059,7 +2498,9 @@ function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
 function SidebarMenuSubItem({
   className,
   ...props
-}: React.ComponentProps<"li">) {
+}: {
+  className?: string;
+} & React.ComponentProps<"li">) {
   return (
     <li
       data-slot="sidebar-menu-sub-item"
@@ -2157,11 +2598,12 @@ function SidebarMenuSubButton({
   isActive = false,
   className,
   ...props
-}: React.ComponentProps<"a"> & {
+}: {
   asChild?: boolean;
   size?: "sm" | "md";
   isActive?: boolean;
-}) {
+  className?: string;
+} & React.ComponentProps<"a">) {
   const Comp = asChild ? Slot : "a";
 
   return (