{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "author-bio-box",
  "title": "Author Bio Box",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/author-bio-box/AuthorBioBox.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport { ArrowUpRight, BadgeCheck, BookOpen, Check, Globe, MapPin, Rss, UserPlus } from 'lucide-react'\nimport { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent } from '@/components/ui/card'\nimport { Separator } from '@/components/ui/separator'\nimport { cn } from '@/lib/utils'\n\nexport interface AuthorBioBoxProps {\n  /** 'default' is the standard editorial signature card; 'split' arranges profile and articles side-by-side; 'compact' tightens padding. */\n  variant?: 'default' | 'split' | 'compact'\n  className?: string\n}\n\nfunction XIcon(props: React.SVGProps<SVGSVGElement>) {\n  return (\n    <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\" {...props}>\n      <path d=\"M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z\" />\n    </svg>\n  )\n}\n\nfunction GithubIcon(props: React.SVGProps<SVGSVGElement>) {\n  return (\n    <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\" {...props}>\n      <path d=\"M12 .5C5.65.5.5 5.65.5 12c0 5.08 3.29 9.39 7.86 10.91.58.11.79-.25.79-.55v-2.15c-3.2.69-3.87-1.36-3.87-1.36-.52-1.33-1.28-1.68-1.28-1.68-1.04-.71.08-.7.08-.7 1.16.08 1.77 1.19 1.77 1.19 1.02 1.76 2.69 1.25 3.35.96.1-.75.4-1.25.72-1.54-2.55-.29-5.24-1.28-5.24-5.68 0-1.26.45-2.28 1.19-3.09-.12-.29-.52-1.46.11-3.05 0 0 .97-.31 3.18 1.18a11.1 11.1 0 0 1 5.78 0c2.21-1.49 3.18-1.18 3.18-1.18.63 1.59.23 2.76.11 3.05.74.81 1.19 1.83 1.19 3.09 0 4.41-2.69 5.38-5.26 5.66.41.35.78 1.05.78 2.12v3.14c0 .31.21.67.8.55A11.51 11.51 0 0 0 23.5 12C23.5 5.65 18.35.5 12 .5z\" />\n    </svg>\n  )\n}\n\nfunction LinkedinIcon(props: React.SVGProps<SVGSVGElement>) {\n  return (\n    <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\" {...props}>\n      <path d=\"M20.45 20.45h-3.55v-5.57c0-1.33-.03-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.36V9h3.41v1.56h.05c.47-.9 1.63-1.85 3.36-1.85 3.6 0 4.27 2.37 4.27 5.46zM5.34 7.43a2.06 2.06 0 1 1 0-4.12 2.06 2.06 0 0 1 0 4.12zM7.12 20.45H3.56V9h3.56zM22.22 0H1.77C.79 0 0 .77 0 1.72v20.55C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.73V1.72C24 .77 23.2 0 22.22 0z\" />\n    </svg>\n  )\n}\n\nfunction SubstackIcon(props: React.SVGProps<SVGSVGElement>) {\n  return (\n    <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\" {...props}>\n      <path d=\"M22.539 8.242H1.46V5.406h21.08v2.836zM1.46 10.812V24L12 18.11 22.54 24V10.812H1.46zM22.54 0H1.46v2.836h21.08V0z\" />\n    </svg>\n  )\n}\n\nexport function AuthorBioBox({ variant = 'default', className }: AuthorBioBoxProps) {\n  const [isFollowing, setIsFollowing] = React.useState(false)\n  const [isSubscribedRss, setIsSubscribedRss] = React.useState(false)\n\n  const toggleFollow = () => setIsFollowing((prev) => !prev)\n  const toggleRss = () => setIsSubscribedRss((prev) => !prev)\n\n  return (\n    <Card\n      data-slot=\"author-bio-box\"\n      className={cn('border-border bg-card text-card-foreground relative overflow-hidden shadow-xs', className)}\n    >\n      {/* Subtle gradient background highlight */}\n      <div\n        className=\"from-primary/10 via-primary/5 pointer-events-none absolute inset-x-0 top-0 h-32 bg-gradient-to-br to-transparent\"\n        aria-hidden=\"true\"\n      />\n\n      {variant === 'split' ? (\n        <CardContent className=\"relative p-6 sm:p-8\">\n          <div className=\"grid gap-8 lg:grid-cols-12 lg:items-start\">\n            <div className=\"space-y-5 lg:col-span-7\">\n              <div className=\"flex flex-col gap-4 sm:flex-row sm:items-center sm:gap-5\">\n                <div className=\"relative size-16 shrink-0 sm:size-20\">\n                  <Avatar size=\"2xl\" className=\"ring-background size-16 shadow-xs ring-2 sm:size-20\">\n                    <AvatarImage\n                      src=\"https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=256&auto=format&fit=crop\"\n                      alt=\"Elena Rostova\"\n                    />\n                    <AvatarFallback className=\"text-lg font-semibold sm:text-xl\">ER</AvatarFallback>\n                  </Avatar>\n                  <div\n                    className=\"bg-primary text-primary-foreground ring-background absolute -right-1 -bottom-1 flex size-5 items-center justify-center rounded-full shadow-xs ring-2 sm:size-6\"\n                    title=\"Verified Author\"\n                  >\n                    <BadgeCheck className=\"size-3.5 sm:size-4\" />\n                  </div>\n                </div>\n                <div className=\"min-w-0 space-y-1\">\n                  <div className=\"flex flex-wrap items-center gap-2\">\n                    <h3 className=\"text-foreground text-xl font-bold tracking-tight sm:text-2xl\">Elena Rostova</h3>\n                    <Badge variant=\"secondary\" className=\"gap-1 text-xs font-medium\">\n                      <BadgeCheck className=\"text-primary size-3.5\" /> Verified\n                    </Badge>\n                  </div>\n                  <p className=\"text-muted-foreground text-sm font-medium\">\n                    Principal Design Engineer &amp; Core Contributor\n                  </p>\n                  <div className=\"text-muted-foreground flex items-center gap-1.5 text-xs\">\n                    <MapPin className=\"size-3.5 shrink-0\" />\n                    <span>San Francisco, CA</span>\n                  </div>\n                </div>\n              </div>\n\n              <p className=\"text-muted-foreground text-sm leading-relaxed sm:text-base\">\n                Specializing in design token mathematics, headless accessibility primitives, and high-performance\n                dual-framework monorepos. Former Staff Engineer at Vercel.\n              </p>\n\n              <div className=\"flex flex-wrap items-center justify-between gap-4 pt-1\">\n                <div className=\"flex flex-wrap items-center gap-2.5\">\n                  <Button\n                    variant={isFollowing ? 'secondary' : 'default'}\n                    size=\"sm\"\n                    className=\"gap-2\"\n                    onClick={toggleFollow}\n                  >\n                    {isFollowing ? <Check className=\"text-success size-4\" /> : <UserPlus className=\"size-4\" />}\n                    <span>{isFollowing ? 'Following' : 'Follow Author'}</span>\n                  </Button>\n                  <Button\n                    variant=\"outline\"\n                    size=\"sm\"\n                    className={cn('gap-2', isSubscribedRss && 'border-warning/30 bg-warning/10 text-warning')}\n                    onClick={toggleRss}\n                  >\n                    <Rss className=\"text-warning size-4\" />\n                    <span>{isSubscribedRss ? 'Subscribed via RSS' : 'RSS Feed'}</span>\n                  </Button>\n                </div>\n\n                <div className=\"flex items-center gap-1\">\n                  <Button variant=\"ghost\" size=\"icon-sm\" asChild>\n                    <a href=\"https://x.com\" target=\"_blank\" rel=\"noreferrer\" aria-label=\"Elena Rostova on X (Twitter)\">\n                      <XIcon className=\"size-4\" />\n                    </a>\n                  </Button>\n                  <Button variant=\"ghost\" size=\"icon-sm\" asChild>\n                    <a href=\"https://github.com\" target=\"_blank\" rel=\"noreferrer\" aria-label=\"Elena Rostova on GitHub\">\n                      <GithubIcon className=\"size-4\" />\n                    </a>\n                  </Button>\n                  <Button variant=\"ghost\" size=\"icon-sm\" asChild>\n                    <a\n                      href=\"https://linkedin.com\"\n                      target=\"_blank\"\n                      rel=\"noreferrer\"\n                      aria-label=\"Elena Rostova on LinkedIn\"\n                    >\n                      <LinkedinIcon className=\"size-4\" />\n                    </a>\n                  </Button>\n                  <Button variant=\"ghost\" size=\"icon-sm\" asChild>\n                    <a\n                      href=\"https://elenarostova.dev\"\n                      target=\"_blank\"\n                      rel=\"noreferrer\"\n                      aria-label=\"Elena Rostova's Website\"\n                    >\n                      <Globe className=\"size-4\" />\n                    </a>\n                  </Button>\n                  <Button variant=\"ghost\" size=\"icon-sm\" asChild>\n                    <a\n                      href=\"https://substack.com\"\n                      target=\"_blank\"\n                      rel=\"noreferrer\"\n                      aria-label=\"Elena Rostova on Substack\"\n                    >\n                      <SubstackIcon className=\"size-4\" />\n                    </a>\n                  </Button>\n                </div>\n              </div>\n            </div>\n\n            <div className=\"space-y-4 lg:col-span-5\">\n              <div className=\"flex items-center justify-between\">\n                <div className=\"text-muted-foreground flex items-center gap-2 text-xs font-semibold tracking-wider uppercase\">\n                  <BookOpen className=\"text-primary size-4\" />\n                  <span>Recent Articles</span>\n                </div>\n                <span className=\"text-muted-foreground text-xs\">3 published</span>\n              </div>\n\n              <div className=\"grid gap-3\">\n                <a\n                  href=\"#article-1\"\n                  className=\"group border-border/60 bg-muted/20 hover:border-border hover:bg-muted/60 focus-visible:ring-ring flex items-center justify-between gap-3 rounded-lg border p-3.5 transition-colors hover:shadow-xs focus-visible:ring-2 focus-visible:outline-none\"\n                >\n                  <div className=\"min-w-0 space-y-1\">\n                    <span className=\"text-muted-foreground text-xs\">5 min read · Aug 18</span>\n                    <h4 className=\"text-foreground group-hover:text-primary text-sm font-semibold transition-colors\">\n                      Why Zero-Dependency Registries Are Winning\n                    </h4>\n                  </div>\n                  <div className=\"border-border/60 bg-background text-muted-foreground group-hover:border-border group-hover:text-foreground flex size-7 shrink-0 items-center justify-center rounded-md border transition-colors\">\n                    <ArrowUpRight className=\"size-3.5 transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5\" />\n                  </div>\n                </a>\n\n                <a\n                  href=\"#article-2\"\n                  className=\"group border-border/60 bg-muted/20 hover:border-border hover:bg-muted/60 focus-visible:ring-ring flex items-center justify-between gap-3 rounded-lg border p-3.5 transition-colors hover:shadow-xs focus-visible:ring-2 focus-visible:outline-none\"\n                >\n                  <div className=\"min-w-0 space-y-1\">\n                    <span className=\"text-muted-foreground text-xs\">8 min read · Aug 10</span>\n                    <h4 className=\"text-foreground group-hover:text-primary text-sm font-semibold transition-colors\">\n                      Deconstructing OKLCH Color Palettes in Tailwind v4\n                    </h4>\n                  </div>\n                  <div className=\"border-border/60 bg-background text-muted-foreground group-hover:border-border group-hover:text-foreground flex size-7 shrink-0 items-center justify-center rounded-md border transition-colors\">\n                    <ArrowUpRight className=\"size-3.5 transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5\" />\n                  </div>\n                </a>\n\n                <a\n                  href=\"#article-3\"\n                  className=\"group border-border/60 bg-muted/20 hover:border-border hover:bg-muted/60 focus-visible:ring-ring flex items-center justify-between gap-3 rounded-lg border p-3.5 transition-colors hover:shadow-xs focus-visible:ring-2 focus-visible:outline-none\"\n                >\n                  <div className=\"min-w-0 space-y-1\">\n                    <span className=\"text-muted-foreground text-xs\">12 min read · Jul 28</span>\n                    <h4 className=\"text-foreground group-hover:text-primary text-sm font-semibold transition-colors\">\n                      Polymorphic Reka UI Primitives Architecture\n                    </h4>\n                  </div>\n                  <div className=\"border-border/60 bg-background text-muted-foreground group-hover:border-border group-hover:text-foreground flex size-7 shrink-0 items-center justify-center rounded-md border transition-colors\">\n                    <ArrowUpRight className=\"size-3.5 transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5\" />\n                  </div>\n                </a>\n              </div>\n            </div>\n          </div>\n        </CardContent>\n      ) : variant === 'compact' ? (\n        <CardContent className=\"relative space-y-5 p-5\">\n          <div className=\"flex items-center gap-3.5\">\n            <div className=\"relative size-12 shrink-0\">\n              <Avatar size=\"lg\" className=\"ring-background size-12 ring-2\">\n                <AvatarImage\n                  src=\"https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=256&auto=format&fit=crop\"\n                  alt=\"Elena Rostova\"\n                />\n                <AvatarFallback className=\"text-sm font-semibold\">ER</AvatarFallback>\n              </Avatar>\n              <div className=\"bg-primary text-primary-foreground ring-background absolute -right-0.5 -bottom-0.5 flex size-4 items-center justify-center rounded-full ring-1\">\n                <BadgeCheck className=\"size-3\" />\n              </div>\n            </div>\n            <div className=\"min-w-0 space-y-0.5\">\n              <div className=\"flex items-center gap-1.5\">\n                <h3 className=\"text-foreground truncate text-base font-bold tracking-tight\">Elena Rostova</h3>\n                <Badge variant=\"secondary\" className=\"h-4 px-1.5 text-xs font-medium\">\n                  Verified\n                </Badge>\n              </div>\n              <p className=\"text-muted-foreground truncate text-xs\">Principal Design Engineer</p>\n            </div>\n          </div>\n\n          <p className=\"text-muted-foreground line-clamp-2 text-xs leading-relaxed\">\n            Specializing in design token mathematics, headless accessibility primitives, and high-performance\n            dual-framework monorepos. Former Staff Engineer at Vercel.\n          </p>\n\n          <div className=\"flex items-center justify-between gap-2\">\n            <div className=\"flex items-center gap-2\">\n              <Button\n                variant={isFollowing ? 'secondary' : 'default'}\n                size=\"sm\"\n                className=\"h-7 gap-1.5 px-2.5 text-xs\"\n                onClick={toggleFollow}\n              >\n                {isFollowing ? <Check className=\"text-success size-3\" /> : <UserPlus className=\"size-3\" />}\n                <span>{isFollowing ? 'Following' : 'Follow'}</span>\n              </Button>\n              <Button\n                variant=\"outline\"\n                size=\"sm\"\n                className={cn(\n                  'h-7 gap-1.5 px-2.5 text-xs',\n                  isSubscribedRss && 'border-warning/30 bg-warning/10 text-warning',\n                )}\n                onClick={toggleRss}\n              >\n                <Rss className=\"text-warning size-3\" />\n                <span>{isSubscribedRss ? 'Subscribed' : 'RSS'}</span>\n              </Button>\n            </div>\n            <div className=\"flex items-center gap-0.5\">\n              <Button variant=\"ghost\" size=\"icon-sm\" className=\"size-7\" asChild>\n                <a href=\"https://x.com\" target=\"_blank\" rel=\"noreferrer\" aria-label=\"Elena Rostova on X (Twitter)\">\n                  <XIcon className=\"size-3.5\" />\n                </a>\n              </Button>\n              <Button variant=\"ghost\" size=\"icon-sm\" className=\"size-7\" asChild>\n                <a href=\"https://github.com\" target=\"_blank\" rel=\"noreferrer\" aria-label=\"Elena Rostova on GitHub\">\n                  <GithubIcon className=\"size-3.5\" />\n                </a>\n              </Button>\n              <Button variant=\"ghost\" size=\"icon-sm\" className=\"size-7\" asChild>\n                <a\n                  href=\"https://elenarostova.dev\"\n                  target=\"_blank\"\n                  rel=\"noreferrer\"\n                  aria-label=\"Elena Rostova's Website\"\n                >\n                  <Globe className=\"size-3.5\" />\n                </a>\n              </Button>\n            </div>\n          </div>\n\n          <Separator />\n\n          <div className=\"space-y-2.5\">\n            <div className=\"text-muted-foreground flex items-center justify-between text-xs font-medium\">\n              <span className=\"tracking-wider uppercase\">Latest Article</span>\n              <span>Aug 18</span>\n            </div>\n            <a\n              href=\"#article-1\"\n              className=\"group border-border/60 bg-muted/20 hover:bg-muted/60 focus-visible:ring-ring flex items-center justify-between gap-2 rounded-md border p-2.5 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n            >\n              <span className=\"text-foreground group-hover:text-primary truncate text-xs font-semibold transition-colors\">\n                Why Zero-Dependency Registries Are Winning\n              </span>\n              <ArrowUpRight className=\"text-muted-foreground group-hover:text-foreground size-3.5 shrink-0 transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5\" />\n            </a>\n          </div>\n        </CardContent>\n      ) : (\n        <CardContent className=\"relative space-y-6 p-6 sm:p-8\">\n          {/* Top Author Profile */}\n          <div className=\"flex flex-col gap-4 sm:flex-row sm:items-center sm:gap-5\">\n            <div className=\"relative size-16 shrink-0 sm:size-20\">\n              <Avatar size=\"2xl\" className=\"ring-background size-16 shadow-xs ring-2 sm:size-20\">\n                <AvatarImage\n                  src=\"https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=256&auto=format&fit=crop\"\n                  alt=\"Elena Rostova\"\n                />\n                <AvatarFallback className=\"text-lg font-semibold sm:text-xl\">ER</AvatarFallback>\n              </Avatar>\n              <div\n                className=\"bg-primary text-primary-foreground ring-background absolute -right-1 -bottom-1 flex size-5 items-center justify-center rounded-full shadow-xs ring-2 sm:size-6\"\n                title=\"Verified Author\"\n              >\n                <BadgeCheck className=\"size-3.5 sm:size-4\" />\n              </div>\n            </div>\n            <div className=\"min-w-0 space-y-1.5\">\n              <div className=\"flex flex-wrap items-center gap-2\">\n                <h3 className=\"text-foreground text-xl font-bold tracking-tight sm:text-2xl\">Elena Rostova</h3>\n                <Badge variant=\"secondary\" className=\"gap-1 text-xs font-medium\">\n                  <BadgeCheck className=\"text-primary size-3.5\" /> Verified Author\n                </Badge>\n              </div>\n              <p className=\"text-muted-foreground text-sm font-medium\">\n                Principal Design Engineer &amp; Core Contributor\n              </p>\n              <div className=\"text-muted-foreground flex items-center gap-1.5 text-xs\">\n                <MapPin className=\"size-3.5 shrink-0\" />\n                <span>San Francisco, CA</span>\n              </div>\n            </div>\n          </div>\n\n          {/* Author Bio Paragraph */}\n          <p className=\"text-muted-foreground text-sm leading-relaxed sm:text-base\">\n            Specializing in design token mathematics, headless accessibility primitives, and high-performance\n            dual-framework monorepos. Former Staff Engineer at Vercel.\n          </p>\n\n          {/* Actions & Social Links Row */}\n          <div className=\"flex flex-wrap items-center justify-between gap-4 pt-1\">\n            <div className=\"flex flex-wrap items-center gap-2.5\">\n              <Button\n                variant={isFollowing ? 'secondary' : 'default'}\n                size=\"sm\"\n                className=\"gap-2\"\n                onClick={toggleFollow}\n              >\n                {isFollowing ? <Check className=\"text-success size-4\" /> : <UserPlus className=\"size-4\" />}\n                <span>{isFollowing ? 'Following' : 'Follow Author'}</span>\n              </Button>\n              <Button\n                variant=\"outline\"\n                size=\"sm\"\n                className={cn('gap-2', isSubscribedRss && 'border-warning/30 bg-warning/10 text-warning')}\n                onClick={toggleRss}\n              >\n                <Rss className=\"text-warning size-4\" />\n                <span>{isSubscribedRss ? 'Subscribed via RSS' : 'RSS Feed'}</span>\n              </Button>\n            </div>\n\n            <div className=\"flex items-center gap-1\">\n              <Button variant=\"ghost\" size=\"icon-sm\" asChild>\n                <a href=\"https://x.com\" target=\"_blank\" rel=\"noreferrer\" aria-label=\"Elena Rostova on X (Twitter)\">\n                  <XIcon className=\"size-4\" />\n                </a>\n              </Button>\n              <Button variant=\"ghost\" size=\"icon-sm\" asChild>\n                <a href=\"https://github.com\" target=\"_blank\" rel=\"noreferrer\" aria-label=\"Elena Rostova on GitHub\">\n                  <GithubIcon className=\"size-4\" />\n                </a>\n              </Button>\n              <Button variant=\"ghost\" size=\"icon-sm\" asChild>\n                <a href=\"https://linkedin.com\" target=\"_blank\" rel=\"noreferrer\" aria-label=\"Elena Rostova on LinkedIn\">\n                  <LinkedinIcon className=\"size-4\" />\n                </a>\n              </Button>\n              <Button variant=\"ghost\" size=\"icon-sm\" asChild>\n                <a\n                  href=\"https://elenarostova.dev\"\n                  target=\"_blank\"\n                  rel=\"noreferrer\"\n                  aria-label=\"Elena Rostova's Website\"\n                >\n                  <Globe className=\"size-4\" />\n                </a>\n              </Button>\n              <Button variant=\"ghost\" size=\"icon-sm\" asChild>\n                <a href=\"https://substack.com\" target=\"_blank\" rel=\"noreferrer\" aria-label=\"Elena Rostova on Substack\">\n                  <SubstackIcon className=\"size-4\" />\n                </a>\n              </Button>\n            </div>\n          </div>\n\n          {/* Separator */}\n          <Separator />\n\n          {/* Recent Articles by Author List (3 items) */}\n          <div className=\"space-y-4\">\n            <div className=\"flex items-center justify-between\">\n              <div className=\"text-muted-foreground flex items-center gap-2 text-xs font-semibold tracking-wider uppercase\">\n                <BookOpen className=\"text-primary size-4\" />\n                <span>Recent Articles by Author</span>\n              </div>\n              <span className=\"text-muted-foreground text-xs\">3 published</span>\n            </div>\n\n            <div className=\"grid gap-3 sm:grid-cols-1\">\n              {/* Article 1 */}\n              <a\n                href=\"#article-1\"\n                className=\"group border-border/60 bg-muted/20 hover:border-border hover:bg-muted/60 focus-visible:ring-ring flex items-center justify-between gap-4 rounded-lg border p-4 transition-colors hover:shadow-xs focus-visible:ring-2 focus-visible:outline-none\"\n              >\n                <div className=\"min-w-0 space-y-1\">\n                  <div className=\"text-muted-foreground flex items-center gap-2 text-xs\">\n                    <Badge variant=\"outline\" className=\"text-xs font-normal\">\n                      Registry\n                    </Badge>\n                    <span>5 min read · Aug 18</span>\n                  </div>\n                  <h4 className=\"text-foreground group-hover:text-primary text-sm font-semibold transition-colors\">\n                    Why Zero-Dependency Registries Are Winning\n                  </h4>\n                </div>\n                <div className=\"border-border/60 bg-background text-muted-foreground group-hover:border-border group-hover:text-foreground flex size-8 shrink-0 items-center justify-center rounded-md border transition-colors\">\n                  <ArrowUpRight className=\"size-4 transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5\" />\n                </div>\n              </a>\n\n              {/* Article 2 */}\n              <a\n                href=\"#article-2\"\n                className=\"group border-border/60 bg-muted/20 hover:border-border hover:bg-muted/60 focus-visible:ring-ring flex items-center justify-between gap-4 rounded-lg border p-4 transition-colors hover:shadow-xs focus-visible:ring-2 focus-visible:outline-none\"\n              >\n                <div className=\"min-w-0 space-y-1\">\n                  <div className=\"text-muted-foreground flex items-center gap-2 text-xs\">\n                    <Badge variant=\"outline\" className=\"text-xs font-normal\">\n                      Design Tokens\n                    </Badge>\n                    <span>8 min read · Aug 10</span>\n                  </div>\n                  <h4 className=\"text-foreground group-hover:text-primary text-sm font-semibold transition-colors\">\n                    Deconstructing OKLCH Color Palettes in Tailwind v4\n                  </h4>\n                </div>\n                <div className=\"border-border/60 bg-background text-muted-foreground group-hover:border-border group-hover:text-foreground flex size-8 shrink-0 items-center justify-center rounded-md border transition-colors\">\n                  <ArrowUpRight className=\"size-4 transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5\" />\n                </div>\n              </a>\n\n              {/* Article 3 */}\n              <a\n                href=\"#article-3\"\n                className=\"group border-border/60 bg-muted/20 hover:border-border hover:bg-muted/60 focus-visible:ring-ring flex items-center justify-between gap-4 rounded-lg border p-4 transition-colors hover:shadow-xs focus-visible:ring-2 focus-visible:outline-none\"\n              >\n                <div className=\"min-w-0 space-y-1\">\n                  <div className=\"text-muted-foreground flex items-center gap-2 text-xs\">\n                    <Badge variant=\"outline\" className=\"text-xs font-normal\">\n                      Architecture\n                    </Badge>\n                    <span>12 min read · Jul 28</span>\n                  </div>\n                  <h4 className=\"text-foreground group-hover:text-primary text-sm font-semibold transition-colors\">\n                    Polymorphic Reka UI Primitives Architecture\n                  </h4>\n                </div>\n                <div className=\"border-border/60 bg-background text-muted-foreground group-hover:border-border group-hover:text-foreground flex size-8 shrink-0 items-center justify-center rounded-md border transition-colors\">\n                  <ArrowUpRight className=\"size-4 transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5\" />\n                </div>\n              </a>\n            </div>\n          </div>\n        </CardContent>\n      )}\n    </Card>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/AuthorBioBox.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/avatar.json",
    "https://uipkge.dev/r/react/badge.json",
    "https://uipkge.dev/r/react/button.json",
    "https://uipkge.dev/r/react/card.json",
    "https://uipkge.dev/r/react/separator.json"
  ],
  "description": "Editorial author signature card with avatar, verified badge, social links row, recent articles list, and interactive RSS subscribe button.",
  "categories": [
    "media",
    "marketing"
  ]
}