@sproutsocial/seeds-react-profile 0.1.3

package/.eslintignore

@@ -0,0 +1,6 @@
+# Node modules
+node_modules/
+
+# Build output
+dist/
+coverage/

package/.eslintrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: ["eslint-config-seeds/react"],
+};

package/.turbo/turbo-build.log

@@ -0,0 +1,21 @@
+yarn run v1.22.22
+$ tsup --dts
+CLI Building entry: src/index.ts
+CLI Using tsconfig: tsconfig.json
+CLI tsup v8.5.0
+CLI Using tsup config: /home/runner/work/seeds/seeds/seeds-react/seeds-react-profile/tsup.config.ts
+CLI Target: es2022
+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
+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.

package/CHANGELOG.md

@@ -0,0 +1,32 @@
+# @sproutsocial/seeds-react-profile
+
+## 0.1.3
+
+### Patch Changes
+
+- Updated dependencies [2b1bb50]
+  - @sproutsocial/seeds-react-card@1.1.13
+
+## 0.1.2
+
+### Patch Changes
+
+- Updated dependencies [119f4b5]
+  - @sproutsocial/seeds-react-avatar@1.0.8
+
+## 0.1.1
+
+### Patch Changes
+
+- Updated dependencies [d021ffc]
+  - @sproutsocial/seeds-react-partner-logo@1.5.0
+  - @sproutsocial/seeds-react-card@1.1.12
+  - @sproutsocial/seeds-react-token@1.4.9
+  - @sproutsocial/seeds-react-avatar@1.0.7
+  - @sproutsocial/seeds-react-icon@2.0.4
+
+## 0.1.0
+
+### Minor Changes
+
+- ecf1622: Add new seeds-react-profile package with InlineProfile and ProfileToken components.

package/dist/esm/index.js

@@ -0,0 +1,57 @@
+// src/InlineProfile.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`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  max-width: 100%;
+`;
+var InlineProfileBody = styled.span`
+  display: flex;
+  align-items: center;
+  margin-left: 8px;
+`;
+var InlineProfile = ({
+  name,
+  secondaryName,
+  partnerName,
+  partnerLogoLabel,
+  avatarSize = "22px",
+  img,
+  children
+}) => {
+  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 })
+  ] });
+};
+
+// src/ProfileToken.tsx
+import "react";
+import { Token } from "@sproutsocial/seeds-react-token";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var ProfileToken = ({
+  tokenProps,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx2(Token, { className, closeable: false, ...tokenProps, children: /* @__PURE__ */ jsx2(InlineProfile, { ...props }) });
+export {
+  InlineProfile,
+  ProfileToken
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +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"]}

package/dist/index.d.mts

@@ -0,0 +1,61 @@
+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';
+
+/**
+ * Profile Component Types
+ *
+ * This file contains TypeScript interfaces and types for the Profile component
+ * that can be used by backend services to render user profile data.
+ */
+
+interface TypeInlineProfileProps {
+    name: string;
+    secondaryName?: string;
+    avatarSize?: string;
+    partnerName?: EnumLogoNamesWithoutVariants;
+    partnerLogoLabel?: string;
+    img?: string;
+    children?: React.ReactNode | React.ReactNode[];
+}
+interface ProfileTokenProps extends TypeInlineProfileProps {
+    /** Additional CSS class name */
+    className?: string;
+    /** Additional props to pass to the Token component */
+    tokenProps?: Omit<React.ComponentProps<typeof Token>, "children">;
+}
+
+/**
+ *
+ * @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.img - 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"
+ *   img="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;
+
+/**
+ * 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>;
+
+export { InlineProfile, ProfileToken, type ProfileTokenProps, type TypeInlineProfileProps };

package/dist/index.d.ts

@@ -0,0 +1,61 @@
+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';
+
+/**
+ * Profile Component Types
+ *
+ * This file contains TypeScript interfaces and types for the Profile component
+ * that can be used by backend services to render user profile data.
+ */
+
+interface TypeInlineProfileProps {
+    name: string;
+    secondaryName?: string;
+    avatarSize?: string;
+    partnerName?: EnumLogoNamesWithoutVariants;
+    partnerLogoLabel?: string;
+    img?: string;
+    children?: React.ReactNode | React.ReactNode[];
+}
+interface ProfileTokenProps extends TypeInlineProfileProps {
+    /** Additional CSS class name */
+    className?: string;
+    /** Additional props to pass to the Token component */
+    tokenProps?: Omit<React.ComponentProps<typeof Token>, "children">;
+}
+
+/**
+ *
+ * @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.img - 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"
+ *   img="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;
+
+/**
+ * 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>;
+
+export { InlineProfile, ProfileToken, type ProfileTokenProps, type TypeInlineProfileProps };

package/dist/index.js

@@ -0,0 +1,95 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  InlineProfile: () => InlineProfile,
+  ProfileToken: () => ProfileToken
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/InlineProfile.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_jsx_runtime = require("react/jsx-runtime");
+var InlineProfileContainer = import_styled_components.default.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  max-width: 100%;
+`;
+var InlineProfileBody = import_styled_components.default.span`
+  display: flex;
+  align-items: center;
+  margin-left: 8px;
+`;
+var InlineProfile = ({
+  name,
+  secondaryName,
+  partnerName,
+  partnerLogoLabel,
+  avatarSize = "22px",
+  img,
+  children
+}) => {
+  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 })
+  ] });
+};
+
+// src/ProfileToken.tsx
+var import_react = require("react");
+var import_seeds_react_token = require("@sproutsocial/seeds-react-token");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var ProfileToken = ({
+  tokenProps,
+  className,
+  ...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 }) });
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  InlineProfile,
+  ProfileToken
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +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"]}

package/jest.config.js

@@ -0,0 +1,9 @@
+const baseConfig = require("@sproutsocial/seeds-testing");
+
+/** * @type {import('jest').Config} */
+const config = {
+  ...baseConfig,
+  displayName: "seeds-react-profile",
+};
+
+module.exports = config;

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@sproutsocial/seeds-react-profile",
+  "version": "0.1.3",
+  "description": "Seeds React Profile",
+  "author": "Sprout Social, Inc.",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsup --dts",
+    "build:debug": "tsup --dts --metafile",
+    "dev": "tsup --watch --dts",
+    "clean": "rm -rf .turbo dist",
+    "clean:modules": "rm -rf node_modules",
+    "typecheck": "tsc --noEmit",
+    "test": "jest",
+    "test:watch": "jest --watch --coverage=false",
+    "lint": "eslint . --ext .ts,.tsx",
+    "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": "*"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/styled-components": "^5.1.26",
+    "@sproutsocial/eslint-config-seeds": "*",
+    "react": "^18.0.0",
+    "styled-components": "^5.2.3",
+    "tsup": "^8.3.4",
+    "typescript": "^5.6.2",
+    "@sproutsocial/seeds-tsconfig": "*",
+    "@sproutsocial/seeds-testing": "*",
+    "@sproutsocial/seeds-react-testing-library": "*"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "styled-components": "^5.2.3"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}

package/src/InlineProfile.stories.tsx

@@ -0,0 +1,95 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { InlineProfile } from "./InlineProfile";
+import { Icon } from "@sproutsocial/seeds-react-icon";
+
+const avatarUrl =
+  "https://d672eyudr6aq1.cloudfront.net/avatar/cede1373e17c05542b1cc60f427067f2?s=30&d=404";
+
+const VerificationBadge = () => (
+  <Icon name="check-solid" style={{ color: "#1da1f2" }} />
+);
+
+const meta: Meta<typeof InlineProfile> = {
+  title: "Components/Profile/InlineProfile",
+  component: InlineProfile,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    name: "John Doe",
+    secondaryName: "@johndoe",
+    img: avatarUrl,
+  },
+};
+
+export const WithVerification: Story = {
+  args: {
+    name: "Elon Musk",
+    secondaryName: "@elonmusk",
+    img: avatarUrl,
+    children: <VerificationBadge />,
+  },
+};
+
+export const WithPartnerLogo: Story = {
+  args: {
+    name: "meta",
+    secondaryName: "/meta",
+    img: avatarUrl,
+    partnerName: "facebook",
+  },
+};
+
+export const Small: Story = {
+  args: {
+    name: "small profile",
+    secondaryName: "@small",
+  },
+};
+
+export const Large: Story = {
+  args: {
+    name: "large profile",
+    secondaryName: "@large",
+    avatarSize: "32px",
+  },
+};
+
+export const DifferentNetworks: Story = {
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+      <InlineProfile
+        name="twitter user"
+        secondaryName="@twitteruser"
+        img={avatarUrl}
+        partnerName="twitter"
+      />
+      <InlineProfile
+        name="facebook user"
+        secondaryName="/facebookuser"
+        img={avatarUrl}
+        partnerName="facebook"
+      />
+      <InlineProfile
+        name="instagram user"
+        secondaryName="@instagramuser"
+        img={avatarUrl}
+        partnerName="instagram"
+      />
+      <InlineProfile
+        name="linkedin user"
+        secondaryName="linkedinuser"
+        img={avatarUrl}
+        partnerName="linkedin"
+      />
+    </div>
+  ),
+};

package/src/InlineProfile.tsx

@@ -0,0 +1,75 @@
+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 type { TypeInlineProfileProps } from "./types";
+
+const InlineProfileContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  max-width: 100%;
+`;
+
+const InlineProfileBody = styled.span`
+  display: flex;
+  align-items: center;
+  margin-left: 8px;
+`;
+
+/**
+ *
+ * @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.img - 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"
+ *   img="https://example.com/avatar.jpg"
+ * >
+ *   <Badge text="Moderator" badgeColor="green" />
+ * </InlineProfile>
+ */
+export const InlineProfile = ({
+  name,
+  secondaryName,
+  partnerName,
+  partnerLogoLabel,
+  avatarSize = "22px",
+  img,
+  children,
+}: TypeInlineProfileProps) => {
+  return (
+    <InlineProfileContainer>
+      <Avatar size={avatarSize} src={img} name={name} />
+      {partnerName && (
+        <PartnerLogo
+          size="small"
+          partnerName={partnerName}
+          ml={300}
+          aria-label={partnerLogoLabel}
+        />
+      )}
+      <Text fontSize={200} fontWeight="semibold" ml={300} truncated={true}>
+        {name}
+      </Text>
+      {secondaryName && (
+        <Text fontSize={200} ml={300} fontWeight="normal" truncated={true}>
+          {secondaryName}
+        </Text>
+      )}
+      <InlineProfileBody>{children}</InlineProfileBody>
+    </InlineProfileContainer>
+  );
+};

package/src/ProfileToken.stories.tsx

@@ -0,0 +1,202 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { ProfileToken } from "./ProfileToken";
+import { Icon } from "@sproutsocial/seeds-react-icon";
+
+const avatarUrl =
+  "https://d672eyudr6aq1.cloudfront.net/avatar/cede1373e17c05542b1cc60f427067f2?s=30&d=404";
+
+const VerificationBadge = () => (
+  <Icon name="check-solid" style={{ color: "#1da1f2" }} />
+);
+
+const meta: Meta<typeof ProfileToken> = {
+  title: "Components/Profile/ProfileToken",
+  component: ProfileToken,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {},
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    name: "John Doe",
+    secondaryName: "@johndoe",
+    img: avatarUrl,
+    partnerName: "twitter",
+  },
+};
+
+export const WithVerification: Story = {
+  args: {
+    name: "Elon Musk",
+    secondaryName: "@elonmusk",
+    img: avatarUrl,
+    partnerName: "twitter",
+    children: <VerificationBadge />,
+  },
+};
+
+export const FacebookUser: Story = {
+  args: {
+    name: "Facebook User",
+    secondaryName: "/facebookuser",
+    img: avatarUrl,
+    partnerName: "facebook",
+  },
+};
+
+export const InstagramUser: Story = {
+  args: {
+    name: "Instagram User",
+    secondaryName: "@instagramuser",
+    img: avatarUrl,
+    partnerName: "instagram",
+  },
+};
+
+export const LinkedInUser: Story = {
+  args: {
+    name: "LinkedIn User",
+    secondaryName: "linkedinuser",
+    img: avatarUrl,
+    partnerName: "linkedin",
+  },
+};
+
+export const YouTubeUser: Story = {
+  args: {
+    name: "YouTube Creator",
+    secondaryName: "@youtubecreator",
+    img: avatarUrl,
+    partnerName: "youtube",
+  },
+};
+
+export const TikTokUser: Story = {
+  args: {
+    name: "TikTok Creator",
+    secondaryName: "@tiktokcreator",
+    img: avatarUrl,
+    partnerName: "tiktok",
+  },
+};
+
+export const ThreadsUser: Story = {
+  args: {
+    name: "Threads User",
+    secondaryName: "@threadsuser",
+    img: avatarUrl,
+    partnerName: "threads",
+  },
+};
+
+export const BlueskyUser: Story = {
+  args: {
+    name: "Bluesky User",
+    secondaryName: "@blueskyuser",
+    img: avatarUrl,
+    partnerName: "bluesky",
+  },
+};
+
+export const WithoutAvatar: Story = {
+  args: {
+    name: "No Avatar User",
+    secondaryName: "@noavat,ar",
+    partnerName: "twitter",
+  },
+};
+
+export const DifferentNetworks: Story = {
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+      <ProfileToken
+        name="Twitter User"
+        secondaryName="@twitteruser"
+        img={avatarUrl}
+        partnerName="twitter"
+      />
+      <ProfileToken
+        name="Facebook User"
+        secondaryName="/facebookuser"
+        img={avatarUrl}
+        partnerName="facebook"
+      />
+      <ProfileToken
+        name="Instagram User"
+        secondaryName="@instagramuser"
+        img={avatarUrl}
+        partnerName="instagram"
+      />
+      <ProfileToken
+        name="LinkedIn User"
+        secondaryName="linkedinuser"
+        img={avatarUrl}
+        partnerName="linkedin"
+      />
+      <ProfileToken
+        name="YouTube Creator"
+        secondaryName="@youtubecreator"
+        img={avatarUrl}
+        partnerName="youtube"
+      />
+      <ProfileToken
+        name="TikTok Creator"
+        secondaryName="@tiktokcreator"
+        img={avatarUrl}
+        partnerName="tiktok"
+      />
+    </div>
+  ),
+};
+
+export const TokenVariations: Story = {
+  render: () => (
+    <div style={{ display: "flex", flexWrap: "wrap", gap: "8px" }}>
+      <ProfileToken
+        name="Verified User"
+        secondaryName="@verified"
+        img={avatarUrl}
+        partnerName="twitter"
+      >
+        <VerificationBadge />
+      </ProfileToken>
+      <ProfileToken
+        name="Regular User"
+        secondaryName="@regular"
+        img={avatarUrl}
+        partnerName="twitter"
+      />
+      <ProfileToken
+        name="Facebook User"
+        secondaryName="/facebookuser"
+        img={avatarUrl}
+        partnerName="facebook"
+      />
+      <ProfileToken
+        name="Instagram User"
+        secondaryName="@instagramuser"
+        img={avatarUrl}
+        partnerName="instagram"
+      />
+      <ProfileToken
+        name="LinkedIn User"
+        secondaryName="linkedinuser"
+        img={avatarUrl}
+        partnerName="linkedin"
+      />
+      <ProfileToken
+        name="YouTube Creator"
+        secondaryName="@youtubecreator"
+        img={avatarUrl}
+        partnerName="youtube"
+      />
+    </div>
+  ),
+};

package/src/ProfileToken.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { Token } from "@sproutsocial/seeds-react-token";
+import { InlineProfile } from "./InlineProfile";
+import type { ProfileTokenProps } from "./types";
+
+/**
+ * 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.
+ */
+export const ProfileToken: React.FC<ProfileTokenProps> = ({
+  tokenProps,
+  className,
+  ...props
+}) => (
+  <Token className={className} closeable={false} {...tokenProps}>
+    <InlineProfile {...props} />
+  </Token>
+);
+
+export default ProfileToken;

package/src/__tests__/InlineProfile.test.tsx

@@ -0,0 +1,83 @@
+import React from "react";
+import { render, screen } from "@sproutsocial/seeds-react-testing-library";
+import { InlineProfile } from "../InlineProfile";
+
+describe("InlineProfile", () => {
+  it("renders with name and handle", () => {
+    render(
+      <InlineProfile
+        name="John Doe"
+        secondaryName="@johndoe"
+        partnerName="twitter"
+        img="https://example.com/avatar.jpg"
+      />
+    );
+
+    expect(screen.getByText("John Doe")).toBeInTheDocument();
+    expect(screen.getByText("@johndoe")).toBeInTheDocument();
+  });
+
+  it("renders with children", () => {
+    render(
+      <InlineProfile
+        name="John Doe"
+        secondaryName="@johndoe"
+        partnerName="twitter"
+        img="https://example.com/avatar.jpg"
+      >
+        Children
+      </InlineProfile>
+    );
+
+    expect(screen.getByText("Children")).toBeInTheDocument();
+  });
+
+  it("renders network logo", () => {
+    render(
+      <InlineProfile
+        name="John Doe"
+        secondaryName="@johndoe"
+        partnerName="twitter"
+        partnerLogoLabel="Twitter Logo"
+        img="https://example.com/avatar.jpg"
+      />
+    );
+
+    expect(screen.getByDataQaLabel({ logo: "twitter" })).toBeInTheDocument();
+    expect(screen.getByLabelText("Twitter Logo")).toBeInTheDocument();
+  });
+
+  it("renders without network logo when partnerName is not provided", () => {
+    render(
+      <InlineProfile
+        name="John Doe"
+        secondaryName="@johndoe"
+        img="https://example.com/avatar.jpg"
+      />
+    );
+
+    expect(
+      screen.queryByDataQaLabel({ logo: "twitter" })
+    ).not.toBeInTheDocument();
+  });
+
+  it("renders without secondaryName when not provided", () => {
+    render(
+      <InlineProfile
+        name="John Doe"
+        partnerName="twitter"
+        img="https://example.com/avatar.jpg"
+      />
+    );
+
+    expect(screen.getByText("John Doe")).toBeInTheDocument();
+    expect(screen.queryByText(/@/)).not.toBeInTheDocument();
+  });
+
+  it("renders avatar with name fallback when img prop is not provided", () => {
+    render(<InlineProfile name="John Doe" />);
+
+    const avatar = screen.getByText("JD");
+    expect(avatar).toBeInTheDocument();
+  });
+});

package/src/__tests__/ProfileToken.test.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import { render, screen } from "@sproutsocial/seeds-react-testing-library";
+import { ProfileToken } from "../ProfileToken";
+
+describe("ProfileToken", () => {
+  const mockProfileData = {
+    name: "John Doe",
+    secondaryName: "@johndoe",
+    partnerName: "twitter" as const,
+    img: "https://example.com/avatar.jpg",
+  };
+
+  it("renders profile information in token format", () => {
+    render(<ProfileToken {...mockProfileData} />);
+
+    expect(screen.getByText("John Doe")).toBeInTheDocument();
+    expect(screen.getByText("@johndoe")).toBeInTheDocument();
+  });
+
+  it("applies custom className", () => {
+    const { container } = render(
+      <ProfileToken {...mockProfileData} className="custom-token" />
+    );
+
+    // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+    expect(container.firstChild).toHaveClass("custom-token");
+  });
+
+  it("renders without close button", () => {
+    const { container } = render(<ProfileToken {...mockProfileData} />);
+
+    // Check that no close button elements are present
+    // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+    const closeButtons = container.querySelectorAll(
+      '.token-close, .close-button, [data-close], button[aria-label*="close"], button[aria-label*="remove"]'
+    );
+    expect(closeButtons).toHaveLength(0);
+  });
+
+  it("renders with minimal props", () => {
+    render(<ProfileToken name="Jane Smith" />);
+
+    expect(screen.getByText("Jane Smith")).toBeInTheDocument();
+  });
+
+  it("passes tokenProps to Token component", () => {
+    const { container } = render(
+      <ProfileToken {...mockProfileData} tokenProps={{ id: "custom-token" }} />
+    );
+
+    // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+    expect(container.firstChild).toHaveAttribute("id", "custom-token");
+  });
+});

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from "./InlineProfile";
+export * from "./ProfileToken";
+export * from "./types";

package/src/types.ts

@@ -0,0 +1,26 @@
+/**
+ * Profile Component Types
+ *
+ * This file contains TypeScript interfaces and types for the Profile component
+ * that can be used by backend services to render user profile data.
+ */
+
+import type { EnumLogoNamesWithoutVariants } from "@sproutsocial/seeds-partner-logos";
+import type Token from "@sproutsocial/seeds-react-token";
+
+export interface TypeInlineProfileProps {
+  name: string;
+  secondaryName?: string;
+  avatarSize?: string;
+  partnerName?: EnumLogoNamesWithoutVariants;
+  partnerLogoLabel?: string;
+  img?: string;
+  children?: React.ReactNode | React.ReactNode[];
+}
+
+export interface ProfileTokenProps extends TypeInlineProfileProps {
+  /** Additional CSS class name */
+  className?: string;
+  /** Additional props to pass to the Token component */
+  tokenProps?: Omit<React.ComponentProps<typeof Token>, "children">;
+}

package/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "extends": "@sproutsocial/seeds-tsconfig/bundler/dom/library-monorepo",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "module": "esnext"
+  },
+  "include": ["src/**/*"],
+  "exclude": [
+    "node_modules",
+    "dist",
+    "coverage",
+    "**/*.stories.tsx",
+    "**/*.stories.ts"
+  ]
+}

package/tsup.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from "tsup";
+
+export default defineConfig((options) => ({
+  entry: ["src/index.ts"],
+  format: ["cjs", "esm"],
+  clean: true,
+  legacyOutput: true,
+  dts: options.dts,
+  external: ["react"],
+  sourcemap: true,
+  metafile: options.metafile,
+}));