feat(react): add React components

packages/react/.size-limit.json

@@ -0,0 +1,8 @@
+[
+  {
+    "name": "All publics",
+    "path": "dist/index.js",
+    "import": "*",
+    "limit": "2 kB"
+  }
+]

packages/react/README.md

@@ -0,0 +1,71 @@
+# @srcset/react
+
+[![ESM-only package][package]][package-url]
+[![NPM version][npm]][npm-url]
+[![Node version][node]][node-url]
+[![Dependencies status][deps]][deps-url]
+[![Install size][size]][size-url]
+[![Build status][build]][build-url]
+[![Coverage status][coverage]][coverage-url]
+
+[package]: https://img.shields.io/badge/package-ESM--only-ffe536.svg
+[package-url]: https://nodejs.org/api/esm.html
+
+[npm]: https://img.shields.io/npm/v/%40srcset%2Freact.svg
+[npm-url]: https://npmjs.com/package/@srcset/react
+
+[node]: https://img.shields.io/node/v/%40srcset%2Freact.svg
+[node-url]: https://nodejs.org
+
+[deps]: https://img.shields.io/librariesio/release/npm/%40srcset%2Freact
+[deps-url]: https://libraries.io/npm/%40srcset%2Freact
+
+[size]: https://deno.bundlejs.com/badge?q=%40srcset%2Freact
+[size-url]: https://bundlejs.com/?q=%40srcset%2Freact
+
+[build]: https://img.shields.io/github/actions/workflow/status/TrigenSoftware/srcset/tests.yml?branch=main
+[build-url]: https://github.com/TrigenSoftware/srcset/actions
+
+[coverage]: https://img.shields.io/codecov/c/github/TrigenSoftware/srcset.svg
+[coverage-url]: https://app.codecov.io/gh/TrigenSoftware/srcset
+
+React components for responsive images: Picture and Image.
+
+- 🖼 `<picture>` sources grouped by mime type and ordered by format efficiency
+- 🚀 Lazy loading and async decoding by default, `priority` for above-the-fold images
+- 🌫 Blur-up placeholder background until the image loads
+- 📐 Anti-CLS: intrinsic size from the image variant
+
+## Install
+
+```bash
+# pnpm
+pnpm add @srcset/react @srcset/runtime
+# yarn
+yarn add @srcset/react @srcset/runtime
+# npm
+npm i @srcset/react @srcset/runtime
+```
+
+## Usage
+
+```tsx
+import { src, srcSet, placeholder } from './photo.jpg'
+import { Picture, Image } from '@srcset/react'
+
+function Hero() {
+  return (
+    <Picture srcSet={srcSet}>
+      <Image
+        alt='Hero photo'
+        src={src}
+        placeholder={placeholder}
+      />
+    </Picture>
+  )
+}
+```
+
+## Documentation
+
+For more details, guides and API references, check out the [documentation website](https://srcset.js.org/components/react/).

packages/react/oxlint.config.ts

@@ -0,0 +1,18 @@
+import { defineConfig } from '@trigen/oxlint'
+import reactConfig from '@trigen/oxlint-config/react'
+import testConfig from '@trigen/oxlint-config/test'
+import tsTypeCheckedConfig from '@trigen/oxlint-config/typescript-type-checked'
+import rootConfig from '../../oxlint.config.ts'
+
+export default defineConfig({
+  extends: [
+    rootConfig,
+    reactConfig,
+    tsTypeCheckedConfig,
+    testConfig
+  ],
+  env: {
+    node: false,
+    browser: true
+  }
+})

packages/react/package.json

@@ -0,0 +1,88 @@
+{
+  "name": "@srcset/react",
+  "type": "module",
+  "version": "1.0.0",
+  "description": "React components for responsive images: Picture and Image.",
+  "author": {
+    "name": "Dan Onoshko",
+    "email": "danon0404@gmail.com",
+    "url": "https://github.com/dangreen"
+  },
+  "license": "MIT",
+  "homepage": "https://srcset.js.org/components/react/",
+  "funding": "https://ko-fi.com/dangreen",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/TrigenSoftware/srcset.git",
+    "directory": "packages/react"
+  },
+  "bugs": {
+    "url": "https://github.com/TrigenSoftware/srcset/issues"
+  },
+  "keywords": [
+    "srcset",
+    "image",
+    "picture",
+    "responsive",
+    "react",
+    "components"
+  ],
+  "engines": {
+    "node": ">=22"
+  },
+  "sideEffects": false,
+  "exports": {
+    "./package.json": "./package.json",
+    ".": "./src/index.ts"
+  },
+  "publishConfig": {
+    "exports": {
+      "./package.json": "./package.json",
+      ".": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    },
+    "directory": "package",
+    "linkDirectory": false
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "clear:package": "del ./package",
+    "clear:dist": "del ./dist",
+    "clear": "del ./package ./dist ./coverage",
+    "prepublishOnly": "run build clear:package clean-publish",
+    "postpublish": "pnpm clear:package",
+    "emitDeclarations": "tsc -p ./tsconfig.build.json --emitDeclarationOnly",
+    "build:dist": "run -p emitDeclarations [ vite build ]",
+    "build": "run clear:dist build:dist",
+    "lint": "oxlint",
+    "format": "oxlint --fix",
+    "test:unit": "vitest run --coverage",
+    "test:unit:watch": "vitest watch",
+    "test:size": "size-limit",
+    "test:types": "tsc --noEmit",
+    "test": "run -p lint test:unit test:types"
+  },
+  "peerDependencies": {
+    "@srcset/runtime": "workspace:^",
+    "react": ">=19",
+    "react-dom": ">=19"
+  },
+  "devDependencies": {
+    "@size-limit/preset-small-lib": "^12.0.0",
+    "@srcset/runtime": "workspace:^",
+    "@testing-library/dom": "^10.0.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
+    "@types/react": "^19.2.4",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "happy-dom": "^20.0.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "size-limit": "^12.0.0"
+  }
+}