{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "team-card",
  "type": "registry:ui",
  "title": "Team Card",
  "description": "Team member card with photo, name, role, bio, and social links.",
  "dependencies": [
    "@saasflare/ui"
  ],
  "files": [
    {
      "path": "components/ui/team-card.tsx",
      "type": "registry:ui",
      "content": "\"use client\"\n\n/**\n * @fileoverview Team member card with photo, name, role, and social links.\n * @author Saasflare™\n * @module packages/ui/components/ui/team-card\n * @package ui\n *\n * @component\n * @example\n * import { TeamCard } from '@saasflare/ui';\n * <TeamCard\n *   name=\"Jane Doe\"\n *   role=\"CEO & Co-Founder\"\n *   photo=\"/team/jane.jpg\"\n *   socials={[\n *     { label: \"Twitter\", url: \"https://twitter.com/jane\", icon: <TwitterIcon /> },\n *     { label: \"LinkedIn\", url: \"https://linkedin.com/in/jane\", icon: <LinkedInIcon /> },\n *   ]}\n * />\n */\n\nimport * as React from \"react\"\nimport { type ReactNode } from \"react\"\n\nimport { cn } from \"@saasflare/ui\"\nimport { useSaasflareProps, type SaasflareComponentProps } from \"@saasflare/ui\"\n\n/** A social link entry. */\nexport interface SocialLink {\n  /** Accessible label for the link. */\n  label: string\n  /** URL to the social profile. */\n  url: string\n  /** Icon element. */\n  icon: ReactNode\n}\n\n/** Props for the TeamCard component. */\nexport interface TeamCardProps\n  extends Omit<React.ComponentProps<\"div\">, keyof SaasflareComponentProps>,\n    SaasflareComponentProps {\n  /** Person's name. */\n  name: string\n  /** Role or job title. */\n  role: string\n  /** Photo URL. */\n  photo?: string\n  /** Short bio text. */\n  bio?: string\n  /** Social media links. */\n  socials?: SocialLink[]\n}\n\n/**\n * Team member card with photo, name, role, and social links.\n *\n * @component\n * @package ui\n */\nexport function TeamCard({\n  name,\n  role,\n  photo,\n  bio,\n  socials,\n  className,\n  surface,\n  radius,\n  animated,\n  iconWeight,\n  ...props\n}: TeamCardProps) {\n  const sf = useSaasflareProps({ surface, radius, animated, iconWeight })\n  return (\n    <div\n      data-slot=\"team-card\"\n      data-surface={sf.surface}\n      data-radius={sf.radius}\n      data-animated={String(sf.animated)}\n      className={cn(\n        \"flex flex-col items-center rounded-xl border surface-card p-6 text-center\",\n        \"transition-all duration-200 hover:-translate-y-px hover:shadow-md\",\n        \"motion-reduce:hover:transform-none\",\n        className,\n      )}\n      {...props}\n    >\n      {photo && (\n        <img\n          src={photo}\n          alt={name}\n          className=\"mb-4 size-24 rounded-full object-cover\"\n        />\n      )}\n      <h3 className=\"text-base font-semibold\">{name}</h3>\n      <p className=\"text-sm text-muted-foreground\">{role}</p>\n      {bio && <p className=\"mt-2 text-sm text-muted-foreground\">{bio}</p>}\n      {socials && socials.length > 0 && (\n        <div className=\"mt-4 flex gap-2\">\n          {socials.map((s) => (\n            <a\n              key={s.label}\n              href={s.url}\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n              className=\"rounded-md p-2 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground\"\n              aria-label={s.label}\n            >\n              {s.icon}\n            </a>\n          ))}\n        </div>\n      )}\n    </div>\n  )\n}\n",
      "target": "components/ui/team-card.tsx"
    }
  ],
  "$meta": {
    "source": "https://ui.saasflare.io/r/team-card.json"
  }
}