@sproutsocial/seeds-react-profile 0.3.36 → 0.3.39

package/dist/inline-profile.css

@@ -0,0 +1,73 @@
+/**
+ * Seeds InlineProfile component classes
+ *
+ * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
+ * CSS variable definitions and dark mode support.
+ */
+
+@layer components {
+  .seeds-inline-profile {
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--space-200);
+    max-width: 100%;
+    font-size: var(--font-size-200);
+    line-height: var(--line-height-200);
+    color: var(--color-text-subtext);
+    text-align: inherit;
+  }
+
+  .seeds-inline-profile-avatar {
+    display: inline-flex;
+    flex-shrink: 0;
+  }
+
+  .seeds-inline-profile-content {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-200);
+    min-width: 0;
+    flex: 1;
+  }
+
+  .seeds-inline-profile-network {
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+  }
+
+  .seeds-inline-profile-text {
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--space-200);
+    min-width: 0;
+    flex: 1;
+  }
+
+  .seeds-inline-profile-name {
+    display: inline-block;
+    font-size: var(--font-size-200);
+    line-height: var(--line-height-200);
+    font-family: var(--font-family);
+    font-weight: var(--font-weight-semibold);
+    color: var(--color-text-body);
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .seeds-inline-profile-handle {
+    display: inline-block;
+    font-size: var(--font-size-200);
+    line-height: var(--line-height-200);
+    font-family: var(--font-family);
+    color: var(--color-text-subtext);
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}

package/dist/profile-card.css

@@ -0,0 +1,74 @@
+/**
+ * Seeds ProfileCard component classes
+ *
+ * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
+ * CSS variable definitions and dark mode support.
+ *
+ * The header background color is dynamic (consumer bannerColor or the network
+ * color for the partner) and is supplied via the
+ * --seeds-profile-card-banner-bg custom property set as an inline style on the
+ * header element; the background declaration below consumes it.
+ */
+
+@layer components {
+  .seeds-profile-card {
+    max-width: 300px;
+    border-radius: var(--radius-500);
+    background-color: var(--color-container-bg-base);
+    border: 1px solid var(--color-container-border-base);
+  }
+
+  .seeds-profile-card-header {
+    display: flex;
+    flex-direction: row;
+    position: relative;
+    height: 80px;
+    padding: var(--space-400) var(--space-400) 0 var(--space-400);
+    margin-bottom: 0;
+    color: var(--color-text-inverse);
+    background: var(--seeds-profile-card-banner-bg, transparent);
+    border-radius: var(--radius-500) var(--radius-500) 0 0;
+  }
+
+  .seeds-profile-card-footer {
+    border-top: 1px solid var(--color-container-border-base);
+    border-radius: 0 0 var(--radius-500) var(--radius-500);
+    padding: var(--space-400);
+  }
+
+  .seeds-profile-card-banner-content {
+    display: flex;
+    justify-content: flex-end;
+    width: 100%;
+  }
+
+  .seeds-profile-card-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--space-100);
+    padding: 0 var(--space-300);
+  }
+
+  .seeds-profile-card-actions:empty {
+    min-height: 44px;
+  }
+
+  .seeds-profile-card-content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-300);
+    padding: 0 var(--space-400) var(--space-400);
+  }
+
+  .seeds-profile-card-name-section {
+    display: flex;
+    align-items: center;
+    gap: var(--space-200);
+  }
+
+  .seeds-profile-card-info-row {
+    display: flex;
+    align-items: center;
+    gap: var(--space-300);
+  }
+}

package/dist/profile-token.css

@@ -0,0 +1,23 @@
+/**
+ * Seeds ProfileToken component classes
+ *
+ * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
+ * CSS variable definitions and dark mode support.
+ */
+
+@layer components {
+  /*
+   * The rendered element carries both .seeds-token (from Token) and
+   * .seeds-profile-token at equal specificity, so the tighter profile padding
+   * would otherwise depend on CSS concatenation order. The compound selector
+   * raises specificity so this override deterministically wins over .seeds-token.
+   */
+  .seeds-token.seeds-profile-token {
+    box-sizing: border-box;
+    display: inline-flex;
+    max-width: 100%;
+    vertical-align: middle;
+    padding: var(--space-100) var(--space-200);
+    margin: var(--space-100) 0;
+  }
+}

package/package.json

@@ -1,15 +1,25 @@
 {
   "name": "@sproutsocial/seeds-react-profile",
-  "version": "0.3.36",
+  "version": "0.3.39",
   "description": "Seeds React Profile",
   "author": "Sprout Social, Inc.",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/esm/index.js",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./dist/inline-profile.css": "./dist/inline-profile.css",
+    "./dist/profile-card.css": "./dist/profile-card.css",
+    "./dist/profile-token.css": "./dist/profile-token.css"
+  },
   "scripts": {
-    "build": "tsup --dts",
-    "build:debug": "tsup --dts --metafile",
+    "build": "tsup --dts && cp src/*.css dist/",
+    "build:debug": "tsup --dts --metafile && cp src/*.css dist/",
     "dev": "tsup --watch --dts",
     "clean": "rm -rf .turbo dist",
     "clean:modules": "rm -rf node_modules",
@@ -20,13 +30,14 @@
     "lint:fix": "eslint --fix"
   },
   "dependencies": {
-    "@sproutsocial/seeds-react-avatar": "^1.1.18",
-    "@sproutsocial/seeds-react-card": "^1.1.43",
-    "@sproutsocial/seeds-react-icon": "^2.4.1",
-    "@sproutsocial/seeds-react-link": "^1.1.14",
-    "@sproutsocial/seeds-react-partner-logo": "^1.7.14",
-    "@sproutsocial/seeds-react-text": "^1.5.0",
-    "@sproutsocial/seeds-react-token": "^1.5.8"
+    "@sproutsocial/seeds-react-avatar": "^1.1.20",
+    "@sproutsocial/seeds-react-card": "^1.1.45",
+    "@sproutsocial/seeds-react-icon": "^2.4.3",
+    "@sproutsocial/seeds-react-link": "^1.1.16",
+    "@sproutsocial/seeds-react-partner-logo": "^1.7.16",
+    "@sproutsocial/seeds-react-system-props": "^3.1.2",
+    "@sproutsocial/seeds-react-text": "^1.5.1",
+    "@sproutsocial/seeds-react-token": "^1.5.10"
   },
   "devDependencies": {
     "@types/react": "^18.0.0",

package/src/InlineProfile.stories.tsx

@@ -153,6 +153,33 @@ export const LongNamesTruncation: Story = {
   ),
 };
 
+export const TailwindClassOverride: Story = {
+  name: "Tailwind class override",
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+      <div style={{ border: "1px dashed #ccc" }}>
+        <InlineProfile
+          name="Default spacing"
+          secondaryName="@default"
+          avatarUrl={avatarUrl}
+          partnerName="twitter"
+        />
+      </div>
+      <div style={{ border: "1px dashed #ccc" }}>
+        {/* Utility classes (p-300, mx-200) override the component CSS,
+            proving the @layer components fix lets Tailwind win the cascade. */}
+        <InlineProfile
+          name="Override Demo"
+          secondaryName="@override"
+          avatarUrl={avatarUrl}
+          partnerName="twitter"
+          className="p-300 mx-200"
+        />
+      </div>
+    </div>
+  ),
+};
+
 export const WithoutAvatarUrl: Story = {
   args: {
     name: "John Doe",

package/src/InlineProfile.tsx

@@ -1,153 +1 @@
-import styled from "styled-components";
-import { PartnerLogo } from "@sproutsocial/seeds-react-partner-logo";
-import { Avatar } from "@sproutsocial/seeds-react-avatar";
-import type { TypeInlineProfileProps } from "./types";
-import { VerifiedProfileIcon } from "./VerifiedProfileIcon";
-
-const InlineProfileContainer = styled.span<{
-  $size?: "small" | "medium" | "large";
-}>`
-  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;
-`;
-
-const InlineProfileAvatar = styled.span`
-  display: inline-flex;
-  flex-shrink: 0;
-`;
-
-const InlineProfileContent = styled.span`
-  display: inline-flex;
-  align-items: center;
-  gap: ${(props) => props.theme.space[200]};
-  min-width: 0;
-  flex: 1;
-`;
-
-const InlineProfileNetwork = styled.span`
-  display: inline-flex;
-  align-items: center;
-  flex-shrink: 0;
-`;
-
-const InlineProfileText = styled.span`
-  display: inline-flex;
-  flex-direction: row;
-  align-items: center;
-  gap: ${(props) => props.theme.space[200]};
-  min-width: 0;
-  flex: 1;
-`;
-
-const InlineProfileName = styled.span`
-  display: inline-block;
-  ${(props) => props.theme.typography[200]}
-  font-family: ${(props) => props.theme.fontFamily};
-  font-weight: ${(props) => props.theme.fontWeights.semibold};
-  color: ${(props) => props.theme.colors.text.body};
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`;
-
-const InlineProfileHandle = styled.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;
-`;
-
-const avatarSizeMap = {
-  small: "16px",
-  medium: "20px",
-  large: "24px",
-} as const;
-
-/**
- * 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
- * @param props.secondaryName - Secondary name of the profile
- * @param props.partnerName - Partner logo name
- * @param props.partnerLogoLabel - Aria-label for the partner logo
- * @param props.avatarSize - Size of 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
- *
- * @example
- * <InlineProfile
- *   name="John Doe"
- *   secondaryName="johndoe123"
- *   partnerName="facebook"
- *   partnerLogoLabel="Facebook Logo"
- *   avatarSize="24px"
- *   avatarUrl="https://example.com/avatar.jpg"
- * >
- *   <Badge text="Moderator" badgeColor="green" />
- * </InlineProfile>
- */
-export const InlineProfile = ({
-  name,
-  secondaryName,
-  partnerName,
-  partnerLogoLabel,
-  size = "medium",
-  avatarSize: avatarSizeOverride,
-  avatarUrl,
-  verificationType,
-  className,
-}: TypeInlineProfileProps) => {
-  const displayName = name || secondaryName || "Unknown Profile";
-  const avatarSize = avatarSizeOverride || avatarSizeMap[size];
-
-  return (
-    <InlineProfileContainer className={className} $size={size}>
-      {avatarUrl && (
-        <InlineProfileAvatar>
-          <Avatar src={avatarUrl} name={displayName} size={avatarSize} />
-        </InlineProfileAvatar>
-      )}
-
-      <InlineProfileContent>
-        {partnerName && (
-          <InlineProfileNetwork>
-            <PartnerLogo
-              partnerName={partnerName}
-              aria-label={partnerLogoLabel || `${partnerName} profile`}
-              size="small"
-            />
-          </InlineProfileNetwork>
-        )}
-
-        <InlineProfileText>
-          {name && <InlineProfileName>{name}</InlineProfileName>}
-
-          {secondaryName && (
-            <InlineProfileHandle>{secondaryName}</InlineProfileHandle>
-          )}
-        </InlineProfileText>
-
-        {verificationType && (
-          <VerifiedProfileIcon
-            partnerName={partnerName}
-            verificationType={verificationType}
-          />
-        )}
-      </InlineProfileContent>
-    </InlineProfileContainer>
-  );
-};
+export { InlineProfileHybrid as InlineProfile } from "./InlineProfileHybrid";

package/src/InlineProfileHybrid.tsx

@@ -0,0 +1,18 @@
+/**
+ * Hybrid InlineProfile 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 { TypeInlineProfileProps } from "./types";
+import { InlineProfileStyled } from "./InlineProfileStyled";
+import { InlineProfileTailwind } from "./InlineProfileTailwind";
+
+export const InlineProfileHybrid = (props: TypeInlineProfileProps) => {
+  if (needsStyledComponents(props)) {
+    return <InlineProfileStyled {...props} />;
+  }
+  return <InlineProfileTailwind {...props} />;
+};

package/src/InlineProfileStyled.tsx

@@ -0,0 +1,143 @@
+import styled from "styled-components";
+import { PartnerLogo } from "@sproutsocial/seeds-react-partner-logo";
+import { Avatar } from "@sproutsocial/seeds-react-avatar";
+import type { TypeInlineProfileProps } from "./types";
+import { VerifiedProfileIcon } from "./VerifiedProfileIcon";
+
+const InlineProfileContainer = styled.span<{
+  $size?: "small" | "medium" | "large";
+}>`
+  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;
+`;
+
+const InlineProfileAvatar = styled.span`
+  display: inline-flex;
+  flex-shrink: 0;
+`;
+
+const InlineProfileContent = styled.span`
+  display: inline-flex;
+  align-items: center;
+  gap: ${(props) => props.theme.space[200]};
+  min-width: 0;
+  flex: 1;
+`;
+
+const InlineProfileNetwork = styled.span`
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+`;
+
+const InlineProfileText = styled.span`
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  gap: ${(props) => props.theme.space[200]};
+  min-width: 0;
+  flex: 1;
+`;
+
+const InlineProfileName = styled.span`
+  display: inline-block;
+  ${(props) => props.theme.typography[200]}
+  font-family: ${(props) => props.theme.fontFamily};
+  font-weight: ${(props) => props.theme.fontWeights.semibold};
+  color: ${(props) => props.theme.colors.text.body};
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+const InlineProfileHandle = styled.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;
+`;
+
+const avatarSizeMap = {
+  small: "16px",
+  medium: "20px",
+  large: "24px",
+} as const;
+
+/**
+ * Styled-components implementation of InlineProfile.
+ *
+ * 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 InlineProfile.
+ *
+ * @param props - Profile props
+ * @param props.name - Name of the profile
+ * @param props.secondaryName - Secondary name of the profile
+ * @param props.partnerName - Partner logo name
+ * @param props.partnerLogoLabel - Aria-label for the partner logo
+ * @param props.avatarSize - Size of the avatar
+ * @param props.avatarUrl - Image URL for the avatar
+ * @returns JSX.Element representing a user profile
+ */
+export const InlineProfileStyled = ({
+  name,
+  secondaryName,
+  partnerName,
+  partnerLogoLabel,
+  size = "medium",
+  avatarSize: avatarSizeOverride,
+  avatarUrl,
+  verificationType,
+  className,
+}: TypeInlineProfileProps) => {
+  const displayName = name || secondaryName || "Unknown Profile";
+  const avatarSize = avatarSizeOverride || avatarSizeMap[size];
+
+  return (
+    <InlineProfileContainer className={className} $size={size}>
+      {avatarUrl && (
+        <InlineProfileAvatar>
+          <Avatar src={avatarUrl} name={displayName} size={avatarSize} />
+        </InlineProfileAvatar>
+      )}
+
+      <InlineProfileContent>
+        {partnerName && (
+          <InlineProfileNetwork>
+            <PartnerLogo
+              partnerName={partnerName}
+              aria-label={partnerLogoLabel || `${partnerName} profile`}
+              size="small"
+            />
+          </InlineProfileNetwork>
+        )}
+
+        <InlineProfileText>
+          {name && <InlineProfileName>{name}</InlineProfileName>}
+
+          {secondaryName && (
+            <InlineProfileHandle>{secondaryName}</InlineProfileHandle>
+          )}
+        </InlineProfileText>
+
+        {verificationType && (
+          <VerifiedProfileIcon
+            partnerName={partnerName}
+            verificationType={verificationType}
+          />
+        )}
+      </InlineProfileContent>
+    </InlineProfileContainer>
+  );
+};

package/src/InlineProfileTailwind.tsx

@@ -0,0 +1,81 @@
+/**
+ * Tailwind/CSS-class implementation of InlineProfile.
+ * Uses Seeds InlineProfile CSS classes from inline-profile.css.
+ */
+
+import { PartnerLogo } from "@sproutsocial/seeds-react-partner-logo";
+import { Avatar } from "@sproutsocial/seeds-react-avatar";
+import type { TypeInlineProfileProps } from "./types";
+import { VerifiedProfileIcon } from "./VerifiedProfileIcon";
+import { cn } from "./cn";
+
+const avatarSizeMap = {
+  small: "16px",
+  medium: "20px",
+  large: "24px",
+} as const;
+
+/**
+ * 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
+ * @param props.secondaryName - Secondary name of the profile
+ * @param props.partnerName - Partner logo name
+ * @param props.partnerLogoLabel - Aria-label for the partner logo
+ * @param props.avatarSize - Size of the avatar
+ * @param props.avatarUrl - Image URL for the avatar
+ * @returns JSX.Element representing a user profile
+ */
+export const InlineProfileTailwind = ({
+  name,
+  secondaryName,
+  partnerName,
+  partnerLogoLabel,
+  size = "medium",
+  avatarSize: avatarSizeOverride,
+  avatarUrl,
+  verificationType,
+  className,
+}: TypeInlineProfileProps) => {
+  const displayName = name || secondaryName || "Unknown Profile";
+  const avatarSize = avatarSizeOverride || avatarSizeMap[size];
+
+  return (
+    <span className={cn("seeds-inline-profile", className)}>
+      {avatarUrl && (
+        <span className="seeds-inline-profile-avatar">
+          <Avatar src={avatarUrl} name={displayName} size={avatarSize} />
+        </span>
+      )}
+
+      <span className="seeds-inline-profile-content">
+        {partnerName && (
+          <span className="seeds-inline-profile-network">
+            <PartnerLogo
+              partnerName={partnerName}
+              aria-label={partnerLogoLabel || `${partnerName} profile`}
+              size="small"
+            />
+          </span>
+        )}
+
+        <span className="seeds-inline-profile-text">
+          {name && <span className="seeds-inline-profile-name">{name}</span>}
+
+          {secondaryName && (
+            <span className="seeds-inline-profile-handle">{secondaryName}</span>
+          )}
+        </span>
+
+        {verificationType && (
+          <VerifiedProfileIcon
+            partnerName={partnerName}
+            verificationType={verificationType}
+          />
+        )}
+      </span>
+    </span>
+  );
+};

package/src/ProfileCard.stories.tsx

@@ -238,6 +238,33 @@ export const DifferentNetworks: Story = {
   ),
 };
 
+export const TailwindClassOverride: Story = {
+  name: "Tailwind class override",
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+      <ProfileCard
+        name="Default spacing"
+        secondaryName="@default"
+        partnerName="twitter"
+        avatarUrl="https://via.placeholder.com/60"
+        description="Default card spacing."
+      />
+      {/* The bare className prop is not forwarded to the card root, so the
+          override goes through cardProps. Utility classes (p-300, mx-200)
+          override the component CSS, proving the @layer components fix lets
+          Tailwind win the cascade. */}
+      <ProfileCard
+        name="Override Demo"
+        secondaryName="@override"
+        partnerName="twitter"
+        avatarUrl="https://via.placeholder.com/60"
+        description="Card with Tailwind utility overrides."
+        cardProps={{ role: "presentation", className: "p-300 mx-200" }}
+      />
+    </div>
+  ),
+};
+
 export const LongContentTruncation: Story = {
   render: () => (
     <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>