sunny-img 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 sunny-img contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,24 @@
+# sunny-img
+
+A lightweight, framework-agnostic React image component inspired by `next/image`.
+
+```bash
+pnpm add sunny-img
+```
+
+```tsx
+import { Image } from 'sunny-img'
+
+export function Hero() {
+  return <Image alt="Sunlight crossing a mountain ridge" height={800} src="/hero.jpg" width={1200} />
+}
+```
+
+`sunny-img` provides intrinsic or fill layouts, native lazy loading, priority
+loading, custom-loader `srcSet` generation, blur placeholders, and ref
+forwarding. It does not run an image optimization server; connect `loader` to
+your image CDN when you want transformed image URLs.
+
+## License
+
+MIT

package/dist/index.cjs

@@ -0,0 +1,108 @@
+//#region rolldown:runtime
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: ((k) => from[k]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+
+//#endregion
+let react = require("react");
+react = __toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = __toESM(react_jsx_runtime);
+
+//#region src/image.tsx
+const imageWidths = [
+	320,
+	480,
+	640,
+	750,
+	828,
+	1080,
+	1200,
+	1600,
+	1920,
+	2560
+];
+function uniqueWidths(width, sizes) {
+	if (sizes?.includes("vw") || width === void 0) return [...imageWidths];
+	return [width, width * 2];
+}
+const Image = (0, react.forwardRef)(function Image$1({ alt, blurDataURL, fill = false, height, loader, loading, onLoad, onLoadingComplete, placeholder = "empty", priority = false, quality, sizes, src, style, width,...props }, ref) {
+	const [loaded, setLoaded] = (0, react.useState)(false);
+	if (!fill && (width === void 0 || height === void 0)) throw new Error("sunny-img: width and height are required unless fill is true.");
+	if (placeholder === "blur" && !blurDataURL) throw new Error("sunny-img: blurDataURL is required when placeholder is \"blur\".");
+	const widths = uniqueWidths(width, sizes);
+	const resolvedSrc = loader ? loader({
+		src,
+		width: widths.at(-1) ?? width ?? imageWidths[0],
+		quality
+	}) : src;
+	const srcSet = loader ? widths.map((candidate) => `${loader({
+		src,
+		width: candidate,
+		quality
+	})} ${candidate}w`).join(", ") : void 0;
+	const blurStyles = placeholder === "blur" && !loaded ? {
+		backgroundImage: `url("${blurDataURL}")`,
+		backgroundPosition: "center",
+		backgroundRepeat: "no-repeat",
+		backgroundSize: "cover",
+		filter: "blur(16px)",
+		transform: "scale(1.04)"
+	} : {};
+	const fillStyles = fill ? {
+		bottom: 0,
+		height: "100%",
+		left: 0,
+		position: "absolute",
+		right: 0,
+		top: 0,
+		width: "100%"
+	} : {};
+	function handleLoad(event) {
+		setLoaded(true);
+		onLoad?.(event);
+		onLoadingComplete?.(event.currentTarget);
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+		...props,
+		ref,
+		alt,
+		"data-sunny-img": "",
+		decoding: "async",
+		fetchPriority: priority ? "high" : props.fetchPriority,
+		height: fill ? void 0 : height,
+		loading: loading ?? (priority ? "eager" : "lazy"),
+		onLoad: handleLoad,
+		sizes,
+		src: resolvedSrc,
+		srcSet,
+		style: {
+			...fillStyles,
+			...blurStyles,
+			...style
+		},
+		width: fill ? void 0 : width
+	});
+});
+
+//#endregion
+exports.Image = Image;
+exports.imageWidths = imageWidths;
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["Image","blurStyles: CSSProperties","fillStyles: CSSProperties"],"sources":["../src/image.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useState,\n  type CSSProperties,\n  type ImgHTMLAttributes,\n  type SyntheticEvent,\n} from 'react'\n\nexport const imageWidths = [320, 480, 640, 750, 828, 1080, 1200, 1600, 1920, 2560] as const\n\nexport interface ImageLoaderParams {\n  src: string\n  width: number\n  quality?: number\n}\n\nexport type ImageLoader = (params: ImageLoaderParams) => string\n\nexport interface SunnyImageProps\n  extends Omit<ImgHTMLAttributes<HTMLImageElement>, 'alt' | 'height' | 'loading' | 'src' | 'width'> {\n  alt: string\n  src: string\n  width?: number\n  height?: number\n  fill?: boolean\n  loader?: ImageLoader\n  quality?: number\n  priority?: boolean\n  loading?: 'eager' | 'lazy'\n  placeholder?: 'empty' | 'blur'\n  blurDataURL?: string\n  onLoadingComplete?: (image: HTMLImageElement) => void\n}\n\nfunction uniqueWidths(width?: number, sizes?: string): number[] {\n  if (sizes?.includes('vw') || width === undefined) {\n    return [...imageWidths]\n  }\n\n  return [width, width * 2]\n}\n\nexport const Image = forwardRef<HTMLImageElement, SunnyImageProps>(\n  function Image(\n    {\n      alt,\n      blurDataURL,\n      fill = false,\n      height,\n      loader,\n      loading,\n      onLoad,\n      onLoadingComplete,\n      placeholder = 'empty',\n      priority = false,\n      quality,\n      sizes,\n      src,\n      style,\n      width,\n      ...props\n    },\n    ref,\n  ) {\n    const [loaded, setLoaded] = useState(false)\n\n    if (!fill && (width === undefined || height === undefined)) {\n      throw new Error('sunny-img: width and height are required unless fill is true.')\n    }\n\n    if (placeholder === 'blur' && !blurDataURL) {\n      throw new Error('sunny-img: blurDataURL is required when placeholder is \"blur\".')\n    }\n\n    const widths = uniqueWidths(width, sizes)\n    const resolvedSrc = loader\n      ? loader({ src, width: widths.at(-1) ?? width ?? imageWidths[0], quality })\n      : src\n    const srcSet = loader\n      ? widths.map((candidate) => `${loader({ src, width: candidate, quality })} ${candidate}w`).join(', ')\n      : undefined\n    const blurStyles: CSSProperties =\n      placeholder === 'blur' && !loaded\n        ? {\n            backgroundImage: `url(\"${blurDataURL}\")`,\n            backgroundPosition: 'center',\n            backgroundRepeat: 'no-repeat',\n            backgroundSize: 'cover',\n            filter: 'blur(16px)',\n            transform: 'scale(1.04)',\n          }\n        : {}\n    const fillStyles: CSSProperties = fill\n      ? {\n          bottom: 0,\n          height: '100%',\n          left: 0,\n          position: 'absolute',\n          right: 0,\n          top: 0,\n          width: '100%',\n        }\n      : {}\n\n    function handleLoad(event: SyntheticEvent<HTMLImageElement>): void {\n      setLoaded(true)\n      onLoad?.(event)\n      onLoadingComplete?.(event.currentTarget)\n    }\n\n    return (\n      <img\n        {...props}\n        ref={ref}\n        alt={alt}\n        data-sunny-img=\"\"\n        decoding=\"async\"\n        fetchPriority={priority ? 'high' : props.fetchPriority}\n        height={fill ? undefined : height}\n        loading={loading ?? (priority ? 'eager' : 'lazy')}\n        onLoad={handleLoad}\n        sizes={sizes}\n        src={resolvedSrc}\n        srcSet={srcSet}\n        style={{ ...fillStyles, ...blurStyles, ...style }}\n        width={fill ? undefined : width}\n      />\n    )\n  },\n)\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,MAAa,cAAc;CAAC;CAAK;CAAK;CAAK;CAAK;CAAK;CAAM;CAAM;CAAM;CAAM;CAAK;AA0BlF,SAAS,aAAa,OAAgB,OAA0B;AAC9D,KAAI,OAAO,SAAS,KAAK,IAAI,UAAU,OACrC,QAAO,CAAC,GAAG,YAAY;AAGzB,QAAO,CAAC,OAAO,QAAQ,EAAE;;AAG3B,MAAa,8BACX,SAASA,QACP,EACE,KACA,aACA,OAAO,OACP,QACA,QACA,SACA,QACA,mBACA,cAAc,SACd,WAAW,OACX,SACA,OACA,KACA,OACA,MACA,GAAG,SAEL,KACA;CACA,MAAM,CAAC,QAAQ,iCAAsB,MAAM;AAE3C,KAAI,CAAC,SAAS,UAAU,UAAa,WAAW,QAC9C,OAAM,IAAI,MAAM,gEAAgE;AAGlF,KAAI,gBAAgB,UAAU,CAAC,YAC7B,OAAM,IAAI,MAAM,mEAAiE;CAGnF,MAAM,SAAS,aAAa,OAAO,MAAM;CACzC,MAAM,cAAc,SAChB,OAAO;EAAE;EAAK,OAAO,OAAO,GAAG,GAAG,IAAI,SAAS,YAAY;EAAI;EAAS,CAAC,GACzE;CACJ,MAAM,SAAS,SACX,OAAO,KAAK,cAAc,GAAG,OAAO;EAAE;EAAK,OAAO;EAAW;EAAS,CAAC,CAAC,GAAG,UAAU,GAAG,CAAC,KAAK,KAAK,GACnG;CACJ,MAAMC,aACJ,gBAAgB,UAAU,CAAC,SACvB;EACE,iBAAiB,QAAQ,YAAY;EACrC,oBAAoB;EACpB,kBAAkB;EAClB,gBAAgB;EAChB,QAAQ;EACR,WAAW;EACZ,GACD,EAAE;CACR,MAAMC,aAA4B,OAC9B;EACE,QAAQ;EACR,QAAQ;EACR,MAAM;EACN,UAAU;EACV,OAAO;EACP,KAAK;EACL,OAAO;EACR,GACD,EAAE;CAEN,SAAS,WAAW,OAA+C;AACjE,YAAU,KAAK;AACf,WAAS,MAAM;AACf,sBAAoB,MAAM,cAAc;;AAG1C,QACE,2CAAC;EACC,GAAI;EACC;EACA;EACL,kBAAe;EACf,UAAS;EACT,eAAe,WAAW,SAAS,MAAM;EACzC,QAAQ,OAAO,SAAY;EAC3B,SAAS,YAAY,WAAW,UAAU;EAC1C,QAAQ;EACD;EACP,KAAK;EACG;EACR,OAAO;GAAE,GAAG;GAAY,GAAG;GAAY,GAAG;GAAO;EACjD,OAAO,OAAO,SAAY;GAC1B;EAGP"}

package/dist/index.d.cts

@@ -0,0 +1,29 @@
+import * as react0 from "react";
+import { ImgHTMLAttributes } from "react";
+
+//#region src/image.d.ts
+declare const imageWidths: readonly [320, 480, 640, 750, 828, 1080, 1200, 1600, 1920, 2560];
+interface ImageLoaderParams {
+  src: string;
+  width: number;
+  quality?: number;
+}
+type ImageLoader = (params: ImageLoaderParams) => string;
+interface SunnyImageProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, 'alt' | 'height' | 'loading' | 'src' | 'width'> {
+  alt: string;
+  src: string;
+  width?: number;
+  height?: number;
+  fill?: boolean;
+  loader?: ImageLoader;
+  quality?: number;
+  priority?: boolean;
+  loading?: 'eager' | 'lazy';
+  placeholder?: 'empty' | 'blur';
+  blurDataURL?: string;
+  onLoadingComplete?: (image: HTMLImageElement) => void;
+}
+declare const Image: react0.ForwardRefExoticComponent<SunnyImageProps & react0.RefAttributes<HTMLImageElement>>;
+//#endregion
+export { Image, type ImageLoader, type ImageLoaderParams, type SunnyImageProps, imageWidths };
+//# sourceMappingURL=index.d.cts.map

package/dist/index.d.ts

@@ -0,0 +1,29 @@
+import * as react0 from "react";
+import { ImgHTMLAttributes } from "react";
+
+//#region src/image.d.ts
+declare const imageWidths: readonly [320, 480, 640, 750, 828, 1080, 1200, 1600, 1920, 2560];
+interface ImageLoaderParams {
+  src: string;
+  width: number;
+  quality?: number;
+}
+type ImageLoader = (params: ImageLoaderParams) => string;
+interface SunnyImageProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, 'alt' | 'height' | 'loading' | 'src' | 'width'> {
+  alt: string;
+  src: string;
+  width?: number;
+  height?: number;
+  fill?: boolean;
+  loader?: ImageLoader;
+  quality?: number;
+  priority?: boolean;
+  loading?: 'eager' | 'lazy';
+  placeholder?: 'empty' | 'blur';
+  blurDataURL?: string;
+  onLoadingComplete?: (image: HTMLImageElement) => void;
+}
+declare const Image: react0.ForwardRefExoticComponent<SunnyImageProps & react0.RefAttributes<HTMLImageElement>>;
+//#endregion
+export { Image, type ImageLoader, type ImageLoaderParams, type SunnyImageProps, imageWidths };
+//# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -0,0 +1,82 @@
+import { forwardRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/image.tsx
+const imageWidths = [
+	320,
+	480,
+	640,
+	750,
+	828,
+	1080,
+	1200,
+	1600,
+	1920,
+	2560
+];
+function uniqueWidths(width, sizes) {
+	if (sizes?.includes("vw") || width === void 0) return [...imageWidths];
+	return [width, width * 2];
+}
+const Image = forwardRef(function Image$1({ alt, blurDataURL, fill = false, height, loader, loading, onLoad, onLoadingComplete, placeholder = "empty", priority = false, quality, sizes, src, style, width,...props }, ref) {
+	const [loaded, setLoaded] = useState(false);
+	if (!fill && (width === void 0 || height === void 0)) throw new Error("sunny-img: width and height are required unless fill is true.");
+	if (placeholder === "blur" && !blurDataURL) throw new Error("sunny-img: blurDataURL is required when placeholder is \"blur\".");
+	const widths = uniqueWidths(width, sizes);
+	const resolvedSrc = loader ? loader({
+		src,
+		width: widths.at(-1) ?? width ?? imageWidths[0],
+		quality
+	}) : src;
+	const srcSet = loader ? widths.map((candidate) => `${loader({
+		src,
+		width: candidate,
+		quality
+	})} ${candidate}w`).join(", ") : void 0;
+	const blurStyles = placeholder === "blur" && !loaded ? {
+		backgroundImage: `url("${blurDataURL}")`,
+		backgroundPosition: "center",
+		backgroundRepeat: "no-repeat",
+		backgroundSize: "cover",
+		filter: "blur(16px)",
+		transform: "scale(1.04)"
+	} : {};
+	const fillStyles = fill ? {
+		bottom: 0,
+		height: "100%",
+		left: 0,
+		position: "absolute",
+		right: 0,
+		top: 0,
+		width: "100%"
+	} : {};
+	function handleLoad(event) {
+		setLoaded(true);
+		onLoad?.(event);
+		onLoadingComplete?.(event.currentTarget);
+	}
+	return /* @__PURE__ */ jsx("img", {
+		...props,
+		ref,
+		alt,
+		"data-sunny-img": "",
+		decoding: "async",
+		fetchPriority: priority ? "high" : props.fetchPriority,
+		height: fill ? void 0 : height,
+		loading: loading ?? (priority ? "eager" : "lazy"),
+		onLoad: handleLoad,
+		sizes,
+		src: resolvedSrc,
+		srcSet,
+		style: {
+			...fillStyles,
+			...blurStyles,
+			...style
+		},
+		width: fill ? void 0 : width
+	});
+});
+
+//#endregion
+export { Image, imageWidths };
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["Image","blurStyles: CSSProperties","fillStyles: CSSProperties"],"sources":["../src/image.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useState,\n  type CSSProperties,\n  type ImgHTMLAttributes,\n  type SyntheticEvent,\n} from 'react'\n\nexport const imageWidths = [320, 480, 640, 750, 828, 1080, 1200, 1600, 1920, 2560] as const\n\nexport interface ImageLoaderParams {\n  src: string\n  width: number\n  quality?: number\n}\n\nexport type ImageLoader = (params: ImageLoaderParams) => string\n\nexport interface SunnyImageProps\n  extends Omit<ImgHTMLAttributes<HTMLImageElement>, 'alt' | 'height' | 'loading' | 'src' | 'width'> {\n  alt: string\n  src: string\n  width?: number\n  height?: number\n  fill?: boolean\n  loader?: ImageLoader\n  quality?: number\n  priority?: boolean\n  loading?: 'eager' | 'lazy'\n  placeholder?: 'empty' | 'blur'\n  blurDataURL?: string\n  onLoadingComplete?: (image: HTMLImageElement) => void\n}\n\nfunction uniqueWidths(width?: number, sizes?: string): number[] {\n  if (sizes?.includes('vw') || width === undefined) {\n    return [...imageWidths]\n  }\n\n  return [width, width * 2]\n}\n\nexport const Image = forwardRef<HTMLImageElement, SunnyImageProps>(\n  function Image(\n    {\n      alt,\n      blurDataURL,\n      fill = false,\n      height,\n      loader,\n      loading,\n      onLoad,\n      onLoadingComplete,\n      placeholder = 'empty',\n      priority = false,\n      quality,\n      sizes,\n      src,\n      style,\n      width,\n      ...props\n    },\n    ref,\n  ) {\n    const [loaded, setLoaded] = useState(false)\n\n    if (!fill && (width === undefined || height === undefined)) {\n      throw new Error('sunny-img: width and height are required unless fill is true.')\n    }\n\n    if (placeholder === 'blur' && !blurDataURL) {\n      throw new Error('sunny-img: blurDataURL is required when placeholder is \"blur\".')\n    }\n\n    const widths = uniqueWidths(width, sizes)\n    const resolvedSrc = loader\n      ? loader({ src, width: widths.at(-1) ?? width ?? imageWidths[0], quality })\n      : src\n    const srcSet = loader\n      ? widths.map((candidate) => `${loader({ src, width: candidate, quality })} ${candidate}w`).join(', ')\n      : undefined\n    const blurStyles: CSSProperties =\n      placeholder === 'blur' && !loaded\n        ? {\n            backgroundImage: `url(\"${blurDataURL}\")`,\n            backgroundPosition: 'center',\n            backgroundRepeat: 'no-repeat',\n            backgroundSize: 'cover',\n            filter: 'blur(16px)',\n            transform: 'scale(1.04)',\n          }\n        : {}\n    const fillStyles: CSSProperties = fill\n      ? {\n          bottom: 0,\n          height: '100%',\n          left: 0,\n          position: 'absolute',\n          right: 0,\n          top: 0,\n          width: '100%',\n        }\n      : {}\n\n    function handleLoad(event: SyntheticEvent<HTMLImageElement>): void {\n      setLoaded(true)\n      onLoad?.(event)\n      onLoadingComplete?.(event.currentTarget)\n    }\n\n    return (\n      <img\n        {...props}\n        ref={ref}\n        alt={alt}\n        data-sunny-img=\"\"\n        decoding=\"async\"\n        fetchPriority={priority ? 'high' : props.fetchPriority}\n        height={fill ? undefined : height}\n        loading={loading ?? (priority ? 'eager' : 'lazy')}\n        onLoad={handleLoad}\n        sizes={sizes}\n        src={resolvedSrc}\n        srcSet={srcSet}\n        style={{ ...fillStyles, ...blurStyles, ...style }}\n        width={fill ? undefined : width}\n      />\n    )\n  },\n)\n"],"mappings":";;;;AAQA,MAAa,cAAc;CAAC;CAAK;CAAK;CAAK;CAAK;CAAK;CAAM;CAAM;CAAM;CAAM;CAAK;AA0BlF,SAAS,aAAa,OAAgB,OAA0B;AAC9D,KAAI,OAAO,SAAS,KAAK,IAAI,UAAU,OACrC,QAAO,CAAC,GAAG,YAAY;AAGzB,QAAO,CAAC,OAAO,QAAQ,EAAE;;AAG3B,MAAa,QAAQ,WACnB,SAASA,QACP,EACE,KACA,aACA,OAAO,OACP,QACA,QACA,SACA,QACA,mBACA,cAAc,SACd,WAAW,OACX,SACA,OACA,KACA,OACA,MACA,GAAG,SAEL,KACA;CACA,MAAM,CAAC,QAAQ,aAAa,SAAS,MAAM;AAE3C,KAAI,CAAC,SAAS,UAAU,UAAa,WAAW,QAC9C,OAAM,IAAI,MAAM,gEAAgE;AAGlF,KAAI,gBAAgB,UAAU,CAAC,YAC7B,OAAM,IAAI,MAAM,mEAAiE;CAGnF,MAAM,SAAS,aAAa,OAAO,MAAM;CACzC,MAAM,cAAc,SAChB,OAAO;EAAE;EAAK,OAAO,OAAO,GAAG,GAAG,IAAI,SAAS,YAAY;EAAI;EAAS,CAAC,GACzE;CACJ,MAAM,SAAS,SACX,OAAO,KAAK,cAAc,GAAG,OAAO;EAAE;EAAK,OAAO;EAAW;EAAS,CAAC,CAAC,GAAG,UAAU,GAAG,CAAC,KAAK,KAAK,GACnG;CACJ,MAAMC,aACJ,gBAAgB,UAAU,CAAC,SACvB;EACE,iBAAiB,QAAQ,YAAY;EACrC,oBAAoB;EACpB,kBAAkB;EAClB,gBAAgB;EAChB,QAAQ;EACR,WAAW;EACZ,GACD,EAAE;CACR,MAAMC,aAA4B,OAC9B;EACE,QAAQ;EACR,QAAQ;EACR,MAAM;EACN,UAAU;EACV,OAAO;EACP,KAAK;EACL,OAAO;EACR,GACD,EAAE;CAEN,SAAS,WAAW,OAA+C;AACjE,YAAU,KAAK;AACf,WAAS,MAAM;AACf,sBAAoB,MAAM,cAAc;;AAG1C,QACE,oBAAC;EACC,GAAI;EACC;EACA;EACL,kBAAe;EACf,UAAS;EACT,eAAe,WAAW,SAAS,MAAM;EACzC,QAAQ,OAAO,SAAY;EAC3B,SAAS,YAAY,WAAW,UAAU;EAC1C,QAAQ;EACD;EACP,KAAK;EACG;EACR,OAAO;GAAE,GAAG;GAAY,GAAG;GAAY,GAAG;GAAO;EACjD,OAAO,OAAO,SAAY;GAC1B;EAGP"}

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "sunny-img",
+  "version": "0.0.1",
+  "description": "A lightweight React image component inspired by next/image",
+  "keywords": ["react", "image", "responsive-image", "lazy-loading"],
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": false,
+  "files": ["dist", "README.md", "LICENSE"],
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "scripts": {
+    "build": "tsdown",
+    "dev": "tsdown --watch",
+    "prepublishOnly": "pnpm test && pnpm typecheck && pnpm build",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "react": ">=18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "tsdown": "^0.15.0",
+    "typescript": "^6.0.2",
+    "vitest": "^3.2.4"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": false
+  }
+}