@wakastellar/ui 4.0.0-dev.0 → 4.0.1

package/dist/components/waka-contribution-graph/index.es.js

@@ -0,0 +1,323 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.es.js";
+import { localDateKey as t, parseLocalDate as n } from "../../utils/local-date.es.js";
+import * as r from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/waka-contribution-graph/index.tsx
+var o = {
+	green: [
+		"#ebedf0",
+		"#9be9a8",
+		"#40c463",
+		"#30a14e",
+		"#216e39"
+	],
+	blue: [
+		"#ebedf0",
+		"#9ecae9",
+		"#6baed6",
+		"#3182bd",
+		"#08519c"
+	],
+	purple: [
+		"#ebedf0",
+		"#d4b9da",
+		"#c994c7",
+		"#df65b0",
+		"#980043"
+	],
+	orange: [
+		"#ebedf0",
+		"#fdd49e",
+		"#fdbb84",
+		"#fc8d59",
+		"#d7301f"
+	]
+}, s = [
+	"Sun",
+	"Mon",
+	"Tue",
+	"Wed",
+	"Thu",
+	"Fri",
+	"Sat"
+], c = [
+	"Jan",
+	"Feb",
+	"Mar",
+	"Apr",
+	"May",
+	"Jun",
+	"Jul",
+	"Aug",
+	"Sep",
+	"Oct",
+	"Nov",
+	"Dec"
+];
+function l(e) {
+	return new Date(e, 0, 1);
+}
+function u(e) {
+	return new Date(e, 11, 31);
+}
+var d = t, f = n;
+function p(e, t) {
+	return e.getFullYear() === t.getFullYear() && e.getMonth() === t.getMonth() && e.getDate() === t.getDate();
+}
+function m(e, t) {
+	if (e === 0 || t === 0) return 0;
+	let n = e / t;
+	return n <= .25 ? 1 : n <= .5 ? 2 : n <= .75 ? 3 : 4;
+}
+function h(e, t) {
+	let n = 0, r = 0, i = 0, a = !0, o = /* @__PURE__ */ new Date();
+	o.setHours(0, 0, 0, 0);
+	let s = new Date(Math.min(o.getTime(), t.getTime()));
+	s.setHours(0, 0, 0, 0);
+	let c = d(s);
+	(!e.has(c) || e.get(c) === 0) && s.setDate(s.getDate() - 1);
+	let l = new Date(s.getFullYear(), 0, 1);
+	for (; s >= l;) {
+		let t = d(s);
+		(e.get(t) || 0) > 0 ? (i++, a && (n = i), r = Math.max(r, i)) : (a = !1, i = 0), s.setDate(s.getDate() - 1);
+	}
+	return {
+		currentStreak: n,
+		longestStreak: r
+	};
+}
+function g({ date: e, count: t, x: n, y: r }) {
+	let o = e.toLocaleDateString("en-US", {
+		weekday: "short",
+		month: "short",
+		day: "numeric",
+		year: "numeric"
+	});
+	return /* @__PURE__ */ a("div", {
+		className: "absolute z-50 px-2 py-1 text-xs font-medium text-white bg-gray-900 rounded shadow-lg pointer-events-none whitespace-nowrap",
+		style: {
+			left: n,
+			top: r,
+			transform: "translate(-50%, -100%)",
+			marginTop: -8
+		},
+		children: [
+			/* @__PURE__ */ a("div", {
+				className: "font-semibold",
+				children: [
+					t,
+					" ",
+					t === 1 ? "contribution" : "contributions"
+				]
+			}),
+			/* @__PURE__ */ i("div", {
+				className: "text-gray-300",
+				children: o
+			}),
+			/* @__PURE__ */ i("div", { className: "absolute left-1/2 bottom-0 w-2 h-2 bg-gray-900 transform -translate-x-1/2 translate-y-1/2 rotate-45" })
+		]
+	});
+}
+function _({ date: t, count: n, color: r, size: a, gap: o, isToday: s, onClick: c, onHover: l }) {
+	return /* @__PURE__ */ i("div", {
+		className: e("rounded-sm transition-all duration-150", c && "cursor-pointer hover:ring-2 hover:ring-gray-400 hover:ring-offset-1", s && "ring-2 ring-gray-600 ring-offset-1"),
+		style: {
+			width: a,
+			height: a,
+			backgroundColor: r,
+			marginBottom: o
+		},
+		onMouseEnter: (e) => {
+			let r = e.currentTarget.getBoundingClientRect(), i = e.currentTarget.closest(".contribution-graph-container")?.getBoundingClientRect();
+			i && l({
+				date: t,
+				count: n,
+				x: r.left - i.left + r.width / 2,
+				y: r.top - i.top
+			});
+		},
+		onMouseLeave: () => {
+			l(null);
+		},
+		onClick: () => {
+			c?.(t, n);
+		},
+		role: "gridcell",
+		"aria-label": `${n} contributions on ${t.toDateString()}`
+	});
+}
+function v({ colors: e }) {
+	return /* @__PURE__ */ a("div", {
+		className: "flex items-center gap-1 text-xs text-muted-foreground",
+		children: [
+			/* @__PURE__ */ i("span", { children: "Less" }),
+			e.map((e, t) => /* @__PURE__ */ i("div", {
+				className: "w-3 h-3 rounded-sm",
+				style: { backgroundColor: e }
+			}, t)),
+			/* @__PURE__ */ i("span", { children: "More" })
+		]
+	});
+}
+function y({ currentStreak: e, longestStreak: t }) {
+	return /* @__PURE__ */ a("div", {
+		className: "flex gap-6 text-sm",
+		children: [/* @__PURE__ */ a("div", {
+			className: "flex flex-col",
+			children: [/* @__PURE__ */ i("span", {
+				className: "text-muted-foreground",
+				children: "Current streak"
+			}), /* @__PURE__ */ a("span", {
+				className: "font-semibold text-lg",
+				children: [
+					e,
+					" ",
+					e === 1 ? "day" : "days"
+				]
+			})]
+		}), /* @__PURE__ */ a("div", {
+			className: "flex flex-col",
+			children: [/* @__PURE__ */ i("span", {
+				className: "text-muted-foreground",
+				children: "Longest streak"
+			}), /* @__PURE__ */ a("span", {
+				className: "font-semibold text-lg",
+				children: [
+					t,
+					" ",
+					t === 1 ? "day" : "days"
+				]
+			})]
+		})]
+	});
+}
+function b({ contributions: t, year: n = (/* @__PURE__ */ new Date()).getFullYear(), colorScheme: b = "green", colors: x, onCellClick: S, showWeekdayLabels: C = !0, showMonthLabels: w = !0, showLegend: T = !0, showStreak: E = !1, cellSize: D = 10, cellGap: O = 2, className: k }) {
+	let [A, j] = r.useState(null), M = r.useMemo(() => {
+		let e = /* @__PURE__ */ new Map();
+		return t.forEach(({ date: t, count: n }) => {
+			let r = d(f(t));
+			e.set(r, (e.get(r) || 0) + n);
+		}), e;
+	}, [t]), N = r.useMemo(() => {
+		let e = 0;
+		return M.forEach((t) => {
+			t > e && (e = t);
+		}), e;
+	}, [M]), P = x || o[b] || o.green, F = r.useMemo(() => E ? h(M, u(n)) : {
+		currentStreak: 0,
+		longestStreak: 0
+	}, [
+		M,
+		n,
+		E
+	]), I = r.useMemo(() => {
+		let e = [], t = l(n), r = u(n), i = t.getDay(), a = new Date(t);
+		a.setDate(a.getDate() - i);
+		let o = new Date(a), s = [];
+		for (; o <= r || s.length > 0;) {
+			let i = d(o), a = M.get(i) || 0;
+			if (o.getFullYear() === n ? s.push({
+				date: new Date(o),
+				count: a
+			}) : o < t && s.push({
+				date: new Date(o),
+				count: -1
+			}), o.setDate(o.getDate() + 1), (o.getDay() === 0 || o > r) && (s.length > 0 && (e.push(s), s = []), o > r)) break;
+		}
+		return e;
+	}, [n, M]), L = r.useMemo(() => {
+		if (!w) return [];
+		let e = [], t = -1;
+		return I.forEach((n, r) => {
+			let i = n.find((e) => e.count >= 0);
+			if (i) {
+				let n = i.date.getMonth();
+				n !== t && (e.push({
+					month: c[n],
+					weekIndex: r
+				}), t = n);
+			}
+		}), e;
+	}, [I, w]), R = /* @__PURE__ */ new Date();
+	R.setHours(0, 0, 0, 0);
+	let z = C ? 28 : 0, B = D + O;
+	return /* @__PURE__ */ a("div", {
+		className: e("flex flex-col gap-2", k),
+		children: [
+			E && /* @__PURE__ */ i(y, {
+				currentStreak: F.currentStreak,
+				longestStreak: F.longestStreak
+			}),
+			/* @__PURE__ */ a("div", {
+				className: "contribution-graph-container relative overflow-x-auto",
+				children: [
+					w && /* @__PURE__ */ a("div", {
+						className: "flex text-xs text-muted-foreground mb-1",
+						style: { marginLeft: z },
+						children: [L.map((e, t) => /* @__PURE__ */ i("div", {
+							className: "absolute",
+							style: { left: z + e.weekIndex * B },
+							children: e.month
+						}, t)), /* @__PURE__ */ i("div", { className: "h-4" })]
+					}),
+					/* @__PURE__ */ a("div", {
+						className: "flex",
+						children: [C && /* @__PURE__ */ i("div", {
+							className: "flex flex-col text-xs text-muted-foreground pr-1",
+							style: { width: z },
+							children: s.map((t, n) => /* @__PURE__ */ i("div", {
+								className: e("flex items-center justify-end", ![
+									1,
+									3,
+									5
+								].includes(n) && "invisible"),
+								style: { height: D + O },
+								children: t
+							}, t))
+						}), /* @__PURE__ */ i("div", {
+							className: "flex gap-0.5",
+							role: "grid",
+							"aria-label": "Contribution graph",
+							children: I.map((e, t) => /* @__PURE__ */ i("div", {
+								className: "flex flex-col",
+								role: "row",
+								children: e.map((e, t) => {
+									if (e.count < 0) return /* @__PURE__ */ i("div", { style: {
+										width: D,
+										height: D,
+										marginBottom: O
+									} }, t);
+									let n = P[m(e.count, N)], r = p(e.date, R);
+									return /* @__PURE__ */ i(_, {
+										date: e.date,
+										count: e.count,
+										color: n,
+										size: D,
+										gap: O,
+										isToday: r,
+										onClick: S,
+										onHover: (e) => j(e ? { ...e } : null)
+									}, t);
+								})
+							}, t))
+						})]
+					}),
+					A && /* @__PURE__ */ i(g, {
+						date: A.date,
+						count: A.count,
+						x: A.x,
+						y: A.y
+					})
+				]
+			}),
+			T && /* @__PURE__ */ i("div", {
+				className: "flex justify-end mt-1",
+				children: /* @__PURE__ */ i(v, { colors: P })
+			})
+		]
+	});
+}
+//#endregion
+export { b as default };

package/dist/components/waka-cost-breakdown/index.cjs.js

@@ -0,0 +1 @@
+"use client";"use client";const e=require(`../../_virtual/_rolldown/runtime.cjs.js`),t=require(`../../utils/cn.cjs.js`);let n=require(`react`);n=e.__toESM(n);let r=require(`react/jsx-runtime`);var i=[`hsl(var(--chart-1))`,`hsl(var(--chart-2))`,`hsl(var(--chart-3))`,`hsl(var(--chart-4))`,`hsl(var(--chart-5))`,`hsl(var(--primary))`,`hsl(var(--info))`,`hsl(var(--warning))`,`hsl(var(--success))`,`hsl(var(--destructive))`];function a(e,t=0){return e.map((e,n)=>({...e,color:e.color||i[(t+n)%i.length],children:e.children?a(e.children,t+n):void 0}))}function o(e){return e.reduce((e,t)=>t.children&&t.children.length>0?e+o(t.children):e+t.value,0)}function s(e){return e.children&&e.children.length>0?o(e.children):e.value}function c(e,t){let n=parseInt(e.slice(1),16),r=Math.min(255,(n>>16)+Math.round(255*t)),i=Math.min(255,(n>>8&255)+Math.round(255*t)),a=Math.min(255,(n&255)+Math.round(255*t));return`#${(r<<16|i<<8|a).toString(16).padStart(6,`0`)}`}function l(e,t,n=0){let r=e.reduce((e,t)=>e+s(t),0);if(r===0||e.length===0)return[];let i=[...e].sort((e,t)=>s(t)-s(e)),a=[],o={...t},c=i;for(;c.length>0;){let{width:e,height:t}=o,i=e>=t,l=i?t:e,u=[],d=0,f=1/0;for(let n=0;n<c.length;n++){let a=c.slice(0,n+1),o=a.reduce((e,t)=>e+s(t),0),p=o/r,m=i?e*p:t*p,h=0;if(a.forEach(e=>{let t=l*(s(e)/o),n=Math.max(m/t,t/m);h=Math.max(h,n)}),h<=f)f=h,u=a,d=o;else break}let p=d/r,m=i?e*p:t*p,h=0;u.forEach(e=>{let t=l*(s(e)/d),r=i?{x:o.x,y:o.y+h,width:m,height:t,item:e,depth:n}:{x:o.x+h,y:o.y,width:t,height:m,item:e,depth:n};a.push(r),h+=t}),o=i?{x:o.x+m,y:o.y,width:e-m,height:t}:{x:o.x,y:o.y+m,width:e,height:t-m},c=c.slice(u.length),r===d&&(c=[])}return a}function u(e,t,n,r,i,a=0,o){let c=e.reduce((e,t)=>e+s(t),0);if(c===0)return[];let l=[],d=t,f=(i-r)/3;return e.forEach(e=>{let p=s(e),m=(n-t)*p/c,h=d+m;l.push({startAngle:d,endAngle:h,innerRadius:r,outerRadius:r+f,item:e,depth:a,parentColor:o}),e.children&&e.children.length>0&&l.push(...u(e.children,d,h,r+f,i,a+1,e.color)),d=h}),l}function d(e,t,n,r,i,a){let o=(i-90)*Math.PI/180,s=(a-90)*Math.PI/180,c=e+r*Math.cos(o),l=t+r*Math.sin(o),u=e+r*Math.cos(s),d=t+r*Math.sin(s),f=e+n*Math.cos(s),p=t+n*Math.sin(s),m=e+n*Math.cos(o),h=t+n*Math.sin(o),g=+(a-i>180);return n===0?`M ${e} ${t} L ${c} ${l} A ${r} ${r} 0 ${g} 1 ${u} ${d} Z`:`M ${c} ${l} A ${r} ${r} 0 ${g} 1 ${u} ${d} L ${f} ${p} A ${n} ${n} 0 ${g} 0 ${m} ${h} Z`}function f({path:e,onNavigate:i}){return(0,r.jsxs)(`nav`,{className:`flex items-center gap-1 text-sm mb-4 flex-wrap`,children:[(0,r.jsx)(`button`,{onClick:()=>i(-1),className:t.cn(`px-2 py-1 rounded-md transition-colors`,`hover:bg-muted focus:outline-none focus:ring-2 focus:ring-primary`,`text-muted-foreground hover:text-foreground`),children:`All`}),e.map((a,o)=>(0,r.jsxs)(n.Fragment,{children:[(0,r.jsx)(`span`,{className:`text-muted-foreground`,children:`/`}),(0,r.jsxs)(`button`,{onClick:()=>i(o),className:t.cn(`px-2 py-1 rounded-md transition-colors flex items-center gap-2`,`hover:bg-muted focus:outline-none focus:ring-2 focus:ring-primary`,o===e.length-1?`text-foreground font-medium`:`text-muted-foreground hover:text-foreground`),children:[a.color&&(0,r.jsx)(`span`,{className:`w-2 h-2 rounded-full`,style:{backgroundColor:a.color}}),a.name]})]},a.id))]})}function p({item:e,position:n,total:i,formatValue:a,showComparison:o}){let c=s(e),l=(c/i*100).toFixed(1);return(0,r.jsxs)(`div`,{className:t.cn(`absolute z-50 px-3 py-2 text-sm rounded-lg shadow-lg`,`bg-foreground text-background`,`animate-in fade-in-0 zoom-in-95 duration-100`,`pointer-events-none min-w-[140px]`),style:{left:n.x,top:n.y-70,transform:`translateX(-50%)`},children:[(0,r.jsx)(`div`,{className:`font-semibold mb-1`,children:e.name}),(0,r.jsxs)(`div`,{className:`flex justify-between gap-4`,children:[(0,r.jsx)(`span`,{className:`opacity-70`,children:`Value:`}),(0,r.jsx)(`span`,{className:`font-medium`,children:a(c)})]}),(0,r.jsxs)(`div`,{className:`flex justify-between gap-4`,children:[(0,r.jsx)(`span`,{className:`opacity-70`,children:`Share:`}),(0,r.jsxs)(`span`,{children:[l,`%`]})]}),o&&e.change!==void 0&&(0,r.jsxs)(`div`,{className:`flex justify-between gap-4 mt-1 pt-1 border-t border-background/20`,children:[(0,r.jsx)(`span`,{className:`opacity-70`,children:`Change:`}),(0,r.jsxs)(`span`,{className:t.cn(`font-medium`,e.change>0&&`text-red-300`,e.change<0&&`text-green-300`),children:[e.change>0?`+`:``,e.change.toFixed(1),`%`]})]}),e.children&&e.children.length>0&&(0,r.jsxs)(`div`,{className:`text-xs opacity-70 mt-1 pt-1 border-t border-background/20`,children:[`Click to drill down (`,e.children.length,` items)`]}),(0,r.jsx)(`div`,{className:`absolute left-1/2 -translate-x-1/2 -bottom-1.5 w-3 h-3 rotate-45 bg-foreground`})]})}function m({items:e,total:n,formatValue:i,hoveredId:a,onHover:o,onClick:c,showComparison:l}){return(0,r.jsx)(`div`,{className:`flex flex-col gap-1`,children:e.map(e=>{let u=s(e),d=(u/n*100).toFixed(1),f=a===e.id,p=a!==null&&a!==e.id;return(0,r.jsxs)(`button`,{className:t.cn(`flex items-center gap-3 px-3 py-2 rounded-lg transition-all duration-200 text-left`,`hover:bg-muted focus:outline-none focus:ring-2 focus:ring-primary`,f&&`bg-muted`,p&&`opacity-50`),onMouseEnter:()=>o(e.id),onMouseLeave:()=>o(null),onClick:()=>c(e),children:[(0,r.jsx)(`span`,{className:`w-3 h-3 rounded flex-shrink-0`,style:{backgroundColor:e.color}}),(0,r.jsx)(`span`,{className:`flex-1 truncate text-sm`,children:e.name}),(0,r.jsxs)(`div`,{className:`flex flex-col items-end text-xs`,children:[(0,r.jsx)(`span`,{className:`font-medium`,children:i(u)}),(0,r.jsxs)(`span`,{className:`text-muted-foreground`,children:[d,`%`]})]}),l&&e.change!==void 0&&(0,r.jsxs)(`span`,{className:t.cn(`text-xs font-medium px-1.5 py-0.5 rounded`,e.change>0&&`text-red-600 bg-red-100`,e.change<0&&`text-green-600 bg-green-100`,e.change===0&&`text-muted-foreground bg-muted`),children:[e.change>0?`+`:``,e.change.toFixed(1),`%`]}),e.children&&e.children.length>0&&(0,r.jsx)(`svg`,{className:`w-4 h-4 text-muted-foreground`,fill:`none`,viewBox:`0 0 24 24`,stroke:`currentColor`,children:(0,r.jsx)(`path`,{strokeLinecap:`round`,strokeLinejoin:`round`,strokeWidth:2,d:`M9 5l7 7-7 7`})})]},e.id)})})}function h({data:e,width:i,height:a,onItemClick:o,hoveredId:c,onHover:u,formatValue:d,showComparison:f,animated:m,total:h}){let[g,_]=n.useState(null),v=n.useRef(null),y=n.useMemo(()=>l(e,{x:0,y:0,width:i,height:a},0),[e,i,a]),b=(e,t)=>{if(v.current){let n=v.current.getBoundingClientRect();_({item:t.item,position:{x:e.clientX-n.left,y:e.clientY-n.top}})}u(t.item.id)};return(0,r.jsxs)(`div`,{ref:v,className:`relative`,style:{width:i,height:a},children:[(0,r.jsx)(`svg`,{width:i,height:a,className:`overflow-visible`,children:y.map((e,n)=>{let i=c===e.item.id,a=c!==null&&c!==e.item.id,l=e.item.children&&e.item.children.length>0,d=(s(e.item)/h*100).toFixed(1),f=e.width>=60&&e.height>=40,p=e.width>=80&&e.height>=50;return(0,r.jsxs)(`g`,{className:t.cn(`cursor-pointer`,m&&`transition-all duration-300`),style:{opacity:a?.5:1,transform:i?`scale(1.02)`:`scale(1)`,transformOrigin:`${e.x+e.width/2}px ${e.y+e.height/2}px`},onMouseMove:t=>b(t,e),onMouseLeave:()=>{_(null),u(null)},onClick:()=>o(e.item),children:[(0,r.jsx)(`rect`,{x:e.x+1,y:e.y+1,width:Math.max(0,e.width-2),height:Math.max(0,e.height-2),fill:e.item.color,rx:`4`,className:t.cn(m&&`transition-all duration-200`,i&&`brightness-110`),style:{filter:i?`brightness(1.1)`:void 0}}),f&&(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(`text`,{x:e.x+e.width/2,y:e.y+e.height/2-(p?8:0),textAnchor:`middle`,dominantBaseline:`middle`,fill:`white`,className:`text-xs font-medium pointer-events-none`,style:{textShadow:`0 1px 2px rgba(0,0,0,0.5)`},children:e.item.name.length>Math.floor(e.width/8)?e.item.name.slice(0,Math.floor(e.width/8))+`...`:e.item.name}),p&&(0,r.jsxs)(`text`,{x:e.x+e.width/2,y:e.y+e.height/2+10,textAnchor:`middle`,dominantBaseline:`middle`,fill:`white`,className:`text-[10px] pointer-events-none opacity-80`,style:{textShadow:`0 1px 2px rgba(0,0,0,0.5)`},children:[d,`%`]})]}),l&&e.width>=24&&e.height>=24&&(0,r.jsx)(`circle`,{cx:e.x+e.width-12,cy:e.y+12,r:`8`,fill:`rgba(255,255,255,0.3)`,className:`pointer-events-none`})]},e.item.id)})}),g&&(0,r.jsx)(p,{item:g.item,position:g.position,total:h,formatValue:d,showComparison:f})]})}function g({data:e,size:a,onItemClick:o,hoveredId:s,onHover:l,formatValue:f,showComparison:m,animated:h,total:g}){let[_,v]=n.useState(null),y=n.useRef(null),b=a/2,x=a/2,S=a/2-20,C=n.useMemo(()=>u(e,0,360,50,S,0),[e,50,S]),w=(e,t)=>{if(y.current){let n=y.current.getBoundingClientRect();v({item:t.item,position:{x:e.clientX-n.left,y:e.clientY-n.top}})}l(t.item.id)},T=e=>e.depth===0?e.item.color||i[0]:c(e.parentColor||e.item.color||i[0],e.depth*.15);return(0,r.jsxs)(`div`,{ref:y,className:`relative`,style:{width:a,height:a},children:[(0,r.jsxs)(`svg`,{width:a,height:a,className:`overflow-visible`,children:[(0,r.jsx)(`circle`,{cx:b,cy:x,r:45,fill:`none`,stroke:`currentColor`,strokeWidth:`1`,className:`opacity-10`}),C.map((e,n)=>{let i=s===e.item.id,a=s!==null&&s!==e.item.id;e.item.children&&e.item.children.length;let c=T(e);return(0,r.jsx)(`path`,{d:d(b,x,e.innerRadius,e.outerRadius,e.startAngle,e.endAngle),fill:c,stroke:`white`,strokeWidth:`1`,className:t.cn(`cursor-pointer`,h&&`transition-all duration-200`),style:{opacity:a?.5:1,filter:i?`brightness(1.15)`:void 0,transform:i?`scale(1.02)`:`scale(1)`,transformOrigin:`${b}px ${x}px`},onMouseMove:t=>w(t,e),onMouseLeave:()=>{v(null),l(null)},onClick:()=>o(e.item)},`${e.item.id}-${e.depth}-${n}`)}),(0,r.jsx)(`text`,{x:b,y:x-8,textAnchor:`middle`,dominantBaseline:`middle`,className:`text-xs font-medium fill-muted-foreground`,children:`Total`}),(0,r.jsx)(`text`,{x:b,y:x+10,textAnchor:`middle`,dominantBaseline:`middle`,className:`text-sm font-bold fill-foreground`,children:f(g)})]}),_&&(0,r.jsx)(p,{item:_.item,position:_.position,total:g,formatValue:f,showComparison:m})]})}function _({data:e,variant:i=`treemap`,currency:c=`$`,showLegend:l=!0,showComparison:u=!1,onItemClick:d,formatValue:p,animated:_=!0,className:v}){let[y,b]=n.useState([]),[x,S]=n.useState(null),C=n.useMemo(()=>a(e),[e]),w=n.useMemo(()=>{let e=C;for(let t of y){let n=e.find(e=>e.id===t.id);if(n?.children)e=n.children;else break}return e},[C,y]),T=n.useMemo(()=>o(w),[w]),E=n.useCallback(e=>e>=1e6?`${c}${(e/1e6).toFixed(1)}M`:e>=1e3?`${c}${(e/1e3).toFixed(1)}K`:`${c}${e.toFixed(2)}`,[c]),D=p||E,O=n.useCallback(e=>{let t=[...y.map(e=>e.id),e.id];d?.(e.id,t),e.children&&e.children.length>0&&b([...y,{id:e.id,name:e.name,color:e.color}])},[y,d]),k=n.useCallback(e=>{b(e===-1?[]:y.slice(0,e+1))},[y]),A=n.useMemo(()=>o(C),[C]);return(0,r.jsxs)(`div`,{className:t.cn(`flex flex-col`,v),children:[y.length>0&&(0,r.jsx)(f,{path:y,onNavigate:k}),(0,r.jsxs)(`div`,{className:`flex items-center justify-between mb-4`,children:[(0,r.jsxs)(`div`,{children:[(0,r.jsx)(`div`,{className:`text-sm text-muted-foreground`,children:y.length>0?`Category Total`:`Total Cost`}),(0,r.jsx)(`div`,{className:`text-2xl font-bold`,children:D(T)}),y.length>0&&(0,r.jsxs)(`div`,{className:`text-xs text-muted-foreground`,children:[(T/A*100).toFixed(1),`% of total`]})]}),u&&(0,r.jsxs)(`div`,{className:`text-right`,children:[(0,r.jsx)(`div`,{className:`text-sm text-muted-foreground`,children:`vs. Previous Period`}),(0,r.jsx)(`div`,{className:`flex items-center gap-2 justify-end`,children:(()=>{let e=w.reduce((e,t)=>e+(t.change||0)*s(t),0)/T;return(0,r.jsxs)(`span`,{className:t.cn(`text-lg font-semibold`,e>0&&`text-red-600`,e<0&&`text-green-600`,e===0&&`text-muted-foreground`),children:[e>0?`+`:``,e.toFixed(1),`%`]})})()})]})]}),(0,r.jsxs)(`div`,{className:t.cn(`flex gap-6`,l?`flex-row`:`flex-col`),children:[(0,r.jsx)(`div`,{className:`flex-1 min-w-0`,children:i===`treemap`?(0,r.jsx)(h,{data:w,width:400,height:300,onItemClick:O,hoveredId:x,onHover:S,formatValue:D,showComparison:u,animated:_,total:T}):(0,r.jsx)(g,{data:w,size:350,onItemClick:O,hoveredId:x,onHover:S,formatValue:D,showComparison:u,animated:_,total:T})}),l&&(0,r.jsxs)(`div`,{className:`w-64 flex-shrink-0`,children:[(0,r.jsx)(`div`,{className:`text-sm font-medium mb-2 text-muted-foreground`,children:y.length>0?`Subcategories`:`Categories`}),(0,r.jsx)(m,{items:w,total:T,formatValue:D,hoveredId:x,onHover:S,onClick:O,showComparison:u})]})]})]})}function v({data:e,onDrillDown:t}){let[r,i]=n.useState([]),[a,o]=n.useState(null);return{path:r,selectedItem:a,setSelectedItem:o,drillDown:n.useCallback(e=>{let n=[...r,e];i(n),t?.(n)},[r,t]),drillUp:n.useCallback(()=>{let e=r.slice(0,-1);i(e),t?.(e)},[r,t]),reset:n.useCallback(()=>{i([]),o(null),t?.([])},[t]),getCurrentData:n.useCallback(()=>{let t=e;for(let e of r){let n=t.find(t=>t.id===e);if(n?.children)t=n.children;else break}return t},[e,r])}}exports.default=_,exports.useCostBreakdown=v;

package/dist/components/waka-cost-breakdown/index.d.ts

@@ -40,8 +40,8 @@ export interface UseCostBreakdownOptions {
 }
 export declare function useCostBreakdown({ data, onDrillDown }: UseCostBreakdownOptions): {
     path: string[];
-    selectedItem: string;
-    setSelectedItem: React.Dispatch<React.SetStateAction<string>>;
+    selectedItem: string | null;
+    setSelectedItem: React.Dispatch<React.SetStateAction<string | null>>;
     drillDown: (itemId: string) => void;
     drillUp: () => void;
     reset: () => void;