@vllnt/ui 0.1.4 → 0.1.7-canary.2c4792f

package/dist/components/sidebar-provider/sidebar-provider.js

@@ -0,0 +1,25 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import {
+  createContext,
+  useContext,
+  useMemo,
+  useState
+} from "react";
+const SidebarContext = createContext(void 0);
+function useSidebar() {
+  const context = useContext(SidebarContext);
+  if (!context) {
+    throw new Error("useSidebar must be used within SidebarProvider");
+  }
+  return context;
+}
+function SidebarProvider({ children }) {
+  const [open, setOpen] = useState(false);
+  const value = useMemo(() => ({ open, setOpen }), [open]);
+  return /* @__PURE__ */ jsx(SidebarContext.Provider, { value, children });
+}
+export {
+  SidebarProvider,
+  useSidebar
+};

package/dist/components/sidebar-toggle/index.js

@@ -0,0 +1,4 @@
+import { SidebarToggle } from "./sidebar-toggle";
+export {
+  SidebarToggle
+};

package/dist/components/sidebar-toggle/sidebar-toggle.js

@@ -0,0 +1,36 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Menu, X } from "lucide-react";
+import { cn } from "../../lib/utils";
+import { Button } from "../button";
+function SidebarToggle({
+  className,
+  onToggle,
+  open
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        className: cn("lg:hidden", className),
+        onClick: onToggle,
+        size: "icon",
+        variant: "ghost",
+        children: open ? /* @__PURE__ */ jsx(X, { className: "h-5 w-5" }) : /* @__PURE__ */ jsx(Menu, { className: "h-5 w-5" })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        className: cn("hidden lg:flex", className),
+        onClick: onToggle,
+        size: "icon",
+        variant: "ghost",
+        children: /* @__PURE__ */ jsx(Menu, { className: "h-5 w-5" })
+      }
+    )
+  ] });
+}
+export {
+  SidebarToggle
+};

package/dist/components/skeleton/index.js

@@ -0,0 +1,4 @@
+import { Skeleton } from "./skeleton";
+export {
+  Skeleton
+};

package/dist/components/skeleton/skeleton.js

@@ -0,0 +1,17 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/utils";
+function Skeleton({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("animate-pulse rounded-md bg-muted", className),
+      ...props
+    }
+  );
+}
+export {
+  Skeleton
+};

package/dist/components/slider/index.js

@@ -0,0 +1,4 @@
+import { Slider } from "./slider";
+export {
+  Slider
+};

package/dist/components/slider/slider.js

@@ -0,0 +1,24 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import * as SliderPrimitive from "@radix-ui/react-slider";
+import { cn } from "../../lib/utils";
+const Slider = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs(
+  SliderPrimitive.Root,
+  {
+    className: cn(
+      "relative flex w-full touch-none select-none items-center",
+      className
+    ),
+    ref,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(SliderPrimitive.Track, { className: "relative h-2 w-full grow overflow-hidden rounded-full bg-secondary", children: /* @__PURE__ */ jsx(SliderPrimitive.Range, { className: "absolute h-full bg-primary" }) }),
+      /* @__PURE__ */ jsx(SliderPrimitive.Thumb, { className: "block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" })
+    ]
+  }
+));
+Slider.displayName = SliderPrimitive.Root.displayName;
+export {
+  Slider
+};

package/dist/components/slideshow/index.js

@@ -0,0 +1,6 @@
+import {
+  Slideshow
+} from "./slideshow";
+export {
+  Slideshow
+};

package/dist/components/slideshow/slideshow.js

@@ -0,0 +1,440 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { memo, useCallback, useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import { useMounted } from "../../lib/use-mounted";
+import { cn } from "../../lib/utils";
+import { CompletionDialog } from "../completion-dialog";
+const DEFAULT_LABELS = {
+  closeLabel: "Close",
+  closeTocLabel: "Close table of contents",
+  exitLabel: "Exit",
+  finishLabel: "Finish",
+  nextLabel: "Next",
+  openTocLabel: "Open table of contents",
+  prevLabel: "Prev",
+  sectionsLabel: "Sections"
+};
+function SlideshowImpl({
+  completedSections,
+  completionDialogTitle = "Mark section as complete?",
+  currentIndex,
+  labels = {},
+  onComplete,
+  onExit,
+  onNavigate,
+  onToggleSection,
+  renderContent,
+  sections,
+  title
+}) {
+  const mergedLabels = { ...DEFAULT_LABELS, ...labels };
+  const [animationDirection, setAnimationDirection] = useState(null);
+  const [isCompletionDialogOpen, setIsCompletionDialogOpen] = useState(false);
+  const [isTocOpen, setIsTocOpen] = useState(false);
+  const mounted = useMounted();
+  const currentSection = sections[currentIndex];
+  const isCurrentCompleted = currentSection ? completedSections.has(currentSection.id) : false;
+  const isLastSection = currentIndex === sections.length - 1;
+  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 = "";
+    };
+  }, []);
+  const goToSection = useCallback(
+    (index, direction) => {
+      setAnimationDirection(direction);
+      setTimeout(() => {
+        onNavigate(index);
+        setAnimationDirection(null);
+      }, 150);
+    },
+    [onNavigate]
+  );
+  const handlePrevious = useCallback(() => {
+    if (canGoPrevious) goToSection(currentIndex - 1, "right");
+  }, [canGoPrevious, currentIndex, goToSection]);
+  const handleNext = useCallback(() => {
+    if (!canGoNext) {
+      if (isCurrentCompleted) onComplete();
+      else setIsCompletionDialogOpen(true);
+      return;
+    }
+    if (isCurrentCompleted) goToSection(currentIndex + 1, "left");
+    else setIsCompletionDialogOpen(true);
+  }, [canGoNext, currentIndex, goToSection, isCurrentCompleted, onComplete]);
+  const handleMarkComplete = useCallback(() => {
+    if (currentSection) onToggleSection(currentSection.id);
+    setIsCompletionDialogOpen(false);
+    if (isLastSection) onComplete();
+    else goToSection(currentIndex + 1, "left");
+  }, [
+    currentSection,
+    onToggleSection,
+    isLastSection,
+    onComplete,
+    goToSection,
+    currentIndex
+  ]);
+  const handleSkip = useCallback(() => {
+    setIsCompletionDialogOpen(false);
+    if (isLastSection) onComplete();
+    else goToSection(currentIndex + 1, "left");
+  }, [isLastSection, onComplete, goToSection, currentIndex]);
+  const handleTocNavigate = useCallback(
+    (index) => {
+      setIsTocOpen(false);
+      goToSection(index, index > currentIndex ? "left" : "right");
+    },
+    [currentIndex, goToSection]
+  );
+  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();
+      }
+    };
+    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",
+        {
+          className: "h-full bg-foreground transition-all duration-300 ease-out",
+          style: { width: `${progress}%` }
+        }
+      ) }),
+      /* @__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: "h-5 w-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: "h-5 w-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: "h-5 w-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",
+          {
+            className: "absolute inset-0 z-20 flex animate-in fade-in-0 duration-200",
+            onClick: () => {
+              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("h3", { 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: "h-4 w-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 w-5 h-5 rounded-full border-2 flex items-center justify-center",
+                                  isCompleted ? "bg-foreground border-foreground" : "border-muted-foreground"
+                                ),
+                                children: isCompleted ? /* @__PURE__ */ jsx(
+                                  "svg",
+                                  {
+                                    className: "h-3 w-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}-${index}`
+                      );
+                    }) })
+                  ]
+                }
+              )
+            ]
+          }
+        ) : 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",
+          {
+            className: cn(
+              "transition-all duration-150 ease-out",
+              animationDirection === "left" && "opacity-0 -translate-x-4",
+              animationDirection === "right" && "opacity-0 translate-x-4",
+              !animationDirection && "opacity-100 translate-x-0"
+            ),
+            children: renderContent(currentSection)
+          }
+        ) }) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "relative z-20 flex items-center justify-between px-4 py-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: "h-4 w-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: "h-4 w-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(
+        CompletionDialog,
+        {
+          description: `You're about to ${isLastSection ? "finish" : "move to the next section from"}: ${currentSection.title}`,
+          isOpen: isCompletionDialogOpen,
+          onCancel: handleSkip,
+          onClose: () => {
+            setIsCompletionDialogOpen(false);
+          },
+          onConfirm: handleMarkComplete,
+          title: completionDialogTitle
+        }
+      )
+    ] }),
+    document.body
+  );
+}
+const Slideshow = memo(SlideshowImpl);
+Slideshow.displayName = "Slideshow";
+export {
+  Slideshow
+};

package/dist/components/social-fab/index.js

@@ -0,0 +1,6 @@
+import { SocialFAB } from "./social-fab";
+import { useSocialFab } from "./use-social-fab";
+export {
+  SocialFAB,
+  useSocialFab
+};