@sproutsocial/seeds-react-profile 0.1.3 → 0.3.0

package/dist/index.d.ts

@@ -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;
-    avatarSize?: string;
-    partnerName?: EnumLogoNamesWithoutVariants;
-    partnerLogoLabel?: string;
-    img?: string;
-    children?: React.ReactNode | React.ReactNode[];
-}
-interface ProfileTokenProps extends TypeInlineProfileProps {
+    /** 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;
+}
+interface ProfileTokenProps extends Omit<TypeInlineProfileProps, "avatarUrl" | "secondaryName" | "avatarSize"> {
+    /** 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,21 @@ 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.
+ * A ProfileToken component that wraps InlineProfile in a Seeds Token component.
  * This token is not closable and provides a compact way to display profile information inline.
+ *
+ * ProfileToken enforces design standards by only showing the profile name and network logo.
+ * It does not support avatars, secondary names (handles), or custom avatar sizes.
+ * Use InlineProfile directly if you need more flexibility.
  */
-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 };

package/dist/index.js

@@ -31,65 +31,326 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   InlineProfile: () => InlineProfile,
+  ProfileCard: () => ProfileCard,
   ProfileToken: () => ProfileToken
 });
 module.exports = __toCommonJS(index_exports);
 
-// src/InlineProfile.tsx
+// src/ProfileCard.tsx
 var import_styled_components = __toESM(require("styled-components"));
-var import_seeds_react_text = require("@sproutsocial/seeds-react-text");
 var import_seeds_react_partner_logo = require("@sproutsocial/seeds-react-partner-logo");
 var import_seeds_react_avatar = require("@sproutsocial/seeds-react-avatar");
+var import_seeds_react_card = require("@sproutsocial/seeds-react-card");
+var import_seeds_react_icon2 = require("@sproutsocial/seeds-react-icon");
+var import_seeds_react_link = require("@sproutsocial/seeds-react-link");
+var import_seeds_react_text = require("@sproutsocial/seeds-react-text");
+
+// src/VerifiedProfileIcon.tsx
+var import_seeds_react_icon = require("@sproutsocial/seeds-react-icon");
 var import_jsx_runtime = require("react/jsx-runtime");
-var InlineProfileContainer = import_styled_components.default.div`
+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__ */ (0, import_jsx_runtime.jsx)(
+    import_seeds_react_icon.Icon,
+    {
+      title: "Verified",
+      "aria-label": "Verified account",
+      color: verificationColor,
+      name: "verified",
+      ml: "150"
+    }
+  );
+};
+
+// src/ProfileCard.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var StyledProfileCard = (0, import_styled_components.default)(import_seeds_react_card.Card)`
+  max-width: 300px;
+`;
+var StyledCardHeader = (0, import_styled_components.default)(import_seeds_react_card.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 = import_styled_components.default.div`
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+`;
+var ActionsSection = import_styled_components.default.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 = (0, import_styled_components.default)(import_seeds_react_card.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 = import_styled_components.default.div`
   display: flex;
+  align-items: center;
+  gap: ${(props) => props.theme.space[200]};
+`;
+var InfoRow = import_styled_components.default.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__ */ (0, import_jsx_runtime2.jsxs)(StyledProfileCard, { role: "presentation", ...cardProps, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(StyledCardHeader, { $bannerColor: bannerColor, $partnerName: partnerName, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_seeds_react_avatar.Avatar, { src: avatarUrl, name, size: "60px", mt: 450 }),
+      bannerContent && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(BannerContent, { children: bannerContent })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ActionsSection, { children: profileActions }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(StyledCardContent, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(ProfileNameSection, { children: [
+        partnerName && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          import_seeds_react_partner_logo.PartnerLogo,
+          {
+            partnerName,
+            "aria-label": `${partnerName} profile`,
+            size: "small"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_seeds_react_text.Text.SubHeadline, { as: "h2", children: name })
+      ] }),
+      subtext && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_seeds_react_text.Text, { fontSize: 200, color: "text.subtext", children: subtext }),
+      secondaryName && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(InfoRow, { children: [
+        profileUrl ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_seeds_react_link.Link, { href: profileUrl, external: true, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_seeds_react_text.Text, { fontSize: 200, children: secondaryName }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            import_seeds_react_icon2.Icon,
+            {
+              name: "arrow-right-up-outline",
+              "aria-hidden": true,
+              ml: 100,
+              size: "small"
+            }
+          )
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_seeds_react_text.Text.SmallByline, { color: "text.subtext", children: secondaryName }),
+        verificationType && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          VerifiedProfileIcon,
+          {
+            partnerName,
+            verificationType
+          }
+        )
+      ] }),
+      description && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_seeds_react_text.Text, { fontSize: 200, children: description }),
+      location && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(InfoRow, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_seeds_react_icon2.Icon, { name: "location-pin-outline", "aria-hidden": true, size: "small" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_seeds_react_text.Text, { fontSize: 200, children: location })
+      ] }),
+      metadata && metadata.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(InfoRow, { children: metadata.map((info, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_seeds_react_text.Text, { fontSize: 200, children: info }, index)) })
+    ] }),
+    footer && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_seeds_react_card.CardFooter, { children: footer })
+  ] });
+};
+
+// src/InlineProfile.tsx
+var import_styled_components2 = __toESM(require("styled-components"));
+var import_seeds_react_partner_logo2 = require("@sproutsocial/seeds-react-partner-logo");
+var import_seeds_react_avatar2 = require("@sproutsocial/seeds-react-avatar");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var InlineProfileContainer = import_styled_components2.default.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 = import_styled_components.default.span`
-  display: flex;
+var InlineProfileAvatar = import_styled_components2.default.span`
+  display: inline-flex;
+  flex-shrink: 0;
+`;
+var InlineProfileContent = import_styled_components2.default.span`
+  display: inline-flex;
+  align-items: center;
+  gap: ${(props) => props.theme.space[200]};
+  min-width: 0;
+  flex: 1;
+`;
+var InlineProfileNetwork = import_styled_components2.default.span`
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+`;
+var InlineProfileText = import_styled_components2.default.span`
+  display: inline-flex;
+  flex-direction: row;
   align-items: center;
-  margin-left: 8px;
+  gap: ${(props) => props.theme.space[200]};
+  min-width: 0;
+  flex: 1;
+`;
+var InlineProfileName = import_styled_components2.default.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 = import_styled_components2.default.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__ */ (0, import_jsx_runtime.jsxs)(InlineProfileContainer, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_seeds_react_avatar.Avatar, { size: avatarSize, src: img, name }),
-    partnerName && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_seeds_react_partner_logo.PartnerLogo,
-      {
-        size: "small",
-        partnerName,
-        ml: 300,
-        "aria-label": partnerLogoLabel
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_seeds_react_text.Text, { fontSize: 200, fontWeight: "semibold", ml: 300, truncated: true, children: name }),
-    secondaryName && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_seeds_react_text.Text, { fontSize: 200, ml: 300, fontWeight: "normal", truncated: true, children: secondaryName }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InlineProfileBody, { children })
+  const displayName = name || secondaryName || "Unknown Profile";
+  const avatarSize = avatarSizeOverride || avatarSizeMap[size];
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(InlineProfileContainer, { className, $size: size, children: [
+    avatarUrl && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(InlineProfileAvatar, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_seeds_react_avatar2.Avatar, { src: avatarUrl, name: displayName, size: avatarSize }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(InlineProfileContent, { children: [
+      partnerName && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(InlineProfileNetwork, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        import_seeds_react_partner_logo2.PartnerLogo,
+        {
+          partnerName,
+          "aria-label": partnerLogoLabel || `${partnerName} profile`,
+          size: "small"
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(InlineProfileText, { children: [
+        name && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(InlineProfileName, { children: name }),
+        secondaryName && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(InlineProfileHandle, { children: secondaryName })
+      ] }),
+      verificationType && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        VerifiedProfileIcon,
+        {
+          partnerName,
+          verificationType
+        }
+      )
+    ] })
   ] });
 };
 
 // src/ProfileToken.tsx
-var import_react = require("react");
+var import_styled_components3 = __toESM(require("styled-components"));
 var import_seeds_react_token = require("@sproutsocial/seeds-react-token");
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var StyledProfileToken = (0, import_styled_components3.default)(import_seeds_react_token.Token)`
+  box-sizing: border-box;
+  display: inline-flex;
+  max-width: 100%;
+  vertical-align: middle;
+  padding: ${(props) => props.theme.space[100]}
+    ${(props) => props.theme.space[200]};
+  margin: ${(props) => props.theme.space[100]} 0;
+`;
 var ProfileToken = ({
-  tokenProps,
   className,
+  onClick,
+  tokenProps,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_seeds_react_token.Token, { className, closeable: false, ...tokenProps, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(InlineProfile, { ...props }) });
+}) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  StyledProfileToken,
+  {
+    className,
+    closeable: false,
+    onClick,
+    ...tokenProps,
+    children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(InlineProfile, { size: "small", ...props })
+  }
+);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   InlineProfile,
+  ProfileCard,
   ProfileToken
 });
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/InlineProfile.tsx","../src/ProfileToken.tsx"],"sourcesContent":["export * from \"./InlineProfile\";\nexport * from \"./ProfileToken\";\nexport * from \"./types\";\n","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;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,+BAAmB;AACnB,8BAAqB;AACrB,sCAA4B;AAC5B,gCAAuB;AAkDnB;AA/CJ,IAAM,yBAAyB,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOtC,IAAM,oBAAoB,yBAAAA,QAAO;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,6CAAC,0BACC;AAAA,gDAAC,oCAAO,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,4CAAC,gCAAK,UAAU,KAAK,YAAW,YAAW,IAAI,KAAK,WAAW,MAC5D,gBACH;AAAA,IACC,iBACC,4CAAC,gCAAK,UAAU,KAAK,IAAI,KAAK,YAAW,UAAS,WAAW,MAC1D,yBACH;AAAA,IAEF,4CAAC,qBAAmB,UAAS;AAAA,KAC/B;AAEJ;;;AC1EA,mBAAkB;AAClB,+BAAsB;AAclB,IAAAC,sBAAA;AANG,IAAM,eAA4C,CAAC;AAAA,EACxD;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACE,6CAAC,kCAAM,WAAsB,WAAW,OAAQ,GAAG,YACjD,uDAAC,iBAAe,GAAG,OAAO,GAC5B;","names":["styled","import_jsx_runtime"]}
+{"version":3,"sources":["../src/index.ts","../src/ProfileCard.tsx","../src/VerifiedProfileIcon.tsx","../src/InlineProfile.tsx","../src/ProfileToken.tsx"],"sourcesContent":["export * from \"./ProfileCard\";\nexport * from \"./InlineProfile\";\nexport * from \"./ProfileToken\";\nexport * from \"./types\";\n","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      {avatarUrl && (\n        <InlineProfileAvatar>\n          <Avatar src={avatarUrl} name={displayName} size={avatarSize} />\n        </InlineProfileAvatar>\n      )}\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  vertical-align: middle;\n  padding: ${(props) => props.theme.space[100]}\n    ${(props) => props.theme.space[200]};\n  margin: ${(props) => props.theme.space[100]} 0;\n`;\n\n/**\n * A ProfileToken component that wraps InlineProfile in a Seeds Token component.\n * This token is not closable and provides a compact way to display profile information inline.\n *\n * ProfileToken enforces design standards by only showing the profile name and network logo.\n * It does not support avatars, secondary names (handles), or custom avatar sizes.\n * Use InlineProfile directly if you need more flexibility.\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":["import_seeds_react_icon","import_jsx_runtime","styled","import_styled_components","import_seeds_react_partner_logo","import_seeds_react_avatar","import_jsx_runtime","styled","import_styled_components","import_jsx_runtime","styled"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-profile",
-  "version": "0.1.3",
+  "version": "0.3.0",
   "description": "Seeds React Profile",
   "author": "Sprout Social, Inc.",
   "license": "MIT",
@@ -20,17 +20,19 @@
     "lint:fix": "eslint --fix"
   },
   "dependencies": {
-    "@sproutsocial/seeds-react-text": "*",
-    "@sproutsocial/seeds-react-avatar": "*",
-    "@sproutsocial/seeds-react-partner-logo": "*",
-    "@sproutsocial/seeds-react-card": "*",
-    "@sproutsocial/seeds-react-token": "*",
-    "@sproutsocial/seeds-react-icon": "*"
+    "@sproutsocial/seeds-react-avatar": "^1.0.1",
+    "@sproutsocial/seeds-react-card": "^1.1.14",
+    "@sproutsocial/seeds-react-icon": "^1.0.0",
+    "@sproutsocial/seeds-react-link": "^1.0.0",
+    "@sproutsocial/seeds-react-partner-logo": "^1.0.0",
+    "@sproutsocial/seeds-react-text": "^1.3.0",
+    "@sproutsocial/seeds-react-token": "^1.0.0"
   },
   "devDependencies": {
     "@types/react": "^18.0.0",
     "@types/styled-components": "^5.1.26",
     "@sproutsocial/eslint-config-seeds": "*",
+    "@sproutsocial/seeds-react-box": "*",
     "react": "^18.0.0",
     "styled-components": "^5.2.3",
     "tsup": "^8.3.4",
@@ -40,7 +42,8 @@
     "@sproutsocial/seeds-react-testing-library": "*"
   },
   "peerDependencies": {
-    "react": "^18.0.0",
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "styled-components": "^5.2.3"
   },
   "engines": {