@docubook/create 1.16.1 → 2.0.0-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docubook/create",
-  "version": "1.16.1",
+  "version": "2.0.0-beta.2",
   "description": "CLI to create DocuBook projects",
   "main": "src/index.js",
   "type": "module",

package/src/dist/app/docs/[[...slug]]/page.tsx

@@ -12,13 +12,19 @@ import MobToc from "@/components/mob-toc";
 const { meta } = docuConfig;
 
 type PageProps = {
-  params: {
+  params: Promise<{
     slug: string[];
-  };
+  }>;
 };
 
 // Function to generate metadata dynamically
-export async function generateMetadata({ params: { slug = [] } }: PageProps) {
+export async function generateMetadata(props: PageProps) {
+  const params = await props.params;
+
+  const {
+    slug = []
+  } = params;
+
   const pathName = slug.join("/");
   const res = await getDocsForSlug(pathName);
 
@@ -62,7 +68,13 @@ export async function generateMetadata({ params: { slug = [] } }: PageProps) {
   };
 }
 
-export default async function DocsPage({ params: { slug = [] } }: PageProps) {
+export default async function DocsPage(props: PageProps) {
+  const params = await props.params;
+
+  const {
+    slug = []
+  } = params;
+
   const pathName = slug.join("/");
   const res = await getDocsForSlug(pathName);
 
@@ -85,17 +97,16 @@ export default async function DocsPage({ params: { slug = [] } }: PageProps) {
           <p className="-mt-4 text-muted-foreground text-[16.5px]">{description}</p>
           <div>{res.content}</div>
           <div
-            className={`my-8 flex items-center border-b-2 border-dashed border-x-muted-foreground ${
-                docuConfig.repository?.editLink ? "justify-between" : "justify-end"
-            }`}
-            >
+            className={`my-8 flex items-center border-b-2 border-dashed border-x-muted-foreground ${docuConfig.repository?.editLink ? "justify-between" : "justify-end"
+              }`}
+          >
             {docuConfig.repository?.editLink && <EditThisPage filePath={filePath} />}
             {date && (
-                <p className="text-[13px] text-muted-foreground">
+              <p className="text-[13px] text-muted-foreground">
                 Published on {formatDate2(date)}
-                </p>
+              </p>
             )}
-            </div>
+          </div>
           <Pagination pathname={pathName} />
         </Typography>
       </div>

package/src/dist/app/layout.tsx

@@ -6,6 +6,9 @@ import { GeistMono } from "geist/font/mono";
 import { Footer } from "@/components/footer";
 import docuConfig from "@/docu.json";
 import { Toaster } from "@/components/ui/sonner";
+import "@docsearch/css";
+import "@/styles/algolia.css";
+import "@/styles/syntax.css";
 import "@/styles/globals.css";
 
 const { meta } = docuConfig;

package/src/dist/app/page.tsx

@@ -25,21 +25,21 @@ export default function Home() {
             )}
           >
             <AnimatedShinyText className="inline-flex items-center justify-center px-4 py-1 transition ease-out hover:text-neutral-100 hover:duration-300 hover:dark:text-neutral-200">
-              <span>🚀 New Version - Release v1.16.1</span>
+              <span>🚀 Release v2.0.0-beta.2</span>
               <ArrowRightIcon className="ml-1 size-3 transition-transform duration-300 ease-in-out group-hover:translate-x-0.5" />
             </AnimatedShinyText>
           </div>
         </div>
       </Link>
-    <div className="w-full max-w-[800px] pb-8">
+      <div className="w-full max-w-[800px] pb-8">
         <h1 className="mb-4 text-2xl font-bold sm:text-5xl">DocuBook Starter Templates</h1>
         <p className="mb-8 sm:text-xl text-muted-foreground">
-            Get started by editing app/page.tsx . Save and see your changes instantly.{' '}
-            <Link className="text-primary underline" href="https://www.docubook.pro/docs/getting-started/introduction" target="_blank">
+          Get started by editing app/page.tsx . Save and see your changes instantly.{' '}
+          <Link className="text-primary underline" href="https://www.docubook.pro/docs/getting-started/introduction" target="_blank">
             Read Documentations
-            </Link>
+          </Link>
         </p>
-    </div>
+      </div>
       <div className="flex flex-row items-center gap-6 mb-10">
         <Link
           href={`/docs${page_routes[0].href}`}

package/src/dist/components/SearchModal.tsx

@@ -50,6 +50,7 @@ export function SearchModal({ isOpen, setIsOpen }: SearchModalProps) {
 
   useEffect(() => {
     if (!isOpen) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
       setSearchedInput("");
     }
   }, [isOpen]);
@@ -71,9 +72,9 @@ export function SearchModal({ isOpen, setIsOpen }: SearchModalProps) {
     return advanceSearch(trimmedInput) as unknown as SearchResult[];
   }, [searchedInput]);
 
-  useEffect(() => {
-    setSelectedIndex(0);
-  }, [filteredResults]);
+  // useEffect(() => {
+  //   setSelectedIndex(0);
+  // }, [filteredResults]);
 
   useEffect(() => {
     const handleNavigation = (event: KeyboardEvent) => {
@@ -114,10 +115,13 @@ export function SearchModal({ isOpen, setIsOpen }: SearchModalProps) {
         <DialogTitle className="sr-only">Search Documentation</DialogTitle>
         <DialogDescription className="sr-only">Search through the documentation</DialogDescription>
       </DialogHeader>
-      
+
       <input
         value={searchedInput}
-        onChange={(e) => setSearchedInput(e.target.value)}
+        onChange={(e) => {
+          setSearchedInput(e.target.value);
+          setSelectedIndex(0);
+        }}
         placeholder="Type something to search..."
         autoFocus
         className="h-14 px-6 bg-transparent border-b text-[14px] outline-none w-full"
@@ -138,38 +142,38 @@ export function SearchModal({ isOpen, setIsOpen }: SearchModalProps) {
             const isActive = index === selectedIndex;
 
             return (
-                <DialogClose key={item.href} asChild>
-                    <Anchor
-                    ref={(el) => {
-                        itemRefs.current[index] = el as HTMLDivElement | null;
-                      }}
+              <DialogClose key={item.href} asChild>
+                <Anchor
+                  ref={(el) => {
+                    itemRefs.current[index] = el as HTMLDivElement | null;
+                  }}
+                  className={cn(
+                    "dark:hover:bg-accent/15 hover:bg-accent/10 w-full px-3 rounded-sm text-sm flex items-center gap-2.5",
+                    isActive && "bg-primary/20 dark:bg-primary/30",
+                    paddingClass
+                  )}
+                  href={`/docs${item.href}`}
+                  tabIndex={-1}
+                >
+                  <div
                     className={cn(
-                        "dark:hover:bg-accent/15 hover:bg-accent/10 w-full px-3 rounded-sm text-sm flex items-center gap-2.5",
-                        isActive && "bg-primary/20 dark:bg-primary/30",
-                        paddingClass
+                      "flex items-center w-full h-full py-3 gap-1.5 px-2 justify-between",
+                      level > 1 && "border-l pl-4"
                     )}
-                    href={`/docs${item.href}`}
-                    tabIndex={-1}
-                    >
-                    <div
-                        className={cn(
-                        "flex items-center w-full h-full py-3 gap-1.5 px-2 justify-between",
-                        level > 1 && "border-l pl-4"
-                        )}
-                    >
-                        <div className="flex items-center">
-                          <FileTextIcon className="h-[1.1rem] w-[1.1rem] mr-1" />
-                          <span>{item.title}</span>
-                        </div>
-                        {isActive && (
-                          <div className="hidden md:flex items-center text-xs text-muted-foreground">
-                            <span>Return</span>
-                            <CornerDownLeftIcon className="h-3 w-3 ml-1" />
-                          </div>
-                        )}
+                  >
+                    <div className="flex items-center">
+                      <FileTextIcon className="h-[1.1rem] w-[1.1rem] mr-1" />
+                      <span>{item.title}</span>
                     </div>
-                    </Anchor>
-                </DialogClose>
+                    {isActive && (
+                      <div className="hidden md:flex items-center text-xs text-muted-foreground">
+                        <span>Return</span>
+                        <CornerDownLeftIcon className="h-3 w-3 ml-1" />
+                      </div>
+                    )}
+                  </div>
+                </Anchor>
+              </DialogClose>
             );
           })}
         </div>
@@ -177,14 +181,14 @@ export function SearchModal({ isOpen, setIsOpen }: SearchModalProps) {
       <DialogFooter className="md:flex md:justify-start hidden h-14 px-6 bg-transparent border-t text-[14px] outline-none">
         <div className="flex items-center gap-2">
           <span className="dark:bg-accent/15 bg-slate-200 border rounded p-2">
-            <ArrowUpIcon className="w-3 h-3"/>
+            <ArrowUpIcon className="w-3 h-3" />
           </span>
           <span className="dark:bg-accent/15 bg-slate-200 border rounded p-2">
-            <ArrowDownIcon className="w-3 h-3"/>
+            <ArrowDownIcon className="w-3 h-3" />
           </span>
           <p className="text-muted-foreground">to navigate</p>
           <span className="dark:bg-accent/15 bg-slate-200 border rounded p-2">
-            <CornerDownLeftIcon className="w-3 h-3"/>
+            <CornerDownLeftIcon className="w-3 h-3" />
           </span>
           <p className="text-muted-foreground">to select</p>
           <span className="dark:bg-accent/15 bg-slate-200 border rounded px-2 py-1">

package/src/dist/components/context-popover.tsx

@@ -45,6 +45,7 @@ export default function ContextPopover({ className }: ContextPopoverProps) {
 
   useEffect(() => {
     if (pathname.startsWith("/docs")) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
       setActiveRoute(getActiveContextRoute(pathname));
     } else {
       setActiveRoute(undefined);
@@ -61,7 +62,7 @@ export default function ContextPopover({ className }: ContextPopoverProps) {
         <Button
           variant="ghost"
           className={cn(
-            "w-full max-w-[240px] flex items-center justify-between font-semibold text-foreground px-0 pt-8",
+            "w-full max-w-[240px] cursor-pointer flex items-center justify-between font-semibold text-foreground px-0 pt-8",
             "hover:bg-transparent hover:text-foreground",
             className
           )}
@@ -95,7 +96,7 @@ export default function ContextPopover({ className }: ContextPopoverProps) {
                 key={route.href}
                 onClick={() => router.push(contextPath)}
                 className={cn(
-                  "relative flex w-full items-center gap-2 rounded px-2 py-1.5 text-sm",
+                  "relative flex w-full items-center gap-2 cursor-pointer rounded px-2 py-1.5 text-sm",
                   "text-left outline-none transition-colors",
                   isActive
                     ? "bg-primary/20 text-primary dark:bg-accent/20 dark:text-accent"

package/src/dist/components/contexts/theme-provider.tsx

@@ -1,8 +1,7 @@
 "use client";
 
-import * as React from "react";
 import { ThemeProvider as NextThemesProvider } from "next-themes";
-import { type ThemeProviderProps } from "next-themes/dist/types";
+import { type ThemeProviderProps } from "next-themes";
 
 export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
   return <NextThemesProvider {...props}>{children}</NextThemesProvider>;

package/src/dist/components/leftbar.tsx

@@ -29,7 +29,7 @@ export function ToggleButton({
       <Button
         size="icon"
         variant="outline"
-        className="hover:bg-transparent hover:text-inherit border-none text-muted-foreground"
+        className="cursor-pointer hover:bg-transparent hover:text-inherit border-none text-muted-foreground"
         onClick={onToggle}
       >
         {collapsed ? (

package/src/dist/components/markdown/AccordionMdx.tsx

@@ -4,7 +4,7 @@ import { ReactNode, useState, useContext } from 'react';
 import { ChevronRight } from 'lucide-react';
 import * as Icons from "lucide-react";
 import { cn } from '@/lib/utils';
-import { AccordionGroupContext } from '@/components/contexts/AccordionContext'; 
+import { AccordionGroupContext } from '@/components/contexts/AccordionContext';
 
 type AccordionProps = {
     title: string;
@@ -27,7 +27,7 @@ const Accordion: React.FC<AccordionProps> = ({
     // The main wrapper div for the accordion.
     // All styling logic for the accordion container is handled here.
     return (
-        <div 
+        <div
             className={cn(
                 // Style for STANDALONE: full card with border & shadow
                 !isInGroup && "border rounded-lg shadow-sm",
@@ -38,16 +38,16 @@ const Accordion: React.FC<AccordionProps> = ({
             <button
                 type="button"
                 onClick={() => setIsOpen(!isOpen)}
-                className="flex items-center space-x-2 w-full px-4 h-12 transition-colors bg-muted/40 dark:bg-muted/20 hover:bg-muted/70 dark:hover:bg-muted/70"
+                className="flex items-center gap-2 w-full px-4 h-12 transition-colors bg-muted/40 dark:bg-muted/20 hover:bg-muted/70 dark:hover:bg-muted/70 cursor-pointer"
             >
                 <ChevronRight
                     className={cn(
-                        "w-4 h-4 text-muted-foreground transition-transform duration-200",
+                        "w-4 h-4 text-muted-foreground transition-transform duration-200 flex-shrink-0",
                         isOpen && "rotate-90"
                     )}
                 />
-                {Icon && <Icon className="text-foreground w-4 h-4"/> }
-                <h3 className="font-medium text-base text-foreground m-0">{title}</h3>
+                {Icon && <Icon className="text-foreground w-4 h-4 flex-shrink-0" />}
+                <h3 className="font-medium text-base text-foreground !m-0 leading-none">{title}</h3>
             </button>
 
             {isOpen && (

package/src/dist/components/markdown/CardGroupMdx.tsx

@@ -8,13 +8,21 @@ interface CardGroupProps {
 }
 
 const CardGroup: React.FC<CardGroupProps> = ({ children, cols = 2, className }) => {
-  const cardsArray = React.Children.toArray(children); // Pastikan children berupa array
+  const cardsArray = React.Children.toArray(children);
+
+  // Static grid column classes for Tailwind v4 compatibility
+  const gridColsClass = {
+    1: "grid-cols-1",
+    2: "grid-cols-1 sm:grid-cols-2",
+    3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
+    4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4",
+  }[cols] || "grid-cols-1 sm:grid-cols-2";
 
   return (
     <div
       className={clsx(
         "grid gap-4 text-foreground",
-        `grid-cols-1 sm:grid-cols-${cols}`,
+        gridColsClass,
         className
       )}
     >

package/src/dist/components/markdown/CopyMdx.tsx

@@ -19,7 +19,7 @@ export default function Copy({ content }: { content: string }) {
   return (
     <Button
       variant="secondary"
-      className="border"
+      className="border cursor-copy"
       size="xs"
       onClick={handleCopy}
     >

package/src/dist/components/markdown/FileTreeMdx.tsx

@@ -100,8 +100,8 @@ export const Files = ({ children }: { children: ReactNode }) => {
   return (
     <div
       className="
-        rounded-xl border border-muted/50
-        bg-card/50 backdrop-blur-sm
+        rounded-xl border border-muted/20
+        bg-card/20 backdrop-blur-sm
         shadow-sm overflow-hidden
         transition-all duration-200
         hover:shadow-md hover:border-muted/60

package/src/dist/components/markdown/ImageMdx.tsx

@@ -1,25 +1,129 @@
-import { ComponentProps } from "react";
+"use client";
+
+import { ComponentProps, useState, useEffect } from "react";
 import NextImage from "next/image";
+import { createPortal } from "react-dom";
+import { motion, AnimatePresence } from "framer-motion";
+import { X, ZoomIn } from "lucide-react";
 
 type Height = ComponentProps<typeof NextImage>["height"];
 type Width = ComponentProps<typeof NextImage>["width"];
 
+type ImageProps = Omit<ComponentProps<"img">, "src"> & {
+    src?: ComponentProps<typeof NextImage>["src"];
+};
+
 export default function Image({
-  src,
-  alt = "alt",
-  width = 800,
-  height = 350,
-  ...props
-}: ComponentProps<"img">) {
-  if (!src) return null;
-  return (
-    <NextImage
-      src={src}
-      alt={alt}
-      width={width as Width}
-      height={height as Height}
-      quality={40}
-      {...props}
-    />
-  );
+    src,
+    alt = "alt",
+    width = 800,
+    height = 350,
+    ...props
+}: ImageProps) {
+    const [isOpen, setIsOpen] = useState(false);
+
+    // Lock scroll when open
+    useEffect(() => {
+        if (isOpen) {
+            document.body.style.overflow = "hidden";
+            // Check for Escape key
+            const handleEsc = (e: KeyboardEvent) => {
+                if (e.key === "Escape") setIsOpen(false);
+            };
+            window.addEventListener("keydown", handleEsc);
+            return () => {
+                document.body.style.overflow = "auto";
+                window.removeEventListener("keydown", handleEsc);
+            };
+        }
+    }, [isOpen]);
+
+    if (!src) return null;
+
+    return (
+        <>
+            <button
+                type="button"
+                className="relative group cursor-zoom-in my-6 w-full flex justify-center rounded-lg"
+                onClick={() => setIsOpen(true)}
+                aria-label="Zoom image"
+            >
+                <span className="absolute inset-0 bg-black/0 group-hover:bg-black/5 transition-colors z-10 flex items-center justify-center opacity-0 group-hover:opacity-100 rounded-lg">
+                    <ZoomIn className="w-8 h-8 text-white drop-shadow-md" />
+                </span>
+                <NextImage
+                    src={src}
+                    alt={alt}
+                    width={width as Width}
+                    height={height as Height}
+                    quality={85}
+                    className="w-full h-auto rounded-lg transition-transform duration-300 group-hover:scale-[1.01]"
+                    {...props}
+                />
+            </button>
+
+            <AnimatePresence>
+                {isOpen && (
+                    <Portal>
+                        <motion.div
+                            initial={{ opacity: 0 }}
+                            animate={{ opacity: 1 }}
+                            exit={{ opacity: 0 }}
+                            className="fixed inset-0 z-[99999] flex items-center justify-center bg-black/90 backdrop-blur-md p-4 md:p-10 cursor-zoom-out"
+                            onClick={() => setIsOpen(false)}
+                        >
+                            {/* Close Button */}
+                            <button
+                                className="absolute top-4 right-4 z-50 p-2 text-white/70 hover:text-white bg-black/20 hover:bg-white/10 rounded-full transition-colors"
+                                onClick={(e) => {
+                                    e.stopPropagation();
+                                    setIsOpen(false);
+                                }}
+                            >
+                                <X className="w-6 h-6" />
+                            </button>
+
+                            {/* Image Container */}
+                            <motion.div
+                                initial={{ scale: 0.9, opacity: 0 }}
+                                animate={{ scale: 1, opacity: 1 }}
+                                exit={{ scale: 0.9, opacity: 0 }}
+                                transition={{ type: "spring", damping: 25, stiffness: 300 }}
+                                className="relative max-w-7xl w-full h-full flex items-center justify-center"
+                                onClick={(e) => e.stopPropagation()}
+                            >
+                                <div className="relative w-full h-full flex items-center justify-center" onClick={() => setIsOpen(false)}>
+                                    <NextImage
+                                        src={src}
+                                        alt={alt}
+                                        width={1920}
+                                        height={1080}
+                                        className="object-contain max-h-[90vh] w-auto h-auto rounded-md shadow-2xl"
+                                        quality={95}
+                                    />
+                                </div>
+                            </motion.div>
+
+                            {/* Caption */}
+                            {alt && alt !== "alt" && (
+                                <motion.div
+                                    initial={{ y: 20, opacity: 0 }}
+                                    animate={{ y: 0, opacity: 1 }}
+                                    className="absolute bottom-6 left-1/2 -translate-x-1/2 bg-black/60 text-white px-4 py-2 rounded-full text-sm font-medium backdrop-blur-md border border-white/10"
+                                >
+                                    {alt}
+                                </motion.div>
+                            )}
+
+                        </motion.div>
+                    </Portal>
+                )}
+            </AnimatePresence>
+        </>
+    );
 }
+
+const Portal = ({ children }: { children: React.ReactNode }) => {
+    if (typeof window === "undefined") return null;
+    return createPortal(children, document.body);
+};

package/src/dist/components/markdown/NoteMdx.tsx

@@ -1,52 +1,69 @@
+"use client";
+
 import { cn } from "@/lib/utils";
-import clsx from "clsx";
-import { PropsWithChildren } from "react";
+import { cva, type VariantProps } from "class-variance-authority";
 import {
   Info,
   AlertTriangle,
   ShieldAlert,
-  CheckCircle,
+  CheckCircle2,
 } from "lucide-react";
+import React from "react";
 
-type NoteProps = PropsWithChildren & {
-  title?: string;
-  type?: "note" | "danger" | "warning" | "success";
-};
+const noteVariants = cva(
+  "relative w-full rounded-lg border border-l-4 p-4 mb-4 [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+  {
+    variants: {
+      variant: {
+        note: "bg-muted/30 border-border border-l-primary/50 text-foreground [&>svg]:text-primary",
+        danger: "border-destructive/20 border-l-destructive/60 bg-destructive/5 text-destructive [&>svg]:text-destructive dark:border-destructive/30",
+        warning: "border-orange-500/20 border-l-orange-500/60 bg-orange-500/5 text-orange-600 dark:text-orange-400 [&>svg]:text-orange-600 dark:[&>svg]:text-orange-400",
+        success: "border-emerald-500/20 border-l-emerald-500/60 bg-emerald-500/5 text-emerald-600 dark:text-emerald-400 [&>svg]:text-emerald-600 dark:[&>svg]:text-emerald-400",
+      },
+    },
+    defaultVariants: {
+      variant: "note",
+    },
+  }
+);
 
 const iconMap = {
-  note: <Info size={16} className="text-blue-500" />,
-  danger: <ShieldAlert size={16} className="text-red-500" />,
-  warning: <AlertTriangle size={16} className="text-orange-500" />,
-  success: <CheckCircle size={16} className="text-green-500" />,
+  note: Info,
+  danger: ShieldAlert,
+  warning: AlertTriangle,
+  success: CheckCircle2,
 };
 
+interface NoteProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+  VariantProps<typeof noteVariants> {
+  title?: string;
+  type?: "note" | "danger" | "warning" | "success";
+}
+
 export default function Note({
-  children,
+  className,
   title = "Note",
   type = "note",
+  children,
+  ...props
 }: NoteProps) {
-  const noteClassNames = clsx({
-    "dark:bg-stone-950/25 bg-stone-50": type === "note",
-    "dark:bg-red-950 bg-red-100 border-red-200 dark:border-red-900":
-      type === "danger",
-    "bg-orange-50 border-orange-200 dark:border-orange-900 dark:bg-orange-900/50":
-      type === "warning",
-    "dark:bg-green-950 bg-green-100 border-green-200 dark:border-green-900":
-      type === "success",
-  });
+  const Icon = iconMap[type] || Info;
 
   return (
     <div
-      className={cn(
-        "border rounded-md px-5 pb-0.5 mt-5 mb-7 text-sm tracking-wide",
-        noteClassNames
-      )}
+      className={cn(noteVariants({ variant: type }), className)}
+      {...props}
     >
-      <div className="flex items-center gap-2 font-bold -mb-2.5 pt-6">
-        {iconMap[type]}
-        <span className="text-base">{title}:</span>
+      <Icon className="h-5 w-5" />
+      <div className="pl-8">
+        <h5 className="mb-1 font-medium leading-none tracking-tight">
+          {title}
+        </h5>
+        <div className="text-sm [&_p]:leading-relaxed opacity-90">
+          {children}
+        </div>
       </div>
-      {children}
     </div>
   );
 }

package/src/dist/components/markdown/PreMdx.tsx

@@ -1,4 +1,4 @@
-import { type ComponentProps } from "react";
+import { type ComponentProps, type JSX } from "react";
 import Copy from "./CopyMdx";
 import {
   SiJavascript,

package/src/dist/components/mob-toc.tsx

@@ -14,7 +14,7 @@ interface MobTocProps {
   tocs: TocItem[];
 }
 
-const useClickOutside = (ref: React.RefObject<HTMLElement>, callback: () => void) => {
+const useClickOutside = (ref: React.RefObject<HTMLElement | null>, callback: () => void) => {
   const handleClick = React.useCallback((event: MouseEvent) => {
     if (ref.current && !ref.current.contains(event.target as Node)) {
       callback();

package/src/dist/components/scroll-to-top.tsx

@@ -32,6 +32,7 @@ export function ScrollToTop({
 
   useEffect(() => {
     // Initial check
+    // eslint-disable-next-line react-hooks/set-state-in-effect
     checkScroll();
 
     // Set up scroll listener with debounce for better performance