wimui 0.1.0

package/dist/components/ai/UsageMeter/UsageMeter.js

@@ -0,0 +1,40 @@
+"use client";
+import e from "./usage-meter.module.js";
+import t from "react";
+import n from "classnames";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/ai/UsageMeter/UsageMeter.tsx
+var a = (e) => e.toLocaleString("en-US"), o = t.forwardRef(({ used: t, max: o, size: s = "md", showBar: c = !0, showPercentage: l = !1, warnThreshold: u = .75, dangerThreshold: d = .9, labels: f, className: p, ...m }, h) => {
+	let { label: g = "Tokens", unit: _ = "tokens", ariaLabel: v } = f ?? {}, y = typeof o == "number" && o > 0, b = y ? Math.min(t / o, 1) : 0, x = Math.round(b * 100), S = b >= d ? "danger" : b >= u ? "warn" : "ok", C = y ? l ? `${x}%` : `${a(t)} / ${a(o)}` : `${a(t)} ${_}`, w = v ?? (y ? `${g}: ${t} of ${o}` : `${g}: ${t}`), T = c && y;
+	return /* @__PURE__ */ i("div", {
+		ref: h,
+		className: n("wim-usage-meter", e.root, e[s], e[S], p),
+		role: "meter",
+		"aria-valuenow": t,
+		"aria-valuemin": 0,
+		"aria-valuemax": y ? o : void 0,
+		"aria-label": w,
+		...m,
+		children: [/* @__PURE__ */ i("div", {
+			className: e.header,
+			children: [/* @__PURE__ */ r("span", {
+				className: e.label,
+				children: g
+			}), /* @__PURE__ */ r("span", {
+				className: e.readout,
+				children: C
+			})]
+		}), T && /* @__PURE__ */ r("div", {
+			className: e.track,
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ r("div", {
+				className: e.bar,
+				style: { "--wim-usage-meter-fill": `${x}%` }
+			})
+		})]
+	});
+});
+o.displayName = "UsageMeter";
+var s = o;
+//#endregion
+export { s as TokenCounter, o as UsageMeter };

package/dist/components/ai/UsageMeter/usage-meter.module.cjs

@@ -0,0 +1,2 @@
+"use client";
+var e=`_root_kltyj_4`,t=`_warn_kltyj_14`,n=`_danger_kltyj_18`,r=`_header_kltyj_22`,i=`_label_kltyj_28`,a=`_readout_kltyj_32`,o=`_track_kltyj_38`,s=`_bar_kltyj_45`,c=`_sm_kltyj_52`,l=`_lg_kltyj_59`,u={root:e,warn:t,danger:n,header:r,label:i,readout:a,track:o,bar:s,sm:c,lg:l};exports.bar=s,exports.danger=n,exports.default=u,exports.header=r,exports.label=i,exports.lg=l,exports.readout=a,exports.root=e,exports.sm=c,exports.track=o,exports.warn=t;

package/dist/components/ai/UsageMeter/usage-meter.module.js

@@ -0,0 +1,16 @@
+"use client";
+//#region src/components/ai/UsageMeter/usage-meter.module.scss
+var e = "_root_kltyj_4", t = "_warn_kltyj_14", n = "_danger_kltyj_18", r = "_header_kltyj_22", i = "_label_kltyj_28", a = "_readout_kltyj_32", o = "_track_kltyj_38", s = "_bar_kltyj_45", c = "_sm_kltyj_52", l = "_lg_kltyj_59", u = {
+	root: e,
+	warn: t,
+	danger: n,
+	header: r,
+	label: i,
+	readout: a,
+	track: o,
+	bar: s,
+	sm: c,
+	lg: l
+};
+//#endregion
+export { s as bar, n as danger, u as default, r as header, i as label, l as lg, a as readout, e as root, c as sm, o as track, t as warn };

package/dist/components/ai/VoiceVisualizer/VoiceVisualizer.cjs

@@ -0,0 +1,2 @@
+"use client";
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("./voice-visualizer.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");var a=100,o=.05,s=n.default.forwardRef(({mode:e=`bars`,data:s,isActive:c=!0,barCount:l=24,height:u=40,className:d,sentiment:f=`neutral`,style:p,...m},h)=>{let g=c&&!s,_=(0,n.useMemo)(()=>a/l*.55,[l]),v=(0,n.useMemo)(()=>a/l*.45,[l]),y=(0,n.useMemo)(()=>Array.from({length:l},(e,t)=>{let n=s?Math.min(1,Math.max(o,s[t]??o)):o,r=n*u;return{x:t*(_+v)+v/2,barH:r,norm:n}}),[s,l,u,_,v]),b=(0,n.useMemo)(()=>!s||s.length<2?null:s.map((e,t)=>{let n=t/(s.length-1)*a,r=u*(1-Math.min(1,Math.max(0,e)));return`${n.toFixed(2)},${r.toFixed(2)}`}).join(` `),[s,u]),x=(0,n.useMemo)(()=>Array.from({length:80},(e,t)=>{let n=t/79*a*2,r=u/2-u*.22*Math.sin(t/79*4*Math.PI);return`${n.toFixed(2)},${r.toFixed(2)}`}).join(` `),[u]);return(0,i.jsxs)(`svg`,{ref:h,role:`img`,"aria-hidden":`true`,viewBox:`0 0 ${a} ${u}`,width:`100%`,height:u,preserveAspectRatio:`none`,className:(0,r.default)(`wim-voice-visualizer`,t.default.root,t.default[e],t.default[f],c&&t.default.active,!c&&t.default.muted,d),style:{height:`${u}px`,...p},...m,children:[e===`bars`&&y.map(({x:e,barH:n,norm:a},s)=>(0,i.jsx)(`rect`,{className:(0,r.default)(t.default.bar,g&&t.default.idle),style:g?{"--delay":`${(s/l*.5).toFixed(3)}s`}:void 0,x:e,y:a>o?u-n:u*.45,width:_,height:a>o?n:u*.1,rx:_*.5},s)),e===`waveform`&&(0,i.jsx)(`g`,{className:(0,r.default)(t.default.waveGroup,g&&t.default.idle),style:{overflow:`hidden`},children:(0,i.jsx)(`polyline`,{className:t.default.wave,points:b??x,fill:`none`,strokeLinecap:`round`,strokeLinejoin:`round`})})]})});s.displayName=`VoiceVisualizer`,exports.VoiceVisualizer=s;

package/dist/components/ai/VoiceVisualizer/VoiceVisualizer.d.ts

@@ -0,0 +1,34 @@
+import { default as React } from 'react';
+export type VoiceVisualizerMode = "bars" | "waveform";
+export interface VoiceVisualizerProps extends React.ComponentPropsWithoutRef<"svg"> {
+    /** Visualization style */
+    mode?: VoiceVisualizerMode;
+    /**
+     * Normalized amplitude values (0–1) per slot.
+     * When omitted, a looping idle animation plays.
+     * For bars: one value per bar. For waveform: time-domain samples.
+     */
+    data?: readonly number[];
+    /** Whether the component is in an active (recording/playing) state */
+    isActive?: boolean;
+    /** Number of bars — bars mode only (default 24) */
+    barCount?: number;
+    /** Rendered height in pixels (default 40) */
+    height?: number;
+    /** Additional CSS class */
+    className?: string;
+    /** Sentiment context for coloring (default 'neutral') */
+    sentiment?: "neutral" | "positive" | "caution" | "negative" | "informative";
+}
+/**
+ * VoiceVisualizer renders an SVG audio-level indicator.
+ * In bars mode it shows animated vertical bars; in waveform mode it shows
+ * a smooth time-domain waveform. Both modes accept live amplitude data from
+ * the Web Audio API AnalyserNode, and fall back to a looping idle animation
+ * when no data is provided.
+ *
+ * Composition Contract:
+ * - Managed by: App consumption
+ * - Scroll lock: No
+ */
+export declare const VoiceVisualizer: React.ForwardRefExoticComponent<VoiceVisualizerProps & React.RefAttributes<SVGSVGElement>>;

package/dist/components/ai/VoiceVisualizer/VoiceVisualizer.js

@@ -0,0 +1,65 @@
+"use client";
+import e from "./voice-visualizer.module.js";
+import t, { useMemo as n } from "react";
+import r from "classnames";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/ai/VoiceVisualizer/VoiceVisualizer.tsx
+var o = 100, s = .05, c = t.forwardRef(({ mode: t = "bars", data: c, isActive: l = !0, barCount: u = 24, height: d = 40, className: f, sentiment: p = "neutral", style: m, ...h }, g) => {
+	let _ = l && !c, v = n(() => o / u * .55, [u]), y = n(() => o / u * .45, [u]), b = n(() => Array.from({ length: u }, (e, t) => {
+		let n = c ? Math.min(1, Math.max(s, c[t] ?? s)) : s, r = n * d;
+		return {
+			x: t * (v + y) + y / 2,
+			barH: r,
+			norm: n
+		};
+	}), [
+		c,
+		u,
+		d,
+		v,
+		y
+	]), x = n(() => !c || c.length < 2 ? null : c.map((e, t) => {
+		let n = t / (c.length - 1) * o, r = d * (1 - Math.min(1, Math.max(0, e)));
+		return `${n.toFixed(2)},${r.toFixed(2)}`;
+	}).join(" "), [c, d]), S = n(() => Array.from({ length: 80 }, (e, t) => {
+		let n = t / 79 * o * 2, r = d / 2 - d * .22 * Math.sin(t / 79 * 4 * Math.PI);
+		return `${n.toFixed(2)},${r.toFixed(2)}`;
+	}).join(" "), [d]);
+	return /* @__PURE__ */ a("svg", {
+		ref: g,
+		role: "img",
+		"aria-hidden": "true",
+		viewBox: `0 0 ${o} ${d}`,
+		width: "100%",
+		height: d,
+		preserveAspectRatio: "none",
+		className: r("wim-voice-visualizer", e.root, e[t], e[p], l && e.active, !l && e.muted, f),
+		style: {
+			height: `${d}px`,
+			...m
+		},
+		...h,
+		children: [t === "bars" && b.map(({ x: t, barH: n, norm: a }, o) => /* @__PURE__ */ i("rect", {
+			className: r(e.bar, _ && e.idle),
+			style: _ ? { "--delay": `${(o / u * .5).toFixed(3)}s` } : void 0,
+			x: t,
+			y: a > s ? d - n : d * .45,
+			width: v,
+			height: a > s ? n : d * .1,
+			rx: v * .5
+		}, o)), t === "waveform" && /* @__PURE__ */ i("g", {
+			className: r(e.waveGroup, _ && e.idle),
+			style: { overflow: "hidden" },
+			children: /* @__PURE__ */ i("polyline", {
+				className: e.wave,
+				points: x ?? S,
+				fill: "none",
+				strokeLinecap: "round",
+				strokeLinejoin: "round"
+			})
+		})]
+	});
+});
+c.displayName = "VoiceVisualizer";
+//#endregion
+export { c as VoiceVisualizer };

package/dist/components/ai/VoiceVisualizer/voice-visualizer.module.cjs

@@ -0,0 +1,2 @@
+"use client";
+var e=`_root_1rpgw_3`,t=`_active_1rpgw_9`,n=`_muted_1rpgw_12`,r=`_bar_1rpgw_16`,i=`_wave_1rpgw_19`,a=`_positive_1rpgw_26`,o=`_caution_1rpgw_29`,s=`_negative_1rpgw_32`,c=`_informative_1rpgw_35`,l=`_idle_1rpgw_44`,u=`_waveGroup_1rpgw_56`,d={root:e,active:t,muted:n,bar:r,"voice-muted-breath":`_voice-muted-breath_1rpgw_1`,wave:i,positive:a,caution:o,negative:s,informative:c,idle:l,"voice-bar-idle":`_voice-bar-idle_1rpgw_1`,waveGroup:u,"voice-wave-scroll":`_voice-wave-scroll_1rpgw_1`};exports.active=t,exports.bar=r,exports.caution=o,exports.default=d,exports.idle=l,exports.informative=c,exports.muted=n,exports.negative=s,exports.positive=a,exports.root=e,exports.wave=i,exports.waveGroup=u;

package/dist/components/ai/VoiceVisualizer/voice-visualizer.module.js

@@ -0,0 +1,20 @@
+"use client";
+//#region src/components/ai/VoiceVisualizer/voice-visualizer.module.scss
+var e = "_root_1rpgw_3", t = "_active_1rpgw_9", n = "_muted_1rpgw_12", r = "_bar_1rpgw_16", i = "_wave_1rpgw_19", a = "_positive_1rpgw_26", o = "_caution_1rpgw_29", s = "_negative_1rpgw_32", c = "_informative_1rpgw_35", l = "_idle_1rpgw_44", u = "_waveGroup_1rpgw_56", d = {
+	root: e,
+	active: t,
+	muted: n,
+	bar: r,
+	"voice-muted-breath": "_voice-muted-breath_1rpgw_1",
+	wave: i,
+	positive: a,
+	caution: o,
+	negative: s,
+	informative: c,
+	idle: l,
+	"voice-bar-idle": "_voice-bar-idle_1rpgw_1",
+	waveGroup: u,
+	"voice-wave-scroll": "_voice-wave-scroll_1rpgw_1"
+};
+//#endregion
+export { t as active, r as bar, o as caution, d as default, l as idle, c as informative, n as muted, s as negative, a as positive, e as root, i as wave, u as waveGroup };

package/dist/components/charts/AreaChart/AreaChart.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("./area-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,stacked:c=!1,height:l=300,width:u=`100%`,title:d,smooth:f=!0,animated:p=!1})=>(0,a.jsxs)(`div`,{className:`wim-area-chart ${r.default.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,style:{height:l},children:(0,a.jsx)(o.ResponsiveContainer,{width:`100%`,height:`100%`,children:(0,a.jsxs)(o.AreaChart,{data:e,margin:{top:5,right:30,left:20,bottom:5},children:[(0,a.jsx)(`defs`,{children:i.map((e,t)=>{let r=n.CHART_COLORS[t%n.CHART_COLORS.length];return(0,a.jsxs)(`linearGradient`,{id:`grad-${e}`,x1:`0`,y1:`0`,x2:`0`,y2:`1`,children:[(0,a.jsx)(`stop`,{offset:`5%`,stopColor:r,stopOpacity:.3}),(0,a.jsx)(`stop`,{offset:`95%`,stopColor:r,stopOpacity:0})]},`grad-${e}`)})}),(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.Area,{type:f?`monotone`:`linear`,dataKey:e,stroke:n.CHART_COLORS[t%n.CHART_COLORS.length],fillOpacity:1,fill:`url(#grad-${e})`,stackId:c?`stack`:void 0,isAnimationActive:p},e))]})})})]});exports.AreaChart=s;

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

@@ -0,0 +1,46 @@
+import { default as React } from 'react';
+import { ChartDataPoint } from '../../helpers';
+export type AreaChartProps = {
+    /**
+     * Data to display in the chart.
+     */
+    data: ChartDataPoint[];
+    /**
+     * Keys in the data objects to render as areas (series).
+     */
+    keys: string[];
+    /**
+     * The key in the data objects used for the X axis labels.
+     */
+    xAxisKey: string;
+    /**
+     * If true, series are stacked on top of each other.
+     * @default false
+     */
+    stacked?: boolean;
+    /**
+     * 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 true
+     */
+    smooth?: boolean;
+    /**
+     * If true, animates the chart on mount.
+     * @default false
+     */
+    animated?: boolean;
+};
+export declare const AreaChart: ({ data, keys, xAxisKey, stacked, height, width, title, smooth, animated, }: AreaChartProps) => React.JSX.Element;

package/dist/components/charts/AreaChart/AreaChart.js

@@ -0,0 +1,89 @@
+"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 "./area-chart.module.js";
+import "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { Area as o, AreaChart as s, CartesianGrid as c, Legend as l, ResponsiveContainer as u, Tooltip as d, XAxis as f, YAxis as p } from "recharts";
+//#region src/components/charts/AreaChart/AreaChart.tsx
+var m = ({ data: m, keys: h, xAxisKey: g, stacked: _ = !1, height: v = 300, width: y = "100%", title: b, smooth: x = !0, animated: S = !1 }) => /* @__PURE__ */ a("div", {
+	className: `wim-area-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(u, {
+			width: "100%",
+			height: "100%",
+			children: /* @__PURE__ */ a(s, {
+				data: m,
+				margin: {
+					top: 5,
+					right: 30,
+					left: 20,
+					bottom: 5
+				},
+				children: [
+					/* @__PURE__ */ i("defs", { children: h.map((e, n) => {
+						let r = t[n % t.length];
+						return /* @__PURE__ */ a("linearGradient", {
+							id: `grad-${e}`,
+							x1: "0",
+							y1: "0",
+							x2: "0",
+							y2: "1",
+							children: [/* @__PURE__ */ i("stop", {
+								offset: "5%",
+								stopColor: r,
+								stopOpacity: .3
+							}), /* @__PURE__ */ i("stop", {
+								offset: "95%",
+								stopColor: r,
+								stopOpacity: 0
+							})]
+						}, `grad-${e}`);
+					}) }),
+					/* @__PURE__ */ i(c, {
+						...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(l, {
+						verticalAlign: "top",
+						height: 36
+					}),
+					h.map((e, n) => /* @__PURE__ */ i(o, {
+						type: x ? "monotone" : "linear",
+						dataKey: e,
+						stroke: t[n % t.length],
+						fillOpacity: 1,
+						fill: `url(#grad-${e})`,
+						stackId: _ ? "stack" : void 0,
+						isAnimationActive: S
+					}, e))
+				]
+			})
+		})
+	})]
+});
+//#endregion
+export { m as AreaChart };

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

@@ -0,0 +1,8 @@
+"use client";
+//#region src/components/charts/AreaChart/area-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/BarChart/BarChart.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("./bar-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,stacked:c=!1,height:l=300,width:u=`100%`,title:d,animated:f=!1})=>(0,a.jsxs)(`div`,{className:`wim-bar-chart ${r.default.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,style:{height:l},children:(0,a.jsx)(o.ResponsiveContainer,{width:`100%`,height:`100%`,children:(0,a.jsxs)(o.BarChart,{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.Bar,{dataKey:e,fill:n.CHART_COLORS[t%n.CHART_COLORS.length],stackId:c?`stack`:void 0,radius:c?0:[4,4,0,0],isAnimationActive:f},e))]})})})]});exports.BarChart=s;

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

@@ -0,0 +1,41 @@
+import { default as React } from 'react';
+import { ChartDataPoint } from '../../helpers';
+export type BarChartProps = {
+    /**
+     * Data to display in the chart.
+     */
+    data: ChartDataPoint[];
+    /**
+     * Keys in the data objects to render as bars (series).
+     */
+    keys: string[];
+    /**
+     * The key in the data objects used for the X axis labels.
+     */
+    xAxisKey: string;
+    /**
+     * If true, series are stacked on top of each other.
+     * @default false
+     */
+    stacked?: boolean;
+    /**
+     * 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 BarChart: ({ data, keys, xAxisKey, stacked, height, width, title, animated, }: BarChartProps) => React.JSX.Element;

package/dist/components/charts/BarChart/BarChart.js

@@ -0,0 +1,73 @@
+"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 "./bar-chart.module.js";
+import "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { Bar as o, BarChart as s, CartesianGrid as c, Legend as l, ResponsiveContainer as u, Tooltip as d, XAxis as f, YAxis as p } from "recharts";
+//#region src/components/charts/BarChart/BarChart.tsx
+var m = ({ data: m, keys: h, xAxisKey: g, stacked: _ = !1, height: v = 300, width: y = "100%", title: b, animated: x = !1 }) => /* @__PURE__ */ a("div", {
+	className: `wim-bar-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(u, {
+			width: "100%",
+			height: "100%",
+			children: /* @__PURE__ */ a(s, {
+				data: m,
+				margin: {
+					top: 5,
+					right: 30,
+					left: 20,
+					bottom: 5
+				},
+				children: [
+					/* @__PURE__ */ i(c, {
+						...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(l, {
+						verticalAlign: "top",
+						height: 36
+					}),
+					h.map((e, n) => /* @__PURE__ */ i(o, {
+						dataKey: e,
+						fill: t[n % t.length],
+						stackId: _ ? "stack" : void 0,
+						radius: _ ? 0 : [
+							4,
+							4,
+							0,
+							0
+						],
+						isAnimationActive: x
+					}, e))
+				]
+			})
+		})
+	})]
+});
+//#endregion
+export { m as BarChart };

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

@@ -0,0 +1,8 @@
+"use client";
+//#region src/components/charts/BarChart/bar-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/FunnelChart/FunnelChart.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("./funnel-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,dataKey:i,nameKey:s,height:c=300,width:l=`100%`,title:u,animated:d=!1})=>(0,a.jsxs)(`div`,{className:`wim-funnel-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.FunnelChart,{children:[(0,a.jsx)(o.Tooltip,{contentStyle:n.CHART_THEME.tooltip.contentStyle,cursor:n.CHART_THEME.tooltip.cursor}),(0,a.jsxs)(o.Funnel,{dataKey:i,data:e,isAnimationActive:d,children:[(0,a.jsx)(o.LabelList,{position:`right`,fill:`var(--wim-color-text-secondary)`,dataKey:s,stroke:`none`}),e.map((e,t)=>(0,a.jsx)(o.Cell,{fill:n.CHART_COLORS[t%n.CHART_COLORS.length]},`cell-${t}`))]})]})})})]});exports.FunnelChart=s;

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

@@ -0,0 +1,36 @@
+import { default as React } from 'react';
+import { ChartDataPoint } from '../../helpers';
+export type FunnelChartProps = {
+    /**
+     * Data to display in the chart. Each entry represents one funnel stage.
+     */
+    data: ChartDataPoint[];
+    /**
+     * The key in the data objects that represents the value of each stage.
+     */
+    dataKey: string;
+    /**
+     * The key in the data objects used for the stage labels.
+     */
+    nameKey: 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 FunnelChart: ({ data, dataKey, nameKey, height, width, title, animated, }: FunnelChartProps) => React.JSX.Element;

package/dist/components/charts/FunnelChart/FunnelChart.js

@@ -0,0 +1,41 @@
+"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 "./funnel-chart.module.js";
+import "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { Cell as o, Funnel as s, FunnelChart as c, LabelList as l, ResponsiveContainer as u, Tooltip as d } from "recharts";
+//#region src/components/charts/FunnelChart/FunnelChart.tsx
+var f = ({ data: f, dataKey: p, nameKey: m, height: h = 300, width: g = "100%", title: _, animated: v = !1 }) => /* @__PURE__ */ a("div", {
+	className: `wim-funnel-chart ${r.root}`,
+	style: { width: g },
+	children: [_ && /* @__PURE__ */ i(e, {
+		tag: "h3",
+		size: "md",
+		style: { marginBottom: "var(--wim-spacing-md)" },
+		children: _
+	}), /* @__PURE__ */ i("div", {
+		className: r.container,
+		style: { height: h },
+		children: /* @__PURE__ */ i(u, {
+			width: "100%",
+			height: "100%",
+			children: /* @__PURE__ */ a(c, { children: [/* @__PURE__ */ i(d, {
+				contentStyle: n.tooltip.contentStyle,
+				cursor: n.tooltip.cursor
+			}), /* @__PURE__ */ a(s, {
+				dataKey: p,
+				data: f,
+				isAnimationActive: v,
+				children: [/* @__PURE__ */ i(l, {
+					position: "right",
+					fill: "var(--wim-color-text-secondary)",
+					dataKey: m,
+					stroke: "none"
+				}), f.map((e, n) => /* @__PURE__ */ i(o, { fill: t[n % t.length] }, `cell-${n}`))]
+			})] })
+		})
+	})]
+});
+//#endregion
+export { f as FunnelChart };

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

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

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

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

@@ -0,0 +1,53 @@
+import { default as React } from 'react';
+export type GanttTask = {
+    id: string;
+    label: string;
+    startDate: Date;
+    endDate: Date;
+    color?: string;
+    progress?: number;
+};
+export type GanttViewMode = "day" | "week" | "month";
+export type GanttChartLabels = {
+    ariaChart?: string;
+    ariaTaskBar?: (label: string, start: string, end: string) => string;
+};
+export type GanttChartProps = {
+    /**
+     * Tasks to render as bars in the chart.
+     */
+    tasks: GanttTask[];
+    /**
+     * Start of the visible date range. Defaults to the earliest task start date.
+     */
+    startDate?: Date;
+    /**
+     * End of the visible date range. Defaults to the latest task end date.
+     */
+    endDate?: Date;
+    /**
+     * Granularity of the time axis.
+     * @default "day"
+     */
+    viewMode?: GanttViewMode;
+    /**
+     * Width of one time column in pixels. Defaults to a value suited to the view mode.
+     */
+    columnWidth?: number;
+    /**
+     * Height of one task row in pixels.
+     * @default 40
+     */
+    rowHeight?: number;
+    /**
+     * Called when a task bar is clicked.
+     */
+    onTaskClick?: (task: GanttTask) => void;
+    /**
+     * Additional CSS class name for the container.
+     */
+    className?: string;
+    /** Labels for manual translation overrides. */
+    labels?: GanttChartLabels;
+};
+export declare const GanttChart: ({ tasks, startDate, endDate, viewMode, columnWidth, rowHeight, onTaskClick, className, labels, }: GanttChartProps) => React.ReactElement;