@sproutsocial/seeds-react-image 1.0.28 → 1.0.29

package/.turbo/turbo-build.log

@@ -1,5 +1,23 @@
 yarn run v1.22.22
-$ tsup --dts
+$ tsup --dts && cp src/image.css dist/image.css
+▲ [WARNING] The condition "types" here will never be used as it comes after both "import" and "require" [package.json]
+
+    package.json:14:6:
+      14 │       "types": "./dist/index.d.ts"
+         ╵       ~~~~~~~
+
+  The "import" condition comes earlier and will be used for all "import" statements:
+
+    package.json:12:6:
+      12 │       "import": "./dist/esm/index.js",
+         ╵       ~~~~~~~~
+
+  The "require" condition comes earlier and will be used for all "require" calls:
+
+    package.json:13:6:
+      13 │       "require": "./dist/index.js",
+         ╵       ~~~~~~~~~
+
 CLI Building entry: src/index.ts
 CLI Using tsconfig: tsconfig.json
 CLI tsup v8.5.0
@@ -8,14 +26,52 @@ $ tsup --dts
 CLI Cleaning output folder
 CJS Build start
 ESM Build start
-CJS dist/index.js     3.88 KB
-CJS dist/index.js.map 5.26 KB
-CJS ⚡️ Build success in 14ms
-ESM dist/esm/index.js     2.09 KB
-ESM dist/esm/index.js.map 5.20 KB
-ESM ⚡️ Build success in 14ms
+[warn] ▲ [WARNING] The condition "types" here will never be used as it comes after both "import" and "require" [package.json]
+
+    package.json:14:6:
+      14 │       "types": "./dist/index.d.ts"
+         ╵       ~~~~~~~
+
+  The "import" condition comes earlier and will be used for all "import" statements:
+
+    package.json:12:6:
+      12 │       "import": "./dist/esm/index.js",
+         ╵       ~~~~~~~~
+
+  The "require" condition comes earlier and will be used for all "require" calls:
+
+    package.json:13:6:
+      13 │       "require": "./dist/index.js",
+         ╵       ~~~~~~~~~
+
+
+[warn] ▲ [WARNING] The condition "types" here will never be used as it comes after both "import" and "require" [package.json]
+
+    package.json:14:6:
+      14 │       "types": "./dist/index.d.ts"
+         ╵       ~~~~~~~
+
+  The "import" condition comes earlier and will be used for all "import" statements:
+
+    package.json:12:6:
+      12 │       "import": "./dist/esm/index.js",
+         ╵       ~~~~~~~~
+
+  The "require" condition comes earlier and will be used for all "require" calls:
+
+    package.json:13:6:
+      13 │       "require": "./dist/index.js",
+         ╵       ~~~~~~~~~
+
+
+CJS dist/index.js     5.74 KB
+CJS dist/index.js.map 9.86 KB
+CJS ⚡️ Build success in 90ms
+ESM dist/esm/index.js     3.77 KB
+ESM dist/esm/index.js.map 9.73 KB
+ESM ⚡️ Build success in 91ms
 DTS Build start
-DTS ⚡️ Build success in 5608ms
-DTS dist/index.d.ts  1.50 KB
-DTS dist/index.d.mts 1.50 KB
-Done in 7.12s.
+DTS ⚡️ Build success in 3441ms
+DTS dist/index.d.ts  1.31 KB
+DTS dist/index.d.mts 1.31 KB
+Done in 4.82s.

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @sproutsocial/seeds-react-image
 
+## 1.0.29
+
+### Patch Changes
+
+- c36361c: Migrate seeds-react-image to the hybrid Tailwind pattern. Adds ImageTailwind
+  (pure CSS-class img leaf) and ImageHybrid (routes to the styled-components path
+  when styled-system props are present, Tailwind otherwise); Image now re-exports
+  the hybrid. Component CSS ships via the racine components.css aggregate. No
+  public API change — fully backward compatible.
+
 ## 1.0.28
 
 ### Patch Changes

package/dist/esm/index.js

@@ -1,5 +1,8 @@
 // src/Image.tsx
-import * as React from "react";
+import "react";
+
+// src/ImageHybrid.tsx
+import * as React2 from "react";
 
 // src/styles.ts
 import styled, { css } from "styled-components";
@@ -18,11 +21,46 @@ var ImageContainer = styled.img.attrs({
 `;
 var styles_default = ImageContainer;
 
-// src/Image.tsx
+// src/ImageTailwind.tsx
+import React from "react";
 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 ImageTailwind = React.forwardRef(({ isLoading, className, ...rest }, ref) => /* @__PURE__ */ jsx(
+  "img",
+  {
+    ref,
+    className: cn(
+      "Image",
+      "seeds-image",
+      { "seeds-image-loading": !!isLoading },
+      className
+    ),
+    ...rest
+  }
+));
+ImageTailwind.displayName = "ImageTailwind";
+
+// src/ImageHybrid.tsx
+import { hasStyledProps } from "@sproutsocial/seeds-react-system-props";
+import { jsx as jsx2 } from "react/jsx-runtime";
 var noop = () => {
 };
-var Image = class extends React.Component {
+var ImageHybrid = class extends React2.Component {
   static defaultProps = {
     title: "",
     onError: noop,
@@ -70,34 +108,62 @@ var Image = class extends React.Component {
     this.props.onClick();
   };
   render() {
-    const { alt, title, onClick, onError, onLoad, src, qa, ...rest } = this.props;
-    return /* @__PURE__ */ jsx(
-      styles_default,
-      {
-        isLoading: !this.state.didLoad,
-        ref: (img) => this.imageRef = img,
-        onClick: this.onClick,
-        src: this.state.imageUrl,
-        onError: (e) => this.onError(e),
-        onLoad: this.onLoad,
-        alt,
-        title,
-        "data-qa-image": title ? title : alt ? alt : "",
-        "data-qa-image-src": src || "",
-        ...qa,
-        ...rest
-      }
-    );
+    const {
+      alt,
+      title,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      onClick,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      onError,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      onLoad,
+      src,
+      qa,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      defaultImage,
+      ...rest
+    } = this.props;
+    const isLoading = !this.state.didLoad;
+    const refCb = (img) => this.imageRef = img;
+    const shared = {
+      onClick: this.onClick,
+      src: this.state.imageUrl,
+      onError: (e) => this.onError(e),
+      onLoad: this.onLoad,
+      alt,
+      title,
+      "data-qa-image": title ? title : alt ? alt : "",
+      "data-qa-image-src": src || "",
+      ...qa,
+      ...rest
+    };
+    if (hasStyledProps(rest)) {
+      return /* @__PURE__ */ jsx2(styles_default, { ref: refCb, isLoading, ...shared });
+    }
+    return /* @__PURE__ */ jsx2(ImageTailwind, { ref: refCb, isLoading, ...shared });
   }
 };
 
+// src/Image.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var noop2 = () => {
+};
+var Image = (props) => /* @__PURE__ */ jsx3(ImageHybrid, { ...props });
+Image.defaultProps = {
+  title: "",
+  onError: noop2,
+  onClick: noop2,
+  onLoad: noop2
+};
+var Image_default = Image;
+
 // src/ImageTypes.ts
 import "react";
 
 // src/index.ts
-var index_default = Image;
+var index_default = Image_default;
 export {
-  Image,
+  Image_default as Image,
   index_default as default
 };
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Image.tsx","../../src/styles.ts","../../src/ImageTypes.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport ImageContainer from \"./styles\";\nimport type { TypeImageProps } from \"./ImageTypes\";\n\ntype TypeState = {\n  didError: boolean;\n  didLoad: boolean;\n  imageUrl: string;\n};\n\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nconst noop = () => {};\n\nexport default class Image extends React.Component<TypeImageProps, TypeState> {\n  static defaultProps = {\n    title: \"\",\n    onError: noop,\n    onClick: noop,\n    onLoad: noop,\n  };\n\n  override state = {\n    didError: false,\n    didLoad: false,\n    imageUrl: this.props.src,\n  };\n\n  imageRef?: HTMLImageElement | null;\n\n  override componentDidMount() {\n    // eslint-disable-next-line react/no-did-mount-set-state\n    if (this.imageRef) {\n      this.setState({\n        didLoad: this.imageRef.complete,\n      });\n    }\n  }\n\n  override componentDidUpdate(prevProps: TypeImageProps) {\n    if (this.props.src !== prevProps.src) {\n      this.setState({\n        didError: false,\n        didLoad: false,\n        imageUrl: this.props.src,\n      });\n    }\n  }\n\n  onError = (e: React.SyntheticEvent<HTMLImageElement, Event>) => {\n    if (!this.state.didError && this.props.defaultImage) {\n      this.setState({\n        didError: true,\n        imageUrl: this.props.defaultImage,\n      });\n    }\n\n    this.props.onError(e);\n  };\n\n  onLoad = () => {\n    this.setState({\n      didLoad: true,\n    });\n    this.props.onLoad();\n  };\n\n  onClick = () => {\n    this.props.onClick();\n  };\n\n  override render() {\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    const { alt, title, onClick, onError, onLoad, src, qa, ...rest } =\n      this.props;\n    return (\n      <ImageContainer\n        isLoading={!this.state.didLoad}\n        ref={(img) => (this.imageRef = img)}\n        onClick={this.onClick}\n        src={this.state.imageUrl}\n        onError={(e: React.SyntheticEvent<HTMLImageElement, Event>) =>\n          this.onError(e)\n        }\n        onLoad={this.onLoad}\n        alt={alt}\n        title={title}\n        data-qa-image={title ? title : alt ? alt : \"\"}\n        data-qa-image-src={src || \"\"}\n        {...(qa as any)}\n        {...rest}\n      />\n    );\n  }\n}\n","import styled, { css } from \"styled-components\";\nimport { COMMON, LAYOUT } from \"@sproutsocial/seeds-react-system-props\";\n\ninterface ImageContainerProps {\n  isLoading?: boolean;\n}\nconst ImageContainer = styled.img.attrs({\n  className: \"Image\",\n})<ImageContainerProps>`\n  display: block;\n\n  ${(props) =>\n    props.isLoading &&\n    css`\n      opacity: 0;\n    `}\n\n  ${COMMON}\n  ${LAYOUT}\n`;\n\nexport default ImageContainer;\n","import * as React from \"react\";\nimport type {\n  TypeSystemCommonProps,\n  TypeSystemLayoutProps,\n  TypeStyledComponentsCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\n\nexport interface TypeImageProps\n  extends TypeStyledComponentsCommonProps,\n    TypeSystemCommonProps,\n    TypeSystemLayoutProps,\n    Omit<React.ComponentPropsWithoutRef<\"img\">, \"color\" | \"height\" | \"width\"> {\n  src: string;\n\n  /** Alt text is required for non-decorative images */\n  alt: string;\n  title: string;\n  onError: (e: React.SyntheticEvent<HTMLImageElement, Event>) => void;\n  onClick: () => void;\n\n  /** A URL for a default image to load if the source image is not available */\n  defaultImage?: string;\n  onLoad: () => void;\n  qa?: object;\n}\n","import Image from \"./Image\";\n\nexport default Image;\nexport { Image };\nexport * from \"./ImageTypes\";\n"],"mappings":";AAAA,YAAY,WAAW;;;ACAvB,OAAO,UAAU,WAAW;AAC5B,SAAS,QAAQ,cAAc;AAK/B,IAAM,iBAAiB,OAAO,IAAI,MAAM;AAAA,EACtC,WAAW;AACb,CAAC;AAAA;AAAA;AAAA,IAGG,CAAC,UACD,MAAM,aACN;AAAA;AAAA,KAEC;AAAA;AAAA,IAED,MAAM;AAAA,IACN,MAAM;AAAA;AAGV,IAAO,iBAAQ;;;ADsDT;AAhEN,IAAM,OAAO,MAAM;AAAC;AAEpB,IAAqB,QAArB,cAAyC,gBAAqC;AAAA,EAC5E,OAAO,eAAe;AAAA,IACpB,OAAO;AAAA,IACP,SAAS;AAAA,IACT,SAAS;AAAA,IACT,QAAQ;AAAA,EACV;AAAA,EAES,QAAQ;AAAA,IACf,UAAU;AAAA,IACV,SAAS;AAAA,IACT,UAAU,KAAK,MAAM;AAAA,EACvB;AAAA,EAEA;AAAA,EAES,oBAAoB;AAE3B,QAAI,KAAK,UAAU;AACjB,WAAK,SAAS;AAAA,QACZ,SAAS,KAAK,SAAS;AAAA,MACzB,CAAC;AAAA,IACH;AAAA,EACF;AAAA,EAES,mBAAmB,WAA2B;AACrD,QAAI,KAAK,MAAM,QAAQ,UAAU,KAAK;AACpC,WAAK,SAAS;AAAA,QACZ,UAAU;AAAA,QACV,SAAS;AAAA,QACT,UAAU,KAAK,MAAM;AAAA,MACvB,CAAC;AAAA,IACH;AAAA,EACF;AAAA,EAEA,UAAU,CAAC,MAAqD;AAC9D,QAAI,CAAC,KAAK,MAAM,YAAY,KAAK,MAAM,cAAc;AACnD,WAAK,SAAS;AAAA,QACZ,UAAU;AAAA,QACV,UAAU,KAAK,MAAM;AAAA,MACvB,CAAC;AAAA,IACH;AAEA,SAAK,MAAM,QAAQ,CAAC;AAAA,EACtB;AAAA,EAEA,SAAS,MAAM;AACb,SAAK,SAAS;AAAA,MACZ,SAAS;AAAA,IACX,CAAC;AACD,SAAK,MAAM,OAAO;AAAA,EACpB;AAAA,EAEA,UAAU,MAAM;AACd,SAAK,MAAM,QAAQ;AAAA,EACrB;AAAA,EAES,SAAS;AAEhB,UAAM,EAAE,KAAK,OAAO,SAAS,SAAS,QAAQ,KAAK,IAAI,GAAG,KAAK,IAC7D,KAAK;AACP,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,CAAC,KAAK,MAAM;AAAA,QACvB,KAAK,CAAC,QAAS,KAAK,WAAW;AAAA,QAC/B,SAAS,KAAK;AAAA,QACd,KAAK,KAAK,MAAM;AAAA,QAChB,SAAS,CAAC,MACR,KAAK,QAAQ,CAAC;AAAA,QAEhB,QAAQ,KAAK;AAAA,QACb;AAAA,QACA;AAAA,QACA,iBAAe,QAAQ,QAAQ,MAAM,MAAM;AAAA,QAC3C,qBAAmB,OAAO;AAAA,QACzB,GAAI;AAAA,QACJ,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;;;AE7FA,OAAuB;;;ACEvB,IAAO,gBAAQ;","names":[]}
+{"version":3,"sources":["../../src/Image.tsx","../../src/ImageHybrid.tsx","../../src/styles.ts","../../src/ImageTailwind.tsx","../../src/ImageTypes.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport ImageHybrid from \"./ImageHybrid\";\nimport type { TypeImageProps } from \"./ImageTypes\";\n\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nconst noop = () => {};\n\n/**\n * Image component. Automatically routes between the Tailwind implementation\n * (preferred) and the styled-components implementation (for consumers using\n * system props or a styled() extension). The load/error state lives in\n * ImageHybrid so behavior is identical on both paths.\n */\nconst Image = (props: TypeImageProps) => <ImageHybrid {...props} />;\n\n// Preserve the original public type surface: defaultProps keep title/onError/\n// onClick/onLoad optional at the JSX call site (these are required in\n// TypeImageProps). The defaults are applied before reaching ImageHybrid.\nImage.defaultProps = {\n  title: \"\",\n  onError: noop,\n  onClick: noop,\n  onLoad: noop,\n};\n\nexport default Image;\n","/**\n * Hybrid Image Component\n * Owns the load/error state + lifecycle in ONE place and switches only the\n * rendered leaf: the styled-components element when styled-system props are\n * present, otherwise the lighter Tailwind <img>.\n */\n\nimport * as React from \"react\";\nimport ImageContainer from \"./styles\"; // Styled-components version\nimport { ImageTailwind } from \"./ImageTailwind\"; // Tailwind version\nimport { hasStyledProps } from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeImageProps } from \"./ImageTypes\";\n\ntype TypeState = {\n  didError: boolean;\n  didLoad: boolean;\n  imageUrl: string;\n};\n\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nconst noop = () => {};\n\nexport default class ImageHybrid extends React.Component<\n  TypeImageProps,\n  TypeState\n> {\n  static defaultProps = {\n    title: \"\",\n    onError: noop,\n    onClick: noop,\n    onLoad: noop,\n  };\n\n  override state = {\n    didError: false,\n    didLoad: false,\n    imageUrl: this.props.src,\n  };\n\n  imageRef?: HTMLImageElement | null;\n\n  override componentDidMount() {\n    // eslint-disable-next-line react/no-did-mount-set-state\n    if (this.imageRef) {\n      this.setState({\n        didLoad: this.imageRef.complete,\n      });\n    }\n  }\n\n  override componentDidUpdate(prevProps: TypeImageProps) {\n    if (this.props.src !== prevProps.src) {\n      this.setState({\n        didError: false,\n        didLoad: false,\n        imageUrl: this.props.src,\n      });\n    }\n  }\n\n  onError = (e: React.SyntheticEvent<HTMLImageElement, Event>) => {\n    if (!this.state.didError && this.props.defaultImage) {\n      this.setState({\n        didError: true,\n        imageUrl: this.props.defaultImage,\n      });\n    }\n\n    this.props.onError(e);\n  };\n\n  onLoad = () => {\n    this.setState({\n      didLoad: true,\n    });\n    this.props.onLoad();\n  };\n\n  onClick = () => {\n    this.props.onClick();\n  };\n\n  override render() {\n    // defaultImage is consumed by onError (this.props.defaultImage) and must be\n    // pulled out of rest so it never reaches the DOM <img> on the Tailwind path\n    // (the styled-components leaf filtered it implicitly; a plain <img> does not).\n    const {\n      alt,\n      title,\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      onClick,\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      onError,\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      onLoad,\n      src,\n      qa,\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      defaultImage,\n      ...rest\n    } = this.props;\n    const isLoading = !this.state.didLoad;\n    const refCb = (img: HTMLImageElement | null) => (this.imageRef = img);\n    const shared = {\n      onClick: this.onClick,\n      src: this.state.imageUrl,\n      onError: (e: React.SyntheticEvent<HTMLImageElement, Event>) =>\n        this.onError(e),\n      onLoad: this.onLoad,\n      alt,\n      title,\n      \"data-qa-image\": title ? title : alt ? alt : \"\",\n      \"data-qa-image-src\": src || \"\",\n      ...(qa as any),\n      ...rest,\n    };\n\n    if (hasStyledProps(rest)) {\n      // Legacy styled-components leaf — styles.ts unchanged.\n      return <ImageContainer ref={refCb} isLoading={isLoading} {...shared} />;\n    }\n\n    // Tailwind leaf (preferred - lighter, no styled-components runtime).\n    return <ImageTailwind ref={refCb} isLoading={isLoading} {...shared} />;\n  }\n}\n","import styled, { css } from \"styled-components\";\nimport { COMMON, LAYOUT } from \"@sproutsocial/seeds-react-system-props\";\n\ninterface ImageContainerProps {\n  isLoading?: boolean;\n}\nconst ImageContainer = styled.img.attrs({\n  className: \"Image\",\n})<ImageContainerProps>`\n  display: block;\n\n  ${(props) =>\n    props.isLoading &&\n    css`\n      opacity: 0;\n    `}\n\n  ${COMMON}\n  ${LAYOUT}\n`;\n\nexport default ImageContainer;\n","/**\n * Tailwind CSS implementation of Image component\n * Uses Seeds image CSS classes from image.css\n */\n\nimport React from \"react\";\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\ntype TypeImageTailwindProps = React.ComponentPropsWithoutRef<\"img\"> & {\n  isLoading?: boolean;\n};\n\nexport const ImageTailwind = React.forwardRef<\n  HTMLImageElement,\n  TypeImageTailwindProps\n>(({ isLoading, className, ...rest }, ref) => (\n  <img\n    ref={ref}\n    // Preserve the legacy \"Image\" marker class (set by styles.ts's .attrs)\n    // for any consumer selectors targeting it.\n    className={cn(\n      \"Image\",\n      \"seeds-image\",\n      { \"seeds-image-loading\": !!isLoading },\n      className\n    )}\n    {...rest}\n  />\n));\n\nImageTailwind.displayName = \"ImageTailwind\";\n","import * as React from \"react\";\nimport type {\n  TypeSystemCommonProps,\n  TypeSystemLayoutProps,\n  TypeStyledComponentsCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\n\nexport interface TypeImageProps\n  extends TypeStyledComponentsCommonProps,\n    TypeSystemCommonProps,\n    TypeSystemLayoutProps,\n    Omit<React.ComponentPropsWithoutRef<\"img\">, \"color\" | \"height\" | \"width\"> {\n  src: string;\n\n  /** Alt text is required for non-decorative images */\n  alt: string;\n  title: string;\n  onError: (e: React.SyntheticEvent<HTMLImageElement, Event>) => void;\n  onClick: () => void;\n\n  /** A URL for a default image to load if the source image is not available */\n  defaultImage?: string;\n  onLoad: () => void;\n  qa?: object;\n}\n","import Image from \"./Image\";\n\nexport default Image;\nexport { Image };\nexport * from \"./ImageTypes\";\n"],"mappings":"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","names":["React","jsx","jsx","noop"]}

package/dist/image.css

@@ -0,0 +1,18 @@
+/**
+ * Seeds Image component classes
+ * Use these instead of writing out individual Tailwind utility classes.
+ *
+ * Usage:
+ *   <img class="seeds-image" />
+ *   <img class="seeds-image seeds-image-loading" />
+ */
+
+@layer components {
+  .seeds-image {
+    display: block;
+  }
+
+  .seeds-image-loading {
+    opacity: 0;
+  }
+}

package/dist/index.d.mts

@@ -15,30 +15,20 @@ interface TypeImageProps extends TypeStyledComponentsCommonProps, TypeSystemComm
     qa?: object;
 }
 
-type TypeState = {
-    didError: boolean;
-    didLoad: boolean;
-    imageUrl: string;
-};
-declare class Image extends React.Component<TypeImageProps, TypeState> {
-    static defaultProps: {
+/**
+ * Image component. Automatically routes between the Tailwind implementation
+ * (preferred) and the styled-components implementation (for consumers using
+ * system props or a styled() extension). The load/error state lives in
+ * ImageHybrid so behavior is identical on both paths.
+ */
+declare const Image: {
+    (props: TypeImageProps): react_jsx_runtime.JSX.Element;
+    defaultProps: {
         title: string;
         onError: () => void;
         onClick: () => void;
         onLoad: () => void;
     };
-    state: {
-        didError: boolean;
-        didLoad: boolean;
-        imageUrl: string;
-    };
-    imageRef?: HTMLImageElement | null;
-    componentDidMount(): void;
-    componentDidUpdate(prevProps: TypeImageProps): void;
-    onError: (e: React.SyntheticEvent<HTMLImageElement, Event>) => void;
-    onLoad: () => void;
-    onClick: () => void;
-    render(): react_jsx_runtime.JSX.Element;
-}
+};
 
 export { Image, type TypeImageProps, Image as default };

package/dist/index.d.ts

@@ -15,30 +15,20 @@ interface TypeImageProps extends TypeStyledComponentsCommonProps, TypeSystemComm
     qa?: object;
 }
 
-type TypeState = {
-    didError: boolean;
-    didLoad: boolean;
-    imageUrl: string;
-};
-declare class Image extends React.Component<TypeImageProps, TypeState> {
-    static defaultProps: {
+/**
+ * Image component. Automatically routes between the Tailwind implementation
+ * (preferred) and the styled-components implementation (for consumers using
+ * system props or a styled() extension). The load/error state lives in
+ * ImageHybrid so behavior is identical on both paths.
+ */
+declare const Image: {
+    (props: TypeImageProps): react_jsx_runtime.JSX.Element;
+    defaultProps: {
         title: string;
         onError: () => void;
         onClick: () => void;
         onLoad: () => void;
     };
-    state: {
-        didError: boolean;
-        didLoad: boolean;
-        imageUrl: string;
-    };
-    imageRef?: HTMLImageElement | null;
-    componentDidMount(): void;
-    componentDidUpdate(prevProps: TypeImageProps): void;
-    onError: (e: React.SyntheticEvent<HTMLImageElement, Event>) => void;
-    onLoad: () => void;
-    onClick: () => void;
-    render(): react_jsx_runtime.JSX.Element;
-}
+};
 
 export { Image, type TypeImageProps, Image as default };

package/dist/index.js

@@ -30,13 +30,16 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
-  Image: () => Image,
+  Image: () => Image_default,
   default: () => index_default
 });
 module.exports = __toCommonJS(index_exports);
 
 // src/Image.tsx
-var React = __toESM(require("react"));
+var React3 = require("react");
+
+// src/ImageHybrid.tsx
+var React2 = __toESM(require("react"));
 
 // src/styles.ts
 var import_styled_components = __toESM(require("styled-components"));
@@ -55,11 +58,46 @@ var ImageContainer = import_styled_components.default.img.attrs({
 `;
 var styles_default = ImageContainer;
 
-// src/Image.tsx
+// src/ImageTailwind.tsx
+var import_react = __toESM(require("react"));
 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 ImageTailwind = import_react.default.forwardRef(({ isLoading, className, ...rest }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  "img",
+  {
+    ref,
+    className: cn(
+      "Image",
+      "seeds-image",
+      { "seeds-image-loading": !!isLoading },
+      className
+    ),
+    ...rest
+  }
+));
+ImageTailwind.displayName = "ImageTailwind";
+
+// src/ImageHybrid.tsx
+var import_seeds_react_system_props2 = require("@sproutsocial/seeds-react-system-props");
+var import_jsx_runtime2 = require("react/jsx-runtime");
 var noop = () => {
 };
-var Image = class extends React.Component {
+var ImageHybrid = class extends React2.Component {
   static defaultProps = {
     title: "",
     onError: noop,
@@ -107,32 +145,60 @@ var Image = class extends React.Component {
     this.props.onClick();
   };
   render() {
-    const { alt, title, onClick, onError, onLoad, src, qa, ...rest } = this.props;
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      styles_default,
-      {
-        isLoading: !this.state.didLoad,
-        ref: (img) => this.imageRef = img,
-        onClick: this.onClick,
-        src: this.state.imageUrl,
-        onError: (e) => this.onError(e),
-        onLoad: this.onLoad,
-        alt,
-        title,
-        "data-qa-image": title ? title : alt ? alt : "",
-        "data-qa-image-src": src || "",
-        ...qa,
-        ...rest
-      }
-    );
+    const {
+      alt,
+      title,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      onClick,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      onError,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      onLoad,
+      src,
+      qa,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      defaultImage,
+      ...rest
+    } = this.props;
+    const isLoading = !this.state.didLoad;
+    const refCb = (img) => this.imageRef = img;
+    const shared = {
+      onClick: this.onClick,
+      src: this.state.imageUrl,
+      onError: (e) => this.onError(e),
+      onLoad: this.onLoad,
+      alt,
+      title,
+      "data-qa-image": title ? title : alt ? alt : "",
+      "data-qa-image-src": src || "",
+      ...qa,
+      ...rest
+    };
+    if ((0, import_seeds_react_system_props2.hasStyledProps)(rest)) {
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(styles_default, { ref: refCb, isLoading, ...shared });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ImageTailwind, { ref: refCb, isLoading, ...shared });
   }
 };
 
+// src/Image.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var noop2 = () => {
+};
+var Image = (props) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ImageHybrid, { ...props });
+Image.defaultProps = {
+  title: "",
+  onError: noop2,
+  onClick: noop2,
+  onLoad: noop2
+};
+var Image_default = Image;
+
 // src/ImageTypes.ts
-var React2 = require("react");
+var React4 = require("react");
 
 // src/index.ts
-var index_default = Image;
+var index_default = Image_default;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Image

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/Image.tsx","../src/styles.ts","../src/ImageTypes.ts"],"sourcesContent":["import Image from \"./Image\";\n\nexport default Image;\nexport { Image };\nexport * from \"./ImageTypes\";\n","import * as React from \"react\";\nimport ImageContainer from \"./styles\";\nimport type { TypeImageProps } from \"./ImageTypes\";\n\ntype TypeState = {\n  didError: boolean;\n  didLoad: boolean;\n  imageUrl: string;\n};\n\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nconst noop = () => {};\n\nexport default class Image extends React.Component<TypeImageProps, TypeState> {\n  static defaultProps = {\n    title: \"\",\n    onError: noop,\n    onClick: noop,\n    onLoad: noop,\n  };\n\n  override state = {\n    didError: false,\n    didLoad: false,\n    imageUrl: this.props.src,\n  };\n\n  imageRef?: HTMLImageElement | null;\n\n  override componentDidMount() {\n    // eslint-disable-next-line react/no-did-mount-set-state\n    if (this.imageRef) {\n      this.setState({\n        didLoad: this.imageRef.complete,\n      });\n    }\n  }\n\n  override componentDidUpdate(prevProps: TypeImageProps) {\n    if (this.props.src !== prevProps.src) {\n      this.setState({\n        didError: false,\n        didLoad: false,\n        imageUrl: this.props.src,\n      });\n    }\n  }\n\n  onError = (e: React.SyntheticEvent<HTMLImageElement, Event>) => {\n    if (!this.state.didError && this.props.defaultImage) {\n      this.setState({\n        didError: true,\n        imageUrl: this.props.defaultImage,\n      });\n    }\n\n    this.props.onError(e);\n  };\n\n  onLoad = () => {\n    this.setState({\n      didLoad: true,\n    });\n    this.props.onLoad();\n  };\n\n  onClick = () => {\n    this.props.onClick();\n  };\n\n  override render() {\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    const { alt, title, onClick, onError, onLoad, src, qa, ...rest } =\n      this.props;\n    return (\n      <ImageContainer\n        isLoading={!this.state.didLoad}\n        ref={(img) => (this.imageRef = img)}\n        onClick={this.onClick}\n        src={this.state.imageUrl}\n        onError={(e: React.SyntheticEvent<HTMLImageElement, Event>) =>\n          this.onError(e)\n        }\n        onLoad={this.onLoad}\n        alt={alt}\n        title={title}\n        data-qa-image={title ? title : alt ? alt : \"\"}\n        data-qa-image-src={src || \"\"}\n        {...(qa as any)}\n        {...rest}\n      />\n    );\n  }\n}\n","import styled, { css } from \"styled-components\";\nimport { COMMON, LAYOUT } from \"@sproutsocial/seeds-react-system-props\";\n\ninterface ImageContainerProps {\n  isLoading?: boolean;\n}\nconst ImageContainer = styled.img.attrs({\n  className: \"Image\",\n})<ImageContainerProps>`\n  display: block;\n\n  ${(props) =>\n    props.isLoading &&\n    css`\n      opacity: 0;\n    `}\n\n  ${COMMON}\n  ${LAYOUT}\n`;\n\nexport default ImageContainer;\n","import * as React from \"react\";\nimport type {\n  TypeSystemCommonProps,\n  TypeSystemLayoutProps,\n  TypeStyledComponentsCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\n\nexport interface TypeImageProps\n  extends TypeStyledComponentsCommonProps,\n    TypeSystemCommonProps,\n    TypeSystemLayoutProps,\n    Omit<React.ComponentPropsWithoutRef<\"img\">, \"color\" | \"height\" | \"width\"> {\n  src: string;\n\n  /** Alt text is required for non-decorative images */\n  alt: string;\n  title: string;\n  onError: (e: React.SyntheticEvent<HTMLImageElement, Event>) => void;\n  onClick: () => void;\n\n  /** A URL for a default image to load if the source image is not available */\n  defaultImage?: string;\n  onLoad: () => void;\n  qa?: object;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,YAAuB;;;ACAvB,+BAA4B;AAC5B,sCAA+B;AAK/B,IAAM,iBAAiB,yBAAAA,QAAO,IAAI,MAAM;AAAA,EACtC,WAAW;AACb,CAAC;AAAA;AAAA;AAAA,IAGG,CAAC,UACD,MAAM,aACN;AAAA;AAAA,KAEC;AAAA;AAAA,IAED,sCAAM;AAAA,IACN,sCAAM;AAAA;AAGV,IAAO,iBAAQ;;;ADsDT;AAhEN,IAAM,OAAO,MAAM;AAAC;AAEpB,IAAqB,QAArB,cAAyC,gBAAqC;AAAA,EAC5E,OAAO,eAAe;AAAA,IACpB,OAAO;AAAA,IACP,SAAS;AAAA,IACT,SAAS;AAAA,IACT,QAAQ;AAAA,EACV;AAAA,EAES,QAAQ;AAAA,IACf,UAAU;AAAA,IACV,SAAS;AAAA,IACT,UAAU,KAAK,MAAM;AAAA,EACvB;AAAA,EAEA;AAAA,EAES,oBAAoB;AAE3B,QAAI,KAAK,UAAU;AACjB,WAAK,SAAS;AAAA,QACZ,SAAS,KAAK,SAAS;AAAA,MACzB,CAAC;AAAA,IACH;AAAA,EACF;AAAA,EAES,mBAAmB,WAA2B;AACrD,QAAI,KAAK,MAAM,QAAQ,UAAU,KAAK;AACpC,WAAK,SAAS;AAAA,QACZ,UAAU;AAAA,QACV,SAAS;AAAA,QACT,UAAU,KAAK,MAAM;AAAA,MACvB,CAAC;AAAA,IACH;AAAA,EACF;AAAA,EAEA,UAAU,CAAC,MAAqD;AAC9D,QAAI,CAAC,KAAK,MAAM,YAAY,KAAK,MAAM,cAAc;AACnD,WAAK,SAAS;AAAA,QACZ,UAAU;AAAA,QACV,UAAU,KAAK,MAAM;AAAA,MACvB,CAAC;AAAA,IACH;AAEA,SAAK,MAAM,QAAQ,CAAC;AAAA,EACtB;AAAA,EAEA,SAAS,MAAM;AACb,SAAK,SAAS;AAAA,MACZ,SAAS;AAAA,IACX,CAAC;AACD,SAAK,MAAM,OAAO;AAAA,EACpB;AAAA,EAEA,UAAU,MAAM;AACd,SAAK,MAAM,QAAQ;AAAA,EACrB;AAAA,EAES,SAAS;AAEhB,UAAM,EAAE,KAAK,OAAO,SAAS,SAAS,QAAQ,KAAK,IAAI,GAAG,KAAK,IAC7D,KAAK;AACP,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,CAAC,KAAK,MAAM;AAAA,QACvB,KAAK,CAAC,QAAS,KAAK,WAAW;AAAA,QAC/B,SAAS,KAAK;AAAA,QACd,KAAK,KAAK,MAAM;AAAA,QAChB,SAAS,CAAC,MACR,KAAK,QAAQ,CAAC;AAAA,QAEhB,QAAQ,KAAK;AAAA,QACb;AAAA,QACA;AAAA,QACA,iBAAe,QAAQ,QAAQ,MAAM,MAAM;AAAA,QAC3C,qBAAmB,OAAO;AAAA,QACzB,GAAI;AAAA,QACJ,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;;;AE7FA,IAAAC,SAAuB;;;AHEvB,IAAO,gBAAQ;","names":["styled","React"]}
+{"version":3,"sources":["../src/index.ts","../src/Image.tsx","../src/ImageHybrid.tsx","../src/styles.ts","../src/ImageTailwind.tsx","../src/ImageTypes.ts"],"sourcesContent":["import Image from \"./Image\";\n\nexport default Image;\nexport { Image };\nexport * from \"./ImageTypes\";\n","import * as React from \"react\";\nimport ImageHybrid from \"./ImageHybrid\";\nimport type { TypeImageProps } from \"./ImageTypes\";\n\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nconst noop = () => {};\n\n/**\n * Image component. Automatically routes between the Tailwind implementation\n * (preferred) and the styled-components implementation (for consumers using\n * system props or a styled() extension). The load/error state lives in\n * ImageHybrid so behavior is identical on both paths.\n */\nconst Image = (props: TypeImageProps) => <ImageHybrid {...props} />;\n\n// Preserve the original public type surface: defaultProps keep title/onError/\n// onClick/onLoad optional at the JSX call site (these are required in\n// TypeImageProps). The defaults are applied before reaching ImageHybrid.\nImage.defaultProps = {\n  title: \"\",\n  onError: noop,\n  onClick: noop,\n  onLoad: noop,\n};\n\nexport default Image;\n","/**\n * Hybrid Image Component\n * Owns the load/error state + lifecycle in ONE place and switches only the\n * rendered leaf: the styled-components element when styled-system props are\n * present, otherwise the lighter Tailwind <img>.\n */\n\nimport * as React from \"react\";\nimport ImageContainer from \"./styles\"; // Styled-components version\nimport { ImageTailwind } from \"./ImageTailwind\"; // Tailwind version\nimport { hasStyledProps } from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeImageProps } from \"./ImageTypes\";\n\ntype TypeState = {\n  didError: boolean;\n  didLoad: boolean;\n  imageUrl: string;\n};\n\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nconst noop = () => {};\n\nexport default class ImageHybrid extends React.Component<\n  TypeImageProps,\n  TypeState\n> {\n  static defaultProps = {\n    title: \"\",\n    onError: noop,\n    onClick: noop,\n    onLoad: noop,\n  };\n\n  override state = {\n    didError: false,\n    didLoad: false,\n    imageUrl: this.props.src,\n  };\n\n  imageRef?: HTMLImageElement | null;\n\n  override componentDidMount() {\n    // eslint-disable-next-line react/no-did-mount-set-state\n    if (this.imageRef) {\n      this.setState({\n        didLoad: this.imageRef.complete,\n      });\n    }\n  }\n\n  override componentDidUpdate(prevProps: TypeImageProps) {\n    if (this.props.src !== prevProps.src) {\n      this.setState({\n        didError: false,\n        didLoad: false,\n        imageUrl: this.props.src,\n      });\n    }\n  }\n\n  onError = (e: React.SyntheticEvent<HTMLImageElement, Event>) => {\n    if (!this.state.didError && this.props.defaultImage) {\n      this.setState({\n        didError: true,\n        imageUrl: this.props.defaultImage,\n      });\n    }\n\n    this.props.onError(e);\n  };\n\n  onLoad = () => {\n    this.setState({\n      didLoad: true,\n    });\n    this.props.onLoad();\n  };\n\n  onClick = () => {\n    this.props.onClick();\n  };\n\n  override render() {\n    // defaultImage is consumed by onError (this.props.defaultImage) and must be\n    // pulled out of rest so it never reaches the DOM <img> on the Tailwind path\n    // (the styled-components leaf filtered it implicitly; a plain <img> does not).\n    const {\n      alt,\n      title,\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      onClick,\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      onError,\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      onLoad,\n      src,\n      qa,\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      defaultImage,\n      ...rest\n    } = this.props;\n    const isLoading = !this.state.didLoad;\n    const refCb = (img: HTMLImageElement | null) => (this.imageRef = img);\n    const shared = {\n      onClick: this.onClick,\n      src: this.state.imageUrl,\n      onError: (e: React.SyntheticEvent<HTMLImageElement, Event>) =>\n        this.onError(e),\n      onLoad: this.onLoad,\n      alt,\n      title,\n      \"data-qa-image\": title ? title : alt ? alt : \"\",\n      \"data-qa-image-src\": src || \"\",\n      ...(qa as any),\n      ...rest,\n    };\n\n    if (hasStyledProps(rest)) {\n      // Legacy styled-components leaf — styles.ts unchanged.\n      return <ImageContainer ref={refCb} isLoading={isLoading} {...shared} />;\n    }\n\n    // Tailwind leaf (preferred - lighter, no styled-components runtime).\n    return <ImageTailwind ref={refCb} isLoading={isLoading} {...shared} />;\n  }\n}\n","import styled, { css } from \"styled-components\";\nimport { COMMON, LAYOUT } from \"@sproutsocial/seeds-react-system-props\";\n\ninterface ImageContainerProps {\n  isLoading?: boolean;\n}\nconst ImageContainer = styled.img.attrs({\n  className: \"Image\",\n})<ImageContainerProps>`\n  display: block;\n\n  ${(props) =>\n    props.isLoading &&\n    css`\n      opacity: 0;\n    `}\n\n  ${COMMON}\n  ${LAYOUT}\n`;\n\nexport default ImageContainer;\n","/**\n * Tailwind CSS implementation of Image component\n * Uses Seeds image CSS classes from image.css\n */\n\nimport React from \"react\";\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\ntype TypeImageTailwindProps = React.ComponentPropsWithoutRef<\"img\"> & {\n  isLoading?: boolean;\n};\n\nexport const ImageTailwind = React.forwardRef<\n  HTMLImageElement,\n  TypeImageTailwindProps\n>(({ isLoading, className, ...rest }, ref) => (\n  <img\n    ref={ref}\n    // Preserve the legacy \"Image\" marker class (set by styles.ts's .attrs)\n    // for any consumer selectors targeting it.\n    className={cn(\n      \"Image\",\n      \"seeds-image\",\n      { \"seeds-image-loading\": !!isLoading },\n      className\n    )}\n    {...rest}\n  />\n));\n\nImageTailwind.displayName = \"ImageTailwind\";\n","import * as React from \"react\";\nimport type {\n  TypeSystemCommonProps,\n  TypeSystemLayoutProps,\n  TypeStyledComponentsCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\n\nexport interface TypeImageProps\n  extends TypeStyledComponentsCommonProps,\n    TypeSystemCommonProps,\n    TypeSystemLayoutProps,\n    Omit<React.ComponentPropsWithoutRef<\"img\">, \"color\" | \"height\" | \"width\"> {\n  src: string;\n\n  /** Alt text is required for non-decorative images */\n  alt: string;\n  title: string;\n  onError: (e: React.SyntheticEvent<HTMLImageElement, Event>) => void;\n  onClick: () => void;\n\n  /** A URL for a default image to load if the source image is not available */\n  defaultImage?: string;\n  onLoad: () => void;\n  qa?: object;\n}\n"],"mappings":"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","names":["React","React","styled","React","import_seeds_react_system_props","import_jsx_runtime","import_jsx_runtime","noop","React"]}

package/package.json

@@ -1,15 +1,23 @@
 {
   "name": "@sproutsocial/seeds-react-image",
-  "version": "1.0.28",
+  "version": "1.0.29",
   "description": "Seeds React Image",
   "author": "Sprout Social, Inc.",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/esm/index.js",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./dist/image.css": "./dist/image.css"
+  },
   "scripts": {
-    "build": "tsup --dts",
-    "build:debug": "tsup --dts --metafile",
+    "build": "tsup --dts && cp src/image.css dist/image.css",
+    "build:debug": "tsup --dts --metafile && cp src/image.css dist/image.css",
     "dev": "tsup --watch --dts",
     "clean": "rm -rf .turbo dist",
     "clean:modules": "rm -rf node_modules",

package/postcss.config.js

@@ -0,0 +1,6 @@
+// Empty PostCSS config — prevents tsup from picking up the root postcss.config.js
+// (which runs Tailwind CSS and would fail without a tailwind.config.js in scope).
+// image.css uses plain CSS and needs no PostCSS processing.
+export default {
+  plugins: {},
+};

package/src/Image.stories.tsx

@@ -28,3 +28,18 @@ export const ExampleWithFallback: Story = {
     defaultImage: backupImgData,
   },
 };
+
+/**
+ * Passing Tailwind utility classes via `className` on a bare `<Image>` (no
+ * styled-system props) routes to the Tailwind leaf. Because `image.css` wraps
+ * its rules in `@layer components`, the unlayered utilities (`mx-200`, `p-300`,
+ * `inline-flex`) win the cascade and visibly override the component's own
+ * `.seeds-image` styles — proving the `@layer components` fix.
+ */
+export const TailwindOverrides: Story = {
+  args: {
+    src: "http://static01.nyt.com/images/2015/10/24/arts/24drakeart2/24drakeart2-master675.jpg",
+    alt: "Tailwind className overrides applied via @layer components",
+    className: "mx-200 p-300 inline-flex",
+  },
+};

package/src/Image.tsx

@@ -1,94 +1,26 @@
 import * as React from "react";
-import ImageContainer from "./styles";
+import ImageHybrid from "./ImageHybrid";
 import type { TypeImageProps } from "./ImageTypes";
 
-type TypeState = {
-  didError: boolean;
-  didLoad: boolean;
-  imageUrl: string;
-};
-
 // eslint-disable-next-line @typescript-eslint/no-empty-function
 const noop = () => {};
 
-export default class Image extends React.Component<TypeImageProps, TypeState> {
-  static defaultProps = {
-    title: "",
-    onError: noop,
-    onClick: noop,
-    onLoad: noop,
-  };
-
-  override state = {
-    didError: false,
-    didLoad: false,
-    imageUrl: this.props.src,
-  };
-
-  imageRef?: HTMLImageElement | null;
-
-  override componentDidMount() {
-    // eslint-disable-next-line react/no-did-mount-set-state
-    if (this.imageRef) {
-      this.setState({
-        didLoad: this.imageRef.complete,
-      });
-    }
-  }
-
-  override componentDidUpdate(prevProps: TypeImageProps) {
-    if (this.props.src !== prevProps.src) {
-      this.setState({
-        didError: false,
-        didLoad: false,
-        imageUrl: this.props.src,
-      });
-    }
-  }
-
-  onError = (e: React.SyntheticEvent<HTMLImageElement, Event>) => {
-    if (!this.state.didError && this.props.defaultImage) {
-      this.setState({
-        didError: true,
-        imageUrl: this.props.defaultImage,
-      });
-    }
-
-    this.props.onError(e);
-  };
-
-  onLoad = () => {
-    this.setState({
-      didLoad: true,
-    });
-    this.props.onLoad();
-  };
-
-  onClick = () => {
-    this.props.onClick();
-  };
+/**
+ * Image component. Automatically routes between the Tailwind implementation
+ * (preferred) and the styled-components implementation (for consumers using
+ * system props or a styled() extension). The load/error state lives in
+ * ImageHybrid so behavior is identical on both paths.
+ */
+const Image = (props: TypeImageProps) => <ImageHybrid {...props} />;
+
+// Preserve the original public type surface: defaultProps keep title/onError/
+// onClick/onLoad optional at the JSX call site (these are required in
+// TypeImageProps). The defaults are applied before reaching ImageHybrid.
+Image.defaultProps = {
+  title: "",
+  onError: noop,
+  onClick: noop,
+  onLoad: noop,
+};
 
-  override render() {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { alt, title, onClick, onError, onLoad, src, qa, ...rest } =
-      this.props;
-    return (
-      <ImageContainer
-        isLoading={!this.state.didLoad}
-        ref={(img) => (this.imageRef = img)}
-        onClick={this.onClick}
-        src={this.state.imageUrl}
-        onError={(e: React.SyntheticEvent<HTMLImageElement, Event>) =>
-          this.onError(e)
-        }
-        onLoad={this.onLoad}
-        alt={alt}
-        title={title}
-        data-qa-image={title ? title : alt ? alt : ""}
-        data-qa-image-src={src || ""}
-        {...(qa as any)}
-        {...rest}
-      />
-    );
-  }
-}
+export default Image;

package/src/ImageHybrid.tsx

@@ -0,0 +1,126 @@
+/**
+ * Hybrid Image Component
+ * Owns the load/error state + lifecycle in ONE place and switches only the
+ * rendered leaf: the styled-components element when styled-system props are
+ * present, otherwise the lighter Tailwind <img>.
+ */
+
+import * as React from "react";
+import ImageContainer from "./styles"; // Styled-components version
+import { ImageTailwind } from "./ImageTailwind"; // Tailwind version
+import { hasStyledProps } from "@sproutsocial/seeds-react-system-props";
+import type { TypeImageProps } from "./ImageTypes";
+
+type TypeState = {
+  didError: boolean;
+  didLoad: boolean;
+  imageUrl: string;
+};
+
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+const noop = () => {};
+
+export default class ImageHybrid extends React.Component<
+  TypeImageProps,
+  TypeState
+> {
+  static defaultProps = {
+    title: "",
+    onError: noop,
+    onClick: noop,
+    onLoad: noop,
+  };
+
+  override state = {
+    didError: false,
+    didLoad: false,
+    imageUrl: this.props.src,
+  };
+
+  imageRef?: HTMLImageElement | null;
+
+  override componentDidMount() {
+    // eslint-disable-next-line react/no-did-mount-set-state
+    if (this.imageRef) {
+      this.setState({
+        didLoad: this.imageRef.complete,
+      });
+    }
+  }
+
+  override componentDidUpdate(prevProps: TypeImageProps) {
+    if (this.props.src !== prevProps.src) {
+      this.setState({
+        didError: false,
+        didLoad: false,
+        imageUrl: this.props.src,
+      });
+    }
+  }
+
+  onError = (e: React.SyntheticEvent<HTMLImageElement, Event>) => {
+    if (!this.state.didError && this.props.defaultImage) {
+      this.setState({
+        didError: true,
+        imageUrl: this.props.defaultImage,
+      });
+    }
+
+    this.props.onError(e);
+  };
+
+  onLoad = () => {
+    this.setState({
+      didLoad: true,
+    });
+    this.props.onLoad();
+  };
+
+  onClick = () => {
+    this.props.onClick();
+  };
+
+  override render() {
+    // defaultImage is consumed by onError (this.props.defaultImage) and must be
+    // pulled out of rest so it never reaches the DOM <img> on the Tailwind path
+    // (the styled-components leaf filtered it implicitly; a plain <img> does not).
+    const {
+      alt,
+      title,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      onClick,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      onError,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      onLoad,
+      src,
+      qa,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      defaultImage,
+      ...rest
+    } = this.props;
+    const isLoading = !this.state.didLoad;
+    const refCb = (img: HTMLImageElement | null) => (this.imageRef = img);
+    const shared = {
+      onClick: this.onClick,
+      src: this.state.imageUrl,
+      onError: (e: React.SyntheticEvent<HTMLImageElement, Event>) =>
+        this.onError(e),
+      onLoad: this.onLoad,
+      alt,
+      title,
+      "data-qa-image": title ? title : alt ? alt : "",
+      "data-qa-image-src": src || "",
+      ...(qa as any),
+      ...rest,
+    };
+
+    if (hasStyledProps(rest)) {
+      // Legacy styled-components leaf — styles.ts unchanged.
+      return <ImageContainer ref={refCb} isLoading={isLoading} {...shared} />;
+    }
+
+    // Tailwind leaf (preferred - lighter, no styled-components runtime).
+    return <ImageTailwind ref={refCb} isLoading={isLoading} {...shared} />;
+  }
+}

package/src/ImageTailwind.tsx

@@ -0,0 +1,53 @@
+/**
+ * Tailwind CSS implementation of Image component
+ * Uses Seeds image CSS classes from image.css
+ */
+
+import React from "react";
+
+// Utility for merging class names properly
+function cn(
+  ...inputs: (string | undefined | null | false | Record<string, boolean>)[]
+): string {
+  const classes: string[] = [];
+
+  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(" ");
+}
+
+type TypeImageTailwindProps = React.ComponentPropsWithoutRef<"img"> & {
+  isLoading?: boolean;
+};
+
+export const ImageTailwind = React.forwardRef<
+  HTMLImageElement,
+  TypeImageTailwindProps
+>(({ isLoading, className, ...rest }, ref) => (
+  <img
+    ref={ref}
+    // Preserve the legacy "Image" marker class (set by styles.ts's .attrs)
+    // for any consumer selectors targeting it.
+    className={cn(
+      "Image",
+      "seeds-image",
+      { "seeds-image-loading": !!isLoading },
+      className
+    )}
+    {...rest}
+  />
+));
+
+ImageTailwind.displayName = "ImageTailwind";

package/src/__tests__/features.test.tsx

@@ -60,6 +60,39 @@ describe("Image", () => {
     );
   });
 
+  it("should render a plain img with the seeds-image class when no styled props are passed (Tailwind path)", () => {
+    render(
+      <Image
+        alt="image"
+        src="http://media3.giphy.com/media/jbxQLpOKN2URa/giphy.gif"
+      />
+    );
+    const img = screen.getByDataQaLabel({
+      "image-src": "http://media3.giphy.com/media/jbxQLpOKN2URa/giphy.gif",
+    });
+    expect(img.tagName).toBe("IMG");
+    expect(img).toHaveClass("seeds-image");
+  });
+
+  it("should route to the styled-components leaf when a styled-system prop (width) is passed", () => {
+    render(
+      <Image
+        alt="image"
+        src="http://media3.giphy.com/media/jbxQLpOKN2URa/giphy.gif"
+        width={1 / 2}
+      />
+    );
+    const img = screen.getByDataQaLabel({
+      "image-src": "http://media3.giphy.com/media/jbxQLpOKN2URa/giphy.gif",
+    });
+    // styled-components emits its generated class, never the static seeds-image class.
+    expect(img).not.toHaveClass("seeds-image");
+    expect(img).toHaveAttribute(
+      "src",
+      "http://media3.giphy.com/media/jbxQLpOKN2URa/giphy.gif"
+    );
+  });
+
   it("should update when the src prop changes", () => {
     const src1 = "http://media3.giphy.com/media/jbxQLpOKN2URa/giphy.gif";
     const src2 = "https://media3.giphy.com/media/gYZ7qO81g4dt6/giphy.gif";

package/src/css.d.ts

@@ -0,0 +1 @@
+declare module "*.css";

package/src/image.css

@@ -0,0 +1,18 @@
+/**
+ * Seeds Image component classes
+ * Use these instead of writing out individual Tailwind utility classes.
+ *
+ * Usage:
+ *   <img class="seeds-image" />
+ *   <img class="seeds-image seeds-image-loading" />
+ */
+
+@layer components {
+  .seeds-image {
+    display: block;
+  }
+
+  .seeds-image-loading {
+    opacity: 0;
+  }
+}