@caffeinebounce/ui 0.62.2

package/dist/blog.d.cts

@@ -0,0 +1,99 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { ReactNode, ComponentPropsWithoutRef } from 'react';
+import * as lucide_react from 'lucide-react';
+
+interface AuthorLink {
+    label: string;
+    url: string;
+}
+interface BlogAuthorCardProps {
+    name: string;
+    avatar?: string;
+    bio?: string;
+    links?: AuthorLink[];
+}
+declare function BlogAuthorCard({ name, avatar, bio, links, }: BlogAuthorCardProps): react_jsx_runtime.JSX.Element;
+
+interface BlogPost {
+    slug: string;
+    title: string;
+    date: string;
+    excerpt?: string;
+    cover?: string;
+    author?: string;
+    tags?: string[];
+    readingTime?: string;
+}
+interface BlogCardGridProps {
+    posts: BlogPost[];
+    basePath?: string;
+}
+declare function BlogCardGrid({ posts, basePath }: BlogCardGridProps): react_jsx_runtime.JSX.Element;
+
+interface PostLink {
+    slug: string;
+    title: string;
+}
+interface BlogPostFooterProps {
+    prevPost?: PostLink;
+    nextPost?: PostLink;
+    basePath?: string;
+}
+declare function BlogPostFooter({ prevPost, nextPost, basePath, }: BlogPostFooterProps): react_jsx_runtime.JSX.Element | null;
+
+interface BlogPostHeaderProps {
+    title: string;
+    date: string;
+    author?: string;
+    cover?: string;
+    readingTime?: string;
+    tags?: string[];
+}
+declare function BlogPostHeader({ title, date, author, cover, readingTime, tags, }: BlogPostHeaderProps): react_jsx_runtime.JSX.Element;
+
+declare const calloutConfig: {
+    readonly tip: {
+        readonly icon: React.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
+        readonly className: "border-emerald-500/30 bg-emerald-500/5 [&>svg]:text-emerald-500";
+    };
+    readonly warning: {
+        readonly icon: React.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
+        readonly className: "border-amber-500/30 bg-amber-500/5 [&>svg]:text-amber-500";
+    };
+    readonly note: {
+        readonly icon: React.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
+        readonly className: "border-blue-500/30 bg-blue-500/5 [&>svg]:text-blue-500";
+    };
+};
+interface CalloutProps {
+    type?: keyof typeof calloutConfig;
+    title?: string;
+    children: ReactNode;
+}
+declare function Callout({ type, title, children }: CalloutProps): react_jsx_runtime.JSX.Element;
+declare function Blockquote(props: ComponentPropsWithoutRef<"blockquote">): react_jsx_runtime.JSX.Element;
+declare function MdxImage(props: ComponentPropsWithoutRef<"img"> & {
+    caption?: string;
+}): react_jsx_runtime.JSX.Element;
+declare const mdxComponents: {
+    h1: (props: ComponentPropsWithoutRef<"h1" | "h2" | "h3" | "h4" | "h5" | "h6">) => react_jsx_runtime.JSX.Element;
+    h2: (props: ComponentPropsWithoutRef<"h1" | "h2" | "h3" | "h4" | "h5" | "h6">) => react_jsx_runtime.JSX.Element;
+    h3: (props: ComponentPropsWithoutRef<"h1" | "h2" | "h3" | "h4" | "h5" | "h6">) => react_jsx_runtime.JSX.Element;
+    h4: (props: ComponentPropsWithoutRef<"h1" | "h2" | "h3" | "h4" | "h5" | "h6">) => react_jsx_runtime.JSX.Element;
+    blockquote: typeof Blockquote;
+    img: typeof MdxImage;
+    Callout: typeof Callout;
+};
+
+interface TocHeading {
+    id: string;
+    text: string;
+    level: number;
+}
+interface TableOfContentsProps {
+    headings: TocHeading[];
+}
+declare function TableOfContents({ headings }: TableOfContentsProps): react_jsx_runtime.JSX.Element | null;
+
+export { type AuthorLink, BlogAuthorCard, type BlogAuthorCardProps, BlogCardGrid, type BlogCardGridProps, type BlogPost, BlogPostFooter, type BlogPostFooterProps, BlogPostHeader, type BlogPostHeaderProps, Callout, type CalloutProps, type PostLink, TableOfContents, type TableOfContentsProps, type TocHeading, mdxComponents };

package/dist/blog.d.ts

@@ -0,0 +1,99 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { ReactNode, ComponentPropsWithoutRef } from 'react';
+import * as lucide_react from 'lucide-react';
+
+interface AuthorLink {
+    label: string;
+    url: string;
+}
+interface BlogAuthorCardProps {
+    name: string;
+    avatar?: string;
+    bio?: string;
+    links?: AuthorLink[];
+}
+declare function BlogAuthorCard({ name, avatar, bio, links, }: BlogAuthorCardProps): react_jsx_runtime.JSX.Element;
+
+interface BlogPost {
+    slug: string;
+    title: string;
+    date: string;
+    excerpt?: string;
+    cover?: string;
+    author?: string;
+    tags?: string[];
+    readingTime?: string;
+}
+interface BlogCardGridProps {
+    posts: BlogPost[];
+    basePath?: string;
+}
+declare function BlogCardGrid({ posts, basePath }: BlogCardGridProps): react_jsx_runtime.JSX.Element;
+
+interface PostLink {
+    slug: string;
+    title: string;
+}
+interface BlogPostFooterProps {
+    prevPost?: PostLink;
+    nextPost?: PostLink;
+    basePath?: string;
+}
+declare function BlogPostFooter({ prevPost, nextPost, basePath, }: BlogPostFooterProps): react_jsx_runtime.JSX.Element | null;
+
+interface BlogPostHeaderProps {
+    title: string;
+    date: string;
+    author?: string;
+    cover?: string;
+    readingTime?: string;
+    tags?: string[];
+}
+declare function BlogPostHeader({ title, date, author, cover, readingTime, tags, }: BlogPostHeaderProps): react_jsx_runtime.JSX.Element;
+
+declare const calloutConfig: {
+    readonly tip: {
+        readonly icon: React.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
+        readonly className: "border-emerald-500/30 bg-emerald-500/5 [&>svg]:text-emerald-500";
+    };
+    readonly warning: {
+        readonly icon: React.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
+        readonly className: "border-amber-500/30 bg-amber-500/5 [&>svg]:text-amber-500";
+    };
+    readonly note: {
+        readonly icon: React.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
+        readonly className: "border-blue-500/30 bg-blue-500/5 [&>svg]:text-blue-500";
+    };
+};
+interface CalloutProps {
+    type?: keyof typeof calloutConfig;
+    title?: string;
+    children: ReactNode;
+}
+declare function Callout({ type, title, children }: CalloutProps): react_jsx_runtime.JSX.Element;
+declare function Blockquote(props: ComponentPropsWithoutRef<"blockquote">): react_jsx_runtime.JSX.Element;
+declare function MdxImage(props: ComponentPropsWithoutRef<"img"> & {
+    caption?: string;
+}): react_jsx_runtime.JSX.Element;
+declare const mdxComponents: {
+    h1: (props: ComponentPropsWithoutRef<"h1" | "h2" | "h3" | "h4" | "h5" | "h6">) => react_jsx_runtime.JSX.Element;
+    h2: (props: ComponentPropsWithoutRef<"h1" | "h2" | "h3" | "h4" | "h5" | "h6">) => react_jsx_runtime.JSX.Element;
+    h3: (props: ComponentPropsWithoutRef<"h1" | "h2" | "h3" | "h4" | "h5" | "h6">) => react_jsx_runtime.JSX.Element;
+    h4: (props: ComponentPropsWithoutRef<"h1" | "h2" | "h3" | "h4" | "h5" | "h6">) => react_jsx_runtime.JSX.Element;
+    blockquote: typeof Blockquote;
+    img: typeof MdxImage;
+    Callout: typeof Callout;
+};
+
+interface TocHeading {
+    id: string;
+    text: string;
+    level: number;
+}
+interface TableOfContentsProps {
+    headings: TocHeading[];
+}
+declare function TableOfContents({ headings }: TableOfContentsProps): react_jsx_runtime.JSX.Element | null;
+
+export { type AuthorLink, BlogAuthorCard, type BlogAuthorCardProps, BlogCardGrid, type BlogCardGridProps, type BlogPost, BlogPostFooter, type BlogPostFooterProps, BlogPostHeader, type BlogPostHeaderProps, Callout, type CalloutProps, type PostLink, TableOfContents, type TableOfContentsProps, type TocHeading, mdxComponents };

package/dist/blog.js

@@ -0,0 +1,292 @@
+'use strict';
+
+var chunkPZRI43EZ_js = require('./chunk-PZRI43EZ.js');
+var chunkEYJJQVV4_js = require('./chunk-EYJJQVV4.js');
+require('./chunk-Q256HRYD.js');
+require('./chunk-ADIDI7AJ.js');
+var Image = require('next/image');
+var jsxRuntime = require('react/jsx-runtime');
+var sharedUtils = require('@caffeinebounce/shared-utils');
+var Link2 = require('next/link');
+var lucideReact = require('lucide-react');
+var react = require('react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var Image__default = /*#__PURE__*/_interopDefault(Image);
+var Link2__default = /*#__PURE__*/_interopDefault(Link2);
+
+function BlogAuthorCard({
+  name,
+  avatar,
+  bio,
+  links
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(chunkEYJJQVV4_js.Card, { className: "border-border/50 bg-card/50 backdrop-blur-sm", children: /* @__PURE__ */ jsxRuntime.jsxs(chunkEYJJQVV4_js.CardContent, { className: "flex items-start gap-4 p-6", children: [
+    avatar ? /* @__PURE__ */ jsxRuntime.jsx(
+      Image__default.default,
+      {
+        src: avatar,
+        alt: name,
+        width: 56,
+        height: 56,
+        className: "rounded-full object-cover shrink-0"
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-14 w-14 rounded-full bg-primary/10 flex items-center justify-center text-lg font-semibold text-primary shrink-0", children: name.charAt(0) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-semibold text-sm", children: name }),
+      bio && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground mt-1", children: bio }),
+      links && links.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-3 mt-2", children: links.map((link) => /* @__PURE__ */ jsxRuntime.jsx(
+        "a",
+        {
+          href: link.url,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          className: "text-xs text-muted-foreground hover:text-foreground transition-colors",
+          children: link.label
+        },
+        link.url
+      )) })
+    ] })
+  ] }) });
+}
+function BlogCardGrid({ posts, basePath = "/blog" }) {
+  if (posts.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: "No posts yet. Check back soon." });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: posts.map((post) => /* @__PURE__ */ jsxRuntime.jsx(
+    Link2__default.default,
+    {
+      href: `${basePath}/${post.slug}`,
+      className: "group block",
+      children: /* @__PURE__ */ jsxRuntime.jsxs(chunkEYJJQVV4_js.Card, { className: "h-full overflow-hidden border-border/50 bg-card/50 backdrop-blur-sm transition-all duration-300 group-hover:-translate-y-1 group-hover:shadow-lg group-hover:shadow-primary/5 group-hover:border-border", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative h-48 w-full overflow-hidden", children: post.cover ? /* @__PURE__ */ jsxRuntime.jsx(
+          Image__default.default,
+          {
+            src: post.cover,
+            alt: post.title,
+            fill: true,
+            className: "object-cover transition-transform duration-500 group-hover:scale-105"
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full w-full bg-gradient-to-br from-primary/20 via-primary/10 to-transparent" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(chunkEYJJQVV4_js.CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold tracking-tight leading-snug group-hover:text-primary transition-colors", children: post.title }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(chunkEYJJQVV4_js.CardContent, { className: "pb-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-xs text-muted-foreground mb-3", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("time", { children: sharedUtils.formatDate(post.date, {
+              month: "long",
+              day: "numeric",
+              year: "numeric"
+            }) }),
+            post.readingTime && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\xB7" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: post.readingTime })
+            ] })
+          ] }),
+          post.excerpt && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground line-clamp-2", children: post.excerpt })
+        ] }),
+        post.tags && post.tags.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(chunkEYJJQVV4_js.CardFooter, { className: "pt-0", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1.5", children: post.tags.map((tag) => /* @__PURE__ */ jsxRuntime.jsx(
+          chunkPZRI43EZ_js.Badge,
+          {
+            variant: "secondary",
+            className: "text-xs font-normal",
+            children: tag
+          },
+          tag
+        )) }) })
+      ] })
+    },
+    post.slug
+  )) });
+}
+function BlogPostFooter({
+  prevPost,
+  nextPost,
+  basePath = "/blog"
+}) {
+  if (!prevPost && !nextPost) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx("footer", { className: "mt-16 pt-8 border-t border-border/50", children: /* @__PURE__ */ jsxRuntime.jsxs("nav", { className: "flex items-center justify-between gap-4", children: [
+    prevPost ? /* @__PURE__ */ jsxRuntime.jsxs(
+      Link2__default.default,
+      {
+        href: `${basePath}/${prevPost.slug}`,
+        className: "group flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "h-4 w-4 transition-transform group-hover:-translate-x-0.5" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-right", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs uppercase tracking-wide mb-0.5", children: "Previous" }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-medium text-foreground", children: prevPost.title })
+          ] })
+        ]
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsx("div", {}),
+    nextPost ? /* @__PURE__ */ jsxRuntime.jsxs(
+      Link2__default.default,
+      {
+        href: `${basePath}/${nextPost.slug}`,
+        className: "group flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors text-right",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs uppercase tracking-wide mb-0.5", children: "Next" }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-medium text-foreground", children: nextPost.title })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-4 w-4 transition-transform group-hover:translate-x-0.5" })
+        ]
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsx("div", {})
+  ] }) });
+}
+function BlogPostHeader({
+  title,
+  date,
+  author,
+  cover,
+  readingTime,
+  tags
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "mb-12", children: [
+    tags && tags.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1.5 mb-4", children: tags.map((tag) => /* @__PURE__ */ jsxRuntime.jsx(
+      chunkPZRI43EZ_js.Badge,
+      {
+        variant: "secondary",
+        className: "text-xs font-normal",
+        children: tag
+      },
+      tag
+    )) }),
+    /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-4xl md:text-5xl font-bold tracking-tight leading-tight mb-4", children: title }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [
+      author && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: author }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\xB7" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("time", { children: sharedUtils.formatDate(date, {
+        month: "long",
+        day: "numeric",
+        year: "numeric"
+      }) }),
+      readingTime && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\xB7" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: readingTime })
+      ] })
+    ] }),
+    cover && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative mt-8 aspect-[2/1] w-full overflow-hidden rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsx(
+      Image__default.default,
+      {
+        src: cover,
+        alt: title,
+        fill: true,
+        priority: true,
+        className: "object-cover"
+      }
+    ) })
+  ] });
+}
+var calloutConfig = {
+  tip: {
+    icon: lucideReact.LightbulbIcon,
+    className: "border-emerald-500/30 bg-emerald-500/5 [&>svg]:text-emerald-500"
+  },
+  warning: {
+    icon: lucideReact.AlertTriangleIcon,
+    className: "border-amber-500/30 bg-amber-500/5 [&>svg]:text-amber-500"
+  },
+  note: {
+    icon: lucideReact.InfoIcon,
+    className: "border-blue-500/30 bg-blue-500/5 [&>svg]:text-blue-500"
+  }
+};
+function Callout({ type = "note", title, children }) {
+  const config = calloutConfig[type];
+  const Icon = config.icon;
+  return /* @__PURE__ */ jsxRuntime.jsxs(chunkPZRI43EZ_js.Alert, { className: `my-6 ${config.className}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "h-4 w-4" }),
+    title && /* @__PURE__ */ jsxRuntime.jsx(chunkPZRI43EZ_js.AlertTitle, { children: title }),
+    /* @__PURE__ */ jsxRuntime.jsx(chunkPZRI43EZ_js.AlertDescription, { children })
+  ] });
+}
+function Blockquote(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "blockquote",
+    {
+      className: "border-l-2 border-primary/30 pl-6 my-6 text-muted-foreground italic",
+      ...props
+    }
+  );
+}
+function MdxImage(props) {
+  const { caption, alt, ...rest } = props;
+  return /* @__PURE__ */ jsxRuntime.jsxs("figure", { className: "my-8", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "img",
+      {
+        alt: alt ?? "",
+        className: "rounded-lg w-full",
+        loading: "lazy",
+        ...rest
+      }
+    ),
+    (caption ?? alt) && /* @__PURE__ */ jsxRuntime.jsx("figcaption", { className: "mt-2 text-center text-xs text-muted-foreground", children: caption ?? alt })
+  ] });
+}
+function createHeading(level) {
+  const Tag = `h${level}`;
+  return function Heading(props) {
+    return /* @__PURE__ */ jsxRuntime.jsx(Tag, { ...props });
+  };
+}
+var mdxComponents = {
+  h1: createHeading(1),
+  h2: createHeading(2),
+  h3: createHeading(3),
+  h4: createHeading(4),
+  blockquote: Blockquote,
+  img: MdxImage,
+  Callout
+};
+function TableOfContents({ headings }) {
+  const [activeId, setActiveId] = react.useState("");
+  react.useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (entry.isIntersecting) {
+            setActiveId(entry.target.id);
+          }
+        }
+      },
+      { rootMargin: "-80px 0px -80% 0px" }
+    );
+    for (const heading of headings) {
+      const el = document.getElementById(heading.id);
+      if (el) observer.observe(el);
+    }
+    return () => observer.disconnect();
+  }, [headings]);
+  if (headings.length === 0) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("nav", { className: "hidden lg:block sticky top-24", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs font-semibold uppercase tracking-wider text-muted-foreground mb-3", children: "On this page" }),
+    /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "space-y-1.5 text-sm", children: headings.map((heading) => /* @__PURE__ */ jsxRuntime.jsx(
+      "li",
+      {
+        style: { paddingLeft: `${(heading.level - 2) * 12}px` },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "a",
+          {
+            href: `#${heading.id}`,
+            className: `block py-0.5 transition-colors hover:text-foreground ${activeId === heading.id ? "text-primary font-medium" : "text-muted-foreground"}`,
+            children: heading.text
+          }
+        )
+      },
+      heading.id
+    )) })
+  ] });
+}
+
+exports.BlogAuthorCard = BlogAuthorCard;
+exports.BlogCardGrid = BlogCardGrid;
+exports.BlogPostFooter = BlogPostFooter;
+exports.BlogPostHeader = BlogPostHeader;
+exports.Callout = Callout;
+exports.TableOfContents = TableOfContents;
+exports.mdxComponents = mdxComponents;