@haroonwaves/blog-kit-react 1.3.0 → 1.4.0

package/README.md

@@ -1,7 +1,7 @@
 # @haroonwaves/blog-kit-react
 
 React components and hooks for rendering markdown blogs. Includes blog renderer with syntax
-highlighting, blog cards, lists, and search functionality.
+highlighting, blog cards, lists with built-in search, filtering, and customization.
 
 ## Installation
 

package/dist/index.cjs

@@ -34,6 +34,9 @@ __export(src_exports, {
   BlogList: () => BlogList,
   BlogPlaceholder: () => BlogPlaceholder,
   BlogRenderer: () => BlogRenderer,
+  Filter: () => Filter,
+  filterBlogs: () => filterBlogs,
+  getAvailableCategories: () => getAvailableCategories,
   useBlogs: () => useBlogs
 });
 module.exports = __toCommonJS(src_exports);
@@ -49,15 +52,15 @@ var import_rehype_slug_custom_id = __toESM(require("rehype-slug-custom-id"), 1);
 // src/components/Badge.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var colorVariants = [
-  "bg-blue-100 dark:bg-blue-900/30 text-blue-500 dark:text-blue-300",
-  "bg-orange-100 dark:bg-orange-900/30 text-orange-500 dark:text-orange-300",
-  "bg-emerald-100 dark:bg-emerald-900/30 text-emerald-500 dark:text-emerald-300",
-  "bg-violet-100 dark:bg-violet-900/30 text-violet-500 dark:text-violet-300",
-  "bg-amber-100 dark:bg-amber-900/30 text-amber-500 dark:text-amber-300",
-  "bg-rose-100 dark:bg-rose-900/30 text-rose-500 dark:text-rose-300",
-  "bg-cyan-100 dark:bg-cyan-900/30 text-cyan-500 dark:text-cyan-300",
-  "bg-fuchsia-100 dark:bg-fuchsia-900/30 text-fuchsia-500 dark:text-fuchsia-300",
-  "bg-teal-100 dark:bg-teal-900/30 text-teal-500 dark:text-teal-300"
+  "bk:bg-blue-100 bk:dark:bg-blue-900/30 bk:text-blue-500 bk:dark:text-blue-300",
+  "bk:bg-orange-100 bk:dark:bg-orange-900/30 bk:text-orange-500 bk:dark:text-orange-300",
+  "bk:bg-emerald-100 bk:dark:bg-emerald-900/30 bk:text-emerald-500 bk:dark:text-emerald-300",
+  "bk:bg-violet-100 bk:dark:bg-violet-900/30 bk:text-violet-500 bk:dark:text-violet-300",
+  "bk:bg-amber-100 bk:dark:bg-amber-900/30 bk:text-amber-500 bk:dark:text-amber-300",
+  "bk:bg-rose-100 bk:dark:bg-rose-900/30 bk:text-rose-500 bk:dark:text-rose-300",
+  "bk:bg-cyan-100 bk:dark:bg-cyan-900/30 bk:text-cyan-500 bk:dark:text-cyan-300",
+  "bk:bg-fuchsia-100 bk:dark:bg-fuchsia-900/30 bk:text-fuchsia-500 bk:dark:text-fuchsia-300",
+  "bk:bg-teal-100 bk:dark:bg-teal-900/30 bk:text-teal-500 bk:dark:text-teal-300"
 ];
 function getColorIndex(text) {
   let hash = 5381;
@@ -72,7 +75,7 @@ function Badge({ children, className }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "span",
     {
-      className: `inline-flex items-center rounded-full border border-transparent px-2.5 py-0.5 text-xs font-semibold shrink-0 ${colorClass} ${className ?? ""}`,
+      className: `bk:inline-flex bk:items-center bk:rounded-full bk:border bk:border-transparent bk:px-2.5 bk:py-0.5 bk:text-xs bk:font-semibold bk:shrink-0 ${colorClass} ${className ?? ""}`,
       children
     }
   );
@@ -84,55 +87,67 @@ var defaultComponents = {
   h1: (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "h1",
     {
-      className: "mt-10 first:mt-0 mb-5 text-3xl md:text-4xl font-semibold tracking-tight text-gray-800 dark:text-gray-200",
+      className: "bk:mt-10 bk:first:mt-0 bk:mb-5 bk:text-3xl bk:md:text-4xl bk:font-semibold bk:tracking-tight bk:text-gray-800 bk:dark:text-gray-200",
       ...props
     }
   ),
   h2: (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "h2",
     {
-      className: "mt-8 first:mt-0 mb-4 text-2xl md:text-3xl font-semibold tracking-tight text-gray-800 dark:text-gray-200",
+      className: "bk:mt-8 bk:first:mt-0 bk:mb-4 bk:text-2xl bk:md:text-3xl bk:font-semibold bk:tracking-tight bk:text-gray-800 bk:dark:text-gray-200",
       ...props
     }
   ),
   h3: (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "h3",
     {
-      className: "mt-6 mb-4 first:mt-0 text-xl md:text-2xl font-semibold text-gray-800 dark:text-gray-200",
+      className: "bk:mt-6 bk:mb-4 bk:first:mt-0 bk:text-xl bk:md:text-2xl bk:font-semibold bk:text-gray-800 bk:dark:text-gray-200",
       ...props
     }
   ),
   h4: (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "h4",
     {
-      className: "mt-5 mb-3 first:mt-0 text-lg font-semibold text-gray-800 dark:text-gray-200",
+      className: "bk:mt-5 bk:mb-3 bk:first:mt-0 bk:text-lg bk:font-semibold bk:text-gray-800 bk:dark:text-gray-200",
       ...props
     }
   ),
   h5: (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "h5",
     {
-      className: "mt-4 mb-2 first:mt-0 text-base font-semibold text-gray-700 dark:text-gray-200",
+      className: "bk:mt-4 bk:mb-2 bk:first:mt-0 bk:text-base bk:font-semibold bk:text-gray-700 bk:dark:text-gray-200",
       ...props
     }
   ),
   h6: (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "h6",
     {
-      className: "mt-4 mb-2 text-sm first:mt-0 font-semibold uppercase tracking-wide text-gray-600 dark:text-gray-300",
+      className: "bk:mt-4 bk:mb-2 bk:text-sm bk:first:mt-0 bk:font-semibold bk:uppercase bk:tracking-wide bk:text-gray-600 bk:dark:text-gray-300",
+      ...props
+    }
+  ),
+  p: (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "bk:mb-4 bk:leading-7 bk:text-gray-700 bk:dark:text-gray-300", ...props }),
+  ul: (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "ul",
+    {
+      className: "bk:mb-4 bk:ml-6 bk:list-disc bk:space-y-2 bk:text-gray-700 bk:dark:text-gray-300",
+      ...props
+    }
+  ),
+  ol: (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "ol",
+    {
+      className: "bk:mb-4 bk:ml-6 bk:list-decimal bk:space-y-2 bk:text-gray-700 bk:dark:text-gray-300",
       ...props
     }
   ),
-  p: (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "mb-4 leading-7 text-gray-700 dark:text-gray-300", ...props }),
-  ul: (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("ul", { className: "mb-4 ml-6 list-disc space-y-2 text-gray-700 dark:text-gray-300", ...props }),
-  ol: (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("ol", { className: "mb-4 ml-6 list-decimal space-y-2 text-gray-700 dark:text-gray-300", ...props }),
   li: (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("li", { ...props }),
   code: ({ className, children, ...props }) => {
     const isInline = !className;
     return isInline ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       "code",
       {
-        className: "rounded bg-gray-100 dark:bg-gray-800 px-1.5 py-0.5 text-sm font-mono text-rose-600 dark:text-rose-400",
+        className: "bk:rounded bk:bg-gray-100 bk:dark:bg-gray-800 bk:px-1.5 bk:py-0.5 bk:text-sm bk:font-mono bk:text-rose-600 bk:dark:text-rose-400",
         ...props,
         children
       }
@@ -142,7 +157,7 @@ var defaultComponents = {
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       "pre",
       {
-        className: `mb-4 rounded-lg overflow-x-auto [&>code]:block [&>code]:p-4 ${preClassName || ""}`,
+        className: `bk:mb-4 bk:rounded-lg bk:overflow-x-auto [&>code]:bk:block [&>code]:bk:p-4 ${preClassName || ""}`,
         ...props,
         children
       }
@@ -151,36 +166,48 @@ var defaultComponents = {
   blockquote: (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "blockquote",
     {
-      className: "my-6 border-l-4 border-blue-500 pl-4 italic text-gray-600 dark:text-gray-400",
+      className: "bk:my-6 bk:border-l-4 bk:border-blue-500 bk:pl-4 bk:italic bk:text-gray-600 bk:dark:text-gray-400",
       ...props
     }
   ),
   a: (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "a",
     {
-      className: "text-blue-600 dark:text-blue-400 underline underline-offset-4 hover:text-blue-800 dark:hover:text-blue-300",
+      className: "bk:text-blue-600 bk:dark:text-blue-400 bk:underline bk:underline-offset-4 bk:hover:text-blue-800 bk:dark:hover:text-blue-300",
       ...props
     }
   ),
-  strong: (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("strong", { className: "font-semibold text-gray-800 dark:text-gray-200", ...props }),
-  em: (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("em", { className: "italic text-gray-800 dark:text-gray-200", ...props }),
-  del: (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("del", { className: "text-gray-500 dark:text-gray-400", ...props }),
-  hr: (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("hr", { className: "my-9 border-gray-200 dark:border-neutral-900", ...props }),
+  strong: (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("strong", { className: "bk:font-semibold bk:text-gray-800 bk:dark:text-gray-200", ...props }),
+  em: (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("em", { className: "bk:italic bk:text-gray-800 bk:dark:text-gray-200", ...props }),
+  del: (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("del", { className: "bk:text-gray-500 bk:dark:text-gray-400", ...props }),
+  hr: (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("hr", { className: "bk:my-9 bk:border-gray-200 bk:dark:border-neutral-900", ...props }),
   br: (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("br", { ...props }),
-  img: (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("img", { className: "my-6 rounded-xl max-w-full h-auto", ...props }),
-  table: (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "my-6 overflow-x-auto", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  img: (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("img", { className: "bk:my-6 bk:rounded-xl bk:max-w-full bk:h-auto", ...props }),
+  table: (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "bk:my-6 bk:overflow-x-auto", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "table",
     {
-      className: "w-full border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden text-sm",
+      className: "bk:w-full bk:border bk:border-gray-200 bk:dark:border-gray-700 bk:rounded-lg bk:overflow-hidden bk:text-sm",
       ...props
     }
   ) }),
-  thead: (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("thead", { className: "bg-gray-50 dark:bg-gray-800 text-gray-700 dark:text-gray-200", ...props }),
+  thead: (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "thead",
+    {
+      className: "bk:bg-gray-50 bk:dark:bg-gray-800 bk:text-gray-700 bk:dark:text-gray-200",
+      ...props
+    }
+  ),
   tbody: (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("tbody", { ...props }),
-  tr: (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("tr", { className: "border-b last:border-b-0 border-gray-200 dark:border-gray-700", ...props }),
-  th: (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("th", { className: "px-4 py-3 text-left font-semibold", ...props }),
-  td: (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("td", { className: "px-4 py-3 text-gray-700 dark:text-gray-300", ...props }),
-  input: (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("input", { type: "checkbox", disabled: true, className: "mr-2 accent-blue-600", ...props })
+  tr: (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "tr",
+    {
+      className: "bk:border-b bk:last:border-b-0 bk:border-gray-200 bk:dark:border-gray-700",
+      ...props
+    }
+  ),
+  th: (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("th", { className: "bk:px-4 bk:py-3 bk:text-left bk:font-semibold", ...props }),
+  td: (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("td", { className: "bk:px-4 bk:py-3 bk:text-gray-700 bk:dark:text-gray-300", ...props }),
+  input: (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("input", { type: "checkbox", disabled: true, className: "bk:mr-2 bk:accent-blue-600", ...props })
 };
 function BlogRenderer({
   content,
@@ -193,9 +220,9 @@ function BlogRenderer({
 }) {
   const mergedComponents = { ...defaultComponents, ...components };
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
-    (showCategory || showReadingTime || showDate) && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center gap-3 mb-4", children: [
-      showCategory && metadata.categories?.length ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex items-center gap-1.5 flex-wrap", children: metadata.categories.map((cat) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Badge, { children: cat }, cat)) }) : null,
-      (showReadingTime || showDate) && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap", children: [
+    (showCategory || showReadingTime || showDate) && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "bk:flex bk:items-center bk:gap-3 bk:mb-4", children: [
+      showCategory && metadata.categories?.length ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "bk:flex bk:items-center bk:gap-1.5 bk:flex-wrap", children: metadata.categories.map((cat) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Badge, { children: cat }, cat)) }) : null,
+      (showReadingTime || showDate) && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "bk:flex bk:items-center bk:gap-2 bk:text-sm bk:text-gray-500 bk:dark:text-gray-400 bk:whitespace-nowrap", children: [
         showReadingTime && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: metadata.readingTime }),
         showReadingTime && showDate && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "\u2022" }),
         showDate && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("time", { dateTime: metadata.date, children: new Date(metadata.date).toLocaleDateString("en-US", {
@@ -205,7 +232,7 @@ function BlogRenderer({
         }) })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: `prose prose-slate dark:prose-invert max-w-none ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: `bk:prose bk:prose-slate bk:dark:prose-invert bk:max-w-none ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       import_react_markdown.default,
       {
         remarkPlugins: [import_remark_gfm.default],
@@ -235,11 +262,11 @@ function BlogCard({
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     "article",
     {
-      className: `rounded-lg border border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600 bg-white dark:bg-gray-800 p-6 transition-colors min-h-[200px] flex flex-col ${className}`,
+      className: `bk:rounded-lg bk:border bk:border-gray-200 bk:dark:border-gray-700 bk:hover:border-gray-300 bk:dark:hover:border-gray-600 bk:bg-white bk:dark:bg-gray-800 bk:p-6 bk:transition-colors bk:min-h-[200px] bk:flex bk:flex-col ${className}`,
       children: [
-        (showCategory || showReadingTime || showDate) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "mb-3", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center gap-3 justify-between", children: [
-          showCategory && metadata.categories?.length ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex items-center gap-1.5 flex-nowrap overflow-hidden", children: metadata.categories.slice(0, 2).map((cat) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Badge, { children: cat }, cat)) }) : null,
-          (showReadingTime || showDate) && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap", children: [
+        (showCategory || showReadingTime || showDate) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "bk:mb-3", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "bk:flex bk:items-center bk:gap-3 bk:justify-between", children: [
+          showCategory && metadata.categories?.length ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "bk:flex bk:items-center bk:gap-1.5 bk:flex-nowrap bk:overflow-hidden", children: metadata.categories.slice(0, 2).map((cat) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Badge, { children: cat }, cat)) }) : null,
+          (showReadingTime || showDate) && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "bk:flex bk:items-center bk:gap-2 bk:text-sm bk:text-gray-500 bk:dark:text-gray-400 bk:whitespace-nowrap", children: [
             showReadingTime && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: metadata.readingTime }),
             showReadingTime && showDate && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: "\u2022" }),
             showDate && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("time", { dateTime: metadata.date, children: new Date(metadata.date).toLocaleDateString("en-US", {
@@ -251,12 +278,12 @@ function BlogCard({
         ] }) }),
         Link(
           href,
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h2", { className: "font-semibold text-xl text-gray-700 dark:text-gray-100 mb-2 hover:underline transition-colors line-clamp-2", children: metadata.title })
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h2", { className: "bk:font-semibold bk:text-xl bk:text-gray-700 bk:dark:text-gray-100 bk:mb-2 bk:hover:underline bk:transition-colors bk:line-clamp-2", children: metadata.title })
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "text-sm text-gray-500 dark:text-gray-300 mb-2 leading-6 line-clamp-2", children: metadata.description }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "mt-auto", children: Link(
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "bk:text-sm bk:text-gray-500 bk:dark:text-gray-300 bk:mb-2 bk:leading-6 bk:line-clamp-2", children: metadata.description }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "bk:mt-auto", children: Link(
           href,
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "inline-flex items-center text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 font-medium text-sm", children: "Read more \u2192" })
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "bk:inline-flex bk:items-center bk:text-blue-600 bk:dark:text-blue-400 bk:hover:text-blue-700 bk:dark:hover:text-blue-300 bk:font-medium bk:text-sm", children: "Read more \u2192" })
         ) })
       ]
     }
@@ -264,41 +291,155 @@ function BlogCard({
 }
 
 // src/components/BlogList.tsx
+var import_react3 = require("react");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 function BlogList({
   metadata,
+  title,
+  description,
   basePath = "/blog",
   renderLink,
   className = "",
   emptyMessage = "No blog posts found.",
-  cardProps
+  cardProps,
+  classNames = {}
 }) {
-  if (metadata.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: `text-center text-gray-500 dark:text-gray-400 py-12 ${className}`, children: emptyMessage });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: `flex flex-col gap-6 ${className}`, children: metadata.map((meta) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    BlogCard,
-    {
-      metadata: meta,
-      basePath,
-      renderLink,
-      ...cardProps
-    },
-    meta.slug
-  )) });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "bk:w-full", children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "h1",
+      {
+        className: `bk:text-4xl bk:font-bold bk:mb-4 bk:mt-8 bk:text-gray-800 bk:dark:text-gray-100 ${classNames.title ?? ""}`,
+        children: title
+      }
+    ),
+    description && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "p",
+      {
+        className: `bk:text-gray-600 bk:dark:text-gray-400 bk:mb-8 ${classNames.description ?? ""}`,
+        children: description
+      }
+    ),
+    metadata.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "div",
+      {
+        className: `bk:text-center bk:text-gray-500 bk:dark:text-gray-400 bk:py-12 ${className}`,
+        children: emptyMessage
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: `bk:flex bk:flex-col bk:gap-6 ${className}`, children: metadata.map((meta) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      BlogCard,
+      {
+        metadata: meta,
+        basePath,
+        renderLink,
+        ...cardProps
+      },
+      meta.slug
+    )) })
+  ] });
 }
 
-// src/components/BlogPlaceholder.tsx
+// src/components/Filter.tsx
+var import_react4 = require("react");
 var import_jsx_runtime5 = require("react/jsx-runtime");
+function Filter({
+  searchTerm,
+  setSearchTerm,
+  selectedCategory,
+  setSelectedCategory,
+  categories,
+  postsCount,
+  className = "",
+  placeholder = "Search blogs...",
+  classNames = {}
+}) {
+  const pillBase = `bk:px-2.5 bk:py-1 bk:cursor-pointer bk:rounded-md bk:text-xs bk:font-medium bk:transition-colors ${classNames.pill ?? ""}`;
+  const pillActive = `bk:bg-gray-700 bk:dark:bg-gray-200 bk:text-white bk:dark:text-gray-800 ${classNames.activePill ?? ""}`;
+  const pillInactive = `bk:bg-gray-100 bk:dark:bg-gray-700 bk:text-gray-500 bk:dark:text-gray-300 bk:hover:bg-gray-200 bk:dark:hover:bg-gray-600 ${classNames.inactivePill ?? ""}`;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: `bk:flex bk:flex-col bk:gap-4 bk:mb-6 ${className}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "bk:flex bk:flex-col bk:sm:flex-row bk:gap-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "bk:relative bk:flex-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "svg",
+          {
+            className: "bk:absolute bk:left-3 bk:top-1/2 bk:-translate-y-1/2 bk:w-3.5 bk:h-3.5 bk:text-gray-400 bk:pointer-events-none",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: 2,
+            viewBox: "0 0 24 24",
+            children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                d: "M21 21l-4.35-4.35M17 11A6 6 0 1 1 5 11a6 6 0 0 1 12 0z"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "input",
+          {
+            id: "blog-search",
+            type: "search",
+            value: searchTerm,
+            onChange: (e) => setSearchTerm(e.target.value),
+            placeholder,
+            className: `bk:w-full bk:pl-8 bk:pr-4 bk:py-2 bk:rounded-md bk:border bk:border-gray-200 bk:dark:border-gray-700 bk:bg-white bk:dark:bg-gray-800 bk:text-sm bk:text-gray-700 bk:dark:text-gray-200 bk:placeholder-gray-400 bk:focus:outline-none bk:focus:border-gray-400 bk:dark:focus:border-gray-500 bk:transition-colors ${classNames.input ?? ""}`
+          }
+        )
+      ] }),
+      categories.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+        "div",
+        {
+          className: `bk:flex bk:flex-wrap bk:gap-2 bk:items-center ${classNames.categoryContainer ?? ""}`,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              "button",
+              {
+                onClick: () => setSelectedCategory(null),
+                className: `${pillBase} ${selectedCategory === null ? pillActive : pillInactive}`,
+                children: "All"
+              }
+            ),
+            categories.slice(0, 3).map((cat) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              "button",
+              {
+                onClick: () => setSelectedCategory(cat),
+                className: `${pillBase} ${selectedCategory === cat ? pillActive : pillInactive}`,
+                children: cat
+              },
+              cat
+            ))
+          ]
+        }
+      )
+    ] }),
+    postsCount !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      "p",
+      {
+        className: `bk:text-[10px] bk:uppercase bk:tracking-wider bk:text-gray-400 bk:dark:text-gray-500 ${classNames.postsCount ?? ""}`,
+        children: [
+          postsCount,
+          " ",
+          postsCount === 1 ? "post" : "posts",
+          " found"
+        ]
+      }
+    )
+  ] });
+}
+
+// src/components/BlogPlaceholder.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function BlogPlaceholder({ count = 3, className = "" }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: `${className}`, children: Array.from({ length: count }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: `${className}`, children: Array.from({ length: count }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     "div",
     {
-      className: "bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-6 animate-pulse",
+      className: "bk:bg-white bk:dark:bg-gray-800 bk:rounded-lg bk:border bk:border-gray-200 bk:dark:border-gray-700 bk:p-6 bk:animate-pulse",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded mb-3" }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "h-6 bg-gray-200 dark:bg-gray-700 rounded mb-2" }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded w-3/4" })
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "bk:h-4 bk:bg-gray-200 bk:dark:bg-gray-700 bk:rounded bk:mb-3" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "bk:h-6 bk:bg-gray-200 bk:dark:bg-gray-700 bk:rounded bk:mb-2" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "bk:h-4 bk:bg-gray-200 bk:dark:bg-gray-700 bk:rounded bk:w-3/4" })
       ]
     },
     i
@@ -306,13 +447,13 @@ function BlogPlaceholder({ count = 3, className = "" }) {
 }
 
 // src/hooks/useBlogs.ts
-var import_react4 = require("react");
+var import_react6 = require("react");
 
 // src/hooks/useDebounce.ts
-var import_react3 = require("react");
+var import_react5 = require("react");
 function useDebounce(value, delay) {
-  const [debouncedValue, setDebouncedValue] = (0, import_react3.useState)(value);
-  (0, import_react3.useEffect)(() => {
+  const [debouncedValue, setDebouncedValue] = (0, import_react5.useState)(value);
+  (0, import_react5.useEffect)(() => {
     const timer = setTimeout(() => {
       setDebouncedValue(value);
     }, delay);
@@ -323,33 +464,40 @@ function useDebounce(value, delay) {
   return debouncedValue;
 }
 
+// src/utils/filter-utils.ts
+function filterBlogs(blogs, searchTerm = "", selectedCategory = null) {
+  let filtered = blogs;
+  if (searchTerm) {
+    const lowerSearch = searchTerm.toLowerCase();
+    filtered = filtered.filter(
+      (blog) => (blog.title?.toLowerCase() || "").includes(lowerSearch) || (blog.description?.toLowerCase() || "").includes(lowerSearch)
+    );
+  }
+  if (selectedCategory) {
+    filtered = filtered.filter((blog) => {
+      const categories = blog.categories ?? [];
+      return categories.includes(selectedCategory);
+    });
+  }
+  return filtered;
+}
+function getAvailableCategories(blogs) {
+  return Array.from(new Set(blogs.flatMap((blog) => blog.categories ?? [])));
+}
+
 // src/hooks/useBlogs.ts
 function useBlogs(blogsMeta) {
-  const [filteredBlogs, setFilteredBlogs] = (0, import_react4.useState)(blogsMeta);
-  const [searchTerm, setSearchTerm] = (0, import_react4.useState)("");
-  const [selectedCategory, setSelectedCategory] = (0, import_react4.useState)(null);
+  const [searchTerm, setSearchTerm] = (0, import_react6.useState)("");
+  const [selectedCategory, setSelectedCategory] = (0, import_react6.useState)(null);
   const debouncedSearchTerm = useDebounce(searchTerm, 500);
-  const getBlogCategories = (blog) => {
-    return blog.categories ?? [];
-  };
-  (0, import_react4.useEffect)(() => {
-    let filtered = blogsMeta;
-    if (debouncedSearchTerm) {
-      filtered = filtered.filter(
-        (blog) => blog.title.toLowerCase().includes(debouncedSearchTerm.toLowerCase()) || blog.description.toLowerCase().includes(debouncedSearchTerm.toLowerCase())
-      );
-    }
-    if (selectedCategory) {
-      filtered = filtered.filter((blog) => {
-        const blogCategories = getBlogCategories(blog);
-        return blogCategories.includes(selectedCategory);
-      });
-    }
-    setFilteredBlogs(filtered);
+  const metadata = (0, import_react6.useMemo)(() => {
+    return filterBlogs(blogsMeta, debouncedSearchTerm, selectedCategory);
   }, [blogsMeta, debouncedSearchTerm, selectedCategory]);
-  const categories = Array.from(new Set(blogsMeta.flatMap((blog) => getBlogCategories(blog))));
+  const categories = (0, import_react6.useMemo)(() => {
+    return getAvailableCategories(blogsMeta);
+  }, [blogsMeta]);
   return {
-    metadata: filteredBlogs,
+    metadata,
     searchTerm,
     setSearchTerm,
     selectedCategory,
@@ -363,5 +511,8 @@ function useBlogs(blogsMeta) {
   BlogList,
   BlogPlaceholder,
   BlogRenderer,
+  Filter,
+  filterBlogs,
+  getAvailableCategories,
   useBlogs
 });

package/dist/index.d.cts

@@ -43,13 +43,43 @@ declare function BlogCard({ metadata, basePath, renderLink, className, showCateg
 
 interface BlogListProps {
     metadata: BlogMeta[];
+    title?: string;
+    description?: string;
     basePath?: string;
     renderLink?: BlogCardProps['renderLink'];
     className?: string;
     emptyMessage?: string;
     cardProps?: Omit<BlogCardProps, 'metadata' | 'basePath' | 'renderLink'>;
+    classNames?: {
+        title?: string;
+        description?: string;
+    };
 }
-declare function BlogList({ metadata, basePath, renderLink, className, emptyMessage, cardProps, }: BlogListProps): react_jsx_runtime.JSX.Element;
+/**
+ * A pure, stateless BlogList component that renders a list of blog cards.
+ * Accepts metadata and renders it exactly as provided.
+ */
+declare function BlogList({ metadata, title, description, basePath, renderLink, className, emptyMessage, cardProps, classNames, }: BlogListProps): react_jsx_runtime.JSX.Element;
+
+interface FilterProps {
+    searchTerm: string;
+    setSearchTerm: (searchTerm: string) => void;
+    selectedCategory: string | null;
+    setSelectedCategory: (selectedCategory: string | null) => void;
+    categories: string[];
+    postsCount?: number;
+    className?: string;
+    placeholder?: string;
+    classNames?: {
+        input?: string;
+        categoryContainer?: string;
+        pill?: string;
+        activePill?: string;
+        inactivePill?: string;
+        postsCount?: string;
+    };
+}
+declare function Filter({ searchTerm, setSearchTerm, selectedCategory, setSelectedCategory, categories, postsCount, className, placeholder, classNames, }: FilterProps): react_jsx_runtime.JSX.Element;
 
 interface BlogPlaceholderProps {
     count?: number;
@@ -66,4 +96,7 @@ declare function useBlogs(blogsMeta: BlogMeta[]): {
     categories: string[];
 };
 
-export { type Blog, BlogCard, type BlogCardProps, type BlogConfig, BlogList, type BlogListProps, type BlogMeta, BlogPlaceholder, type BlogPlaceholderProps, BlogRenderer, type BlogRendererProps, useBlogs };
+declare function filterBlogs(blogs: BlogMeta[], searchTerm?: string, selectedCategory?: string | null): BlogMeta[];
+declare function getAvailableCategories(blogs: BlogMeta[]): string[];
+
+export { type Blog, BlogCard, type BlogCardProps, type BlogConfig, BlogList, type BlogListProps, type BlogMeta, BlogPlaceholder, type BlogPlaceholderProps, BlogRenderer, type BlogRendererProps, Filter, type FilterProps, filterBlogs, getAvailableCategories, useBlogs };

package/dist/index.d.ts

@@ -43,13 +43,43 @@ declare function BlogCard({ metadata, basePath, renderLink, className, showCateg
 
 interface BlogListProps {
     metadata: BlogMeta[];
+    title?: string;
+    description?: string;
     basePath?: string;
     renderLink?: BlogCardProps['renderLink'];
     className?: string;
     emptyMessage?: string;
     cardProps?: Omit<BlogCardProps, 'metadata' | 'basePath' | 'renderLink'>;
+    classNames?: {
+        title?: string;
+        description?: string;
+    };
 }
-declare function BlogList({ metadata, basePath, renderLink, className, emptyMessage, cardProps, }: BlogListProps): react_jsx_runtime.JSX.Element;
+/**
+ * A pure, stateless BlogList component that renders a list of blog cards.
+ * Accepts metadata and renders it exactly as provided.
+ */
+declare function BlogList({ metadata, title, description, basePath, renderLink, className, emptyMessage, cardProps, classNames, }: BlogListProps): react_jsx_runtime.JSX.Element;
+
+interface FilterProps {
+    searchTerm: string;
+    setSearchTerm: (searchTerm: string) => void;
+    selectedCategory: string | null;
+    setSelectedCategory: (selectedCategory: string | null) => void;
+    categories: string[];
+    postsCount?: number;
+    className?: string;
+    placeholder?: string;
+    classNames?: {
+        input?: string;
+        categoryContainer?: string;
+        pill?: string;
+        activePill?: string;
+        inactivePill?: string;
+        postsCount?: string;
+    };
+}
+declare function Filter({ searchTerm, setSearchTerm, selectedCategory, setSelectedCategory, categories, postsCount, className, placeholder, classNames, }: FilterProps): react_jsx_runtime.JSX.Element;
 
 interface BlogPlaceholderProps {
     count?: number;
@@ -66,4 +96,7 @@ declare function useBlogs(blogsMeta: BlogMeta[]): {
     categories: string[];
 };
 
-export { type Blog, BlogCard, type BlogCardProps, type BlogConfig, BlogList, type BlogListProps, type BlogMeta, BlogPlaceholder, type BlogPlaceholderProps, BlogRenderer, type BlogRendererProps, useBlogs };
+declare function filterBlogs(blogs: BlogMeta[], searchTerm?: string, selectedCategory?: string | null): BlogMeta[];
+declare function getAvailableCategories(blogs: BlogMeta[]): string[];
+
+export { type Blog, BlogCard, type BlogCardProps, type BlogConfig, BlogList, type BlogListProps, type BlogMeta, BlogPlaceholder, type BlogPlaceholderProps, BlogRenderer, type BlogRendererProps, Filter, type FilterProps, filterBlogs, getAvailableCategories, useBlogs };

package/dist/index.js

@@ -9,15 +9,15 @@ import rehypeSlugCustomId from "rehype-slug-custom-id";
 // src/components/Badge.tsx
 import { jsx } from "react/jsx-runtime";
 var colorVariants = [
-  "bg-blue-100 dark:bg-blue-900/30 text-blue-500 dark:text-blue-300",
-  "bg-orange-100 dark:bg-orange-900/30 text-orange-500 dark:text-orange-300",
-  "bg-emerald-100 dark:bg-emerald-900/30 text-emerald-500 dark:text-emerald-300",
-  "bg-violet-100 dark:bg-violet-900/30 text-violet-500 dark:text-violet-300",
-  "bg-amber-100 dark:bg-amber-900/30 text-amber-500 dark:text-amber-300",
-  "bg-rose-100 dark:bg-rose-900/30 text-rose-500 dark:text-rose-300",
-  "bg-cyan-100 dark:bg-cyan-900/30 text-cyan-500 dark:text-cyan-300",
-  "bg-fuchsia-100 dark:bg-fuchsia-900/30 text-fuchsia-500 dark:text-fuchsia-300",
-  "bg-teal-100 dark:bg-teal-900/30 text-teal-500 dark:text-teal-300"
+  "bk:bg-blue-100 bk:dark:bg-blue-900/30 bk:text-blue-500 bk:dark:text-blue-300",
+  "bk:bg-orange-100 bk:dark:bg-orange-900/30 bk:text-orange-500 bk:dark:text-orange-300",
+  "bk:bg-emerald-100 bk:dark:bg-emerald-900/30 bk:text-emerald-500 bk:dark:text-emerald-300",
+  "bk:bg-violet-100 bk:dark:bg-violet-900/30 bk:text-violet-500 bk:dark:text-violet-300",
+  "bk:bg-amber-100 bk:dark:bg-amber-900/30 bk:text-amber-500 bk:dark:text-amber-300",
+  "bk:bg-rose-100 bk:dark:bg-rose-900/30 bk:text-rose-500 bk:dark:text-rose-300",
+  "bk:bg-cyan-100 bk:dark:bg-cyan-900/30 bk:text-cyan-500 bk:dark:text-cyan-300",
+  "bk:bg-fuchsia-100 bk:dark:bg-fuchsia-900/30 bk:text-fuchsia-500 bk:dark:text-fuchsia-300",
+  "bk:bg-teal-100 bk:dark:bg-teal-900/30 bk:text-teal-500 bk:dark:text-teal-300"
 ];
 function getColorIndex(text) {
   let hash = 5381;
@@ -32,7 +32,7 @@ function Badge({ children, className }) {
   return /* @__PURE__ */ jsx(
     "span",
     {
-      className: `inline-flex items-center rounded-full border border-transparent px-2.5 py-0.5 text-xs font-semibold shrink-0 ${colorClass} ${className ?? ""}`,
+      className: `bk:inline-flex bk:items-center bk:rounded-full bk:border bk:border-transparent bk:px-2.5 bk:py-0.5 bk:text-xs bk:font-semibold bk:shrink-0 ${colorClass} ${className ?? ""}`,
       children
     }
   );
@@ -44,55 +44,67 @@ var defaultComponents = {
   h1: (props) => /* @__PURE__ */ jsx2(
     "h1",
     {
-      className: "mt-10 first:mt-0 mb-5 text-3xl md:text-4xl font-semibold tracking-tight text-gray-800 dark:text-gray-200",
+      className: "bk:mt-10 bk:first:mt-0 bk:mb-5 bk:text-3xl bk:md:text-4xl bk:font-semibold bk:tracking-tight bk:text-gray-800 bk:dark:text-gray-200",
       ...props
     }
   ),
   h2: (props) => /* @__PURE__ */ jsx2(
     "h2",
     {
-      className: "mt-8 first:mt-0 mb-4 text-2xl md:text-3xl font-semibold tracking-tight text-gray-800 dark:text-gray-200",
+      className: "bk:mt-8 bk:first:mt-0 bk:mb-4 bk:text-2xl bk:md:text-3xl bk:font-semibold bk:tracking-tight bk:text-gray-800 bk:dark:text-gray-200",
       ...props
     }
   ),
   h3: (props) => /* @__PURE__ */ jsx2(
     "h3",
     {
-      className: "mt-6 mb-4 first:mt-0 text-xl md:text-2xl font-semibold text-gray-800 dark:text-gray-200",
+      className: "bk:mt-6 bk:mb-4 bk:first:mt-0 bk:text-xl bk:md:text-2xl bk:font-semibold bk:text-gray-800 bk:dark:text-gray-200",
       ...props
     }
   ),
   h4: (props) => /* @__PURE__ */ jsx2(
     "h4",
     {
-      className: "mt-5 mb-3 first:mt-0 text-lg font-semibold text-gray-800 dark:text-gray-200",
+      className: "bk:mt-5 bk:mb-3 bk:first:mt-0 bk:text-lg bk:font-semibold bk:text-gray-800 bk:dark:text-gray-200",
       ...props
     }
   ),
   h5: (props) => /* @__PURE__ */ jsx2(
     "h5",
     {
-      className: "mt-4 mb-2 first:mt-0 text-base font-semibold text-gray-700 dark:text-gray-200",
+      className: "bk:mt-4 bk:mb-2 bk:first:mt-0 bk:text-base bk:font-semibold bk:text-gray-700 bk:dark:text-gray-200",
       ...props
     }
   ),
   h6: (props) => /* @__PURE__ */ jsx2(
     "h6",
     {
-      className: "mt-4 mb-2 text-sm first:mt-0 font-semibold uppercase tracking-wide text-gray-600 dark:text-gray-300",
+      className: "bk:mt-4 bk:mb-2 bk:text-sm bk:first:mt-0 bk:font-semibold bk:uppercase bk:tracking-wide bk:text-gray-600 bk:dark:text-gray-300",
+      ...props
+    }
+  ),
+  p: (props) => /* @__PURE__ */ jsx2("p", { className: "bk:mb-4 bk:leading-7 bk:text-gray-700 bk:dark:text-gray-300", ...props }),
+  ul: (props) => /* @__PURE__ */ jsx2(
+    "ul",
+    {
+      className: "bk:mb-4 bk:ml-6 bk:list-disc bk:space-y-2 bk:text-gray-700 bk:dark:text-gray-300",
+      ...props
+    }
+  ),
+  ol: (props) => /* @__PURE__ */ jsx2(
+    "ol",
+    {
+      className: "bk:mb-4 bk:ml-6 bk:list-decimal bk:space-y-2 bk:text-gray-700 bk:dark:text-gray-300",
       ...props
     }
   ),
-  p: (props) => /* @__PURE__ */ jsx2("p", { className: "mb-4 leading-7 text-gray-700 dark:text-gray-300", ...props }),
-  ul: (props) => /* @__PURE__ */ jsx2("ul", { className: "mb-4 ml-6 list-disc space-y-2 text-gray-700 dark:text-gray-300", ...props }),
-  ol: (props) => /* @__PURE__ */ jsx2("ol", { className: "mb-4 ml-6 list-decimal space-y-2 text-gray-700 dark:text-gray-300", ...props }),
   li: (props) => /* @__PURE__ */ jsx2("li", { ...props }),
   code: ({ className, children, ...props }) => {
     const isInline = !className;
     return isInline ? /* @__PURE__ */ jsx2(
       "code",
       {
-        className: "rounded bg-gray-100 dark:bg-gray-800 px-1.5 py-0.5 text-sm font-mono text-rose-600 dark:text-rose-400",
+        className: "bk:rounded bk:bg-gray-100 bk:dark:bg-gray-800 bk:px-1.5 bk:py-0.5 bk:text-sm bk:font-mono bk:text-rose-600 bk:dark:text-rose-400",
         ...props,
         children
       }
@@ -102,7 +114,7 @@ var defaultComponents = {
     return /* @__PURE__ */ jsx2(
       "pre",
       {
-        className: `mb-4 rounded-lg overflow-x-auto [&>code]:block [&>code]:p-4 ${preClassName || ""}`,
+        className: `bk:mb-4 bk:rounded-lg bk:overflow-x-auto [&>code]:bk:block [&>code]:bk:p-4 ${preClassName || ""}`,
         ...props,
         children
       }
@@ -111,36 +123,48 @@ var defaultComponents = {
   blockquote: (props) => /* @__PURE__ */ jsx2(
     "blockquote",
     {
-      className: "my-6 border-l-4 border-blue-500 pl-4 italic text-gray-600 dark:text-gray-400",
+      className: "bk:my-6 bk:border-l-4 bk:border-blue-500 bk:pl-4 bk:italic bk:text-gray-600 bk:dark:text-gray-400",
       ...props
     }
   ),
   a: (props) => /* @__PURE__ */ jsx2(
     "a",
     {
-      className: "text-blue-600 dark:text-blue-400 underline underline-offset-4 hover:text-blue-800 dark:hover:text-blue-300",
+      className: "bk:text-blue-600 bk:dark:text-blue-400 bk:underline bk:underline-offset-4 bk:hover:text-blue-800 bk:dark:hover:text-blue-300",
       ...props
     }
   ),
-  strong: (props) => /* @__PURE__ */ jsx2("strong", { className: "font-semibold text-gray-800 dark:text-gray-200", ...props }),
-  em: (props) => /* @__PURE__ */ jsx2("em", { className: "italic text-gray-800 dark:text-gray-200", ...props }),
-  del: (props) => /* @__PURE__ */ jsx2("del", { className: "text-gray-500 dark:text-gray-400", ...props }),
-  hr: (props) => /* @__PURE__ */ jsx2("hr", { className: "my-9 border-gray-200 dark:border-neutral-900", ...props }),
+  strong: (props) => /* @__PURE__ */ jsx2("strong", { className: "bk:font-semibold bk:text-gray-800 bk:dark:text-gray-200", ...props }),
+  em: (props) => /* @__PURE__ */ jsx2("em", { className: "bk:italic bk:text-gray-800 bk:dark:text-gray-200", ...props }),
+  del: (props) => /* @__PURE__ */ jsx2("del", { className: "bk:text-gray-500 bk:dark:text-gray-400", ...props }),
+  hr: (props) => /* @__PURE__ */ jsx2("hr", { className: "bk:my-9 bk:border-gray-200 bk:dark:border-neutral-900", ...props }),
   br: (props) => /* @__PURE__ */ jsx2("br", { ...props }),
-  img: (props) => /* @__PURE__ */ jsx2("img", { className: "my-6 rounded-xl max-w-full h-auto", ...props }),
-  table: (props) => /* @__PURE__ */ jsx2("div", { className: "my-6 overflow-x-auto", children: /* @__PURE__ */ jsx2(
+  img: (props) => /* @__PURE__ */ jsx2("img", { className: "bk:my-6 bk:rounded-xl bk:max-w-full bk:h-auto", ...props }),
+  table: (props) => /* @__PURE__ */ jsx2("div", { className: "bk:my-6 bk:overflow-x-auto", children: /* @__PURE__ */ jsx2(
     "table",
     {
-      className: "w-full border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden text-sm",
+      className: "bk:w-full bk:border bk:border-gray-200 bk:dark:border-gray-700 bk:rounded-lg bk:overflow-hidden bk:text-sm",
       ...props
     }
   ) }),
-  thead: (props) => /* @__PURE__ */ jsx2("thead", { className: "bg-gray-50 dark:bg-gray-800 text-gray-700 dark:text-gray-200", ...props }),
+  thead: (props) => /* @__PURE__ */ jsx2(
+    "thead",
+    {
+      className: "bk:bg-gray-50 bk:dark:bg-gray-800 bk:text-gray-700 bk:dark:text-gray-200",
+      ...props
+    }
+  ),
   tbody: (props) => /* @__PURE__ */ jsx2("tbody", { ...props }),
-  tr: (props) => /* @__PURE__ */ jsx2("tr", { className: "border-b last:border-b-0 border-gray-200 dark:border-gray-700", ...props }),
-  th: (props) => /* @__PURE__ */ jsx2("th", { className: "px-4 py-3 text-left font-semibold", ...props }),
-  td: (props) => /* @__PURE__ */ jsx2("td", { className: "px-4 py-3 text-gray-700 dark:text-gray-300", ...props }),
-  input: (props) => /* @__PURE__ */ jsx2("input", { type: "checkbox", disabled: true, className: "mr-2 accent-blue-600", ...props })
+  tr: (props) => /* @__PURE__ */ jsx2(
+    "tr",
+    {
+      className: "bk:border-b bk:last:border-b-0 bk:border-gray-200 bk:dark:border-gray-700",
+      ...props
+    }
+  ),
+  th: (props) => /* @__PURE__ */ jsx2("th", { className: "bk:px-4 bk:py-3 bk:text-left bk:font-semibold", ...props }),
+  td: (props) => /* @__PURE__ */ jsx2("td", { className: "bk:px-4 bk:py-3 bk:text-gray-700 bk:dark:text-gray-300", ...props }),
+  input: (props) => /* @__PURE__ */ jsx2("input", { type: "checkbox", disabled: true, className: "bk:mr-2 bk:accent-blue-600", ...props })
 };
 function BlogRenderer({
   content,
@@ -153,9 +177,9 @@ function BlogRenderer({
 }) {
   const mergedComponents = { ...defaultComponents, ...components };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    (showCategory || showReadingTime || showDate) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 mb-4", children: [
-      showCategory && metadata.categories?.length ? /* @__PURE__ */ jsx2("div", { className: "flex items-center gap-1.5 flex-wrap", children: metadata.categories.map((cat) => /* @__PURE__ */ jsx2(Badge, { children: cat }, cat)) }) : null,
-      (showReadingTime || showDate) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap", children: [
+    (showCategory || showReadingTime || showDate) && /* @__PURE__ */ jsxs("div", { className: "bk:flex bk:items-center bk:gap-3 bk:mb-4", children: [
+      showCategory && metadata.categories?.length ? /* @__PURE__ */ jsx2("div", { className: "bk:flex bk:items-center bk:gap-1.5 bk:flex-wrap", children: metadata.categories.map((cat) => /* @__PURE__ */ jsx2(Badge, { children: cat }, cat)) }) : null,
+      (showReadingTime || showDate) && /* @__PURE__ */ jsxs("div", { className: "bk:flex bk:items-center bk:gap-2 bk:text-sm bk:text-gray-500 bk:dark:text-gray-400 bk:whitespace-nowrap", children: [
         showReadingTime && /* @__PURE__ */ jsx2("span", { children: metadata.readingTime }),
         showReadingTime && showDate && /* @__PURE__ */ jsx2("span", { children: "\u2022" }),
         showDate && /* @__PURE__ */ jsx2("time", { dateTime: metadata.date, children: new Date(metadata.date).toLocaleDateString("en-US", {
@@ -165,7 +189,7 @@ function BlogRenderer({
         }) })
       ] })
     ] }),
-    /* @__PURE__ */ jsx2("div", { className: `prose prose-slate dark:prose-invert max-w-none ${className}`, children: /* @__PURE__ */ jsx2(
+    /* @__PURE__ */ jsx2("div", { className: `bk:prose bk:prose-slate bk:dark:prose-invert bk:max-w-none ${className}`, children: /* @__PURE__ */ jsx2(
       ReactMarkdown,
       {
         remarkPlugins: [remarkGfm],
@@ -195,11 +219,11 @@ function BlogCard({
   return /* @__PURE__ */ jsxs2(
     "article",
     {
-      className: `rounded-lg border border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600 bg-white dark:bg-gray-800 p-6 transition-colors min-h-[200px] flex flex-col ${className}`,
+      className: `bk:rounded-lg bk:border bk:border-gray-200 bk:dark:border-gray-700 bk:hover:border-gray-300 bk:dark:hover:border-gray-600 bk:bg-white bk:dark:bg-gray-800 bk:p-6 bk:transition-colors bk:min-h-[200px] bk:flex bk:flex-col ${className}`,
       children: [
-        (showCategory || showReadingTime || showDate) && /* @__PURE__ */ jsx3("div", { className: "mb-3", children: /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-3 justify-between", children: [
-          showCategory && metadata.categories?.length ? /* @__PURE__ */ jsx3("div", { className: "flex items-center gap-1.5 flex-nowrap overflow-hidden", children: metadata.categories.slice(0, 2).map((cat) => /* @__PURE__ */ jsx3(Badge, { children: cat }, cat)) }) : null,
-          (showReadingTime || showDate) && /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap", children: [
+        (showCategory || showReadingTime || showDate) && /* @__PURE__ */ jsx3("div", { className: "bk:mb-3", children: /* @__PURE__ */ jsxs2("div", { className: "bk:flex bk:items-center bk:gap-3 bk:justify-between", children: [
+          showCategory && metadata.categories?.length ? /* @__PURE__ */ jsx3("div", { className: "bk:flex bk:items-center bk:gap-1.5 bk:flex-nowrap bk:overflow-hidden", children: metadata.categories.slice(0, 2).map((cat) => /* @__PURE__ */ jsx3(Badge, { children: cat }, cat)) }) : null,
+          (showReadingTime || showDate) && /* @__PURE__ */ jsxs2("div", { className: "bk:flex bk:items-center bk:gap-2 bk:text-sm bk:text-gray-500 bk:dark:text-gray-400 bk:whitespace-nowrap", children: [
             showReadingTime && /* @__PURE__ */ jsx3("span", { children: metadata.readingTime }),
             showReadingTime && showDate && /* @__PURE__ */ jsx3("span", { children: "\u2022" }),
             showDate && /* @__PURE__ */ jsx3("time", { dateTime: metadata.date, children: new Date(metadata.date).toLocaleDateString("en-US", {
@@ -211,12 +235,12 @@ function BlogCard({
         ] }) }),
         Link(
           href,
-          /* @__PURE__ */ jsx3("h2", { className: "font-semibold text-xl text-gray-700 dark:text-gray-100 mb-2 hover:underline transition-colors line-clamp-2", children: metadata.title })
+          /* @__PURE__ */ jsx3("h2", { className: "bk:font-semibold bk:text-xl bk:text-gray-700 bk:dark:text-gray-100 bk:mb-2 bk:hover:underline bk:transition-colors bk:line-clamp-2", children: metadata.title })
         ),
-        /* @__PURE__ */ jsx3("p", { className: "text-sm text-gray-500 dark:text-gray-300 mb-2 leading-6 line-clamp-2", children: metadata.description }),
-        /* @__PURE__ */ jsx3("div", { className: "mt-auto", children: Link(
+        /* @__PURE__ */ jsx3("p", { className: "bk:text-sm bk:text-gray-500 bk:dark:text-gray-300 bk:mb-2 bk:leading-6 bk:line-clamp-2", children: metadata.description }),
+        /* @__PURE__ */ jsx3("div", { className: "bk:mt-auto", children: Link(
           href,
-          /* @__PURE__ */ jsx3("span", { className: "inline-flex items-center text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 font-medium text-sm", children: "Read more \u2192" })
+          /* @__PURE__ */ jsx3("span", { className: "bk:inline-flex bk:items-center bk:text-blue-600 bk:dark:text-blue-400 bk:hover:text-blue-700 bk:dark:hover:text-blue-300 bk:font-medium bk:text-sm", children: "Read more \u2192" })
         ) })
       ]
     }
@@ -224,41 +248,155 @@ function BlogCard({
 }
 
 // src/components/BlogList.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
+import "react";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 function BlogList({
   metadata,
+  title,
+  description,
   basePath = "/blog",
   renderLink,
   className = "",
   emptyMessage = "No blog posts found.",
-  cardProps
+  cardProps,
+  classNames = {}
 }) {
-  if (metadata.length === 0) {
-    return /* @__PURE__ */ jsx4("div", { className: `text-center text-gray-500 dark:text-gray-400 py-12 ${className}`, children: emptyMessage });
-  }
-  return /* @__PURE__ */ jsx4("div", { className: `flex flex-col gap-6 ${className}`, children: metadata.map((meta) => /* @__PURE__ */ jsx4(
-    BlogCard,
-    {
-      metadata: meta,
-      basePath,
-      renderLink,
-      ...cardProps
-    },
-    meta.slug
-  )) });
+  return /* @__PURE__ */ jsxs3("div", { className: "bk:w-full", children: [
+    title && /* @__PURE__ */ jsx4(
+      "h1",
+      {
+        className: `bk:text-4xl bk:font-bold bk:mb-4 bk:mt-8 bk:text-gray-800 bk:dark:text-gray-100 ${classNames.title ?? ""}`,
+        children: title
+      }
+    ),
+    description && /* @__PURE__ */ jsx4(
+      "p",
+      {
+        className: `bk:text-gray-600 bk:dark:text-gray-400 bk:mb-8 ${classNames.description ?? ""}`,
+        children: description
+      }
+    ),
+    metadata.length === 0 ? /* @__PURE__ */ jsx4(
+      "div",
+      {
+        className: `bk:text-center bk:text-gray-500 bk:dark:text-gray-400 bk:py-12 ${className}`,
+        children: emptyMessage
+      }
+    ) : /* @__PURE__ */ jsx4("div", { className: `bk:flex bk:flex-col bk:gap-6 ${className}`, children: metadata.map((meta) => /* @__PURE__ */ jsx4(
+      BlogCard,
+      {
+        metadata: meta,
+        basePath,
+        renderLink,
+        ...cardProps
+      },
+      meta.slug
+    )) })
+  ] });
+}
+
+// src/components/Filter.tsx
+import "react";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+function Filter({
+  searchTerm,
+  setSearchTerm,
+  selectedCategory,
+  setSelectedCategory,
+  categories,
+  postsCount,
+  className = "",
+  placeholder = "Search blogs...",
+  classNames = {}
+}) {
+  const pillBase = `bk:px-2.5 bk:py-1 bk:cursor-pointer bk:rounded-md bk:text-xs bk:font-medium bk:transition-colors ${classNames.pill ?? ""}`;
+  const pillActive = `bk:bg-gray-700 bk:dark:bg-gray-200 bk:text-white bk:dark:text-gray-800 ${classNames.activePill ?? ""}`;
+  const pillInactive = `bk:bg-gray-100 bk:dark:bg-gray-700 bk:text-gray-500 bk:dark:text-gray-300 bk:hover:bg-gray-200 bk:dark:hover:bg-gray-600 ${classNames.inactivePill ?? ""}`;
+  return /* @__PURE__ */ jsxs4("div", { className: `bk:flex bk:flex-col bk:gap-4 bk:mb-6 ${className}`, children: [
+    /* @__PURE__ */ jsxs4("div", { className: "bk:flex bk:flex-col bk:sm:flex-row bk:gap-3", children: [
+      /* @__PURE__ */ jsxs4("div", { className: "bk:relative bk:flex-1", children: [
+        /* @__PURE__ */ jsx5(
+          "svg",
+          {
+            className: "bk:absolute bk:left-3 bk:top-1/2 bk:-translate-y-1/2 bk:w-3.5 bk:h-3.5 bk:text-gray-400 bk:pointer-events-none",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: 2,
+            viewBox: "0 0 24 24",
+            children: /* @__PURE__ */ jsx5(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                d: "M21 21l-4.35-4.35M17 11A6 6 0 1 1 5 11a6 6 0 0 1 12 0z"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx5(
+          "input",
+          {
+            id: "blog-search",
+            type: "search",
+            value: searchTerm,
+            onChange: (e) => setSearchTerm(e.target.value),
+            placeholder,
+            className: `bk:w-full bk:pl-8 bk:pr-4 bk:py-2 bk:rounded-md bk:border bk:border-gray-200 bk:dark:border-gray-700 bk:bg-white bk:dark:bg-gray-800 bk:text-sm bk:text-gray-700 bk:dark:text-gray-200 bk:placeholder-gray-400 bk:focus:outline-none bk:focus:border-gray-400 bk:dark:focus:border-gray-500 bk:transition-colors ${classNames.input ?? ""}`
+          }
+        )
+      ] }),
+      categories.length > 0 && /* @__PURE__ */ jsxs4(
+        "div",
+        {
+          className: `bk:flex bk:flex-wrap bk:gap-2 bk:items-center ${classNames.categoryContainer ?? ""}`,
+          children: [
+            /* @__PURE__ */ jsx5(
+              "button",
+              {
+                onClick: () => setSelectedCategory(null),
+                className: `${pillBase} ${selectedCategory === null ? pillActive : pillInactive}`,
+                children: "All"
+              }
+            ),
+            categories.slice(0, 3).map((cat) => /* @__PURE__ */ jsx5(
+              "button",
+              {
+                onClick: () => setSelectedCategory(cat),
+                className: `${pillBase} ${selectedCategory === cat ? pillActive : pillInactive}`,
+                children: cat
+              },
+              cat
+            ))
+          ]
+        }
+      )
+    ] }),
+    postsCount !== void 0 && /* @__PURE__ */ jsxs4(
+      "p",
+      {
+        className: `bk:text-[10px] bk:uppercase bk:tracking-wider bk:text-gray-400 bk:dark:text-gray-500 ${classNames.postsCount ?? ""}`,
+        children: [
+          postsCount,
+          " ",
+          postsCount === 1 ? "post" : "posts",
+          " found"
+        ]
+      }
+    )
+  ] });
 }
 
 // src/components/BlogPlaceholder.tsx
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 function BlogPlaceholder({ count = 3, className = "" }) {
-  return /* @__PURE__ */ jsx5("div", { className: `${className}`, children: Array.from({ length: count }).map((_, i) => /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsx6("div", { className: `${className}`, children: Array.from({ length: count }).map((_, i) => /* @__PURE__ */ jsxs5(
     "div",
     {
-      className: "bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-6 animate-pulse",
+      className: "bk:bg-white bk:dark:bg-gray-800 bk:rounded-lg bk:border bk:border-gray-200 bk:dark:border-gray-700 bk:p-6 bk:animate-pulse",
       children: [
-        /* @__PURE__ */ jsx5("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded mb-3" }),
-        /* @__PURE__ */ jsx5("div", { className: "h-6 bg-gray-200 dark:bg-gray-700 rounded mb-2" }),
-        /* @__PURE__ */ jsx5("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded w-3/4" })
+        /* @__PURE__ */ jsx6("div", { className: "bk:h-4 bk:bg-gray-200 bk:dark:bg-gray-700 bk:rounded bk:mb-3" }),
+        /* @__PURE__ */ jsx6("div", { className: "bk:h-6 bk:bg-gray-200 bk:dark:bg-gray-700 bk:rounded bk:mb-2" }),
+        /* @__PURE__ */ jsx6("div", { className: "bk:h-4 bk:bg-gray-200 bk:dark:bg-gray-700 bk:rounded bk:w-3/4" })
       ]
     },
     i
@@ -266,7 +404,7 @@ function BlogPlaceholder({ count = 3, className = "" }) {
 }
 
 // src/hooks/useBlogs.ts
-import { useState as useState2, useEffect as useEffect2 } from "react";
+import { useState as useState2, useMemo } from "react";
 
 // src/hooks/useDebounce.ts
 import { useEffect, useState } from "react";
@@ -283,33 +421,40 @@ function useDebounce(value, delay) {
   return debouncedValue;
 }
 
+// src/utils/filter-utils.ts
+function filterBlogs(blogs, searchTerm = "", selectedCategory = null) {
+  let filtered = blogs;
+  if (searchTerm) {
+    const lowerSearch = searchTerm.toLowerCase();
+    filtered = filtered.filter(
+      (blog) => (blog.title?.toLowerCase() || "").includes(lowerSearch) || (blog.description?.toLowerCase() || "").includes(lowerSearch)
+    );
+  }
+  if (selectedCategory) {
+    filtered = filtered.filter((blog) => {
+      const categories = blog.categories ?? [];
+      return categories.includes(selectedCategory);
+    });
+  }
+  return filtered;
+}
+function getAvailableCategories(blogs) {
+  return Array.from(new Set(blogs.flatMap((blog) => blog.categories ?? [])));
+}
+
 // src/hooks/useBlogs.ts
 function useBlogs(blogsMeta) {
-  const [filteredBlogs, setFilteredBlogs] = useState2(blogsMeta);
   const [searchTerm, setSearchTerm] = useState2("");
   const [selectedCategory, setSelectedCategory] = useState2(null);
   const debouncedSearchTerm = useDebounce(searchTerm, 500);
-  const getBlogCategories = (blog) => {
-    return blog.categories ?? [];
-  };
-  useEffect2(() => {
-    let filtered = blogsMeta;
-    if (debouncedSearchTerm) {
-      filtered = filtered.filter(
-        (blog) => blog.title.toLowerCase().includes(debouncedSearchTerm.toLowerCase()) || blog.description.toLowerCase().includes(debouncedSearchTerm.toLowerCase())
-      );
-    }
-    if (selectedCategory) {
-      filtered = filtered.filter((blog) => {
-        const blogCategories = getBlogCategories(blog);
-        return blogCategories.includes(selectedCategory);
-      });
-    }
-    setFilteredBlogs(filtered);
+  const metadata = useMemo(() => {
+    return filterBlogs(blogsMeta, debouncedSearchTerm, selectedCategory);
   }, [blogsMeta, debouncedSearchTerm, selectedCategory]);
-  const categories = Array.from(new Set(blogsMeta.flatMap((blog) => getBlogCategories(blog))));
+  const categories = useMemo(() => {
+    return getAvailableCategories(blogsMeta);
+  }, [blogsMeta]);
   return {
-    metadata: filteredBlogs,
+    metadata,
     searchTerm,
     setSearchTerm,
     selectedCategory,
@@ -322,5 +467,8 @@ export {
   BlogList,
   BlogPlaceholder,
   BlogRenderer,
+  Filter,
+  filterBlogs,
+  getAvailableCategories,
   useBlogs
 };

package/dist/style.css

@@ -1,2 +1,2 @@
 /*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
-@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-space-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-orange-100:oklch(95.4% .038 75.164);--color-orange-300:oklch(83.7% .128 66.29);--color-orange-500:oklch(70.5% .213 47.604);--color-orange-900:oklch(40.8% .123 38.172);--color-amber-100:oklch(96.2% .059 95.617);--color-amber-300:oklch(87.9% .169 91.605);--color-amber-500:oklch(76.9% .188 70.08);--color-amber-900:oklch(41.4% .112 45.904);--color-emerald-100:oklch(95% .052 163.051);--color-emerald-300:oklch(84.5% .143 164.978);--color-emerald-500:oklch(69.6% .17 162.48);--color-emerald-900:oklch(37.8% .077 168.94);--color-teal-100:oklch(95.3% .051 180.801);--color-teal-300:oklch(85.5% .138 181.071);--color-teal-500:oklch(70.4% .14 182.503);--color-teal-900:oklch(38.6% .063 188.416);--color-cyan-100:oklch(95.6% .045 203.388);--color-cyan-300:oklch(86.5% .127 207.078);--color-cyan-500:oklch(71.5% .143 215.221);--color-cyan-900:oklch(39.8% .07 227.392);--color-blue-100:oklch(93.2% .032 255.585);--color-blue-300:oklch(80.9% .105 251.813);--color-blue-400:oklch(70.7% .165 254.624);--color-blue-500:oklch(62.3% .214 259.815);--color-blue-600:oklch(54.6% .245 262.881);--color-blue-700:oklch(48.8% .243 264.376);--color-blue-800:oklch(42.4% .199 265.638);--color-blue-900:oklch(37.9% .146 265.522);--color-violet-100:oklch(94.3% .029 294.588);--color-violet-300:oklch(81.1% .111 293.571);--color-violet-500:oklch(60.6% .25 292.717);--color-violet-900:oklch(38% .189 293.745);--color-fuchsia-100:oklch(95.2% .037 318.852);--color-fuchsia-300:oklch(83.3% .145 321.434);--color-fuchsia-500:oklch(66.7% .295 322.15);--color-fuchsia-900:oklch(40.1% .17 325.612);--color-rose-100:oklch(94.1% .03 12.58);--color-rose-300:oklch(81% .117 11.638);--color-rose-400:oklch(71.2% .194 13.428);--color-rose-500:oklch(64.5% .246 16.439);--color-rose-600:oklch(58.6% .253 17.585);--color-rose-900:oklch(41% .159 10.272);--color-gray-50:oklch(98.5% .002 247.839);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-600:oklch(44.6% .03 256.802);--color-gray-700:oklch(37.3% .034 259.733);--color-gray-800:oklch(27.8% .033 256.848);--color-neutral-900:oklch(20.5% 0 0);--color-white:#fff;--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-base:1rem;--text-base--line-height:calc(1.5/1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75/1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2/1.5);--text-3xl:1.875rem;--text-3xl--line-height:calc(2.25/1.875);--text-4xl:2.25rem;--text-4xl--line-height:calc(2.5/2.25);--font-weight-medium:500;--font-weight-semibold:600;--tracking-tight:-.025em;--tracking-wide:.025em;--radius-lg:.5rem;--radius-xl:.75rem;--animate-pulse:pulse 2s cubic-bezier(.4,0,.6,1)infinite;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.my-6{margin-block:calc(var(--spacing)*6)}.my-9{margin-block:calc(var(--spacing)*9)}.mt-4{margin-top:calc(var(--spacing)*4)}.mt-5{margin-top:calc(var(--spacing)*5)}.mt-6{margin-top:calc(var(--spacing)*6)}.mt-8{margin-top:calc(var(--spacing)*8)}.mt-10{margin-top:calc(var(--spacing)*10)}.mt-auto{margin-top:auto}.mr-2{margin-right:calc(var(--spacing)*2)}.mb-2{margin-bottom:calc(var(--spacing)*2)}.mb-3{margin-bottom:calc(var(--spacing)*3)}.mb-4{margin-bottom:calc(var(--spacing)*4)}.mb-5{margin-bottom:calc(var(--spacing)*5)}.ml-6{margin-left:calc(var(--spacing)*6)}.line-clamp-2{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.h-4{height:calc(var(--spacing)*4)}.h-6{height:calc(var(--spacing)*6)}.h-auto{height:auto}.min-h-\[200px\]{min-height:200px}.w-3\/4{width:75%}.w-full{width:100%}.max-w-full{max-width:100%}.max-w-none{max-width:none}.shrink-0{flex-shrink:0}.animate-pulse{animation:var(--animate-pulse)}.list-decimal{list-style-type:decimal}.list-disc{list-style-type:disc}.flex-col{flex-direction:column}.flex-nowrap{flex-wrap:nowrap}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-1\.5{gap:calc(var(--spacing)*1.5)}.gap-2{gap:calc(var(--spacing)*2)}.gap-3{gap:calc(var(--spacing)*3)}.gap-6{gap:calc(var(--spacing)*6)}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*2)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*2)*calc(1 - var(--tw-space-y-reverse)))}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-xl{border-radius:var(--radius-xl)}.border{border-style:var(--tw-border-style);border-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-l-4{border-left-style:var(--tw-border-style);border-left-width:4px}.border-blue-500{border-color:var(--color-blue-500)}.border-gray-200{border-color:var(--color-gray-200)}.border-transparent{border-color:#0000}.bg-amber-100{background-color:var(--color-amber-100)}.bg-blue-100{background-color:var(--color-blue-100)}.bg-cyan-100{background-color:var(--color-cyan-100)}.bg-emerald-100{background-color:var(--color-emerald-100)}.bg-fuchsia-100{background-color:var(--color-fuchsia-100)}.bg-gray-50{background-color:var(--color-gray-50)}.bg-gray-100{background-color:var(--color-gray-100)}.bg-gray-200{background-color:var(--color-gray-200)}.bg-orange-100{background-color:var(--color-orange-100)}.bg-rose-100{background-color:var(--color-rose-100)}.bg-teal-100{background-color:var(--color-teal-100)}.bg-violet-100{background-color:var(--color-violet-100)}.bg-white{background-color:var(--color-white)}.p-6{padding:calc(var(--spacing)*6)}.px-1\.5{padding-inline:calc(var(--spacing)*1.5)}.px-2\.5{padding-inline:calc(var(--spacing)*2.5)}.px-4{padding-inline:calc(var(--spacing)*4)}.py-0\.5{padding-block:calc(var(--spacing)*.5)}.py-3{padding-block:calc(var(--spacing)*3)}.py-12{padding-block:calc(var(--spacing)*12)}.pl-4{padding-left:calc(var(--spacing)*4)}.text-center{text-align:center}.text-left{text-align:left}.font-mono{font-family:var(--font-mono)}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.leading-6{--tw-leading:calc(var(--spacing)*6);line-height:calc(var(--spacing)*6)}.leading-7{--tw-leading:calc(var(--spacing)*7);line-height:calc(var(--spacing)*7)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-tight{--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight)}.tracking-wide{--tw-tracking:var(--tracking-wide);letter-spacing:var(--tracking-wide)}.whitespace-nowrap{white-space:nowrap}.text-amber-500{color:var(--color-amber-500)}.text-blue-500{color:var(--color-blue-500)}.text-blue-600{color:var(--color-blue-600)}.text-cyan-500{color:var(--color-cyan-500)}.text-emerald-500{color:var(--color-emerald-500)}.text-fuchsia-500{color:var(--color-fuchsia-500)}.text-gray-500{color:var(--color-gray-500)}.text-gray-600{color:var(--color-gray-600)}.text-gray-700{color:var(--color-gray-700)}.text-gray-800{color:var(--color-gray-800)}.text-orange-500{color:var(--color-orange-500)}.text-rose-500{color:var(--color-rose-500)}.text-rose-600{color:var(--color-rose-600)}.text-teal-500{color:var(--color-teal-500)}.text-violet-500{color:var(--color-violet-500)}.uppercase{text-transform:uppercase}.italic{font-style:italic}.underline{text-decoration-line:underline}.underline-offset-4{text-underline-offset:4px}.accent-blue-600{accent-color:var(--color-blue-600)}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.first\:mt-0:first-child{margin-top:calc(var(--spacing)*0)}.last\:border-b-0:last-child{border-bottom-style:var(--tw-border-style);border-bottom-width:0}@media (hover:hover){.hover\:border-gray-300:hover{border-color:var(--color-gray-300)}.hover\:text-blue-700:hover{color:var(--color-blue-700)}.hover\:text-blue-800:hover{color:var(--color-blue-800)}.hover\:underline:hover{text-decoration-line:underline}}@media (min-width:48rem){.md\:text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.md\:text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.md\:text-4xl{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}}.dark\:border-gray-700:is(html.dark *){border-color:var(--color-gray-700)}.dark\:border-neutral-900:is(html.dark *){border-color:var(--color-neutral-900)}.dark\:bg-amber-900\/30:is(html.dark *){background-color:#7b33064d}@supports (color:color-mix(in lab, red, red)){.dark\:bg-amber-900\/30:is(html.dark *){background-color:color-mix(in oklab,var(--color-amber-900)30%,transparent)}}.dark\:bg-blue-900\/30:is(html.dark *){background-color:#1c398e4d}@supports (color:color-mix(in lab, red, red)){.dark\:bg-blue-900\/30:is(html.dark *){background-color:color-mix(in oklab,var(--color-blue-900)30%,transparent)}}.dark\:bg-cyan-900\/30:is(html.dark *){background-color:#104e644d}@supports (color:color-mix(in lab, red, red)){.dark\:bg-cyan-900\/30:is(html.dark *){background-color:color-mix(in oklab,var(--color-cyan-900)30%,transparent)}}.dark\:bg-emerald-900\/30:is(html.dark *){background-color:#004e3b4d}@supports (color:color-mix(in lab, red, red)){.dark\:bg-emerald-900\/30:is(html.dark *){background-color:color-mix(in oklab,var(--color-emerald-900)30%,transparent)}}.dark\:bg-fuchsia-900\/30:is(html.dark *){background-color:#7213784d}@supports (color:color-mix(in lab, red, red)){.dark\:bg-fuchsia-900\/30:is(html.dark *){background-color:color-mix(in oklab,var(--color-fuchsia-900)30%,transparent)}}.dark\:bg-gray-700:is(html.dark *){background-color:var(--color-gray-700)}.dark\:bg-gray-800:is(html.dark *){background-color:var(--color-gray-800)}.dark\:bg-orange-900\/30:is(html.dark *){background-color:#7e2a0c4d}@supports (color:color-mix(in lab, red, red)){.dark\:bg-orange-900\/30:is(html.dark *){background-color:color-mix(in oklab,var(--color-orange-900)30%,transparent)}}.dark\:bg-rose-900\/30:is(html.dark *){background-color:#8b08364d}@supports (color:color-mix(in lab, red, red)){.dark\:bg-rose-900\/30:is(html.dark *){background-color:color-mix(in oklab,var(--color-rose-900)30%,transparent)}}.dark\:bg-teal-900\/30:is(html.dark *){background-color:#0b4f4a4d}@supports (color:color-mix(in lab, red, red)){.dark\:bg-teal-900\/30:is(html.dark *){background-color:color-mix(in oklab,var(--color-teal-900)30%,transparent)}}.dark\:bg-violet-900\/30:is(html.dark *){background-color:#4d179a4d}@supports (color:color-mix(in lab, red, red)){.dark\:bg-violet-900\/30:is(html.dark *){background-color:color-mix(in oklab,var(--color-violet-900)30%,transparent)}}.dark\:text-amber-300:is(html.dark *){color:var(--color-amber-300)}.dark\:text-blue-300:is(html.dark *){color:var(--color-blue-300)}.dark\:text-blue-400:is(html.dark *){color:var(--color-blue-400)}.dark\:text-cyan-300:is(html.dark *){color:var(--color-cyan-300)}.dark\:text-emerald-300:is(html.dark *){color:var(--color-emerald-300)}.dark\:text-fuchsia-300:is(html.dark *){color:var(--color-fuchsia-300)}.dark\:text-gray-100:is(html.dark *){color:var(--color-gray-100)}.dark\:text-gray-200:is(html.dark *){color:var(--color-gray-200)}.dark\:text-gray-300:is(html.dark *){color:var(--color-gray-300)}.dark\:text-gray-400:is(html.dark *){color:var(--color-gray-400)}.dark\:text-orange-300:is(html.dark *){color:var(--color-orange-300)}.dark\:text-rose-300:is(html.dark *){color:var(--color-rose-300)}.dark\:text-rose-400:is(html.dark *){color:var(--color-rose-400)}.dark\:text-teal-300:is(html.dark *){color:var(--color-teal-300)}.dark\:text-violet-300:is(html.dark *){color:var(--color-violet-300)}@media (hover:hover){.dark\:hover\:border-gray-600:is(html.dark *):hover{border-color:var(--color-gray-600)}.dark\:hover\:text-blue-300:is(html.dark *):hover{color:var(--color-blue-300)}}.\[\&\>code\]\:block>code{display:block}.\[\&\>code\]\:p-4>code{padding:calc(var(--spacing)*4)}}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@keyframes pulse{50%{opacity:.5}}
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial}}}@layer theme{:root,:host{--bk-font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--bk-font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--bk-color-orange-100:oklch(95.4% .038 75.164);--bk-color-orange-300:oklch(83.7% .128 66.29);--bk-color-orange-500:oklch(70.5% .213 47.604);--bk-color-orange-900:oklch(40.8% .123 38.172);--bk-color-amber-100:oklch(96.2% .059 95.617);--bk-color-amber-300:oklch(87.9% .169 91.605);--bk-color-amber-500:oklch(76.9% .188 70.08);--bk-color-amber-900:oklch(41.4% .112 45.904);--bk-color-emerald-100:oklch(95% .052 163.051);--bk-color-emerald-300:oklch(84.5% .143 164.978);--bk-color-emerald-500:oklch(69.6% .17 162.48);--bk-color-emerald-900:oklch(37.8% .077 168.94);--bk-color-teal-100:oklch(95.3% .051 180.801);--bk-color-teal-300:oklch(85.5% .138 181.071);--bk-color-teal-500:oklch(70.4% .14 182.503);--bk-color-teal-900:oklch(38.6% .063 188.416);--bk-color-cyan-100:oklch(95.6% .045 203.388);--bk-color-cyan-300:oklch(86.5% .127 207.078);--bk-color-cyan-500:oklch(71.5% .143 215.221);--bk-color-cyan-900:oklch(39.8% .07 227.392);--bk-color-blue-100:oklch(93.2% .032 255.585);--bk-color-blue-300:oklch(80.9% .105 251.813);--bk-color-blue-400:oklch(70.7% .165 254.624);--bk-color-blue-500:oklch(62.3% .214 259.815);--bk-color-blue-600:oklch(54.6% .245 262.881);--bk-color-blue-700:oklch(48.8% .243 264.376);--bk-color-blue-800:oklch(42.4% .199 265.638);--bk-color-blue-900:oklch(37.9% .146 265.522);--bk-color-violet-100:oklch(94.3% .029 294.588);--bk-color-violet-300:oklch(81.1% .111 293.571);--bk-color-violet-500:oklch(60.6% .25 292.717);--bk-color-violet-900:oklch(38% .189 293.745);--bk-color-fuchsia-100:oklch(95.2% .037 318.852);--bk-color-fuchsia-300:oklch(83.3% .145 321.434);--bk-color-fuchsia-500:oklch(66.7% .295 322.15);--bk-color-fuchsia-900:oklch(40.1% .17 325.612);--bk-color-rose-100:oklch(94.1% .03 12.58);--bk-color-rose-300:oklch(81% .117 11.638);--bk-color-rose-400:oklch(71.2% .194 13.428);--bk-color-rose-500:oklch(64.5% .246 16.439);--bk-color-rose-600:oklch(58.6% .253 17.585);--bk-color-rose-900:oklch(41% .159 10.272);--bk-color-gray-50:oklch(98.5% .002 247.839);--bk-color-gray-100:oklch(96.7% .003 264.542);--bk-color-gray-200:oklch(92.8% .006 264.531);--bk-color-gray-300:oklch(87.2% .01 258.338);--bk-color-gray-400:oklch(70.7% .022 261.325);--bk-color-gray-500:oklch(55.1% .027 264.364);--bk-color-gray-600:oklch(44.6% .03 256.802);--bk-color-gray-700:oklch(37.3% .034 259.733);--bk-color-gray-800:oklch(27.8% .033 256.848);--bk-color-neutral-900:oklch(20.5% 0 0);--bk-color-white:#fff;--bk-spacing:.25rem;--bk-text-xs:.75rem;--bk-text-xs--line-height:calc(1/.75);--bk-text-sm:.875rem;--bk-text-sm--line-height:calc(1.25/.875);--bk-text-base:1rem;--bk-text-base--line-height:calc(1.5/1);--bk-text-lg:1.125rem;--bk-text-lg--line-height:calc(1.75/1.125);--bk-text-xl:1.25rem;--bk-text-xl--line-height:calc(1.75/1.25);--bk-text-2xl:1.5rem;--bk-text-2xl--line-height:calc(2/1.5);--bk-text-3xl:1.875rem;--bk-text-3xl--line-height:calc(2.25/1.875);--bk-text-4xl:2.25rem;--bk-text-4xl--line-height:calc(2.5/2.25);--bk-font-weight-medium:500;--bk-font-weight-semibold:600;--bk-font-weight-bold:700;--bk-tracking-tight:-.025em;--bk-tracking-wide:.025em;--bk-tracking-wider:.05em;--bk-radius-md:.375rem;--bk-radius-lg:.5rem;--bk-radius-xl:.75rem;--bk-animate-pulse:pulse 2s cubic-bezier(.4,0,.6,1)infinite;--bk-default-font-family:var(--bk-font-sans);--bk-default-mono-font-family:var(--bk-font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--bk-default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--bk-default-font-feature-settings,normal);font-variation-settings:var(--bk-default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--bk-default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--bk-default-mono-font-feature-settings,normal);font-variation-settings:var(--bk-default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.bk\:pointer-events-none{pointer-events:none}.bk\:absolute{position:absolute}.bk\:relative{position:relative}.bk\:top-1\/2{top:50%}.bk\:left-3{left:calc(var(--bk-spacing)*3)}.bk\:my-6{margin-block:calc(var(--bk-spacing)*6)}.bk\:my-9{margin-block:calc(var(--bk-spacing)*9)}.bk\:mt-4{margin-top:calc(var(--bk-spacing)*4)}.bk\:mt-5{margin-top:calc(var(--bk-spacing)*5)}.bk\:mt-6{margin-top:calc(var(--bk-spacing)*6)}.bk\:mt-8{margin-top:calc(var(--bk-spacing)*8)}.bk\:mt-10{margin-top:calc(var(--bk-spacing)*10)}.bk\:mt-auto{margin-top:auto}.bk\:mr-2{margin-right:calc(var(--bk-spacing)*2)}.bk\:mb-2{margin-bottom:calc(var(--bk-spacing)*2)}.bk\:mb-3{margin-bottom:calc(var(--bk-spacing)*3)}.bk\:mb-4{margin-bottom:calc(var(--bk-spacing)*4)}.bk\:mb-5{margin-bottom:calc(var(--bk-spacing)*5)}.bk\:mb-6{margin-bottom:calc(var(--bk-spacing)*6)}.bk\:mb-8{margin-bottom:calc(var(--bk-spacing)*8)}.bk\:ml-6{margin-left:calc(var(--bk-spacing)*6)}.bk\:line-clamp-2{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.bk\:flex{display:flex}.bk\:inline-flex{display:inline-flex}.bk\:h-3\.5{height:calc(var(--bk-spacing)*3.5)}.bk\:h-4{height:calc(var(--bk-spacing)*4)}.bk\:h-6{height:calc(var(--bk-spacing)*6)}.bk\:h-auto{height:auto}.bk\:min-h-\[200px\]{min-height:200px}.bk\:w-3\.5{width:calc(var(--bk-spacing)*3.5)}.bk\:w-3\/4{width:75%}.bk\:w-full{width:100%}.bk\:max-w-full{max-width:100%}.bk\:max-w-none{max-width:none}.bk\:flex-1{flex:1}.bk\:shrink-0{flex-shrink:0}.bk\:-translate-y-1\/2{--tw-translate-y:calc(calc(1/2*100%)*-1);translate:var(--tw-translate-x)var(--tw-translate-y)}.bk\:animate-pulse{animation:var(--bk-animate-pulse)}.bk\:cursor-pointer{cursor:pointer}.bk\:list-decimal{list-style-type:decimal}.bk\:list-disc{list-style-type:disc}.bk\:flex-col{flex-direction:column}.bk\:flex-nowrap{flex-wrap:nowrap}.bk\:flex-wrap{flex-wrap:wrap}.bk\:items-center{align-items:center}.bk\:justify-between{justify-content:space-between}.bk\:gap-1\.5{gap:calc(var(--bk-spacing)*1.5)}.bk\:gap-2{gap:calc(var(--bk-spacing)*2)}.bk\:gap-3{gap:calc(var(--bk-spacing)*3)}.bk\:gap-4{gap:calc(var(--bk-spacing)*4)}.bk\:gap-6{gap:calc(var(--bk-spacing)*6)}:where(.bk\:space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--bk-spacing)*2)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--bk-spacing)*2)*calc(1 - var(--tw-space-y-reverse)))}.bk\:overflow-hidden{overflow:hidden}.bk\:overflow-x-auto{overflow-x:auto}.bk\:rounded{border-radius:.25rem}.bk\:rounded-full{border-radius:3.40282e38px}.bk\:rounded-lg{border-radius:var(--bk-radius-lg)}.bk\:rounded-md{border-radius:var(--bk-radius-md)}.bk\:rounded-xl{border-radius:var(--bk-radius-xl)}.bk\:border{border-style:var(--tw-border-style);border-width:1px}.bk\:border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.bk\:border-l-4{border-left-style:var(--tw-border-style);border-left-width:4px}.bk\:border-blue-500{border-color:var(--bk-color-blue-500)}.bk\:border-gray-200{border-color:var(--bk-color-gray-200)}.bk\:border-transparent{border-color:#0000}.bk\:bg-amber-100{background-color:var(--bk-color-amber-100)}.bk\:bg-blue-100{background-color:var(--bk-color-blue-100)}.bk\:bg-cyan-100{background-color:var(--bk-color-cyan-100)}.bk\:bg-emerald-100{background-color:var(--bk-color-emerald-100)}.bk\:bg-fuchsia-100{background-color:var(--bk-color-fuchsia-100)}.bk\:bg-gray-50{background-color:var(--bk-color-gray-50)}.bk\:bg-gray-100{background-color:var(--bk-color-gray-100)}.bk\:bg-gray-200{background-color:var(--bk-color-gray-200)}.bk\:bg-gray-700{background-color:var(--bk-color-gray-700)}.bk\:bg-orange-100{background-color:var(--bk-color-orange-100)}.bk\:bg-rose-100{background-color:var(--bk-color-rose-100)}.bk\:bg-teal-100{background-color:var(--bk-color-teal-100)}.bk\:bg-violet-100{background-color:var(--bk-color-violet-100)}.bk\:bg-white{background-color:var(--bk-color-white)}.bk\:p-6{padding:calc(var(--bk-spacing)*6)}.bk\:px-1\.5{padding-inline:calc(var(--bk-spacing)*1.5)}.bk\:px-2\.5{padding-inline:calc(var(--bk-spacing)*2.5)}.bk\:px-4{padding-inline:calc(var(--bk-spacing)*4)}.bk\:py-0\.5{padding-block:calc(var(--bk-spacing)*.5)}.bk\:py-1{padding-block:calc(var(--bk-spacing)*1)}.bk\:py-2{padding-block:calc(var(--bk-spacing)*2)}.bk\:py-3{padding-block:calc(var(--bk-spacing)*3)}.bk\:py-12{padding-block:calc(var(--bk-spacing)*12)}.bk\:pr-4{padding-right:calc(var(--bk-spacing)*4)}.bk\:pl-4{padding-left:calc(var(--bk-spacing)*4)}.bk\:pl-8{padding-left:calc(var(--bk-spacing)*8)}.bk\:text-center{text-align:center}.bk\:text-left{text-align:left}.bk\:font-mono{font-family:var(--bk-font-mono)}.bk\:text-2xl{font-size:var(--bk-text-2xl);line-height:var(--tw-leading,var(--bk-text-2xl--line-height))}.bk\:text-3xl{font-size:var(--bk-text-3xl);line-height:var(--tw-leading,var(--bk-text-3xl--line-height))}.bk\:text-4xl{font-size:var(--bk-text-4xl);line-height:var(--tw-leading,var(--bk-text-4xl--line-height))}.bk\:text-base{font-size:var(--bk-text-base);line-height:var(--tw-leading,var(--bk-text-base--line-height))}.bk\:text-lg{font-size:var(--bk-text-lg);line-height:var(--tw-leading,var(--bk-text-lg--line-height))}.bk\:text-sm{font-size:var(--bk-text-sm);line-height:var(--tw-leading,var(--bk-text-sm--line-height))}.bk\:text-xl{font-size:var(--bk-text-xl);line-height:var(--tw-leading,var(--bk-text-xl--line-height))}.bk\:text-xs{font-size:var(--bk-text-xs);line-height:var(--tw-leading,var(--bk-text-xs--line-height))}.bk\:text-\[10px\]{font-size:10px}.bk\:leading-6{--tw-leading:calc(var(--bk-spacing)*6);line-height:calc(var(--bk-spacing)*6)}.bk\:leading-7{--tw-leading:calc(var(--bk-spacing)*7);line-height:calc(var(--bk-spacing)*7)}.bk\:font-bold{--tw-font-weight:var(--bk-font-weight-bold);font-weight:var(--bk-font-weight-bold)}.bk\:font-medium{--tw-font-weight:var(--bk-font-weight-medium);font-weight:var(--bk-font-weight-medium)}.bk\:font-semibold{--tw-font-weight:var(--bk-font-weight-semibold);font-weight:var(--bk-font-weight-semibold)}.bk\:tracking-tight{--tw-tracking:var(--bk-tracking-tight);letter-spacing:var(--bk-tracking-tight)}.bk\:tracking-wide{--tw-tracking:var(--bk-tracking-wide);letter-spacing:var(--bk-tracking-wide)}.bk\:tracking-wider{--tw-tracking:var(--bk-tracking-wider);letter-spacing:var(--bk-tracking-wider)}.bk\:whitespace-nowrap{white-space:nowrap}.bk\:text-amber-500{color:var(--bk-color-amber-500)}.bk\:text-blue-500{color:var(--bk-color-blue-500)}.bk\:text-blue-600{color:var(--bk-color-blue-600)}.bk\:text-cyan-500{color:var(--bk-color-cyan-500)}.bk\:text-emerald-500{color:var(--bk-color-emerald-500)}.bk\:text-fuchsia-500{color:var(--bk-color-fuchsia-500)}.bk\:text-gray-400{color:var(--bk-color-gray-400)}.bk\:text-gray-500{color:var(--bk-color-gray-500)}.bk\:text-gray-600{color:var(--bk-color-gray-600)}.bk\:text-gray-700{color:var(--bk-color-gray-700)}.bk\:text-gray-800{color:var(--bk-color-gray-800)}.bk\:text-orange-500{color:var(--bk-color-orange-500)}.bk\:text-rose-500{color:var(--bk-color-rose-500)}.bk\:text-rose-600{color:var(--bk-color-rose-600)}.bk\:text-teal-500{color:var(--bk-color-teal-500)}.bk\:text-violet-500{color:var(--bk-color-violet-500)}.bk\:text-white{color:var(--bk-color-white)}.bk\:uppercase{text-transform:uppercase}.bk\:italic{font-style:italic}.bk\:underline{text-decoration-line:underline}.bk\:underline-offset-4{text-underline-offset:4px}.bk\:placeholder-gray-400::placeholder{color:var(--bk-color-gray-400)}.bk\:accent-blue-600{accent-color:var(--bk-color-blue-600)}.bk\:transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.bk\:first\:mt-0:first-child{margin-top:calc(var(--bk-spacing)*0)}.bk\:last\:border-b-0:last-child{border-bottom-style:var(--tw-border-style);border-bottom-width:0}@media (hover:hover){.bk\:hover\:border-gray-300:hover{border-color:var(--bk-color-gray-300)}.bk\:hover\:bg-gray-200:hover{background-color:var(--bk-color-gray-200)}.bk\:hover\:text-blue-700:hover{color:var(--bk-color-blue-700)}.bk\:hover\:text-blue-800:hover{color:var(--bk-color-blue-800)}.bk\:hover\:underline:hover{text-decoration-line:underline}}.bk\:focus\:border-gray-400:focus{border-color:var(--bk-color-gray-400)}.bk\:focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}@media (min-width:40rem){.bk\:sm\:flex-row{flex-direction:row}}@media (min-width:48rem){.bk\:md\:text-2xl{font-size:var(--bk-text-2xl);line-height:var(--tw-leading,var(--bk-text-2xl--line-height))}.bk\:md\:text-3xl{font-size:var(--bk-text-3xl);line-height:var(--tw-leading,var(--bk-text-3xl--line-height))}.bk\:md\:text-4xl{font-size:var(--bk-text-4xl);line-height:var(--tw-leading,var(--bk-text-4xl--line-height))}}.bk\:dark\:border-gray-700:is(html.dark *){border-color:var(--bk-color-gray-700)}.bk\:dark\:border-neutral-900:is(html.dark *){border-color:var(--bk-color-neutral-900)}.bk\:dark\:bg-amber-900\/30:is(html.dark *){background-color:var(--bk-color-amber-900)}@supports (color:color-mix(in lab, red, red)){.bk\:dark\:bg-amber-900\/30:is(html.dark *){background-color:color-mix(in oklab,var(--bk-color-amber-900)30%,transparent)}}.bk\:dark\:bg-blue-900\/30:is(html.dark *){background-color:var(--bk-color-blue-900)}@supports (color:color-mix(in lab, red, red)){.bk\:dark\:bg-blue-900\/30:is(html.dark *){background-color:color-mix(in oklab,var(--bk-color-blue-900)30%,transparent)}}.bk\:dark\:bg-cyan-900\/30:is(html.dark *){background-color:var(--bk-color-cyan-900)}@supports (color:color-mix(in lab, red, red)){.bk\:dark\:bg-cyan-900\/30:is(html.dark *){background-color:color-mix(in oklab,var(--bk-color-cyan-900)30%,transparent)}}.bk\:dark\:bg-emerald-900\/30:is(html.dark *){background-color:var(--bk-color-emerald-900)}@supports (color:color-mix(in lab, red, red)){.bk\:dark\:bg-emerald-900\/30:is(html.dark *){background-color:color-mix(in oklab,var(--bk-color-emerald-900)30%,transparent)}}.bk\:dark\:bg-fuchsia-900\/30:is(html.dark *){background-color:var(--bk-color-fuchsia-900)}@supports (color:color-mix(in lab, red, red)){.bk\:dark\:bg-fuchsia-900\/30:is(html.dark *){background-color:color-mix(in oklab,var(--bk-color-fuchsia-900)30%,transparent)}}.bk\:dark\:bg-gray-200:is(html.dark *){background-color:var(--bk-color-gray-200)}.bk\:dark\:bg-gray-700:is(html.dark *){background-color:var(--bk-color-gray-700)}.bk\:dark\:bg-gray-800:is(html.dark *){background-color:var(--bk-color-gray-800)}.bk\:dark\:bg-orange-900\/30:is(html.dark *){background-color:var(--bk-color-orange-900)}@supports (color:color-mix(in lab, red, red)){.bk\:dark\:bg-orange-900\/30:is(html.dark *){background-color:color-mix(in oklab,var(--bk-color-orange-900)30%,transparent)}}.bk\:dark\:bg-rose-900\/30:is(html.dark *){background-color:var(--bk-color-rose-900)}@supports (color:color-mix(in lab, red, red)){.bk\:dark\:bg-rose-900\/30:is(html.dark *){background-color:color-mix(in oklab,var(--bk-color-rose-900)30%,transparent)}}.bk\:dark\:bg-teal-900\/30:is(html.dark *){background-color:var(--bk-color-teal-900)}@supports (color:color-mix(in lab, red, red)){.bk\:dark\:bg-teal-900\/30:is(html.dark *){background-color:color-mix(in oklab,var(--bk-color-teal-900)30%,transparent)}}.bk\:dark\:bg-violet-900\/30:is(html.dark *){background-color:var(--bk-color-violet-900)}@supports (color:color-mix(in lab, red, red)){.bk\:dark\:bg-violet-900\/30:is(html.dark *){background-color:color-mix(in oklab,var(--bk-color-violet-900)30%,transparent)}}.bk\:dark\:text-amber-300:is(html.dark *){color:var(--bk-color-amber-300)}.bk\:dark\:text-blue-300:is(html.dark *){color:var(--bk-color-blue-300)}.bk\:dark\:text-blue-400:is(html.dark *){color:var(--bk-color-blue-400)}.bk\:dark\:text-cyan-300:is(html.dark *){color:var(--bk-color-cyan-300)}.bk\:dark\:text-emerald-300:is(html.dark *){color:var(--bk-color-emerald-300)}.bk\:dark\:text-fuchsia-300:is(html.dark *){color:var(--bk-color-fuchsia-300)}.bk\:dark\:text-gray-100:is(html.dark *){color:var(--bk-color-gray-100)}.bk\:dark\:text-gray-200:is(html.dark *){color:var(--bk-color-gray-200)}.bk\:dark\:text-gray-300:is(html.dark *){color:var(--bk-color-gray-300)}.bk\:dark\:text-gray-400:is(html.dark *){color:var(--bk-color-gray-400)}.bk\:dark\:text-gray-500:is(html.dark *){color:var(--bk-color-gray-500)}.bk\:dark\:text-gray-800:is(html.dark *){color:var(--bk-color-gray-800)}.bk\:dark\:text-orange-300:is(html.dark *){color:var(--bk-color-orange-300)}.bk\:dark\:text-rose-300:is(html.dark *){color:var(--bk-color-rose-300)}.bk\:dark\:text-rose-400:is(html.dark *){color:var(--bk-color-rose-400)}.bk\:dark\:text-teal-300:is(html.dark *){color:var(--bk-color-teal-300)}.bk\:dark\:text-violet-300:is(html.dark *){color:var(--bk-color-violet-300)}@media (hover:hover){.bk\:dark\:hover\:border-gray-600:is(html.dark *):hover{border-color:var(--bk-color-gray-600)}.bk\:dark\:hover\:bg-gray-600:is(html.dark *):hover{background-color:var(--bk-color-gray-600)}.bk\:dark\:hover\:text-blue-300:is(html.dark *):hover{color:var(--bk-color-blue-300)}}.bk\:dark\:focus\:border-gray-500:is(html.dark *):focus{border-color:var(--bk-color-gray-500)}}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@keyframes pulse{50%{opacity:.5}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haroonwaves/blog-kit-react",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
@@ -14,8 +14,10 @@
     "markdown",
     "react",
     "nextjs",
+    "nextjs-blog",
     "blog-engine",
     "ssg",
+    "server-components",
     "blog-kit"
   ],
   "author": "Haroon (https://github.com/haroonwaves)",