@sproutsocial/seeds-react-profile 0.1.3 → 0.2.0

package/.turbo/turbo-build.log

@@ -8,14 +8,14 @@ $ tsup --dts
 CLI Cleaning output folder
 CJS Build start
 ESM Build start
-CJS dist/index.js     3.82 KB
-CJS dist/index.js.map 3.91 KB
-CJS ⚡️ Build success in 90ms
-ESM dist/esm/index.js     1.69 KB
-ESM dist/esm/index.js.map 3.73 KB
-ESM ⚡️ Build success in 80ms
+CJS dist/index.js     13.21 KB
+CJS dist/index.js.map 18.11 KB
+CJS ⚡️ Build success in 117ms
+ESM dist/esm/index.js     9.61 KB
+ESM dist/esm/index.js.map 17.97 KB
+ESM ⚡️ Build success in 115ms
 DTS Build start
-DTS ⚡️ Build success in 5534ms
-DTS dist/index.d.ts  2.17 KB
-DTS dist/index.d.mts 2.17 KB
-Done in 7.52s.
+DTS ⚡️ Build success in 8909ms
+DTS dist/index.d.ts  5.53 KB
+DTS dist/index.d.mts 5.53 KB
+Done in 11.50s.

package/CHANGELOG.md

@@ -1,5 +1,49 @@
 # @sproutsocial/seeds-react-profile
 
+## 0.2.0
+
+### Minor Changes
+
+- 9ab0098: Add ProfileCard and ProfileToken components to seeds-react-profile package. Update InlineProfile component.
+
+  ## New Components
+
+  ### ProfileCard
+
+  A flexible card component for displaying user profiles across different social networks with consistent styling and behavior.
+
+  **Features:**
+
+  - Display profile information (name, handle, subtext, description)
+  - Social network branding with partner logos
+  - Verification badges (blue, gray, standard) displayed with handle
+  - Profile URL links (only displayed when secondaryName is provided)
+  - Location display with icon
+  - Metadata array for stats (followers, posts, etc.)
+  - Banner with customizable color (defaults to network theme color)
+  - Banner content slot for alerts/status messages
+  - Profile actions slot for buttons/menus
+  - Footer slot for custom content
+  - Fully themed and responsive
+
+  ### ProfileToken
+
+  A token-based profile component that wraps InlineProfile with interactive capabilities, ideal for clickable profile elements in lists and compact spaces.
+
+  ## Updates
+
+  ### InlineProfile
+
+  - Simplified internal implementation
+  - Removed unnecessary utility abstractions
+  - Improved type definitions
+  - Consolidated verification type handling
+
+### Patch Changes
+
+- Updated dependencies [95d2b96]
+  - @sproutsocial/seeds-react-card@1.1.14
+
 ## 0.1.3
 
 ### Patch Changes

package/dist/esm/index.js

@@ -1,57 +1,318 @@
-// src/InlineProfile.tsx
+// src/ProfileCard.tsx
 import styled from "styled-components";
-import { Text } from "@sproutsocial/seeds-react-text";
 import { PartnerLogo } from "@sproutsocial/seeds-react-partner-logo";
 import { Avatar } from "@sproutsocial/seeds-react-avatar";
-import { jsx, jsxs } from "react/jsx-runtime";
-var InlineProfileContainer = styled.div`
+import {
+  Card,
+  CardHeader,
+  CardContent,
+  CardFooter
+} from "@sproutsocial/seeds-react-card";
+import { Icon as Icon2 } from "@sproutsocial/seeds-react-icon";
+import { Link } from "@sproutsocial/seeds-react-link";
+import { Text } from "@sproutsocial/seeds-react-text";
+
+// src/VerifiedProfileIcon.tsx
+import { Icon } from "@sproutsocial/seeds-react-icon";
+import { jsx } from "react/jsx-runtime";
+var VERIFICATION_COLORS = {
+  twitter: "#000000",
+  facebook: "#1877F2",
+  x: "#000000",
+  linkedin: "#0A66C2",
+  instagram: "#e4405f",
+  gray: "#515e5f"
+};
+var getVerificationColor = (partnerName, verificationType) => {
+  if (!verificationType || verificationType === "not_verified") return "";
+  switch (verificationType) {
+    case "blue_verified":
+      return partnerName === "facebook" ? VERIFICATION_COLORS.facebook : VERIFICATION_COLORS.twitter;
+    case "gray_verified":
+      return VERIFICATION_COLORS.gray;
+    case "verified":
+    default:
+      if (partnerName && partnerName in VERIFICATION_COLORS) {
+        return VERIFICATION_COLORS[partnerName];
+      }
+      return VERIFICATION_COLORS.twitter;
+  }
+};
+var VerifiedProfileIcon = ({
+  partnerName,
+  verificationType
+}) => {
+  if (!verificationType || verificationType === "not_verified") return;
+  const verificationColor = getVerificationColor(partnerName, verificationType);
+  return /* @__PURE__ */ jsx(
+    Icon,
+    {
+      title: "Verified",
+      "aria-label": "Verified account",
+      color: verificationColor,
+      name: "verified",
+      ml: "150"
+    }
+  );
+};
+
+// src/ProfileCard.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var StyledProfileCard = styled(Card)`
+  max-width: 300px;
+`;
+var StyledCardHeader = styled(CardHeader)`
+  position: relative;
+  height: 80px;
+  padding: ${(props) => props.theme.space[400]}
+    ${(props) => props.theme.space[400]} 0 ${(props) => props.theme.space[400]};
+  margin-bottom: 0;
+  color: ${(props) => props.theme.colors.text.inverse};
+  border-radius: ${(props) => props.theme.radii[500]}
+    ${(props) => props.theme.radii[500]} 0 0;
+  ${(props) => {
+  if (props.$bannerColor) {
+    return `background: ${props.$bannerColor};`;
+  }
+  if (props.$partnerName && props.theme.colors.network) {
+    const networkColor = props.theme.colors.network[props.$partnerName];
+    return networkColor ? `background: ${networkColor};` : "";
+  }
+  return "";
+}}
+`;
+var BannerContent = styled.div`
   display: flex;
+  justify-content: flex-end;
+  width: 100%;
+`;
+var ActionsSection = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  gap: ${(props) => props.theme.space[100]};
+  padding: 0 ${(props) => props.theme.space[300]};
+
+  &:empty {
+    min-height: 44px;
+  }
+`;
+var StyledCardContent = styled(CardContent)`
+  display: flex;
+  flex-direction: column;
+  gap: ${(props) => props.theme.space[300]};
+  padding: 0 ${(props) => props.theme.space[400]}
+    ${(props) => props.theme.space[400]};
+`;
+var ProfileNameSection = styled.div`
+  display: flex;
+  align-items: center;
+  gap: ${(props) => props.theme.space[200]};
+`;
+var InfoRow = styled.div`
+  display: flex;
+  align-items: center;
+  gap: ${(props) => props.theme.space[300]};
+`;
+var ProfileCard = ({
+  partnerName,
+  name,
+  secondaryName,
+  avatarUrl,
+  subtext,
+  description,
+  verificationType,
+  profileUrl,
+  location,
+  bannerColor,
+  bannerContent,
+  metadata,
+  profileActions,
+  footer,
+  cardProps
+}) => {
+  return /* @__PURE__ */ jsxs(StyledProfileCard, { role: "presentation", ...cardProps, children: [
+    /* @__PURE__ */ jsxs(StyledCardHeader, { $bannerColor: bannerColor, $partnerName: partnerName, children: [
+      /* @__PURE__ */ jsx2(Avatar, { src: avatarUrl, name, size: "60px", mt: 450 }),
+      bannerContent && /* @__PURE__ */ jsx2(BannerContent, { children: bannerContent })
+    ] }),
+    /* @__PURE__ */ jsx2(ActionsSection, { children: profileActions }),
+    /* @__PURE__ */ jsxs(StyledCardContent, { children: [
+      /* @__PURE__ */ jsxs(ProfileNameSection, { children: [
+        partnerName && /* @__PURE__ */ jsx2(
+          PartnerLogo,
+          {
+            partnerName,
+            "aria-label": `${partnerName} profile`,
+            size: "small"
+          }
+        ),
+        /* @__PURE__ */ jsx2(Text.SubHeadline, { as: "h2", children: name })
+      ] }),
+      subtext && /* @__PURE__ */ jsx2(Text, { fontSize: 200, color: "text.subtext", children: subtext }),
+      secondaryName && /* @__PURE__ */ jsxs(InfoRow, { children: [
+        profileUrl ? /* @__PURE__ */ jsxs(Link, { href: profileUrl, external: true, children: [
+          /* @__PURE__ */ jsx2(Text, { fontSize: 200, children: secondaryName }),
+          /* @__PURE__ */ jsx2(
+            Icon2,
+            {
+              name: "arrow-right-up-outline",
+              "aria-hidden": true,
+              ml: 100,
+              size: "small"
+            }
+          )
+        ] }) : /* @__PURE__ */ jsx2(Text.SmallByline, { color: "text.subtext", children: secondaryName }),
+        verificationType && /* @__PURE__ */ jsx2(
+          VerifiedProfileIcon,
+          {
+            partnerName,
+            verificationType
+          }
+        )
+      ] }),
+      description && /* @__PURE__ */ jsx2(Text, { fontSize: 200, children: description }),
+      location && /* @__PURE__ */ jsxs(InfoRow, { children: [
+        /* @__PURE__ */ jsx2(Icon2, { name: "location-pin-outline", "aria-hidden": true, size: "small" }),
+        /* @__PURE__ */ jsx2(Text, { fontSize: 200, children: location })
+      ] }),
+      metadata && metadata.length > 0 && /* @__PURE__ */ jsx2(InfoRow, { children: metadata.map((info, index) => /* @__PURE__ */ jsx2(Text, { fontSize: 200, children: info }, index)) })
+    ] }),
+    footer && /* @__PURE__ */ jsx2(CardFooter, { children: footer })
+  ] });
+};
+
+// src/InlineProfile.tsx
+import styled2 from "styled-components";
+import { PartnerLogo as PartnerLogo2 } from "@sproutsocial/seeds-react-partner-logo";
+import { Avatar as Avatar2 } from "@sproutsocial/seeds-react-avatar";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var InlineProfileContainer = styled2.span`
+  display: inline-flex;
   flex-direction: row;
   align-items: center;
+  gap: ${(props) => props.theme.space[200]};
   max-width: 100%;
+  ${(props) => props.theme.typography[200]}
+  color: ${(props) => props.theme.colors.text.subtext};
+  text-align: inherit;
 `;
-var InlineProfileBody = styled.span`
-  display: flex;
+var InlineProfileAvatar = styled2.span`
+  display: inline-flex;
+  flex-shrink: 0;
+`;
+var InlineProfileContent = styled2.span`
+  display: inline-flex;
   align-items: center;
-  margin-left: 8px;
+  gap: ${(props) => props.theme.space[200]};
+  min-width: 0;
+  flex: 1;
 `;
+var InlineProfileNetwork = styled2.span`
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+`;
+var InlineProfileText = styled2.span`
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  gap: ${(props) => props.theme.space[200]};
+  min-width: 0;
+  flex: 1;
+`;
+var InlineProfileName = styled2.span`
+  display: inline-block;
+  ${(props) => props.theme.typography[200]}
+  font-family: ${(props) => props.theme.fontFamily};
+  font-weight: ${(props) => props.theme.fontWeights.semibold};
+  text-transform: lowercase;
+  color: ${(props) => props.theme.colors.text.body};
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+var InlineProfileHandle = styled2.span`
+  display: inline-block;
+  ${(props) => props.theme.typography[200]}
+  font-family: ${(props) => props.theme.fontFamily};
+  color: ${(props) => props.theme.colors.text.subtext};
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+var avatarSizeMap = {
+  small: "16px",
+  medium: "20px",
+  large: "24px"
+};
 var InlineProfile = ({
   name,
   secondaryName,
   partnerName,
   partnerLogoLabel,
-  avatarSize = "22px",
-  img,
-  children
+  size = "medium",
+  avatarSize: avatarSizeOverride,
+  avatarUrl,
+  verificationType,
+  className
 }) => {
-  return /* @__PURE__ */ jsxs(InlineProfileContainer, { children: [
-    /* @__PURE__ */ jsx(Avatar, { size: avatarSize, src: img, name }),
-    partnerName && /* @__PURE__ */ jsx(
-      PartnerLogo,
-      {
-        size: "small",
-        partnerName,
-        ml: 300,
-        "aria-label": partnerLogoLabel
-      }
-    ),
-    /* @__PURE__ */ jsx(Text, { fontSize: 200, fontWeight: "semibold", ml: 300, truncated: true, children: name }),
-    secondaryName && /* @__PURE__ */ jsx(Text, { fontSize: 200, ml: 300, fontWeight: "normal", truncated: true, children: secondaryName }),
-    /* @__PURE__ */ jsx(InlineProfileBody, { children })
+  const displayName = name || secondaryName || "Unknown Profile";
+  const avatarSize = avatarSizeOverride || avatarSizeMap[size];
+  return /* @__PURE__ */ jsxs2(InlineProfileContainer, { className, $size: size, children: [
+    /* @__PURE__ */ jsx3(InlineProfileAvatar, { children: /* @__PURE__ */ jsx3(Avatar2, { src: avatarUrl, name: displayName, size: avatarSize }) }),
+    /* @__PURE__ */ jsxs2(InlineProfileContent, { children: [
+      partnerName && /* @__PURE__ */ jsx3(InlineProfileNetwork, { children: /* @__PURE__ */ jsx3(
+        PartnerLogo2,
+        {
+          partnerName,
+          "aria-label": partnerLogoLabel || `${partnerName} profile`,
+          size: "small"
+        }
+      ) }),
+      /* @__PURE__ */ jsxs2(InlineProfileText, { children: [
+        name && /* @__PURE__ */ jsx3(InlineProfileName, { children: name }),
+        secondaryName && /* @__PURE__ */ jsx3(InlineProfileHandle, { children: secondaryName })
+      ] }),
+      verificationType && /* @__PURE__ */ jsx3(
+        VerifiedProfileIcon,
+        {
+          partnerName,
+          verificationType
+        }
+      )
+    ] })
   ] });
 };
 
 // src/ProfileToken.tsx
-import "react";
+import styled3 from "styled-components";
 import { Token } from "@sproutsocial/seeds-react-token";
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var StyledProfileToken = styled3(Token)`
+  box-sizing: border-box;
+  display: inline-flex;
+  max-width: 100%;
+`;
 var ProfileToken = ({
-  tokenProps,
   className,
+  onClick,
+  tokenProps,
   ...props
-}) => /* @__PURE__ */ jsx2(Token, { className, closeable: false, ...tokenProps, children: /* @__PURE__ */ jsx2(InlineProfile, { ...props }) });
+}) => /* @__PURE__ */ jsx4(
+  StyledProfileToken,
+  {
+    className,
+    closeable: false,
+    onClick,
+    ...tokenProps,
+    children: /* @__PURE__ */ jsx4(InlineProfile, { size: "small", ...props })
+  }
+);
 export {
   InlineProfile,
+  ProfileCard,
   ProfileToken
 };
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/InlineProfile.tsx","../../src/ProfileToken.tsx"],"sourcesContent":["import styled from \"styled-components\";\nimport { Text } from \"@sproutsocial/seeds-react-text\";\nimport { PartnerLogo } from \"@sproutsocial/seeds-react-partner-logo\";\nimport { Avatar } from \"@sproutsocial/seeds-react-avatar\";\nimport type { TypeInlineProfileProps } from \"./types\";\n\nconst InlineProfileContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  max-width: 100%;\n`;\n\nconst InlineProfileBody = styled.span`\n  display: flex;\n  align-items: center;\n  margin-left: 8px;\n`;\n\n/**\n *\n * @param props - Profile props\n * @param props.name - Name of the profile\n * @param props.secondaryName - Secondary name of the profile\n * @param props.partnerName - Partner logo name\n * @param props.partnerLogoLabel - Aria-label for the partner logo\n * @param props.avatarSize - Size of the avatar\n * @param props.img - Image URL for the avatar\n * @param props.children - Additional elements to render within the profile component\n * @returns JSX.Element representing a user profile\n *\n * @example\n * <InlineProfile\n *   name=\"John Doe\"\n *   secondaryName=\"johndoe123\"\n *   partnerName=\"facebook\"\n *   partnerLogoLabel=\"Facebook Logo\"\n *   avatarSize=\"24px\"\n *   img=\"https://example.com/avatar.jpg\"\n * >\n *   <Badge text=\"Moderator\" badgeColor=\"green\" />\n * </InlineProfile>\n */\nexport const InlineProfile = ({\n  name,\n  secondaryName,\n  partnerName,\n  partnerLogoLabel,\n  avatarSize = \"22px\",\n  img,\n  children,\n}: TypeInlineProfileProps) => {\n  return (\n    <InlineProfileContainer>\n      <Avatar size={avatarSize} src={img} name={name} />\n      {partnerName && (\n        <PartnerLogo\n          size=\"small\"\n          partnerName={partnerName}\n          ml={300}\n          aria-label={partnerLogoLabel}\n        />\n      )}\n      <Text fontSize={200} fontWeight=\"semibold\" ml={300} truncated={true}>\n        {name}\n      </Text>\n      {secondaryName && (\n        <Text fontSize={200} ml={300} fontWeight=\"normal\" truncated={true}>\n          {secondaryName}\n        </Text>\n      )}\n      <InlineProfileBody>{children}</InlineProfileBody>\n    </InlineProfileContainer>\n  );\n};\n","import React from \"react\";\nimport { Token } from \"@sproutsocial/seeds-react-token\";\nimport { InlineProfile } from \"./InlineProfile\";\nimport type { ProfileTokenProps } from \"./types\";\n\n/**\n * A ProfileToken component that wraps CompactProfile in a Seeds Token component.\n * This token is not closable and provides a compact way to display profile information inline.\n */\nexport const ProfileToken: React.FC<ProfileTokenProps> = ({\n  tokenProps,\n  className,\n  ...props\n}) => (\n  <Token className={className} closeable={false} {...tokenProps}>\n    <InlineProfile {...props} />\n  </Token>\n);\n\nexport default ProfileToken;\n"],"mappings":";AAAA,OAAO,YAAY;AACnB,SAAS,YAAY;AACrB,SAAS,mBAAmB;AAC5B,SAAS,cAAc;AAkDnB,SACE,KADF;AA/CJ,IAAM,yBAAyB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOtC,IAAM,oBAAoB,OAAO;AAAA;AAAA;AAAA;AAAA;AA8B1B,IAAM,gBAAgB,CAAC;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA;AACF,MAA8B;AAC5B,SACE,qBAAC,0BACC;AAAA,wBAAC,UAAO,MAAM,YAAY,KAAK,KAAK,MAAY;AAAA,IAC/C,eACC;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL;AAAA,QACA,IAAI;AAAA,QACJ,cAAY;AAAA;AAAA,IACd;AAAA,IAEF,oBAAC,QAAK,UAAU,KAAK,YAAW,YAAW,IAAI,KAAK,WAAW,MAC5D,gBACH;AAAA,IACC,iBACC,oBAAC,QAAK,UAAU,KAAK,IAAI,KAAK,YAAW,UAAS,WAAW,MAC1D,yBACH;AAAA,IAEF,oBAAC,qBAAmB,UAAS;AAAA,KAC/B;AAEJ;;;AC1EA,OAAkB;AAClB,SAAS,aAAa;AAclB,gBAAAA,YAAA;AANG,IAAM,eAA4C,CAAC;AAAA,EACxD;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACE,gBAAAA,KAAC,SAAM,WAAsB,WAAW,OAAQ,GAAG,YACjD,0BAAAA,KAAC,iBAAe,GAAG,OAAO,GAC5B;","names":["jsx"]}
+{"version":3,"sources":["../../src/ProfileCard.tsx","../../src/VerifiedProfileIcon.tsx","../../src/InlineProfile.tsx","../../src/ProfileToken.tsx"],"sourcesContent":["import styled from \"styled-components\";\nimport { PartnerLogo } from \"@sproutsocial/seeds-react-partner-logo\";\nimport { Avatar } from \"@sproutsocial/seeds-react-avatar\";\nimport {\n  Card,\n  CardHeader,\n  CardContent,\n  CardFooter,\n} from \"@sproutsocial/seeds-react-card\";\nimport { Icon } from \"@sproutsocial/seeds-react-icon\";\nimport { Link } from \"@sproutsocial/seeds-react-link\";\nimport { Text } from \"@sproutsocial/seeds-react-text\";\nimport type { TypeProfileCardProps } from \"./types\";\nimport { VerifiedProfileIcon } from \"./VerifiedProfileIcon\";\n\n// Styled Components\nconst StyledProfileCard = styled(Card)`\n  max-width: 300px;\n`;\n\nconst StyledCardHeader = styled(CardHeader)<{\n  $bannerColor?: string;\n  $partnerName?: string;\n}>`\n  position: relative;\n  height: 80px;\n  padding: ${(props) => props.theme.space[400]}\n    ${(props) => props.theme.space[400]} 0 ${(props) => props.theme.space[400]};\n  margin-bottom: 0;\n  color: ${(props) => props.theme.colors.text.inverse};\n  border-radius: ${(props) => props.theme.radii[500]}\n    ${(props) => props.theme.radii[500]} 0 0;\n  ${(props) => {\n    // Use explicit bannerColor if provided\n    if (props.$bannerColor) {\n      return `background: ${props.$bannerColor};`;\n    }\n    // Fall back to theme.colors.network[partnerName] if partnerName is available\n    if (props.$partnerName && props.theme.colors.network) {\n      const networkColor =\n        props.theme.colors.network[\n          props.$partnerName as keyof typeof props.theme.colors.network\n        ];\n      return networkColor ? `background: ${networkColor};` : \"\";\n    }\n    return \"\";\n  }}\n`;\n\nconst BannerContent = styled.div`\n  display: flex;\n  justify-content: flex-end;\n  width: 100%;\n`;\n\nconst ActionsSection = styled.div`\n  display: flex;\n  justify-content: flex-end;\n  gap: ${(props) => props.theme.space[100]};\n  padding: 0 ${(props) => props.theme.space[300]};\n\n  &:empty {\n    min-height: 44px;\n  }\n`;\n\nconst StyledCardContent = styled(CardContent)`\n  display: flex;\n  flex-direction: column;\n  gap: ${(props) => props.theme.space[300]};\n  padding: 0 ${(props) => props.theme.space[400]}\n    ${(props) => props.theme.space[400]};\n`;\n\nconst ProfileNameSection = styled.div`\n  display: flex;\n  align-items: center;\n  gap: ${(props) => props.theme.space[200]};\n`;\n\nconst InfoRow = styled.div`\n  display: flex;\n  align-items: center;\n  gap: ${(props) => props.theme.space[300]};\n`;\n\n/**\n * A flexible profile component that can display user profiles in various formats\n * across different social networks with consistent styling and behavior.\n */\nexport const ProfileCard = ({\n  partnerName,\n  name,\n  secondaryName,\n  avatarUrl,\n  subtext,\n  description,\n  verificationType,\n  profileUrl,\n  location,\n  bannerColor,\n  bannerContent,\n  metadata,\n  profileActions,\n  footer,\n  cardProps,\n}: TypeProfileCardProps) => {\n  return (\n    <StyledProfileCard role=\"presentation\" {...cardProps}>\n      <StyledCardHeader $bannerColor={bannerColor} $partnerName={partnerName}>\n        <Avatar src={avatarUrl} name={name} size=\"60px\" mt={450} />\n        {bannerContent && <BannerContent>{bannerContent}</BannerContent>}\n      </StyledCardHeader>\n\n      <ActionsSection>{profileActions}</ActionsSection>\n\n      <StyledCardContent>\n        <ProfileNameSection>\n          {partnerName && (\n            <PartnerLogo\n              partnerName={partnerName}\n              aria-label={`${partnerName} profile`}\n              size=\"small\"\n            />\n          )}\n          <Text.SubHeadline as=\"h2\">{name}</Text.SubHeadline>\n        </ProfileNameSection>\n\n        {subtext && (\n          <Text fontSize={200} color=\"text.subtext\">\n            {subtext}\n          </Text>\n        )}\n\n        {secondaryName && (\n          <InfoRow>\n            {profileUrl ? (\n              <Link href={profileUrl} external>\n                <Text fontSize={200}>{secondaryName}</Text>\n                <Icon\n                  name=\"arrow-right-up-outline\"\n                  aria-hidden\n                  ml={100}\n                  size=\"small\"\n                />\n              </Link>\n            ) : (\n              <Text.SmallByline color=\"text.subtext\">\n                {secondaryName}\n              </Text.SmallByline>\n            )}\n            {verificationType && (\n              <VerifiedProfileIcon\n                partnerName={partnerName}\n                verificationType={verificationType}\n              />\n            )}\n          </InfoRow>\n        )}\n\n        {description && <Text fontSize={200}>{description}</Text>}\n\n        {location && (\n          <InfoRow>\n            <Icon name=\"location-pin-outline\" aria-hidden size=\"small\" />\n            <Text fontSize={200}>{location}</Text>\n          </InfoRow>\n        )}\n\n        {metadata && metadata.length > 0 && (\n          <InfoRow>\n            {metadata.map((info, index) => (\n              <Text fontSize={200} key={index}>\n                {info}\n              </Text>\n            ))}\n          </InfoRow>\n        )}\n      </StyledCardContent>\n\n      {footer && <CardFooter>{footer}</CardFooter>}\n    </StyledProfileCard>\n  );\n};\n\nexport default ProfileCard;\n","import { Icon } from \"@sproutsocial/seeds-react-icon\";\nimport type { TypeProfileNetwork, TypeProfileVerification } from \"./types\";\n\n// TODO: Move these to a more appropriate location\nconst VERIFICATION_COLORS = {\n  twitter: \"#000000\",\n  facebook: \"#1877F2\",\n  x: \"#000000\",\n  linkedin: \"#0A66C2\",\n  instagram: \"#e4405f\",\n  gray: \"#515e5f\",\n} as const;\n\n/**\n * Gets the verification color based on partnerName and verification type\n */\nexport const getVerificationColor = (\n  partnerName?: TypeProfileNetwork,\n  verificationType?: TypeProfileVerification\n): string => {\n  if (!verificationType || verificationType === \"not_verified\") return \"\";\n\n  switch (verificationType) {\n    case \"blue_verified\":\n      // Use partner-specific blue color\n      return partnerName === \"facebook\"\n        ? VERIFICATION_COLORS.facebook\n        : VERIFICATION_COLORS.twitter;\n    case \"gray_verified\":\n      return VERIFICATION_COLORS.gray;\n    case \"verified\":\n    default:\n      // Default to partner color or Twitter blue\n      if (partnerName && partnerName in VERIFICATION_COLORS) {\n        return VERIFICATION_COLORS[\n          partnerName as keyof typeof VERIFICATION_COLORS\n        ];\n      }\n      return VERIFICATION_COLORS.twitter;\n  }\n};\n\nexport interface TypeVerifiedProfileIconProps {\n  partnerName?: TypeProfileNetwork;\n  verificationType: TypeProfileVerification;\n}\n\nexport const VerifiedProfileIcon = ({\n  partnerName,\n  verificationType,\n}: TypeVerifiedProfileIconProps) => {\n  if (!verificationType || verificationType === \"not_verified\") return;\n\n  const verificationColor = getVerificationColor(partnerName, verificationType);\n  return (\n    <Icon\n      title=\"Verified\"\n      aria-label=\"Verified account\"\n      color={verificationColor}\n      name=\"verified\"\n      ml=\"150\"\n    />\n  );\n};\n","import styled from \"styled-components\";\nimport { PartnerLogo } from \"@sproutsocial/seeds-react-partner-logo\";\nimport { Avatar } from \"@sproutsocial/seeds-react-avatar\";\nimport type { TypeInlineProfileProps } from \"./types\";\nimport { VerifiedProfileIcon } from \"./VerifiedProfileIcon\";\n\nconst InlineProfileContainer = styled.span<{\n  $size?: \"small\" | \"medium\" | \"large\";\n}>`\n  display: inline-flex;\n  flex-direction: row;\n  align-items: center;\n  gap: ${(props) => props.theme.space[200]};\n  max-width: 100%;\n  ${(props) => props.theme.typography[200]}\n  color: ${(props) => props.theme.colors.text.subtext};\n  text-align: inherit;\n`;\n\nconst InlineProfileAvatar = styled.span`\n  display: inline-flex;\n  flex-shrink: 0;\n`;\n\nconst InlineProfileContent = styled.span`\n  display: inline-flex;\n  align-items: center;\n  gap: ${(props) => props.theme.space[200]};\n  min-width: 0;\n  flex: 1;\n`;\n\nconst InlineProfileNetwork = styled.span`\n  display: inline-flex;\n  align-items: center;\n  flex-shrink: 0;\n`;\n\nconst InlineProfileText = styled.span`\n  display: inline-flex;\n  flex-direction: row;\n  align-items: center;\n  gap: ${(props) => props.theme.space[200]};\n  min-width: 0;\n  flex: 1;\n`;\n\nconst InlineProfileName = styled.span`\n  display: inline-block;\n  ${(props) => props.theme.typography[200]}\n  font-family: ${(props) => props.theme.fontFamily};\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  text-transform: lowercase;\n  color: ${(props) => props.theme.colors.text.body};\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n`;\n\nconst InlineProfileHandle = styled.span`\n  display: inline-block;\n  ${(props) => props.theme.typography[200]}\n  font-family: ${(props) => props.theme.fontFamily};\n  color: ${(props) => props.theme.colors.text.subtext};\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n`;\n\nconst avatarSizeMap = {\n  small: \"16px\",\n  medium: \"20px\",\n  large: \"24px\",\n} as const;\n\n/**\n * A compact inline profile component that displays avatar, name/handle, and verification.\n * Perfect for use in post headers, comments, or other compact spaces.\n *\n * @param props - Profile props\n * @param props.name - Name of the profile\n * @param props.secondaryName - Secondary name of the profile\n * @param props.partnerName - Partner logo name\n * @param props.partnerLogoLabel - Aria-label for the partner logo\n * @param props.avatarSize - Size of the avatar\n * @param props.avatarUrl - Image URL for the avatar\n * @param props.children - Additional elements to render within the profile component\n * @returns JSX.Element representing a user profile\n *\n * @example\n * <InlineProfile\n *   name=\"John Doe\"\n *   secondaryName=\"johndoe123\"\n *   partnerName=\"facebook\"\n *   partnerLogoLabel=\"Facebook Logo\"\n *   avatarSize=\"24px\"\n *   avatarUrl=\"https://example.com/avatar.jpg\"\n * >\n *   <Badge text=\"Moderator\" badgeColor=\"green\" />\n * </InlineProfile>\n */\nexport const InlineProfile = ({\n  name,\n  secondaryName,\n  partnerName,\n  partnerLogoLabel,\n  size = \"medium\",\n  avatarSize: avatarSizeOverride,\n  avatarUrl,\n  verificationType,\n  className,\n}: TypeInlineProfileProps) => {\n  const displayName = name || secondaryName || \"Unknown Profile\";\n  const avatarSize = avatarSizeOverride || avatarSizeMap[size];\n\n  return (\n    <InlineProfileContainer className={className} $size={size}>\n      <InlineProfileAvatar>\n        <Avatar src={avatarUrl} name={displayName} size={avatarSize} />\n      </InlineProfileAvatar>\n\n      <InlineProfileContent>\n        {partnerName && (\n          <InlineProfileNetwork>\n            <PartnerLogo\n              partnerName={partnerName}\n              aria-label={partnerLogoLabel || `${partnerName} profile`}\n              size=\"small\"\n            />\n          </InlineProfileNetwork>\n        )}\n\n        <InlineProfileText>\n          {name && <InlineProfileName>{name}</InlineProfileName>}\n\n          {secondaryName && (\n            <InlineProfileHandle>{secondaryName}</InlineProfileHandle>\n          )}\n        </InlineProfileText>\n\n        {verificationType && (\n          <VerifiedProfileIcon\n            partnerName={partnerName}\n            verificationType={verificationType}\n          />\n        )}\n      </InlineProfileContent>\n    </InlineProfileContainer>\n  );\n};\n","import styled from \"styled-components\";\nimport { Token } from \"@sproutsocial/seeds-react-token\";\nimport { InlineProfile } from \"./InlineProfile\";\nimport type { ProfileTokenProps } from \"./types\";\n\nconst StyledProfileToken = styled(Token)`\n  box-sizing: border-box;\n  display: inline-flex;\n  max-width: 100%;\n`;\n\n/**\n * A ProfileToken component that wraps CompactProfile in a Seeds Token component.\n * This token is not closable and provides a compact way to display profile information inline.\n */\nexport const ProfileToken = ({\n  className,\n  onClick,\n  tokenProps,\n  ...props\n}: ProfileTokenProps) => (\n  <StyledProfileToken\n    className={className}\n    closeable={false}\n    onClick={onClick}\n    {...tokenProps}\n  >\n    <InlineProfile size=\"small\" {...props} />\n  </StyledProfileToken>\n);\n\nexport default ProfileToken;\n"],"mappings":"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","names":["Icon","jsx","Icon","styled","PartnerLogo","Avatar","jsx","jsxs","styled","Avatar","PartnerLogo","styled","jsx","styled"]}

package/dist/index.d.mts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { EnumLogoNamesWithoutVariants } from '@sproutsocial/seeds-partner-logos';
-import Token from '@sproutsocial/seeds-react-token';
-import React$1 from 'react';
+import { TypeTokenProps } from '@sproutsocial/seeds-react-token';
+import { TypeCardProps } from '@sproutsocial/seeds-react-card';
 
 /**
  * Profile Component Types
@@ -10,23 +10,89 @@ import React$1 from 'react';
  * that can be used by backend services to render user profile data.
  */
 
-interface TypeInlineProfileProps {
+/**
+ * Social network types supported by the Profile component
+ * This is a subset of EnumLogoNamesWithoutVariants that only includes actual social networks
+ */
+type TypeProfileNetwork = Extract<EnumLogoNamesWithoutVariants, "twitter" | "facebook" | "instagram" | "linkedin" | "youtube" | "tiktok" | "threads" | "bluesky" | "reddit" | "pinterest" | "whatsapp" | "glassdoor" | "trustpilot" | "tumblr" | "yelp" | "x-twitter">;
+/**
+ * Profile verification types
+ */
+type TypeProfileVerification = "blue_verified" | "gray_verified" | "verified" | "not_verified";
+/**
+ * Base props interface shared between Profile and InlineProfile components
+ */
+interface TypeBaseProfileProps {
+    /** The network of the profile */
+    partnerName?: TypeProfileNetwork;
+    /** A custom label to apply to the partner logo */
+    partnerLogoLabel?: string;
+    /** The display name of the profile */
     name: string;
+    /** The handle or username of the profile */
     secondaryName?: string;
+    /** The profile picture URL */
+    avatarUrl?: string;
+    /** The type of verification for the profile, if applicable */
+    verificationType?: TypeProfileVerification;
+    /** Additional CSS class name */
+    className?: string;
+}
+/**
+ * Props interface for the InlineProfile component
+ */
+interface TypeInlineProfileProps extends Omit<TypeBaseProfileProps, "name"> {
+    /** The display name of the profile (optional for inline) */
+    name?: string;
+    /** Size variant for the inline profile */
+    size?: "small" | "medium" | "large";
+    /** The px size of the avatar, which has a default based on the size prop */
     avatarSize?: string;
-    partnerName?: EnumLogoNamesWithoutVariants;
-    partnerLogoLabel?: string;
-    img?: string;
-    children?: React.ReactNode | React.ReactNode[];
 }
 interface ProfileTokenProps extends TypeInlineProfileProps {
-    /** Additional CSS class name */
-    className?: string;
+    /** Click handler for the entire inline profile */
+    onClick?: TypeTokenProps["onClick"];
     /** Additional props to pass to the Token component */
-    tokenProps?: Omit<React.ComponentProps<typeof Token>, "children">;
+    tokenProps?: Omit<TypeTokenProps, "children">;
+}
+/**
+ * Main props interface for the Profile component
+ */
+interface TypeProfileCardProps extends TypeBaseProfileProps {
+    /** Subtext for below the profile name */
+    subtext?: string;
+    /** Profile description or bio */
+    description?: string;
+    /** External profile URL (e.g., "https://twitter.com/username"), only displayed if secondaryName is provided */
+    profileUrl?: string;
+    /** Location text (e.g., "San Francisco, CA") */
+    location?: string;
+    /**
+     * Background color for the banner header.
+     * If not provided, will use theme.colors.network[partnerName] when partnerName is available.
+     */
+    bannerColor?: string;
+    /** Generic content slot for banners, alerts, or status messages */
+    bannerContent?: React.ReactNode;
+    /** Array of metadata strings (e.g., ["1.2K followers", "500 following"]) */
+    metadata?: string[];
+    /** Action buttons or overflow menus for profile operations. Rendered in order provided, right-aligned. */
+    profileActions?: React.ReactNode;
+    /** Custom footer content */
+    footer?: React.ReactNode;
+    /** Props to pass down to the Card */
+    cardProps?: TypeCardProps;
 }
 
 /**
+ * A flexible profile component that can display user profiles in various formats
+ * across different social networks with consistent styling and behavior.
+ */
+declare const ProfileCard: ({ partnerName, name, secondaryName, avatarUrl, subtext, description, verificationType, profileUrl, location, bannerColor, bannerContent, metadata, profileActions, footer, cardProps, }: TypeProfileCardProps) => react_jsx_runtime.JSX.Element;
+
+/**
+ * A compact inline profile component that displays avatar, name/handle, and verification.
+ * Perfect for use in post headers, comments, or other compact spaces.
  *
  * @param props - Profile props
  * @param props.name - Name of the profile
@@ -34,7 +100,7 @@ interface ProfileTokenProps extends TypeInlineProfileProps {
  * @param props.partnerName - Partner logo name
  * @param props.partnerLogoLabel - Aria-label for the partner logo
  * @param props.avatarSize - Size of the avatar
- * @param props.img - Image URL for the avatar
+ * @param props.avatarUrl - Image URL for the avatar
  * @param props.children - Additional elements to render within the profile component
  * @returns JSX.Element representing a user profile
  *
@@ -45,17 +111,17 @@ interface ProfileTokenProps extends TypeInlineProfileProps {
  *   partnerName="facebook"
  *   partnerLogoLabel="Facebook Logo"
  *   avatarSize="24px"
- *   img="https://example.com/avatar.jpg"
+ *   avatarUrl="https://example.com/avatar.jpg"
  * >
  *   <Badge text="Moderator" badgeColor="green" />
  * </InlineProfile>
  */
-declare const InlineProfile: ({ name, secondaryName, partnerName, partnerLogoLabel, avatarSize, img, children, }: TypeInlineProfileProps) => react_jsx_runtime.JSX.Element;
+declare const InlineProfile: ({ name, secondaryName, partnerName, partnerLogoLabel, size, avatarSize: avatarSizeOverride, avatarUrl, verificationType, className, }: TypeInlineProfileProps) => react_jsx_runtime.JSX.Element;
 
 /**
  * A ProfileToken component that wraps CompactProfile in a Seeds Token component.
  * This token is not closable and provides a compact way to display profile information inline.
  */
-declare const ProfileToken: React$1.FC<ProfileTokenProps>;
+declare const ProfileToken: ({ className, onClick, tokenProps, ...props }: ProfileTokenProps) => react_jsx_runtime.JSX.Element;
 
-export { InlineProfile, ProfileToken, type ProfileTokenProps, type TypeInlineProfileProps };
+export { InlineProfile, ProfileCard, ProfileToken, type ProfileTokenProps, type TypeBaseProfileProps, type TypeInlineProfileProps, type TypeProfileCardProps, type TypeProfileNetwork, type TypeProfileVerification };