@asnewyla/image 0.2.0 → 0.2.1

package/dist/index.js

@@ -1,9 +1,33 @@
-'use strict';
+'use client';
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-var react = require('react');
-var jsxRuntime = require('react/jsx-runtime');
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Image: () => Image
+});
+module.exports = __toCommonJS(index_exports);
 
 // src/components/Image.tsx
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
 function ImageInner({
   alt,
   aspectRatio,
@@ -16,8 +40,8 @@ function ImageInner({
   onError,
   ...restProps
 }, ref) {
-  const [hasErrored, setHasErrored] = react.useState(false);
-  react.useEffect(() => {
+  const [hasErrored, setHasErrored] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(() => {
     setHasErrored(false);
   }, [src]);
   const resolvedSrc = hasErrored && fallback ? fallback : src;
@@ -25,7 +49,7 @@ function ImageInner({
     setHasErrored(true);
     onError?.(e);
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "img",
     {
       ref,
@@ -33,15 +57,16 @@ function ImageInner({
       alt,
       "data-fit": fit,
       "data-radius": radius || void 0,
-      className: ["xd-image", className].filter(Boolean).join(" "),
+      className: className ? `xd-image ${className}` : "xd-image",
       style: aspectRatio !== void 0 ? { aspectRatio, ...style } : style,
       onError: handleError,
       ...restProps
     }
   );
 }
-var Image = react.forwardRef(ImageInner);
-
-exports.Image = Image;
-//# sourceMappingURL=index.js.map
+var Image = (0, import_react.forwardRef)(ImageInner);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Image
+});
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Image.tsx"],"names":["useState","useEffect","jsx","forwardRef"],"mappings":";;;;;;AAoBA,SAAS,UAAA,CACP;AAAA,EACE,GAAA;AAAA,EACA,WAAA;AAAA,EACA,GAAA,GAAM,OAAA;AAAA,EACN,MAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAA;AAAA,EACA,SAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA;AAAA,EACA,GAAG;AACL,CAAA,EACA,GAAA,EACA;AACA,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAIA,eAAS,KAAK,CAAA;AAGlD,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,aAAA,CAAc,KAAK,CAAA;AAAA,EACrB,CAAA,EAAG,CAAC,GAAG,CAAC,CAAA;AAER,EAAA,MAAM,WAAA,GAAc,UAAA,IAAc,QAAA,GAAW,QAAA,GAAW,GAAA;AAExD,EAAA,MAAM,WAAA,GAAyD,CAAC,CAAA,KAAM;AACpE,IAAA,aAAA,CAAc,IAAI,CAAA;AAClB,IAAA,OAAA,GAAU,CAAC,CAAA;AAAA,EACb,CAAA;AAEA,EAAA,uBACEC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,GAAA,EAAK,WAAA;AAAA,MACL,GAAA;AAAA,MACA,UAAA,EAAU,GAAA;AAAA,MACV,eAAa,MAAA,IAAU,MAAA;AAAA,MACvB,SAAA,EAAW,CAAC,UAAA,EAAY,SAAS,EAAE,MAAA,CAAO,OAAO,CAAA,CAAE,IAAA,CAAK,GAAG,CAAA;AAAA,MAC3D,OAAO,WAAA,KAAgB,MAAA,GAAY,EAAE,WAAA,EAAa,GAAG,OAAM,GAAI,KAAA;AAAA,MAC/D,OAAA,EAAS,WAAA;AAAA,MACR,GAAG;AAAA;AAAA,GACN;AAEJ;AAEO,IAAM,KAAA,GAAQC,iBAAW,UAAU","file":"index.js","sourcesContent":["import {\n  type ForwardedRef,\n  type ImgHTMLAttributes,\n  forwardRef,\n  useEffect,\n  useState,\n} from 'react';\nimport './Image.css';\n\nexport type ImageFit = 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';\nexport type ImageRadius = 'sm' | 'md' | 'lg' | 'full';\n\nexport type ImageProps = Omit<ImgHTMLAttributes<HTMLImageElement>, 'alt'> & {\n  alt: string;\n  aspectRatio?: string;\n  fit?: ImageFit;\n  radius?: ImageRadius;\n  fallback?: string;\n};\n\nfunction ImageInner(\n  {\n    alt,\n    aspectRatio,\n    fit = 'cover',\n    radius,\n    fallback,\n    src,\n    className,\n    style,\n    onError,\n    ...restProps\n  }: ImageProps,\n  ref: ForwardedRef<HTMLImageElement>,\n) {\n  const [hasErrored, setHasErrored] = useState(false);\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: src triggers the reset intentionally, it isn't read in the body\n  useEffect(() => {\n    setHasErrored(false);\n  }, [src]);\n\n  const resolvedSrc = hasErrored && fallback ? fallback : src;\n\n  const handleError: React.ReactEventHandler<HTMLImageElement> = (e) => {\n    setHasErrored(true);\n    onError?.(e);\n  };\n\n  return (\n    <img\n      ref={ref}\n      src={resolvedSrc}\n      alt={alt}\n      data-fit={fit}\n      data-radius={radius || undefined}\n      className={['xd-image', className].filter(Boolean).join(' ')}\n      style={aspectRatio !== undefined ? { aspectRatio, ...style } : style}\n      onError={handleError}\n      {...restProps}\n    />\n  );\n}\n\nexport const Image = forwardRef(ImageInner);\n"]}
+{"version":3,"sources":["../src/index.ts","../src/components/Image.tsx"],"sourcesContent":["export { Image } from './components';\nexport type { ImageProps, ImageFit, ImageRadius } from './components';\n","import {\n  type ForwardedRef,\n  type ImgHTMLAttributes,\n  forwardRef,\n  useEffect,\n  useState,\n} from 'react';\nimport './Image.css';\n\nexport type ImageFit = 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';\nexport type ImageRadius = 'sm' | 'md' | 'lg' | 'full';\n\nexport type ImageProps = Omit<ImgHTMLAttributes<HTMLImageElement>, 'alt'> & {\n  alt: string;\n  aspectRatio?: string;\n  fit?: ImageFit;\n  radius?: ImageRadius;\n  fallback?: string;\n};\n\nfunction ImageInner(\n  {\n    alt,\n    aspectRatio,\n    fit = 'cover',\n    radius,\n    fallback,\n    src,\n    className,\n    style,\n    onError,\n    ...restProps\n  }: ImageProps,\n  ref: ForwardedRef<HTMLImageElement>,\n) {\n  const [hasErrored, setHasErrored] = useState(false);\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: src triggers the reset intentionally, it isn't read in the body\n  useEffect(() => {\n    setHasErrored(false);\n  }, [src]);\n\n  const resolvedSrc = hasErrored && fallback ? fallback : src;\n\n  const handleError: React.ReactEventHandler<HTMLImageElement> = (e) => {\n    setHasErrored(true);\n    onError?.(e);\n  };\n\n  return (\n    <img\n      ref={ref}\n      src={resolvedSrc}\n      alt={alt}\n      data-fit={fit}\n      data-radius={radius || undefined}\n      className={className ? `xd-image ${className}` : 'xd-image'}\n      style={aspectRatio !== undefined ? { aspectRatio, ...style } : style}\n      onError={handleError}\n      {...restProps}\n    />\n  );\n}\n\nexport const Image = forwardRef(ImageInner);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAMO;AA4CH;AA9BJ,SAAS,WACP;AAAA,EACE;AAAA,EACA;AAAA,EACA,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GACA,KACA;AACA,QAAM,CAAC,YAAY,aAAa,QAAI,uBAAS,KAAK;AAGlD,8BAAU,MAAM;AACd,kBAAc,KAAK;AAAA,EACrB,GAAG,CAAC,GAAG,CAAC;AAER,QAAM,cAAc,cAAc,WAAW,WAAW;AAExD,QAAM,cAAyD,CAAC,MAAM;AACpE,kBAAc,IAAI;AAClB,cAAU,CAAC;AAAA,EACb;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,KAAK;AAAA,MACL;AAAA,MACA,YAAU;AAAA,MACV,eAAa,UAAU;AAAA,MACvB,WAAW,YAAY,YAAY,SAAS,KAAK;AAAA,MACjD,OAAO,gBAAgB,SAAY,EAAE,aAAa,GAAG,MAAM,IAAI;AAAA,MAC/D,SAAS;AAAA,MACR,GAAG;AAAA;AAAA,EACN;AAEJ;AAEO,IAAM,YAAQ,yBAAW,UAAU;","names":[]}

package/dist/index.mjs

@@ -1,7 +1,12 @@
-import { forwardRef, useState, useEffect } from 'react';
-import { jsx } from 'react/jsx-runtime';
+'use client';
 
 // src/components/Image.tsx
+import {
+  forwardRef,
+  useEffect,
+  useState
+} from "react";
+import { jsx } from "react/jsx-runtime";
 function ImageInner({
   alt,
   aspectRatio,
@@ -31,7 +36,7 @@ function ImageInner({
       alt,
       "data-fit": fit,
       "data-radius": radius || void 0,
-      className: ["xd-image", className].filter(Boolean).join(" "),
+      className: className ? `xd-image ${className}` : "xd-image",
       style: aspectRatio !== void 0 ? { aspectRatio, ...style } : style,
       onError: handleError,
       ...restProps
@@ -39,7 +44,7 @@ function ImageInner({
   );
 }
 var Image = forwardRef(ImageInner);
-
-export { Image };
-//# sourceMappingURL=index.mjs.map
+export {
+  Image
+};
 //# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Image.tsx"],"names":[],"mappings":";;;;AAoBA,SAAS,UAAA,CACP;AAAA,EACE,GAAA;AAAA,EACA,WAAA;AAAA,EACA,GAAA,GAAM,OAAA;AAAA,EACN,MAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAA;AAAA,EACA,SAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA;AAAA,EACA,GAAG;AACL,CAAA,EACA,GAAA,EACA;AACA,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,SAAS,KAAK,CAAA;AAGlD,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,aAAA,CAAc,KAAK,CAAA;AAAA,EACrB,CAAA,EAAG,CAAC,GAAG,CAAC,CAAA;AAER,EAAA,MAAM,WAAA,GAAc,UAAA,IAAc,QAAA,GAAW,QAAA,GAAW,GAAA;AAExD,EAAA,MAAM,WAAA,GAAyD,CAAC,CAAA,KAAM;AACpE,IAAA,aAAA,CAAc,IAAI,CAAA;AAClB,IAAA,OAAA,GAAU,CAAC,CAAA;AAAA,EACb,CAAA;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,GAAA,EAAK,WAAA;AAAA,MACL,GAAA;AAAA,MACA,UAAA,EAAU,GAAA;AAAA,MACV,eAAa,MAAA,IAAU,MAAA;AAAA,MACvB,SAAA,EAAW,CAAC,UAAA,EAAY,SAAS,EAAE,MAAA,CAAO,OAAO,CAAA,CAAE,IAAA,CAAK,GAAG,CAAA;AAAA,MAC3D,OAAO,WAAA,KAAgB,MAAA,GAAY,EAAE,WAAA,EAAa,GAAG,OAAM,GAAI,KAAA;AAAA,MAC/D,OAAA,EAAS,WAAA;AAAA,MACR,GAAG;AAAA;AAAA,GACN;AAEJ;AAEO,IAAM,KAAA,GAAQ,WAAW,UAAU","file":"index.mjs","sourcesContent":["import {\n  type ForwardedRef,\n  type ImgHTMLAttributes,\n  forwardRef,\n  useEffect,\n  useState,\n} from 'react';\nimport './Image.css';\n\nexport type ImageFit = 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';\nexport type ImageRadius = 'sm' | 'md' | 'lg' | 'full';\n\nexport type ImageProps = Omit<ImgHTMLAttributes<HTMLImageElement>, 'alt'> & {\n  alt: string;\n  aspectRatio?: string;\n  fit?: ImageFit;\n  radius?: ImageRadius;\n  fallback?: string;\n};\n\nfunction ImageInner(\n  {\n    alt,\n    aspectRatio,\n    fit = 'cover',\n    radius,\n    fallback,\n    src,\n    className,\n    style,\n    onError,\n    ...restProps\n  }: ImageProps,\n  ref: ForwardedRef<HTMLImageElement>,\n) {\n  const [hasErrored, setHasErrored] = useState(false);\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: src triggers the reset intentionally, it isn't read in the body\n  useEffect(() => {\n    setHasErrored(false);\n  }, [src]);\n\n  const resolvedSrc = hasErrored && fallback ? fallback : src;\n\n  const handleError: React.ReactEventHandler<HTMLImageElement> = (e) => {\n    setHasErrored(true);\n    onError?.(e);\n  };\n\n  return (\n    <img\n      ref={ref}\n      src={resolvedSrc}\n      alt={alt}\n      data-fit={fit}\n      data-radius={radius || undefined}\n      className={['xd-image', className].filter(Boolean).join(' ')}\n      style={aspectRatio !== undefined ? { aspectRatio, ...style } : style}\n      onError={handleError}\n      {...restProps}\n    />\n  );\n}\n\nexport const Image = forwardRef(ImageInner);\n"]}
+{"version":3,"sources":["../src/components/Image.tsx"],"sourcesContent":["import {\n  type ForwardedRef,\n  type ImgHTMLAttributes,\n  forwardRef,\n  useEffect,\n  useState,\n} from 'react';\nimport './Image.css';\n\nexport type ImageFit = 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';\nexport type ImageRadius = 'sm' | 'md' | 'lg' | 'full';\n\nexport type ImageProps = Omit<ImgHTMLAttributes<HTMLImageElement>, 'alt'> & {\n  alt: string;\n  aspectRatio?: string;\n  fit?: ImageFit;\n  radius?: ImageRadius;\n  fallback?: string;\n};\n\nfunction ImageInner(\n  {\n    alt,\n    aspectRatio,\n    fit = 'cover',\n    radius,\n    fallback,\n    src,\n    className,\n    style,\n    onError,\n    ...restProps\n  }: ImageProps,\n  ref: ForwardedRef<HTMLImageElement>,\n) {\n  const [hasErrored, setHasErrored] = useState(false);\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: src triggers the reset intentionally, it isn't read in the body\n  useEffect(() => {\n    setHasErrored(false);\n  }, [src]);\n\n  const resolvedSrc = hasErrored && fallback ? fallback : src;\n\n  const handleError: React.ReactEventHandler<HTMLImageElement> = (e) => {\n    setHasErrored(true);\n    onError?.(e);\n  };\n\n  return (\n    <img\n      ref={ref}\n      src={resolvedSrc}\n      alt={alt}\n      data-fit={fit}\n      data-radius={radius || undefined}\n      className={className ? `xd-image ${className}` : 'xd-image'}\n      style={aspectRatio !== undefined ? { aspectRatio, ...style } : style}\n      onError={handleError}\n      {...restProps}\n    />\n  );\n}\n\nexport const Image = forwardRef(ImageInner);\n"],"mappings":";;;AAAA;AAAA,EAGE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AA4CH;AA9BJ,SAAS,WACP;AAAA,EACE;AAAA,EACA;AAAA,EACA,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GACA,KACA;AACA,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,KAAK;AAGlD,YAAU,MAAM;AACd,kBAAc,KAAK;AAAA,EACrB,GAAG,CAAC,GAAG,CAAC;AAER,QAAM,cAAc,cAAc,WAAW,WAAW;AAExD,QAAM,cAAyD,CAAC,MAAM;AACpE,kBAAc,IAAI;AAClB,cAAU,CAAC;AAAA,EACb;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,KAAK;AAAA,MACL;AAAA,MACA,YAAU;AAAA,MACV,eAAa,UAAU;AAAA,MACvB,WAAW,YAAY,YAAY,SAAS,KAAK;AAAA,MACjD,OAAO,gBAAgB,SAAY,EAAE,aAAa,GAAG,MAAM,IAAI;AAAA,MAC/D,SAAS;AAAA,MACR,GAAG;AAAA;AAAA,EACN;AAEJ;AAEO,IAAM,QAAQ,WAAW,UAAU;","names":[]}

package/dist/test-utils.d.mts

@@ -0,0 +1,3 @@
+declare function getImage(alt: string | RegExp): HTMLElement;
+
+export { getImage };

package/dist/test-utils.d.ts

@@ -0,0 +1,3 @@
+declare function getImage(alt: string | RegExp): HTMLElement;
+
+export { getImage };

package/dist/test-utils.js

@@ -0,0 +1,35 @@
+'use client';
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/test-utils.ts
+var test_utils_exports = {};
+__export(test_utils_exports, {
+  getImage: () => getImage
+});
+module.exports = __toCommonJS(test_utils_exports);
+var import_react = require("@testing-library/react");
+function getImage(alt) {
+  return import_react.screen.getByAltText(alt);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getImage
+});
+//# sourceMappingURL=test-utils.js.map

package/dist/test-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/test-utils.ts"],"sourcesContent":["import { screen } from '@testing-library/react';\n\nexport function getImage(alt: string | RegExp): HTMLElement {\n  return screen.getByAltText(alt);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAuB;AAEhB,SAAS,SAAS,KAAmC;AAC1D,SAAO,oBAAO,aAAa,GAAG;AAChC;","names":[]}

package/dist/test-utils.mjs

@@ -0,0 +1,11 @@
+'use client';
+
+// src/test-utils.ts
+import { screen } from "@testing-library/react";
+function getImage(alt) {
+  return screen.getByAltText(alt);
+}
+export {
+  getImage
+};
+//# sourceMappingURL=test-utils.mjs.map

package/dist/test-utils.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/test-utils.ts"],"sourcesContent":["import { screen } from '@testing-library/react';\n\nexport function getImage(alt: string | RegExp): HTMLElement {\n  return screen.getByAltText(alt);\n}\n"],"mappings":";;;AAAA,SAAS,cAAc;AAEhB,SAAS,SAAS,KAAmC;AAC1D,SAAO,OAAO,aAAa,GAAG;AAChC;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asnewyla/image",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Image display with org styling, aspect ratio, and load-error fallback",
   "license": "MIT",
   "repository": {
@@ -16,11 +16,16 @@
   "types": "dist/index.d.ts",
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs",
-      "require": "./dist/index.js",
-      "types": "./dist/index.d.ts"
+      "require": "./dist/index.js"
     },
-    "./styles.css": "./dist/index.css"
+    "./styles.css": "./dist/index.css",
+    "./test-utils": {
+      "types": "./dist/test-utils.d.ts",
+      "import": "./dist/test-utils.mjs",
+      "require": "./dist/test-utils.js"
+    }
   },
   "files": [
     "dist"
@@ -35,7 +40,17 @@
   ],
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0"
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "@testing-library/react": "^16.0.0",
+    "@testing-library/user-event": "^14.5.0"
+  },
+  "peerDependenciesMeta": {
+    "@testing-library/react": {
+      "optional": true
+    },
+    "@testing-library/user-event": {
+      "optional": true
+    }
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.4.0",