react-muscle-stats 1.0.0

package/dist/components/OneRepMaxChart/index.cjs.js

@@ -0,0 +1,132 @@
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+let react_jsx_runtime = require("react/jsx-runtime");
+let recharts = require("recharts");
+var tooltipWrapperStyle = {
+	backgroundColor: "#1e1e2f",
+	border: "1px solid #3a3a5c",
+	borderRadius: 8,
+	padding: "8px 12px",
+	color: "#fff",
+	fontSize: 13,
+	lineHeight: 1.4
+};
+function OneRepMaxTooltip({ active, payload, label, unit }) {
+	if (!active || !payload?.length) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		style: tooltipWrapperStyle,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+			style: {
+				margin: 0,
+				fontWeight: 600
+			},
+			children: label
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+			style: {
+				margin: 0,
+				opacity: .85
+			},
+			children: [
+				payload[0].value,
+				" ",
+				unit
+			]
+		})]
+	});
+}
+var emptyStyle = {
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	color: "#888",
+	fontSize: 14,
+	height: 200
+};
+/**
+* A sleek `<LineChart>` for tracking estimated one-rep-max progress
+* over time. Inspired by the Hevy app's performance charts.
+*/
+function OneRepMaxChart({ data, lineColor = "#6C63FF", unit = "lbs", width = "100%", height = 300, style, className }) {
+	if (data.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className,
+		style: {
+			...emptyStyle,
+			...style
+		},
+		children: "No 1RM data available"
+	});
+	const glowFilter = `drop-shadow(0 0 6px ${lineColor})`;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className,
+		style: {
+			width,
+			...style
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.ResponsiveContainer, {
+			width: "100%",
+			height,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(recharts.LineChart, {
+				data,
+				margin: {
+					top: 10,
+					right: 20,
+					bottom: 0,
+					left: 0
+				},
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.XAxis, {
+						dataKey: "date",
+						axisLine: false,
+						tickLine: false,
+						tick: {
+							fontSize: 11,
+							fill: "#aaa"
+						}
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.YAxis, {
+						axisLine: false,
+						tickLine: false,
+						tick: {
+							fontSize: 11,
+							fill: "#aaa"
+						},
+						domain: ["dataMin - 10", "dataMax + 10"]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.Tooltip, {
+						content: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OneRepMaxTooltip, { unit }),
+						cursor: {
+							stroke: "#555",
+							strokeDasharray: "4 4"
+						}
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.Line, {
+						type: "monotone",
+						dataKey: "weight",
+						stroke: lineColor,
+						strokeWidth: 2.5,
+						dot: {
+							r: 4,
+							fill: lineColor,
+							stroke: "#fff",
+							strokeWidth: 2,
+							filter: glowFilter
+						},
+						activeDot: {
+							r: 7,
+							fill: lineColor,
+							stroke: "#fff",
+							strokeWidth: 2,
+							filter: glowFilter
+						}
+					})
+				]
+			})
+		})
+	});
+}
+exports.OneRepMaxChart = OneRepMaxChart;
+exports.default = OneRepMaxChart;
+
+//# sourceMappingURL=index.cjs.js.map

package/dist/components/OneRepMaxChart/index.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","names":[],"sources":["../../../src/components/OneRepMaxChart/index.tsx"],"sourcesContent":["import type { CSSProperties } from 'react';\r\nimport {\r\n  LineChart,\r\n  Line,\r\n  XAxis,\r\n  YAxis,\r\n  Tooltip,\r\n  ResponsiveContainer,\r\n  type TooltipProps,\r\n} from 'recharts';\r\n\r\nexport interface OneRepMaxDataPoint {\r\n  /** Date string displayed on the X axis (e.g. \"Jan 1\" or \"2026-01-15\"). */\r\n  date: string;\r\n  /** Estimated or actual 1RM weight value. */\r\n  weight: number;\r\n}\r\n\r\nexport interface OneRepMaxChartProps {\r\n  /** Array of data points to plot. */\r\n  data: OneRepMaxDataPoint[];\r\n  /** Stroke / dot colour for the line (default: `'#6C63FF'`). */\r\n  lineColor?: string;\r\n  /** Weight unit shown in the tooltip (default: `'lbs'`). */\r\n  unit?: 'lbs' | 'kg';\r\n  /** Width of the responsive container (default: `'100%'`). */\r\n  width?: string | number;\r\n  /** Height of the responsive container (default: `300`). */\r\n  height?: number;\r\n  /** Optional inline styles for the outer wrapper. */\r\n  style?: CSSProperties;\r\n  /** Optional CSS class name for the outer wrapper. */\r\n  className?: string;\r\n}\r\n\r\n/* ------------------------------------------------------------------ */\r\n/*  Custom dark-mode tooltip                                          */\r\n/* ------------------------------------------------------------------ */\r\n\r\nconst tooltipWrapperStyle: CSSProperties = {\r\n  backgroundColor: '#1e1e2f',\r\n  border: '1px solid #3a3a5c',\r\n  borderRadius: 8,\r\n  padding: '8px 12px',\r\n  color: '#fff',\r\n  fontSize: 13,\r\n  lineHeight: 1.4,\r\n};\r\n\r\nfunction OneRepMaxTooltip({\r\n  active,\r\n  payload,\r\n  label,\r\n  unit,\r\n}: TooltipProps<number, string> & { unit: string }) {\r\n  if (!active || !payload?.length) return null;\r\n  return (\r\n    <div style={tooltipWrapperStyle}>\r\n      <p style={{ margin: 0, fontWeight: 600 }}>{label}</p>\r\n      <p style={{ margin: 0, opacity: 0.85 }}>\r\n        {payload[0].value} {unit}\r\n      </p>\r\n    </div>\r\n  );\r\n}\r\n\r\n/* ------------------------------------------------------------------ */\r\n/*  Empty-state fallback                                              */\r\n/* ------------------------------------------------------------------ */\r\n\r\nconst emptyStyle: CSSProperties = {\r\n  display: 'flex',\r\n  alignItems: 'center',\r\n  justifyContent: 'center',\r\n  color: '#888',\r\n  fontSize: 14,\r\n  height: 200,\r\n};\r\n\r\n/* ------------------------------------------------------------------ */\r\n/*  Component                                                         */\r\n/* ------------------------------------------------------------------ */\r\n\r\n/**\r\n * A sleek `<LineChart>` for tracking estimated one-rep-max progress\r\n * over time. Inspired by the Hevy app's performance charts.\r\n */\r\nexport function OneRepMaxChart({\r\n  data,\r\n  lineColor = '#6C63FF',\r\n  unit = 'lbs',\r\n  width = '100%',\r\n  height = 300,\r\n  style,\r\n  className,\r\n}: OneRepMaxChartProps) {\r\n  if (data.length === 0) {\r\n    return (\r\n      <div className={className} style={{ ...emptyStyle, ...style }}>\r\n        No 1RM data available\r\n      </div>\r\n    );\r\n  }\r\n\r\n  const glowFilter = `drop-shadow(0 0 6px ${lineColor})`;\r\n\r\n  return (\r\n    <div className={className} style={{ width, ...style }}>\r\n      <ResponsiveContainer width=\"100%\" height={height}>\r\n        <LineChart data={data} margin={{ top: 10, right: 20, bottom: 0, left: 0 }}>\r\n          <XAxis\r\n            dataKey=\"date\"\r\n            axisLine={false}\r\n            tickLine={false}\r\n            tick={{ fontSize: 11, fill: '#aaa' }}\r\n          />\r\n          <YAxis\r\n            axisLine={false}\r\n            tickLine={false}\r\n            tick={{ fontSize: 11, fill: '#aaa' }}\r\n            domain={['dataMin - 10', 'dataMax + 10']}\r\n          />\r\n          <Tooltip\r\n            content={<OneRepMaxTooltip unit={unit} />}\r\n            cursor={{ stroke: '#555', strokeDasharray: '4 4' }}\r\n          />\r\n          <Line\r\n            type=\"monotone\"\r\n            dataKey=\"weight\"\r\n            stroke={lineColor}\r\n            strokeWidth={2.5}\r\n            dot={{\r\n              r: 4,\r\n              fill: lineColor,\r\n              stroke: '#fff',\r\n              strokeWidth: 2,\r\n              filter: glowFilter,\r\n            }}\r\n            activeDot={{\r\n              r: 7,\r\n              fill: lineColor,\r\n              stroke: '#fff',\r\n              strokeWidth: 2,\r\n              filter: glowFilter,\r\n            }}\r\n          />\r\n        </LineChart>\r\n      </ResponsiveContainer>\r\n    </div>\r\n  );\r\n}\r\n\r\nexport default OneRepMaxChart;\r\n"],"mappings":";;;;;;AAuCA,IAAM,sBAAqC;CACzC,iBAAiB;CACjB,QAAQ;CACR,cAAc;CACd,SAAS;CACT,OAAO;CACP,UAAU;CACV,YAAY;CACb;AAED,SAAS,iBAAiB,EACxB,QACA,SACA,OACA,QACkD;AAClD,KAAI,CAAC,UAAU,CAAC,SAAS,OAAQ,QAAO;AACxC,QACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAK,OAAO;YAAZ,CACE,iBAAA,GAAA,kBAAA,KAAC,KAAD;GAAG,OAAO;IAAE,QAAQ;IAAG,YAAY;IAAK;aAAG;GAAU,CAAA,EACrD,iBAAA,GAAA,kBAAA,MAAC,KAAD;GAAG,OAAO;IAAE,QAAQ;IAAG,SAAS;IAAM;aAAtC;IACG,QAAQ,GAAG;IAAM;IAAE;IAClB;KACA;;;AAQV,IAAM,aAA4B;CAChC,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,OAAO;CACP,UAAU;CACV,QAAQ;CACT;;;;;AAUD,SAAgB,eAAe,EAC7B,MACA,YAAY,WACZ,OAAO,OACP,QAAQ,QACR,SAAS,KACT,OACA,aACsB;AACtB,KAAI,KAAK,WAAW,EAClB,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAgB;EAAW,OAAO;GAAE,GAAG;GAAY,GAAG;GAAO;YAAE;EAEzD,CAAA;CAIV,MAAM,aAAa,uBAAuB,UAAU;AAEpD,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAgB;EAAW,OAAO;GAAE;GAAO,GAAG;GAAO;YACnD,iBAAA,GAAA,kBAAA,KAAC,SAAA,qBAAD;GAAqB,OAAM;GAAe;aACxC,iBAAA,GAAA,kBAAA,MAAC,SAAA,WAAD;IAAiB;IAAM,QAAQ;KAAE,KAAK;KAAI,OAAO;KAAI,QAAQ;KAAG,MAAM;KAAG;cAAzE;KACE,iBAAA,GAAA,kBAAA,KAAC,SAAA,OAAD;MACE,SAAQ;MACR,UAAU;MACV,UAAU;MACV,MAAM;OAAE,UAAU;OAAI,MAAM;OAAQ;MACpC,CAAA;KACF,iBAAA,GAAA,kBAAA,KAAC,SAAA,OAAD;MACE,UAAU;MACV,UAAU;MACV,MAAM;OAAE,UAAU;OAAI,MAAM;OAAQ;MACpC,QAAQ,CAAC,gBAAgB,eAAe;MACxC,CAAA;KACF,iBAAA,GAAA,kBAAA,KAAC,SAAA,SAAD;MACE,SAAS,iBAAA,GAAA,kBAAA,KAAC,kBAAD,EAAwB,MAAQ,CAAA;MACzC,QAAQ;OAAE,QAAQ;OAAQ,iBAAiB;OAAO;MAClD,CAAA;KACF,iBAAA,GAAA,kBAAA,KAAC,SAAA,MAAD;MACE,MAAK;MACL,SAAQ;MACR,QAAQ;MACR,aAAa;MACb,KAAK;OACH,GAAG;OACH,MAAM;OACN,QAAQ;OACR,aAAa;OACb,QAAQ;OACT;MACD,WAAW;OACT,GAAG;OACH,MAAM;OACN,QAAQ;OACR,aAAa;OACb,QAAQ;OACT;MACD,CAAA;KACQ;;GACQ,CAAA;EAClB,CAAA"}

package/dist/components/OneRepMaxChart/index.d.ts

@@ -0,0 +1,30 @@
+import { CSSProperties } from 'react';
+export interface OneRepMaxDataPoint {
+    /** Date string displayed on the X axis (e.g. "Jan 1" or "2026-01-15"). */
+    date: string;
+    /** Estimated or actual 1RM weight value. */
+    weight: number;
+}
+export interface OneRepMaxChartProps {
+    /** Array of data points to plot. */
+    data: OneRepMaxDataPoint[];
+    /** Stroke / dot colour for the line (default: `'#6C63FF'`). */
+    lineColor?: string;
+    /** Weight unit shown in the tooltip (default: `'lbs'`). */
+    unit?: 'lbs' | 'kg';
+    /** Width of the responsive container (default: `'100%'`). */
+    width?: string | number;
+    /** Height of the responsive container (default: `300`). */
+    height?: number;
+    /** Optional inline styles for the outer wrapper. */
+    style?: CSSProperties;
+    /** Optional CSS class name for the outer wrapper. */
+    className?: string;
+}
+/**
+ * A sleek `<LineChart>` for tracking estimated one-rep-max progress
+ * over time. Inspired by the Hevy app's performance charts.
+ */
+export declare function OneRepMaxChart({ data, lineColor, unit, width, height, style, className, }: OneRepMaxChartProps): import("react/jsx-runtime").JSX.Element;
+export default OneRepMaxChart;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/OneRepMaxChart/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/OneRepMaxChart/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAW3C,MAAM,WAAW,kBAAkB;IACjC,0EAA0E;IAC1E,IAAI,EAAE,MAAM,CAAC;IACb,4CAA4C;IAC5C,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,mBAAmB;IAClC,oCAAoC;IACpC,IAAI,EAAE,kBAAkB,EAAE,CAAC;IAC3B,+DAA+D;IAC/D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2DAA2D;IAC3D,IAAI,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,6DAA6D;IAC7D,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,2DAA2D;IAC3D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oDAAoD;IACpD,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,qDAAqD;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAkDD;;;GAGG;AACH,wBAAgB,cAAc,CAAC,EAC7B,IAAI,EACJ,SAAqB,EACrB,IAAY,EACZ,KAAc,EACd,MAAY,EACZ,KAAK,EACL,SAAS,GACV,EAAE,mBAAmB,2CAuDrB;AAED,eAAe,cAAc,CAAC"}

package/dist/components/OneRepMaxChart/index.es.js

@@ -0,0 +1,127 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
+var tooltipWrapperStyle = {
+	backgroundColor: "#1e1e2f",
+	border: "1px solid #3a3a5c",
+	borderRadius: 8,
+	padding: "8px 12px",
+	color: "#fff",
+	fontSize: 13,
+	lineHeight: 1.4
+};
+function OneRepMaxTooltip({ active, payload, label, unit }) {
+	if (!active || !payload?.length) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		style: tooltipWrapperStyle,
+		children: [/* @__PURE__ */ jsx("p", {
+			style: {
+				margin: 0,
+				fontWeight: 600
+			},
+			children: label
+		}), /* @__PURE__ */ jsxs("p", {
+			style: {
+				margin: 0,
+				opacity: .85
+			},
+			children: [
+				payload[0].value,
+				" ",
+				unit
+			]
+		})]
+	});
+}
+var emptyStyle = {
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	color: "#888",
+	fontSize: 14,
+	height: 200
+};
+/**
+* A sleek `<LineChart>` for tracking estimated one-rep-max progress
+* over time. Inspired by the Hevy app's performance charts.
+*/
+function OneRepMaxChart({ data, lineColor = "#6C63FF", unit = "lbs", width = "100%", height = 300, style, className }) {
+	if (data.length === 0) return /* @__PURE__ */ jsx("div", {
+		className,
+		style: {
+			...emptyStyle,
+			...style
+		},
+		children: "No 1RM data available"
+	});
+	const glowFilter = `drop-shadow(0 0 6px ${lineColor})`;
+	return /* @__PURE__ */ jsx("div", {
+		className,
+		style: {
+			width,
+			...style
+		},
+		children: /* @__PURE__ */ jsx(ResponsiveContainer, {
+			width: "100%",
+			height,
+			children: /* @__PURE__ */ jsxs(LineChart, {
+				data,
+				margin: {
+					top: 10,
+					right: 20,
+					bottom: 0,
+					left: 0
+				},
+				children: [
+					/* @__PURE__ */ jsx(XAxis, {
+						dataKey: "date",
+						axisLine: false,
+						tickLine: false,
+						tick: {
+							fontSize: 11,
+							fill: "#aaa"
+						}
+					}),
+					/* @__PURE__ */ jsx(YAxis, {
+						axisLine: false,
+						tickLine: false,
+						tick: {
+							fontSize: 11,
+							fill: "#aaa"
+						},
+						domain: ["dataMin - 10", "dataMax + 10"]
+					}),
+					/* @__PURE__ */ jsx(Tooltip, {
+						content: /* @__PURE__ */ jsx(OneRepMaxTooltip, { unit }),
+						cursor: {
+							stroke: "#555",
+							strokeDasharray: "4 4"
+						}
+					}),
+					/* @__PURE__ */ jsx(Line, {
+						type: "monotone",
+						dataKey: "weight",
+						stroke: lineColor,
+						strokeWidth: 2.5,
+						dot: {
+							r: 4,
+							fill: lineColor,
+							stroke: "#fff",
+							strokeWidth: 2,
+							filter: glowFilter
+						},
+						activeDot: {
+							r: 7,
+							fill: lineColor,
+							stroke: "#fff",
+							strokeWidth: 2,
+							filter: glowFilter
+						}
+					})
+				]
+			})
+		})
+	});
+}
+export { OneRepMaxChart, OneRepMaxChart as default };
+
+//# sourceMappingURL=index.es.js.map

package/dist/components/OneRepMaxChart/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../src/components/OneRepMaxChart/index.tsx"],"sourcesContent":["import type { CSSProperties } from 'react';\r\nimport {\r\n  LineChart,\r\n  Line,\r\n  XAxis,\r\n  YAxis,\r\n  Tooltip,\r\n  ResponsiveContainer,\r\n  type TooltipProps,\r\n} from 'recharts';\r\n\r\nexport interface OneRepMaxDataPoint {\r\n  /** Date string displayed on the X axis (e.g. \"Jan 1\" or \"2026-01-15\"). */\r\n  date: string;\r\n  /** Estimated or actual 1RM weight value. */\r\n  weight: number;\r\n}\r\n\r\nexport interface OneRepMaxChartProps {\r\n  /** Array of data points to plot. */\r\n  data: OneRepMaxDataPoint[];\r\n  /** Stroke / dot colour for the line (default: `'#6C63FF'`). */\r\n  lineColor?: string;\r\n  /** Weight unit shown in the tooltip (default: `'lbs'`). */\r\n  unit?: 'lbs' | 'kg';\r\n  /** Width of the responsive container (default: `'100%'`). */\r\n  width?: string | number;\r\n  /** Height of the responsive container (default: `300`). */\r\n  height?: number;\r\n  /** Optional inline styles for the outer wrapper. */\r\n  style?: CSSProperties;\r\n  /** Optional CSS class name for the outer wrapper. */\r\n  className?: string;\r\n}\r\n\r\n/* ------------------------------------------------------------------ */\r\n/*  Custom dark-mode tooltip                                          */\r\n/* ------------------------------------------------------------------ */\r\n\r\nconst tooltipWrapperStyle: CSSProperties = {\r\n  backgroundColor: '#1e1e2f',\r\n  border: '1px solid #3a3a5c',\r\n  borderRadius: 8,\r\n  padding: '8px 12px',\r\n  color: '#fff',\r\n  fontSize: 13,\r\n  lineHeight: 1.4,\r\n};\r\n\r\nfunction OneRepMaxTooltip({\r\n  active,\r\n  payload,\r\n  label,\r\n  unit,\r\n}: TooltipProps<number, string> & { unit: string }) {\r\n  if (!active || !payload?.length) return null;\r\n  return (\r\n    <div style={tooltipWrapperStyle}>\r\n      <p style={{ margin: 0, fontWeight: 600 }}>{label}</p>\r\n      <p style={{ margin: 0, opacity: 0.85 }}>\r\n        {payload[0].value} {unit}\r\n      </p>\r\n    </div>\r\n  );\r\n}\r\n\r\n/* ------------------------------------------------------------------ */\r\n/*  Empty-state fallback                                              */\r\n/* ------------------------------------------------------------------ */\r\n\r\nconst emptyStyle: CSSProperties = {\r\n  display: 'flex',\r\n  alignItems: 'center',\r\n  justifyContent: 'center',\r\n  color: '#888',\r\n  fontSize: 14,\r\n  height: 200,\r\n};\r\n\r\n/* ------------------------------------------------------------------ */\r\n/*  Component                                                         */\r\n/* ------------------------------------------------------------------ */\r\n\r\n/**\r\n * A sleek `<LineChart>` for tracking estimated one-rep-max progress\r\n * over time. Inspired by the Hevy app's performance charts.\r\n */\r\nexport function OneRepMaxChart({\r\n  data,\r\n  lineColor = '#6C63FF',\r\n  unit = 'lbs',\r\n  width = '100%',\r\n  height = 300,\r\n  style,\r\n  className,\r\n}: OneRepMaxChartProps) {\r\n  if (data.length === 0) {\r\n    return (\r\n      <div className={className} style={{ ...emptyStyle, ...style }}>\r\n        No 1RM data available\r\n      </div>\r\n    );\r\n  }\r\n\r\n  const glowFilter = `drop-shadow(0 0 6px ${lineColor})`;\r\n\r\n  return (\r\n    <div className={className} style={{ width, ...style }}>\r\n      <ResponsiveContainer width=\"100%\" height={height}>\r\n        <LineChart data={data} margin={{ top: 10, right: 20, bottom: 0, left: 0 }}>\r\n          <XAxis\r\n            dataKey=\"date\"\r\n            axisLine={false}\r\n            tickLine={false}\r\n            tick={{ fontSize: 11, fill: '#aaa' }}\r\n          />\r\n          <YAxis\r\n            axisLine={false}\r\n            tickLine={false}\r\n            tick={{ fontSize: 11, fill: '#aaa' }}\r\n            domain={['dataMin - 10', 'dataMax + 10']}\r\n          />\r\n          <Tooltip\r\n            content={<OneRepMaxTooltip unit={unit} />}\r\n            cursor={{ stroke: '#555', strokeDasharray: '4 4' }}\r\n          />\r\n          <Line\r\n            type=\"monotone\"\r\n            dataKey=\"weight\"\r\n            stroke={lineColor}\r\n            strokeWidth={2.5}\r\n            dot={{\r\n              r: 4,\r\n              fill: lineColor,\r\n              stroke: '#fff',\r\n              strokeWidth: 2,\r\n              filter: glowFilter,\r\n            }}\r\n            activeDot={{\r\n              r: 7,\r\n              fill: lineColor,\r\n              stroke: '#fff',\r\n              strokeWidth: 2,\r\n              filter: glowFilter,\r\n            }}\r\n          />\r\n        </LineChart>\r\n      </ResponsiveContainer>\r\n    </div>\r\n  );\r\n}\r\n\r\nexport default OneRepMaxChart;\r\n"],"mappings":";;AAuCA,IAAM,sBAAqC;CACzC,iBAAiB;CACjB,QAAQ;CACR,cAAc;CACd,SAAS;CACT,OAAO;CACP,UAAU;CACV,YAAY;CACb;AAED,SAAS,iBAAiB,EACxB,QACA,SACA,OACA,QACkD;AAClD,KAAI,CAAC,UAAU,CAAC,SAAS,OAAQ,QAAO;AACxC,QACE,qBAAC,OAAD;EAAK,OAAO;YAAZ,CACE,oBAAC,KAAD;GAAG,OAAO;IAAE,QAAQ;IAAG,YAAY;IAAK;aAAG;GAAU,CAAA,EACrD,qBAAC,KAAD;GAAG,OAAO;IAAE,QAAQ;IAAG,SAAS;IAAM;aAAtC;IACG,QAAQ,GAAG;IAAM;IAAE;IAClB;KACA;;;AAQV,IAAM,aAA4B;CAChC,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,OAAO;CACP,UAAU;CACV,QAAQ;CACT;;;;;AAUD,SAAgB,eAAe,EAC7B,MACA,YAAY,WACZ,OAAO,OACP,QAAQ,QACR,SAAS,KACT,OACA,aACsB;AACtB,KAAI,KAAK,WAAW,EAClB,QACE,oBAAC,OAAD;EAAgB;EAAW,OAAO;GAAE,GAAG;GAAY,GAAG;GAAO;YAAE;EAEzD,CAAA;CAIV,MAAM,aAAa,uBAAuB,UAAU;AAEpD,QACE,oBAAC,OAAD;EAAgB;EAAW,OAAO;GAAE;GAAO,GAAG;GAAO;YACnD,oBAAC,qBAAD;GAAqB,OAAM;GAAe;aACxC,qBAAC,WAAD;IAAiB;IAAM,QAAQ;KAAE,KAAK;KAAI,OAAO;KAAI,QAAQ;KAAG,MAAM;KAAG;cAAzE;KACE,oBAAC,OAAD;MACE,SAAQ;MACR,UAAU;MACV,UAAU;MACV,MAAM;OAAE,UAAU;OAAI,MAAM;OAAQ;MACpC,CAAA;KACF,oBAAC,OAAD;MACE,UAAU;MACV,UAAU;MACV,MAAM;OAAE,UAAU;OAAI,MAAM;OAAQ;MACpC,QAAQ,CAAC,gBAAgB,eAAe;MACxC,CAAA;KACF,oBAAC,SAAD;MACE,SAAS,oBAAC,kBAAD,EAAwB,MAAQ,CAAA;MACzC,QAAQ;OAAE,QAAQ;OAAQ,iBAAiB;OAAO;MAClD,CAAA;KACF,oBAAC,MAAD;MACE,MAAK;MACL,SAAQ;MACR,QAAQ;MACR,aAAa;MACb,KAAK;OACH,GAAG;OACH,MAAM;OACN,QAAQ;OACR,aAAa;OACb,QAAQ;OACT;MACD,WAAW;OACT,GAAG;OACH,MAAM;OACN,QAAQ;OACR,aAAa;OACb,QAAQ;OACT;MACD,CAAA;KACQ;;GACQ,CAAA;EAClB,CAAA"}

package/dist/components/VolumeChart/index.cjs.js

@@ -0,0 +1,155 @@
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+let react_jsx_runtime = require("react/jsx-runtime");
+let recharts = require("recharts");
+/** Formats large numbers with a "k" suffix (e.g. 12 500 → "12.5k"). */
+function formatVolumeTick(value) {
+	if (value >= 1e3) {
+		const k = value / 1e3;
+		return `${Number.isInteger(k) ? k : k.toFixed(1)}k`;
+	}
+	return String(value);
+}
+var tooltipWrapperStyle = {
+	backgroundColor: "#1e1e2f",
+	border: "1px solid #3a3a5c",
+	borderRadius: 8,
+	padding: "8px 12px",
+	color: "#fff",
+	fontSize: 13,
+	lineHeight: 1.4
+};
+function VolumeTooltip({ active, payload, label, unit }) {
+	if (!active || !payload?.length) return null;
+	const vol = payload[0].value;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		style: tooltipWrapperStyle,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+			style: {
+				margin: 0,
+				fontWeight: 600
+			},
+			children: label
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+			style: {
+				margin: 0,
+				opacity: .85
+			},
+			children: [
+				vol.toLocaleString(),
+				" ",
+				unit
+			]
+		})]
+	});
+}
+var emptyStyle = {
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	color: "#888",
+	fontSize: 14,
+	height: 200
+};
+/**
+* A Recharts `<AreaChart>` with a fading gradient fill for tracking
+* training volume over time. Inspired by the Hevy app.
+*/
+function VolumeChart({ data, fillColor = "#00C49F", unit = "lbs", width = "100%", height = 300, style, className }) {
+	if (data.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className,
+		style: {
+			...emptyStyle,
+			...style
+		},
+		children: "No volume data available"
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className,
+		style: {
+			width,
+			...style
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.ResponsiveContainer, {
+			width: "100%",
+			height,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(recharts.AreaChart, {
+				data,
+				margin: {
+					top: 10,
+					right: 20,
+					bottom: 0,
+					left: 0
+				},
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("defs", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("linearGradient", {
+						id: "colorVolume",
+						x1: "0",
+						y1: "0",
+						x2: "0",
+						y2: "1",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
+							offset: "5%",
+							stopColor: fillColor,
+							stopOpacity: .4
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
+							offset: "95%",
+							stopColor: fillColor,
+							stopOpacity: .02
+						})]
+					}) }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.XAxis, {
+						dataKey: "date",
+						axisLine: false,
+						tickLine: false,
+						tick: {
+							fontSize: 11,
+							fill: "#aaa"
+						}
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.YAxis, {
+						axisLine: false,
+						tickLine: false,
+						tick: {
+							fontSize: 11,
+							fill: "#aaa"
+						},
+						tickFormatter: formatVolumeTick
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.Tooltip, {
+						content: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(VolumeTooltip, { unit }),
+						cursor: {
+							stroke: "#555",
+							strokeDasharray: "4 4"
+						}
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.Area, {
+						type: "monotone",
+						dataKey: "volume",
+						stroke: fillColor,
+						strokeWidth: 2,
+						fill: "url(#colorVolume)",
+						dot: {
+							r: 3,
+							fill: fillColor,
+							stroke: "#fff",
+							strokeWidth: 1.5
+						},
+						activeDot: {
+							r: 6,
+							fill: fillColor,
+							stroke: "#fff",
+							strokeWidth: 2
+						}
+					})
+				]
+			})
+		})
+	});
+}
+exports.VolumeChart = VolumeChart;
+exports.default = VolumeChart;
+
+//# sourceMappingURL=index.cjs.js.map

package/dist/components/VolumeChart/index.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","names":[],"sources":["../../../src/components/VolumeChart/index.tsx"],"sourcesContent":["import type { CSSProperties } from 'react';\r\nimport {\r\n  AreaChart,\r\n  Area,\r\n  XAxis,\r\n  YAxis,\r\n  Tooltip,\r\n  ResponsiveContainer,\r\n  type TooltipProps,\r\n} from 'recharts';\r\n\r\nexport interface VolumeDataPoint {\r\n  /** Date string displayed on the X axis. */\r\n  date: string;\r\n  /** Total volume (sets × reps × weight). */\r\n  volume: number;\r\n}\r\n\r\nexport interface VolumeChartProps {\r\n  /** Array of data points to plot. */\r\n  data: VolumeDataPoint[];\r\n  /** Primary fill / stroke colour for the area (default: `'#00C49F'`). */\r\n  fillColor?: string;\r\n  /** Weight unit shown in the tooltip (default: `'lbs'`). */\r\n  unit?: 'lbs' | 'kg';\r\n  /** Width of the responsive container (default: `'100%'`). */\r\n  width?: string | number;\r\n  /** Height of the responsive container (default: `300`). */\r\n  height?: number;\r\n  /** Optional inline styles for the outer wrapper. */\r\n  style?: CSSProperties;\r\n  /** Optional CSS class name for the outer wrapper. */\r\n  className?: string;\r\n}\r\n\r\n/* ------------------------------------------------------------------ */\r\n/*  Helpers                                                           */\r\n/* ------------------------------------------------------------------ */\r\n\r\n/** Formats large numbers with a \"k\" suffix (e.g. 12 500 → \"12.5k\"). */\r\nfunction formatVolumeTick(value: number): string {\r\n  if (value >= 1000) {\r\n    const k = value / 1000;\r\n    // Drop the decimal when it's a whole number (e.g. 10k not 10.0k)\r\n    return `${Number.isInteger(k) ? k : k.toFixed(1)}k`;\r\n  }\r\n  return String(value);\r\n}\r\n\r\n/* ------------------------------------------------------------------ */\r\n/*  Custom dark-mode tooltip                                          */\r\n/* ------------------------------------------------------------------ */\r\n\r\nconst tooltipWrapperStyle: CSSProperties = {\r\n  backgroundColor: '#1e1e2f',\r\n  border: '1px solid #3a3a5c',\r\n  borderRadius: 8,\r\n  padding: '8px 12px',\r\n  color: '#fff',\r\n  fontSize: 13,\r\n  lineHeight: 1.4,\r\n};\r\n\r\nfunction VolumeTooltip({\r\n  active,\r\n  payload,\r\n  label,\r\n  unit,\r\n}: TooltipProps<number, string> & { unit: string }) {\r\n  if (!active || !payload?.length) return null;\r\n  const vol = payload[0].value as number;\r\n  return (\r\n    <div style={tooltipWrapperStyle}>\r\n      <p style={{ margin: 0, fontWeight: 600 }}>{label}</p>\r\n      <p style={{ margin: 0, opacity: 0.85 }}>\r\n        {vol.toLocaleString()} {unit}\r\n      </p>\r\n    </div>\r\n  );\r\n}\r\n\r\n/* ------------------------------------------------------------------ */\r\n/*  Empty-state fallback                                              */\r\n/* ------------------------------------------------------------------ */\r\n\r\nconst emptyStyle: CSSProperties = {\r\n  display: 'flex',\r\n  alignItems: 'center',\r\n  justifyContent: 'center',\r\n  color: '#888',\r\n  fontSize: 14,\r\n  height: 200,\r\n};\r\n\r\n/* ------------------------------------------------------------------ */\r\n/*  Component                                                         */\r\n/* ------------------------------------------------------------------ */\r\n\r\n/**\r\n * A Recharts `<AreaChart>` with a fading gradient fill for tracking\r\n * training volume over time. Inspired by the Hevy app.\r\n */\r\nexport function VolumeChart({\r\n  data,\r\n  fillColor = '#00C49F',\r\n  unit = 'lbs',\r\n  width = '100%',\r\n  height = 300,\r\n  style,\r\n  className,\r\n}: VolumeChartProps) {\r\n  if (data.length === 0) {\r\n    return (\r\n      <div className={className} style={{ ...emptyStyle, ...style }}>\r\n        No volume data available\r\n      </div>\r\n    );\r\n  }\r\n\r\n  return (\r\n    <div className={className} style={{ width, ...style }}>\r\n      <ResponsiveContainer width=\"100%\" height={height}>\r\n        <AreaChart data={data} margin={{ top: 10, right: 20, bottom: 0, left: 0 }}>\r\n          <defs>\r\n            <linearGradient id=\"colorVolume\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\r\n              <stop offset=\"5%\" stopColor={fillColor} stopOpacity={0.4} />\r\n              <stop offset=\"95%\" stopColor={fillColor} stopOpacity={0.02} />\r\n            </linearGradient>\r\n          </defs>\r\n\r\n          <XAxis\r\n            dataKey=\"date\"\r\n            axisLine={false}\r\n            tickLine={false}\r\n            tick={{ fontSize: 11, fill: '#aaa' }}\r\n          />\r\n          <YAxis\r\n            axisLine={false}\r\n            tickLine={false}\r\n            tick={{ fontSize: 11, fill: '#aaa' }}\r\n            tickFormatter={formatVolumeTick}\r\n          />\r\n          <Tooltip\r\n            content={<VolumeTooltip unit={unit} />}\r\n            cursor={{ stroke: '#555', strokeDasharray: '4 4' }}\r\n          />\r\n          <Area\r\n            type=\"monotone\"\r\n            dataKey=\"volume\"\r\n            stroke={fillColor}\r\n            strokeWidth={2}\r\n            fill=\"url(#colorVolume)\"\r\n            dot={{ r: 3, fill: fillColor, stroke: '#fff', strokeWidth: 1.5 }}\r\n            activeDot={{ r: 6, fill: fillColor, stroke: '#fff', strokeWidth: 2 }}\r\n          />\r\n        </AreaChart>\r\n      </ResponsiveContainer>\r\n    </div>\r\n  );\r\n}\r\n\r\nexport default VolumeChart;\r\n"],"mappings":"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"}

package/dist/components/VolumeChart/index.d.ts

@@ -0,0 +1,30 @@
+import { CSSProperties } from 'react';
+export interface VolumeDataPoint {
+    /** Date string displayed on the X axis. */
+    date: string;
+    /** Total volume (sets × reps × weight). */
+    volume: number;
+}
+export interface VolumeChartProps {
+    /** Array of data points to plot. */
+    data: VolumeDataPoint[];
+    /** Primary fill / stroke colour for the area (default: `'#00C49F'`). */
+    fillColor?: string;
+    /** Weight unit shown in the tooltip (default: `'lbs'`). */
+    unit?: 'lbs' | 'kg';
+    /** Width of the responsive container (default: `'100%'`). */
+    width?: string | number;
+    /** Height of the responsive container (default: `300`). */
+    height?: number;
+    /** Optional inline styles for the outer wrapper. */
+    style?: CSSProperties;
+    /** Optional CSS class name for the outer wrapper. */
+    className?: string;
+}
+/**
+ * A Recharts `<AreaChart>` with a fading gradient fill for tracking
+ * training volume over time. Inspired by the Hevy app.
+ */
+export declare function VolumeChart({ data, fillColor, unit, width, height, style, className, }: VolumeChartProps): import("react/jsx-runtime").JSX.Element;
+export default VolumeChart;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/VolumeChart/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/VolumeChart/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAW3C,MAAM,WAAW,eAAe;IAC9B,2CAA2C;IAC3C,IAAI,EAAE,MAAM,CAAC;IACb,2CAA2C;IAC3C,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,gBAAgB;IAC/B,oCAAoC;IACpC,IAAI,EAAE,eAAe,EAAE,CAAC;IACxB,wEAAwE;IACxE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2DAA2D;IAC3D,IAAI,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,6DAA6D;IAC7D,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,2DAA2D;IAC3D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oDAAoD;IACpD,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,qDAAqD;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAiED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,SAAqB,EACrB,IAAY,EACZ,KAAc,EACd,MAAY,EACZ,KAAK,EACL,SAAS,GACV,EAAE,gBAAgB,2CAiDlB;AAED,eAAe,WAAW,CAAC"}

package/dist/components/VolumeChart/index.es.js

@@ -0,0 +1,150 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Area, AreaChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
+/** Formats large numbers with a "k" suffix (e.g. 12 500 → "12.5k"). */
+function formatVolumeTick(value) {
+	if (value >= 1e3) {
+		const k = value / 1e3;
+		return `${Number.isInteger(k) ? k : k.toFixed(1)}k`;
+	}
+	return String(value);
+}
+var tooltipWrapperStyle = {
+	backgroundColor: "#1e1e2f",
+	border: "1px solid #3a3a5c",
+	borderRadius: 8,
+	padding: "8px 12px",
+	color: "#fff",
+	fontSize: 13,
+	lineHeight: 1.4
+};
+function VolumeTooltip({ active, payload, label, unit }) {
+	if (!active || !payload?.length) return null;
+	const vol = payload[0].value;
+	return /* @__PURE__ */ jsxs("div", {
+		style: tooltipWrapperStyle,
+		children: [/* @__PURE__ */ jsx("p", {
+			style: {
+				margin: 0,
+				fontWeight: 600
+			},
+			children: label
+		}), /* @__PURE__ */ jsxs("p", {
+			style: {
+				margin: 0,
+				opacity: .85
+			},
+			children: [
+				vol.toLocaleString(),
+				" ",
+				unit
+			]
+		})]
+	});
+}
+var emptyStyle = {
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	color: "#888",
+	fontSize: 14,
+	height: 200
+};
+/**
+* A Recharts `<AreaChart>` with a fading gradient fill for tracking
+* training volume over time. Inspired by the Hevy app.
+*/
+function VolumeChart({ data, fillColor = "#00C49F", unit = "lbs", width = "100%", height = 300, style, className }) {
+	if (data.length === 0) return /* @__PURE__ */ jsx("div", {
+		className,
+		style: {
+			...emptyStyle,
+			...style
+		},
+		children: "No volume data available"
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className,
+		style: {
+			width,
+			...style
+		},
+		children: /* @__PURE__ */ jsx(ResponsiveContainer, {
+			width: "100%",
+			height,
+			children: /* @__PURE__ */ jsxs(AreaChart, {
+				data,
+				margin: {
+					top: 10,
+					right: 20,
+					bottom: 0,
+					left: 0
+				},
+				children: [
+					/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", {
+						id: "colorVolume",
+						x1: "0",
+						y1: "0",
+						x2: "0",
+						y2: "1",
+						children: [/* @__PURE__ */ jsx("stop", {
+							offset: "5%",
+							stopColor: fillColor,
+							stopOpacity: .4
+						}), /* @__PURE__ */ jsx("stop", {
+							offset: "95%",
+							stopColor: fillColor,
+							stopOpacity: .02
+						})]
+					}) }),
+					/* @__PURE__ */ jsx(XAxis, {
+						dataKey: "date",
+						axisLine: false,
+						tickLine: false,
+						tick: {
+							fontSize: 11,
+							fill: "#aaa"
+						}
+					}),
+					/* @__PURE__ */ jsx(YAxis, {
+						axisLine: false,
+						tickLine: false,
+						tick: {
+							fontSize: 11,
+							fill: "#aaa"
+						},
+						tickFormatter: formatVolumeTick
+					}),
+					/* @__PURE__ */ jsx(Tooltip, {
+						content: /* @__PURE__ */ jsx(VolumeTooltip, { unit }),
+						cursor: {
+							stroke: "#555",
+							strokeDasharray: "4 4"
+						}
+					}),
+					/* @__PURE__ */ jsx(Area, {
+						type: "monotone",
+						dataKey: "volume",
+						stroke: fillColor,
+						strokeWidth: 2,
+						fill: "url(#colorVolume)",
+						dot: {
+							r: 3,
+							fill: fillColor,
+							stroke: "#fff",
+							strokeWidth: 1.5
+						},
+						activeDot: {
+							r: 6,
+							fill: fillColor,
+							stroke: "#fff",
+							strokeWidth: 2
+						}
+					})
+				]
+			})
+		})
+	});
+}
+export { VolumeChart, VolumeChart as default };
+
+//# sourceMappingURL=index.es.js.map