@academy-sdk/sdk 0.1.0

package/dist/components/molecules/index.cjs

@@ -0,0 +1,334 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/molecules/index.ts
+var molecules_exports = {};
+__export(molecules_exports, {
+  CourseCard: () => CourseCard,
+  EmptyState: () => EmptyState,
+  LoadingSpinner: () => LoadingSpinner,
+  PageHeader: () => PageHeader,
+  Pagination: () => Pagination,
+  SearchInput: () => SearchInput
+});
+module.exports = __toCommonJS(molecules_exports);
+
+// src/components/molecules/CourseCard.tsx
+var import_react = require("react");
+var import_lucide_react = require("lucide-react");
+
+// src/components/utils.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
+// src/components/molecules/CourseCard.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function CourseCard({
+  id,
+  title,
+  thumbnail,
+  thumbnails,
+  totalLessons,
+  progress,
+  status,
+  isFree,
+  price = 0,
+  currency = "USD",
+  description,
+  showPrice = true,
+  showProgress = true,
+  category,
+  duration,
+  instructorName,
+  instructorAvatar,
+  originalPrice,
+  isBundle = false,
+  onClick,
+  className
+}) {
+  const [imageError, setImageError] = (0, import_react.useState)(false);
+  const clampedProgress = Math.min(Math.max(progress, 0), 100);
+  const stripHtml = (html) => {
+    if (typeof document === "undefined") return html;
+    const tmp = document.createElement("div");
+    tmp.innerHTML = html;
+    return tmp.textContent || tmp.innerText || "";
+  };
+  const displayCategory = category || "Design";
+  const displayDuration = duration || "3 Month";
+  const displayInstructorName = instructorName || (description ? stripHtml(description).slice(0, 15) : "Instructor");
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      className: cn(
+        "group overflow-hidden rounded-2xl border border-gray-100 bg-white shadow-sm hover:shadow-lg transition-all duration-300 hover:-translate-y-1 h-full flex flex-col min-w-0 w-full cursor-pointer",
+        className
+      ),
+      onClick,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative h-[238.66px] w-full overflow-hidden mx-auto px-3 pt-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "relative w-full h-full rounded-xl overflow-hidden bg-gray-100", children: isBundle && thumbnails && thumbnails.length > 0 && !imageError ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative w-full h-full flex", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "relative h-full w-1/2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "img",
+              {
+                src: thumbnails[0],
+                alt: `${title} - image 1`,
+                className: "w-full h-full object-cover transition-transform duration-300 group-hover:scale-110",
+                onError: () => setImageError(true)
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col w-1/2 h-full", children: [
+              thumbnails[1] && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: cn("relative w-full overflow-hidden", thumbnails.length > 2 ? "h-1/2" : "h-full"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "img",
+                {
+                  src: thumbnails[1],
+                  alt: `${title} - image 2`,
+                  className: "w-full h-full object-cover transition-transform duration-300 group-hover:scale-110",
+                  onError: () => setImageError(true)
+                }
+              ) }),
+              thumbnails.length > 2 && thumbnails[2] && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "relative w-full h-1/2 overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "img",
+                {
+                  src: thumbnails[2],
+                  alt: `${title} - image 3`,
+                  className: "w-full h-full object-cover transition-transform duration-300 group-hover:scale-110",
+                  onError: () => setImageError(true)
+                }
+              ) })
+            ] })
+          ] }) : thumbnail && !imageError ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "img",
+            {
+              src: thumbnail,
+              alt: title,
+              className: "w-full h-full object-cover transition-transform duration-300 group-hover:scale-110",
+              onError: () => setImageError(true)
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "w-full h-full flex items-center justify-center bg-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.BookOpen, { className: "w-12 h-12 text-gray-400" }) }) }),
+          status && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute right-6 top-5", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "span",
+            {
+              className: `rounded-full px-3 py-1.5 text-xs font-medium text-white shadow-md ${status === "completed" ? "bg-green-500" : "bg-[rgb(var(--accent-primary))]"}`,
+              children: status
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "p-5 space-y-3 flex-1 flex flex-col min-w-0", children: [
+          (displayCategory || displayDuration) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between text-xs text-gray-500", children: [
+            displayCategory && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-1.5", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Grid2X2, { className: "w-3.5 h-3.5 text-gray-400" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: displayCategory })
+            ] }),
+            displayDuration && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-1.5", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Clock, { className: "w-3.5 h-3.5 text-gray-400" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: displayDuration })
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: "text-base font-bold text-gray-900 line-clamp-2 leading-snug", children: title }),
+          description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-sm text-gray-500 line-clamp-3 leading-relaxed", children: stripHtml(description) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex-1" }),
+          showProgress && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-2 overflow-hidden rounded-full bg-gray-100", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "div",
+              {
+                className: "h-full rounded-full bg-[rgb(var(--accent-primary))] transition-all duration-300",
+                style: { width: `${clampedProgress}%` }
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between text-xs", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-gray-400" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "text-gray-500", children: [
+                isBundle ? "Course" : "Lesson",
+                " ",
+                Math.ceil(clampedProgress / 100 * totalLessons),
+                " of ",
+                totalLessons
+              ] })
+            ] })
+          ] }),
+          showPrice && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between pt-3 border-t border-gray-100", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
+              instructorAvatar ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "w-7 h-7 rounded-full overflow-hidden flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: instructorAvatar, alt: displayInstructorName, className: "w-full h-full object-cover" }) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "w-7 h-7 rounded-full bg-gray-200 flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-[10px] font-semibold text-gray-500", children: displayInstructorName.charAt(0).toUpperCase() }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-sm text-gray-600 font-medium truncate max-w-[80px]", children: displayInstructorName })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
+              !isFree && originalPrice && originalPrice > price && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "text-sm text-gray-400 line-through", children: [
+                "$",
+                originalPrice
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-lg font-bold text-[rgb(var(--accent-primary))]", children: isFree ? "Free" : `$${price}` })
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/molecules/Pagination.tsx
+var import_lucide_react2 = require("lucide-react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function Pagination({
+  currentPage,
+  totalPages,
+  total,
+  pageSize,
+  hasNextPage,
+  hasPreviousPage,
+  onPageChange,
+  maxVisiblePages = 5,
+  className
+}) {
+  const renderPageNumbers = () => {
+    const pages = [];
+    let startPage = Math.max(1, currentPage - Math.floor(maxVisiblePages / 2));
+    let endPage = Math.min(totalPages, startPage + maxVisiblePages - 1);
+    if (endPage - startPage < maxVisiblePages - 1) {
+      startPage = Math.max(1, endPage - maxVisiblePages + 1);
+    }
+    for (let i = startPage; i <= endPage; i++) {
+      pages.push(
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "button",
+          {
+            onClick: () => onPageChange(i),
+            className: cn(
+              "px-3 py-1 rounded cursor-pointer transition-colors",
+              i === currentPage ? "bg-theme-accent-primary text-white" : "text-theme-text-primary border border-theme-border-primary hover:bg-theme-bg-tertiary"
+            ),
+            children: i
+          },
+          i
+        )
+      );
+    }
+    return pages;
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: cn("flex items-center justify-between border-t border-theme-border-primary pt-4", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "text-sm text-theme-text-secondary", children: [
+      "Showing ",
+      (currentPage - 1) * pageSize + 1,
+      " to ",
+      Math.min(currentPage * pageSize, total),
+      " of ",
+      total,
+      " results"
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "button",
+        {
+          onClick: () => onPageChange(currentPage - 1),
+          disabled: !hasPreviousPage,
+          className: "p-2 rounded border border-theme-border-primary hover:bg-theme-bg-tertiary disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition-colors",
+          "aria-label": "Previous page",
+          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react2.ChevronLeft, { className: "h-4 w-4" })
+        }
+      ),
+      renderPageNumbers(),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "button",
+        {
+          onClick: () => onPageChange(currentPage + 1),
+          disabled: !hasNextPage,
+          className: "p-2 rounded border border-theme-border-primary hover:bg-theme-bg-tertiary disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition-colors",
+          "aria-label": "Next page",
+          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react2.ChevronRight, { className: "h-4 w-4" })
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/components/molecules/PageHeader.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function PageHeader({ title, description, actions, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: cn("flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-6", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h1", { className: "text-2xl font-bold text-theme-text-primary", children: title }),
+      description && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "text-sm text-theme-text-secondary mt-1", children: description })
+    ] }),
+    actions && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex items-center gap-2", children: actions })
+  ] });
+}
+
+// src/components/molecules/SearchInput.tsx
+var import_lucide_react3 = require("lucide-react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function SearchInput({ value, onChange, placeholder = "Search...", className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: cn("relative", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react3.Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-theme-text-muted" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "input",
+      {
+        type: "text",
+        value,
+        onChange: (e) => onChange(e.target.value),
+        placeholder,
+        className: "w-full pl-10 pr-10 py-2 text-sm rounded-lg border border-theme-border-primary bg-theme-bg-primary text-theme-text-primary placeholder:text-[rgb(var(--text-muted))] focus:outline-none focus:border-theme-accent-primary transition-colors"
+      }
+    ),
+    value && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "button",
+      {
+        onClick: () => onChange(""),
+        className: "absolute right-3 top-1/2 -translate-y-1/2 text-theme-text-muted hover:text-theme-text-primary cursor-pointer",
+        "aria-label": "Clear search",
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react3.X, { className: "h-4 w-4" })
+      }
+    )
+  ] });
+}
+
+// src/components/molecules/EmptyState.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function EmptyState({ icon, title, description, action, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: cn("flex flex-col items-center justify-center py-12 text-center", className), children: [
+    icon && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "mb-4 text-theme-text-muted", children: icon }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h3", { className: "text-lg font-semibold text-theme-text-primary", children: title }),
+    description && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mt-2 text-sm text-theme-text-secondary max-w-md", children: description }),
+    action && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "mt-4", children: action })
+  ] });
+}
+
+// src/components/molecules/LoadingSpinner.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var sizeClasses = {
+  sm: "h-4 w-4",
+  md: "h-8 w-8",
+  lg: "h-12 w-12"
+};
+function LoadingSpinner({ size = "md", className, text }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: cn("flex flex-col items-center justify-center gap-3", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "div",
+      {
+        className: cn(
+          "animate-spin rounded-full border-2 border-theme-bg-tertiary border-t-theme-accent-primary",
+          sizeClasses[size]
+        )
+      }
+    ),
+    text && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "text-sm text-theme-text-secondary", children: text })
+  ] });
+}

package/dist/components/molecules/index.js

@@ -0,0 +1,311 @@
+// src/components/molecules/CourseCard.tsx
+import { useState } from "react";
+import { BookOpen, Clock, Grid2X2 } from "lucide-react";
+
+// src/components/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/components/molecules/CourseCard.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function CourseCard({
+  id,
+  title,
+  thumbnail,
+  thumbnails,
+  totalLessons,
+  progress,
+  status,
+  isFree,
+  price = 0,
+  currency = "USD",
+  description,
+  showPrice = true,
+  showProgress = true,
+  category,
+  duration,
+  instructorName,
+  instructorAvatar,
+  originalPrice,
+  isBundle = false,
+  onClick,
+  className
+}) {
+  const [imageError, setImageError] = useState(false);
+  const clampedProgress = Math.min(Math.max(progress, 0), 100);
+  const stripHtml = (html) => {
+    if (typeof document === "undefined") return html;
+    const tmp = document.createElement("div");
+    tmp.innerHTML = html;
+    return tmp.textContent || tmp.innerText || "";
+  };
+  const displayCategory = category || "Design";
+  const displayDuration = duration || "3 Month";
+  const displayInstructorName = instructorName || (description ? stripHtml(description).slice(0, 15) : "Instructor");
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "group overflow-hidden rounded-2xl border border-gray-100 bg-white shadow-sm hover:shadow-lg transition-all duration-300 hover:-translate-y-1 h-full flex flex-col min-w-0 w-full cursor-pointer",
+        className
+      ),
+      onClick,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "relative h-[238.66px] w-full overflow-hidden mx-auto px-3 pt-3", children: [
+          /* @__PURE__ */ jsx("div", { className: "relative w-full h-full rounded-xl overflow-hidden bg-gray-100", children: isBundle && thumbnails && thumbnails.length > 0 && !imageError ? /* @__PURE__ */ jsxs("div", { className: "relative w-full h-full flex", children: [
+            /* @__PURE__ */ jsx("div", { className: "relative h-full w-1/2", children: /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: thumbnails[0],
+                alt: `${title} - image 1`,
+                className: "w-full h-full object-cover transition-transform duration-300 group-hover:scale-110",
+                onError: () => setImageError(true)
+              }
+            ) }),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col w-1/2 h-full", children: [
+              thumbnails[1] && /* @__PURE__ */ jsx("div", { className: cn("relative w-full overflow-hidden", thumbnails.length > 2 ? "h-1/2" : "h-full"), children: /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: thumbnails[1],
+                  alt: `${title} - image 2`,
+                  className: "w-full h-full object-cover transition-transform duration-300 group-hover:scale-110",
+                  onError: () => setImageError(true)
+                }
+              ) }),
+              thumbnails.length > 2 && thumbnails[2] && /* @__PURE__ */ jsx("div", { className: "relative w-full h-1/2 overflow-hidden", children: /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: thumbnails[2],
+                  alt: `${title} - image 3`,
+                  className: "w-full h-full object-cover transition-transform duration-300 group-hover:scale-110",
+                  onError: () => setImageError(true)
+                }
+              ) })
+            ] })
+          ] }) : thumbnail && !imageError ? /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: thumbnail,
+              alt: title,
+              className: "w-full h-full object-cover transition-transform duration-300 group-hover:scale-110",
+              onError: () => setImageError(true)
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: "w-full h-full flex items-center justify-center bg-gray-200", children: /* @__PURE__ */ jsx(BookOpen, { className: "w-12 h-12 text-gray-400" }) }) }),
+          status && /* @__PURE__ */ jsx("div", { className: "absolute right-6 top-5", children: /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: `rounded-full px-3 py-1.5 text-xs font-medium text-white shadow-md ${status === "completed" ? "bg-green-500" : "bg-[rgb(var(--accent-primary))]"}`,
+              children: status
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "p-5 space-y-3 flex-1 flex flex-col min-w-0", children: [
+          (displayCategory || displayDuration) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-xs text-gray-500", children: [
+            displayCategory && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+              /* @__PURE__ */ jsx(Grid2X2, { className: "w-3.5 h-3.5 text-gray-400" }),
+              /* @__PURE__ */ jsx("span", { children: displayCategory })
+            ] }),
+            displayDuration && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+              /* @__PURE__ */ jsx(Clock, { className: "w-3.5 h-3.5 text-gray-400" }),
+              /* @__PURE__ */ jsx("span", { children: displayDuration })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("h3", { className: "text-base font-bold text-gray-900 line-clamp-2 leading-snug", children: title }),
+          description && /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 line-clamp-3 leading-relaxed", children: stripHtml(description) }),
+          /* @__PURE__ */ jsx("div", { className: "flex-1" }),
+          showProgress && /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsx("div", { className: "h-2 overflow-hidden rounded-full bg-gray-100", children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "h-full rounded-full bg-[rgb(var(--accent-primary))] transition-all duration-300",
+                style: { width: `${clampedProgress}%` }
+              }
+            ) }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-xs", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-gray-400" }),
+              /* @__PURE__ */ jsxs("span", { className: "text-gray-500", children: [
+                isBundle ? "Course" : "Lesson",
+                " ",
+                Math.ceil(clampedProgress / 100 * totalLessons),
+                " of ",
+                totalLessons
+              ] })
+            ] })
+          ] }),
+          showPrice && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between pt-3 border-t border-gray-100", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              instructorAvatar ? /* @__PURE__ */ jsx("div", { className: "w-7 h-7 rounded-full overflow-hidden flex-shrink-0", children: /* @__PURE__ */ jsx("img", { src: instructorAvatar, alt: displayInstructorName, className: "w-full h-full object-cover" }) }) : /* @__PURE__ */ jsx("div", { className: "w-7 h-7 rounded-full bg-gray-200 flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsx("span", { className: "text-[10px] font-semibold text-gray-500", children: displayInstructorName.charAt(0).toUpperCase() }) }),
+              /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-600 font-medium truncate max-w-[80px]", children: displayInstructorName })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              !isFree && originalPrice && originalPrice > price && /* @__PURE__ */ jsxs("span", { className: "text-sm text-gray-400 line-through", children: [
+                "$",
+                originalPrice
+              ] }),
+              /* @__PURE__ */ jsx("span", { className: "text-lg font-bold text-[rgb(var(--accent-primary))]", children: isFree ? "Free" : `$${price}` })
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/molecules/Pagination.tsx
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function Pagination({
+  currentPage,
+  totalPages,
+  total,
+  pageSize,
+  hasNextPage,
+  hasPreviousPage,
+  onPageChange,
+  maxVisiblePages = 5,
+  className
+}) {
+  const renderPageNumbers = () => {
+    const pages = [];
+    let startPage = Math.max(1, currentPage - Math.floor(maxVisiblePages / 2));
+    let endPage = Math.min(totalPages, startPage + maxVisiblePages - 1);
+    if (endPage - startPage < maxVisiblePages - 1) {
+      startPage = Math.max(1, endPage - maxVisiblePages + 1);
+    }
+    for (let i = startPage; i <= endPage; i++) {
+      pages.push(
+        /* @__PURE__ */ jsx2(
+          "button",
+          {
+            onClick: () => onPageChange(i),
+            className: cn(
+              "px-3 py-1 rounded cursor-pointer transition-colors",
+              i === currentPage ? "bg-theme-accent-primary text-white" : "text-theme-text-primary border border-theme-border-primary hover:bg-theme-bg-tertiary"
+            ),
+            children: i
+          },
+          i
+        )
+      );
+    }
+    return pages;
+  };
+  return /* @__PURE__ */ jsxs2("div", { className: cn("flex items-center justify-between border-t border-theme-border-primary pt-4", className), children: [
+    /* @__PURE__ */ jsxs2("div", { className: "text-sm text-theme-text-secondary", children: [
+      "Showing ",
+      (currentPage - 1) * pageSize + 1,
+      " to ",
+      Math.min(currentPage * pageSize, total),
+      " of ",
+      total,
+      " results"
+    ] }),
+    /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx2(
+        "button",
+        {
+          onClick: () => onPageChange(currentPage - 1),
+          disabled: !hasPreviousPage,
+          className: "p-2 rounded border border-theme-border-primary hover:bg-theme-bg-tertiary disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition-colors",
+          "aria-label": "Previous page",
+          children: /* @__PURE__ */ jsx2(ChevronLeft, { className: "h-4 w-4" })
+        }
+      ),
+      renderPageNumbers(),
+      /* @__PURE__ */ jsx2(
+        "button",
+        {
+          onClick: () => onPageChange(currentPage + 1),
+          disabled: !hasNextPage,
+          className: "p-2 rounded border border-theme-border-primary hover:bg-theme-bg-tertiary disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition-colors",
+          "aria-label": "Next page",
+          children: /* @__PURE__ */ jsx2(ChevronRight, { className: "h-4 w-4" })
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/components/molecules/PageHeader.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function PageHeader({ title, description, actions, className }) {
+  return /* @__PURE__ */ jsxs3("div", { className: cn("flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-6", className), children: [
+    /* @__PURE__ */ jsxs3("div", { children: [
+      /* @__PURE__ */ jsx3("h1", { className: "text-2xl font-bold text-theme-text-primary", children: title }),
+      description && /* @__PURE__ */ jsx3("p", { className: "text-sm text-theme-text-secondary mt-1", children: description })
+    ] }),
+    actions && /* @__PURE__ */ jsx3("div", { className: "flex items-center gap-2", children: actions })
+  ] });
+}
+
+// src/components/molecules/SearchInput.tsx
+import { Search, X } from "lucide-react";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function SearchInput({ value, onChange, placeholder = "Search...", className }) {
+  return /* @__PURE__ */ jsxs4("div", { className: cn("relative", className), children: [
+    /* @__PURE__ */ jsx4(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-theme-text-muted" }),
+    /* @__PURE__ */ jsx4(
+      "input",
+      {
+        type: "text",
+        value,
+        onChange: (e) => onChange(e.target.value),
+        placeholder,
+        className: "w-full pl-10 pr-10 py-2 text-sm rounded-lg border border-theme-border-primary bg-theme-bg-primary text-theme-text-primary placeholder:text-[rgb(var(--text-muted))] focus:outline-none focus:border-theme-accent-primary transition-colors"
+      }
+    ),
+    value && /* @__PURE__ */ jsx4(
+      "button",
+      {
+        onClick: () => onChange(""),
+        className: "absolute right-3 top-1/2 -translate-y-1/2 text-theme-text-muted hover:text-theme-text-primary cursor-pointer",
+        "aria-label": "Clear search",
+        children: /* @__PURE__ */ jsx4(X, { className: "h-4 w-4" })
+      }
+    )
+  ] });
+}
+
+// src/components/molecules/EmptyState.tsx
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function EmptyState({ icon, title, description, action, className }) {
+  return /* @__PURE__ */ jsxs5("div", { className: cn("flex flex-col items-center justify-center py-12 text-center", className), children: [
+    icon && /* @__PURE__ */ jsx5("div", { className: "mb-4 text-theme-text-muted", children: icon }),
+    /* @__PURE__ */ jsx5("h3", { className: "text-lg font-semibold text-theme-text-primary", children: title }),
+    description && /* @__PURE__ */ jsx5("p", { className: "mt-2 text-sm text-theme-text-secondary max-w-md", children: description }),
+    action && /* @__PURE__ */ jsx5("div", { className: "mt-4", children: action })
+  ] });
+}
+
+// src/components/molecules/LoadingSpinner.tsx
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+var sizeClasses = {
+  sm: "h-4 w-4",
+  md: "h-8 w-8",
+  lg: "h-12 w-12"
+};
+function LoadingSpinner({ size = "md", className, text }) {
+  return /* @__PURE__ */ jsxs6("div", { className: cn("flex flex-col items-center justify-center gap-3", className), children: [
+    /* @__PURE__ */ jsx6(
+      "div",
+      {
+        className: cn(
+          "animate-spin rounded-full border-2 border-theme-bg-tertiary border-t-theme-accent-primary",
+          sizeClasses[size]
+        )
+      }
+    ),
+    text && /* @__PURE__ */ jsx6("p", { className: "text-sm text-theme-text-secondary", children: text })
+  ] });
+}
+export {
+  CourseCard,
+  EmptyState,
+  LoadingSpinner,
+  PageHeader,
+  Pagination,
+  SearchInput
+};