@sproutsocial/seeds-react-partner-logo 1.7.15 → 1.7.16

package/dist/esm/index.js

@@ -1,6 +1,8 @@
 // src/PartnerLogo.tsx
-import "react";
-import { useTheme } from "styled-components";
+import React4 from "react";
+
+// src/PartnerLogoHybrid.tsx
+import React3 from "react";
 
 // src/styles.ts
 import styled, { css } from "styled-components";
@@ -41,9 +43,12 @@ var Container = styled("span")`
 `;
 var styles_default = Container;
 
-// src/PartnerLogo.tsx
+// src/PartnerLogoTailwind.tsx
+import React2 from "react";
+
+// src/usePartnerLogoModel.ts
+import { useTheme } from "styled-components";
 import { ViewBoxes } from "@sproutsocial/seeds-partner-logos";
-import { jsx } from "react/jsx-runtime";
 var whichLogo = ({
   backgroundType,
   logoType,
@@ -60,58 +65,195 @@ var whichLogo = ({
     return logo;
   }
 };
-var PartnerLogo = ({
+var usePartnerLogoModel = ({
   partnerName,
   backgroundType,
   logoType = "symbol",
   height,
   width,
   size,
-  "aria-label": ariaLabel,
-  svgProps,
-  ...rest
+  "aria-label": ariaLabel
 }) => {
   const { mode } = useTheme();
   const logo = whichLogo({ backgroundType, logoType, partnerName }, mode);
   const logoViewBox = ViewBoxes[logo];
   const viewBoxCoordinates = logoViewBox?.split(" ") || [];
   const defaultSize = logoType === "symbol" ? "small" : void 0;
-  const defaultWidth = viewBoxCoordinates[2];
-  const defaultHeight = viewBoxCoordinates[3];
+  const logoSizeKey = size ?? defaultSize;
+  const logoSizePx = logoSizeKey ? PartnerLogoSizes[logoSizeKey] : void 0;
+  const resolvedHeight = height ? height : viewBoxCoordinates[3] + "px";
+  const resolvedWidth = width ? width : viewBoxCoordinates[2] + "px";
+  const sizeValue = logoSizePx ? logoSizePx : resolvedHeight;
+  const svgWidth = logoSizePx ? logoSizePx : "";
   const hasAriaLabel = !!ariaLabel;
-  const containerAriaProps = hasAriaLabel ? {} : { "aria-hidden": "true" };
+  const containerAriaProps = hasAriaLabel ? {} : { "aria-hidden": true };
   const svgAriaProps = hasAriaLabel ? { role: "img", "aria-label": ariaLabel } : {};
-  return /* @__PURE__ */ jsx(
-    styles_default,
-    {
-      height: height ? height : defaultHeight + "px",
-      width: width ? width : defaultWidth + "px",
-      logoSize: size ?? defaultSize,
-      className: "logo",
-      "data-qa-logo": partnerName,
-      ...rest,
-      ...containerAriaProps,
-      children: /* @__PURE__ */ jsx(
-        "svg",
-        {
-          className: "logo-svg",
-          viewBox: logoViewBox,
-          focusable: false,
-          "data-qa-logo-svg": `${partnerName}-svg`,
-          ...svgProps,
-          ...svgAriaProps,
-          children: /* @__PURE__ */ jsx(
-            "use",
-            {
-              xmlnsXlink: "http://www.w3.org/1999/xlink",
-              xlinkHref: `#seeds-svgs_${logo}`
-            }
-          )
+  return {
+    logo,
+    logoViewBox,
+    logoSizeKey,
+    resolvedHeight,
+    resolvedWidth,
+    sizeValue,
+    svgWidth,
+    containerAriaProps,
+    svgAriaProps
+  };
+};
+
+// src/PartnerLogoTailwind.tsx
+import { jsx } from "react/jsx-runtime";
+function cn(...inputs) {
+  const classes = [];
+  for (const input of inputs) {
+    if (!input) continue;
+    if (typeof input === "string") {
+      classes.push(input);
+    } else if (typeof input === "object") {
+      for (const [key, value] of Object.entries(input)) {
+        if (value) {
+          classes.push(key);
         }
-      )
+      }
     }
-  );
-};
+  }
+  return classes.join(" ");
+}
+var PartnerLogoTailwind = React2.forwardRef(
+  ({
+    partnerName,
+    backgroundType,
+    logoType = "symbol",
+    height,
+    width,
+    size,
+    "aria-label": ariaLabel,
+    svgProps,
+    className,
+    style: consumerStyle,
+    ...rest
+  }, ref) => {
+    const {
+      logo,
+      logoViewBox,
+      sizeValue,
+      svgWidth,
+      containerAriaProps,
+      svgAriaProps
+    } = usePartnerLogoModel({
+      partnerName,
+      backgroundType,
+      logoType,
+      height,
+      width,
+      size,
+      "aria-label": ariaLabel
+    });
+    const sizingStyle = {
+      "--seeds-partner-logo-height": sizeValue,
+      ...svgWidth ? { "--seeds-partner-logo-svg-width": svgWidth } : {}
+    };
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        className: cn("seeds-partner-logo", "logo", className),
+        "data-qa-logo": partnerName,
+        style: { ...sizingStyle, ...consumerStyle },
+        ...rest,
+        ...containerAriaProps,
+        children: /* @__PURE__ */ jsx(
+          "svg",
+          {
+            className: "logo-svg",
+            viewBox: logoViewBox,
+            focusable: false,
+            "data-qa-logo-svg": `${partnerName}-svg`,
+            ...svgProps,
+            ...svgAriaProps,
+            children: /* @__PURE__ */ jsx(
+              "use",
+              {
+                xmlnsXlink: "http://www.w3.org/1999/xlink",
+                xlinkHref: `#seeds-svgs_${logo}`
+              }
+            )
+          }
+        )
+      }
+    );
+  }
+);
+PartnerLogoTailwind.displayName = "PartnerLogoTailwind";
+
+// src/PartnerLogoHybrid.tsx
+import { hasStyledProps } from "@sproutsocial/seeds-react-system-props";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var PartnerLogoHybrid = React3.forwardRef((props, ref) => {
+  const {
+    partnerName,
+    backgroundType,
+    logoType = "symbol",
+    height,
+    width,
+    size,
+    "aria-label": ariaLabel,
+    svgProps,
+    ...rest
+  } = props;
+  const model = usePartnerLogoModel({
+    partnerName,
+    backgroundType,
+    logoType,
+    height,
+    width,
+    size,
+    "aria-label": ariaLabel
+  });
+  if (hasStyledProps(rest)) {
+    return /* @__PURE__ */ jsx2(
+      styles_default,
+      {
+        height: model.resolvedHeight,
+        width: model.resolvedWidth,
+        logoSize: model.logoSizeKey,
+        className: "logo",
+        "data-qa-logo": partnerName,
+        ref,
+        ...rest,
+        ...model.containerAriaProps,
+        children: /* @__PURE__ */ jsx2(
+          "svg",
+          {
+            className: "logo-svg",
+            viewBox: model.logoViewBox,
+            focusable: false,
+            "data-qa-logo-svg": `${partnerName}-svg`,
+            ...svgProps,
+            ...model.svgAriaProps,
+            children: /* @__PURE__ */ jsx2(
+              "use",
+              {
+                xmlnsXlink: "http://www.w3.org/1999/xlink",
+                xlinkHref: `#seeds-svgs_${model.logo}`
+              }
+            )
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx2(PartnerLogoTailwind, { ...props, ref });
+});
+PartnerLogoHybrid.displayName = "PartnerLogo";
+var PartnerLogoHybrid_default = PartnerLogoHybrid;
+
+// src/PartnerLogo.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var PartnerLogo = React4.forwardRef(
+  (props, ref) => /* @__PURE__ */ jsx3(PartnerLogoHybrid_default, { ...props, ref })
+);
+PartnerLogo.displayName = "PartnerLogo";
 var PartnerLogo_default = PartnerLogo;
 
 // src/index.ts

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/PartnerLogo.tsx","../../src/styles.ts","../../src/PartnerLogoTypes.ts","../../src/index.ts"],"sourcesContent":["import React from \"react\";\nimport { useTheme } from \"styled-components\";\nimport type { TypeTheme } from \"@sproutsocial/seeds-react-theme\";\nimport Container from \"./styles\";\nimport type { TypePartnerLogoProps } from \"./PartnerLogoTypes\";\nimport { ViewBoxes } from \"@sproutsocial/seeds-partner-logos\";\n\nconst whichLogo = (\n  {\n    backgroundType,\n    logoType,\n    partnerName,\n  }: Pick<TypePartnerLogoProps, \"backgroundType\" | \"logoType\" | \"partnerName\">,\n  mode: TypeTheme[\"mode\"]\n) => {\n  const logo =\n    logoType && logoType !== \"symbol\"\n      ? partnerName + \"-\" + logoType\n      : partnerName;\n  if (backgroundType && backgroundType === \"dark\") {\n    return `${logo}-dark`;\n  } else if (backgroundType && backgroundType === \"light\") {\n    return logo;\n  } else if (mode === \"dark\") {\n    return `${logo}-dark`;\n  } else {\n    return logo;\n  }\n};\n\nconst PartnerLogo = ({\n  partnerName,\n  backgroundType,\n  logoType = \"symbol\",\n  height,\n  width,\n  size,\n  \"aria-label\": ariaLabel,\n  svgProps,\n  ...rest\n}: TypePartnerLogoProps) => {\n  const { mode } = useTheme() as TypeTheme;\n\n  const logo = whichLogo({ backgroundType, logoType, partnerName }, mode);\n  const logoViewBox = ViewBoxes[logo as keyof typeof ViewBoxes];\n  const viewBoxCoordinates = logoViewBox?.split(\" \") || [];\n  const defaultSize = logoType === \"symbol\" ? \"small\" : undefined;\n  const defaultWidth = viewBoxCoordinates[2];\n  const defaultHeight = viewBoxCoordinates[3];\n\n  const hasAriaLabel = !!ariaLabel;\n  const containerAriaProps = hasAriaLabel ? {} : { \"aria-hidden\": \"true\" };\n  const svgAriaProps = hasAriaLabel\n    ? { role: \"img\", \"aria-label\": ariaLabel }\n    : {};\n\n  return (\n    <Container\n      // we add pixels here because view box coordinates are numbers\n      height={height ? height : defaultHeight + \"px\"}\n      width={width ? width : defaultWidth + \"px\"}\n      logoSize={size ?? defaultSize}\n      className=\"logo\"\n      data-qa-logo={partnerName}\n      {...rest}\n      {...containerAriaProps}\n    >\n      <svg\n        className=\"logo-svg\"\n        viewBox={logoViewBox}\n        focusable={false}\n        data-qa-logo-svg={`${partnerName}-svg`}\n        {...svgProps}\n        {...svgAriaProps}\n      >\n        <use\n          xmlnsXlink=\"http://www.w3.org/1999/xlink\"\n          xlinkHref={`#seeds-svgs_${logo}`}\n        />\n      </svg>\n    </Container>\n  );\n};\n\nexport default PartnerLogo;\n","import styled, { css } from \"styled-components\";\nimport { verticalAlign } from \"styled-system\";\nimport { COMMON, FLEXBOX } from \"@sproutsocial/seeds-react-system-props\";\nimport {\n  type TypePartnerLogoProps,\n  type TypePartnerLogoSize,\n  type TypePartnerLogoSizeValues,\n  PartnerLogoSizes,\n} from \"./PartnerLogoTypes\";\n\nconst stylesForSize = (\n  height: TypePartnerLogoProps[\"height\"],\n  logoSize: TypePartnerLogoSizeValues\n) => css`\n  height: ${logoSize ? logoSize : height};\n  line-height: ${logoSize ? logoSize : height};\n\n  .logo-svg {\n    height: ${logoSize ? logoSize : height};\n    width: ${logoSize ? logoSize : \"\"};\n  }\n`;\n\ninterface ContainerProps\n  extends Required<Pick<TypePartnerLogoProps, \"height\" | \"width\">> {\n  logoSize: TypePartnerLogoSize;\n}\n\nconst Container = styled(\"span\")<ContainerProps>`\n  display: inline-block;\n  color: inherit;\n  vertical-align: middle;\n  ${COMMON}\n  ${FLEXBOX}\n  ${verticalAlign}\n  ${(props) => stylesForSize(props.height, PartnerLogoSizes[props.logoSize])}\n`;\nexport default Container;\n","import * as React from \"react\";\nimport type { EnumLogoNamesWithoutVariants } from \"@sproutsocial/seeds-partner-logos\";\nimport { LogoNamesWithoutVariants } from \"@sproutsocial/seeds-partner-logos\";\nimport type { TypeStyledComponentsCommonProps } from \"@sproutsocial/seeds-react-system-props\";\nimport type {\n  TypeSystemCommonProps,\n  TypeSystemFlexboxProps,\n} from \"@sproutsocial/seeds-react-system-props\";\n\n/**\n * @deprecated Use PartnerLogoNames instead\n */\nexport const PartnerNames = LogoNamesWithoutVariants;\n\n/**\n * @deprecated Use EnumLogoNames instead\n */\nexport type TypePartnerNames = EnumLogoNamesWithoutVariants;\n\nexport const PartnerLogoSizes = {\n  mini: \"12px\",\n  small: \"16px\",\n  medium: \"24px\",\n  large: \"32px\",\n  jumbo: \"64px\",\n} as const;\n\nexport type TypePartnerLogoSize = keyof typeof PartnerLogoSizes;\nexport type TypePartnerLogoSizeValues =\n  (typeof PartnerLogoSizes)[TypePartnerLogoSize];\n\nexport const PartnerLogoTypes = [\"symbol\", \"wordmark\", \"lockup\"] as const;\n\nexport type TypePartnerLogoTypes = (typeof PartnerLogoTypes)[number];\n\nexport interface TypePartnerLogoProps\n  extends TypeStyledComponentsCommonProps,\n    TypeSystemCommonProps,\n    TypeSystemFlexboxProps,\n    Omit<React.ComponentPropsWithoutRef<\"span\">, \"color\"> {\n  /** The name of the partner whose logo you want to render. */\n  partnerName: EnumLogoNamesWithoutVariants;\n\n  /** Manually override the default mode behavior by rendering a logo based on the background it's displayed on. */\n  backgroundType?: \"dark\" | \"light\";\n  logoType?: TypePartnerLogoTypes;\n  height?: string;\n  width?: string;\n  size?: TypePartnerLogoSize;\n  svgProps?: React.ComponentPropsWithoutRef<\"svg\">;\n}\n","import PartnerLogo from \"./PartnerLogo\";\n\nexport default PartnerLogo;\nexport { PartnerLogo };\nexport * from \"./PartnerLogoTypes\";\n"],"mappings":";AAAA,OAAkB;AAClB,SAAS,gBAAgB;;;ACDzB,OAAO,UAAU,WAAW;AAC5B,SAAS,qBAAqB;AAC9B,SAAS,QAAQ,eAAe;;;ACFhC,OAAuB;AAEvB,SAAS,gCAAgC;AAUlC,IAAM,eAAe;AAOrB,IAAM,mBAAmB;AAAA,EAC9B,MAAM;AAAA,EACN,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,OAAO;AACT;AAMO,IAAM,mBAAmB,CAAC,UAAU,YAAY,QAAQ;;;ADrB/D,IAAM,gBAAgB,CACpB,QACA,aACG;AAAA,YACO,WAAW,WAAW,MAAM;AAAA,iBACvB,WAAW,WAAW,MAAM;AAAA;AAAA;AAAA,cAG/B,WAAW,WAAW,MAAM;AAAA,aAC7B,WAAW,WAAW,EAAE;AAAA;AAAA;AASrC,IAAM,YAAY,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA,IAI3B,MAAM;AAAA,IACN,OAAO;AAAA,IACP,aAAa;AAAA,IACb,CAAC,UAAU,cAAc,MAAM,QAAQ,iBAAiB,MAAM,QAAQ,CAAC,CAAC;AAAA;AAE5E,IAAO,iBAAQ;;;ADhCf,SAAS,iBAAiB;AAsElB;AApER,IAAM,YAAY,CAChB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AACF,GACA,SACG;AACH,QAAM,OACJ,YAAY,aAAa,WACrB,cAAc,MAAM,WACpB;AACN,MAAI,kBAAkB,mBAAmB,QAAQ;AAC/C,WAAO,GAAG,IAAI;AAAA,EAChB,WAAW,kBAAkB,mBAAmB,SAAS;AACvD,WAAO;AAAA,EACT,WAAW,SAAS,QAAQ;AAC1B,WAAO,GAAG,IAAI;AAAA,EAChB,OAAO;AACL,WAAO;AAAA,EACT;AACF;AAEA,IAAM,cAAc,CAAC;AAAA,EACnB;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA,GAAG;AACL,MAA4B;AAC1B,QAAM,EAAE,KAAK,IAAI,SAAS;AAE1B,QAAM,OAAO,UAAU,EAAE,gBAAgB,UAAU,YAAY,GAAG,IAAI;AACtE,QAAM,cAAc,UAAU,IAA8B;AAC5D,QAAM,qBAAqB,aAAa,MAAM,GAAG,KAAK,CAAC;AACvD,QAAM,cAAc,aAAa,WAAW,UAAU;AACtD,QAAM,eAAe,mBAAmB,CAAC;AACzC,QAAM,gBAAgB,mBAAmB,CAAC;AAE1C,QAAM,eAAe,CAAC,CAAC;AACvB,QAAM,qBAAqB,eAAe,CAAC,IAAI,EAAE,eAAe,OAAO;AACvE,QAAM,eAAe,eACjB,EAAE,MAAM,OAAO,cAAc,UAAU,IACvC,CAAC;AAEL,SACE;AAAA,IAAC;AAAA;AAAA,MAEC,QAAQ,SAAS,SAAS,gBAAgB;AAAA,MAC1C,OAAO,QAAQ,QAAQ,eAAe;AAAA,MACtC,UAAU,QAAQ;AAAA,MAClB,WAAU;AAAA,MACV,gBAAc;AAAA,MACb,GAAG;AAAA,MACH,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,SAAS;AAAA,UACT,WAAW;AAAA,UACX,oBAAkB,GAAG,WAAW;AAAA,UAC/B,GAAG;AAAA,UACH,GAAG;AAAA,UAEJ;AAAA,YAAC;AAAA;AAAA,cACC,YAAW;AAAA,cACX,WAAW,eAAe,IAAI;AAAA;AAAA,UAChC;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,sBAAQ;;;AGlFf,IAAO,gBAAQ;","names":[]}
+{"version":3,"sources":["../../src/PartnerLogo.tsx","../../src/PartnerLogoHybrid.tsx","../../src/styles.ts","../../src/PartnerLogoTypes.ts","../../src/PartnerLogoTailwind.tsx","../../src/usePartnerLogoModel.ts","../../src/index.ts"],"sourcesContent":["import React from \"react\";\nimport type { TypePartnerLogoProps } from \"./PartnerLogoTypes\";\nimport PartnerLogoHybrid from \"./PartnerLogoHybrid\";\n\n/**\n * PartnerLogo component. Automatically routes between the Tailwind implementation\n * (preferred) and the styled-components implementation (for consumers using\n * system props or styled() extension).\n */\nconst PartnerLogo = React.forwardRef<HTMLSpanElement, TypePartnerLogoProps>(\n  (props, ref) => <PartnerLogoHybrid {...props} ref={ref} />\n);\n\nPartnerLogo.displayName = \"PartnerLogo\";\nexport default PartnerLogo;\n","/**\n * Hybrid PartnerLogo Component\n * Automatically chooses between Tailwind and styled-components based on props\n */\n\nimport React from \"react\";\nimport type { TypePartnerLogoProps } from \"./PartnerLogoTypes\";\nimport Container from \"./styles\"; // Styled-components version\nimport { PartnerLogoTailwind } from \"./PartnerLogoTailwind\"; // Tailwind version\nimport { usePartnerLogoModel } from \"./usePartnerLogoModel\";\nimport { hasStyledProps } from \"@sproutsocial/seeds-react-system-props\";\n\nconst PartnerLogoHybrid = React.forwardRef<\n  HTMLSpanElement,\n  TypePartnerLogoProps\n>((props, ref) => {\n  const {\n    partnerName,\n    backgroundType,\n    logoType = \"symbol\",\n    height,\n    width,\n    size,\n    \"aria-label\": ariaLabel,\n    svgProps,\n    ...rest\n  } = props;\n\n  const model = usePartnerLogoModel({\n    partnerName,\n    backgroundType,\n    logoType,\n    height,\n    width,\n    size,\n    \"aria-label\": ariaLabel,\n  });\n\n  // PartnerLogo declares its own height/width/size sizing props, so they are\n  // destructured out above before checking hasStyledProps(rest) — a plain\n  // <PartnerLogo height=\"30px\" /> routes to Tailwind. Only genuine system props\n  // (mr, display, color, ...) force the styled-components path; a styled(PartnerLogo)\n  // extension routes to Tailwind and still applies its styles via the forwarded className.\n  if (hasStyledProps(rest)) {\n    return (\n      <Container\n        height={model.resolvedHeight}\n        width={model.resolvedWidth}\n        logoSize={model.logoSizeKey}\n        className=\"logo\"\n        data-qa-logo={partnerName}\n        ref={ref}\n        {...rest}\n        {...model.containerAriaProps}\n      >\n        <svg\n          className=\"logo-svg\"\n          viewBox={model.logoViewBox}\n          focusable={false}\n          data-qa-logo-svg={`${partnerName}-svg`}\n          {...svgProps}\n          {...model.svgAriaProps}\n        >\n          <use\n            xmlnsXlink=\"http://www.w3.org/1999/xlink\"\n            xlinkHref={`#seeds-svgs_${model.logo}`}\n          />\n        </svg>\n      </Container>\n    );\n  }\n\n  // Use Tailwind version (preferred - better performance)\n  return <PartnerLogoTailwind {...props} ref={ref} />;\n});\n\nPartnerLogoHybrid.displayName = \"PartnerLogo\";\nexport default PartnerLogoHybrid;\n","import styled, { css } from \"styled-components\";\nimport { verticalAlign } from \"styled-system\";\nimport { COMMON, FLEXBOX } from \"@sproutsocial/seeds-react-system-props\";\nimport {\n  type TypePartnerLogoProps,\n  type TypePartnerLogoSize,\n  type TypePartnerLogoSizeValues,\n  PartnerLogoSizes,\n} from \"./PartnerLogoTypes\";\n\nconst stylesForSize = (\n  height: TypePartnerLogoProps[\"height\"],\n  logoSize: TypePartnerLogoSizeValues\n) => css`\n  height: ${logoSize ? logoSize : height};\n  line-height: ${logoSize ? logoSize : height};\n\n  .logo-svg {\n    height: ${logoSize ? logoSize : height};\n    width: ${logoSize ? logoSize : \"\"};\n  }\n`;\n\ninterface ContainerProps\n  extends Required<Pick<TypePartnerLogoProps, \"height\" | \"width\">> {\n  logoSize: TypePartnerLogoSize;\n}\n\nconst Container = styled(\"span\")<ContainerProps>`\n  display: inline-block;\n  color: inherit;\n  vertical-align: middle;\n  ${COMMON}\n  ${FLEXBOX}\n  ${verticalAlign}\n  ${(props) => stylesForSize(props.height, PartnerLogoSizes[props.logoSize])}\n`;\nexport default Container;\n","import * as React from \"react\";\nimport type { EnumLogoNamesWithoutVariants } from \"@sproutsocial/seeds-partner-logos\";\nimport { LogoNamesWithoutVariants } from \"@sproutsocial/seeds-partner-logos\";\nimport type { TypeStyledComponentsCommonProps } from \"@sproutsocial/seeds-react-system-props\";\nimport type {\n  TypeSystemCommonProps,\n  TypeSystemFlexboxProps,\n} from \"@sproutsocial/seeds-react-system-props\";\n\n/**\n * @deprecated Use PartnerLogoNames instead\n */\nexport const PartnerNames = LogoNamesWithoutVariants;\n\n/**\n * @deprecated Use EnumLogoNames instead\n */\nexport type TypePartnerNames = EnumLogoNamesWithoutVariants;\n\nexport const PartnerLogoSizes = {\n  mini: \"12px\",\n  small: \"16px\",\n  medium: \"24px\",\n  large: \"32px\",\n  jumbo: \"64px\",\n} as const;\n\nexport type TypePartnerLogoSize = keyof typeof PartnerLogoSizes;\nexport type TypePartnerLogoSizeValues =\n  (typeof PartnerLogoSizes)[TypePartnerLogoSize];\n\nexport const PartnerLogoTypes = [\"symbol\", \"wordmark\", \"lockup\"] as const;\n\nexport type TypePartnerLogoTypes = (typeof PartnerLogoTypes)[number];\n\nexport interface TypePartnerLogoProps\n  extends TypeStyledComponentsCommonProps,\n    TypeSystemCommonProps,\n    TypeSystemFlexboxProps,\n    Omit<React.ComponentPropsWithoutRef<\"span\">, \"color\"> {\n  /** The name of the partner whose logo you want to render. */\n  partnerName: EnumLogoNamesWithoutVariants;\n\n  /** Manually override the default mode behavior by rendering a logo based on the background it's displayed on. */\n  backgroundType?: \"dark\" | \"light\";\n  logoType?: TypePartnerLogoTypes;\n  height?: string;\n  width?: string;\n  size?: TypePartnerLogoSize;\n  svgProps?: React.ComponentPropsWithoutRef<\"svg\">;\n}\n","/**\n * Tailwind CSS implementation of PartnerLogo component\n * Uses Seeds partner logo CSS classes from partner-logo.css\n */\n\nimport React from \"react\";\nimport type { TypePartnerLogoProps } from \"./PartnerLogoTypes\";\nimport { usePartnerLogoModel } from \"./usePartnerLogoModel\";\n\n// Utility for merging class names properly\nfunction cn(\n  ...inputs: (string | undefined | null | false | Record<string, boolean>)[]\n): string {\n  const classes: string[] = [];\n\n  for (const input of inputs) {\n    if (!input) continue;\n\n    if (typeof input === \"string\") {\n      classes.push(input);\n    } else if (typeof input === \"object\") {\n      for (const [key, value] of Object.entries(input)) {\n        if (value) {\n          classes.push(key);\n        }\n      }\n    }\n  }\n\n  return classes.join(\" \");\n}\n\nexport const PartnerLogoTailwind = React.forwardRef<\n  HTMLSpanElement,\n  TypePartnerLogoProps\n>(\n  (\n    {\n      partnerName,\n      backgroundType,\n      logoType = \"symbol\",\n      height,\n      width,\n      size,\n      \"aria-label\": ariaLabel,\n      svgProps,\n      className,\n      style: consumerStyle,\n      ...rest\n    }: TypePartnerLogoProps,\n    ref: React.Ref<HTMLSpanElement>\n  ) => {\n    const {\n      logo,\n      logoViewBox,\n      sizeValue,\n      svgWidth,\n      containerAriaProps,\n      svgAriaProps,\n    } = usePartnerLogoModel({\n      partnerName,\n      backgroundType,\n      logoType,\n      height,\n      width,\n      size,\n      \"aria-label\": ariaLabel,\n    });\n\n    // CSS custom-property keys aren't part of CSSProperties — cast is required.\n    const sizingStyle = {\n      \"--seeds-partner-logo-height\": sizeValue,\n      ...(svgWidth ? { \"--seeds-partner-logo-svg-width\": svgWidth } : {}),\n    } as React.CSSProperties;\n\n    return (\n      <span\n        ref={ref}\n        className={cn(\"seeds-partner-logo\", \"logo\", className)}\n        data-qa-logo={partnerName}\n        // sizing first so a consumer's unrelated style survives without\n        // clobbering the computed size CSS variables\n        style={{ ...sizingStyle, ...consumerStyle }}\n        {...(rest as React.ComponentPropsWithoutRef<\"span\">)}\n        {...containerAriaProps}\n      >\n        <svg\n          className=\"logo-svg\"\n          viewBox={logoViewBox}\n          focusable={false}\n          data-qa-logo-svg={`${partnerName}-svg`}\n          {...svgProps}\n          {...svgAriaProps}\n        >\n          <use\n            xmlnsXlink=\"http://www.w3.org/1999/xlink\"\n            xlinkHref={`#seeds-svgs_${logo}`}\n          />\n        </svg>\n      </span>\n    );\n  }\n);\n\nPartnerLogoTailwind.displayName = \"PartnerLogoTailwind\";\n","import { useTheme } from \"styled-components\";\nimport type { TypeTheme } from \"@sproutsocial/seeds-react-theme\";\nimport { ViewBoxes } from \"@sproutsocial/seeds-partner-logos\";\nimport { PartnerLogoSizes } from \"./PartnerLogoTypes\";\nimport type { TypePartnerLogoProps } from \"./PartnerLogoTypes\";\n\nconst whichLogo = (\n  {\n    backgroundType,\n    logoType,\n    partnerName,\n  }: Pick<TypePartnerLogoProps, \"backgroundType\" | \"logoType\" | \"partnerName\">,\n  mode: TypeTheme[\"mode\"]\n) => {\n  const logo =\n    logoType && logoType !== \"symbol\"\n      ? partnerName + \"-\" + logoType\n      : partnerName;\n  if (backgroundType && backgroundType === \"dark\") {\n    return `${logo}-dark`;\n  } else if (backgroundType && backgroundType === \"light\") {\n    return logo;\n  } else if (mode === \"dark\") {\n    return `${logo}-dark`;\n  } else {\n    return logo;\n  }\n};\n\n/**\n * Shared compute for both render paths (Tailwind + styled-components).\n *\n * Calls useTheme() so dark-logo selection works identically on both paths, and\n * returns the resolved logo id, viewBox, aria props, and the size values used to\n * drive sizing. Sizing precedence is preserved verbatim from the original\n * stylesForSize block: a logoSize lookup wins over the height prop, and the svg\n * width is the logoSize lookup or empty (which sizes the svg from the viewBox).\n */\nexport const usePartnerLogoModel = ({\n  partnerName,\n  backgroundType,\n  logoType = \"symbol\",\n  height,\n  width,\n  size,\n  \"aria-label\": ariaLabel,\n}: TypePartnerLogoProps) => {\n  const { mode } = useTheme() as TypeTheme;\n\n  const logo = whichLogo({ backgroundType, logoType, partnerName }, mode);\n  const logoViewBox = ViewBoxes[logo as keyof typeof ViewBoxes];\n  const viewBoxCoordinates = logoViewBox?.split(\" \") || [];\n  const defaultSize = logoType === \"symbol\" ? \"small\" : undefined;\n  const logoSizeKey = size ?? defaultSize;\n  const logoSizePx = logoSizeKey ? PartnerLogoSizes[logoSizeKey] : undefined;\n\n  // we add pixels here because view box coordinates are numbers\n  const resolvedHeight = height ? height : viewBoxCoordinates[3] + \"px\";\n  const resolvedWidth = width ? width : viewBoxCoordinates[2] + \"px\";\n  // container height + line-height + svg height: logoSize wins over height\n  const sizeValue = logoSizePx ? logoSizePx : resolvedHeight;\n  // svg width: logoSize or empty (empty => sizes from viewBox aspect ratio)\n  const svgWidth = logoSizePx ? logoSizePx : \"\";\n\n  const hasAriaLabel = !!ariaLabel;\n  const containerAriaProps = hasAriaLabel ? {} : { \"aria-hidden\": true };\n  const svgAriaProps = hasAriaLabel\n    ? { role: \"img\", \"aria-label\": ariaLabel }\n    : {};\n\n  return {\n    logo,\n    logoViewBox,\n    logoSizeKey,\n    resolvedHeight,\n    resolvedWidth,\n    sizeValue,\n    svgWidth,\n    containerAriaProps,\n    svgAriaProps,\n  };\n};\n","import PartnerLogo from \"./PartnerLogo\";\n\nexport default PartnerLogo;\nexport { PartnerLogo };\nexport * from \"./PartnerLogoTypes\";\n"],"mappings":"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","names":["React","React","React","React","jsx","React","jsx","React"]}

package/dist/index.d.mts

@@ -1,5 +1,5 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
+import React__default from 'react';
 import { EnumLogoNamesWithoutVariants } from '@sproutsocial/seeds-partner-logos';
 import { TypeStyledComponentsCommonProps, TypeSystemCommonProps, TypeSystemFlexboxProps } from '@sproutsocial/seeds-react-system-props';
 
@@ -34,6 +34,11 @@ interface TypePartnerLogoProps extends TypeStyledComponentsCommonProps, TypeSyst
     svgProps?: React.ComponentPropsWithoutRef<"svg">;
 }
 
-declare const PartnerLogo: ({ partnerName, backgroundType, logoType, height, width, size, "aria-label": ariaLabel, svgProps, ...rest }: TypePartnerLogoProps) => react_jsx_runtime.JSX.Element;
+/**
+ * PartnerLogo component. Automatically routes between the Tailwind implementation
+ * (preferred) and the styled-components implementation (for consumers using
+ * system props or styled() extension).
+ */
+declare const PartnerLogo: React__default.ForwardRefExoticComponent<Omit<TypePartnerLogoProps, "ref"> & React__default.RefAttributes<HTMLSpanElement>>;
 
 export { PartnerLogo, PartnerLogoSizes, PartnerLogoTypes, PartnerNames, type TypePartnerLogoProps, type TypePartnerLogoSize, type TypePartnerLogoSizeValues, type TypePartnerLogoTypes, type TypePartnerNames, PartnerLogo as default };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
+import React__default from 'react';
 import { EnumLogoNamesWithoutVariants } from '@sproutsocial/seeds-partner-logos';
 import { TypeStyledComponentsCommonProps, TypeSystemCommonProps, TypeSystemFlexboxProps } from '@sproutsocial/seeds-react-system-props';
 
@@ -34,6 +34,11 @@ interface TypePartnerLogoProps extends TypeStyledComponentsCommonProps, TypeSyst
     svgProps?: React.ComponentPropsWithoutRef<"svg">;
 }
 
-declare const PartnerLogo: ({ partnerName, backgroundType, logoType, height, width, size, "aria-label": ariaLabel, svgProps, ...rest }: TypePartnerLogoProps) => react_jsx_runtime.JSX.Element;
+/**
+ * PartnerLogo component. Automatically routes between the Tailwind implementation
+ * (preferred) and the styled-components implementation (for consumers using
+ * system props or styled() extension).
+ */
+declare const PartnerLogo: React__default.ForwardRefExoticComponent<Omit<TypePartnerLogoProps, "ref"> & React__default.RefAttributes<HTMLSpanElement>>;
 
 export { PartnerLogo, PartnerLogoSizes, PartnerLogoTypes, PartnerNames, type TypePartnerLogoProps, type TypePartnerLogoSize, type TypePartnerLogoSizeValues, type TypePartnerLogoTypes, type TypePartnerNames, PartnerLogo as default };

package/dist/index.js

@@ -39,8 +39,10 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/PartnerLogo.tsx
-var import_react = require("react");
-var import_styled_components2 = require("styled-components");
+var import_react3 = __toESM(require("react"));
+
+// src/PartnerLogoHybrid.tsx
+var import_react2 = __toESM(require("react"));
 
 // src/styles.ts
 var import_styled_components = __toESM(require("styled-components"));
@@ -81,9 +83,12 @@ var Container = (0, import_styled_components.default)("span")`
 `;
 var styles_default = Container;
 
-// src/PartnerLogo.tsx
+// src/PartnerLogoTailwind.tsx
+var import_react = __toESM(require("react"));
+
+// src/usePartnerLogoModel.ts
+var import_styled_components2 = require("styled-components");
 var import_seeds_partner_logos2 = require("@sproutsocial/seeds-partner-logos");
-var import_jsx_runtime = require("react/jsx-runtime");
 var whichLogo = ({
   backgroundType,
   logoType,
@@ -100,58 +105,195 @@ var whichLogo = ({
     return logo;
   }
 };
-var PartnerLogo = ({
+var usePartnerLogoModel = ({
   partnerName,
   backgroundType,
   logoType = "symbol",
   height,
   width,
   size,
-  "aria-label": ariaLabel,
-  svgProps,
-  ...rest
+  "aria-label": ariaLabel
 }) => {
   const { mode } = (0, import_styled_components2.useTheme)();
   const logo = whichLogo({ backgroundType, logoType, partnerName }, mode);
   const logoViewBox = import_seeds_partner_logos2.ViewBoxes[logo];
   const viewBoxCoordinates = logoViewBox?.split(" ") || [];
   const defaultSize = logoType === "symbol" ? "small" : void 0;
-  const defaultWidth = viewBoxCoordinates[2];
-  const defaultHeight = viewBoxCoordinates[3];
+  const logoSizeKey = size ?? defaultSize;
+  const logoSizePx = logoSizeKey ? PartnerLogoSizes[logoSizeKey] : void 0;
+  const resolvedHeight = height ? height : viewBoxCoordinates[3] + "px";
+  const resolvedWidth = width ? width : viewBoxCoordinates[2] + "px";
+  const sizeValue = logoSizePx ? logoSizePx : resolvedHeight;
+  const svgWidth = logoSizePx ? logoSizePx : "";
   const hasAriaLabel = !!ariaLabel;
-  const containerAriaProps = hasAriaLabel ? {} : { "aria-hidden": "true" };
+  const containerAriaProps = hasAriaLabel ? {} : { "aria-hidden": true };
   const svgAriaProps = hasAriaLabel ? { role: "img", "aria-label": ariaLabel } : {};
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    styles_default,
-    {
-      height: height ? height : defaultHeight + "px",
-      width: width ? width : defaultWidth + "px",
-      logoSize: size ?? defaultSize,
-      className: "logo",
-      "data-qa-logo": partnerName,
-      ...rest,
-      ...containerAriaProps,
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "svg",
-        {
-          className: "logo-svg",
-          viewBox: logoViewBox,
-          focusable: false,
-          "data-qa-logo-svg": `${partnerName}-svg`,
-          ...svgProps,
-          ...svgAriaProps,
-          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            "use",
-            {
-              xmlnsXlink: "http://www.w3.org/1999/xlink",
-              xlinkHref: `#seeds-svgs_${logo}`
-            }
-          )
+  return {
+    logo,
+    logoViewBox,
+    logoSizeKey,
+    resolvedHeight,
+    resolvedWidth,
+    sizeValue,
+    svgWidth,
+    containerAriaProps,
+    svgAriaProps
+  };
+};
+
+// src/PartnerLogoTailwind.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function cn(...inputs) {
+  const classes = [];
+  for (const input of inputs) {
+    if (!input) continue;
+    if (typeof input === "string") {
+      classes.push(input);
+    } else if (typeof input === "object") {
+      for (const [key, value] of Object.entries(input)) {
+        if (value) {
+          classes.push(key);
         }
-      )
+      }
     }
-  );
-};
+  }
+  return classes.join(" ");
+}
+var PartnerLogoTailwind = import_react.default.forwardRef(
+  ({
+    partnerName,
+    backgroundType,
+    logoType = "symbol",
+    height,
+    width,
+    size,
+    "aria-label": ariaLabel,
+    svgProps,
+    className,
+    style: consumerStyle,
+    ...rest
+  }, ref) => {
+    const {
+      logo,
+      logoViewBox,
+      sizeValue,
+      svgWidth,
+      containerAriaProps,
+      svgAriaProps
+    } = usePartnerLogoModel({
+      partnerName,
+      backgroundType,
+      logoType,
+      height,
+      width,
+      size,
+      "aria-label": ariaLabel
+    });
+    const sizingStyle = {
+      "--seeds-partner-logo-height": sizeValue,
+      ...svgWidth ? { "--seeds-partner-logo-svg-width": svgWidth } : {}
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "span",
+      {
+        ref,
+        className: cn("seeds-partner-logo", "logo", className),
+        "data-qa-logo": partnerName,
+        style: { ...sizingStyle, ...consumerStyle },
+        ...rest,
+        ...containerAriaProps,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "svg",
+          {
+            className: "logo-svg",
+            viewBox: logoViewBox,
+            focusable: false,
+            "data-qa-logo-svg": `${partnerName}-svg`,
+            ...svgProps,
+            ...svgAriaProps,
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "use",
+              {
+                xmlnsXlink: "http://www.w3.org/1999/xlink",
+                xlinkHref: `#seeds-svgs_${logo}`
+              }
+            )
+          }
+        )
+      }
+    );
+  }
+);
+PartnerLogoTailwind.displayName = "PartnerLogoTailwind";
+
+// src/PartnerLogoHybrid.tsx
+var import_seeds_react_system_props2 = require("@sproutsocial/seeds-react-system-props");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var PartnerLogoHybrid = import_react2.default.forwardRef((props, ref) => {
+  const {
+    partnerName,
+    backgroundType,
+    logoType = "symbol",
+    height,
+    width,
+    size,
+    "aria-label": ariaLabel,
+    svgProps,
+    ...rest
+  } = props;
+  const model = usePartnerLogoModel({
+    partnerName,
+    backgroundType,
+    logoType,
+    height,
+    width,
+    size,
+    "aria-label": ariaLabel
+  });
+  if ((0, import_seeds_react_system_props2.hasStyledProps)(rest)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      styles_default,
+      {
+        height: model.resolvedHeight,
+        width: model.resolvedWidth,
+        logoSize: model.logoSizeKey,
+        className: "logo",
+        "data-qa-logo": partnerName,
+        ref,
+        ...rest,
+        ...model.containerAriaProps,
+        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "svg",
+          {
+            className: "logo-svg",
+            viewBox: model.logoViewBox,
+            focusable: false,
+            "data-qa-logo-svg": `${partnerName}-svg`,
+            ...svgProps,
+            ...model.svgAriaProps,
+            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "use",
+              {
+                xmlnsXlink: "http://www.w3.org/1999/xlink",
+                xlinkHref: `#seeds-svgs_${model.logo}`
+              }
+            )
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PartnerLogoTailwind, { ...props, ref });
+});
+PartnerLogoHybrid.displayName = "PartnerLogo";
+var PartnerLogoHybrid_default = PartnerLogoHybrid;
+
+// src/PartnerLogo.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var PartnerLogo = import_react3.default.forwardRef(
+  (props, ref) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PartnerLogoHybrid_default, { ...props, ref })
+);
+PartnerLogo.displayName = "PartnerLogo";
 var PartnerLogo_default = PartnerLogo;
 
 // src/index.ts

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/PartnerLogo.tsx","../src/styles.ts","../src/PartnerLogoTypes.ts"],"sourcesContent":["import PartnerLogo from \"./PartnerLogo\";\n\nexport default PartnerLogo;\nexport { PartnerLogo };\nexport * from \"./PartnerLogoTypes\";\n","import React from \"react\";\nimport { useTheme } from \"styled-components\";\nimport type { TypeTheme } from \"@sproutsocial/seeds-react-theme\";\nimport Container from \"./styles\";\nimport type { TypePartnerLogoProps } from \"./PartnerLogoTypes\";\nimport { ViewBoxes } from \"@sproutsocial/seeds-partner-logos\";\n\nconst whichLogo = (\n  {\n    backgroundType,\n    logoType,\n    partnerName,\n  }: Pick<TypePartnerLogoProps, \"backgroundType\" | \"logoType\" | \"partnerName\">,\n  mode: TypeTheme[\"mode\"]\n) => {\n  const logo =\n    logoType && logoType !== \"symbol\"\n      ? partnerName + \"-\" + logoType\n      : partnerName;\n  if (backgroundType && backgroundType === \"dark\") {\n    return `${logo}-dark`;\n  } else if (backgroundType && backgroundType === \"light\") {\n    return logo;\n  } else if (mode === \"dark\") {\n    return `${logo}-dark`;\n  } else {\n    return logo;\n  }\n};\n\nconst PartnerLogo = ({\n  partnerName,\n  backgroundType,\n  logoType = \"symbol\",\n  height,\n  width,\n  size,\n  \"aria-label\": ariaLabel,\n  svgProps,\n  ...rest\n}: TypePartnerLogoProps) => {\n  const { mode } = useTheme() as TypeTheme;\n\n  const logo = whichLogo({ backgroundType, logoType, partnerName }, mode);\n  const logoViewBox = ViewBoxes[logo as keyof typeof ViewBoxes];\n  const viewBoxCoordinates = logoViewBox?.split(\" \") || [];\n  const defaultSize = logoType === \"symbol\" ? \"small\" : undefined;\n  const defaultWidth = viewBoxCoordinates[2];\n  const defaultHeight = viewBoxCoordinates[3];\n\n  const hasAriaLabel = !!ariaLabel;\n  const containerAriaProps = hasAriaLabel ? {} : { \"aria-hidden\": \"true\" };\n  const svgAriaProps = hasAriaLabel\n    ? { role: \"img\", \"aria-label\": ariaLabel }\n    : {};\n\n  return (\n    <Container\n      // we add pixels here because view box coordinates are numbers\n      height={height ? height : defaultHeight + \"px\"}\n      width={width ? width : defaultWidth + \"px\"}\n      logoSize={size ?? defaultSize}\n      className=\"logo\"\n      data-qa-logo={partnerName}\n      {...rest}\n      {...containerAriaProps}\n    >\n      <svg\n        className=\"logo-svg\"\n        viewBox={logoViewBox}\n        focusable={false}\n        data-qa-logo-svg={`${partnerName}-svg`}\n        {...svgProps}\n        {...svgAriaProps}\n      >\n        <use\n          xmlnsXlink=\"http://www.w3.org/1999/xlink\"\n          xlinkHref={`#seeds-svgs_${logo}`}\n        />\n      </svg>\n    </Container>\n  );\n};\n\nexport default PartnerLogo;\n","import styled, { css } from \"styled-components\";\nimport { verticalAlign } from \"styled-system\";\nimport { COMMON, FLEXBOX } from \"@sproutsocial/seeds-react-system-props\";\nimport {\n  type TypePartnerLogoProps,\n  type TypePartnerLogoSize,\n  type TypePartnerLogoSizeValues,\n  PartnerLogoSizes,\n} from \"./PartnerLogoTypes\";\n\nconst stylesForSize = (\n  height: TypePartnerLogoProps[\"height\"],\n  logoSize: TypePartnerLogoSizeValues\n) => css`\n  height: ${logoSize ? logoSize : height};\n  line-height: ${logoSize ? logoSize : height};\n\n  .logo-svg {\n    height: ${logoSize ? logoSize : height};\n    width: ${logoSize ? logoSize : \"\"};\n  }\n`;\n\ninterface ContainerProps\n  extends Required<Pick<TypePartnerLogoProps, \"height\" | \"width\">> {\n  logoSize: TypePartnerLogoSize;\n}\n\nconst Container = styled(\"span\")<ContainerProps>`\n  display: inline-block;\n  color: inherit;\n  vertical-align: middle;\n  ${COMMON}\n  ${FLEXBOX}\n  ${verticalAlign}\n  ${(props) => stylesForSize(props.height, PartnerLogoSizes[props.logoSize])}\n`;\nexport default Container;\n","import * as React from \"react\";\nimport type { EnumLogoNamesWithoutVariants } from \"@sproutsocial/seeds-partner-logos\";\nimport { LogoNamesWithoutVariants } from \"@sproutsocial/seeds-partner-logos\";\nimport type { TypeStyledComponentsCommonProps } from \"@sproutsocial/seeds-react-system-props\";\nimport type {\n  TypeSystemCommonProps,\n  TypeSystemFlexboxProps,\n} from \"@sproutsocial/seeds-react-system-props\";\n\n/**\n * @deprecated Use PartnerLogoNames instead\n */\nexport const PartnerNames = LogoNamesWithoutVariants;\n\n/**\n * @deprecated Use EnumLogoNames instead\n */\nexport type TypePartnerNames = EnumLogoNamesWithoutVariants;\n\nexport const PartnerLogoSizes = {\n  mini: \"12px\",\n  small: \"16px\",\n  medium: \"24px\",\n  large: \"32px\",\n  jumbo: \"64px\",\n} as const;\n\nexport type TypePartnerLogoSize = keyof typeof PartnerLogoSizes;\nexport type TypePartnerLogoSizeValues =\n  (typeof PartnerLogoSizes)[TypePartnerLogoSize];\n\nexport const PartnerLogoTypes = [\"symbol\", \"wordmark\", \"lockup\"] as const;\n\nexport type TypePartnerLogoTypes = (typeof PartnerLogoTypes)[number];\n\nexport interface TypePartnerLogoProps\n  extends TypeStyledComponentsCommonProps,\n    TypeSystemCommonProps,\n    TypeSystemFlexboxProps,\n    Omit<React.ComponentPropsWithoutRef<\"span\">, \"color\"> {\n  /** The name of the partner whose logo you want to render. */\n  partnerName: EnumLogoNamesWithoutVariants;\n\n  /** Manually override the default mode behavior by rendering a logo based on the background it's displayed on. */\n  backgroundType?: \"dark\" | \"light\";\n  logoType?: TypePartnerLogoTypes;\n  height?: string;\n  width?: string;\n  size?: TypePartnerLogoSize;\n  svgProps?: React.ComponentPropsWithoutRef<\"svg\">;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAAkB;AAClB,IAAAA,4BAAyB;;;ACDzB,+BAA4B;AAC5B,2BAA8B;AAC9B,sCAAgC;;;ACFhC,YAAuB;AAEvB,iCAAyC;AAUlC,IAAM,eAAe;AAOrB,IAAM,mBAAmB;AAAA,EAC9B,MAAM;AAAA,EACN,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,OAAO;AACT;AAMO,IAAM,mBAAmB,CAAC,UAAU,YAAY,QAAQ;;;ADrB/D,IAAM,gBAAgB,CACpB,QACA,aACG;AAAA,YACO,WAAW,WAAW,MAAM;AAAA,iBACvB,WAAW,WAAW,MAAM;AAAA;AAAA;AAAA,cAG/B,WAAW,WAAW,MAAM;AAAA,aAC7B,WAAW,WAAW,EAAE;AAAA;AAAA;AASrC,IAAM,gBAAY,yBAAAC,SAAO,MAAM;AAAA;AAAA;AAAA;AAAA,IAI3B,sCAAM;AAAA,IACN,uCAAO;AAAA,IACP,kCAAa;AAAA,IACb,CAAC,UAAU,cAAc,MAAM,QAAQ,iBAAiB,MAAM,QAAQ,CAAC,CAAC;AAAA;AAE5E,IAAO,iBAAQ;;;ADhCf,IAAAC,8BAA0B;AAsElB;AApER,IAAM,YAAY,CAChB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AACF,GACA,SACG;AACH,QAAM,OACJ,YAAY,aAAa,WACrB,cAAc,MAAM,WACpB;AACN,MAAI,kBAAkB,mBAAmB,QAAQ;AAC/C,WAAO,GAAG,IAAI;AAAA,EAChB,WAAW,kBAAkB,mBAAmB,SAAS;AACvD,WAAO;AAAA,EACT,WAAW,SAAS,QAAQ;AAC1B,WAAO,GAAG,IAAI;AAAA,EAChB,OAAO;AACL,WAAO;AAAA,EACT;AACF;AAEA,IAAM,cAAc,CAAC;AAAA,EACnB;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA,GAAG;AACL,MAA4B;AAC1B,QAAM,EAAE,KAAK,QAAI,oCAAS;AAE1B,QAAM,OAAO,UAAU,EAAE,gBAAgB,UAAU,YAAY,GAAG,IAAI;AACtE,QAAM,cAAc,sCAAU,IAA8B;AAC5D,QAAM,qBAAqB,aAAa,MAAM,GAAG,KAAK,CAAC;AACvD,QAAM,cAAc,aAAa,WAAW,UAAU;AACtD,QAAM,eAAe,mBAAmB,CAAC;AACzC,QAAM,gBAAgB,mBAAmB,CAAC;AAE1C,QAAM,eAAe,CAAC,CAAC;AACvB,QAAM,qBAAqB,eAAe,CAAC,IAAI,EAAE,eAAe,OAAO;AACvE,QAAM,eAAe,eACjB,EAAE,MAAM,OAAO,cAAc,UAAU,IACvC,CAAC;AAEL,SACE;AAAA,IAAC;AAAA;AAAA,MAEC,QAAQ,SAAS,SAAS,gBAAgB;AAAA,MAC1C,OAAO,QAAQ,QAAQ,eAAe;AAAA,MACtC,UAAU,QAAQ;AAAA,MAClB,WAAU;AAAA,MACV,gBAAc;AAAA,MACb,GAAG;AAAA,MACH,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,SAAS;AAAA,UACT,WAAW;AAAA,UACX,oBAAkB,GAAG,WAAW;AAAA,UAC/B,GAAG;AAAA,UACH,GAAG;AAAA,UAEJ;AAAA,YAAC;AAAA;AAAA,cACC,YAAW;AAAA,cACX,WAAW,eAAe,IAAI;AAAA;AAAA,UAChC;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,sBAAQ;;;ADlFf,IAAO,gBAAQ;","names":["import_styled_components","styled","import_seeds_partner_logos"]}
+{"version":3,"sources":["../src/index.ts","../src/PartnerLogo.tsx","../src/PartnerLogoHybrid.tsx","../src/styles.ts","../src/PartnerLogoTypes.ts","../src/PartnerLogoTailwind.tsx","../src/usePartnerLogoModel.ts"],"sourcesContent":["import PartnerLogo from \"./PartnerLogo\";\n\nexport default PartnerLogo;\nexport { PartnerLogo };\nexport * from \"./PartnerLogoTypes\";\n","import React from \"react\";\nimport type { TypePartnerLogoProps } from \"./PartnerLogoTypes\";\nimport PartnerLogoHybrid from \"./PartnerLogoHybrid\";\n\n/**\n * PartnerLogo component. Automatically routes between the Tailwind implementation\n * (preferred) and the styled-components implementation (for consumers using\n * system props or styled() extension).\n */\nconst PartnerLogo = React.forwardRef<HTMLSpanElement, TypePartnerLogoProps>(\n  (props, ref) => <PartnerLogoHybrid {...props} ref={ref} />\n);\n\nPartnerLogo.displayName = \"PartnerLogo\";\nexport default PartnerLogo;\n","/**\n * Hybrid PartnerLogo Component\n * Automatically chooses between Tailwind and styled-components based on props\n */\n\nimport React from \"react\";\nimport type { TypePartnerLogoProps } from \"./PartnerLogoTypes\";\nimport Container from \"./styles\"; // Styled-components version\nimport { PartnerLogoTailwind } from \"./PartnerLogoTailwind\"; // Tailwind version\nimport { usePartnerLogoModel } from \"./usePartnerLogoModel\";\nimport { hasStyledProps } from \"@sproutsocial/seeds-react-system-props\";\n\nconst PartnerLogoHybrid = React.forwardRef<\n  HTMLSpanElement,\n  TypePartnerLogoProps\n>((props, ref) => {\n  const {\n    partnerName,\n    backgroundType,\n    logoType = \"symbol\",\n    height,\n    width,\n    size,\n    \"aria-label\": ariaLabel,\n    svgProps,\n    ...rest\n  } = props;\n\n  const model = usePartnerLogoModel({\n    partnerName,\n    backgroundType,\n    logoType,\n    height,\n    width,\n    size,\n    \"aria-label\": ariaLabel,\n  });\n\n  // PartnerLogo declares its own height/width/size sizing props, so they are\n  // destructured out above before checking hasStyledProps(rest) — a plain\n  // <PartnerLogo height=\"30px\" /> routes to Tailwind. Only genuine system props\n  // (mr, display, color, ...) force the styled-components path; a styled(PartnerLogo)\n  // extension routes to Tailwind and still applies its styles via the forwarded className.\n  if (hasStyledProps(rest)) {\n    return (\n      <Container\n        height={model.resolvedHeight}\n        width={model.resolvedWidth}\n        logoSize={model.logoSizeKey}\n        className=\"logo\"\n        data-qa-logo={partnerName}\n        ref={ref}\n        {...rest}\n        {...model.containerAriaProps}\n      >\n        <svg\n          className=\"logo-svg\"\n          viewBox={model.logoViewBox}\n          focusable={false}\n          data-qa-logo-svg={`${partnerName}-svg`}\n          {...svgProps}\n          {...model.svgAriaProps}\n        >\n          <use\n            xmlnsXlink=\"http://www.w3.org/1999/xlink\"\n            xlinkHref={`#seeds-svgs_${model.logo}`}\n          />\n        </svg>\n      </Container>\n    );\n  }\n\n  // Use Tailwind version (preferred - better performance)\n  return <PartnerLogoTailwind {...props} ref={ref} />;\n});\n\nPartnerLogoHybrid.displayName = \"PartnerLogo\";\nexport default PartnerLogoHybrid;\n","import styled, { css } from \"styled-components\";\nimport { verticalAlign } from \"styled-system\";\nimport { COMMON, FLEXBOX } from \"@sproutsocial/seeds-react-system-props\";\nimport {\n  type TypePartnerLogoProps,\n  type TypePartnerLogoSize,\n  type TypePartnerLogoSizeValues,\n  PartnerLogoSizes,\n} from \"./PartnerLogoTypes\";\n\nconst stylesForSize = (\n  height: TypePartnerLogoProps[\"height\"],\n  logoSize: TypePartnerLogoSizeValues\n) => css`\n  height: ${logoSize ? logoSize : height};\n  line-height: ${logoSize ? logoSize : height};\n\n  .logo-svg {\n    height: ${logoSize ? logoSize : height};\n    width: ${logoSize ? logoSize : \"\"};\n  }\n`;\n\ninterface ContainerProps\n  extends Required<Pick<TypePartnerLogoProps, \"height\" | \"width\">> {\n  logoSize: TypePartnerLogoSize;\n}\n\nconst Container = styled(\"span\")<ContainerProps>`\n  display: inline-block;\n  color: inherit;\n  vertical-align: middle;\n  ${COMMON}\n  ${FLEXBOX}\n  ${verticalAlign}\n  ${(props) => stylesForSize(props.height, PartnerLogoSizes[props.logoSize])}\n`;\nexport default Container;\n","import * as React from \"react\";\nimport type { EnumLogoNamesWithoutVariants } from \"@sproutsocial/seeds-partner-logos\";\nimport { LogoNamesWithoutVariants } from \"@sproutsocial/seeds-partner-logos\";\nimport type { TypeStyledComponentsCommonProps } from \"@sproutsocial/seeds-react-system-props\";\nimport type {\n  TypeSystemCommonProps,\n  TypeSystemFlexboxProps,\n} from \"@sproutsocial/seeds-react-system-props\";\n\n/**\n * @deprecated Use PartnerLogoNames instead\n */\nexport const PartnerNames = LogoNamesWithoutVariants;\n\n/**\n * @deprecated Use EnumLogoNames instead\n */\nexport type TypePartnerNames = EnumLogoNamesWithoutVariants;\n\nexport const PartnerLogoSizes = {\n  mini: \"12px\",\n  small: \"16px\",\n  medium: \"24px\",\n  large: \"32px\",\n  jumbo: \"64px\",\n} as const;\n\nexport type TypePartnerLogoSize = keyof typeof PartnerLogoSizes;\nexport type TypePartnerLogoSizeValues =\n  (typeof PartnerLogoSizes)[TypePartnerLogoSize];\n\nexport const PartnerLogoTypes = [\"symbol\", \"wordmark\", \"lockup\"] as const;\n\nexport type TypePartnerLogoTypes = (typeof PartnerLogoTypes)[number];\n\nexport interface TypePartnerLogoProps\n  extends TypeStyledComponentsCommonProps,\n    TypeSystemCommonProps,\n    TypeSystemFlexboxProps,\n    Omit<React.ComponentPropsWithoutRef<\"span\">, \"color\"> {\n  /** The name of the partner whose logo you want to render. */\n  partnerName: EnumLogoNamesWithoutVariants;\n\n  /** Manually override the default mode behavior by rendering a logo based on the background it's displayed on. */\n  backgroundType?: \"dark\" | \"light\";\n  logoType?: TypePartnerLogoTypes;\n  height?: string;\n  width?: string;\n  size?: TypePartnerLogoSize;\n  svgProps?: React.ComponentPropsWithoutRef<\"svg\">;\n}\n","/**\n * Tailwind CSS implementation of PartnerLogo component\n * Uses Seeds partner logo CSS classes from partner-logo.css\n */\n\nimport React from \"react\";\nimport type { TypePartnerLogoProps } from \"./PartnerLogoTypes\";\nimport { usePartnerLogoModel } from \"./usePartnerLogoModel\";\n\n// Utility for merging class names properly\nfunction cn(\n  ...inputs: (string | undefined | null | false | Record<string, boolean>)[]\n): string {\n  const classes: string[] = [];\n\n  for (const input of inputs) {\n    if (!input) continue;\n\n    if (typeof input === \"string\") {\n      classes.push(input);\n    } else if (typeof input === \"object\") {\n      for (const [key, value] of Object.entries(input)) {\n        if (value) {\n          classes.push(key);\n        }\n      }\n    }\n  }\n\n  return classes.join(\" \");\n}\n\nexport const PartnerLogoTailwind = React.forwardRef<\n  HTMLSpanElement,\n  TypePartnerLogoProps\n>(\n  (\n    {\n      partnerName,\n      backgroundType,\n      logoType = \"symbol\",\n      height,\n      width,\n      size,\n      \"aria-label\": ariaLabel,\n      svgProps,\n      className,\n      style: consumerStyle,\n      ...rest\n    }: TypePartnerLogoProps,\n    ref: React.Ref<HTMLSpanElement>\n  ) => {\n    const {\n      logo,\n      logoViewBox,\n      sizeValue,\n      svgWidth,\n      containerAriaProps,\n      svgAriaProps,\n    } = usePartnerLogoModel({\n      partnerName,\n      backgroundType,\n      logoType,\n      height,\n      width,\n      size,\n      \"aria-label\": ariaLabel,\n    });\n\n    // CSS custom-property keys aren't part of CSSProperties — cast is required.\n    const sizingStyle = {\n      \"--seeds-partner-logo-height\": sizeValue,\n      ...(svgWidth ? { \"--seeds-partner-logo-svg-width\": svgWidth } : {}),\n    } as React.CSSProperties;\n\n    return (\n      <span\n        ref={ref}\n        className={cn(\"seeds-partner-logo\", \"logo\", className)}\n        data-qa-logo={partnerName}\n        // sizing first so a consumer's unrelated style survives without\n        // clobbering the computed size CSS variables\n        style={{ ...sizingStyle, ...consumerStyle }}\n        {...(rest as React.ComponentPropsWithoutRef<\"span\">)}\n        {...containerAriaProps}\n      >\n        <svg\n          className=\"logo-svg\"\n          viewBox={logoViewBox}\n          focusable={false}\n          data-qa-logo-svg={`${partnerName}-svg`}\n          {...svgProps}\n          {...svgAriaProps}\n        >\n          <use\n            xmlnsXlink=\"http://www.w3.org/1999/xlink\"\n            xlinkHref={`#seeds-svgs_${logo}`}\n          />\n        </svg>\n      </span>\n    );\n  }\n);\n\nPartnerLogoTailwind.displayName = \"PartnerLogoTailwind\";\n","import { useTheme } from \"styled-components\";\nimport type { TypeTheme } from \"@sproutsocial/seeds-react-theme\";\nimport { ViewBoxes } from \"@sproutsocial/seeds-partner-logos\";\nimport { PartnerLogoSizes } from \"./PartnerLogoTypes\";\nimport type { TypePartnerLogoProps } from \"./PartnerLogoTypes\";\n\nconst whichLogo = (\n  {\n    backgroundType,\n    logoType,\n    partnerName,\n  }: Pick<TypePartnerLogoProps, \"backgroundType\" | \"logoType\" | \"partnerName\">,\n  mode: TypeTheme[\"mode\"]\n) => {\n  const logo =\n    logoType && logoType !== \"symbol\"\n      ? partnerName + \"-\" + logoType\n      : partnerName;\n  if (backgroundType && backgroundType === \"dark\") {\n    return `${logo}-dark`;\n  } else if (backgroundType && backgroundType === \"light\") {\n    return logo;\n  } else if (mode === \"dark\") {\n    return `${logo}-dark`;\n  } else {\n    return logo;\n  }\n};\n\n/**\n * Shared compute for both render paths (Tailwind + styled-components).\n *\n * Calls useTheme() so dark-logo selection works identically on both paths, and\n * returns the resolved logo id, viewBox, aria props, and the size values used to\n * drive sizing. Sizing precedence is preserved verbatim from the original\n * stylesForSize block: a logoSize lookup wins over the height prop, and the svg\n * width is the logoSize lookup or empty (which sizes the svg from the viewBox).\n */\nexport const usePartnerLogoModel = ({\n  partnerName,\n  backgroundType,\n  logoType = \"symbol\",\n  height,\n  width,\n  size,\n  \"aria-label\": ariaLabel,\n}: TypePartnerLogoProps) => {\n  const { mode } = useTheme() as TypeTheme;\n\n  const logo = whichLogo({ backgroundType, logoType, partnerName }, mode);\n  const logoViewBox = ViewBoxes[logo as keyof typeof ViewBoxes];\n  const viewBoxCoordinates = logoViewBox?.split(\" \") || [];\n  const defaultSize = logoType === \"symbol\" ? \"small\" : undefined;\n  const logoSizeKey = size ?? defaultSize;\n  const logoSizePx = logoSizeKey ? PartnerLogoSizes[logoSizeKey] : undefined;\n\n  // we add pixels here because view box coordinates are numbers\n  const resolvedHeight = height ? height : viewBoxCoordinates[3] + \"px\";\n  const resolvedWidth = width ? width : viewBoxCoordinates[2] + \"px\";\n  // container height + line-height + svg height: logoSize wins over height\n  const sizeValue = logoSizePx ? logoSizePx : resolvedHeight;\n  // svg width: logoSize or empty (empty => sizes from viewBox aspect ratio)\n  const svgWidth = logoSizePx ? logoSizePx : \"\";\n\n  const hasAriaLabel = !!ariaLabel;\n  const containerAriaProps = hasAriaLabel ? {} : { \"aria-hidden\": true };\n  const svgAriaProps = hasAriaLabel\n    ? { role: \"img\", \"aria-label\": ariaLabel }\n    : {};\n\n  return {\n    logo,\n    logoViewBox,\n    logoSizeKey,\n    resolvedHeight,\n    resolvedWidth,\n    sizeValue,\n    svgWidth,\n    containerAriaProps,\n    svgAriaProps,\n  };\n};\n"],"mappings":"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","names":["import_react","import_react","styled","import_styled_components","import_seeds_partner_logos","React","import_seeds_react_system_props","import_jsx_runtime","React","import_jsx_runtime","React"]}

package/dist/partner-logo.css

@@ -0,0 +1,34 @@
+/**
+ * Seeds Partner Logo component classes
+ * Use these instead of writing out individual Tailwind utility classes.
+ *
+ * Ships as a separate CSS file (pulled in by consumers via the package css
+ * export) — not imported from TS, matching the Button component.
+ *
+ * Sizing is runtime-computed (logo size lookup or the height prop), so it is
+ * applied through inline CSS custom properties set on the element's style attr:
+ *   --seeds-partner-logo-height      container height + line-height + svg height
+ *   --seeds-partner-logo-svg-width   svg width (unset => auto => sizes from viewBox)
+ *
+ * Usage:
+ *   <span class="seeds-partner-logo logo" style="--seeds-partner-logo-height: 16px">
+ *     <svg class="logo-svg">…</svg>
+ *   </span>
+ */
+
+@layer components {
+  .seeds-partner-logo {
+    display: inline-block;
+    color: inherit;
+    vertical-align: middle;
+    height: var(--seeds-partner-logo-height);
+    line-height: var(--seeds-partner-logo-height);
+  }
+
+  .seeds-partner-logo .logo-svg {
+    height: var(--seeds-partner-logo-height);
+    /* unset => auto => svg sizes from its viewBox aspect ratio,
+       matching stylesForSize's empty width declaration */
+    width: var(--seeds-partner-logo-svg-width, auto);
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-partner-logo",
-  "version": "1.7.15",
+  "version": "1.7.16",
   "description": "Seeds React Partner Logo component",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
@@ -10,16 +10,26 @@
   "files": [
     "dist"
   ],
+  "exports": {
+    ".": {
+      "import": "./dist/esm/index.js",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./dist/partner-logo.css": "./dist/partner-logo.css"
+  },
   "scripts": {
-    "build": "tsup --dts",
-    "build:debug": "tsup --dts --metafile",
+    "build": "tsup --dts && cp src/partner-logo.css dist/partner-logo.css",
+    "build:debug": "tsup --dts --metafile && cp src/partner-logo.css dist/partner-logo.css",
     "dev": "tsup --watch --dts",
     "clean": "rm -rf .turbo dist",
     "clean:modules": "rm -rf node_modules",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "test": "jest",
+    "test:watch": "jest --watch --coverage=false"
   },
   "dependencies": {
-    "@sproutsocial/seeds-react-system-props": "^3.1.1",
+    "@sproutsocial/seeds-react-system-props": "^3.1.2",
     "@sproutsocial/seeds-react-theme": "^4.2.0",
     "styled-system": "^5.1.5"
   },
@@ -29,7 +39,9 @@
     "styled-components": "^5.2.3",
     "typescript": "^5.6.2",
     "tsup": "^8.3.4",
-    "@sproutsocial/seeds-tsconfig": "*"
+    "@sproutsocial/seeds-tsconfig": "*",
+    "@sproutsocial/seeds-testing": "*",
+    "@sproutsocial/seeds-react-testing-library": "*"
   },
   "peerDependencies": {
     "@sproutsocial/seeds-partner-logos": ">=1.5.0",