@vllnt/ui 0.3.0-canary.f3cafe8 → 0.3.0

package/dist/components/slideshow/slideshow.js

@@ -1,7 +1,8 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { memo, useCallback, useEffect, useState } from "react";
+import { memo, useCallback, useEffect, useEffectEvent, useState } from "react";
 import { createPortal } from "react-dom";
+import { useBodyScrollLock } from "../../lib/use-body-scroll-lock";
 import { useMounted } from "../../lib/use-mounted";
 import { cn } from "../../lib/utils";
 import { CompletionDialog } from "../completion-dialog/completion-dialog";
@@ -16,6 +17,316 @@ const DEFAULT_LABELS = {
   sectionsLabel: "Sections"
 };
 const EMPTY_SLIDESHOW_LABELS = {};
+function SlideshowProgress({ progress }) {
+  return /* @__PURE__ */ jsx("div", { className: "absolute top-0 left-0 right-0 h-1 bg-muted z-10", children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "h-full bg-foreground transition-all duration-300 ease-out",
+      style: { width: `${progress}%` }
+    }
+  ) });
+}
+function SlideshowHeader({
+  currentIndex,
+  isTocOpen,
+  labels,
+  onExit,
+  onToggleToc,
+  sectionCount,
+  sectionTitle,
+  title
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-3 mt-1 border-b border-border bg-background", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          "aria-label": isTocOpen ? labels.closeTocLabel : labels.openTocLabel,
+          className: "flex-shrink-0 p-2 rounded-lg hover:bg-muted transition-colors",
+          onClick: onToggleToc,
+          type: "button",
+          children: isTocOpen ? /* @__PURE__ */ jsx(
+            "svg",
+            {
+              className: "size-5",
+              fill: "none",
+              stroke: "currentColor",
+              viewBox: "0 0 24 24",
+              children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: "M6 18L18 6M6 6l12 12",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: 2
+                }
+              )
+            }
+          ) : /* @__PURE__ */ jsx(
+            "svg",
+            {
+              className: "size-5",
+              fill: "none",
+              stroke: "currentColor",
+              viewBox: "0 0 24 24",
+              children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: "M4 6h16M4 12h16M4 18h16",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: 2
+                }
+              )
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground truncate", children: title }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm font-medium truncate", children: sectionTitle })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-shrink-0", children: [
+      /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground tabular-nums hidden sm:inline", children: [
+        currentIndex + 1,
+        "/",
+        sectionCount
+      ] }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          "aria-label": labels.exitLabel,
+          className: "p-2 rounded-lg hover:bg-muted transition-colors",
+          onClick: onExit,
+          type: "button",
+          children: /* @__PURE__ */ jsx(
+            "svg",
+            {
+              className: "size-5",
+              fill: "none",
+              stroke: "currentColor",
+              viewBox: "0 0 24 24",
+              children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: "M6 18L18 6M6 6l12 12",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: 2
+                }
+              )
+            }
+          )
+        }
+      )
+    ] })
+  ] });
+}
+function SlideshowToc({
+  as: SectionsHeading = "h3",
+  completedSections,
+  currentIndex,
+  isOpen,
+  labels,
+  onClose,
+  onNavigate,
+  sections
+}) {
+  if (!isOpen) return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "absolute inset-0 z-20 flex animate-in fade-in-0 duration-200",
+      onClick: onClose,
+      onKeyDown: (event) => {
+        if (event.key === "Enter" || event.key === " ") onClose();
+      },
+      role: "button",
+      tabIndex: 0,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-background/40" }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "relative w-full sm:max-w-sm bg-background border-r border-border h-full overflow-auto shadow-2xl",
+            onClick: (event) => {
+              event.stopPropagation();
+            },
+            onKeyDown: (event) => {
+              event.stopPropagation();
+            },
+            role: "dialog",
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "sticky top-0 flex items-center justify-between px-4 py-3 border-b border-border bg-background", children: [
+                /* @__PURE__ */ jsx(SectionsHeading, { className: "font-semibold", children: labels.sectionsLabel }),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    "aria-label": labels.closeLabel,
+                    className: "p-2 rounded-lg hover:bg-muted transition-colors",
+                    onClick: onClose,
+                    type: "button",
+                    children: /* @__PURE__ */ jsx(
+                      "svg",
+                      {
+                        className: "size-4",
+                        fill: "none",
+                        stroke: "currentColor",
+                        viewBox: "0 0 24 24",
+                        children: /* @__PURE__ */ jsx(
+                          "path",
+                          {
+                            d: "M6 18L18 6M6 6l12 12",
+                            strokeLinecap: "round",
+                            strokeLinejoin: "round",
+                            strokeWidth: 2
+                          }
+                        )
+                      }
+                    )
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "p-2", children: sections.map((section, index) => {
+                const isCompleted = completedSections.has(section.id);
+                const isCurrent = index === currentIndex;
+                return /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    className: cn(
+                      "w-full flex items-center gap-3 p-3 rounded-lg text-left transition-colors",
+                      isCurrent ? "bg-muted" : "hover:bg-muted/50"
+                    ),
+                    onClick: () => {
+                      onNavigate(index);
+                    },
+                    type: "button",
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          className: cn(
+                            "flex-shrink-0 size-5 rounded-full border-2 flex items-center justify-center",
+                            isCompleted ? "bg-foreground border-foreground" : "border-muted-foreground"
+                          ),
+                          children: isCompleted ? /* @__PURE__ */ jsx(
+                            "svg",
+                            {
+                              className: "size-3 text-background",
+                              fill: "none",
+                              stroke: "currentColor",
+                              viewBox: "0 0 24 24",
+                              children: /* @__PURE__ */ jsx(
+                                "path",
+                                {
+                                  d: "M5 13l4 4L19 7",
+                                  strokeLinecap: "round",
+                                  strokeLinejoin: "round",
+                                  strokeWidth: 2
+                                }
+                              )
+                            }
+                          ) : null
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: cn(
+                            "flex-1 text-sm truncate",
+                            isCompleted && "line-through opacity-60"
+                          ),
+                          children: section.title
+                        }
+                      )
+                    ]
+                  },
+                  section.id
+                );
+              }) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function SlideshowContent({
+  section,
+  source
+}) {
+  return source(section);
+}
+function SlideshowNav({
+  canGoPrevious,
+  isLastSection,
+  labels,
+  onNext,
+  onPrevious
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "relative z-20 flex items-center justify-between p-4 border-t border-border bg-background", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        className: "min-w-[100px] gap-1 inline-flex items-center justify-center px-4 py-2 rounded-md hover:bg-muted transition-colors disabled:opacity-50 disabled:pointer-events-none",
+        disabled: !canGoPrevious,
+        onClick: onPrevious,
+        type: "button",
+        children: [
+          /* @__PURE__ */ jsx(
+            "svg",
+            {
+              className: "size-4",
+              fill: "none",
+              stroke: "currentColor",
+              viewBox: "0 0 24 24",
+              children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: "m15 19-7-7 7-7",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: 2
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { children: labels.prevLabel })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        className: "min-w-[100px] gap-1 inline-flex items-center justify-center px-4 py-2 rounded-md bg-foreground text-background hover:bg-foreground/90 transition-colors",
+        onClick: onNext,
+        type: "button",
+        children: [
+          /* @__PURE__ */ jsx("span", { children: isLastSection ? labels.finishLabel : labels.nextLabel }),
+          !isLastSection && /* @__PURE__ */ jsx(
+            "svg",
+            {
+              className: "size-4",
+              fill: "none",
+              stroke: "currentColor",
+              viewBox: "0 0 24 24",
+              children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: "m9 5 7 7-7 7",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: 2
+                }
+              )
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
 function SlideshowImpl({
   as: SectionsHeading = "h3",
   completedSections,
@@ -41,12 +352,7 @@ function SlideshowImpl({
   const canGoNext = currentIndex < sections.length - 1;
   const canGoPrevious = currentIndex > 0;
   const progress = (currentIndex + 1) / sections.length * 100;
-  useEffect(() => {
-    document.body.style.overflow = "hidden";
-    return () => {
-      document.body.style.overflow = "";
-    };
-  }, []);
+  useBodyScrollLock(true);
   const goToSection = useCallback(
     (index, direction) => {
       setAnimationDirection(direction);
@@ -94,256 +400,73 @@ function SlideshowImpl({
     },
     [currentIndex, goToSection]
   );
+  const onKeyDown = useEffectEvent((event) => {
+    if (isCompletionDialogOpen) return;
+    if (event.key === "Escape") {
+      event.preventDefault();
+      if (isTocOpen) setIsTocOpen(false);
+      else onExit();
+      return;
+    }
+    if (event.key === "t" || event.key === "T") {
+      event.preventDefault();
+      setIsTocOpen((p) => !p);
+      return;
+    }
+    if (event.key === "ArrowRight" || event.key === "j") {
+      event.preventDefault();
+      handleNext();
+      return;
+    }
+    if (event.key === "ArrowLeft" || event.key === "k") {
+      event.preventDefault();
+      handlePrevious();
+    }
+  });
   useEffect(() => {
     const handleKeyDown = (event) => {
-      if (isCompletionDialogOpen) return;
-      if (event.key === "Escape") {
-        event.preventDefault();
-        if (isTocOpen) setIsTocOpen(false);
-        else onExit();
-        return;
-      }
-      if (event.key === "t" || event.key === "T") {
-        event.preventDefault();
-        setIsTocOpen((p) => !p);
-        return;
-      }
-      if (event.key === "ArrowRight" || event.key === "j") {
-        event.preventDefault();
-        handleNext();
-        return;
-      }
-      if (event.key === "ArrowLeft" || event.key === "k") {
-        event.preventDefault();
-        handlePrevious();
-      }
+      onKeyDown(event);
     };
     document.addEventListener("keydown", handleKeyDown, true);
     return () => {
       document.removeEventListener("keydown", handleKeyDown, true);
     };
-  }, [handleNext, handlePrevious, onExit, isTocOpen, isCompletionDialogOpen]);
+  }, []);
   if (!currentSection || !mounted) return null;
   return createPortal(
     /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-[9999] bg-background flex flex-col", children: [
-      /* @__PURE__ */ jsx("div", { className: "absolute top-0 left-0 right-0 h-1 bg-muted z-10", children: /* @__PURE__ */ jsx(
-        "div",
+      /* @__PURE__ */ jsx(SlideshowProgress, { progress }),
+      /* @__PURE__ */ jsx(
+        SlideshowHeader,
         {
-          className: "h-full bg-foreground transition-all duration-300 ease-out",
-          style: { width: `${progress}%` }
+          currentIndex,
+          isTocOpen,
+          labels: mergedLabels,
+          onExit,
+          onToggleToc: () => {
+            setIsTocOpen((p) => !p);
+          },
+          sectionCount: sections.length,
+          sectionTitle: currentSection.title,
+          title
         }
-      ) }),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-3 mt-1 border-b border-border bg-background", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 min-w-0 flex-1", children: [
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              "aria-label": isTocOpen ? mergedLabels.closeTocLabel : mergedLabels.openTocLabel,
-              className: "flex-shrink-0 p-2 rounded-lg hover:bg-muted transition-colors",
-              onClick: () => {
-                setIsTocOpen((p) => !p);
-              },
-              type: "button",
-              children: isTocOpen ? /* @__PURE__ */ jsx(
-                "svg",
-                {
-                  className: "size-5",
-                  fill: "none",
-                  stroke: "currentColor",
-                  viewBox: "0 0 24 24",
-                  children: /* @__PURE__ */ jsx(
-                    "path",
-                    {
-                      d: "M6 18L18 6M6 6l12 12",
-                      strokeLinecap: "round",
-                      strokeLinejoin: "round",
-                      strokeWidth: 2
-                    }
-                  )
-                }
-              ) : /* @__PURE__ */ jsx(
-                "svg",
-                {
-                  className: "size-5",
-                  fill: "none",
-                  stroke: "currentColor",
-                  viewBox: "0 0 24 24",
-                  children: /* @__PURE__ */ jsx(
-                    "path",
-                    {
-                      d: "M4 6h16M4 12h16M4 18h16",
-                      strokeLinecap: "round",
-                      strokeLinejoin: "round",
-                      strokeWidth: 2
-                    }
-                  )
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-            /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground truncate", children: title }),
-            /* @__PURE__ */ jsx("p", { className: "text-sm font-medium truncate", children: currentSection.title })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-shrink-0", children: [
-          /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground tabular-nums hidden sm:inline", children: [
-            currentIndex + 1,
-            "/",
-            sections.length
-          ] }),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              "aria-label": mergedLabels.exitLabel,
-              className: "p-2 rounded-lg hover:bg-muted transition-colors",
-              onClick: onExit,
-              type: "button",
-              children: /* @__PURE__ */ jsx(
-                "svg",
-                {
-                  className: "size-5",
-                  fill: "none",
-                  stroke: "currentColor",
-                  viewBox: "0 0 24 24",
-                  children: /* @__PURE__ */ jsx(
-                    "path",
-                    {
-                      d: "M6 18L18 6M6 6l12 12",
-                      strokeLinecap: "round",
-                      strokeLinejoin: "round",
-                      strokeWidth: 2
-                    }
-                  )
-                }
-              )
-            }
-          )
-        ] })
-      ] }),
+      ),
       /* @__PURE__ */ jsxs("div", { className: "relative flex-1 overflow-hidden", children: [
-        isTocOpen ? /* @__PURE__ */ jsxs(
-          "div",
+        /* @__PURE__ */ jsx(
+          SlideshowToc,
           {
-            className: "absolute inset-0 z-20 flex animate-in fade-in-0 duration-200",
-            onClick: () => {
+            as: SectionsHeading,
+            completedSections,
+            currentIndex,
+            isOpen: isTocOpen,
+            labels: mergedLabels,
+            onClose: () => {
               setIsTocOpen(false);
             },
-            onKeyDown: (event) => {
-              if (event.key === "Enter" || event.key === " ")
-                setIsTocOpen(false);
-            },
-            role: "button",
-            tabIndex: 0,
-            children: [
-              /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-background/40" }),
-              /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  className: "relative w-full sm:max-w-sm bg-background border-r border-border h-full overflow-auto shadow-2xl",
-                  onClick: (event) => {
-                    event.stopPropagation();
-                  },
-                  onKeyDown: (event) => {
-                    event.stopPropagation();
-                  },
-                  role: "dialog",
-                  children: [
-                    /* @__PURE__ */ jsxs("div", { className: "sticky top-0 flex items-center justify-between px-4 py-3 border-b border-border bg-background", children: [
-                      /* @__PURE__ */ jsx(SectionsHeading, { className: "font-semibold", children: mergedLabels.sectionsLabel }),
-                      /* @__PURE__ */ jsx(
-                        "button",
-                        {
-                          "aria-label": mergedLabels.closeLabel,
-                          className: "p-2 rounded-lg hover:bg-muted transition-colors",
-                          onClick: () => {
-                            setIsTocOpen(false);
-                          },
-                          type: "button",
-                          children: /* @__PURE__ */ jsx(
-                            "svg",
-                            {
-                              className: "size-4",
-                              fill: "none",
-                              stroke: "currentColor",
-                              viewBox: "0 0 24 24",
-                              children: /* @__PURE__ */ jsx(
-                                "path",
-                                {
-                                  d: "M6 18L18 6M6 6l12 12",
-                                  strokeLinecap: "round",
-                                  strokeLinejoin: "round",
-                                  strokeWidth: 2
-                                }
-                              )
-                            }
-                          )
-                        }
-                      )
-                    ] }),
-                    /* @__PURE__ */ jsx("div", { className: "p-2", children: sections.map((section, index) => {
-                      const isCompleted = completedSections.has(section.id);
-                      const isCurrent = index === currentIndex;
-                      return /* @__PURE__ */ jsxs(
-                        "button",
-                        {
-                          className: cn(
-                            "w-full flex items-center gap-3 p-3 rounded-lg text-left transition-colors",
-                            isCurrent ? "bg-muted" : "hover:bg-muted/50"
-                          ),
-                          onClick: () => {
-                            handleTocNavigate(index);
-                          },
-                          type: "button",
-                          children: [
-                            /* @__PURE__ */ jsx(
-                              "div",
-                              {
-                                className: cn(
-                                  "flex-shrink-0 size-5 rounded-full border-2 flex items-center justify-center",
-                                  isCompleted ? "bg-foreground border-foreground" : "border-muted-foreground"
-                                ),
-                                children: isCompleted ? /* @__PURE__ */ jsx(
-                                  "svg",
-                                  {
-                                    className: "size-3 text-background",
-                                    fill: "none",
-                                    stroke: "currentColor",
-                                    viewBox: "0 0 24 24",
-                                    children: /* @__PURE__ */ jsx(
-                                      "path",
-                                      {
-                                        d: "M5 13l4 4L19 7",
-                                        strokeLinecap: "round",
-                                        strokeLinejoin: "round",
-                                        strokeWidth: 2
-                                      }
-                                    )
-                                  }
-                                ) : null
-                              }
-                            ),
-                            /* @__PURE__ */ jsx(
-                              "span",
-                              {
-                                className: cn(
-                                  "flex-1 text-sm truncate",
-                                  isCompleted && "line-through opacity-60"
-                                ),
-                                children: section.title
-                              }
-                            )
-                          ]
-                        },
-                        section.id
-                      );
-                    }) })
-                  ]
-                }
-              )
-            ]
+            onNavigate: handleTocNavigate,
+            sections
           }
-        ) : null,
+        ),
         /* @__PURE__ */ jsx("div", { className: "h-full overflow-auto px-4 py-8 md:px-8 lg:px-16", children: /* @__PURE__ */ jsx("div", { className: "mx-auto max-w-3xl", children: /* @__PURE__ */ jsx(
           "div",
           {
@@ -353,71 +476,26 @@ function SlideshowImpl({
               animationDirection === "right" && "opacity-0 translate-x-4",
               !animationDirection && "opacity-100 translate-x-0"
             ),
-            children: renderContent(currentSection)
+            children: /* @__PURE__ */ jsx(
+              SlideshowContent,
+              {
+                section: currentSection,
+                source: renderContent
+              }
+            )
           }
         ) }) })
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: "relative z-20 flex items-center justify-between p-4 border-t border-border bg-background", children: [
-        /* @__PURE__ */ jsxs(
-          "button",
-          {
-            className: "min-w-[100px] gap-1 inline-flex items-center justify-center px-4 py-2 rounded-md hover:bg-muted transition-colors disabled:opacity-50 disabled:pointer-events-none",
-            disabled: !canGoPrevious,
-            onClick: handlePrevious,
-            type: "button",
-            children: [
-              /* @__PURE__ */ jsx(
-                "svg",
-                {
-                  className: "size-4",
-                  fill: "none",
-                  stroke: "currentColor",
-                  viewBox: "0 0 24 24",
-                  children: /* @__PURE__ */ jsx(
-                    "path",
-                    {
-                      d: "m15 19-7-7 7-7",
-                      strokeLinecap: "round",
-                      strokeLinejoin: "round",
-                      strokeWidth: 2
-                    }
-                  )
-                }
-              ),
-              /* @__PURE__ */ jsx("span", { children: mergedLabels.prevLabel })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          "button",
-          {
-            className: "min-w-[100px] gap-1 inline-flex items-center justify-center px-4 py-2 rounded-md bg-foreground text-background hover:bg-foreground/90 transition-colors",
-            onClick: handleNext,
-            type: "button",
-            children: [
-              /* @__PURE__ */ jsx("span", { children: isLastSection ? mergedLabels.finishLabel : mergedLabels.nextLabel }),
-              !isLastSection && /* @__PURE__ */ jsx(
-                "svg",
-                {
-                  className: "size-4",
-                  fill: "none",
-                  stroke: "currentColor",
-                  viewBox: "0 0 24 24",
-                  children: /* @__PURE__ */ jsx(
-                    "path",
-                    {
-                      d: "m9 5 7 7-7 7",
-                      strokeLinecap: "round",
-                      strokeLinejoin: "round",
-                      strokeWidth: 2
-                    }
-                  )
-                }
-              )
-            ]
-          }
-        )
-      ] }),
+      /* @__PURE__ */ jsx(
+        SlideshowNav,
+        {
+          canGoPrevious,
+          isLastSection,
+          labels: mergedLabels,
+          onNext: handleNext,
+          onPrevious: handlePrevious
+        }
+      ),
       /* @__PURE__ */ jsx(
         CompletionDialog,
         {