wimui 0.1.0

package/dist/components/charts/GanttChart/GanttChart.js

@@ -0,0 +1,193 @@
+"use client";
+import e from "./gantt-chart.module.js";
+import { useCallback as t, useMemo as n, useRef as r, useState as i } from "react";
+import a from "classnames";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/charts/GanttChart/GanttChart.tsx
+var c = {
+	ariaChart: "Gantt Chart",
+	ariaTaskBar: (e, t, n) => `${e}: ${t} - ${n}`
+};
+function l(e) {
+	return new Date(e.getFullYear(), e.getMonth(), e.getDate());
+}
+function u(e, t) {
+	return Math.round((l(t).getTime() - l(e).getTime()) / (1e3 * 60 * 60 * 24));
+}
+function d(e) {
+	let t = l(e), n = t.getDay(), r = n === 0 ? -6 : 1 - n;
+	return t.setDate(t.getDate() + r), t;
+}
+function f(e, t, n) {
+	let r = [];
+	if (n === "day") {
+		let n = l(e), i = l(t);
+		for (; n <= i;) r.push({
+			label: String(n.getDate()),
+			date: new Date(n)
+		}), n.setDate(n.getDate() + 1);
+	} else if (n === "week") {
+		let n = d(e), i = l(t);
+		for (; n <= i;) {
+			let e = n.getMonth() + 1, t = n.getDate();
+			r.push({
+				label: `${e}/${t}`,
+				date: new Date(n)
+			}), n.setDate(n.getDate() + 7);
+		}
+	} else {
+		let n = new Date(e.getFullYear(), e.getMonth(), 1), i = l(t);
+		for (; n <= i;) {
+			let e = n.toLocaleString(void 0, {
+				month: "short",
+				year: "2-digit"
+			});
+			r.push({
+				label: e,
+				date: new Date(n)
+			}), n.setMonth(n.getMonth() + 1);
+		}
+	}
+	return r;
+}
+function p(e) {
+	return e === "day" ? 1 : e === "week" ? 7 : 30.44;
+}
+function m(e, t, n, r) {
+	return u(t, e.startDate) / p(n) * r;
+}
+function h(e, t, n) {
+	let r = Math.max(u(e.startDate, e.endDate), 1), i = n * .5;
+	return Math.max(r / p(t) * n, i);
+}
+var g = {
+	day: 40,
+	week: 80,
+	month: 120
+}, _ = ({ tasks: u, startDate: d, endDate: p, viewMode: _ = "day", columnWidth: v, rowHeight: y = 40, onTaskClick: b, className: x, labels: S }) => {
+	let C = {
+		...c,
+		...S
+	}, w = r(null), T = r(null), [E, D] = i(-1), O = v ?? g[_], k = n(() => d ? l(d) : u.length === 0 ? l(/* @__PURE__ */ new Date()) : l(new Date(Math.min(...u.map((e) => e.startDate.getTime())))), [d, u]), A = n(() => {
+		if (p) return l(p);
+		if (u.length === 0) {
+			let e = l(/* @__PURE__ */ new Date());
+			return e.setDate(e.getDate() + 30), e;
+		}
+		return l(new Date(Math.max(...u.map((e) => e.endDate.getTime()))));
+	}, [p, u]), j = n(() => f(k, A, _), [
+		k,
+		A,
+		_
+	]), M = j.length * O, N = t(() => {
+		T.current && w.current && (T.current.scrollLeft = w.current.scrollLeft);
+	}, []), P = t((e, t, n) => {
+		if (e.key === "Enter" || e.key === " ") e.preventDefault(), b?.(t);
+		else if (e.key === "ArrowDown") {
+			e.preventDefault();
+			let t = Math.min(n + 1, u.length - 1);
+			D(t), document.querySelectorAll("[data-gantt-bar=\"true\"]")[t]?.focus();
+		} else if (e.key === "ArrowUp") {
+			e.preventDefault();
+			let t = Math.max(n - 1, 0);
+			D(t), document.querySelectorAll("[data-gantt-bar=\"true\"]")[t]?.focus();
+		}
+	}, [b, u.length]);
+	return /* @__PURE__ */ o("div", {
+		className: a("wim-gantt-chart", e.root, x),
+		role: "grid",
+		"aria-label": C.ariaChart,
+		children: /* @__PURE__ */ s("div", {
+			className: e.layout,
+			children: [/* @__PURE__ */ s("div", {
+				className: e.labelPanel,
+				"aria-hidden": "true",
+				children: [/* @__PURE__ */ o("div", {
+					className: e.headerCell,
+					"data-gantt-header-cell": "label",
+					style: { height: y }
+				}), u.map((t) => /* @__PURE__ */ o("div", {
+					className: e.labelRow,
+					style: { height: y },
+					children: /* @__PURE__ */ o("span", {
+						className: e.labelText,
+						children: t.label
+					})
+				}, t.id))]
+			}), /* @__PURE__ */ s("div", {
+				className: e.timelineWrapper,
+				children: [/* @__PURE__ */ o("div", {
+					ref: T,
+					className: e.headerScroll,
+					"data-gantt-header-scroll": "true",
+					children: /* @__PURE__ */ o("div", {
+						className: e.header,
+						style: {
+							width: M,
+							height: y
+						},
+						role: "row",
+						children: j.map((t) => /* @__PURE__ */ o("div", {
+							className: e.headerCell,
+							"data-gantt-header-cell": "true",
+							style: { width: O },
+							role: "columnheader",
+							children: t.label
+						}, t.date.toISOString()))
+					})
+				}), /* @__PURE__ */ o("div", {
+					ref: w,
+					className: e.bodyScroll,
+					"data-gantt-body-scroll": "true",
+					onScroll: N,
+					children: /* @__PURE__ */ o("div", {
+						className: e.body,
+						style: {
+							width: M,
+							"--gantt-col-width": `${O}px`,
+							"--gantt-row-height": `${y}px`
+						},
+						children: u.map((t, n) => {
+							let r = m(t, k, _, O), i = h(t, _, O), s = t.startDate.toLocaleDateString(), c = t.endDate.toLocaleDateString();
+							return /* @__PURE__ */ o("div", {
+								className: e.row,
+								style: { height: y },
+								role: "row",
+								children: /* @__PURE__ */ o("div", {
+									role: "gridcell",
+									"data-gantt-bar": "true",
+									className: a(e.bar, {
+										[e.clickable]: !!b,
+										[e.focused]: E === n
+									}),
+									style: {
+										left: r,
+										width: i,
+										height: y - 12,
+										top: 6,
+										"--gantt-bar-bg": t.color ?? "var(--wim-color-primary)",
+										backgroundColor: "var(--gantt-bar-bg)"
+									},
+									tabIndex: 0,
+									"aria-label": C.ariaTaskBar(t.label, s, c),
+									"aria-selected": E === n,
+									onClick: () => b?.(t),
+									onKeyDown: (e) => P(e, t, n),
+									onFocus: () => D(n),
+									children: t.progress !== void 0 && /* @__PURE__ */ o("div", {
+										className: e.progress,
+										"data-gantt-progress": "true",
+										style: { width: `${Math.min(t.progress, 100)}%` },
+										"aria-hidden": "true"
+									})
+								})
+							}, t.id);
+						})
+					})
+				})]
+			})]
+		})
+	});
+};
+//#endregion
+export { _ as GanttChart };

package/dist/components/charts/GanttChart/gantt-chart.module.cjs

@@ -0,0 +1,2 @@
+"use client";
+var e=`_root_16aw2_4`,t=`_layout_16aw2_17`,n=`_labelPanel_16aw2_22`,r=`_labelRow_16aw2_34`,i=`_labelText_16aw2_43`,a=`_timelineWrapper_16aw2_49`,o=`_headerScroll_16aw2_56`,s=`_header_16aw2_56`,c=`_headerCell_16aw2_65`,l=`_bodyScroll_16aw2_87`,u=`_body_16aw2_87`,d=`_row_16aw2_111`,f=`_bar_16aw2_117`,p=`_clickable_16aw2_131`,m=`_progress_16aw2_140`,h={root:e,layout:t,labelPanel:n,labelRow:r,labelText:i,timelineWrapper:a,headerScroll:o,header:s,headerCell:c,bodyScroll:l,body:u,row:d,bar:f,clickable:p,progress:m};exports.bar=f,exports.body=u,exports.bodyScroll=l,exports.clickable=p,exports.default=h,exports.header=s,exports.headerCell=c,exports.headerScroll=o,exports.labelPanel=n,exports.labelRow=r,exports.labelText=i,exports.layout=t,exports.progress=m,exports.root=e,exports.row=d,exports.timelineWrapper=a;

package/dist/components/charts/GanttChart/gantt-chart.module.js

@@ -0,0 +1,21 @@
+"use client";
+//#region src/components/charts/GanttChart/gantt-chart.module.scss
+var e = "_root_16aw2_4", t = "_layout_16aw2_17", n = "_labelPanel_16aw2_22", r = "_labelRow_16aw2_34", i = "_labelText_16aw2_43", a = "_timelineWrapper_16aw2_49", o = "_headerScroll_16aw2_56", s = "_header_16aw2_56", c = "_headerCell_16aw2_65", l = "_bodyScroll_16aw2_87", u = "_body_16aw2_87", d = "_row_16aw2_111", f = "_bar_16aw2_117", p = "_clickable_16aw2_131", m = "_progress_16aw2_140", h = {
+	root: e,
+	layout: t,
+	labelPanel: n,
+	labelRow: r,
+	labelText: i,
+	timelineWrapper: a,
+	headerScroll: o,
+	header: s,
+	headerCell: c,
+	bodyScroll: l,
+	body: u,
+	row: d,
+	bar: f,
+	clickable: p,
+	progress: m
+};
+//#endregion
+export { f as bar, u as body, l as bodyScroll, p as clickable, h as default, s as header, c as headerCell, o as headerScroll, n as labelPanel, r as labelRow, i as labelText, t as layout, m as progress, e as root, d as row, a as timelineWrapper };

package/dist/components/charts/GaugeChart/GaugeChart.cjs

@@ -0,0 +1,2 @@
+"use client";
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../typography/Title/Title.cjs"),n=require("../../helpers.cjs"),r=require("./gauge-chart.module.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("classnames");a=e.__toESM(a,1);let o=require("react/jsx-runtime"),s=require("recharts");var c=({value:e,min:i=0,max:c=100,height:l=200,width:u=`100%`,title:d,label:f,color:p,animated:m=!1})=>{let h=Math.max(i,Math.min(c,e)),g=[{value:h-i},{value:c-h}],_=p||n.CHART_COLORS[0];return(0,o.jsxs)(`div`,{className:(0,a.default)(`wim-gauge-chart`,r.default.root,r.default.gauge),style:{width:u},children:[d&&(0,o.jsx)(t.Title,{tag:`h3`,size:`md`,style:{marginBottom:`var(--wim-spacing-md)`},children:d}),(0,o.jsxs)(`div`,{className:r.default.container,style:{height:l},children:[(0,o.jsx)(s.ResponsiveContainer,{width:`100%`,height:`100%`,children:(0,o.jsx)(s.PieChart,{children:(0,o.jsxs)(s.Pie,{data:g,cx:`50%`,cy:`80%`,startAngle:180,endAngle:0,innerRadius:`60%`,outerRadius:`80%`,paddingAngle:0,dataKey:`value`,stroke:`none`,isAnimationActive:m,children:[(0,o.jsx)(s.Cell,{fill:_}),(0,o.jsx)(s.Cell,{fill:`var(--wim-color-surface-variant)`})]})})}),(0,o.jsx)(`div`,{className:r.default.gaugeLabel,children:f||e})]})]})};exports.GaugeChart=c;

package/dist/components/charts/GaugeChart/GaugeChart.d.ts

@@ -0,0 +1,45 @@
+import { default as React } from 'react';
+export type GaugeChartProps = {
+    /**
+     * Current value displayed by the gauge. Clamped between min and max.
+     */
+    value: number;
+    /**
+     * Minimum value of the gauge.
+     * @default 0
+     */
+    min?: number;
+    /**
+     * Maximum value of the gauge.
+     * @default 100
+     */
+    max?: number;
+    /**
+     * The height of the chart in pixels.
+     * @default 200
+     */
+    height?: number;
+    /**
+     * The width of the chart (e.g., "100%", 500).
+     * @default "100%"
+     */
+    width?: string | number;
+    /**
+     * Optional title displayed above the chart.
+     */
+    title?: string;
+    /**
+     * Text label displayed with the value inside the gauge.
+     */
+    label?: string;
+    /**
+     * Color of the gauge arc. Defaults to the first chart color.
+     */
+    color?: string;
+    /**
+     * If true, animates the chart on mount.
+     * @default false
+     */
+    animated?: boolean;
+};
+export declare const GaugeChart: ({ value, min, max, height, width, title, label, color, animated, }: GaugeChartProps) => React.JSX.Element;

package/dist/components/charts/GaugeChart/GaugeChart.js

@@ -0,0 +1,48 @@
+"use client";
+import { Title as e } from "../../typography/Title/Title.js";
+import { CHART_COLORS as t } from "../../helpers.js";
+import n from "./gauge-chart.module.js";
+import "react";
+import r from "classnames";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { Cell as o, Pie as s, PieChart as c, ResponsiveContainer as l } from "recharts";
+//#region src/components/charts/GaugeChart/GaugeChart.tsx
+var u = ({ value: u, min: d = 0, max: f = 100, height: p = 200, width: m = "100%", title: h, label: g, color: _, animated: v = !1 }) => {
+	let y = Math.max(d, Math.min(f, u)), b = [{ value: y - d }, { value: f - y }], x = _ || t[0];
+	return /* @__PURE__ */ a("div", {
+		className: r("wim-gauge-chart", n.root, n.gauge),
+		style: { width: m },
+		children: [h && /* @__PURE__ */ i(e, {
+			tag: "h3",
+			size: "md",
+			style: { marginBottom: "var(--wim-spacing-md)" },
+			children: h
+		}), /* @__PURE__ */ a("div", {
+			className: n.container,
+			style: { height: p },
+			children: [/* @__PURE__ */ i(l, {
+				width: "100%",
+				height: "100%",
+				children: /* @__PURE__ */ i(c, { children: /* @__PURE__ */ a(s, {
+					data: b,
+					cx: "50%",
+					cy: "80%",
+					startAngle: 180,
+					endAngle: 0,
+					innerRadius: "60%",
+					outerRadius: "80%",
+					paddingAngle: 0,
+					dataKey: "value",
+					stroke: "none",
+					isAnimationActive: v,
+					children: [/* @__PURE__ */ i(o, { fill: x }), /* @__PURE__ */ i(o, { fill: "var(--wim-color-surface-variant)" })]
+				}) })
+			}), /* @__PURE__ */ i("div", {
+				className: n.gaugeLabel,
+				children: g || u
+			})]
+		})]
+	});
+};
+//#endregion
+export { u as GaugeChart };

package/dist/components/charts/GaugeChart/gauge-chart.module.cjs

@@ -0,0 +1,2 @@
+"use client";
+var e=`_root_1thpf_4`,t=`_container_1thpf_9`,n=`_gaugeLabel_1thpf_13`,r={root:e,container:t,gaugeLabel:n};exports.container=t,exports.default=r,exports.gaugeLabel=n,exports.root=e;

package/dist/components/charts/GaugeChart/gauge-chart.module.js

@@ -0,0 +1,9 @@
+"use client";
+//#region src/components/charts/GaugeChart/gauge-chart.module.scss
+var e = "_root_1thpf_4", t = "_container_1thpf_9", n = "_gaugeLabel_1thpf_13", r = {
+	root: e,
+	container: t,
+	gaugeLabel: n
+};
+//#endregion
+export { t as container, r as default, n as gaugeLabel, e as root };

package/dist/components/charts/Heatmap/Heatmap.cjs

@@ -0,0 +1,2 @@
+"use client";
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../typography/Title/Title.cjs"),n=require("../../helpers.cjs"),r=require("./heatmap.module.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("react/jsx-runtime"),o=require("recharts");var s=({data:e,xAxisKey:i,yAxisKey:s,height:c=300,width:l=`100%`,title:u,colorRange:d=[`var(--wim-color-surface-variant)`,`var(--wim-color-primary)`],animated:f=!1})=>{let p=e.map(e=>({x:i.indexOf(e.x),y:s.indexOf(e.y),value:e.value,labelX:e.x,labelY:e.y})),m=Math.max(...e.map(e=>e.value)),h=e=>e/m<.1?d[0]:d[1];return(0,a.jsxs)(`div`,{className:`wim-heatmap ${r.default.root}`,style:{width:l},children:[u&&(0,a.jsx)(t.Title,{tag:`h3`,size:`md`,style:{marginBottom:`var(--wim-spacing-md)`},children:u}),(0,a.jsx)(`div`,{className:r.default.container,style:{height:c},children:(0,a.jsx)(o.ResponsiveContainer,{width:`100%`,height:`100%`,children:(0,a.jsxs)(o.ScatterChart,{margin:{top:20,right:30,left:10,bottom:20},children:[(0,a.jsx)(o.XAxis,{type:`number`,dataKey:`x`,ticks:Array.from({length:i.length},(e,t)=>t),tickFormatter:e=>i[e],...n.CHART_THEME.axis}),(0,a.jsx)(o.YAxis,{type:`number`,dataKey:`y`,ticks:Array.from({length:s.length},(e,t)=>t),tickFormatter:e=>s[e],...n.CHART_THEME.axis}),(0,a.jsx)(o.ZAxis,{type:`number`,dataKey:`value`,range:[400,400]}),(0,a.jsx)(o.Tooltip,{cursor:n.CHART_THEME.tooltip.cursor,content:({active:e,payload:t})=>{if(e&&t&&t.length){let e=t[0].payload;return(0,a.jsxs)(`div`,{style:{...n.CHART_THEME.tooltip.contentStyle,padding:`8px`},children:[(0,a.jsxs)(`div`,{children:[e.labelX,` / `,e.labelY]}),(0,a.jsxs)(`div`,{style:{fontWeight:`bold`},children:[`Value: `,e.value]})]})}return null}}),(0,a.jsx)(o.Scatter,{data:p,shape:`square`,isAnimationActive:f,children:p.map((e,t)=>(0,a.jsx)(o.Cell,{fill:h(e.value)},`cell-${t}`))})]})})})]})};exports.Heatmap=s;

package/dist/components/charts/Heatmap/Heatmap.d.ts

@@ -0,0 +1,44 @@
+import { default as React } from 'react';
+export type HeatmapProps = {
+    /**
+     * Cells to display. Each entry maps an x/y category pair to a value.
+     */
+    data: {
+        x: string;
+        y: string;
+        value: number;
+    }[];
+    /**
+     * Ordered list of X axis category labels.
+     */
+    xAxisKey: string[];
+    /**
+     * Ordered list of Y axis category labels.
+     */
+    yAxisKey: string[];
+    /**
+     * The height of the chart in pixels.
+     * @default 300
+     */
+    height?: number;
+    /**
+     * The width of the chart (e.g., "100%", 500).
+     * @default "100%"
+     */
+    width?: string | number;
+    /**
+     * Optional title displayed above the chart.
+     */
+    title?: string;
+    /**
+     * Colors used for the lowest and highest values.
+     * @default ["var(--wim-color-surface-variant)", "var(--wim-color-primary)"]
+     */
+    colorRange?: [string, string];
+    /**
+     * Whether to animate the cells on mount.
+     * @default false
+     */
+    animated?: boolean;
+};
+export declare const Heatmap: ({ data, xAxisKey, yAxisKey, height, width, title, colorRange, animated, }: HeatmapProps) => React.JSX.Element;

package/dist/components/charts/Heatmap/Heatmap.js

@@ -0,0 +1,94 @@
+"use client";
+import { Title as e } from "../../typography/Title/Title.js";
+import { CHART_THEME as t } from "../../helpers.js";
+import n from "./heatmap.module.js";
+import "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { Cell as a, ResponsiveContainer as o, Scatter as s, ScatterChart as c, Tooltip as l, XAxis as u, YAxis as d, ZAxis as f } from "recharts";
+//#region src/components/charts/Heatmap/Heatmap.tsx
+var p = ({ data: p, xAxisKey: m, yAxisKey: h, height: g = 300, width: _ = "100%", title: v, colorRange: y = ["var(--wim-color-surface-variant)", "var(--wim-color-primary)"], animated: b = !1 }) => {
+	let x = p.map((e) => ({
+		x: m.indexOf(e.x),
+		y: h.indexOf(e.y),
+		value: e.value,
+		labelX: e.x,
+		labelY: e.y
+	})), S = Math.max(...p.map((e) => e.value)), C = (e) => e / S < .1 ? y[0] : y[1];
+	return /* @__PURE__ */ i("div", {
+		className: `wim-heatmap ${n.root}`,
+		style: { width: _ },
+		children: [v && /* @__PURE__ */ r(e, {
+			tag: "h3",
+			size: "md",
+			style: { marginBottom: "var(--wim-spacing-md)" },
+			children: v
+		}), /* @__PURE__ */ r("div", {
+			className: n.container,
+			style: { height: g },
+			children: /* @__PURE__ */ r(o, {
+				width: "100%",
+				height: "100%",
+				children: /* @__PURE__ */ i(c, {
+					margin: {
+						top: 20,
+						right: 30,
+						left: 10,
+						bottom: 20
+					},
+					children: [
+						/* @__PURE__ */ r(u, {
+							type: "number",
+							dataKey: "x",
+							ticks: Array.from({ length: m.length }, (e, t) => t),
+							tickFormatter: (e) => m[e],
+							...t.axis
+						}),
+						/* @__PURE__ */ r(d, {
+							type: "number",
+							dataKey: "y",
+							ticks: Array.from({ length: h.length }, (e, t) => t),
+							tickFormatter: (e) => h[e],
+							...t.axis
+						}),
+						/* @__PURE__ */ r(f, {
+							type: "number",
+							dataKey: "value",
+							range: [400, 400]
+						}),
+						/* @__PURE__ */ r(l, {
+							cursor: t.tooltip.cursor,
+							content: ({ active: e, payload: n }) => {
+								if (e && n && n.length) {
+									let e = n[0].payload;
+									return /* @__PURE__ */ i("div", {
+										style: {
+											...t.tooltip.contentStyle,
+											padding: "8px"
+										},
+										children: [/* @__PURE__ */ i("div", { children: [
+											e.labelX,
+											" / ",
+											e.labelY
+										] }), /* @__PURE__ */ i("div", {
+											style: { fontWeight: "bold" },
+											children: ["Value: ", e.value]
+										})]
+									});
+								}
+								return null;
+							}
+						}),
+						/* @__PURE__ */ r(s, {
+							data: x,
+							shape: "square",
+							isAnimationActive: b,
+							children: x.map((e, t) => /* @__PURE__ */ r(a, { fill: C(e.value) }, `cell-${t}`))
+						})
+					]
+				})
+			})
+		})]
+	});
+};
+//#endregion
+export { p as Heatmap };

package/dist/components/charts/Heatmap/heatmap.module.cjs

@@ -0,0 +1,2 @@
+"use client";
+var e=`_root_12ucx_4`,t=`_container_12ucx_9`,n={root:e,container:t};exports.container=t,exports.default=n,exports.root=e;

package/dist/components/charts/Heatmap/heatmap.module.js

@@ -0,0 +1,8 @@
+"use client";
+//#region src/components/charts/Heatmap/heatmap.module.scss
+var e = "_root_12ucx_4", t = "_container_12ucx_9", n = {
+	root: e,
+	container: t
+};
+//#endregion
+export { t as container, n as default, e as root };

package/dist/components/charts/LineChart/LineChart.cjs

@@ -0,0 +1,2 @@
+"use client";
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../typography/Title/Title.cjs"),n=require("../../helpers.cjs"),r=require("./line-chart.module.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("react/jsx-runtime"),o=require("recharts");var s=({data:e,keys:i,xAxisKey:s,height:c=300,width:l=`100%`,title:u,smooth:d=!1,animated:f=!1})=>(0,a.jsxs)(`div`,{className:`wim-line-chart ${r.default.root}`,style:{width:l},children:[u&&(0,a.jsx)(t.Title,{tag:`h3`,size:`md`,style:{marginBottom:`var(--wim-spacing-md)`},children:u}),(0,a.jsx)(`div`,{className:r.default.container,style:{height:c},children:(0,a.jsx)(o.ResponsiveContainer,{width:`100%`,height:`100%`,children:(0,a.jsxs)(o.LineChart,{data:e,margin:{top:5,right:30,left:20,bottom:5},children:[(0,a.jsx)(o.CartesianGrid,{...n.CHART_THEME.grid,vertical:!1}),(0,a.jsx)(o.XAxis,{dataKey:s,...n.CHART_THEME.axis,tickLine:!1,axisLine:!1}),(0,a.jsx)(o.YAxis,{...n.CHART_THEME.axis,tickLine:!1,axisLine:!1}),(0,a.jsx)(o.Tooltip,{contentStyle:n.CHART_THEME.tooltip.contentStyle,cursor:n.CHART_THEME.tooltip.cursor}),(0,a.jsx)(o.Legend,{verticalAlign:`top`,height:36}),i.map((e,t)=>(0,a.jsx)(o.Line,{type:d?`monotone`:`linear`,dataKey:e,stroke:n.CHART_COLORS[t%n.CHART_COLORS.length],strokeWidth:2,dot:{r:4,strokeWidth:2,fill:`var(--wim-color-primary-fill)`},activeDot:{r:6},isAnimationActive:f},e))]})})})]});exports.LineChart=s;

package/dist/components/charts/LineChart/LineChart.d.ts

@@ -0,0 +1,41 @@
+import { default as React } from 'react';
+import { ChartDataPoint } from '../../helpers';
+export type LineChartProps = {
+    /**
+     * Data to display in the chart.
+     */
+    data: ChartDataPoint[];
+    /**
+     * Keys in the data objects to render as lines (series).
+     */
+    keys: string[];
+    /**
+     * The key in the data objects used for the X axis labels.
+     */
+    xAxisKey: string;
+    /**
+     * The height of the chart in pixels.
+     * @default 300
+     */
+    height?: number;
+    /**
+     * The width of the chart (e.g., "100%", 500).
+     * @default "100%"
+     */
+    width?: string | number;
+    /**
+     * Optional title displayed above the chart.
+     */
+    title?: string;
+    /**
+     * If true, draws smooth (monotone) curves instead of straight lines.
+     * @default false
+     */
+    smooth?: boolean;
+    /**
+     * If true, animates the chart on mount.
+     * @default false
+     */
+    animated?: boolean;
+};
+export declare const LineChart: ({ data, keys, xAxisKey, height, width, title, smooth, animated, }: LineChartProps) => React.JSX.Element;

package/dist/components/charts/LineChart/LineChart.js

@@ -0,0 +1,74 @@
+"use client";
+import { Title as e } from "../../typography/Title/Title.js";
+import { CHART_COLORS as t, CHART_THEME as n } from "../../helpers.js";
+import r from "./line-chart.module.js";
+import "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { CartesianGrid as o, Legend as s, Line as c, LineChart as l, ResponsiveContainer as u, Tooltip as d, XAxis as f, YAxis as p } from "recharts";
+//#region src/components/charts/LineChart/LineChart.tsx
+var m = ({ data: m, keys: h, xAxisKey: g, height: _ = 300, width: v = "100%", title: y, smooth: b = !1, animated: x = !1 }) => /* @__PURE__ */ a("div", {
+	className: `wim-line-chart ${r.root}`,
+	style: { width: v },
+	children: [y && /* @__PURE__ */ i(e, {
+		tag: "h3",
+		size: "md",
+		style: { marginBottom: "var(--wim-spacing-md)" },
+		children: y
+	}), /* @__PURE__ */ i("div", {
+		className: r.container,
+		style: { height: _ },
+		children: /* @__PURE__ */ i(u, {
+			width: "100%",
+			height: "100%",
+			children: /* @__PURE__ */ a(l, {
+				data: m,
+				margin: {
+					top: 5,
+					right: 30,
+					left: 20,
+					bottom: 5
+				},
+				children: [
+					/* @__PURE__ */ i(o, {
+						...n.grid,
+						vertical: !1
+					}),
+					/* @__PURE__ */ i(f, {
+						dataKey: g,
+						...n.axis,
+						tickLine: !1,
+						axisLine: !1
+					}),
+					/* @__PURE__ */ i(p, {
+						...n.axis,
+						tickLine: !1,
+						axisLine: !1
+					}),
+					/* @__PURE__ */ i(d, {
+						contentStyle: n.tooltip.contentStyle,
+						cursor: n.tooltip.cursor
+					}),
+					/* @__PURE__ */ i(s, {
+						verticalAlign: "top",
+						height: 36
+					}),
+					h.map((e, n) => /* @__PURE__ */ i(c, {
+						type: b ? "monotone" : "linear",
+						dataKey: e,
+						stroke: t[n % t.length],
+						strokeWidth: 2,
+						dot: {
+							r: 4,
+							strokeWidth: 2,
+							fill: "var(--wim-color-primary-fill)"
+						},
+						activeDot: { r: 6 },
+						isAnimationActive: x
+					}, e))
+				]
+			})
+		})
+	})]
+});
+//#endregion
+export { m as LineChart };

package/dist/components/charts/LineChart/line-chart.module.cjs

@@ -0,0 +1,2 @@
+"use client";
+var e=`_root_12ucx_4`,t=`_container_12ucx_9`,n={root:e,container:t};exports.container=t,exports.default=n,exports.root=e;

package/dist/components/charts/LineChart/line-chart.module.js

@@ -0,0 +1,8 @@
+"use client";
+//#region src/components/charts/LineChart/line-chart.module.scss
+var e = "_root_12ucx_4", t = "_container_12ucx_9", n = {
+	root: e,
+	container: t
+};
+//#endregion
+export { t as container, n as default, e as root };

package/dist/components/charts/PieChart/PieChart.cjs

@@ -0,0 +1,2 @@
+"use client";
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../typography/Title/Title.cjs"),n=require("../../helpers.cjs"),r=require("./pie-chart.module.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("react/jsx-runtime"),o=require("recharts");var s=({data:e,height:i=300,width:s=`100%`,title:c,donut:l=!1,animated:u=!1})=>(0,a.jsxs)(`div`,{className:`wim-pie-chart ${r.default.root}`,style:{width:s},children:[c&&(0,a.jsx)(t.Title,{tag:`h3`,size:`md`,style:{marginBottom:`var(--wim-spacing-md)`},children:c}),(0,a.jsx)(`div`,{className:r.default.container,style:{height:i},children:(0,a.jsx)(o.ResponsiveContainer,{width:`100%`,height:`100%`,children:(0,a.jsxs)(o.PieChart,{children:[(0,a.jsx)(o.Pie,{data:e,cx:`50%`,cy:`50%`,labelLine:!1,innerRadius:l?`60%`:0,outerRadius:`80%`,paddingAngle:l?5:0,dataKey:`value`,isAnimationActive:u,children:e.map((e,t)=>(0,a.jsx)(o.Cell,{fill:n.CHART_COLORS[t%n.CHART_COLORS.length],stroke:`none`},`cell-${t}`))}),(0,a.jsx)(o.Tooltip,{contentStyle:n.CHART_THEME.tooltip.contentStyle}),(0,a.jsx)(o.Legend,{verticalAlign:`top`,height:36})]})})})]});exports.PieChart=s;

package/dist/components/charts/PieChart/PieChart.d.ts

@@ -0,0 +1,35 @@
+import { default as React } from 'react';
+export type PieChartProps = {
+    /**
+     * Slices to display. Each entry has a name (label) and a value.
+     */
+    data: {
+        name: string;
+        value: number;
+    }[];
+    /**
+     * The height of the chart in pixels.
+     * @default 300
+     */
+    height?: number;
+    /**
+     * The width of the chart (e.g., "100%", 500).
+     * @default "100%"
+     */
+    width?: string | number;
+    /**
+     * Optional title displayed above the chart.
+     */
+    title?: string;
+    /**
+     * If true, renders as a donut chart with a hollow center.
+     * @default false
+     */
+    donut?: boolean;
+    /**
+     * If true, animates the chart on mount.
+     * @default false
+     */
+    animated?: boolean;
+};
+export declare const PieChart: ({ data, height, width, title, donut, animated, }: PieChartProps) => React.JSX.Element;