@hydralms/components 0.2.0 → 0.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hydralms/components",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "description": "React component library for LMS platforms",
   "license": "MIT",
   "author": "HydraLMS",
@@ -26,9 +26,9 @@
     "course"
   ],
   "type": "module",
-  "main": "./src/index.ts",
-  "module": "./src/index.ts",
-  "types": "./src/index.ts",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "files": [
     "src",
     "dist",
@@ -40,132 +40,32 @@
   ],
   "exports": {
     ".": {
-      "types": "./src/index.ts",
-      "default": "./src/index.ts"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
     },
     "./sections": {
-      "types": "./src/sections/index.ts",
-      "default": "./src/sections/index.ts"
+      "types": "./dist/sections/index.d.ts",
+      "import": "./dist/sections.js",
+      "require": "./dist/sections.cjs"
     },
-    "./sections/QuizSession": {
-      "types": "./src/sections/QuizSession/QuizSession.tsx",
-      "default": "./src/sections/QuizSession/QuizSession.tsx"
-    },
-    "./sections/LecturePlayer": {
-      "types": "./src/sections/LecturePlayer/LecturePlayer.tsx",
-      "default": "./src/sections/LecturePlayer/LecturePlayer.tsx"
-    },
-    "./sections/FlashcardStudySession": {
-      "types": "./src/sections/FlashcardStudySession/FlashcardStudySession.tsx",
-      "default": "./src/sections/FlashcardStudySession/FlashcardStudySession.tsx"
-    },
-    "./sections/AssessmentReview": {
-      "types": "./src/sections/AssessmentReview/AssessmentReview.tsx",
-      "default": "./src/sections/AssessmentReview/AssessmentReview.tsx"
-    },
-    "./sections/CourseOutline": {
-      "types": "./src/sections/CourseOutline/CourseOutline.tsx",
-      "default": "./src/sections/CourseOutline/CourseOutline.tsx"
-    },
-    "./sections/ScrollableQuiz": {
-      "types": "./src/sections/ScrollableQuiz/ScrollableQuiz.tsx",
-      "default": "./src/sections/ScrollableQuiz/ScrollableQuiz.tsx"
-    },
-    "./sections/PracticeQuiz": {
-      "types": "./src/sections/PracticeQuiz/PracticeQuiz.tsx",
-      "default": "./src/sections/PracticeQuiz/PracticeQuiz.tsx"
-    },
-    "./sections/ExamSession": {
-      "types": "./src/sections/ExamSession/ExamSession.tsx",
-      "default": "./src/sections/ExamSession/ExamSession.tsx"
-    },
-    "./sections/SurveyForm": {
-      "types": "./src/sections/SurveyForm/SurveyForm.tsx",
-      "default": "./src/sections/SurveyForm/SurveyForm.tsx"
-    },
-    "./sections/LessonPage": {
-      "types": "./src/sections/LessonPage/LessonPage.tsx",
-      "default": "./src/sections/LessonPage/LessonPage.tsx"
-    },
-    "./sections/ResourceLibrary": {
-      "types": "./src/sections/ResourceLibrary/ResourceLibrary.tsx",
-      "default": "./src/sections/ResourceLibrary/ResourceLibrary.tsx"
-    },
-    "./sections/AnnouncementFeed": {
-      "types": "./src/sections/AnnouncementFeed/AnnouncementFeed.tsx",
-      "default": "./src/sections/AnnouncementFeed/AnnouncementFeed.tsx"
-    },
-    "./sections/DiscussionThread": {
-      "types": "./src/sections/DiscussionThread/DiscussionThread.tsx",
-      "default": "./src/sections/DiscussionThread/DiscussionThread.tsx"
-    },
-    "./sections/AssignmentSubmission": {
-      "types": "./src/sections/AssignmentSubmission/AssignmentSubmission.tsx",
-      "default": "./src/sections/AssignmentSubmission/AssignmentSubmission.tsx"
-    },
-    "./sections/GradebookTable": {
-      "types": "./src/sections/GradebookTable/GradebookTable.tsx",
-      "default": "./src/sections/GradebookTable/GradebookTable.tsx"
-    },
-    "./sections/ProgressDashboard": {
-      "types": "./src/sections/ProgressDashboard/ProgressDashboard.tsx",
-      "default": "./src/sections/ProgressDashboard/ProgressDashboard.tsx"
-    },
-    "./sections/CertificateViewer": {
-      "types": "./src/sections/CertificateViewer/CertificateViewer.tsx",
-      "default": "./src/sections/CertificateViewer/CertificateViewer.tsx"
-    },
-    "./sections/RubricView": {
-      "types": "./src/sections/RubricView/RubricView.tsx",
-      "default": "./src/sections/RubricView/RubricView.tsx"
-    },
-    "./sections/RequirementsChecklist": {
-      "types": "./src/sections/RequirementsChecklist/RequirementsChecklist.tsx",
-      "default": "./src/sections/RequirementsChecklist/RequirementsChecklist.tsx"
-    },
-    "./sections/ForumBoard": {
-      "types": "./src/sections/ForumBoard/ForumBoard.tsx",
-      "default": "./src/sections/ForumBoard/ForumBoard.tsx"
+    "./sections/*": {
+      "types": "./src/sections/*/index.ts",
+      "default": "./src/sections/*/index.ts"
     },
     "./modules": {
-      "types": "./src/modules/index.ts",
-      "default": "./src/modules/index.ts"
-    },
-    "./modules/QuizModule": {
-      "types": "./src/modules/QuizModule/QuizModule.tsx",
-      "default": "./src/modules/QuizModule/QuizModule.tsx"
-    },
-    "./modules/FlashcardLab": {
-      "types": "./src/modules/FlashcardLab/FlashcardLab.tsx",
-      "default": "./src/modules/FlashcardLab/FlashcardLab.tsx"
+      "types": "./dist/modules/index.d.ts",
+      "import": "./dist/modules.js",
+      "require": "./dist/modules.cjs"
     },
-    "./modules/CoursePlayer": {
-      "types": "./src/modules/CoursePlayer/CoursePlayer.tsx",
-      "default": "./src/modules/CoursePlayer/CoursePlayer.tsx"
+    "./modules/*": {
+      "types": "./src/modules/*/index.ts",
+      "default": "./src/modules/*/index.ts"
     },
-    "./modules/ExamModule": {
-      "types": "./src/modules/ExamModule/ExamModule.tsx",
-      "default": "./src/modules/ExamModule/ExamModule.tsx"
-    },
-    "./modules/SurveyModule": {
-      "types": "./src/modules/SurveyModule/SurveyModule.tsx",
-      "default": "./src/modules/SurveyModule/SurveyModule.tsx"
-    },
-    "./modules/GradeCenterModule": {
-      "types": "./src/modules/GradeCenterModule/GradeCenterModule.tsx",
-      "default": "./src/modules/GradeCenterModule/GradeCenterModule.tsx"
-    },
-    "./modules/AssignmentModule": {
-      "types": "./src/modules/AssignmentModule/AssignmentModule.tsx",
-      "default": "./src/modules/AssignmentModule/AssignmentModule.tsx"
-    },
-    "./modules/CertificateModule": {
-      "types": "./src/modules/CertificateModule/CertificateModule.tsx",
-      "default": "./src/modules/CertificateModule/CertificateModule.tsx"
-    },
-    "./modules/DiscussionModule": {
-      "types": "./src/modules/DiscussionModule/DiscussionModule.tsx",
-      "default": "./src/modules/DiscussionModule/DiscussionModule.tsx"
+    "./license": {
+      "types": "./dist/license/index.d.ts",
+      "import": "./dist/license.js",
+      "require": "./dist/license.cjs"
     },
     "./provider": {
       "types": "./src/provider/index.ts",
@@ -207,115 +107,37 @@
       "types": "./src/social/index.ts",
       "default": "./src/social/index.ts"
     },
-    "./ui/card": {
-      "types": "./src/ui/card.tsx",
-      "default": "./src/ui/card.tsx"
-    },
-    "./ui/progress": {
-      "types": "./src/ui/progress.tsx",
-      "default": "./src/ui/progress.tsx"
-    },
-    "./provider/HydraProvider": {
-      "types": "./src/provider/HydraProvider.tsx",
-      "default": "./src/provider/HydraProvider.tsx"
-    },
-    "./styles.css": "./src/styles/globals.css",
-    "./styles/globals.css": "./src/styles/globals.css",
+    "./styles.css": "./dist/components.css",
     "./package.json": "./package.json"
   },
-  "publishConfig": {
-    "main": "./dist/index.cjs",
-    "module": "./dist/index.js",
-    "types": "./dist/index.d.ts",
-    "exports": {
-      ".": {
-        "types": "./dist/index.d.ts",
-        "import": "./dist/index.js",
-        "require": "./dist/index.cjs"
-      },
-      "./sections": {
-        "types": "./dist/sections/index.d.ts",
-        "import": "./dist/sections.js",
-        "require": "./dist/sections.cjs"
-      },
-      "./sections/*": {
-        "types": "./src/sections/*/index.ts",
-        "default": "./src/sections/*/index.ts"
-      },
-      "./modules": {
-        "types": "./dist/modules/index.d.ts",
-        "import": "./dist/modules.js",
-        "require": "./dist/modules.cjs"
-      },
-      "./modules/*": {
-        "types": "./src/modules/*/index.ts",
-        "default": "./src/modules/*/index.ts"
-      },
-      "./provider": {
-        "types": "./src/provider/index.ts",
-        "default": "./src/provider/index.ts"
-      },
-      "./questions": {
-        "types": "./src/questions/index.ts",
-        "default": "./src/questions/index.ts"
-      },
-      "./assessment-toolbar": {
-        "types": "./src/assessment-toolbar/index.ts",
-        "default": "./src/assessment-toolbar/index.ts"
-      },
-      "./flashcards": {
-        "types": "./src/flashcards/index.ts",
-        "default": "./src/flashcards/index.ts"
-      },
-      "./curriculum": {
-        "types": "./src/curriculum/index.ts",
-        "default": "./src/curriculum/index.ts"
-      },
-      "./video": {
-        "types": "./src/video/index.ts",
-        "default": "./src/video/index.ts"
-      },
-      "./progress": {
-        "types": "./src/progress/index.ts",
-        "default": "./src/progress/index.ts"
-      },
-      "./feedback": {
-        "types": "./src/feedback/index.ts",
-        "default": "./src/feedback/index.ts"
-      },
-      "./content": {
-        "types": "./src/content/index.ts",
-        "default": "./src/content/index.ts"
-      },
-      "./social": {
-        "types": "./src/social/index.ts",
-        "default": "./src/social/index.ts"
-      },
-      "./styles.css": "./dist/components.css",
-      "./package.json": "./package.json"
-    }
-  },
-  "scripts": {
-    "build": "vite build",
-    "dev": "vite build --watch",
-    "generate-docs": "tsx scripts/generate-docs.ts",
-    "check-docs": "tsx scripts/generate-docs.ts --check",
-    "typecheck": "tsc --noEmit",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "prepublishOnly": "pnpm run build"
-  },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
-    "tailwindcss": "^4.0.0"
+    "tailwindcss": "^4.0.0",
+    "@tiptap/react": "^3.0.0",
+    "@tiptap/starter-kit": "^3.0.0",
+    "@tiptap/extension-link": "^3.0.0",
+    "@tiptap/extension-placeholder": "^3.0.0",
+    "@tiptap/extension-underline": "^3.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@tiptap/react": {
+      "optional": true
+    },
+    "@tiptap/starter-kit": {
+      "optional": true
+    },
+    "@tiptap/extension-link": {
+      "optional": true
+    },
+    "@tiptap/extension-placeholder": {
+      "optional": true
+    },
+    "@tiptap/extension-underline": {
+      "optional": true
+    }
   },
   "dependencies": {
-    "@tiptap/extension-link": "^3.20.1",
-    "@tiptap/extension-placeholder": "^3.20.1",
-    "@tiptap/extension-underline": "^3.20.1",
-    "@tiptap/react": "^3.20.1",
-    "@tiptap/starter-kit": "^3.20.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.475.0",
@@ -339,5 +161,14 @@
     "vite": "^6.0.0",
     "vite-plugin-dts": "^4.0.0",
     "vitest": "^4.0.18"
+  },
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite build --watch",
+    "generate-docs": "tsx scripts/generate-docs.ts",
+    "check-docs": "tsx scripts/generate-docs.ts --check",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest"
   }
-}
+}

package/src/assessment-toolbar/question-navigator.tsx

@@ -1,3 +1,4 @@
+import { memo } from "react";
 import type { QuestionNavigatorProps } from "./types";
 import { cn } from "../lib/utils";
 
@@ -18,12 +19,12 @@ const getChipVariant = (
   return "default";
 };
 
-export const QuestionNavigator = ({
+export const QuestionNavigator = memo(function QuestionNavigator({
   questions,
   currentQuestionUid,
   onNavigate,
   readOnly = false,
-}: QuestionNavigatorProps) => {
+}: QuestionNavigatorProps) {
   const getTooltipContent = (q: (typeof questions)[0]): string => {
     const parts: string[] = [`Question ${q.sequence + 1}`];
     if (q.isFlagged) parts.push("Flagged");
@@ -37,22 +38,26 @@ export const QuestionNavigator = ({
       {questions.map((q) => {
         const variant = getChipVariant(q, currentQuestionUid);
         return (
-          <div
+          <button
+            type="button"
             key={q.uid}
             title={getTooltipContent(q)}
+            aria-label={getTooltipContent(q)}
+            aria-current={q.uid === currentQuestionUid ? "step" : undefined}
             className={cn(
               "inline-flex items-center justify-center px-1.5 py-0.5 rounded border text-[11px] leading-tight transition-all duration-150 min-w-5.5",
               CHIP_CLASSES[variant],
               readOnly ? "cursor-default" : "cursor-pointer hover:shadow-sm hover:-translate-y-px",
             )}
             onClick={readOnly ? undefined : () => onNavigate?.(q.uid)}
+            disabled={readOnly}
           >
             <span className="font-semibold min-w-3.5 text-center">
               {q.sequence + 1}
             </span>
-          </div>
+          </button>
         );
       })}
     </div>
   );
-};
+});

package/src/assessment-toolbar/timer-display.tsx

@@ -1,3 +1,4 @@
+import { memo } from "react";
 import { Clock } from "lucide-react";
 import { cn } from "../lib/utils";
 import { formatTimer } from "../utils/format-duration";
@@ -22,11 +23,11 @@ function getTimerClasses(isDanger: boolean, isWarning: boolean) {
   };
 }
 
-export const TimerDisplay = ({
+export const TimerDisplay = memo(function TimerDisplay({
   timeElapsedSeconds,
   timeLimitSeconds,
   variant = "compact",
-}: TimerDisplayProps) => {
+}: TimerDisplayProps) {
   const hasTimeLimit = timeLimitSeconds != null && timeLimitSeconds > 0;
   const remainingSeconds = hasTimeLimit
     ? Math.max(0, timeLimitSeconds - timeElapsedSeconds)
@@ -70,4 +71,4 @@ export const TimerDisplay = ({
       </span>
     </div>
   );
-};
+});

package/src/assessment-toolbar/use-countdown.ts

@@ -134,7 +134,7 @@ export function useCountdown({
       startInterval();
     }
     return clearTimer;
-  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [autoStart, startInterval, clearTimer]);
 
   const state = stateRef.current;
 

package/src/common/empty-state.tsx

@@ -6,6 +6,7 @@ export function EmptyState({ icon, title, description, action, className, style
     <div
       className={cn("flex flex-col items-center justify-center text-center px-3 py-6", className)}
       style={style}
+      role="status"
     >
       {icon && (
         <div className="mb-2 text-muted-foreground [&>svg]:size-12">

package/src/common/index.ts

@@ -4,6 +4,7 @@ export { SearchInput } from "./search-input";
 export { StatusBadge } from "./status-badge";
 export { DueDateDisplay } from "./due-date-display";
 export { Stepper } from "./stepper";
+export { Pagination } from "./pagination";
 export type {
   EmptyStateProps,
   ConfirmDialogProps,
@@ -12,4 +13,5 @@ export type {
   DueDateDisplayProps,
   StepperProps,
   StepDefinition,
+  PaginationProps,
 } from "./types";

package/src/common/pagination.tsx

@@ -0,0 +1,135 @@
+import { memo, useMemo } from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { cn } from "../lib/utils";
+import { Button } from "../ui/button";
+
+/**
+ * Pagination provides page navigation controls with page numbers,
+ * previous/next buttons, and ellipsis for large page ranges.
+ *
+ * @example
+ * <Pagination
+ *   currentPage={3}
+ *   totalPages={10}
+ *   onPageChange={(page) => setPage(page)}
+ * />
+ */
+export interface PaginationProps {
+  /** Current active page (1-indexed) */
+  currentPage: number;
+  /** Total number of pages */
+  totalPages: number;
+  /** Called when the user navigates to a page */
+  onPageChange: (page: number) => void;
+  /** Number of page buttons shown on each side of the current page (default 1) */
+  siblingCount?: number;
+  /** CSS class name for the root element */
+  className?: string;
+  /** Inline styles for the root element */
+  style?: React.CSSProperties;
+}
+
+function getPageRange(
+  current: number,
+  total: number,
+  siblings: number,
+): (number | "ellipsis")[] {
+  const totalSlots = siblings * 2 + 5;
+  if (total <= totalSlots) {
+    return Array.from({ length: total }, (_, i) => i + 1);
+  }
+
+  const leftSibling = Math.max(current - siblings, 1);
+  const rightSibling = Math.min(current + siblings, total);
+  const showLeftEllipsis = leftSibling > 2;
+  const showRightEllipsis = rightSibling < total - 1;
+
+  if (!showLeftEllipsis && showRightEllipsis) {
+    const leftCount = siblings * 2 + 3;
+    const leftRange = Array.from({ length: leftCount }, (_, i) => i + 1);
+    return [...leftRange, "ellipsis", total];
+  }
+
+  if (showLeftEllipsis && !showRightEllipsis) {
+    const rightCount = siblings * 2 + 3;
+    const rightRange = Array.from(
+      { length: rightCount },
+      (_, i) => total - rightCount + i + 1,
+    );
+    return [1, "ellipsis", ...rightRange];
+  }
+
+  const middleRange = Array.from(
+    { length: rightSibling - leftSibling + 1 },
+    (_, i) => leftSibling + i,
+  );
+  return [1, "ellipsis", ...middleRange, "ellipsis", total];
+}
+
+export const Pagination = memo(function Pagination({
+  currentPage,
+  totalPages,
+  onPageChange,
+  siblingCount = 1,
+  className,
+  style,
+}: PaginationProps) {
+  const pages = useMemo(
+    () => getPageRange(currentPage, totalPages, siblingCount),
+    [currentPage, totalPages, siblingCount],
+  );
+
+  if (totalPages <= 1) return null;
+
+  return (
+    <nav
+      data-slot="pagination"
+      aria-label="Pagination"
+      className={cn("flex items-center justify-center gap-1", className)}
+      style={style}
+    >
+      <Button
+        variant="ghost"
+        size="icon-sm"
+        onClick={() => onPageChange(currentPage - 1)}
+        disabled={currentPage <= 1}
+        aria-label="Previous page"
+      >
+        <ChevronLeft className="size-4" />
+      </Button>
+
+      {pages.map((page, i) =>
+        page === "ellipsis" ? (
+          <span
+            key={`ellipsis-${i}`}
+            className="flex items-center justify-center size-8 text-xs text-muted-foreground"
+          >
+            <span aria-hidden="true">...</span>
+            <span className="sr-only">More pages</span>
+          </span>
+        ) : (
+          <Button
+            key={page}
+            variant={page === currentPage ? "default" : "ghost"}
+            size="icon-sm"
+            onClick={() => onPageChange(page)}
+            aria-label={`Page ${page}`}
+            aria-current={page === currentPage ? "page" : undefined}
+          >
+            <span className="text-xs">{page}</span>
+          </Button>
+        ),
+      )}
+
+      <Button
+        variant="ghost"
+        size="icon-sm"
+        onClick={() => onPageChange(currentPage + 1)}
+        disabled={currentPage >= totalPages}
+        aria-label="Next page"
+      >
+        <ChevronRight className="size-4" />
+      </Button>
+    </nav>
+  );
+});

package/src/common/search-input.tsx

@@ -1,4 +1,4 @@
-import { useState, useMemo, useRef } from "react";
+import { useState, useMemo, useRef, useEffect } from "react";
 import { Search, X } from "lucide-react";
 import { debounce } from "../utils/debounce";
 import type { SearchInputProps } from "./types";
@@ -23,6 +23,7 @@ export function SearchInput({
     () => debounce((val: string) => onChangeRef.current(val), debounceMs),
     [debounceMs],
   );
+  useEffect(() => () => debouncedOnChange.cancel(), [debouncedOnChange]);
 
   function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
     const next = e.target.value;

package/src/common/types.ts

@@ -166,3 +166,5 @@ export interface StepperProps {
   /** Inline styles for the root element */
   style?: React.CSSProperties;
 }
+
+export type { PaginationProps } from "./pagination";

package/src/content/attachment-list.tsx

@@ -68,6 +68,7 @@ export function AttachmentList({
                 size="sm"
                 className="shrink-0 h-7 w-7 p-0"
                 onClick={() => onDownload(file)}
+                aria-label={`Download ${file.name}`}
               >
                 <Download size={14} />
               </Button>
@@ -78,6 +79,7 @@ export function AttachmentList({
                 size="sm"
                 className="shrink-0 h-7 w-7 p-0 text-muted-foreground hover:text-destructive"
                 onClick={() => onRemove(file)}
+                aria-label={`Remove ${file.name}`}
               >
                 <X size={14} />
               </Button>