@sproutsocial/seeds-react-profile 0.3.35 → 0.3.38

package/src/ProfileCard.tsx

@@ -1,186 +1,4 @@
-import styled from "styled-components";
-import { PartnerLogo } from "@sproutsocial/seeds-react-partner-logo";
-import { Avatar } from "@sproutsocial/seeds-react-avatar";
-import {
-  Card,
-  CardHeader,
-  CardContent,
-  CardFooter,
-} from "@sproutsocial/seeds-react-card";
-import { Icon } from "@sproutsocial/seeds-react-icon";
-import { Link } from "@sproutsocial/seeds-react-link";
-import { Text } from "@sproutsocial/seeds-react-text";
-import type { TypeProfileCardProps } from "./types";
-import { VerifiedProfileIcon } from "./VerifiedProfileIcon";
-
-// Styled Components
-const StyledProfileCard = styled(Card)`
-  max-width: 300px;
-`;
-
-const StyledCardHeader = styled(CardHeader)<{
-  $bannerColor?: string;
-  $partnerName?: string;
-}>`
-  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) => {
-    // Use explicit bannerColor if provided
-    if (props.$bannerColor) {
-      return `background: ${props.$bannerColor};`;
-    }
-    // Fall back to theme.colors.network[partnerName] if partnerName is available
-    if (props.$partnerName && props.theme.colors.network) {
-      const networkColor =
-        props.theme.colors.network[
-          props.$partnerName as keyof typeof props.theme.colors.network
-        ];
-      return networkColor ? `background: ${networkColor};` : "";
-    }
-    return "";
-  }}
-`;
-
-const BannerContent = styled.div`
-  display: flex;
-  justify-content: flex-end;
-  width: 100%;
-`;
-
-const 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;
-  }
-`;
-
-const 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]};
-`;
-
-const ProfileNameSection = styled.div`
-  display: flex;
-  align-items: center;
-  gap: ${(props) => props.theme.space[200]};
-`;
-
-const InfoRow = styled.div`
-  display: flex;
-  align-items: center;
-  gap: ${(props) => props.theme.space[300]};
-`;
-
-/**
- * A flexible profile component that can display user profiles in various formats
- * across different social networks with consistent styling and behavior.
- */
-export const ProfileCard = ({
-  partnerName,
-  name,
-  secondaryName,
-  avatarUrl,
-  subtext,
-  description,
-  verificationType,
-  profileUrl,
-  location,
-  bannerColor,
-  bannerContent,
-  metadata,
-  profileActions,
-  footer,
-  cardProps,
-}: TypeProfileCardProps) => {
-  return (
-    <StyledProfileCard role="presentation" {...cardProps}>
-      <StyledCardHeader $bannerColor={bannerColor} $partnerName={partnerName}>
-        <Avatar src={avatarUrl} name={name} size="60px" mt={450} />
-        {bannerContent && <BannerContent>{bannerContent}</BannerContent>}
-      </StyledCardHeader>
-
-      <ActionsSection>{profileActions}</ActionsSection>
-
-      <StyledCardContent>
-        <ProfileNameSection>
-          {partnerName && (
-            <PartnerLogo
-              partnerName={partnerName}
-              aria-label={`${partnerName} profile`}
-              size="small"
-            />
-          )}
-          <Text.SubHeadline as="h2">{name}</Text.SubHeadline>
-        </ProfileNameSection>
-
-        {subtext && (
-          <Text fontSize={200} color="text.subtext">
-            {subtext}
-          </Text>
-        )}
-
-        {secondaryName && (
-          <InfoRow>
-            {profileUrl ? (
-              <Link href={profileUrl} external>
-                <Text fontSize={200}>{secondaryName}</Text>
-                <Icon
-                  name="arrow-right-up-outline"
-                  aria-hidden
-                  ml={100}
-                  size="small"
-                />
-              </Link>
-            ) : (
-              <Text.SmallByline color="text.subtext">
-                {secondaryName}
-              </Text.SmallByline>
-            )}
-            {verificationType && (
-              <VerifiedProfileIcon
-                partnerName={partnerName}
-                verificationType={verificationType}
-              />
-            )}
-          </InfoRow>
-        )}
-
-        {description && <Text fontSize={200}>{description}</Text>}
-
-        {location && (
-          <InfoRow>
-            <Icon name="location-pin-outline" aria-hidden size="small" />
-            <Text fontSize={200}>{location}</Text>
-          </InfoRow>
-        )}
-
-        {metadata && metadata.length > 0 && (
-          <InfoRow>
-            {metadata.map((info, index) => (
-              <Text fontSize={200} key={index}>
-                {info}
-              </Text>
-            ))}
-          </InfoRow>
-        )}
-      </StyledCardContent>
-
-      {footer && <CardFooter>{footer}</CardFooter>}
-    </StyledProfileCard>
-  );
-};
-
-export default ProfileCard;
+export {
+  ProfileCardHybrid as ProfileCard,
+  ProfileCardHybrid as default,
+} from "./ProfileCardHybrid";

package/src/ProfileCardHybrid.tsx

@@ -0,0 +1,25 @@
+/**
+ * Hybrid ProfileCard component.
+ * Routes between the Tailwind implementation (preferred) and the
+ * styled-components implementation (for consumers using styled-system props or
+ * a styled() extension).
+ */
+
+import { needsStyledComponents } from "@sproutsocial/seeds-react-system-props";
+import type { TypeProfileCardProps } from "./types";
+import { ProfileCardStyled } from "./ProfileCardStyled";
+import { ProfileCardTailwind } from "./ProfileCardTailwind";
+
+export const ProfileCardHybrid = (props: TypeProfileCardProps) => {
+  // Styled-system props may be passed at the top level or nested inside
+  // cardProps (which the Styled path spreads onto the real styled(Card)). The
+  // Tailwind path can only forward DOM-safe attributes, so route either case to
+  // the styled-components implementation to preserve backward compatibility.
+  if (
+    needsStyledComponents(props) ||
+    (props.cardProps && needsStyledComponents(props.cardProps))
+  ) {
+    return <ProfileCardStyled {...props} />;
+  }
+  return <ProfileCardTailwind {...props} />;
+};

package/src/ProfileCardStyled.tsx

@@ -0,0 +1,188 @@
+import styled from "styled-components";
+import { PartnerLogo } from "@sproutsocial/seeds-react-partner-logo";
+import { Avatar } from "@sproutsocial/seeds-react-avatar";
+import {
+  Card,
+  CardHeader,
+  CardContent,
+  CardFooter,
+} from "@sproutsocial/seeds-react-card";
+import { Icon } from "@sproutsocial/seeds-react-icon";
+import { Link } from "@sproutsocial/seeds-react-link";
+import { Text } from "@sproutsocial/seeds-react-text";
+import type { TypeProfileCardProps } from "./types";
+import { VerifiedProfileIcon } from "./VerifiedProfileIcon";
+
+// Styled Components
+const StyledProfileCard = styled(Card)`
+  max-width: 300px;
+`;
+
+const StyledCardHeader = styled(CardHeader)<{
+  $bannerColor?: string;
+  $partnerName?: string;
+}>`
+  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) => {
+    // Use explicit bannerColor if provided
+    if (props.$bannerColor) {
+      return `background: ${props.$bannerColor};`;
+    }
+    // Fall back to theme.colors.network[partnerName] if partnerName is available
+    if (props.$partnerName && props.theme.colors.network) {
+      const networkColor =
+        props.theme.colors.network[
+          props.$partnerName as keyof typeof props.theme.colors.network
+        ];
+      return networkColor ? `background: ${networkColor};` : "";
+    }
+    return "";
+  }}
+`;
+
+const BannerContent = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+`;
+
+const 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;
+  }
+`;
+
+const 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]};
+`;
+
+const ProfileNameSection = styled.div`
+  display: flex;
+  align-items: center;
+  gap: ${(props) => props.theme.space[200]};
+`;
+
+const InfoRow = styled.div`
+  display: flex;
+  align-items: center;
+  gap: ${(props) => props.theme.space[300]};
+`;
+
+/**
+ * Styled-components implementation of ProfileCard.
+ *
+ * Preserved as the legacy rendering path: the Hybrid routes here when the
+ * component is extended via styled() or receives styled-system props. The
+ * markup is byte-for-byte identical to the pre-migration ProfileCard,
+ * including the dynamic banner background logic.
+ */
+export const ProfileCardStyled = ({
+  partnerName,
+  name,
+  secondaryName,
+  avatarUrl,
+  subtext,
+  description,
+  verificationType,
+  profileUrl,
+  location,
+  bannerColor,
+  bannerContent,
+  metadata,
+  profileActions,
+  footer,
+  cardProps,
+}: TypeProfileCardProps) => {
+  return (
+    <StyledProfileCard role="presentation" {...cardProps}>
+      <StyledCardHeader $bannerColor={bannerColor} $partnerName={partnerName}>
+        <Avatar src={avatarUrl} name={name} size="60px" mt={450} />
+        {bannerContent && <BannerContent>{bannerContent}</BannerContent>}
+      </StyledCardHeader>
+
+      <ActionsSection>{profileActions}</ActionsSection>
+
+      <StyledCardContent>
+        <ProfileNameSection>
+          {partnerName && (
+            <PartnerLogo
+              partnerName={partnerName}
+              aria-label={`${partnerName} profile`}
+              size="small"
+            />
+          )}
+          <Text.SubHeadline as="h2">{name}</Text.SubHeadline>
+        </ProfileNameSection>
+
+        {subtext && (
+          <Text fontSize={200} color="text.subtext">
+            {subtext}
+          </Text>
+        )}
+
+        {secondaryName && (
+          <InfoRow>
+            {profileUrl ? (
+              <Link href={profileUrl} external>
+                <Text fontSize={200}>{secondaryName}</Text>
+                <Icon
+                  name="arrow-right-up-outline"
+                  aria-hidden
+                  ml={100}
+                  size="small"
+                />
+              </Link>
+            ) : (
+              <Text.SmallByline color="text.subtext">
+                {secondaryName}
+              </Text.SmallByline>
+            )}
+            {verificationType && (
+              <VerifiedProfileIcon
+                partnerName={partnerName}
+                verificationType={verificationType}
+              />
+            )}
+          </InfoRow>
+        )}
+
+        {description && <Text fontSize={200}>{description}</Text>}
+
+        {location && (
+          <InfoRow>
+            <Icon name="location-pin-outline" aria-hidden size="small" />
+            <Text fontSize={200}>{location}</Text>
+          </InfoRow>
+        )}
+
+        {metadata && metadata.length > 0 && (
+          <InfoRow>
+            {metadata.map((info, index) => (
+              <Text fontSize={200} key={index}>
+                {info}
+              </Text>
+            ))}
+          </InfoRow>
+        )}
+      </StyledCardContent>
+
+      {footer && <CardFooter>{footer}</CardFooter>}
+    </StyledProfileCard>
+  );
+};

package/src/ProfileCardTailwind.tsx

@@ -0,0 +1,154 @@
+/**
+ * Tailwind/CSS-class implementation of ProfileCard.
+ * Uses Seeds ProfileCard CSS classes from profile-card.css.
+ *
+ * The composed Card/CardHeader/CardContent/CardFooter components are not yet
+ * migrated, so their styling is applied via their className prop. The dynamic
+ * header background (bannerColor / network color) is applied via an inline
+ * style, since no styled-components theme context is available on this path.
+ */
+
+import { PartnerLogo } from "@sproutsocial/seeds-react-partner-logo";
+import { Avatar } from "@sproutsocial/seeds-react-avatar";
+import { Icon } from "@sproutsocial/seeds-react-icon";
+import { Link } from "@sproutsocial/seeds-react-link";
+import { Text } from "@sproutsocial/seeds-react-text";
+import type { TypeCardProps } from "@sproutsocial/seeds-react-card";
+import type { TypeProfileCardProps } from "./types";
+import { VerifiedProfileIcon } from "./VerifiedProfileIcon";
+import { cn } from "./cn";
+
+/**
+ * A flexible profile component that can display user profiles in various formats
+ * across different social networks with consistent styling and behavior.
+ */
+export const ProfileCardTailwind = ({
+  partnerName,
+  name,
+  secondaryName,
+  avatarUrl,
+  subtext,
+  description,
+  verificationType,
+  profileUrl,
+  location,
+  bannerColor,
+  bannerContent,
+  metadata,
+  profileActions,
+  footer,
+  className,
+  cardProps,
+}: TypeProfileCardProps) => {
+  const {
+    className: cardClassName,
+    role: cardRole,
+    ...restCardProps
+  } = cardProps ?? ({} as TypeCardProps);
+  return (
+    <div
+      role={cardRole ?? "presentation"}
+      className={cn("seeds-profile-card", className, cardClassName)}
+      // The Hybrid routes any cardProps carrying styled-system props to the SC
+      // path, so whatever reaches this div is DOM-safe. Narrow the residual
+      // TypeCardProps union (which TS cannot directly reconcile with DOM attrs)
+      // to say so — it cannot leak Card-only props here.
+      {...(restCardProps as unknown as React.HTMLAttributes<HTMLDivElement>)}
+    >
+      <div
+        className="seeds-profile-card-header"
+        style={{
+          ["--seeds-profile-card-banner-bg" as string]:
+            bannerColor ??
+            (partnerName ? `var(--color-network-${partnerName})` : undefined),
+        }}
+      >
+        <Avatar src={avatarUrl} name={name} size="60px" mt={450} />
+        {bannerContent && (
+          <div className="seeds-profile-card-banner-content">
+            {bannerContent}
+          </div>
+        )}
+      </div>
+
+      <div className="seeds-profile-card-actions">{profileActions}</div>
+
+      <div className="seeds-profile-card-content">
+        <div className="seeds-profile-card-name-section">
+          {partnerName && (
+            <PartnerLogo
+              partnerName={partnerName}
+              aria-label={`${partnerName} profile`}
+              size="small"
+            />
+          )}
+          <Text.SubHeadline as="h2">{name}</Text.SubHeadline>
+        </div>
+
+        {subtext && (
+          <Text fontSize={200} color="text.subtext">
+            {subtext}
+          </Text>
+        )}
+
+        {secondaryName && (
+          <div className="seeds-profile-card-info-row">
+            {profileUrl ? (
+              <Link href={profileUrl} external>
+                <Text fontSize={200}>{secondaryName}</Text>
+                <Icon
+                  name="arrow-right-up-outline"
+                  aria-hidden
+                  ml={100}
+                  size="small"
+                />
+              </Link>
+            ) : (
+              <Text.SmallByline color="text.subtext">
+                {secondaryName}
+              </Text.SmallByline>
+            )}
+            {verificationType && (
+              <VerifiedProfileIcon
+                partnerName={partnerName}
+                verificationType={verificationType}
+              />
+            )}
+          </div>
+        )}
+
+        {description && (
+          <Text color="text.subtext" fontSize={200}>
+            {description}
+          </Text>
+        )}
+
+        {location && (
+          <div className="seeds-profile-card-info-row">
+            <Icon
+              color="icon.base"
+              name="location-pin-outline"
+              aria-hidden
+              size="small"
+            />
+            <Text color="text.subtext" fontSize={200}>
+              {location}
+            </Text>
+          </div>
+        )}
+
+        {metadata && metadata.length > 0 && (
+          <div className="seeds-profile-card-info-row">
+            {metadata.map((info, index) => (
+              <Text color="text.subtext" fontSize={200} key={index}>
+                {info}
+              </Text>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {footer && <div className="seeds-profile-card-footer">{footer}</div>}
+    </div>
+  );
+};

package/src/ProfileToken.stories.tsx

@@ -134,6 +134,22 @@ export const TokenVariations: Story = {
   ),
 };
 
+export const TailwindClassOverride: Story = {
+  name: "Tailwind class override",
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+      <ProfileToken name="Default spacing" partnerName="twitter" />
+      {/* Utility classes (p-300, mx-200) override the component CSS,
+          proving the @layer components fix lets Tailwind win the cascade. */}
+      <ProfileToken
+        name="Override Demo"
+        partnerName="twitter"
+        className="p-300 mx-200"
+      />
+    </div>
+  ),
+};
+
 export const LongNamesTruncation: Story = {
   render: () => (
     <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>

package/src/ProfileToken.tsx

@@ -1,40 +1,4 @@
-import styled from "styled-components";
-import { Token } from "@sproutsocial/seeds-react-token";
-import { InlineProfile } from "./InlineProfile";
-import type { ProfileTokenProps } from "./types";
-
-const StyledProfileToken = styled(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;
-`;
-
-/**
- * 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.
- */
-export const ProfileToken = ({
-  className,
-  onClick,
-  tokenProps,
-  ...props
-}: ProfileTokenProps) => (
-  <StyledProfileToken
-    className={className}
-    closeable={false}
-    onClick={onClick}
-    {...tokenProps}
-  >
-    <InlineProfile size="small" {...props} />
-  </StyledProfileToken>
-);
-
-export default ProfileToken;
+export {
+  ProfileTokenHybrid as ProfileToken,
+  ProfileTokenHybrid as default,
+} from "./ProfileTokenHybrid";

package/src/ProfileTokenHybrid.tsx

@@ -0,0 +1,18 @@
+/**
+ * Hybrid ProfileToken component.
+ * Routes between the Tailwind implementation (preferred) and the
+ * styled-components implementation (for consumers using styled-system props or
+ * a styled() extension).
+ */
+
+import { needsStyledComponents } from "@sproutsocial/seeds-react-system-props";
+import type { ProfileTokenProps } from "./types";
+import { ProfileTokenStyled } from "./ProfileTokenStyled";
+import { ProfileTokenTailwind } from "./ProfileTokenTailwind";
+
+export const ProfileTokenHybrid = (props: ProfileTokenProps) => {
+  if (needsStyledComponents(props)) {
+    return <ProfileTokenStyled {...props} />;
+  }
+  return <ProfileTokenTailwind {...props} />;
+};

package/src/ProfileTokenStyled.tsx

@@ -0,0 +1,37 @@
+import styled from "styled-components";
+import { Token } from "@sproutsocial/seeds-react-token";
+import { InlineProfile } from "./InlineProfile";
+import type { ProfileTokenProps } from "./types";
+
+const StyledProfileToken = styled(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;
+`;
+
+/**
+ * Styled-components implementation of ProfileToken.
+ *
+ * Preserved as the legacy rendering path: the Hybrid routes here when the
+ * component is extended via styled() or receives styled-system props. The
+ * markup is byte-for-byte identical to the pre-migration ProfileToken.
+ */
+export const ProfileTokenStyled = ({
+  className,
+  onClick,
+  tokenProps,
+  ...props
+}: ProfileTokenProps) => (
+  <StyledProfileToken
+    className={className}
+    closeable={false}
+    onClick={onClick}
+    {...tokenProps}
+  >
+    <InlineProfile size="small" {...props} />
+  </StyledProfileToken>
+);