{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "profile-card",
  "title": "Profile Card",
  "description": "User profile card with cover image, avatar, name, role, and stats row in two layout styles.",
  "registryDependencies": [
    "https://raw.githubusercontent.com/dnachavez/adminlte-next/master/public/r/adminlte-theme.json",
    "https://raw.githubusercontent.com/dnachavez/adminlte-next/master/public/r/adminlte-description-block.json"
  ],
  "files": [
    {
      "path": "registry/new-york/profile-card/components/profile-card.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cn } from \"@/registry/new-york/adminlte-theme/lib/cn\"\n\n/* ---------------------------------------------------------------------------\n * Types\n * -------------------------------------------------------------------------- */\n\ninterface ProfileStat {\n  label: string\n  value: string | number\n}\n\n/* ---------------------------------------------------------------------------\n * ProfileCard\n * -------------------------------------------------------------------------- */\n\ninterface ProfileCardProps extends React.HTMLAttributes<HTMLDivElement> {\n  name: string\n  avatarUrl: string\n  description?: string\n  backgroundUrl?: string\n  backgroundColor?: string\n  stats?: ProfileStat[]\n  variant?: \"style1\" | \"style2\"\n}\n\nconst ProfileCard = React.forwardRef<HTMLDivElement, ProfileCardProps>(\n  (\n    {\n      className,\n      name,\n      avatarUrl,\n      description,\n      backgroundUrl,\n      backgroundColor = \"#3c8dbc\",\n      stats = [],\n      variant = \"style1\",\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    if (variant === \"style2\") {\n      return (\n        <div\n          ref={ref}\n          className={cn(\n            \"bg-white rounded-[3px] shadow-[0_1px_1px_rgba(0,0,0,0.1)] overflow-hidden\",\n            className\n          )}\n          {...props}\n        >\n          {/* Side-by-side layout */}\n          <div className=\"flex items-center gap-[15px] p-[20px]\">\n            {/* Avatar */}\n            <img\n              src={avatarUrl}\n              alt={name}\n              className=\"w-[90px] h-[90px] rounded-full object-cover flex-shrink-0\"\n            />\n\n            {/* Info */}\n            <div className=\"flex-1 min-w-0\">\n              <h3 className=\"text-[20px] font-light m-0 mb-[5px] text-[#333] truncate\">\n                {name}\n              </h3>\n              {description && (\n                <p className=\"text-[14px] text-[#999] m-0 mb-[10px]\">\n                  {description}\n                </p>\n              )}\n              {/* Inline actions */}\n              {children && (\n                <div className=\"flex items-center gap-[5px] flex-wrap\">\n                  {children}\n                </div>\n              )}\n            </div>\n          </div>\n\n          {/* Stats row */}\n          {stats.length > 0 && (\n            <div className=\"flex border-t border-t-[#f4f4f4]\">\n              {stats.map((stat, index) => (\n                <div\n                  key={index}\n                  className={cn(\n                    \"flex-1 text-center py-[10px]\",\n                    index < stats.length - 1 && \"border-r border-r-[#f4f4f4]\"\n                  )}\n                >\n                  <span className=\"block text-[20px] font-bold text-[#333]\">\n                    {stat.value}\n                  </span>\n                  <span className=\"block text-[12px] text-[#999] uppercase\">\n                    {stat.label}\n                  </span>\n                </div>\n              ))}\n            </div>\n          )}\n        </div>\n      )\n    }\n\n    /* Style 1 - widget-user (default) */\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"bg-white rounded-[3px] shadow-[0_1px_1px_rgba(0,0,0,0.1)] overflow-hidden\",\n          className\n        )}\n        {...props}\n      >\n        {/* Header area with background */}\n        <div\n          className=\"relative text-center py-[25px] bg-cover bg-center\"\n          style={{\n            backgroundImage: backgroundUrl\n              ? `url(${backgroundUrl})`\n              : undefined,\n            backgroundColor: !backgroundUrl ? backgroundColor : undefined,\n          }}\n        >\n          {/* Overlay for readability when background image is used */}\n          {backgroundUrl && (\n            <div className=\"absolute inset-0 bg-black/30\" />\n          )}\n        </div>\n\n        {/* Avatar - overlapping the header */}\n        <div className=\"text-center -mt-[45px] relative z-[1]\">\n          <img\n            src={avatarUrl}\n            alt={name}\n            className=\"w-[90px] h-[90px] rounded-full border-[3px] border-white object-cover mx-auto shadow-[0_2px_5px_rgba(0,0,0,0.2)]\"\n          />\n        </div>\n\n        {/* Name and description */}\n        <div className=\"text-center py-[10px] px-[15px]\">\n          <h3 className=\"text-[25px] font-light m-0 mb-[5px] text-[#333]\">\n            {name}\n          </h3>\n          {description && (\n            <p className=\"text-[14px] text-[#999] m-0\">{description}</p>\n          )}\n        </div>\n\n        {/* Stats row */}\n        {stats.length > 0 && (\n          <div className=\"flex border-t border-t-[#f4f4f4]\">\n            {stats.map((stat, index) => (\n              <div\n                key={index}\n                className={cn(\n                  \"flex-1 text-center py-[10px]\",\n                  index < stats.length - 1 && \"border-r border-r-[#f4f4f4]\"\n                )}\n              >\n                <span className=\"block text-[20px] font-bold text-[#333]\">\n                  {stat.value}\n                </span>\n                <span className=\"block text-[12px] text-[#999] uppercase\">\n                  {stat.label}\n                </span>\n              </div>\n            ))}\n          </div>\n        )}\n\n        {/* Footer / actions */}\n        {children && (\n          <div className=\"border-t border-t-[#f4f4f4] p-[10px] text-center\">\n            {children}\n          </div>\n        )}\n      </div>\n    )\n  }\n)\nProfileCard.displayName = \"ProfileCard\"\n\nexport { ProfileCard }\nexport type { ProfileCardProps, ProfileStat }\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}