react-apexcharts 1.9.0 → 2.0.0

package/README.md

@@ -24,6 +24,8 @@ npm install react-apexcharts apexcharts
 
 ## Usage
 
+### Client-Side Usage (Traditional)
+
 ```js
 import Chart from 'react-apexcharts'
 ```
@@ -66,6 +68,106 @@ Simple! Just change the `series` or any `option` and it will automatically re-re
 
 View this example on <a href="https://codesandbox.io/s/mzzq3yqjqj">codesandbox</a>
 
+### Server-Side Rendering (SSR) with Next.js App Router
+
+**New in v2.0.0**: react-apexcharts now supports Server-Side Rendering with Next.js 13+ App Router using ApexCharts v5.5.0+.
+
+#### Server Component (RSC)
+
+Render charts on the server for faster initial page loads:
+
+```tsx
+import Chart from 'react-apexcharts/server'
+
+export default async function DashboardPage() {
+  const series = [{
+    name: 'series-1',
+    data: [30, 40, 35, 50, 49, 60, 70, 91, 125]
+  }]
+
+  const options = {
+    chart: { id: 'apexchart-example' },
+    xaxis: { categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999] }
+  }
+
+  return (
+    <Chart
+      type="bar"
+      series={series}
+      options={options}
+      width={500}
+      height={320}
+    />
+  )
+}
+```
+
+#### With Client-Side Hydration
+
+For interactive charts, combine server rendering with client-side hydration:
+
+```tsx
+// app/dashboard/page.tsx (Server Component)
+import Chart from 'react-apexcharts/server'
+import ChartHydrate from './ChartHydrate'
+
+export default async function DashboardPage() {
+  const series = [{ data: [30, 40, 35, 50, 49, 60, 70] }]
+  const options = { chart: { type: 'bar' }, xaxis: { categories: ['A', 'B', 'C', 'D', 'E', 'F', 'G'] } }
+
+  return (
+    <div>
+      <Chart type="bar" series={series} options={options} width={500} height={300} />
+      <ChartHydrate />
+    </div>
+  )
+}
+```
+
+```tsx
+// app/dashboard/ChartHydrate.tsx (Client Component)
+'use client'
+import Hydrate from 'react-apexcharts/hydrate'
+
+export default function ChartHydrate() {
+  return (
+    <Hydrate
+      className="my-chart"
+      clientOptions={{
+        chart: {
+          animations: {
+            enabled: true,
+            speed: 800
+          }
+        }
+      }}
+    />
+  )
+}
+```
+
+#### Client-Only Usage in Next.js
+
+For client-only rendering (same as before):
+
+```tsx
+'use client'
+import Chart from 'react-apexcharts'
+
+export default function ClientChart() {
+  const options = {
+    chart: { id: 'apexchart-example' },
+    xaxis: { categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999] }
+  }
+
+  const series = [{
+    name: 'series-1',
+    data: [30, 40, 35, 50, 49, 60, 70, 91, 125]
+  }]
+
+  return <Chart type="bar" series={series} options={options} />
+}
+```
 
 **Important:** While updating the options, make sure to update the outermost property even when you need to update the nested property.
 
@@ -121,8 +223,10 @@ The repository includes the following files and directories.
 ```
 react-apexcharts/
 ├── dist/
-│   ├── react-apexcharts.min.js
-│   └── react-apexcharts.js
+│   ├── react-apexcharts.cjs.js
+│   ├── react-apexcharts.esm.js
+│   ├── react-apexcharts.iife.min.js
+│   └── react-apexchart.min.js (backward compat)
 └── example/
 │   ├── src/
 │   ├── public/
@@ -153,13 +257,7 @@ npm run start
 
 #### Bundling
 
-##### To build for Development
-
-```bash
-npm run dev-build
-```
-
-##### To build for Production
+##### To build
 
 ```bash
 npm run build

package/dist/react-apexcharts-hydrate.esm.js

@@ -0,0 +1 @@
+import r,{useRef as e,useEffect as t}from"react";import n from"apexcharts/client";import o from"prop-types";function i(r,e,t){return(e=function(r){var e=function(r,e){if("object"!=typeof r||!r)return r;var t=r[Symbol.toPrimitive];if(void 0!==t){var n=t.call(r,e||"default");if("object"!=typeof n)return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===e?String:Number)(r)}(r,"string");return"symbol"==typeof e?e:e+""}(e))in r?Object.defineProperty(r,e,{value:t,enumerable:!0,configurable:!0,writable:!0}):r[e]=t,r}function c(){return c=Object.assign?Object.assign.bind():function(r){for(var e=1;e<arguments.length;e++){var t=arguments[e];for(var n in t)({}).hasOwnProperty.call(t,n)&&(r[n]=t[n])}return r},c.apply(null,arguments)}function a(r,e){var t=Object.keys(r);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(r);e&&(n=n.filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable}))),t.push.apply(t,n)}return t}function u(r){for(var e=1;e<arguments.length;e++){var t=null!=arguments[e]?arguments[e]:{};e%2?a(Object(t),!0).forEach((function(e){i(r,e,t[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(r,Object.getOwnPropertyDescriptors(t)):a(Object(t)).forEach((function(e){Object.defineProperty(r,e,Object.getOwnPropertyDescriptor(t,e))}))}return r}var l=["clientOptions","className"];var f=["clientOptions","className"];function s(o){var i=o.clientOptions,a=void 0===i?{}:i,s=o.className,p=void 0===s?"":s,b=function(r,e){if(null==r)return{};var t,n,o=function(r,e){if(null==r)return{};var t={};for(var n in r)if({}.hasOwnProperty.call(r,n)){if(e.includes(n))continue;t[n]=r[n]}return t}(r,e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(r);for(n=0;n<i.length;n++)t=i[n],e.includes(t)||{}.propertyIsEnumerable.call(r,t)&&(o[t]=r[t])}return o}(o,l),y=e(null),O=e(null);t((function(){if(y.current&&!O.current)try{var r={chart:{animations:{enabled:!0}}},e=u(u(u({},r),a),{},{chart:u(u({},r.chart),a.chart||{})});O.current=n.hydrate(y.current,e)}catch(r){console.error("Failed to hydrate ApexChart:",r)}return function(){O.current&&(O.current.destroy(),O.current=null)}}),[a]);var v,m,h=(v=f,m=u({},b),v.forEach((function(r){delete m[r]})),m);return r.createElement("div",c({ref:y,className:p},h))}s.propTypes={clientOptions:o.object,className:o.string};export{s as default};

package/dist/react-apexcharts-server.esm.js

@@ -0,0 +1 @@
+import t from"react";import r from"apexcharts/ssr";import e from"prop-types";function n(t,r,e,n,o,i,a){try{var c=t[i](a),u=c.value}catch(t){return void e(t)}c.done?r(u):Promise.resolve(u).then(n,o)}function o(t,r,e){return(r=function(t){var r=function(t,r){if("object"!=typeof t||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var n=e.call(t,r||"default");if("object"!=typeof n)return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===r?String:Number)(t)}(t,"string");return"symbol"==typeof r?r:r+""}(r))in t?Object.defineProperty(t,r,{value:e,enumerable:!0,configurable:!0,writable:!0}):t[r]=e,t}function i(){return i=Object.assign?Object.assign.bind():function(t){for(var r=1;r<arguments.length;r++){var e=arguments[r];for(var n in e)({}).hasOwnProperty.call(e,n)&&(t[n]=e[n])}return t},i.apply(null,arguments)}function a(t,r){var e=Object.keys(t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(t);r&&(n=n.filter((function(r){return Object.getOwnPropertyDescriptor(t,r).enumerable}))),e.push.apply(e,n)}return e}function c(t,r){if(null==t)return{};var e,n,o=function(t,r){if(null==t)return{};var e={};for(var n in t)if({}.hasOwnProperty.call(t,n)){if(r.includes(n))continue;e[n]=t[n]}return e}(t,r);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);for(n=0;n<i.length;n++)e=i[n],r.includes(e)||{}.propertyIsEnumerable.call(t,e)&&(o[e]=t[e])}return o}function u(){u=function(){return r};var t,r={},e=Object.prototype,n=e.hasOwnProperty,o=Object.defineProperty||function(t,r,e){t[r]=e.value},i="function"==typeof Symbol?Symbol:{},a=i.iterator||"@@iterator",c=i.asyncIterator||"@@asyncIterator",f=i.toStringTag||"@@toStringTag";function s(t,r,e){return Object.defineProperty(t,r,{value:e,enumerable:!0,configurable:!0,writable:!0}),t[r]}try{s({},"")}catch(t){s=function(t,r,e){return t[r]=e}}function l(t,r,e,n){var i=r&&r.prototype instanceof m?r:m,a=Object.create(i.prototype),c=new k(n||[]);return o(a,"_invoke",{value:S(t,e,c)}),a}function h(t,r,e){try{return{type:"normal",arg:t.call(r,e)}}catch(t){return{type:"throw",arg:t}}}r.wrap=l;var p="suspendedStart",y="suspendedYield",v="executing",d="completed",g={};function m(){}function b(){}function w(){}var O={};s(O,a,(function(){return this}));var j=Object.getPrototypeOf,E=j&&j(j(G([])));E&&E!==e&&n.call(E,a)&&(O=E);var x=w.prototype=m.prototype=Object.create(O);function L(t){["next","throw","return"].forEach((function(r){s(t,r,(function(t){return this._invoke(r,t)}))}))}function P(t,r){function e(o,i,a,c){var u=h(t[o],t,i);if("throw"!==u.type){var f=u.arg,s=f.value;return s&&"object"==typeof s&&n.call(s,"__await")?r.resolve(s.__await).then((function(t){e("next",t,a,c)}),(function(t){e("throw",t,a,c)})):r.resolve(s).then((function(t){f.value=t,a(f)}),(function(t){return e("throw",t,a,c)}))}c(u.arg)}var i;o(this,"_invoke",{value:function(t,n){function o(){return new r((function(r,o){e(t,n,r,o)}))}return i=i?i.then(o,o):o()}})}function S(r,e,n){var o=p;return function(i,a){if(o===v)throw Error("Generator is already running");if(o===d){if("throw"===i)throw a;return{value:t,done:!0}}for(n.method=i,n.arg=a;;){var c=n.delegate;if(c){var u=_(c,n);if(u){if(u===g)continue;return u}}if("next"===n.method)n.sent=n._sent=n.arg;else if("throw"===n.method){if(o===p)throw o=d,n.arg;n.dispatchException(n.arg)}else"return"===n.method&&n.abrupt("return",n.arg);o=v;var f=h(r,e,n);if("normal"===f.type){if(o=n.done?d:y,f.arg===g)continue;return{value:f.arg,done:n.done}}"throw"===f.type&&(o=d,n.method="throw",n.arg=f.arg)}}}function _(r,e){var n=e.method,o=r.iterator[n];if(o===t)return e.delegate=null,"throw"===n&&r.iterator.return&&(e.method="return",e.arg=t,_(r,e),"throw"===e.method)||"return"!==n&&(e.method="throw",e.arg=new TypeError("The iterator does not provide a '"+n+"' method")),g;var i=h(o,r.iterator,e.arg);if("throw"===i.type)return e.method="throw",e.arg=i.arg,e.delegate=null,g;var a=i.arg;return a?a.done?(e[r.resultName]=a.value,e.next=r.nextLoc,"return"!==e.method&&(e.method="next",e.arg=t),e.delegate=null,g):a:(e.method="throw",e.arg=new TypeError("iterator result is not an object"),e.delegate=null,g)}function N(t){var r={tryLoc:t[0]};1 in t&&(r.catchLoc=t[1]),2 in t&&(r.finallyLoc=t[2],r.afterLoc=t[3]),this.tryEntries.push(r)}function T(t){var r=t.completion||{};r.type="normal",delete r.arg,t.completion=r}function k(t){this.tryEntries=[{tryLoc:"root"}],t.forEach(N,this),this.reset(!0)}function G(r){if(r||""===r){var e=r[a];if(e)return e.call(r);if("function"==typeof r.next)return r;if(!isNaN(r.length)){var o=-1,i=function e(){for(;++o<r.length;)if(n.call(r,o))return e.value=r[o],e.done=!1,e;return e.value=t,e.done=!0,e};return i.next=i}}throw new TypeError(typeof r+" is not iterable")}return b.prototype=w,o(x,"constructor",{value:w,configurable:!0}),o(w,"constructor",{value:b,configurable:!0}),b.displayName=s(w,f,"GeneratorFunction"),r.isGeneratorFunction=function(t){var r="function"==typeof t&&t.constructor;return!!r&&(r===b||"GeneratorFunction"===(r.displayName||r.name))},r.mark=function(t){return Object.setPrototypeOf?Object.setPrototypeOf(t,w):(t.__proto__=w,s(t,f,"GeneratorFunction")),t.prototype=Object.create(x),t},r.awrap=function(t){return{__await:t}},L(P.prototype),s(P.prototype,c,(function(){return this})),r.AsyncIterator=P,r.async=function(t,e,n,o,i){void 0===i&&(i=Promise);var a=new P(l(t,e,n,o),i);return r.isGeneratorFunction(e)?a:a.next().then((function(t){return t.done?t.value:a.next()}))},L(x),s(x,f,"Generator"),s(x,a,(function(){return this})),s(x,"toString",(function(){return"[object Generator]"})),r.keys=function(t){var r=Object(t),e=[];for(var n in r)e.push(n);return e.reverse(),function t(){for(;e.length;){var n=e.pop();if(n in r)return t.value=n,t.done=!1,t}return t.done=!0,t}},r.values=G,k.prototype={constructor:k,reset:function(r){if(this.prev=0,this.next=0,this.sent=this._sent=t,this.done=!1,this.delegate=null,this.method="next",this.arg=t,this.tryEntries.forEach(T),!r)for(var e in this)"t"===e.charAt(0)&&n.call(this,e)&&!isNaN(+e.slice(1))&&(this[e]=t)},stop:function(){this.done=!0;var t=this.tryEntries[0].completion;if("throw"===t.type)throw t.arg;return this.rval},dispatchException:function(r){if(this.done)throw r;var e=this;function o(n,o){return c.type="throw",c.arg=r,e.next=n,o&&(e.method="next",e.arg=t),!!o}for(var i=this.tryEntries.length-1;i>=0;--i){var a=this.tryEntries[i],c=a.completion;if("root"===a.tryLoc)return o("end");if(a.tryLoc<=this.prev){var u=n.call(a,"catchLoc"),f=n.call(a,"finallyLoc");if(u&&f){if(this.prev<a.catchLoc)return o(a.catchLoc,!0);if(this.prev<a.finallyLoc)return o(a.finallyLoc)}else if(u){if(this.prev<a.catchLoc)return o(a.catchLoc,!0)}else{if(!f)throw Error("try statement without catch or finally");if(this.prev<a.finallyLoc)return o(a.finallyLoc)}}}},abrupt:function(t,r){for(var e=this.tryEntries.length-1;e>=0;--e){var o=this.tryEntries[e];if(o.tryLoc<=this.prev&&n.call(o,"finallyLoc")&&this.prev<o.finallyLoc){var i=o;break}}i&&("break"===t||"continue"===t)&&i.tryLoc<=r&&r<=i.finallyLoc&&(i=null);var a=i?i.completion:{};return a.type=t,a.arg=r,i?(this.method="next",this.next=i.finallyLoc,g):this.complete(a)},complete:function(t,r){if("throw"===t.type)throw t.arg;return"break"===t.type||"continue"===t.type?this.next=t.arg:"return"===t.type?(this.rval=this.arg=t.arg,this.method="return",this.next="end"):"normal"===t.type&&r&&(this.next=r),g},finish:function(t){for(var r=this.tryEntries.length-1;r>=0;--r){var e=this.tryEntries[r];if(e.finallyLoc===t)return this.complete(e.completion,e.afterLoc),T(e),g}},catch:function(t){for(var r=this.tryEntries.length-1;r>=0;--r){var e=this.tryEntries[r];if(e.tryLoc===t){var n=e.completion;if("throw"===n.type){var o=n.arg;T(e)}return o}}throw Error("illegal catch attempt")},delegateYield:function(r,e,n){return this.delegate={iterator:G(r),resultName:e,nextLoc:n},"next"===this.method&&(this.arg=t),g}},r}function f(t){return f="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},f(t)}var s=["type","width","height","series","options","className"];function l(t){return t&&"object"===f(t)&&!Array.isArray(t)}function h(t,r){var e=function(t){for(var r=1;r<arguments.length;r++){var e=null!=arguments[r]?arguments[r]:{};r%2?a(Object(e),!0).forEach((function(r){o(t,r,e[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(e)):a(Object(e)).forEach((function(r){Object.defineProperty(t,r,Object.getOwnPropertyDescriptor(e,r))}))}return t}({},t);return l(t)&&l(r)&&Object.keys(r).forEach((function(n){l(r[n])?e[n]=n in t?h(t[n],r[n]):r[n]:e[n]=r[n]})),e}function p(t){return y.apply(this,arguments)}function y(){var e;return e=u().mark((function e(n){var o,a,f,l,p,y,v,d,g,m,b,w,O,j,E;return u().wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return o=n.type,a=void 0===o?"line":o,f=n.width,l=void 0===f?400:f,p=n.height,y=void 0===p?300:p,v=n.series,d=void 0===v?[]:v,g=n.options,m=void 0===g?{}:g,b=n.className,w=void 0===b?"":b,O=c(n,s),j=h(m,{chart:{type:a,width:l,height:y},series:d}),e.prev=2,e.next=5,r.renderToHTML(j,{width:l,height:y});case 5:return E=e.sent,e.abrupt("return",t.createElement("div",i({className:w,dangerouslySetInnerHTML:{__html:E}},O)));case 9:return e.prev=9,e.t0=e.catch(2),console.error("Failed to render ApexChart on server:",e.t0),e.abrupt("return",t.createElement("div",i({className:w},O),t.createElement("p",null,"Error rendering chart")));case 13:case"end":return e.stop()}}),e,null,[[2,9]])})),y=function(){var t=this,r=arguments;return new Promise((function(o,i){var a=e.apply(t,r);function c(t){n(a,o,i,c,u,"next",t)}function u(t){n(a,o,i,c,u,"throw",t)}c(void 0)}))},y.apply(this,arguments)}p.propTypes={type:e.string,series:e.array,options:e.object,width:e.oneOfType([e.string,e.number]),height:e.oneOfType([e.string,e.number]),className:e.string};export{p as default};

package/dist/react-apexcharts.cjs.js

@@ -1 +1 @@
-"use strict";var e=require("react"),r=require("apexcharts"),t=require("prop-types");function n(e,r,t){return(r=function(e){var r=function(e,r){if("object"!=typeof e||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,r||"default");if("object"!=typeof n)return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===r?String:Number)(e)}(e,"string");return"symbol"==typeof r?r:r+""}(r))in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function i(){return i=Object.assign?Object.assign.bind():function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)({}).hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e},i.apply(null,arguments)}function o(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r&&(n=n.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,n)}return t}function u(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?o(Object(t),!0).forEach((function(r){n(e,r,t[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):o(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}))}return e}function c(e){return c="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},c(e)}var f=["type","width","height","series","options","chartRef"];function s(e){return e&&"object"===c(e)&&!Array.isArray(e)}function a(e,r){var t=u({},e);return s(e)&&s(r)&&Object.keys(r).forEach((function(n){s(r[n])?t[n]=n in e?a(e[n],r[n]):r[n]:t[n]=r[n]})),t}function l(e,r){var t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:new WeakSet;if(e===r)return!0;if("object"!==c(e)||null===e||"object"!==c(r)||null===r)return!1;if(t.has(e)||t.has(r))return!0;t.add(e),t.add(r);var n=Object.keys(e),i=Object.keys(r);if(n.length!==i.length)return!1;for(var o=0,u=n;o<u.length;o++){var f=u[o];if(!i.includes(f)||!l(e[f],r[f],t))return!1}return!0}var p=["type","series","options","width","height","chartRef"];function y(t){var n=t.type,o=void 0===n?"line":n,c=t.width,s=void 0===c?"100%":c,y=t.height,b=void 0===y?"auto":y,h=t.series,v=t.options,d=t.chartRef,O=function(e,r){if(null==e)return{};var t,n,i=function(e,r){if(null==e)return{};var t={};for(var n in e)if({}.hasOwnProperty.call(e,n)){if(r.includes(n))continue;t[n]=e[n]}return t}(e,r);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)t=o[n],r.includes(t)||{}.propertyIsEnumerable.call(e,t)&&(i[t]=e[t])}return i}(t,f),g=e.useRef(null),j=e.useRef(null),m=e.useRef(null),w=d||m,P=function(){return a(v,{chart:{type:o,height:b,width:s},series:h})};e.useEffect((function(){return w.current=new r(g.current,P()),w.current.render(),j.current=v,function(){w.current&&"function"==typeof w.current.destroy&&w.current.destroy()}}),[]),e.useEffect((function(){if(w.current&&w.current.w){var e=!l(w.current.w.config.series,h),r=!l(j.current,v)||b!==w.current.opts.chart.height||s!==w.current.opts.chart.width;(e||r)&&(e?r?w.current.updateOptions(P()):w.current.updateSeries(h):w.current.updateOptions(P())),j.current=v}}),[v,h,b,s]);var S,R,E=(S=p,R=u({},O),S.forEach((function(e){delete R[e]})),R);return e.createElement("div",i({ref:g},E))}y.propTypes={type:t.string.isRequired,series:t.array.isRequired,options:t.object.isRequired,width:t.oneOfType([t.string,t.number]),height:t.oneOfType([t.string,t.number]),chartRef:t.shape({current:t.any})},module.exports=y;
+"use strict";var e=require("react"),r=require("apexcharts/client"),t=require("prop-types");function n(e,r,t){return(r=function(e){var r=function(e,r){if("object"!=typeof e||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,r||"default");if("object"!=typeof n)return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===r?String:Number)(e)}(e,"string");return"symbol"==typeof r?r:r+""}(r))in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function i(){return i=Object.assign?Object.assign.bind():function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)({}).hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e},i.apply(null,arguments)}function o(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r&&(n=n.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,n)}return t}function u(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?o(Object(t),!0).forEach((function(r){n(e,r,t[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):o(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}))}return e}function c(e){return c="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},c(e)}var f=["type","width","height","series","options","chartRef"];function s(e){return e&&"object"===c(e)&&!Array.isArray(e)}function a(e,r){var t=u({},e);return s(e)&&s(r)&&Object.keys(r).forEach((function(n){s(r[n])?t[n]=n in e?a(e[n],r[n]):r[n]:t[n]=r[n]})),t}function l(e,r){var t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:new WeakSet;if(e===r)return!0;if("object"!==c(e)||null===e||"object"!==c(r)||null===r)return!1;if(t.has(e)||t.has(r))return!0;t.add(e),t.add(r);var n=Object.keys(e),i=Object.keys(r);if(n.length!==i.length)return!1;for(var o=0,u=n;o<u.length;o++){var f=u[o];if(!i.includes(f)||!l(e[f],r[f],t))return!1}return!0}var p=["type","series","options","width","height","chartRef"];function y(t){var n=t.type,o=void 0===n?"line":n,c=t.width,s=void 0===c?"100%":c,y=t.height,b=void 0===y?"auto":y,h=t.series,v=t.options,d=t.chartRef,O=function(e,r){if(null==e)return{};var t,n,i=function(e,r){if(null==e)return{};var t={};for(var n in e)if({}.hasOwnProperty.call(e,n)){if(r.includes(n))continue;t[n]=e[n]}return t}(e,r);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)t=o[n],r.includes(t)||{}.propertyIsEnumerable.call(e,t)&&(i[t]=e[t])}return i}(t,f),g=e.useRef(null),j=e.useRef(null),m=e.useRef(null),w=d||m,P=function(){return a(v,{chart:{type:o,height:b,width:s},series:h})};e.useEffect((function(){return w.current=new r(g.current,P()),w.current.render(),j.current=v,function(){w.current&&"function"==typeof w.current.destroy&&w.current.destroy()}}),[]),e.useEffect((function(){if(w.current&&w.current.w){var e=!l(w.current.w.config.series,h),r=!l(j.current,v)||b!==w.current.opts.chart.height||s!==w.current.opts.chart.width;(e||r)&&(e?r?w.current.updateOptions(P()):w.current.updateSeries(h):w.current.updateOptions(P())),j.current=v}}),[v,h,b,s]);var S,R,E=(S=p,R=u({},O),S.forEach((function(e){delete R[e]})),R);return e.createElement("div",i({ref:g},E))}y.propTypes={type:t.string.isRequired,series:t.array.isRequired,options:t.object.isRequired,width:t.oneOfType([t.string,t.number]),height:t.oneOfType([t.string,t.number]),chartRef:t.shape({current:t.any})},module.exports=y;

package/dist/react-apexcharts.esm.js

@@ -1 +1 @@
-import r,{useRef as e,useEffect as t}from"react";import n from"apexcharts";import o from"prop-types";function i(r,e,t){return(e=function(r){var e=function(r,e){if("object"!=typeof r||!r)return r;var t=r[Symbol.toPrimitive];if(void 0!==t){var n=t.call(r,e||"default");if("object"!=typeof n)return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===e?String:Number)(r)}(r,"string");return"symbol"==typeof e?e:e+""}(e))in r?Object.defineProperty(r,e,{value:t,enumerable:!0,configurable:!0,writable:!0}):r[e]=t,r}function u(){return u=Object.assign?Object.assign.bind():function(r){for(var e=1;e<arguments.length;e++){var t=arguments[e];for(var n in t)({}).hasOwnProperty.call(t,n)&&(r[n]=t[n])}return r},u.apply(null,arguments)}function c(r,e){var t=Object.keys(r);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(r);e&&(n=n.filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable}))),t.push.apply(t,n)}return t}function f(r){for(var e=1;e<arguments.length;e++){var t=null!=arguments[e]?arguments[e]:{};e%2?c(Object(t),!0).forEach((function(e){i(r,e,t[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(r,Object.getOwnPropertyDescriptors(t)):c(Object(t)).forEach((function(e){Object.defineProperty(r,e,Object.getOwnPropertyDescriptor(t,e))}))}return r}function a(r){return a="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(r){return typeof r}:function(r){return r&&"function"==typeof Symbol&&r.constructor===Symbol&&r!==Symbol.prototype?"symbol":typeof r},a(r)}var s=["type","width","height","series","options","chartRef"];function p(r){return r&&"object"===a(r)&&!Array.isArray(r)}function l(r,e){var t=f({},r);return p(r)&&p(e)&&Object.keys(e).forEach((function(n){p(e[n])?t[n]=n in r?l(r[n],e[n]):e[n]:t[n]=e[n]})),t}function y(r,e){var t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:new WeakSet;if(r===e)return!0;if("object"!==a(r)||null===r||"object"!==a(e)||null===e)return!1;if(t.has(r)||t.has(e))return!0;t.add(r),t.add(e);var n=Object.keys(r),o=Object.keys(e);if(n.length!==o.length)return!1;for(var i=0,u=n;i<u.length;i++){var c=u[i];if(!o.includes(c)||!y(r[c],e[c],t))return!1}return!0}var b=["type","series","options","width","height","chartRef"];function h(o){var i=o.type,c=void 0===i?"line":i,a=o.width,p=void 0===a?"100%":a,h=o.height,d=void 0===h?"auto":h,v=o.series,O=o.options,g=o.chartRef,m=function(r,e){if(null==r)return{};var t,n,o=function(r,e){if(null==r)return{};var t={};for(var n in r)if({}.hasOwnProperty.call(r,n)){if(e.includes(n))continue;t[n]=r[n]}return t}(r,e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(r);for(n=0;n<i.length;n++)t=i[n],e.includes(t)||{}.propertyIsEnumerable.call(r,t)&&(o[t]=r[t])}return o}(o,s),j=e(null),w=e(null),P=e(null),S=g||P,E=function(){return l(O,{chart:{type:c,height:d,width:p},series:v})};t((function(){return S.current=new n(j.current,E()),S.current.render(),w.current=O,function(){S.current&&"function"==typeof S.current.destroy&&S.current.destroy()}}),[]),t((function(){if(S.current&&S.current.w){var r=!y(S.current.w.config.series,v),e=!y(w.current,O)||d!==S.current.opts.chart.height||p!==S.current.opts.chart.width;(r||e)&&(r?e?S.current.updateOptions(E()):S.current.updateSeries(v):S.current.updateOptions(E())),w.current=O}}),[O,v,d,p]);var R,k,D=(R=b,k=f({},m),R.forEach((function(r){delete k[r]})),k);return r.createElement("div",u({ref:j},D))}h.propTypes={type:o.string.isRequired,series:o.array.isRequired,options:o.object.isRequired,width:o.oneOfType([o.string,o.number]),height:o.oneOfType([o.string,o.number]),chartRef:o.shape({current:o.any})};export{h as default};
+import r,{useRef as e,useEffect as t}from"react";import n from"apexcharts/client";import o from"prop-types";function i(r,e,t){return(e=function(r){var e=function(r,e){if("object"!=typeof r||!r)return r;var t=r[Symbol.toPrimitive];if(void 0!==t){var n=t.call(r,e||"default");if("object"!=typeof n)return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===e?String:Number)(r)}(r,"string");return"symbol"==typeof e?e:e+""}(e))in r?Object.defineProperty(r,e,{value:t,enumerable:!0,configurable:!0,writable:!0}):r[e]=t,r}function u(){return u=Object.assign?Object.assign.bind():function(r){for(var e=1;e<arguments.length;e++){var t=arguments[e];for(var n in t)({}).hasOwnProperty.call(t,n)&&(r[n]=t[n])}return r},u.apply(null,arguments)}function c(r,e){var t=Object.keys(r);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(r);e&&(n=n.filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable}))),t.push.apply(t,n)}return t}function f(r){for(var e=1;e<arguments.length;e++){var t=null!=arguments[e]?arguments[e]:{};e%2?c(Object(t),!0).forEach((function(e){i(r,e,t[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(r,Object.getOwnPropertyDescriptors(t)):c(Object(t)).forEach((function(e){Object.defineProperty(r,e,Object.getOwnPropertyDescriptor(t,e))}))}return r}function a(r){return a="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(r){return typeof r}:function(r){return r&&"function"==typeof Symbol&&r.constructor===Symbol&&r!==Symbol.prototype?"symbol":typeof r},a(r)}var s=["type","width","height","series","options","chartRef"];function p(r){return r&&"object"===a(r)&&!Array.isArray(r)}function l(r,e){var t=f({},r);return p(r)&&p(e)&&Object.keys(e).forEach((function(n){p(e[n])?t[n]=n in r?l(r[n],e[n]):e[n]:t[n]=e[n]})),t}function y(r,e){var t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:new WeakSet;if(r===e)return!0;if("object"!==a(r)||null===r||"object"!==a(e)||null===e)return!1;if(t.has(r)||t.has(e))return!0;t.add(r),t.add(e);var n=Object.keys(r),o=Object.keys(e);if(n.length!==o.length)return!1;for(var i=0,u=n;i<u.length;i++){var c=u[i];if(!o.includes(c)||!y(r[c],e[c],t))return!1}return!0}var b=["type","series","options","width","height","chartRef"];function h(o){var i=o.type,c=void 0===i?"line":i,a=o.width,p=void 0===a?"100%":a,h=o.height,d=void 0===h?"auto":h,v=o.series,O=o.options,g=o.chartRef,m=function(r,e){if(null==r)return{};var t,n,o=function(r,e){if(null==r)return{};var t={};for(var n in r)if({}.hasOwnProperty.call(r,n)){if(e.includes(n))continue;t[n]=r[n]}return t}(r,e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(r);for(n=0;n<i.length;n++)t=i[n],e.includes(t)||{}.propertyIsEnumerable.call(r,t)&&(o[t]=r[t])}return o}(o,s),j=e(null),w=e(null),P=e(null),S=g||P,E=function(){return l(O,{chart:{type:c,height:d,width:p},series:v})};t((function(){return S.current=new n(j.current,E()),S.current.render(),w.current=O,function(){S.current&&"function"==typeof S.current.destroy&&S.current.destroy()}}),[]),t((function(){if(S.current&&S.current.w){var r=!y(S.current.w.config.series,v),e=!y(w.current,O)||d!==S.current.opts.chart.height||p!==S.current.opts.chart.width;(r||e)&&(r?e?S.current.updateOptions(E()):S.current.updateSeries(v):S.current.updateOptions(E())),w.current=O}}),[O,v,d,p]);var R,k,D=(R=b,k=f({},m),R.forEach((function(r){delete k[r]})),k);return r.createElement("div",u({ref:j},D))}h.propTypes={type:o.string.isRequired,series:o.array.isRequired,options:o.object.isRequired,width:o.oneOfType([o.string,o.number]),height:o.oneOfType([o.string,o.number]),chartRef:o.shape({current:o.any})};export{h as default};

package/dist/react-apexcharts.min.js

@@ -1 +1 @@
-"use strict";var e=require("react"),r=require("apexcharts"),t=require("prop-types");function n(e,r,t){return(r=function(e){var r=function(e,r){if("object"!=typeof e||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,r||"default");if("object"!=typeof n)return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===r?String:Number)(e)}(e,"string");return"symbol"==typeof r?r:r+""}(r))in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function i(){return i=Object.assign?Object.assign.bind():function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)({}).hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e},i.apply(null,arguments)}function o(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r&&(n=n.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,n)}return t}function u(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?o(Object(t),!0).forEach((function(r){n(e,r,t[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):o(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}))}return e}function c(e){return c="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},c(e)}var f=["type","width","height","series","options","chartRef"];function s(e){return e&&"object"===c(e)&&!Array.isArray(e)}function a(e,r){var t=u({},e);return s(e)&&s(r)&&Object.keys(r).forEach((function(n){s(r[n])?t[n]=n in e?a(e[n],r[n]):r[n]:t[n]=r[n]})),t}function l(e,r){var t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:new WeakSet;if(e===r)return!0;if("object"!==c(e)||null===e||"object"!==c(r)||null===r)return!1;if(t.has(e)||t.has(r))return!0;t.add(e),t.add(r);var n=Object.keys(e),i=Object.keys(r);if(n.length!==i.length)return!1;for(var o=0,u=n;o<u.length;o++){var f=u[o];if(!i.includes(f)||!l(e[f],r[f],t))return!1}return!0}var p=["type","series","options","width","height","chartRef"];function y(t){var n=t.type,o=void 0===n?"line":n,c=t.width,s=void 0===c?"100%":c,y=t.height,b=void 0===y?"auto":y,h=t.series,v=t.options,d=t.chartRef,O=function(e,r){if(null==e)return{};var t,n,i=function(e,r){if(null==e)return{};var t={};for(var n in e)if({}.hasOwnProperty.call(e,n)){if(r.includes(n))continue;t[n]=e[n]}return t}(e,r);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)t=o[n],r.includes(t)||{}.propertyIsEnumerable.call(e,t)&&(i[t]=e[t])}return i}(t,f),g=e.useRef(null),j=e.useRef(null),m=e.useRef(null),w=d||m,P=function(){return a(v,{chart:{type:o,height:b,width:s},series:h})};e.useEffect((function(){return w.current=new r(g.current,P()),w.current.render(),j.current=v,function(){w.current&&"function"==typeof w.current.destroy&&w.current.destroy()}}),[]),e.useEffect((function(){if(w.current&&w.current.w){var e=!l(w.current.w.config.series,h),r=!l(j.current,v)||b!==w.current.opts.chart.height||s!==w.current.opts.chart.width;(e||r)&&(e?r?w.current.updateOptions(P()):w.current.updateSeries(h):w.current.updateOptions(P())),j.current=v}}),[v,h,b,s]);var S,R,E=(S=p,R=u({},O),S.forEach((function(e){delete R[e]})),R);return e.createElement("div",i({ref:g},E))}y.propTypes={type:t.string.isRequired,series:t.array.isRequired,options:t.object.isRequired,width:t.oneOfType([t.string,t.number]),height:t.oneOfType([t.string,t.number]),chartRef:t.shape({current:t.any})},module.exports=y;
+"use strict";var e=require("react"),r=require("apexcharts/client"),t=require("prop-types");function n(e,r,t){return(r=function(e){var r=function(e,r){if("object"!=typeof e||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,r||"default");if("object"!=typeof n)return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===r?String:Number)(e)}(e,"string");return"symbol"==typeof r?r:r+""}(r))in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function i(){return i=Object.assign?Object.assign.bind():function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)({}).hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e},i.apply(null,arguments)}function o(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r&&(n=n.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,n)}return t}function u(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?o(Object(t),!0).forEach((function(r){n(e,r,t[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):o(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}))}return e}function c(e){return c="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},c(e)}var f=["type","width","height","series","options","chartRef"];function s(e){return e&&"object"===c(e)&&!Array.isArray(e)}function a(e,r){var t=u({},e);return s(e)&&s(r)&&Object.keys(r).forEach((function(n){s(r[n])?t[n]=n in e?a(e[n],r[n]):r[n]:t[n]=r[n]})),t}function l(e,r){var t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:new WeakSet;if(e===r)return!0;if("object"!==c(e)||null===e||"object"!==c(r)||null===r)return!1;if(t.has(e)||t.has(r))return!0;t.add(e),t.add(r);var n=Object.keys(e),i=Object.keys(r);if(n.length!==i.length)return!1;for(var o=0,u=n;o<u.length;o++){var f=u[o];if(!i.includes(f)||!l(e[f],r[f],t))return!1}return!0}var p=["type","series","options","width","height","chartRef"];function y(t){var n=t.type,o=void 0===n?"line":n,c=t.width,s=void 0===c?"100%":c,y=t.height,b=void 0===y?"auto":y,h=t.series,v=t.options,d=t.chartRef,O=function(e,r){if(null==e)return{};var t,n,i=function(e,r){if(null==e)return{};var t={};for(var n in e)if({}.hasOwnProperty.call(e,n)){if(r.includes(n))continue;t[n]=e[n]}return t}(e,r);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)t=o[n],r.includes(t)||{}.propertyIsEnumerable.call(e,t)&&(i[t]=e[t])}return i}(t,f),g=e.useRef(null),j=e.useRef(null),m=e.useRef(null),w=d||m,P=function(){return a(v,{chart:{type:o,height:b,width:s},series:h})};e.useEffect((function(){return w.current=new r(g.current,P()),w.current.render(),j.current=v,function(){w.current&&"function"==typeof w.current.destroy&&w.current.destroy()}}),[]),e.useEffect((function(){if(w.current&&w.current.w){var e=!l(w.current.w.config.series,h),r=!l(j.current,v)||b!==w.current.opts.chart.height||s!==w.current.opts.chart.width;(e||r)&&(e?r?w.current.updateOptions(P()):w.current.updateSeries(h):w.current.updateOptions(P())),j.current=v}}),[v,h,b,s]);var S,R,E=(S=p,R=u({},O),S.forEach((function(e){delete R[e]})),R);return e.createElement("div",i({ref:g},E))}y.propTypes={type:t.string.isRequired,series:t.array.isRequired,options:t.object.isRequired,width:t.oneOfType([t.string,t.number]),height:t.oneOfType([t.string,t.number]),chartRef:t.shape({current:t.any})},module.exports=y;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-apexcharts",
-  "version": "1.9.0",
-  "description": "React.js wrapper for ApexCharts",
+  "version": "2.0.0",
+  "description": "React.js wrapper for ApexCharts with SSR support",
   "main": "dist/react-apexcharts.cjs.js",
   "module": "dist/react-apexcharts.esm.js",
   "browser": "dist/react-apexcharts.iife.min.js",
@@ -11,6 +11,14 @@
       "import": "./dist/react-apexcharts.esm.js",
       "require": "./dist/react-apexcharts.cjs.js",
       "types": "./types/react-apexcharts.d.ts"
+    },
+    "./server": {
+      "types": "./types/react-apexcharts-server.d.ts",
+      "import": "./dist/react-apexcharts-server.esm.js"
+    },
+    "./hydrate": {
+      "types": "./types/react-apexcharts-hydrate.d.ts",
+      "import": "./dist/react-apexcharts-hydrate.esm.js"
     }
   },
   "files": [
@@ -27,7 +35,11 @@
     "charts",
     "graphs",
     "apexcharts",
-    "data-visualization"
+    "data-visualization",
+    "ssr",
+    "server-side-rendering",
+    "nextjs",
+    "react-server-components"
   ],
   "author": {
     "name": "Juned Chhipa",
@@ -41,7 +53,7 @@
     "prop-types": "^15.8.1"
   },
   "peerDependencies": {
-    "apexcharts": ">=4.0.0",
+    "apexcharts": ">=5.5.0",
     "react": ">=16.8.0"
   },
   "devDependencies": {
@@ -52,6 +64,8 @@
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-node-resolve": "^15.3.0",
     "@rollup/plugin-terser": "^0.4.4",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
     "@types/react": "^18.3.11",
     "eslint": "^9.12.0",
     "eslint-plugin-react": "^7.37.1",

package/types/react-apexcharts-hydrate.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react"/>
+import { ApexOptions } from "apexcharts";
+import React from "react";
+
+/**
+ * Type definitions for react-apexcharts/hydrate
+ * Client Component for hydrating server-rendered charts
+ */
+declare module "react-apexcharts/hydrate" {
+  export interface HydrateChartProps {
+    /**
+     * Optional client-side options to override SSR config
+     * Animations are re-enabled by default
+     */
+    clientOptions?: ApexOptions;
+    className?: string;
+    [key: string]: any;
+  }
+
+  export default function ReactApexChartsHydrate(
+    props: HydrateChartProps
+  ): React.ReactElement;
+}

package/types/react-apexcharts-server.d.ts

@@ -0,0 +1,39 @@
+/// <reference types="react"/>
+import { ApexOptions } from "apexcharts";
+import React from "react";
+
+/**
+ * Type definitions for react-apexcharts/server
+ * Server Component for rendering charts in Next.js App Router
+ */
+declare module "react-apexcharts/server" {
+  export interface ServerChartProps {
+    type?:
+      | "line"
+      | "area"
+      | "bar"
+      | "pie"
+      | "donut"
+      | "radialBar"
+      | "scatter"
+      | "bubble"
+      | "heatmap"
+      | "candlestick"
+      | "boxPlot"
+      | "radar"
+      | "polarArea"
+      | "rangeBar"
+      | "rangeArea"
+      | "treemap";
+    series?: ApexOptions["series"];
+    width?: string | number;
+    height?: string | number;
+    options?: ApexOptions;
+    className?: string;
+    [key: string]: any;
+  }
+
+  export default function ReactApexChartsServer(
+    props: ServerChartProps
+  ): Promise<React.ReactElement>;
+}