@hydralms/components 0.1.0

package/dist/ui/alert-dialog.d.ts

@@ -0,0 +1,14 @@
+import { Dialog } from '@base-ui/react/dialog';
+import * as React from "react";
+declare function AlertDialog({ ...props }: React.ComponentProps<typeof Dialog.Root>): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogTrigger({ ...props }: React.ComponentProps<typeof Dialog.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogPortal({ ...props }: React.ComponentProps<typeof Dialog.Portal>): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogBackdrop({ className, ...props }: React.ComponentProps<typeof Dialog.Backdrop>): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogContent({ className, children, ...props }: React.ComponentProps<typeof Dialog.Popup>): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogHeader({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogFooter({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogTitle({ className, ...props }: React.ComponentProps<typeof Dialog.Title>): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogDescription({ className, ...props }: React.ComponentProps<typeof Dialog.Description>): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogAction({ className, ...props }: React.ComponentProps<"button">): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogCancel({ className, ...props }: React.ComponentProps<"button">): import("react/jsx-runtime").JSX.Element;
+export { AlertDialog, AlertDialogTrigger, AlertDialogPortal, AlertDialogBackdrop, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, };

package/dist/ui/alert.d.ts

@@ -0,0 +1,9 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+declare const alertVariants: (props?: ({
+    variant?: "default" | "destructive" | "success" | "warning" | "info" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+declare function Alert({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>): import("react/jsx-runtime").JSX.Element;
+declare function AlertTitle({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function AlertDescription({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+export { Alert, AlertTitle, AlertDescription, alertVariants };

package/dist/ui/avatar.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+declare function Avatar({ className, ...props }: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
+declare function AvatarImage({ className, onError, ...props }: React.ComponentProps<"img">): import("react/jsx-runtime").JSX.Element;
+declare function AvatarFallback({ className, ...props }: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
+export { Avatar, AvatarImage, AvatarFallback };

package/dist/ui/badge.d.ts

@@ -0,0 +1,9 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+declare const badgeVariants: (props?: ({
+    variant?: "default" | "destructive" | "success" | "warning" | "info" | "outline" | "secondary" | "muted" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+declare function Badge({ className, variant, asChild, ...props }: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
+    asChild?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export { Badge, badgeVariants };

package/dist/ui/button.d.ts

@@ -0,0 +1,10 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+declare const buttonVariants: (props?: ({
+    variant?: "default" | "destructive" | "link" | "outline" | "secondary" | "ghost" | null | undefined;
+    size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export { Button, buttonVariants };

package/dist/ui/card.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+declare function Card({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function CardHeader({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function CardTitle({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function CardDescription({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function CardAction({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function CardContent({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function CardFooter({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, };

package/dist/ui/index.d.ts

@@ -0,0 +1,15 @@
+export { Button, buttonVariants } from './button';
+export { Input } from './input';
+export { Textarea } from './textarea';
+export { Badge, badgeVariants } from './badge';
+export { Alert, AlertTitle, AlertDescription, alertVariants } from './alert';
+export { Separator } from './separator';
+export { AlertDialog, AlertDialogTrigger, AlertDialogPortal, AlertDialogBackdrop, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, } from './alert-dialog';
+export { Avatar, AvatarImage, AvatarFallback } from './avatar';
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, } from './card';
+export { Tabs, TabsList, TabsTrigger, TabsContent } from './tabs';
+export { Progress, progressVariants } from './progress';
+export type { ProgressProps } from './progress';
+export { Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption, } from './table';
+export { Skeleton } from './skeleton';
+export { Tooltip, TooltipTrigger, TooltipContent } from './tooltip';

package/dist/ui/input.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare function Input({ className, type, ...props }: React.ComponentProps<"input">): import("react/jsx-runtime").JSX.Element;
+export { Input };

package/dist/ui/progress.d.ts

@@ -0,0 +1,13 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+declare const progressVariants: (props?: ({
+    variant?: "default" | "success" | "warning" | "info" | null | undefined;
+    size?: "default" | "sm" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+interface ProgressProps extends Omit<React.ComponentProps<"div">, "children">, VariantProps<typeof progressVariants> {
+    value?: number;
+    max?: number;
+}
+declare function Progress({ className, value, max, variant, size, ...props }: ProgressProps): import("react/jsx-runtime").JSX.Element;
+export { Progress, progressVariants };
+export type { ProgressProps };

package/dist/ui/separator.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+declare function Separator({ className, orientation, decorative, ...props }: React.ComponentProps<"div"> & {
+    orientation?: "horizontal" | "vertical";
+    decorative?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export { Separator };

package/dist/ui/skeleton.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare function Skeleton({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+export { Skeleton };

package/dist/ui/slot.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+/**
+ * Minimal Slot implementation for the asChild pattern.
+ * Merges parent props onto a single React element child.
+ */
+export declare function Slot({ children, ...props }: React.HTMLAttributes<HTMLElement> & {
+    children?: React.ReactNode;
+}): React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | null;

package/dist/ui/table.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+declare function Table({ className, ...props }: React.ComponentProps<"table">): import("react/jsx-runtime").JSX.Element;
+declare function TableHeader({ className, ...props }: React.ComponentProps<"thead">): import("react/jsx-runtime").JSX.Element;
+declare function TableBody({ className, ...props }: React.ComponentProps<"tbody">): import("react/jsx-runtime").JSX.Element;
+declare function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">): import("react/jsx-runtime").JSX.Element;
+declare function TableRow({ className, ...props }: React.ComponentProps<"tr">): import("react/jsx-runtime").JSX.Element;
+declare function TableHead({ className, ...props }: React.ComponentProps<"th">): import("react/jsx-runtime").JSX.Element;
+declare function TableCell({ className, ...props }: React.ComponentProps<"td">): import("react/jsx-runtime").JSX.Element;
+declare function TableCaption({ className, ...props }: React.ComponentProps<"caption">): import("react/jsx-runtime").JSX.Element;
+export { Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption, };

package/dist/ui/tabs.d.ts

@@ -0,0 +1,7 @@
+import { Tabs as BaseTabs } from '@base-ui/react/tabs';
+import * as React from "react";
+declare function Tabs({ ...props }: React.ComponentProps<typeof BaseTabs.Root>): import("react/jsx-runtime").JSX.Element;
+declare function TabsList({ className, ...props }: React.ComponentProps<typeof BaseTabs.List>): import("react/jsx-runtime").JSX.Element;
+declare function TabsTrigger({ className, ...props }: React.ComponentProps<typeof BaseTabs.Tab>): import("react/jsx-runtime").JSX.Element;
+declare function TabsContent({ className, ...props }: React.ComponentProps<typeof BaseTabs.Panel>): import("react/jsx-runtime").JSX.Element;
+export { Tabs, TabsList, TabsTrigger, TabsContent };

package/dist/ui/textarea.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare function Textarea({ className, ...props }: React.ComponentProps<"textarea">): import("react/jsx-runtime").JSX.Element;
+export { Textarea };

package/dist/ui/tooltip.d.ts

@@ -0,0 +1,8 @@
+import { Tooltip as BaseTooltip } from '@base-ui/react/tooltip';
+import * as React from "react";
+declare function Tooltip({ ...props }: React.ComponentProps<typeof BaseTooltip.Root>): import("react/jsx-runtime").JSX.Element;
+declare function TooltipTrigger({ ...props }: React.ComponentProps<typeof BaseTooltip.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function TooltipContent({ className, sideOffset, children, ...props }: React.ComponentProps<typeof BaseTooltip.Popup> & {
+    sideOffset?: number;
+}): import("react/jsx-runtime").JSX.Element;
+export { Tooltip, TooltipTrigger, TooltipContent };

package/dist/utils/debounce.d.ts

@@ -0,0 +1 @@
+export declare function debounce<T extends (...args: Parameters<T>) => void>(fn: T, delay: number): (...args: Parameters<T>) => void;

package/dist/utils/format-duration.d.ts

@@ -0,0 +1,2 @@
+export declare const formatDuration: (duration: number) => string;
+export declare const formatTimer: (totalSeconds: number) => string;

package/dist/video/index.d.ts

@@ -0,0 +1,2 @@
+export { VideoPlayer } from './video-player';
+export type { VideoPlayerProps } from './types';

package/dist/video/types.d.ts

@@ -0,0 +1,37 @@
+/**
+ * VideoPlayer component for rendering video content with interactive playback controls.
+ *
+ * @example
+ * <VideoPlayer
+ *   src="https://example.com/lesson.mp4"
+ *   poster="https://example.com/thumbnail.jpg"
+ *   title="Introduction to React"
+ *   onEnded={() => markLessonComplete()}
+ * />
+ */
+export interface VideoPlayerProps {
+    /** URL of the video source */
+    src?: string;
+    /** URL of the poster/thumbnail image */
+    poster?: string;
+    /** Title displayed above the video */
+    title?: string;
+    /** Whether the video should autoplay */
+    autoPlay?: boolean;
+    /** Called when the video starts playing */
+    onPlay?: () => void;
+    /** Called when the video is paused */
+    onPause?: () => void;
+    /** Called when the video ends */
+    onEnded?: () => void;
+    /** Called on each time update tick with currentTime and duration */
+    onTimeUpdate?: (currentTime: number, duration: number) => void;
+    /** When true, shows a poster image instead of interactive controls */
+    readOnly?: boolean;
+    /** Aspect ratio of the video container */
+    aspectRatio?: "16/9" | "4/3" | "1/1";
+    /** CSS class name for the root element */
+    className?: string;
+    /** Inline styles for the root element */
+    style?: React.CSSProperties;
+}

package/dist/video/video-player.d.ts

@@ -0,0 +1,2 @@
+import { VideoPlayerProps } from './types';
+export declare const VideoPlayer: ({ src, poster, title, autoPlay, onPlay, onPause, onEnded, onTimeUpdate, readOnly, aspectRatio, className, style, }: VideoPlayerProps) => import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -0,0 +1,94 @@
+{
+  "name": "@hydralms/components",
+  "version": "0.1.0",
+  "description": "React component library for LMS platforms, built on Base UI",
+  "license": "MIT",
+  "author": "HydraLMS",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/smccart/hydra-lms.git",
+    "directory": "packages/hydra-lms"
+  },
+  "homepage": "https://hydralms.com",
+  "bugs": {
+    "url": "https://github.com/smccart/hydra-lms/issues"
+  },
+  "keywords": [
+    "react",
+    "lms",
+    "learning-management-system",
+    "components",
+    "ui",
+    "tailwindcss",
+    "education",
+    "quiz",
+    "assessment",
+    "course"
+  ],
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "LICENSE",
+    "README.md"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./sections": {
+      "types": "./dist/sections.d.ts",
+      "import": "./dist/sections.js",
+      "require": "./dist/sections.cjs"
+    },
+    "./styles.css": "./dist/components.css",
+    "./package.json": "./package.json"
+  },
+  "peerDependencies": {
+    "@base-ui/react": "^1.0.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "tailwindcss": "^4.0.0"
+  },
+  "dependencies": {
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.475.0",
+    "tailwind-merge": "^3.0.2"
+  },
+  "devDependencies": {
+    "@base-ui/react": "^1.2.0",
+    "@tailwindcss/vite": "^4.0.0",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^4.3.0",
+    "jsdom": "^28.1.0",
+    "react": "^19.0.0",
+    "react-docgen-typescript": "^2.3.0",
+    "tailwindcss": "^4.0.0",
+    "tsx": "^4.19.0",
+    "typescript": "~5.7.0",
+    "vite": "^6.0.0",
+    "vite-plugin-dts": "^4.0.0",
+    "vitest": "^4.0.18"
+  },
+  "scripts": {
+    "build": "tsc -b && 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"
+  }
+}