wimui 0.1.0

package/dist/components/charts/PieChart/PieChart.js

@@ -0,0 +1,49 @@
+"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 "./pie-chart.module.js";
+import "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { Cell as o, Legend as s, Pie as c, PieChart as l, ResponsiveContainer as u, Tooltip as d } from "recharts";
+//#region src/components/charts/PieChart/PieChart.tsx
+var f = ({ data: f, height: p = 300, width: m = "100%", title: h, donut: g = !1, animated: _ = !1 }) => /* @__PURE__ */ a("div", {
+	className: `wim-pie-chart ${r.root}`,
+	style: { width: m },
+	children: [h && /* @__PURE__ */ i(e, {
+		tag: "h3",
+		size: "md",
+		style: { marginBottom: "var(--wim-spacing-md)" },
+		children: h
+	}), /* @__PURE__ */ i("div", {
+		className: r.container,
+		style: { height: p },
+		children: /* @__PURE__ */ i(u, {
+			width: "100%",
+			height: "100%",
+			children: /* @__PURE__ */ a(l, { children: [
+				/* @__PURE__ */ i(c, {
+					data: f,
+					cx: "50%",
+					cy: "50%",
+					labelLine: !1,
+					innerRadius: g ? "60%" : 0,
+					outerRadius: "80%",
+					paddingAngle: g ? 5 : 0,
+					dataKey: "value",
+					isAnimationActive: _,
+					children: f.map((e, n) => /* @__PURE__ */ i(o, {
+						fill: t[n % t.length],
+						stroke: "none"
+					}, `cell-${n}`))
+				}),
+				/* @__PURE__ */ i(d, { contentStyle: n.tooltip.contentStyle }),
+				/* @__PURE__ */ i(s, {
+					verticalAlign: "top",
+					height: 36
+				})
+			] })
+		})
+	})]
+});
+//#endregion
+export { f as PieChart };

package/dist/components/charts/PieChart/pie-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/PieChart/pie-chart.module.js

@@ -0,0 +1,8 @@
+"use client";
+//#region src/components/charts/PieChart/pie-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/RadarChart/RadarChart.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("./radar-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,indexKey:s,height:c=300,width:l=`100%`,title:u,animated:d=!1})=>(0,a.jsxs)(`div`,{className:`wim-radar-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.RadarChart,{cx:`50%`,cy:`50%`,outerRadius:`80%`,data:e,children:[(0,a.jsx)(o.PolarGrid,{stroke:n.CHART_THEME.grid.stroke}),(0,a.jsx)(o.PolarAngleAxis,{dataKey:s,...n.CHART_THEME.axis}),(0,a.jsx)(o.PolarRadiusAxis,{}),(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.Radar,{name:e,dataKey:e,stroke:n.CHART_COLORS[t%n.CHART_COLORS.length],fill:n.CHART_COLORS[t%n.CHART_COLORS.length],fillOpacity:.6,isAnimationActive:d},e))]})})})]});exports.RadarChart=s;

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

@@ -0,0 +1,36 @@
+import { default as React } from 'react';
+import { ChartDataPoint } from '../../helpers';
+export type RadarChartProps = {
+    /**
+     * Data to display in the chart.
+     */
+    data: ChartDataPoint[];
+    /**
+     * Keys in the data objects to render as radar areas (series).
+     */
+    keys: string[];
+    /**
+     * The key in the data objects used for the axis (category) labels.
+     */
+    indexKey: 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, animates the chart on mount.
+     * @default false
+     */
+    animated?: boolean;
+};
+export declare const RadarChart: ({ data, keys, indexKey, height, width, title, animated, }: RadarChartProps) => React.JSX.Element;

package/dist/components/charts/RadarChart/RadarChart.js

@@ -0,0 +1,57 @@
+"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 "./radar-chart.module.js";
+import "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { Legend as o, PolarAngleAxis as s, PolarGrid as c, PolarRadiusAxis as l, Radar as u, RadarChart as d, ResponsiveContainer as f, Tooltip as p } from "recharts";
+//#region src/components/charts/RadarChart/RadarChart.tsx
+var m = ({ data: m, keys: h, indexKey: g, height: _ = 300, width: v = "100%", title: y, animated: b = !1 }) => /* @__PURE__ */ a("div", {
+	className: `wim-radar-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(f, {
+			width: "100%",
+			height: "100%",
+			children: /* @__PURE__ */ a(d, {
+				cx: "50%",
+				cy: "50%",
+				outerRadius: "80%",
+				data: m,
+				children: [
+					/* @__PURE__ */ i(c, { stroke: n.grid.stroke }),
+					/* @__PURE__ */ i(s, {
+						dataKey: g,
+						...n.axis
+					}),
+					/* @__PURE__ */ i(l, {}),
+					/* @__PURE__ */ i(p, {
+						contentStyle: n.tooltip.contentStyle,
+						cursor: n.tooltip.cursor
+					}),
+					/* @__PURE__ */ i(o, {
+						verticalAlign: "top",
+						height: 36
+					}),
+					h.map((e, n) => /* @__PURE__ */ i(u, {
+						name: e,
+						dataKey: e,
+						stroke: t[n % t.length],
+						fill: t[n % t.length],
+						fillOpacity: .6,
+						isAnimationActive: b
+					}, e))
+				]
+			})
+		})
+	})]
+});
+//#endregion
+export { m as RadarChart };

package/dist/components/charts/RadarChart/radar-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/RadarChart/radar-chart.module.js

@@ -0,0 +1,8 @@
+"use client";
+//#region src/components/charts/RadarChart/radar-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/ScatterChart/ScatterChart.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("./scatter-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,xAxisName:i=`X`,yAxisName:s=`Y`,height:c=300,width:l=`100%`,title:u,animated:d=!1})=>(0,a.jsxs)(`div`,{className:`wim-scatter-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.ScatterChart,{margin:{top:20,right:20,bottom:20,left:20},children:[(0,a.jsx)(o.CartesianGrid,{...n.CHART_THEME.grid}),(0,a.jsx)(o.XAxis,{type:`number`,dataKey:`x`,name:i,unit:``,...n.CHART_THEME.axis}),(0,a.jsx)(o.YAxis,{type:`number`,dataKey:`y`,name:s,unit:``,...n.CHART_THEME.axis}),(0,a.jsx)(o.ZAxis,{type:`number`,dataKey:`z`,range:[60,400]}),(0,a.jsx)(o.Tooltip,{cursor:n.CHART_THEME.tooltip.cursor,contentStyle:n.CHART_THEME.tooltip.contentStyle}),(0,a.jsx)(o.Legend,{verticalAlign:`top`,height:36}),(0,a.jsx)(o.Scatter,{name:`Data Points`,data:e,fill:n.CHART_COLORS[0],isAnimationActive:d})]})})})]});exports.ScatterChart=s;

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

@@ -0,0 +1,42 @@
+import { default as React } from 'react';
+export type ScatterChartProps = {
+    /**
+     * Points to plot. `z` optionally controls the point size.
+     */
+    data: {
+        x: number;
+        y: number;
+        z?: number;
+        name: string;
+    }[];
+    /**
+     * Name of the X axis, shown in the tooltip.
+     * @default "X"
+     */
+    xAxisName?: string;
+    /**
+     * Name of the Y axis, shown in the tooltip.
+     * @default "Y"
+     */
+    yAxisName?: 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, animates the chart on mount.
+     * @default false
+     */
+    animated?: boolean;
+};
+export declare const ScatterChart: ({ data, xAxisName, yAxisName, height, width, title, animated, }: ScatterChartProps) => React.JSX.Element;

package/dist/components/charts/ScatterChart/ScatterChart.js

@@ -0,0 +1,71 @@
+"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 "./scatter-chart.module.js";
+import "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { CartesianGrid as o, Legend as s, ResponsiveContainer as c, Scatter as l, ScatterChart as u, Tooltip as d, XAxis as f, YAxis as p, ZAxis as m } from "recharts";
+//#region src/components/charts/ScatterChart/ScatterChart.tsx
+var h = ({ data: h, xAxisName: g = "X", yAxisName: _ = "Y", height: v = 300, width: y = "100%", title: b, animated: x = !1 }) => /* @__PURE__ */ a("div", {
+	className: `wim-scatter-chart ${r.root}`,
+	style: { width: y },
+	children: [b && /* @__PURE__ */ i(e, {
+		tag: "h3",
+		size: "md",
+		style: { marginBottom: "var(--wim-spacing-md)" },
+		children: b
+	}), /* @__PURE__ */ i("div", {
+		className: r.container,
+		style: { height: v },
+		children: /* @__PURE__ */ i(c, {
+			width: "100%",
+			height: "100%",
+			children: /* @__PURE__ */ a(u, {
+				margin: {
+					top: 20,
+					right: 20,
+					bottom: 20,
+					left: 20
+				},
+				children: [
+					/* @__PURE__ */ i(o, { ...n.grid }),
+					/* @__PURE__ */ i(f, {
+						type: "number",
+						dataKey: "x",
+						name: g,
+						unit: "",
+						...n.axis
+					}),
+					/* @__PURE__ */ i(p, {
+						type: "number",
+						dataKey: "y",
+						name: _,
+						unit: "",
+						...n.axis
+					}),
+					/* @__PURE__ */ i(m, {
+						type: "number",
+						dataKey: "z",
+						range: [60, 400]
+					}),
+					/* @__PURE__ */ i(d, {
+						cursor: n.tooltip.cursor,
+						contentStyle: n.tooltip.contentStyle
+					}),
+					/* @__PURE__ */ i(s, {
+						verticalAlign: "top",
+						height: 36
+					}),
+					/* @__PURE__ */ i(l, {
+						name: "Data Points",
+						data: h,
+						fill: t[0],
+						isAnimationActive: x
+					})
+				]
+			})
+		})
+	})]
+});
+//#endregion
+export { h as ScatterChart };

package/dist/components/charts/ScatterChart/scatter-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/ScatterChart/scatter-chart.module.js

@@ -0,0 +1,8 @@
+"use client";
+//#region src/components/charts/ScatterChart/scatter-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/Sparkline/Sparkline.cjs

@@ -0,0 +1,2 @@
+"use client";
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("./sparkline.module.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("classnames");r=e.__toESM(r,1);let i=require("react/jsx-runtime"),a=require("recharts");var o=`var(--wim-color-primary)`,s=({data:e,type:s=`line`,width:c=100,height:l=24,color:u=o,strokeWidth:d=2,showLastDot:f=!1,min:p,max:m,ariaLabel:h,className:g})=>{let _=(0,n.useId)().replace(/:/g,``),v=e.map((e,t)=>({index:t,value:e})),y=[p??`auto`,m??`auto`],b=e.length-1,x=typeof window<`u`&&!!window.__VRT__,S=typeof c==`number`?c:100,C=l??24,w=e=>{let{cx:t,cy:n,index:r}=e;return!f||r!==b||t==null||n==null?(0,i.jsx)(`g`,{},r):(0,i.jsx)(`circle`,{cx:t,cy:n,r:d+1,fill:u},r)},T=x?{width:S,height:C}:{},E={accessibilityLayer:!1,tabIndex:-1},D=()=>s===`bar`?(0,i.jsxs)(a.BarChart,{...T,...E,data:v,margin:{top:2,right:2,bottom:2,left:2},children:[(0,i.jsx)(a.YAxis,{hide:!0,domain:y}),(0,i.jsx)(a.Bar,{dataKey:`value`,fill:u,radius:[2,2,0,0],isAnimationActive:!1})]}):s===`area`?(0,i.jsxs)(a.AreaChart,{...T,...E,data:v,margin:{top:2,right:2,bottom:2,left:2},children:[(0,i.jsx)(`defs`,{children:(0,i.jsxs)(`linearGradient`,{id:_,x1:`0`,y1:`0`,x2:`0`,y2:`1`,children:[(0,i.jsx)(`stop`,{offset:`0%`,stopColor:u,stopOpacity:.35}),(0,i.jsx)(`stop`,{offset:`100%`,stopColor:u,stopOpacity:0})]})}),(0,i.jsx)(a.YAxis,{hide:!0,domain:y}),(0,i.jsx)(a.Area,{type:`monotone`,dataKey:`value`,stroke:u,strokeWidth:d,fill:`url(#${_})`,dot:f?w:!1,isAnimationActive:!1})]}):(0,i.jsxs)(a.LineChart,{...T,...E,data:v,margin:{top:2,right:2,bottom:2,left:2},children:[(0,i.jsx)(a.YAxis,{hide:!0,domain:y}),(0,i.jsx)(a.Line,{type:`monotone`,dataKey:`value`,stroke:u,strokeWidth:d,dot:f?w:!1,isAnimationActive:!1})]});return(0,i.jsx)(`div`,{className:(0,r.default)(`wim-sparkline`,t.default.root,g),style:{width:c,height:l},role:h?`img`:void 0,"aria-label":h,"aria-hidden":h?void 0:!0,children:x?D():(0,i.jsx)(a.ResponsiveContainer,{width:`100%`,height:`100%`,children:D()})})};s.displayName=`Sparkline`,exports.Sparkline=s;

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

@@ -0,0 +1,40 @@
+import { default as React } from 'react';
+/** Visual form of the sparkline. */
+export type SparklineType = "line" | "area" | "bar";
+export interface SparklineProps {
+    /** Sequence of values to plot, in order */
+    data: number[];
+    /** Visual form of the sparkline */
+    type?: SparklineType;
+    /** Width of the sparkline (number in px, or a CSS value such as "100%") */
+    width?: number | string;
+    /** Height of the sparkline in px */
+    height?: number;
+    /** Stroke/fill color (defaults to the primary chart color) */
+    color?: string;
+    /** Stroke width for line and area types */
+    strokeWidth?: number;
+    /** Whether to emphasize the last data point with a dot (line and area only) */
+    showLastDot?: boolean;
+    /** Lower bound of the y-axis domain (defaults to the data minimum) */
+    min?: number;
+    /** Upper bound of the y-axis domain (defaults to the data maximum) */
+    max?: number;
+    /** Accessible label describing the trend; when omitted the sparkline is hidden from assistive tech */
+    ariaLabel?: string;
+    /** Additional class names */
+    className?: string;
+}
+/**
+ * Sparkline is a tiny, axis-free chart for embedding a trend inline — inside a
+ * table cell, a Stats tile, or a Leaderboard row — where the shape matters more
+ * than exact values.
+ *
+ * Composition Contract:
+ * - Managed by: App consumption
+ * - Scroll lock: No
+ */
+export declare const Sparkline: {
+    ({ data, type, width, height, color, strokeWidth, showLastDot, min, max, ariaLabel, className, }: SparklineProps): React.JSX.Element;
+    displayName: string;
+};

package/dist/components/charts/Sparkline/Sparkline.js

@@ -0,0 +1,131 @@
+"use client";
+import e from "./sparkline.module.js";
+import { useId as t } from "react";
+import n from "classnames";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { Area as a, AreaChart as o, Bar as s, BarChart as c, Line as l, LineChart as u, ResponsiveContainer as d, YAxis as f } from "recharts";
+//#region src/components/charts/Sparkline/Sparkline.tsx
+var p = "var(--wim-color-primary)", m = ({ data: m, type: h = "line", width: g = 100, height: _ = 24, color: v = p, strokeWidth: y = 2, showLastDot: b = !1, min: x, max: S, ariaLabel: C, className: w }) => {
+	let T = t().replace(/:/g, ""), E = m.map((e, t) => ({
+		index: t,
+		value: e
+	})), D = [x ?? "auto", S ?? "auto"], O = m.length - 1, k = typeof window < "u" && !!window.__VRT__, A = typeof g == "number" ? g : 100, j = _ ?? 24, M = (e) => {
+		let { cx: t, cy: n, index: i } = e;
+		return !b || i !== O || t == null || n == null ? /* @__PURE__ */ r("g", {}, i) : /* @__PURE__ */ r("circle", {
+			cx: t,
+			cy: n,
+			r: y + 1,
+			fill: v
+		}, i);
+	}, N = k ? {
+		width: A,
+		height: j
+	} : {}, P = {
+		accessibilityLayer: !1,
+		tabIndex: -1
+	}, F = () => h === "bar" ? /* @__PURE__ */ i(c, {
+		...N,
+		...P,
+		data: E,
+		margin: {
+			top: 2,
+			right: 2,
+			bottom: 2,
+			left: 2
+		},
+		children: [/* @__PURE__ */ r(f, {
+			hide: !0,
+			domain: D
+		}), /* @__PURE__ */ r(s, {
+			dataKey: "value",
+			fill: v,
+			radius: [
+				2,
+				2,
+				0,
+				0
+			],
+			isAnimationActive: !1
+		})]
+	}) : h === "area" ? /* @__PURE__ */ i(o, {
+		...N,
+		...P,
+		data: E,
+		margin: {
+			top: 2,
+			right: 2,
+			bottom: 2,
+			left: 2
+		},
+		children: [
+			/* @__PURE__ */ r("defs", { children: /* @__PURE__ */ i("linearGradient", {
+				id: T,
+				x1: "0",
+				y1: "0",
+				x2: "0",
+				y2: "1",
+				children: [/* @__PURE__ */ r("stop", {
+					offset: "0%",
+					stopColor: v,
+					stopOpacity: .35
+				}), /* @__PURE__ */ r("stop", {
+					offset: "100%",
+					stopColor: v,
+					stopOpacity: 0
+				})]
+			}) }),
+			/* @__PURE__ */ r(f, {
+				hide: !0,
+				domain: D
+			}),
+			/* @__PURE__ */ r(a, {
+				type: "monotone",
+				dataKey: "value",
+				stroke: v,
+				strokeWidth: y,
+				fill: `url(#${T})`,
+				dot: b ? M : !1,
+				isAnimationActive: !1
+			})
+		]
+	}) : /* @__PURE__ */ i(u, {
+		...N,
+		...P,
+		data: E,
+		margin: {
+			top: 2,
+			right: 2,
+			bottom: 2,
+			left: 2
+		},
+		children: [/* @__PURE__ */ r(f, {
+			hide: !0,
+			domain: D
+		}), /* @__PURE__ */ r(l, {
+			type: "monotone",
+			dataKey: "value",
+			stroke: v,
+			strokeWidth: y,
+			dot: b ? M : !1,
+			isAnimationActive: !1
+		})]
+	});
+	return /* @__PURE__ */ r("div", {
+		className: n("wim-sparkline", e.root, w),
+		style: {
+			width: g,
+			height: _
+		},
+		role: C ? "img" : void 0,
+		"aria-label": C,
+		"aria-hidden": C ? void 0 : !0,
+		children: k ? F() : /* @__PURE__ */ r(d, {
+			width: "100%",
+			height: "100%",
+			children: F()
+		})
+	});
+};
+m.displayName = "Sparkline";
+//#endregion
+export { m as Sparkline };

package/dist/components/charts/Sparkline/sparkline.module.cjs

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

package/dist/components/charts/Sparkline/sparkline.module.js

@@ -0,0 +1,5 @@
+"use client";
+//#region src/components/charts/Sparkline/sparkline.module.scss
+var e = "_root_15zk0_4", t = { root: e };
+//#endregion
+export { t as default, e as root };

package/dist/components/charts/Treemap/Treemap.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("./treemap.module.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("react/jsx-runtime"),o=require("recharts");var s=({x:e,y:t,width:r,height:i,index:o,name:s})=>(0,a.jsxs)(`g`,{children:[(0,a.jsx)(`rect`,{x:e,y:t,width:r,height:i,style:{fill:n.CHART_COLORS[o%n.CHART_COLORS.length],stroke:`none`}}),r>30&&i>20&&(0,a.jsx)(`text`,{x:e+r/2,y:t+i/2,textAnchor:`middle`,dominantBaseline:`central`,style:{fill:n.CHART_TEXT_COLORS[o%n.CHART_TEXT_COLORS.length],fontSize:`var(--wim-font-size-lg)`,fontWeight:`var(--wim-font-weight-bold)`,stroke:`none`,strokeWidth:0,pointerEvents:`none`,userSelect:`none`},children:s})]}),c=({data:e,dataKey:i,aspectRatio:c=4/3,height:l=300,width:u=`100%`,title:d})=>!e||e.length===0?null:(0,a.jsxs)(`div`,{className:`wim-treemap ${r.default.root} wim-treemap__root`,style:{width:u},children:[d&&(0,a.jsx)(t.Title,{tag:`h3`,size:`md`,style:{marginBottom:`var(--wim-spacing-md)`},children:d}),(0,a.jsx)(`div`,{className:`${r.default.container} wim-treemap__container`,style:{height:l,minWidth:0,minHeight:0},children:(0,a.jsx)(o.ResponsiveContainer,{width:`100%`,height:`100%`,children:(0,a.jsx)(o.Treemap,{data:e,dataKey:i,aspectRatio:c,stroke:`none`,content:s,isAnimationActive:!1,children:(0,a.jsx)(o.Tooltip,{contentStyle:n.CHART_THEME.tooltip.contentStyle,formatter:(e,t)=>[e,t]})})})})]});exports.Treemap=c;

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

@@ -0,0 +1,35 @@
+import { default as React } from 'react';
+import { ChartDataPoint } from '../../helpers';
+/**
+ * Props for the Treemap component.
+ */
+export type TreemapProps = {
+    /**
+     * Data to display in the treemap.
+     */
+    data: ChartDataPoint[];
+    /**
+     * The key in the data objects that represents the size of the rectangle.
+     */
+    dataKey: string;
+    /**
+     * The aspect ratio of the rectangles.
+     * @default 4/3
+     */
+    aspectRatio?: 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;
+};
+export declare const Treemap: ({ data, dataKey, aspectRatio, height, width, title, }: TreemapProps) => React.JSX.Element | null;

package/dist/components/charts/Treemap/Treemap.js

@@ -0,0 +1,67 @@
+"use client";
+import { Title as e } from "../../typography/Title/Title.js";
+import { CHART_COLORS as t, CHART_TEXT_COLORS as n, CHART_THEME as r } from "../../helpers.js";
+import i from "./treemap.module.js";
+import "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { ResponsiveContainer as s, Tooltip as c, Treemap as l } from "recharts";
+//#region src/components/charts/Treemap/Treemap.tsx
+var u = ({ x: e, y: r, width: i, height: s, index: c, name: l }) => /* @__PURE__ */ o("g", { children: [/* @__PURE__ */ a("rect", {
+	x: e,
+	y: r,
+	width: i,
+	height: s,
+	style: {
+		fill: t[c % t.length],
+		stroke: "none"
+	}
+}), i > 30 && s > 20 && /* @__PURE__ */ a("text", {
+	x: e + i / 2,
+	y: r + s / 2,
+	textAnchor: "middle",
+	dominantBaseline: "central",
+	style: {
+		fill: n[c % n.length],
+		fontSize: "var(--wim-font-size-lg)",
+		fontWeight: "var(--wim-font-weight-bold)",
+		stroke: "none",
+		strokeWidth: 0,
+		pointerEvents: "none",
+		userSelect: "none"
+	},
+	children: l
+})] }), d = ({ data: t, dataKey: n, aspectRatio: d = 4 / 3, height: f = 300, width: p = "100%", title: m }) => !t || t.length === 0 ? null : /* @__PURE__ */ o("div", {
+	className: `wim-treemap ${i.root} wim-treemap__root`,
+	style: { width: p },
+	children: [m && /* @__PURE__ */ a(e, {
+		tag: "h3",
+		size: "md",
+		style: { marginBottom: "var(--wim-spacing-md)" },
+		children: m
+	}), /* @__PURE__ */ a("div", {
+		className: `${i.container} wim-treemap__container`,
+		style: {
+			height: f,
+			minWidth: 0,
+			minHeight: 0
+		},
+		children: /* @__PURE__ */ a(s, {
+			width: "100%",
+			height: "100%",
+			children: /* @__PURE__ */ a(l, {
+				data: t,
+				dataKey: n,
+				aspectRatio: d,
+				stroke: "none",
+				content: u,
+				isAnimationActive: !1,
+				children: /* @__PURE__ */ a(c, {
+					contentStyle: r.tooltip.contentStyle,
+					formatter: (e, t) => [e, t]
+				})
+			})
+		})
+	})]
+});
+//#endregion
+export { d as Treemap };

package/dist/components/charts/Treemap/treemap.module.cjs

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

package/dist/components/charts/Treemap/treemap.module.js

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

package/dist/components/data-display/Accordion/Accordion.cjs

@@ -0,0 +1,2 @@
+"use client";
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../node_modules/@radix-ui/react-slot/dist/index.cjs"),n=require("../../../icon/chevron-down.cjs"),r=require("../../media/Icon/Icon.cjs"),i=require("./accordion.module.cjs");let a=require("react");a=e.__toESM(a,1);let o=require("classnames");o=e.__toESM(o,1);let s=require("react/jsx-runtime");var c=(0,a.createContext)(null),l=()=>{let e=(0,a.useContext)(c);if(!e)throw Error(`Accordion components must be used within an Accordion`);return e},u=(0,a.forwardRef)(function({type:e=`single`,defaultValue:n,value:r,onChange:l,collapsible:u=!0,className:d,children:f,id:p,asChild:m,...h},g){let _=(0,a.useId)(),v=p||_,[y,b]=(0,a.useState)(()=>n?Array.isArray(n)?n:[n]:[]),x=a.default.useRef(null),S=e=>{x.current=e,typeof g==`function`?g(e):g&&(g.current=e)},C=r!==void 0,w=(0,a.useMemo)(()=>{let e=C?r:y;return Array.isArray(e)?e:e?[e]:[]},[C,r,y]),T=(0,a.useCallback)(t=>{let n;n=e===`single`?w.includes(t)&&u?[]:[t]:w.includes(t)?w.filter(e=>e!==t):[...w,t],C||b(n),l?.(e===`single`?n[0]??``:n)},[w,u,C,l,e]),E=m?t.Root:`div`;return(0,s.jsx)(c.Provider,{value:{value:w,onValueChange:T,type:e,accordionId:v,containerRef:x},children:(0,s.jsx)(E,{ref:S,className:(0,o.default)(`wim-accordion`,i.default.root,d),...h,children:f})})}),d=(0,a.createContext)(null),f=(0,a.forwardRef)(function({value:e,disabled:n=!1,className:r,children:a,asChild:c,...u},f){let{value:p,accordionId:m}=l(),h=p.includes(e),g=`wim-accordion-trigger-${m}-${e}`,_=`wim-accordion-content-${m}-${e}`,v=c?t.Root:`div`;return(0,s.jsx)(d.Provider,{value:{value:e,disabled:n,isLogicOpen:h,triggerId:g,contentId:_},children:(0,s.jsx)(v,{ref:f,className:(0,o.default)(i.default.item,n&&i.default.disabled,h&&i.default.open,r),...u,children:a})})}),p=(0,a.forwardRef)(function({children:e,className:c,asChild:u,...f},p){let{onValueChange:m}=l(),h=(0,a.useContext)(d);if(!h)throw Error(`AccordionTrigger must be used within AccordionItem`);let g=e=>{if(h.disabled){e.preventDefault();return}m(h.value)},{containerRef:_}=l();return(0,s.jsxs)(u?t.Root:`button`,{ref:p,type:u?void 0:`button`,id:h.triggerId,className:(0,o.default)(i.default.trigger,c),"aria-expanded":h.isLogicOpen,"aria-controls":h.contentId,"aria-disabled":h.disabled,disabled:h.disabled,onClick:g,onKeyDown:e=>{if(h.disabled)return;let t=Array.from(_.current?.querySelectorAll(`.${i.default.trigger}:not(:disabled)`)||[]),n=t.indexOf(e.currentTarget);switch(e.key){case`ArrowDown`:e.preventDefault(),t[(n+1)%t.length]?.focus();break;case`ArrowUp`:e.preventDefault(),t[(n-1+t.length)%t.length]?.focus();break;case`Home`:e.preventDefault(),t[0]?.focus();break;case`End`:e.preventDefault(),t[t.length-1]?.focus();break}f.onKeyDown?.(e)},...f,children:[(0,s.jsx)(`span`,{className:i.default.triggerContent,children:e}),(0,s.jsx)(r.Icon,{component:n.default,className:(0,o.default)(i.default.chevron,h.isLogicOpen&&i.default.open)})]})}),m=(0,a.forwardRef)(function({children:e,className:n,asChild:r,...c},l){let u=(0,a.useContext)(d);if(!u)throw Error(`AccordionContent must be used within AccordionItem`);return(0,s.jsx)(r?t.Root:`div`,{ref:l,id:u.contentId,role:`region`,"aria-labelledby":u.triggerId,className:(0,o.default)(i.default.content,u.isLogicOpen&&i.default.open,n),...c,children:(0,s.jsx)(`div`,{className:i.default.contentInner,children:(0,s.jsx)(`div`,{className:i.default.contentBody,children:e})})})}),h=u;h.Item=f,h.Trigger=p,h.Content=m,h.displayName=`Accordion`,f.displayName=`Accordion.Item`,p.displayName=`Accordion.Trigger`,m.displayName=`Accordion.Content`,exports.Accordion=h,exports.default=h,exports.AccordionContent=m,exports.AccordionItem=f,exports.AccordionTrigger=p;