feat: add Recharts adapter for accessible chart integration

package.json

@@ -13,16 +13,22 @@
       "types": "./dist/react.d.mts",
       "import": "./dist/react.mjs",
       "default": "./dist/react.mjs"
+    },
+    "./recharts": {
+      "types": "./dist/recharts.d.mts",
+      "import": "./dist/recharts.mjs",
+      "default": "./dist/recharts.mjs"
     }
   },
   "main": "dist/maidr.js",
   "files": [
     "dist"
   ],
   "scripts": {
-    "build": "vite build && vite build --config vite.react.config.ts",
+    "build": "vite build && vite build --config vite.react.config.ts && vite build --config vite.recharts.config.ts",
     "build:script": "vite build",
     "build:react": "vite build --config vite.react.config.ts",
+    "build:recharts": "vite build --config vite.recharts.config.ts",
     "prepublishOnly": "npm run build",
     "prepare": "husky",
     "commitlint": "commitlint --from=HEAD~1 --to=HEAD",
@@ -42,14 +48,18 @@
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0"
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "recharts": "^2.0.0 || ^3.0.0"
   },
   "peerDependenciesMeta": {
     "react": {
       "optional": true
     },
     "react-dom": {
       "optional": true
+    },
+    "recharts": {
+      "optional": true
     }
   },
   "dependencies": {

src/adapters/recharts/MaidrRecharts.tsx

@@ -0,0 +1,99 @@
+/**
+ * Convenience wrapper component that combines Recharts adapter + Maidr component.
+ *
+ * Accepts Recharts-style configuration props and automatically converts
+ * the data into MAIDR format, wrapping the children with the `<Maidr>` component.
+ *
+ * @example
+ * ```tsx
+ * import { MaidrRecharts } from 'maidr/recharts';
+ * import { BarChart, Bar, XAxis, YAxis } from 'recharts';
+ *
+ * function AccessibleBarChart() {
+ *   const data = [
+ *     { name: 'Q1', revenue: 100 },
+ *     { name: 'Q2', revenue: 200 },
+ *     { name: 'Q3', revenue: 150 },
+ *   ];
+ *
+ *   return (
+ *     <MaidrRecharts
+ *       id="sales-chart"
+ *       title="Sales by Quarter"
+ *       data={data}
+ *       chartType="bar"
+ *       xKey="name"
+ *       yKeys={['revenue']}
+ *       xLabel="Quarter"
+ *       yLabel="Revenue ($)"
+ *     >
+ *       <BarChart data={data} width={400} height={300}>
+ *         <XAxis dataKey="name" />
+ *         <YAxis />
+ *         <Bar dataKey="revenue" fill="#8884d8" />
+ *       </BarChart>
+ *     </MaidrRecharts>
+ *   );
+ * }
+ * ```
+ */
+
+import type { JSX } from 'react';
+import type { MaidrRechartsProps } from './types';
+import { useMemo } from 'react';
+import { Maidr } from '../../maidr-component';
+import { convertRechartsToMaidr } from './converters';
+
+/**
+ * Wrapper component that makes Recharts charts accessible via MAIDR.
+ *
+ * This component extracts data configuration from props, converts it to
+ * MAIDR's data format, and renders the Recharts children inside a `<Maidr>`
+ * component for audio sonification, text descriptions, braille output,
+ * and keyboard navigation.
+ */
+export function MaidrRecharts({
+  id,
+  title,
+  subtitle,
+  caption,
+  data,
+  chartType,
+  xKey,
+  yKeys,
+  layers,
+  xLabel,
+  yLabel,
+  orientation,
+  fillKeys,
+  binConfig,
+  selectorOverride,
+  children,
+}: MaidrRechartsProps): JSX.Element {
+  const maidrData = useMemo(
+    () => convertRechartsToMaidr({
+      id,
+      title,
+      subtitle,
+      caption,
+      data,
+      chartType,
+      xKey,
+      yKeys,
+      layers,
+      xLabel,
+      yLabel,
+      orientation,
+      fillKeys,
+      binConfig,
+      selectorOverride,
+    }),
+    [id, title, subtitle, caption, data, chartType, xKey, yKeys, layers, xLabel, yLabel, orientation, fillKeys, binConfig, selectorOverride],
+  );
+
+  return (
+    <Maidr data={maidrData}>
+      {children}
+    </Maidr>
+  );
+}