{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "user-profile-page",
  "title": "User Profile Page",
  "type": "registry:page",
  "description": "Profile page composition: gradient cover banner with an overlapping ringed avatar, identity row with role badge plus edit button and a kebab actions menu, an inline follower stats row, and tabs for Overview (bio + icon detail rows), Activity (muted-tile feed), and Projects (progress cards). All data is hardcoded inline for you to replace.",
  "categories": [
    "auth",
    "app"
  ],
  "files": [
    {
      "path": "packages/elements-lit/src/blocks/user-profile-page/user-profile-page.ts",
      "content": "import { LitElement, css, html } from 'lit'\nimport {\n  CalendarDays,\n  FilePlus2,\n  GitCommitHorizontal,\n  Link2,\n  Mail,\n  MapPin,\n  MessageSquare,\n  MoreHorizontal,\n  Star,\n} from 'lucide'\nimport { cn } from '../../lib/utils'\nimport { tailwind } from '../../lib/styles'\nimport { ThemeController } from '../../lib/theme'\nimport { icon } from '../../lib/icon'\n// Side-effect imports: register the composed elements for standalone use\n// (consumers who install only this block still get working primitives).\nimport '../../components/avatar/avatar'\nimport '../../components/badge/badge'\nimport '../../components/button/button'\nimport '../../components/card/card'\nimport '../../components/dropdown-menu/dropdown-menu'\nimport '../../components/progress/progress'\nimport '../../components/separator/separator'\nimport '../../components/tabs/tabs'\n\n/**\n * <uip-user-profile-page> — the registry UserProfilePage block as a web component.\n *\n * Class strings are React's UserProfilePage verbatim. All data is hardcoded\n * inline as in React (replace after install). Tabs use the same\n * slot=trigger/content + data-value pairing as login-01. The kebab menu is a\n * <uip-dropdown-menu> with slot=\"trigger\"; its items are inert in the demo,\n * matching React (no handlers).\n */\nexport class UipUserProfilePage extends LitElement {\n  static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }\n  // :host display can't be a utility class (the host has no template of its own).\n  static styles = [tailwind, css`:host { display: block; }`]\n\n  static properties = {\n    tab: { state: true },\n  }\n\n  private tab = 'overview'\n\n  constructor() {\n    super()\n    new ThemeController(this)\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.setAttribute('data-uipkge', '')\n    this.setAttribute('data-slot', 'user-profile-page')\n  }\n\n  render() {\n    return html`\n      <div\n        data-slot=\"user-profile-page\"\n        class=${cn('bg-background border-border overflow-hidden rounded-xl border shadow-xs')}\n      >\n        <div class=\"from-primary/20 via-primary/5 h-32 bg-gradient-to-br to-transparent\" aria-hidden=\"true\"></div>\n\n        <div class=\"px-6 pb-6\">\n          <div class=\"ring-background -mt-10 ml-6 flex size-20 items-center justify-center rounded-full ring-4\">\n            <uip-avatar size=\"2xl\" class=\"size-20\">\n              <uip-avatar-image src=\"https://i.pravatar.cc/160?img=47\" alt=\"Amara Osei\"></uip-avatar-image>\n              <uip-avatar-fallback>AO</uip-avatar-fallback>\n            </uip-avatar>\n          </div>\n\n          <div class=\"mt-4 flex flex-wrap items-start justify-between gap-4\">\n            <div>\n              <div class=\"flex flex-wrap items-center gap-2\">\n                <h1 class=\"text-xl font-semibold tracking-tight\">Amara Osei</h1>\n                <uip-badge variant=\"secondary\">Design engineer</uip-badge>\n              </div>\n              <p class=\"text-muted-foreground mt-1 text-sm\">@amara</p>\n            </div>\n            <div class=\"flex items-center gap-2\">\n              <uip-button variant=\"outline\" size=\"sm\">Edit profile</uip-button>\n              <uip-dropdown-menu>\n                <uip-button slot=\"trigger\" variant=\"ghost\" size=\"icon\" aria-label=\"More actions\">\n                  ${icon(MoreHorizontal, 'ellipsis', 'size-4')}\n                </uip-button>\n                <uip-dropdown-menu-content align=\"end\">\n                  <uip-dropdown-menu-item>Copy profile link</uip-dropdown-menu-item>\n                  <uip-dropdown-menu-item>Share…</uip-dropdown-menu-item>\n                  <uip-dropdown-menu-separator></uip-dropdown-menu-separator>\n                  <uip-dropdown-menu-item part=\"destructive\">Block user</uip-dropdown-menu-item>\n                </uip-dropdown-menu-content>\n              </uip-dropdown-menu>\n            </div>\n          </div>\n\n          <p class=\"mt-4 text-sm\">\n            <span class=\"font-semibold\">24</span> <span class=\"text-muted-foreground\">Projects</span>\n            <span class=\"font-semibold\">1,248</span> <span class=\"text-muted-foreground\">Followers</span>\n            <span class=\"font-semibold\">380</span> <span class=\"text-muted-foreground\">Following</span>\n          </p>\n\n          <uip-tabs\n            class=\"mt-6 gap-4\"\n            value=${this.tab}\n            @value-change=${(e: CustomEvent<{ value: string }>) => {\n              this.tab = e.detail.value\n            }}\n          >\n            <span slot=\"trigger\" data-value=\"overview\">Overview</span>\n            <span slot=\"trigger\" data-value=\"activity\">Activity</span>\n            <span slot=\"trigger\" data-value=\"projects\">Projects</span>\n\n            <div slot=\"content\" data-value=\"overview\" class=\"space-y-6 pt-2\">\n              <p class=\"max-w-prose text-sm leading-relaxed\">\n                Design engineer focused on token systems and component architecture. Previously at a fintech startup,\n                now building the shared UI language for Acme. Writes about OKLCH color and registry-driven workflows.\n              </p>\n              <uip-separator></uip-separator>\n              <dl class=\"grid gap-x-8 gap-y-4 sm:grid-cols-2\">\n                <div class=\"flex items-center gap-3\">\n                  ${icon(Mail, 'mail', 'text-muted-foreground size-4 shrink-0')}\n                  <dt class=\"text-muted-foreground text-sm\">Email</dt>\n                  <dd class=\"ml-auto text-sm font-medium\">amara@acme.com</dd>\n                </div>\n                <div class=\"flex items-center gap-3\">\n                  ${icon(MapPin, 'map-pin', 'text-muted-foreground size-4 shrink-0')}\n                  <dt class=\"text-muted-foreground text-sm\">Location</dt>\n                  <dd class=\"ml-auto text-sm font-medium\">Lisbon, Portugal</dd>\n                </div>\n                <div class=\"flex items-center gap-3\">\n                  ${icon(CalendarDays, 'calendar-days', 'text-muted-foreground size-4 shrink-0')}\n                  <dt class=\"text-muted-foreground text-sm\">Joined</dt>\n                  <dd class=\"ml-auto text-sm font-medium\">March 2023</dd>\n                </div>\n                <div class=\"flex items-center gap-3\">\n                  ${icon(Link2, 'link', 'text-muted-foreground size-4 shrink-0')}\n                  <dt class=\"text-muted-foreground text-sm\">Website</dt>\n                  <dd class=\"ml-auto text-sm font-medium\">amaraosei.dev</dd>\n                </div>\n              </dl>\n            </div>\n\n            <div slot=\"content\" data-value=\"activity\" class=\"pt-2\">\n              <ul class=\"divide-y\">\n                <li class=\"flex items-center gap-3 py-3 first:pt-0 last:pb-0\">\n                  <span class=\"bg-muted text-muted-foreground flex size-8 shrink-0 items-center justify-center rounded-md\">\n                    ${icon(GitCommitHorizontal, 'git-commit-horizontal', 'size-4')}\n                  </span>\n                  <p class=\"min-w-0 flex-1 truncate text-sm\">Pushed 6 commits to design-tokens</p>\n                  <time class=\"text-muted-foreground text-xs whitespace-nowrap\">2h ago</time>\n                </li>\n                <li class=\"flex items-center gap-3 py-3 first:pt-0 last:pb-0\">\n                  <span class=\"bg-muted text-muted-foreground flex size-8 shrink-0 items-center justify-center rounded-md\">\n                    ${icon(MessageSquare, 'message-square', 'size-4')}\n                  </span>\n                  <p class=\"min-w-0 flex-1 truncate text-sm\">Commented on \"Sidebar collapse behavior\"</p>\n                  <time class=\"text-muted-foreground text-xs whitespace-nowrap\">5h ago</time>\n                </li>\n                <li class=\"flex items-center gap-3 py-3 first:pt-0 last:pb-0\">\n                  <span class=\"bg-muted text-muted-foreground flex size-8 shrink-0 items-center justify-center rounded-md\">\n                    ${icon(FilePlus2, 'file-plus-2', 'size-4')}\n                  </span>\n                  <p class=\"min-w-0 flex-1 truncate text-sm\">Created project Marketing site refresh</p>\n                  <time class=\"text-muted-foreground text-xs whitespace-nowrap\">Yesterday</time>\n                </li>\n                <li class=\"flex items-center gap-3 py-3 first:pt-0 last:pb-0\">\n                  <span class=\"bg-muted text-muted-foreground flex size-8 shrink-0 items-center justify-center rounded-md\">\n                    ${icon(Star, 'star', 'size-4')}\n                  </span>\n                  <p class=\"min-w-0 flex-1 truncate text-sm\">Starred repository uipkge-ui</p>\n                  <time class=\"text-muted-foreground text-xs whitespace-nowrap\">3d ago</time>\n                </li>\n              </ul>\n            </div>\n\n            <div slot=\"content\" data-value=\"projects\" class=\"pt-2\">\n              <div class=\"grid gap-4 sm:grid-cols-2\">\n                <uip-card>\n                  <uip-card-header>\n                    <uip-card-title class=\"text-sm font-medium\">Design tokens</uip-card-title>\n                    <uip-card-description class=\"truncate text-sm\"\n                      >Shared OKLCH palette and theme bindings.</uip-card-description\n                    >\n                  </uip-card-header>\n                  <uip-card-content class=\"flex items-center gap-3\">\n                    <uip-progress value=\"92\" class=\"flex-1\"></uip-progress>\n                    <span class=\"text-muted-foreground text-xs tabular-nums\">92%</span>\n                  </uip-card-content>\n                </uip-card>\n                <uip-card>\n                  <uip-card-header>\n                    <uip-card-title class=\"text-sm font-medium\">Marketing site</uip-card-title>\n                    <uip-card-description class=\"truncate text-sm\"\n                      >Astro rebuild of the public landing pages.</uip-card-description\n                    >\n                  </uip-card-header>\n                  <uip-card-content class=\"flex items-center gap-3\">\n                    <uip-progress value=\"64\" class=\"flex-1\"></uip-progress>\n                    <span class=\"text-muted-foreground text-xs tabular-nums\">64%</span>\n                  </uip-card-content>\n                </uip-card>\n                <uip-card>\n                  <uip-card-header>\n                    <uip-card-title class=\"text-sm font-medium\">Component audit</uip-card-title>\n                    <uip-card-description class=\"truncate text-sm\"\n                      >Parity pass across Vue and React mirrors.</uip-card-description\n                    >\n                  </uip-card-header>\n                  <uip-card-content class=\"flex items-center gap-3\">\n                    <uip-progress value=\"41\" class=\"flex-1\"></uip-progress>\n                    <span class=\"text-muted-foreground text-xs tabular-nums\">41%</span>\n                  </uip-card-content>\n                </uip-card>\n                <uip-card>\n                  <uip-card-header>\n                    <uip-card-title class=\"text-sm font-medium\">Docs search</uip-card-title>\n                    <uip-card-description class=\"truncate text-sm\"\n                      >Client-side fuzzy search over registry items.</uip-card-description\n                    >\n                  </uip-card-header>\n                  <uip-card-content class=\"flex items-center gap-3\">\n                    <uip-progress value=\"18\" class=\"flex-1\"></uip-progress>\n                    <span class=\"text-muted-foreground text-xs tabular-nums\">18%</span>\n                  </uip-card-content>\n                </uip-card>\n              </div>\n            </div>\n          </uip-tabs>\n        </div>\n      </div>\n    `\n  }\n}\n\ncustomElements.get('uip-user-profile-page') || customElements.define('uip-user-profile-page', UipUserProfilePage)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'uip-user-profile-page': UipUserProfilePage\n  }\n}\n",
      "type": "registry:file",
      "target": "src/uip/blocks/user-profile-page/user-profile-page.ts"
    }
  ],
  "dependencies": [
    "lit",
    "lucide"
  ],
  "registryDependencies": [
    "https://uipkge.dev/r/lit/avatar.json",
    "https://uipkge.dev/r/lit/badge.json",
    "https://uipkge.dev/r/lit/button.json",
    "https://uipkge.dev/r/lit/card.json",
    "https://uipkge.dev/r/lit/dropdown-menu.json",
    "https://uipkge.dev/r/lit/lit-core.json",
    "https://uipkge.dev/r/lit/progress.json",
    "https://uipkge.dev/r/lit/separator.json",
    "https://uipkge.dev/r/lit/tabs.json"
  ]
}