@haroonwaves/blog-kit-react 0.0.4

package/README.md

@@ -0,0 +1,38 @@
+# @haroonwaves/blog-kit-react
+
+React components and hooks for rendering markdown blogs. Includes blog renderer with syntax
+highlighting, blog cards, lists, and search functionality.
+
+## Installation
+
+```bash
+npm install @haroonwaves/blog-kit-react
+# or
+pnpm add @haroonwaves/blog-kit-react
+# or
+yarn add @haroonwaves/blog-kit-react
+```
+
+**Note:** This package requires React 18+ as a peer dependency.
+
+## Documentation
+
+For complete documentation, API reference, and examples, please visit the
+[main documentation](https://github.com/haroonwaves/blog-kit).
+
+## Quick Links
+
+- [React Package Usage](https://github.com/haroonwaves/blog-kit#react-package)
+- [Components Reference](https://github.com/haroonwaves/blog-kit#react-package)
+- [useBlogs Hook](https://github.com/haroonwaves/blog-kit#useblogs-hook)
+- [Complete Example](https://github.com/haroonwaves/blog-kit#complete-example)
+- [Next.js Integration](https://github.com/haroonwaves/blog-kit#nextjs-integration)
+
+## Related Packages
+
+- [@haroonwaves/blog-kit-core](https://www.npmjs.com/package/@haroonwaves/blog-kit-core) - Core
+  utilities for parsing markdown files
+
+## License
+
+ISC

package/dist/index.cjs

@@ -0,0 +1,224 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  BlogCard: () => BlogCard,
+  BlogList: () => BlogList,
+  BlogPlaceholder: () => BlogPlaceholder,
+  MarkdownRenderer: () => BlogRenderer,
+  useBlogs: () => useBlogs
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/components/MarkdownRenderer.tsx
+var import_react_markdown = __toESM(require("react-markdown"), 1);
+var import_remark_gfm = __toESM(require("remark-gfm"), 1);
+var import_rehype_prism_plus = __toESM(require("rehype-prism-plus"), 1);
+var import_rehype_raw = __toESM(require("rehype-raw"), 1);
+var import_jsx_runtime = require("react/jsx-runtime");
+function BlogRenderer({ content, className = "", components }) {
+  const defaultComponents = {
+    h1: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", { className: "text-4xl font-bold mb-4 mt-8 text-gray-800", ...props }),
+    h2: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { className: "text-3xl font-bold mb-3 mt-6 text-gray-800", ...props }),
+    h3: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: "text-2xl font-semibold mb-2 mt-4 text-gray-800", ...props }),
+    h4: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h4", { className: "text-xl font-semibold mb-2 mt-4 text-gray-800", ...props }),
+    h5: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h5", { className: "text-lg font-semibold mb-2 mt-3 text-gray-800", ...props }),
+    h6: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h6", { className: "text-base font-semibold mb-2 mt-3 text-gray-800", ...props }),
+    p: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "mb-4 leading-7 text-gray-600", ...props }),
+    ul: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { className: "mb-4 ml-6 list-disc text-gray-600", ...props }),
+    ol: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ol", { className: "mb-4 ml-6 list-decimal text-gray-600", ...props }),
+    li: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { className: "mb-2", ...props }),
+    code: ({ className: codeClassName, children, ...props }) => {
+      const isInline = !codeClassName;
+      return isInline ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", { className: "px-1.5 py-0.5 bg-gray-100 rounded text-sm text-red-600", ...props, children }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", { className: codeClassName, ...props, children });
+    },
+    pre: ({ className: preClassName, children, ...props }) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "pre",
+        {
+          className: `mb-4 rounded-lg overflow-x-auto [&>code]:block [&>code]:p-4 ${preClassName || ""}`,
+          ...props,
+          children
+        }
+      );
+    },
+    blockquote: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "blockquote",
+      {
+        className: "border-l-4 border-blue-500 pl-4 italic my-4 text-gray-600",
+        ...props
+      }
+    ),
+    a: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { className: "text-blue-600 hover:text-blue-800 underline", ...props }),
+    strong: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { className: "font-semibold text-gray-800", ...props }),
+    em: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("em", { className: "italic", ...props }),
+    del: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("del", { className: "line-through text-gray-500", ...props }),
+    hr: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("hr", { className: "my-8 border-gray-300", ...props }),
+    br: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("br", { ...props }),
+    img: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { className: "max-w-full h-auto rounded-lg my-4", ...props }),
+    table: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "overflow-x-auto my-4", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("table", { className: "min-w-full border border-gray-300 rounded", ...props }) }),
+    thead: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("thead", { className: "bg-gray-50", ...props }),
+    tbody: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", { ...props }),
+    tr: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { className: "border-b border-gray-300", ...props }),
+    th: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { className: "px-4 py-2 text-left font-semibold border border-gray-300", ...props }),
+    td: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { className: "px-4 py-2 border border-gray-300", ...props }),
+    input: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { className: "mr-2", type: "checkbox", disabled: true, ...props })
+  };
+  const mergedComponents = { ...defaultComponents, ...components };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `prose prose-slate max-w-none ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_react_markdown.default,
+    {
+      remarkPlugins: [import_remark_gfm.default],
+      rehypePlugins: [import_rehype_raw.default, import_rehype_prism_plus.default],
+      components: mergedComponents,
+      children: content
+    }
+  ) });
+}
+
+// src/components/BlogCard.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function BlogCard({
+  blog,
+  basePath = "/blog",
+  renderLink,
+  className = "",
+  showCategory = true,
+  showReadingTime = true,
+  showDate = true
+}) {
+  const href = `${basePath}/${blog.slug}`;
+  const defaultLink = (href2, children) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("a", { href: href2, children });
+  const Link = renderLink || defaultLink;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "article",
+    {
+      className: `bg-white rounded-lg border border-gray-200 hover:border-gray-300 p-6 transition-colors ${className}`,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex items-center justify-between mb-3", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center gap-3", children: [
+          showCategory && blog.category && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "inline-flex items-center rounded-full border border-transparent bg-orange-100 px-2.5 py-0.5 text-xs font-semibold text-orange-500", children: blog.category }),
+          (showReadingTime || showDate) && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center gap-2 text-sm text-gray-500", children: [
+            showReadingTime && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: blog.readingTime }),
+            showReadingTime && showDate && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "\u2022" }),
+            showDate && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("time", { dateTime: blog.date, children: new Date(blog.date).toLocaleDateString("en-US", {
+              year: "numeric",
+              month: "long",
+              day: "numeric"
+            }) })
+          ] })
+        ] }) }),
+        Link(
+          href,
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h2", { className: "font-semibold text-xl text-gray-700 mb-2 hover:underline transition-colors", children: blog.title })
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-sm text-gray-500 leading-6 mb-4", children: blog.description }),
+        Link(
+          href,
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "inline-flex items-center text-blue-600 hover:text-blue-700 font-medium text-sm", children: "Read more \u2192" })
+        )
+      ]
+    }
+  );
+}
+
+// src/components/BlogList.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function BlogList({
+  blogs,
+  basePath = "/blog",
+  renderLink,
+  className = "",
+  emptyMessage = "No blog posts found.",
+  cardProps
+}) {
+  if (blogs.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: `text-center text-gray-500 py-12 ${className}`, children: emptyMessage });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: `space-y-6 ${className}`, children: blogs.map((blog) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    BlogCard,
+    {
+      blog,
+      basePath,
+      renderLink,
+      ...cardProps
+    },
+    blog.slug
+  )) });
+}
+
+// src/components/BlogPlaceholder.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function BlogPlaceholder({ count = 3, className = "" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: `space-y-6 ${className}`, children: Array.from({ length: count }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "bg-white rounded-lg border border-gray-200 p-6 animate-pulse", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "h-4 bg-gray-200 rounded mb-3" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "h-6 bg-gray-200 rounded mb-2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "h-4 bg-gray-200 rounded w-3/4" })
+  ] }, i)) });
+}
+
+// src/hooks/useBlogs.ts
+var import_react = require("react");
+function useBlogs(blogs) {
+  const [filteredBlogs, setFilteredBlogs] = (0, import_react.useState)(blogs);
+  const [searchTerm, setSearchTerm] = (0, import_react.useState)("");
+  const [selectedCategory, setSelectedCategory] = (0, import_react.useState)(null);
+  (0, import_react.useEffect)(() => {
+    let filtered = blogs;
+    if (searchTerm) {
+      filtered = filtered.filter(
+        (blog) => blog.title.toLowerCase().includes(searchTerm.toLowerCase()) || blog.description.toLowerCase().includes(searchTerm.toLowerCase())
+      );
+    }
+    if (selectedCategory) {
+      filtered = filtered.filter((blog) => blog.category === selectedCategory);
+    }
+    setFilteredBlogs(filtered);
+  }, [blogs, searchTerm, selectedCategory]);
+  const categories = Array.from(
+    new Set(blogs.map((blog) => blog.category).filter(Boolean))
+  );
+  return {
+    blogs: filteredBlogs,
+    searchTerm,
+    setSearchTerm,
+    selectedCategory,
+    setSelectedCategory,
+    categories
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  BlogCard,
+  BlogList,
+  BlogPlaceholder,
+  MarkdownRenderer,
+  useBlogs
+});

package/dist/index.css

@@ -0,0 +1,3 @@
+@import "prismjs/themes/prism-tomorrow.css";
+
+/* src/prism.css */

package/dist/index.d.cts

@@ -0,0 +1,66 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import react__default from 'react';
+
+interface BlogMeta {
+    title: string;
+    description: string;
+    date: string;
+    category?: string;
+    slug: string;
+    readingTime: string;
+}
+interface Blog {
+    metadata: BlogMeta;
+    content: string;
+    readingTime: string;
+}
+interface BlogConfig {
+    contentDirectory: string;
+    blogSubdirectory?: string;
+}
+
+interface BlogRendererProps {
+    content: string;
+    className?: string;
+    components?: Record<string, react__default.ComponentType<any>>;
+}
+declare function BlogRenderer({ content, className, components }: BlogRendererProps): react_jsx_runtime.JSX.Element;
+
+interface BlogCardProps {
+    blog: BlogMeta;
+    basePath?: string;
+    renderLink?: (href: string, children: react__default.ReactNode) => react__default.ReactNode;
+    className?: string;
+    showCategory?: boolean;
+    showReadingTime?: boolean;
+    showDate?: boolean;
+}
+declare function BlogCard({ blog, basePath, renderLink, className, showCategory, showReadingTime, showDate, }: BlogCardProps): react_jsx_runtime.JSX.Element;
+
+interface BlogListProps {
+    blogs: BlogMeta[];
+    basePath?: string;
+    renderLink?: BlogCardProps['renderLink'];
+    className?: string;
+    emptyMessage?: string;
+    cardProps?: Omit<BlogCardProps, 'blog' | 'basePath' | 'renderLink'>;
+}
+declare function BlogList({ blogs, basePath, renderLink, className, emptyMessage, cardProps, }: BlogListProps): react_jsx_runtime.JSX.Element;
+
+interface BlogPlaceholderProps {
+    count?: number;
+    className?: string;
+}
+declare function BlogPlaceholder({ count, className }: BlogPlaceholderProps): react_jsx_runtime.JSX.Element;
+
+declare function useBlogs(blogs: BlogMeta[]): {
+    blogs: BlogMeta[];
+    searchTerm: string;
+    setSearchTerm: react.Dispatch<react.SetStateAction<string>>;
+    selectedCategory: string | null;
+    setSelectedCategory: react.Dispatch<react.SetStateAction<string | null>>;
+    categories: string[];
+};
+
+export { type Blog, BlogCard, type BlogCardProps, type BlogConfig, BlogList, type BlogListProps, type BlogMeta, BlogPlaceholder, type BlogPlaceholderProps, BlogRenderer as MarkdownRenderer, type BlogRendererProps as MarkdownRendererProps, useBlogs };

package/dist/index.d.ts

@@ -0,0 +1,66 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import react__default from 'react';
+
+interface BlogMeta {
+    title: string;
+    description: string;
+    date: string;
+    category?: string;
+    slug: string;
+    readingTime: string;
+}
+interface Blog {
+    metadata: BlogMeta;
+    content: string;
+    readingTime: string;
+}
+interface BlogConfig {
+    contentDirectory: string;
+    blogSubdirectory?: string;
+}
+
+interface BlogRendererProps {
+    content: string;
+    className?: string;
+    components?: Record<string, react__default.ComponentType<any>>;
+}
+declare function BlogRenderer({ content, className, components }: BlogRendererProps): react_jsx_runtime.JSX.Element;
+
+interface BlogCardProps {
+    blog: BlogMeta;
+    basePath?: string;
+    renderLink?: (href: string, children: react__default.ReactNode) => react__default.ReactNode;
+    className?: string;
+    showCategory?: boolean;
+    showReadingTime?: boolean;
+    showDate?: boolean;
+}
+declare function BlogCard({ blog, basePath, renderLink, className, showCategory, showReadingTime, showDate, }: BlogCardProps): react_jsx_runtime.JSX.Element;
+
+interface BlogListProps {
+    blogs: BlogMeta[];
+    basePath?: string;
+    renderLink?: BlogCardProps['renderLink'];
+    className?: string;
+    emptyMessage?: string;
+    cardProps?: Omit<BlogCardProps, 'blog' | 'basePath' | 'renderLink'>;
+}
+declare function BlogList({ blogs, basePath, renderLink, className, emptyMessage, cardProps, }: BlogListProps): react_jsx_runtime.JSX.Element;
+
+interface BlogPlaceholderProps {
+    count?: number;
+    className?: string;
+}
+declare function BlogPlaceholder({ count, className }: BlogPlaceholderProps): react_jsx_runtime.JSX.Element;
+
+declare function useBlogs(blogs: BlogMeta[]): {
+    blogs: BlogMeta[];
+    searchTerm: string;
+    setSearchTerm: react.Dispatch<react.SetStateAction<string>>;
+    selectedCategory: string | null;
+    setSelectedCategory: react.Dispatch<react.SetStateAction<string | null>>;
+    categories: string[];
+};
+
+export { type Blog, BlogCard, type BlogCardProps, type BlogConfig, BlogList, type BlogListProps, type BlogMeta, BlogPlaceholder, type BlogPlaceholderProps, BlogRenderer as MarkdownRenderer, type BlogRendererProps as MarkdownRendererProps, useBlogs };

package/dist/index.js

@@ -0,0 +1,183 @@
+// src/components/MarkdownRenderer.tsx
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import rehypePrismPlus from "rehype-prism-plus";
+import rehypeRaw from "rehype-raw";
+import { jsx } from "react/jsx-runtime";
+function BlogRenderer({ content, className = "", components }) {
+  const defaultComponents = {
+    h1: ({ ...props }) => /* @__PURE__ */ jsx("h1", { className: "text-4xl font-bold mb-4 mt-8 text-gray-800", ...props }),
+    h2: ({ ...props }) => /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold mb-3 mt-6 text-gray-800", ...props }),
+    h3: ({ ...props }) => /* @__PURE__ */ jsx("h3", { className: "text-2xl font-semibold mb-2 mt-4 text-gray-800", ...props }),
+    h4: ({ ...props }) => /* @__PURE__ */ jsx("h4", { className: "text-xl font-semibold mb-2 mt-4 text-gray-800", ...props }),
+    h5: ({ ...props }) => /* @__PURE__ */ jsx("h5", { className: "text-lg font-semibold mb-2 mt-3 text-gray-800", ...props }),
+    h6: ({ ...props }) => /* @__PURE__ */ jsx("h6", { className: "text-base font-semibold mb-2 mt-3 text-gray-800", ...props }),
+    p: ({ ...props }) => /* @__PURE__ */ jsx("p", { className: "mb-4 leading-7 text-gray-600", ...props }),
+    ul: ({ ...props }) => /* @__PURE__ */ jsx("ul", { className: "mb-4 ml-6 list-disc text-gray-600", ...props }),
+    ol: ({ ...props }) => /* @__PURE__ */ jsx("ol", { className: "mb-4 ml-6 list-decimal text-gray-600", ...props }),
+    li: ({ ...props }) => /* @__PURE__ */ jsx("li", { className: "mb-2", ...props }),
+    code: ({ className: codeClassName, children, ...props }) => {
+      const isInline = !codeClassName;
+      return isInline ? /* @__PURE__ */ jsx("code", { className: "px-1.5 py-0.5 bg-gray-100 rounded text-sm text-red-600", ...props, children }) : /* @__PURE__ */ jsx("code", { className: codeClassName, ...props, children });
+    },
+    pre: ({ className: preClassName, children, ...props }) => {
+      return /* @__PURE__ */ jsx(
+        "pre",
+        {
+          className: `mb-4 rounded-lg overflow-x-auto [&>code]:block [&>code]:p-4 ${preClassName || ""}`,
+          ...props,
+          children
+        }
+      );
+    },
+    blockquote: ({ ...props }) => /* @__PURE__ */ jsx(
+      "blockquote",
+      {
+        className: "border-l-4 border-blue-500 pl-4 italic my-4 text-gray-600",
+        ...props
+      }
+    ),
+    a: ({ ...props }) => /* @__PURE__ */ jsx("a", { className: "text-blue-600 hover:text-blue-800 underline", ...props }),
+    strong: ({ ...props }) => /* @__PURE__ */ jsx("strong", { className: "font-semibold text-gray-800", ...props }),
+    em: ({ ...props }) => /* @__PURE__ */ jsx("em", { className: "italic", ...props }),
+    del: ({ ...props }) => /* @__PURE__ */ jsx("del", { className: "line-through text-gray-500", ...props }),
+    hr: ({ ...props }) => /* @__PURE__ */ jsx("hr", { className: "my-8 border-gray-300", ...props }),
+    br: ({ ...props }) => /* @__PURE__ */ jsx("br", { ...props }),
+    img: ({ ...props }) => /* @__PURE__ */ jsx("img", { className: "max-w-full h-auto rounded-lg my-4", ...props }),
+    table: ({ ...props }) => /* @__PURE__ */ jsx("div", { className: "overflow-x-auto my-4", children: /* @__PURE__ */ jsx("table", { className: "min-w-full border border-gray-300 rounded", ...props }) }),
+    thead: ({ ...props }) => /* @__PURE__ */ jsx("thead", { className: "bg-gray-50", ...props }),
+    tbody: ({ ...props }) => /* @__PURE__ */ jsx("tbody", { ...props }),
+    tr: ({ ...props }) => /* @__PURE__ */ jsx("tr", { className: "border-b border-gray-300", ...props }),
+    th: ({ ...props }) => /* @__PURE__ */ jsx("th", { className: "px-4 py-2 text-left font-semibold border border-gray-300", ...props }),
+    td: ({ ...props }) => /* @__PURE__ */ jsx("td", { className: "px-4 py-2 border border-gray-300", ...props }),
+    input: ({ ...props }) => /* @__PURE__ */ jsx("input", { className: "mr-2", type: "checkbox", disabled: true, ...props })
+  };
+  const mergedComponents = { ...defaultComponents, ...components };
+  return /* @__PURE__ */ jsx("div", { className: `prose prose-slate max-w-none ${className}`, children: /* @__PURE__ */ jsx(
+    ReactMarkdown,
+    {
+      remarkPlugins: [remarkGfm],
+      rehypePlugins: [rehypeRaw, rehypePrismPlus],
+      components: mergedComponents,
+      children: content
+    }
+  ) });
+}
+
+// src/components/BlogCard.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function BlogCard({
+  blog,
+  basePath = "/blog",
+  renderLink,
+  className = "",
+  showCategory = true,
+  showReadingTime = true,
+  showDate = true
+}) {
+  const href = `${basePath}/${blog.slug}`;
+  const defaultLink = (href2, children) => /* @__PURE__ */ jsx2("a", { href: href2, children });
+  const Link = renderLink || defaultLink;
+  return /* @__PURE__ */ jsxs(
+    "article",
+    {
+      className: `bg-white rounded-lg border border-gray-200 hover:border-gray-300 p-6 transition-colors ${className}`,
+      children: [
+        /* @__PURE__ */ jsx2("div", { className: "flex items-center justify-between mb-3", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+          showCategory && blog.category && /* @__PURE__ */ jsx2("span", { className: "inline-flex items-center rounded-full border border-transparent bg-orange-100 px-2.5 py-0.5 text-xs font-semibold text-orange-500", children: blog.category }),
+          (showReadingTime || showDate) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm text-gray-500", children: [
+            showReadingTime && /* @__PURE__ */ jsx2("span", { children: blog.readingTime }),
+            showReadingTime && showDate && /* @__PURE__ */ jsx2("span", { children: "\u2022" }),
+            showDate && /* @__PURE__ */ jsx2("time", { dateTime: blog.date, children: new Date(blog.date).toLocaleDateString("en-US", {
+              year: "numeric",
+              month: "long",
+              day: "numeric"
+            }) })
+          ] })
+        ] }) }),
+        Link(
+          href,
+          /* @__PURE__ */ jsx2("h2", { className: "font-semibold text-xl text-gray-700 mb-2 hover:underline transition-colors", children: blog.title })
+        ),
+        /* @__PURE__ */ jsx2("p", { className: "text-sm text-gray-500 leading-6 mb-4", children: blog.description }),
+        Link(
+          href,
+          /* @__PURE__ */ jsx2("span", { className: "inline-flex items-center text-blue-600 hover:text-blue-700 font-medium text-sm", children: "Read more \u2192" })
+        )
+      ]
+    }
+  );
+}
+
+// src/components/BlogList.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function BlogList({
+  blogs,
+  basePath = "/blog",
+  renderLink,
+  className = "",
+  emptyMessage = "No blog posts found.",
+  cardProps
+}) {
+  if (blogs.length === 0) {
+    return /* @__PURE__ */ jsx3("div", { className: `text-center text-gray-500 py-12 ${className}`, children: emptyMessage });
+  }
+  return /* @__PURE__ */ jsx3("div", { className: `space-y-6 ${className}`, children: blogs.map((blog) => /* @__PURE__ */ jsx3(
+    BlogCard,
+    {
+      blog,
+      basePath,
+      renderLink,
+      ...cardProps
+    },
+    blog.slug
+  )) });
+}
+
+// src/components/BlogPlaceholder.tsx
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+function BlogPlaceholder({ count = 3, className = "" }) {
+  return /* @__PURE__ */ jsx4("div", { className: `space-y-6 ${className}`, children: Array.from({ length: count }).map((_, i) => /* @__PURE__ */ jsxs2("div", { className: "bg-white rounded-lg border border-gray-200 p-6 animate-pulse", children: [
+    /* @__PURE__ */ jsx4("div", { className: "h-4 bg-gray-200 rounded mb-3" }),
+    /* @__PURE__ */ jsx4("div", { className: "h-6 bg-gray-200 rounded mb-2" }),
+    /* @__PURE__ */ jsx4("div", { className: "h-4 bg-gray-200 rounded w-3/4" })
+  ] }, i)) });
+}
+
+// src/hooks/useBlogs.ts
+import { useState, useEffect } from "react";
+function useBlogs(blogs) {
+  const [filteredBlogs, setFilteredBlogs] = useState(blogs);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [selectedCategory, setSelectedCategory] = useState(null);
+  useEffect(() => {
+    let filtered = blogs;
+    if (searchTerm) {
+      filtered = filtered.filter(
+        (blog) => blog.title.toLowerCase().includes(searchTerm.toLowerCase()) || blog.description.toLowerCase().includes(searchTerm.toLowerCase())
+      );
+    }
+    if (selectedCategory) {
+      filtered = filtered.filter((blog) => blog.category === selectedCategory);
+    }
+    setFilteredBlogs(filtered);
+  }, [blogs, searchTerm, selectedCategory]);
+  const categories = Array.from(
+    new Set(blogs.map((blog) => blog.category).filter(Boolean))
+  );
+  return {
+    blogs: filteredBlogs,
+    searchTerm,
+    setSearchTerm,
+    selectedCategory,
+    setSelectedCategory,
+    categories
+  };
+}
+export {
+  BlogCard,
+  BlogList,
+  BlogPlaceholder,
+  BlogRenderer as MarkdownRenderer,
+  useBlogs
+};

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@haroonwaves/blog-kit-react",
+  "version": "0.0.4",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "dependencies": {
+    "react-markdown": "^10.1.0",
+    "remark-gfm": "^4.0.1",
+    "rehype-prism-plus": "^2.0.1",
+    "rehype-raw": "^7.0.0",
+    "prismjs": "^1.30.0"
+  },
+  "devDependencies": {
+    "tsup": "^7.2.0",
+    "typescript": "^5.5.0"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts",
+    "type-check": "tsc --noEmit"
+  }
+}