ioloco-charts 0.1.0

package/dist/D3/AreaChart/index.d.ts

@@ -0,0 +1,2 @@
+import type { AreaChartProps } from './types';
+export declare function AreaChart({ series, title, description, height, compact, onPointClick }: Readonly<AreaChartProps>): import("react").JSX.Element;

package/dist/D3/AreaChart/index.js

@@ -0,0 +1,54 @@
+"use client";
+import{jsx as r}from"react/jsx-runtime"
+import{useRef as t,useMemo as e,useEffect as o}from"react"
+import{max as n}from"d3-array"
+import{scalePoint as s,scaleLinear as i}from"d3-scale"
+import{select as a,pointer as l}from"d3-selection"
+import{area as c,line as h}from"d3-shape"
+import{chartPalette as d}from"../../tokens.stylex.js"
+import{ChartFrame as m}from"../shared/ChartFrame/index.js"
+import{ChartLegend as u}from"../shared/ChartLegend/index.js"
+import{areaChartAxisLayout as f}from"../shared/chartAxisLayout/areaChart.js"
+import{renderXAxis as p,renderYAxis as $}from"../shared/chartAxisLayout/render.js"
+import{chartFrameInteractionProps as g,chartPointerHandlers as v}from"../shared/chartBinding.js"
+import{CHART_SERIES_CURVE as y,sanitizeGradientKey as j,appendAreaSeriesGradient as x,chartLineStrokeWidth as k,seriesDimOpacity as C}from"../shared/chartVisualStyle.js"
+import{useChartInteraction as I}from"../shared/useChartInteraction.js"
+import{useChartLegendToggle as w}from"../shared/useChartLegendToggle.js"
+import{innerSize as b}from"../shared/chartUtils.js"
+function L(r,t,e){if(0===r.length)return
+let o=r[0],n=Infinity
+for(const s of r){const r=e(s)??0,i=Math.abs(t-r)
+i<n&&(n=i,o=s)}return o}function B(r,t,e){return`${r} · ${t}: ${e.toLocaleString()} CIs`}function M(r,t,e){const o=t.map(t=>{const o=t.points.find(t=>t.x===r)
+if(!o)return null
+const n=e.findIndex(r=>r.id===t.id)
+return{color:t.color??d[n%d.length],label:t.id,value:`${o.y.toLocaleString()} CIs`}}).filter(r=>null!==r)
+return{title:r,rows:o}}function q({series:q,title:A="Warranty expiries",description:P="Projected count of CIs reaching warranty end by quarter.",height:S=320,compact:T=!1,onPointClick:F}){const H=t(null),K=I("Hover the chart for the quarterly value."),R=t(F)
+R.current=F
+const U=e(()=>q.map(r=>r.id),[q]),{hiddenIds:V,visibleIds:W,toggle:z}=w(U),D=e(()=>q.filter(r=>W.includes(r.id)),[q,W])
+o(()=>{const r=H.current
+if(!r||0===D.length)return
+const t=r.clientWidth||640,e=T?Math.min(S,280):S,o=f(T),m=o.margin,{width:u,height:g}=b(t,e,m),I=k(T),w=v(K),A=a(r)
+A.selectAll("*").remove(),A.attr("viewBox",`0 0 ${t} ${e}`)
+const P=A.append("g").attr("transform",`translate(${m.left},${m.top})`),F=A.append("defs"),U=D[0]?.points.map(r=>r.x)??[],V=s().domain(U).range([0,u]).padding(.5),W=i().domain([0,n(D,r=>n(r.points,r=>r.y)??0)??0]).nice().range([g,0])
+p(P,V,g,o.x),$(P,W,o.y)
+const z=c().x(r=>V(r.x)??0).y0(g).y1(r=>W(r.y)).curve(y),E=h().x(r=>V(r.x)??0).y(r=>W(r.y)).curve(y)
+D.forEach((r,t)=>{const e=q.findIndex(t=>t.id===r.id),o=r.color??d[e%d.length],n=`area-gradient-${j(r.id)}`
+x(F,n,o,T),P.append("path").datum(r.points).attr("class",`area-fill-${t}`).attr("fill",`url(#${n})`).attr("stroke","none").attr("d",z).attr("pointer-events","none"),P.append("path").datum(r.points).attr("class",`area-line-${t}`).attr("fill","none").attr("stroke",o).attr("stroke-width",I).attr("stroke-linecap","round").attr("stroke-linejoin","round").attr("d",E).attr("pointer-events","none")})
+let G=null
+const J=(r,t)=>{const e=L(U,r,V)
+if(e)for(let r=D.length-1;r>=0;r-=1){const o=D[r],n=o.points.find(r=>r.x===e)
+if(n&&(t>=W(n.y)&&t<=g))return{seriesKey:o.id,point:n}}},N=P.append("rect").attr("class","area-interaction-overlay").attr("x",0).attr("y",0).attr("width",u).attr("height",g).attr("fill","transparent").attr("pointer-events","all").attr("cursor","crosshair")
+N.on("mousemove",r=>{const[t,e]=l(r,P.node()),o=J(t,e)
+if(!o)return void(G&&(G=null,w.onHoverEnd()))
+const n=`${o.seriesKey}:${o.point.x}`,s=B(o.seriesKey,o.point.x,o.point.y),i=M(o.point.x,D,q)
+if(n!==G)return G=n,void w.onHover(n,s,r,i)
+w.onPointerMove?.(r)}).on("mouseleave",()=>{G=null,w.onHoverEnd()}).on("click",r=>{const[t,e]=l(r,P.node()),o=J(t,e)
+if(!o)return
+const n=`${o.seriesKey}:${o.point.x}`,s=B(o.seriesKey,o.point.x,o.point.y)
+w.onToggleSelect(n,s),R.current?.({seriesId:o.seriesKey,x:o.point.x,y:o.point.y})})
+const O=K.registerFocusApply(()=>{const r=K.getHoverKey(),t=K.getSelectedKey()
+D.forEach((e,o)=>{const n=e.id,s=!r&&!t||Boolean(r?.startsWith(`${n}:`))||Boolean(t?.startsWith(`${n}:`)),i=C(s)
+P.select(`path.area-fill-${o}`).attr("opacity",i),P.select(`path.area-line-${o}`).attr("opacity",i)})})
+return()=>{O(),N.on("mousemove mouseleave click",null)}},[T,S,K.getHoverKey,K.getSelectedKey,K.onHover,K.onHoverEnd,K.onPointerMove,K.onToggleSelect,K.registerFocusApply,q,D])
+const E=e(()=>r(u,{ariaLabel:"Series",hiddenIds:V,onToggle:z,items:q.map((r,t)=>({id:r.id,label:r.id,color:r.color??d[t%d.length]}))}),[V,q,z])
+return r(m,{title:A,description:P,height:T?Math.min(S,280):S,compact:T,...g(K),svgRef:H,legend:E})}export{q as AreaChart}

package/dist/D3/AreaChart/types.d.ts

@@ -0,0 +1,20 @@
+export type AreaSeries = {
+    id: string;
+    color?: string;
+    points: {
+        x: string;
+        y: number;
+    }[];
+};
+export type AreaChartProps = {
+    series: AreaSeries[];
+    title?: string;
+    description?: string;
+    height?: number;
+    compact?: boolean;
+    onPointClick?: (point: {
+        seriesId: string;
+        x: string;
+        y: number;
+    }) => void;
+};

package/dist/D3/BarChart/index.d.ts

@@ -0,0 +1,3 @@
+import 'd3-transition';
+import type { BarChartProps } from './types';
+export declare function BarChart({ data, title, description, height, compact, valueLabel, onDatumClick }: Readonly<BarChartProps>): import("react").JSX.Element;

package/dist/D3/BarChart/index.js

@@ -0,0 +1,29 @@
+"use client";
+import{jsx as t}from"react/jsx-runtime"
+import{useRef as r,useEffect as e}from"react"
+import{max as o}from"d3-array"
+import{scaleBand as i,scaleLinear as s}from"d3-scale"
+import{select as a}from"d3-selection"
+import"d3-transition"
+import{chartPalette as n}from"../../tokens.stylex.js"
+import{ChartFrame as m}from"../shared/ChartFrame/index.js"
+import{barChartAxisLayout as c}from"../shared/chartAxisLayout/barChart.js"
+import{renderXAxis as h,renderYAxis as d}from"../shared/chartAxisLayout/render.js"
+import{chartFrameInteractionProps as l,chartPointerHandlers as p}from"../shared/chartBinding.js"
+import{bindChartPointer as f,applyPointerOpacity as u}from"../shared/chartInteraction.js"
+import{sanitizeGradientKey as g,appendBarSeriesGradient as y,SHAPE_STROKE_WIDTH as j}from"../shared/chartVisualStyle.js"
+import{useChartInteraction as $}from"../shared/useChartInteraction.js"
+import{innerSize as x}from"../shared/chartUtils.js"
+function k({data:k,title:C="CIs by site",description:b="Count of registered configuration items per data centre site.",height:w=320,compact:v=!1,valueLabel:I="CIs",onDatumClick:F}){const L=r(null),A=$(`Vertical bars show ${I.toLowerCase()} per category.`),B=r(F)
+return B.current=F,e(()=>{const t=L.current
+if(!t)return
+const r=t.clientWidth||640,e=v?Math.min(w,280):w,m=c(v),l=m.margin,{width:$,height:C}=x(r,e,l),b=n[0],F=`bar-gradient-${g(b)}`,M=a(t)
+M.selectAll("*").remove(),M.attr("viewBox",`0 0 ${r} ${e}`)
+const V=M.append("defs")
+y(V,F,b,v)
+const D=M.append("g").attr("transform",`translate(${l.left},${l.top})`),R=i().domain(k.map(t=>t.label)).range([0,$]).padding(.25),S=s().domain([0,o(k,t=>t.value)??0]).nice().range([C,0])
+h(D,R,C,m.x),d(D,S,m.y)
+const U=D.selectAll("rect").data(k).join("rect").attr("x",t=>R(t.label)??0).attr("width",R.bandwidth()).attr("y",C).attr("height",0).attr("fill",`url(#${F})`).attr("stroke",b).attr("stroke-width",j).attr("stroke-opacity",.35).attr("rx",4)
+U.transition().duration(500).attr("y",t=>S(t.value)).attr("height",t=>C-S(t.value)),f(U,{keyFn:t=>t.label,hintFn:t=>`${t.label}: ${t.value.toLocaleString()} ${I}`,...p(A),onClick:t=>B.current?.(t)})
+const q=A.registerFocusApply(()=>{u(U,t=>t.label,A.getFocusOpacity)})
+return()=>{q(),U.on("mouseenter mouseleave click",null)}},[v,k,w,A.getFocusOpacity,A.onHover,A.onHoverEnd,A.onToggleSelect,A.registerFocusApply,I]),t(m,{title:C,description:b,height:v?Math.min(w,280):w,compact:v,...l(A),svgRef:L})}export{k as BarChart}

package/dist/D3/BarChart/types.d.ts

@@ -0,0 +1,13 @@
+export type BarDatum = {
+    label: string;
+    value: number;
+};
+export type BarChartProps = {
+    data: BarDatum[];
+    title?: string;
+    description?: string;
+    height?: number;
+    compact?: boolean;
+    valueLabel?: string;
+    onDatumClick?: (datum: BarDatum) => void;
+};

package/dist/D3/DonutChart/index.d.ts

@@ -0,0 +1,2 @@
+import type { DonutChartProps } from './types';
+export declare function DonutChart({ data, title, description, height, compact, innerRadiusRatio, onDatumClick }: Readonly<DonutChartProps>): import("react").JSX.Element;

package/dist/D3/DonutChart/index.js

@@ -0,0 +1,35 @@
+"use client";
+import{jsx as t}from"react/jsx-runtime"
+import{useRef as e,useMemo as r,useEffect as o}from"react"
+import{sum as n}from"d3-array"
+import{scaleOrdinal as s}from"d3-scale"
+import{select as i}from"d3-selection"
+import{pie as a,arc as d}from"d3-shape"
+import{chartPalette as m}from"../../tokens.stylex.js"
+import{ChartFrame as l}from"../shared/ChartFrame/index.js"
+import{ChartLegend as c}from"../shared/ChartLegend/index.js"
+import{chartFrameInteractionProps as h,chartPointerHandlers as f}from"../shared/chartBinding.js"
+import{bindChartPointerLite as p}from"../shared/chartInteraction.js"
+import{appendBarSeriesGradient as u,sanitizeGradientKey as g,chartSeriesStrokeColor as j}from"../shared/chartVisualStyle.js"
+import{useChartInteraction as k}from"../shared/useChartInteraction.js"
+import{useChartLegendToggle as x}from"../shared/useChartLegendToggle.js"
+const C=.4,y=.75
+function I({data:I,title:$="Asset class distribution",description:v="Registered CIs grouped by hardware class in the CMDB.",height:b=320,compact:M=!1,innerRadiusRatio:w=.58,onDatumClick:R}){const B=e(null),F=k("Hover a segment for details."),L=e(R)
+L.current=R
+const T=r(()=>I.map(t=>t.label),[I]),{hiddenIds:z,visibleIds:D,toggle:S}=x(T),A=r(()=>I.filter(t=>D.includes(t.label)),[I,D])
+o(()=>{const t=B.current
+if(!t||0===A.length)return
+const e=t.clientWidth||480,r=M?Math.min(b,280):b,o=Math.min(e,r)/2-16,l=o*Math.min(y,Math.max(C,w)),c=i(t)
+c.selectAll("*").remove(),c.attr("viewBox",`0 0 ${e} ${r}`)
+const h=c.append("defs")
+I.forEach((t,e)=>{if(!D.includes(t.label))return
+const r=t.color??m[e%m.length]
+u(h,`donut-${g(t.label)}`,r,M)})
+const k=c.append("g").attr("transform",`translate(${e/2},${r/2})`),x=s().domain(I.map(t=>t.label)).range(I.map((t,e)=>t.color??m[e%m.length])),$=a().value(t=>t.value).sort(null).padAngle(.015),v=d().innerRadius(l).outerRadius(o),R=k.selectAll("path").data($(A)).join("path").attr("fill",t=>`url(#donut-${g(t.data.label)})`).attr("stroke",t=>x(t.data.label)).attr("stroke-width",M?2.5:3).attr("stroke-linejoin","round").attr("d",v)
+p(R,{keyFn:t=>t.data.label,hintFn:t=>`${t.data.label}: ${t.data.value.toLocaleString()} CIs`,...f(F),onClick:t=>L.current?.(t.data)})
+const T=F.registerFocusApply(()=>{const t=F.getHoverKey()
+R.attr("opacity",t=>F.getFocusOpacity(t.data.label)).attr("stroke",e=>{const r=x(e.data.label)
+return e.data.label===t?j(r):r}).attr("stroke-width",e=>e.data.label===t?M?3:3.5:M?2.5:3)}),z=n(A,t=>t.value)
+return k.append("text").attr("text-anchor","middle").attr("dy","-0.2em").attr("font-size",M?18:22).attr("font-weight",700).attr("pointer-events","none").text(z.toLocaleString()),k.append("text").attr("text-anchor","middle").attr("dy","1.2em").attr("font-size",M?10:12).attr("fill","rgba(0,0,0,0.5)").attr("pointer-events","none").text("Total CIs"),()=>{T(),R.on("mouseenter mouseleave click",null)}},[M,I,b,w,F.getFocusOpacity,F.onHover,F.onHoverEnd,F.onPointerMove,F.onToggleSelect,F.registerFocusApply,A,D])
+const H=r(()=>t(c,{ariaLabel:"Segments",hiddenIds:z,onToggle:S,items:I.map((t,e)=>({id:t.label,label:t.label,color:t.color??m[e%m.length]}))}),[I,z,S])
+return t(l,{title:$,description:v,height:M?Math.min(b,280):b,compact:M,...h(F),svgRef:B,legend:H})}export{I as DonutChart}

package/dist/D3/DonutChart/types.d.ts

@@ -0,0 +1,15 @@
+export type DonutDatum = {
+    label: string;
+    value: number;
+    color?: string;
+};
+export type DonutChartProps = {
+    data: DonutDatum[];
+    title?: string;
+    description?: string;
+    height?: number;
+    compact?: boolean;
+    /** Hole size as a fraction of the outer radius. Clamped to keep a visible donut ring. */
+    innerRadiusRatio?: number;
+    onDatumClick?: (datum: DonutDatum) => void;
+};

package/dist/D3/FunnelChart/index.d.ts

@@ -0,0 +1,2 @@
+import type { FunnelChartProps } from './types';
+export declare function FunnelChart({ data, title, description, height, compact, onStageClick }: Readonly<FunnelChartProps>): import("react").JSX.Element;

package/dist/D3/FunnelChart/index.js

@@ -0,0 +1,27 @@
+"use client";
+import{jsx as t}from"react/jsx-runtime"
+import{useRef as e,useEffect as r}from"react"
+import{max as n}from"d3-array"
+import{select as o}from"d3-selection"
+import{chartPalette as s}from"../../tokens.stylex.js"
+import{ChartFrame as i}from"../shared/ChartFrame/index.js"
+import{chartFrameInteractionProps as a,chartPointerHandlers as c}from"../shared/chartBinding.js"
+import{bindChartPointer as h,applyPointerOpacity as l}from"../shared/chartInteraction.js"
+import{appendCenterWeightedGradient as m,sanitizeGradientKey as f,SHAPE_STROKE_WIDTH as d}from"../shared/chartVisualStyle.js"
+import{useChartInteraction as u}from"../shared/useChartInteraction.js"
+import{defaultMargin as p,innerSize as g}from"../shared/chartUtils.js"
+function x({data:x,title:j="Change request funnel",description:k="Progression of CI change requests through approval stages this quarter.",height:y=340,compact:$=!1,onStageClick:v}){const C=e(null),w=u("Hover a stage for the count."),q=e(v)
+return q.current=v,r(()=>{const t=C.current
+if(!t)return
+const e=t.clientWidth||520,r=$?Math.min(y,300):y,i={...p,left:120},{width:a,height:u}=g(e,r,i),j=o(t)
+j.selectAll("*").remove(),j.attr("viewBox",`0 0 ${e} ${r}`)
+const k=j.append("defs")
+x.forEach((t,e)=>{const r=s[e%s.length]
+m(k,`funnel-${f(t.label)}`,r,$)})
+const v=j.append("g").attr("transform",`translate(${i.left},${i.top})`),F=n(x,t=>t.value)??0,I=u/x.length
+x.forEach((t,e)=>{const r=t.value/F*a,n=(a-r)/2,o=e*I+4,i=s[e%s.length]
+v.append("rect").attr("class","funnel-stage").attr("x",n).attr("y",o).attr("width",r).attr("height",I-8).attr("fill",`url(#funnel-${f(t.label)})`).attr("stroke",i).attr("stroke-width",d).attr("stroke-opacity",.35).attr("rx",6).datum(t),v.append("text").attr("x",-8).attr("y",o+(I-8)/2).attr("text-anchor","end").attr("dominant-baseline","middle").attr("font-size",11).attr("pointer-events","none").text(t.label),v.append("text").attr("x",n+r/2).attr("y",o+(I-8)/2).attr("text-anchor","middle").attr("dominant-baseline","middle").attr("font-size",12).attr("font-weight",600).attr("fill","#fff").attr("pointer-events","none").text(t.value)})
+const b=v.selectAll("rect.funnel-stage")
+h(b,{keyFn:t=>t.label,hintFn:t=>`${t.label}: ${t.value.toLocaleString()} requests`,...c(w),onClick:t=>q.current?.(t)})
+const z=w.registerFocusApply(()=>{l(b,t=>t.label,w.getFocusOpacity)})
+return()=>{z(),b.on("mouseenter mouseleave click",null)}},[$,x,y,w.getFocusOpacity,w.onHover,w.onHoverEnd,w.onPointerMove,w.onToggleSelect,w.registerFocusApply]),t(i,{title:j,description:k,height:$?Math.min(y,300):y,compact:$,...a(w),svgRef:C})}export{x as FunnelChart}

package/dist/D3/FunnelChart/types.d.ts

@@ -0,0 +1,12 @@
+export type FunnelStage = {
+    label: string;
+    value: number;
+};
+export type FunnelChartProps = {
+    data: FunnelStage[];
+    title?: string;
+    description?: string;
+    height?: number;
+    compact?: boolean;
+    onStageClick?: (stage: FunnelStage) => void;
+};

package/dist/D3/GanttTimeline/index.d.ts

@@ -0,0 +1,2 @@
+import type { GanttTimelineProps } from './types';
+export declare function GanttTimeline({ tasks, title, description, height, compact, onTaskClick }: Readonly<GanttTimelineProps>): import("react").JSX.Element;

package/dist/D3/GanttTimeline/index.js

@@ -0,0 +1,36 @@
+"use client";
+import{jsx as t}from"react/jsx-runtime"
+import{useRef as r,useMemo as e,useEffect as o}from"react"
+import{extent as i}from"d3-array"
+import{scaleTime as s,scaleBand as a,scaleOrdinal as n}from"d3-scale"
+import{select as h}from"d3-selection"
+import{timeParse as m,timeFormat as d}from"d3-time-format"
+import{chartPalette as c}from"../../tokens.stylex.js"
+import{ChartFrame as l}from"../shared/ChartFrame/index.js"
+import{ChartLegend as f}from"../shared/ChartLegend/index.js"
+import{ganttTimelineAxisLayout as p}from"../shared/chartAxisLayout/ganttTimeline.js"
+import{renderXAxis as g,renderYAxis as u}from"../shared/chartAxisLayout/render.js"
+import{chartFrameInteractionProps as j,chartPointerHandlers as k}from"../shared/chartBinding.js"
+import{bindChartPointer as w,applyPointerOpacity as x}from"../shared/chartInteraction.js"
+import{appendBarSeriesGradient as $,sanitizeGradientKey as y,SHAPE_STROKE_WIDTH as C}from"../shared/chartVisualStyle.js"
+import{useChartInteraction as b}from"../shared/useChartInteraction.js"
+import{useChartLegendToggle as v}from"../shared/useChartLegendToggle.js"
+import{innerSize as I}from"../shared/chartUtils.js"
+function L({tasks:L,title:O="Hardware change timeline",description:T="Scheduled maintenance and refresh windows for in-flight change records.",height:F=360,compact:M=!1,onTaskClick:S}){const A=r(null),B=b("Hover a bar for the change window."),D=r(S)
+D.current=S
+const H=e(()=>[...new Set(L.map(t=>t.group??"Other"))],[L]),{hiddenIds:G,visibleIds:R,toggle:U}=v(H),V=e(()=>H.filter(t=>R.includes(t)),[H,R]),Y=e(()=>L.filter(t=>V.includes(t.group??"Other")),[L,V])
+o(()=>{const t=A.current
+if(!t||0===Y.length)return
+const r=t.clientWidth||720,e=M?Math.min(F,320):F,o=p(M),l=o.margin,{width:f,height:j}=I(r,e,l),b=m("%Y-%m-%d"),v=Y.map(t=>({...t,startDate:b(t.start),endDate:b(t.end)})).filter(t=>t.startDate&&t.endDate),L=h(t)
+L.selectAll("*").remove(),L.attr("viewBox",`0 0 ${r} ${e}`)
+const O=L.append("defs")
+H.forEach((t,r)=>{const e=c[r%c.length]
+$(O,`gantt-${y(t)}`,e,M)})
+const T=L.append("g").attr("transform",`translate(${l.left},${l.top})`),S=s().domain(i(v.flatMap(t=>[t.startDate,t.endDate]))).range([0,f]),G=a().domain(v.map(t=>t.label)).range([0,j]).padding(.25),R=n().domain(H).range(H.map((t,r)=>c[r%c.length]))
+g(T,S,j,o.x,t=>t.ticks(M?4:6).tickFormat(d("%d %b"))),u(T,G,o.y)
+const U=T.selectAll("rect").data(v).join("rect").attr("x",t=>S(t.startDate)).attr("y",t=>G(t.label)??0).attr("width",t=>Math.max(4,S(t.endDate)-S(t.startDate))).attr("height",G.bandwidth()).attr("fill",t=>`url(#gantt-${y(t.group??"Other")})`).attr("stroke",t=>R(t.group??"Other")).attr("stroke-width",C).attr("stroke-opacity",.35).attr("rx",4)
+w(U,{keyFn:t=>t.id,hintFn:t=>`${t.label}: ${t.start} → ${t.end}`,...k(B),onClick:t=>D.current?.(t)})
+const V=B.registerFocusApply(()=>{x(U,t=>t.id,B.getFocusOpacity)})
+return()=>{V(),U.on("mouseenter mouseleave click",null)}},[M,H,F,B.getFocusOpacity,B.onHover,B.onHoverEnd,B.onPointerMove,B.onToggleSelect,B.registerFocusApply,L,Y])
+const q=e(()=>t(f,{ariaLabel:"Groups",hiddenIds:G,onToggle:U,items:H.map((t,r)=>({id:t,label:t,color:c[r%c.length]}))}),[H,G,U])
+return t(l,{title:O,description:T,height:M?Math.min(F,320):F,compact:M,...j(B),svgRef:A,legend:q})}export{L as GanttTimeline}

package/dist/D3/GanttTimeline/types.d.ts

@@ -0,0 +1,15 @@
+export type GanttTask = {
+    id: string;
+    label: string;
+    group?: string;
+    start: string;
+    end: string;
+};
+export type GanttTimelineProps = {
+    tasks: GanttTask[];
+    title?: string;
+    description?: string;
+    height?: number;
+    compact?: boolean;
+    onTaskClick?: (task: GanttTask) => void;
+};

package/dist/D3/GaugeChart/index.d.ts

@@ -0,0 +1,2 @@
+import type { GaugeChartProps } from './types';
+export declare function GaugeChart({ value, min, max, title, description, height, compact, label, unit, onClick }: Readonly<GaugeChartProps>): import("react").JSX.Element;

package/dist/D3/GaugeChart/index.js

@@ -0,0 +1,22 @@
+"use client";
+import{jsx as t}from"react/jsx-runtime"
+import{useRef as e,useEffect as o}from"react"
+import{scaleLinear as r}from"d3-scale"
+import{select as n}from"d3-selection"
+import{arc as i}from"d3-shape"
+import{chartPalette as a}from"../../tokens.stylex.js"
+import{ChartFrame as s}from"../shared/ChartFrame/index.js"
+import{chartFrameInteractionProps as m}from"../shared/chartBinding.js"
+import{sanitizeGradientKey as l,appendArcSeriesGradient as c,chartLineStrokeWidth as h}from"../shared/chartVisualStyle.js"
+import{useChartInteraction as p}from"../shared/useChartInteraction.js"
+function f({value:f,min:u=0,max:d=100,title:g="CMDB completeness",description:x="Percentage of in-scope assets with a complete CI record.",height:$=260,compact:v=!1,label:M="Complete records",unit:b="%",onClick:y}){const k=e(null),C=p(`Current completeness: ${f}${b}.`),j=e(y)
+return j.current=y,o(()=>{const t=k.current
+if(!t)return
+const e=t.clientWidth||420,o=v?Math.min($,220):$,s=Math.min(e,2*o)/2-12,m=`${M}: ${f}${b} (${u}–${d})`,p=n(t)
+p.selectAll("*").remove(),p.attr("viewBox",`0 0 ${e} ${o}`)
+const g=a[0],x=`gauge-${l(g)}`,y=p.append("defs")
+c(y,x,g,v)
+const w=p.append("g").attr("transform",`translate(${e/2},${o-8})`),z=r().domain([u,d]).range([-Math.PI/2,Math.PI/2]),B=i().innerRadius(.62*s).outerRadius(s).startAngle(-Math.PI/2).endAngle(Math.PI/2)
+w.append("path").attr("d",B).attr("fill","rgba(0,0,0,0.08)")
+const S=i().innerRadius(.62*s).outerRadius(s).startAngle(-Math.PI/2).endAngle(z(f)),I=w.append("path").attr("d",S).attr("fill",`url(#${x})`).attr("stroke",g).attr("stroke-width",h(v)).attr("stroke-linecap","round").attr("cursor","pointer").attr("role","button").attr("tabindex",0)
+return I.on("mouseenter",t=>{I.attr("opacity",.85),C.onHover("gauge",m,t)}).on("mousemove",t=>{C.onPointerMove(t)}).on("mouseleave",()=>{I.attr("opacity",1),C.onHoverEnd()}).on("click",()=>{C.onToggleSelect("gauge",m),j.current?.({value:f,min:u,max:d,label:M})}),w.append("text").attr("text-anchor","middle").attr("y",.15*-s).attr("font-size",v?24:32).attr("font-weight",700).attr("pointer-events","none").text(`${f}${b}`),w.append("text").attr("text-anchor","middle").attr("y",.08*s).attr("font-size",12).attr("fill","rgba(0,0,0,0.5)").attr("pointer-events","none").text(M),w.append("text").attr("x",-s).attr("y",18).attr("font-size",11).attr("fill","rgba(0,0,0,0.45)").text(String(u)),w.append("text").attr("x",s).attr("y",18).attr("text-anchor","end").attr("font-size",11).attr("fill","rgba(0,0,0,0.45)").text(String(d)),()=>{I.on("mouseenter mousemove mouseleave click",null)}},[v,$,C.onHover,C.onHoverEnd,C.onPointerMove,C.onToggleSelect,M,d,u,b,f]),t(s,{title:g,description:x,height:v?Math.min($,220):$,compact:v,...m(C),svgRef:k})}export{f as GaugeChart}

package/dist/D3/GaugeChart/types.d.ts

@@ -0,0 +1,17 @@
+export type GaugeChartProps = {
+    value: number;
+    min?: number;
+    max?: number;
+    title?: string;
+    description?: string;
+    height?: number;
+    compact?: boolean;
+    label?: string;
+    unit?: string;
+    onClick?: (payload: {
+        value: number;
+        min: number;
+        max: number;
+        label: string;
+    }) => void;
+};

package/dist/D3/HeatmapChart/heatmapLayout.d.ts

@@ -0,0 +1,28 @@
+import type { Selection } from 'd3-selection';
+export declare const AXIS_LABEL_STROKE = "#cbd5e1";
+export declare const AXIS_TITLE_FILL = "#f3f4f6";
+export declare function appendLabelBox(root: Selection<SVGGElement, unknown, null, undefined>, x: number, y: number, width: number, height: number, label: string, fontSize: number): void;
+export declare function computeHeatmapLayout(rows: string[], columns: string[], innerWidth: number, innerHeight: number, compact: boolean): {
+    axisTitleSize: number;
+    rowLabelWidth: number;
+    colLabelHeight: number;
+    colLabelWidth: number;
+    cellGap: number;
+    cellSize: number;
+    gridWidth: number;
+    gridHeight: number;
+    gridX: number;
+    gridY: number;
+    columnLabelY: number;
+    columnTitleY: number;
+    rowLabelX: number;
+    titleFontSize: number;
+    labelFontSize: number;
+    columnLabelFontSize: number;
+    cellPosition: (row: string, column: string) => {
+        x: number;
+        y: number;
+    };
+    rowCenterY: (row: string) => number;
+    columnCenterX: (column: string) => number;
+};

package/dist/D3/HeatmapChart/heatmapLayout.js

@@ -0,0 +1,11 @@
+import{styleChartText as t,chartAxisColors as e}from"../shared/chartAxis.js"
+import{heatmapAxisSpacing as i}from"../shared/chartAxisLayout/heatmap.js"
+const o="#eef2f7",l="#cbd5e1",n="#f3f4f6"
+function a(t,e,i=16){const o=.58*e
+return Math.ceil(Math.max(...t.map(t=>t.length*o))+i)}function r(i,n,a,r,h,s,c){i.append("rect").attr("x",n).attr("y",a).attr("width",r).attr("height",h).attr("fill",o).attr("stroke",l).attr("stroke-width",1).attr("rx",2)
+const d=s.split(/\s+/),b=d.length>1&&s.length>12?[d.slice(0,Math.ceil(d.length/2)).join(" "),d.slice(Math.ceil(d.length/2)).join(" ")]:[s],u=c+3,m=a+h/2-(b.length-1)*u/2,L=i.append("text").attr("x",n+r/2).attr("y",m).attr("text-anchor","middle").attr("dominant-baseline","middle").attr("pointer-events","none")
+t(L,{size:c,weight:500,fill:e.title}),b.forEach((t,e)=>{L.append("tspan").attr("x",n+r/2).attr("dy",0===e?0:u).text(t)})}function h(t,e,o,l,n){const r=i(n,t.length,e.length),{axisTitleSize:h,rowLabelWidthMin:s,colLabelHeight:c,rowTitleToLabels:d,rowLabelsToGrid:b,gridToColumnLabels:u,columnLabelsToTitle:m,columnLabelInset:L,gridTop:M}=r,f=2,x=n?10:11,g=Math.max(s,a(t,n?11:12)),w=Math.max(a(e,x,14),c+6),p=Math.max(w,Math.floor(Math.min((o-h-d-g-b-(e.length-1)*f)/e.length,(l-M-(u+c+m+h)-(t.length-1)*f)/t.length,n?58:72))),T=e.length*p+(e.length-1)*f,z=t.length*p+(t.length-1)*f,S=h+d+g+b,y=M,W=Math.max(28,p-2*L),Y=new Map(e.map((t,e)=>[t,e])),C=new Map(t.map((t,e)=>[t,e]))
+return{axisTitleSize:h,rowLabelWidth:g,colLabelHeight:c,colLabelWidth:W,cellGap:f,cellSize:p,gridWidth:T,gridHeight:z,gridX:S,gridY:y,columnLabelY:y+z+u,columnTitleY:y+z+u+c+m,rowLabelX:h+d,titleFontSize:n?11:12,labelFontSize:n?11:12,columnLabelFontSize:n?10:11,cellPosition(t,e){const i=Y.get(e)??0,o=C.get(t)??0
+return{x:S+i*(p+f),y:y+o*(p+f)}},rowCenterY(t){const e=C.get(t)??0
+return y+e*(p+f)+p/2},columnCenterX(t){const e=Y.get(t)??0
+return S+e*(p+f)+p/2}}}export{l as AXIS_LABEL_STROKE,n as AXIS_TITLE_FILL,r as appendLabelBox,h as computeHeatmapLayout}

package/dist/D3/HeatmapChart/index.d.ts

@@ -0,0 +1,2 @@
+import type { HeatmapChartProps } from './types';
+export declare function HeatmapChart({ data, rows, columns, title, description, height, compact, rowAxisLabel, columnAxisLabel, onCellClick }: Readonly<HeatmapChartProps>): import("react").JSX.Element;

package/dist/D3/HeatmapChart/index.js

@@ -0,0 +1,31 @@
+"use client";
+import{jsx as t}from"react/jsx-runtime"
+import{useRef as e,useEffect as i}from"react"
+import{extent as r}from"d3-array"
+import{scaleQuantize as o}from"d3-scale"
+import{select as n}from"d3-selection"
+import{heatmapScale as l}from"../../tokens.stylex.js"
+import{ChartFrame as a}from"../shared/ChartFrame/index.js"
+import{styleAxisTitle as s,chartFontFamily as c,chartAxisColors as m}from"../shared/chartAxis.js"
+import{heatmapChartMargin as h}from"../shared/chartAxisLayout/heatmap.js"
+import{chartFrameInteractionProps as d,chartPointerHandlers as f}from"../shared/chartBinding.js"
+import{bindChartPointer as u,applyPointerOpacity as p}from"../shared/chartInteraction.js"
+import{useChartInteraction as x}from"../shared/useChartInteraction.js"
+import{innerSize as g}from"../shared/chartUtils.js"
+import{computeHeatmapLayout as y,AXIS_TITLE_FILL as w,AXIS_LABEL_STROKE as $,appendLabelBox as b}from"./heatmapLayout.js"
+function L({data:L,rows:k,columns:j,title:C="Lifecycle by site",description:v="Server CI counts by lifecycle status and data centre site.",height:S=420,compact:z=!1,rowAxisLabel:F="Site",columnAxisLabel:I="Lifecycle status",onCellClick:A}){const Y=e(null),H=x("Hover a cell for the CI count."),M=e(A)
+return M.current=A,i(()=>{const t=Y.current
+if(!t)return
+const e=t.clientWidth||640,i=z?Math.min(S,320):S,a=h(z),{width:d,height:x}=g(e,i,a),C=n(t)
+C.selectAll("*").remove(),C.attr("viewBox",`0 0 ${e} ${i}`)
+const v=C.append("g").attr("transform",`translate(${a.left},${a.top})`),A=y(k,j,d,x,z),{axisTitleSize:W,rowLabelWidth:X,colLabelHeight:B,colLabelWidth:T,cellSize:P,gridX:R,gridY:U,gridWidth:q,gridHeight:D,columnLabelY:E,columnTitleY:G,rowLabelX:J,titleFontSize:K,labelFontSize:N,columnLabelFontSize:O,cellPosition:Q,rowCenterY:V,columnCenterX:Z}=A,_=r(L,t=>t.value),tt=o().domain(_).range([...l]),et=t=>{const e=tt.range().indexOf(tt(t))
+return e<0?0:e/Math.max(1,tt.range().length-1)}
+v.append("rect").attr("x",0).attr("y",U).attr("width",W).attr("height",D).attr("fill",w).attr("stroke",$).attr("stroke-width",1)
+const it=v.append("text").attr("transform",`translate(${W/2}, ${U+D/2}) rotate(-90)`).attr("text-anchor","middle").attr("dominant-baseline","middle").attr("letter-spacing","0.06em").text(F.toUpperCase())
+s(it,K).attr("font-weight",700),k.forEach(t=>{b(v,J,V(t)-B/2,X,B,t,N)}),j.forEach(t=>{b(v,Z(t)-T/2,E,T,B,t,O)}),v.append("rect").attr("x",R).attr("y",G).attr("width",q).attr("height",W).attr("fill",w).attr("stroke",$).attr("stroke-width",1)
+const rt=v.append("text").attr("x",R+q/2).attr("y",G+W/2).attr("text-anchor","middle").attr("dominant-baseline","middle").attr("letter-spacing","0.06em").text(I.toUpperCase())
+s(rt,K).attr("font-weight",700)
+const ot=v.selectAll("rect.cell").data(L).join("rect").attr("class","cell").attr("x",t=>Q(t.row,t.column).x).attr("y",t=>Q(t.row,t.column).y).attr("width",P).attr("height",P).attr("fill",t=>tt(t.value)).attr("stroke","#fff").attr("stroke-width",2)
+u(ot,{keyFn:t=>`${t.row}:${t.column}`,hintFn:t=>`${t.row} · ${t.column}: ${t.value.toLocaleString()} CIs`,...f(H),onClick:t=>M.current?.(t)})
+const nt=v.selectAll("text.value").data(L).join("text").attr("class","value").attr("x",t=>Q(t.row,t.column).x+P/2).attr("y",t=>Q(t.row,t.column).y+P/2).attr("text-anchor","middle").attr("dominant-baseline","middle").attr("font-family",c).attr("font-size",z?14:16).attr("font-weight",700).attr("fill",t=>et(t.value)>=.5?"#fff":m.title).style("user-select","none").attr("pointer-events","none").text(t=>t.value),lt=H.registerFocusApply(()=>{p(ot,t=>`${t.row}:${t.column}`,H.getFocusOpacity),nt.attr("opacity",t=>1===H.getFocusOpacity(`${t.row}:${t.column}`)?1:.55)})
+return()=>{lt(),ot.on("mouseenter mouseleave click",null)}},[I,j,z,L,S,H.getFocusOpacity,H.onHover,H.onHoverEnd,H.onPointerMove,H.onToggleSelect,H.registerFocusApply,F,k]),t(a,{title:C,description:v,height:z?Math.min(S,320):S,compact:z,...d(H),svgRef:Y})}export{L as HeatmapChart}

package/dist/D3/HeatmapChart/types.d.ts

@@ -0,0 +1,17 @@
+export type HeatmapCell = {
+    row: string;
+    column: string;
+    value: number;
+};
+export type HeatmapChartProps = {
+    data: HeatmapCell[];
+    rows: string[];
+    columns: string[];
+    title?: string;
+    description?: string;
+    height?: number;
+    compact?: boolean;
+    rowAxisLabel?: string;
+    columnAxisLabel?: string;
+    onCellClick?: (cell: HeatmapCell) => void;
+};

package/dist/D3/KpiCard/index.d.ts

@@ -0,0 +1,2 @@
+import type { KpiCardProps } from './types';
+export declare function KpiCard({ metrics, title, description, compact, onMetricClick }: Readonly<KpiCardProps>): import("react").JSX.Element;

package/dist/D3/KpiCard/index.js

@@ -0,0 +1,12 @@
+"use client";
+import{jsxs as e,jsx as n}from"react/jsx-runtime"
+import*as o from"@stylexjs/stylex"
+import{chartPalette as r}from"../../tokens.stylex.js"
+import{ChartTooltip as i}from"../shared/ChartTooltip/index.js"
+import{useChartInteraction as t}from"../shared/useChartInteraction.js"
+import{Sparkline as l}from"../shared/Sparkline/index.js"
+import{styles as c}from"./index.styles.js"
+function d(e){const n=`${e.value.toLocaleString()}${e.unit?` ${e.unit}`:""}`
+return void 0===e.delta?`${e.label}\n${n}`:`${e.label}\n${n}\n${e.delta>=0?"+":""}${e.delta}% ${e.deltaLabel??""}`}function s({metric:i,index:t,isHovered:d,isSelected:s,onHover:a,onPointerMove:m,onHoverEnd:u,onToggleSelect:v,onClick:h}){const p=i.delta,f=void 0===p?c.deltaNeutral:p>=0?c.deltaUp:c.deltaDown,$=void 0===p?"":p>=0?"+":""
+return e("article",{...o.props(c.card,c.cardInteractive,d?c.cardHovered:null,s?c.cardSelected:null),"aria-label":i.label,role:"button",tabIndex:0,onMouseEnter:a,onMouseMove:m,onMouseLeave:u,onClick(){v(),h?.(i)},onKeyDown(e){"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),v(),h?.(i))},children:[n("span",{...o.props(c.label),children:i.label}),e("div",{...o.props(c.valueRow),children:[n("span",{...o.props(c.value),children:i.value.toLocaleString()}),i.unit?n("span",{...o.props(c.unit),children:i.unit}):null]}),void 0!==p?e("span",{...o.props(f),children:[$,p,"% ",i.deltaLabel??""]}):null,i.sparkline?n(l,{values:i.sparkline,color:r[t%r.length]}):null]})}function a({metrics:r,title:l="CMDB KPIs",description:a="Headline configuration management metrics with recent trend.",compact:m=!1,onMetricClick:u}){const v=t("Hover a KPI card for details.")
+return e("div",{...o.props(c.root),children:[e("div",{...o.props(c.header),children:[n("h4",{...o.props(c.headerTitle),children:l}),m?null:n("p",{...o.props(c.headerDescription),children:a})]}),e("div",{ref:v.setTooltipContainer,...o.props(c.grid,c.gridRelative,m?c.gridCompact:null),children:[r.map((e,o)=>n(s,{metric:e,index:o,isHovered:v.getHoverKey()===e.id,isSelected:v.getSelectedKey()===e.id,onHover:n=>v.onHover(e.id,d(e),n.nativeEvent),onPointerMove:e=>v.onPointerMove(e.nativeEvent),onHoverEnd:v.onHoverEnd,onToggleSelect:()=>v.onToggleSelect(e.id,`${e.label}: ${e.value.toLocaleString()}`),onClick:u},e.id)),n(i,{tooltip:v.tooltip})]}),n("span",{...o.props(c.footerHint,v.isPinned?c.footerHintPinned:null),children:v.hint})]})}export{a as KpiCard}

package/dist/D3/KpiCard/index.styles.d.ts

@@ -0,0 +1,108 @@
+import * as stylex from '@stylexjs/stylex';
+export declare const styles: Readonly<{
+    readonly root: Readonly<{
+        readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+        readonly flexDirection: stylex.StyleXClassNameFor<"flexDirection", "column">;
+        readonly gap: stylex.StyleXClassNameFor<"gap", "1.2rem">;
+        readonly width: stylex.StyleXClassNameFor<"width", "100%">;
+    }>;
+    readonly header: Readonly<{
+        readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+        readonly flexDirection: stylex.StyleXClassNameFor<"flexDirection", "column">;
+        readonly gap: stylex.StyleXClassNameFor<"gap", "0.4rem">;
+    }>;
+    readonly headerTitle: Readonly<{
+        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", "1.8rem">;
+        readonly fontWeight: stylex.StyleXClassNameFor<"fontWeight", "600">;
+        readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", "1.2">;
+        readonly margin: stylex.StyleXClassNameFor<"margin", 0>;
+    }>;
+    readonly headerDescription: Readonly<{
+        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", "1.3rem">;
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+        readonly margin: stylex.StyleXClassNameFor<"margin", 0>;
+    }>;
+    readonly grid: Readonly<{
+        readonly display: stylex.StyleXClassNameFor<"display", "grid">;
+        readonly gridTemplateColumns: stylex.StyleXClassNameFor<"gridTemplateColumns", "repeat(auto-fit, minmax(18rem, 1fr))">;
+        readonly gap: stylex.StyleXClassNameFor<"gap", "1.2rem">;
+    }>;
+    readonly gridRelative: Readonly<{
+        readonly position: stylex.StyleXClassNameFor<"position", "relative">;
+    }>;
+    readonly gridCompact: Readonly<{
+        readonly gridTemplateColumns: stylex.StyleXClassNameFor<"gridTemplateColumns", "1fr">;
+        readonly gap: stylex.StyleXClassNameFor<"gap", "0.8rem">;
+    }>;
+    readonly card: Readonly<{
+        readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+        readonly flexDirection: stylex.StyleXClassNameFor<"flexDirection", "column">;
+        readonly gap: stylex.StyleXClassNameFor<"gap", "0.8rem">;
+        readonly padding: stylex.StyleXClassNameFor<"padding", "1.6rem">;
+        readonly borderWidth: stylex.StyleXClassNameFor<"borderWidth", "1px">;
+        readonly borderStyle: stylex.StyleXClassNameFor<"borderStyle", "solid">;
+        readonly borderColor: stylex.StyleXClassNameFor<"borderColor", string>;
+        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", "0.8rem">;
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
+    }>;
+    readonly cardInteractive: Readonly<{
+        readonly cursor: stylex.StyleXClassNameFor<"cursor", "pointer">;
+        readonly transitionProperty: stylex.StyleXClassNameFor<"transitionProperty", "box-shadow, transform">;
+        readonly transitionDuration: stylex.StyleXClassNameFor<"transitionDuration", "0.15s">;
+        readonly transitionTimingFunction: stylex.StyleXClassNameFor<"transitionTimingFunction", "ease">;
+    }>;
+    readonly cardHovered: Readonly<{
+        readonly borderColor: stylex.StyleXClassNameFor<"borderColor", string>;
+        readonly boxShadow: stylex.StyleXClassNameFor<"boxShadow", "0 4px 14px rgba(0, 0, 0, 0.08)">;
+    }>;
+    readonly cardSelected: Readonly<{
+        readonly borderColor: stylex.StyleXClassNameFor<"borderColor", string>;
+        readonly boxShadow: stylex.StyleXClassNameFor<"boxShadow", "0 0 0 2px rgba(0, 0, 0, 0.08)">;
+    }>;
+    readonly label: Readonly<{
+        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", "1.2rem">;
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+        readonly fontWeight: stylex.StyleXClassNameFor<"fontWeight", "500">;
+    }>;
+    readonly valueRow: Readonly<{
+        readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+        readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "baseline">;
+        readonly gap: stylex.StyleXClassNameFor<"gap", "0.4rem">;
+    }>;
+    readonly value: Readonly<{
+        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", "2.4rem">;
+        readonly fontWeight: stylex.StyleXClassNameFor<"fontWeight", "700">;
+        readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", "1.1">;
+    }>;
+    readonly unit: Readonly<{
+        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", "1.3rem">;
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+    }>;
+    readonly deltaUp: Readonly<{
+        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", "1.2rem">;
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+        readonly fontWeight: stylex.StyleXClassNameFor<"fontWeight", "600">;
+    }>;
+    readonly deltaDown: Readonly<{
+        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", "1.2rem">;
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+        readonly fontWeight: stylex.StyleXClassNameFor<"fontWeight", "600">;
+    }>;
+    readonly deltaNeutral: Readonly<{
+        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", "1.2rem">;
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+    }>;
+    readonly sparkline: Readonly<{
+        readonly width: stylex.StyleXClassNameFor<"width", "100%">;
+        readonly height: stylex.StyleXClassNameFor<"height", "3.2rem">;
+        readonly display: stylex.StyleXClassNameFor<"display", "block">;
+    }>;
+    readonly footerHint: Readonly<{
+        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", "1.2rem">;
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+    }>;
+    readonly footerHintPinned: Readonly<{
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+        readonly fontWeight: stylex.StyleXClassNameFor<"fontWeight", "500">;
+    }>;
+}>;

package/dist/D3/KpiCard/index.styles.js

@@ -0,0 +1,3 @@
+import"@stylexjs/stylex"
+const k={root:{k1xSpc:"_78zum5",kXwgrk:"_dt5ytf",kOIVth:"_bhn5rf",kzqmXN:"_h8yej3",$$css:!0},header:{k1xSpc:"_78zum5",kXwgrk:"_dt5ytf",kOIVth:"_1neeqzj",$$css:!0},headerTitle:{kGuDYH:"_1elmx46",k63SB2:"_1s688f",kLWn49:"_1u7k74",kogj98:"_1ghz6dp",$$css:!0},headerDescription:{kGuDYH:"_1xebwwb",kMwMTN:"_qdq3cf",kogj98:"_1ghz6dp",$$css:!0},grid:{k1xSpc:"_rvj5dj",kumcoG:"_19vp1m2",kOIVth:"_bhn5rf",$$css:!0},gridRelative:{kVAEAm:"_1n2onr6",$$css:!0},gridCompact:{kumcoG:"_1y6fwsi",kOIVth:"_1rq4zhh",$$css:!0},card:{k1xSpc:"_78zum5",kXwgrk:"_dt5ytf",kOIVth:"_1rq4zhh",kmVPX3:"_qo3fwf",kMzoRj:"_mkeg23",ksu8eU:"_1y0btm7",kVAM5u:"_1yf9t2n",kaIpWk:"_1o5ta1t",kWkggS:"_1a1xyot",$$css:!0},cardInteractive:{kkrTdU:"_1ypdohk",k1ekBW:"_hd6ntr",kIyJzY:"_x6bhzk",kAMwcw:"_wji4o3",$$css:!0},cardHovered:{kVAM5u:"_45n503",kGVxlE:"_14nb6pt",$$css:!0},cardSelected:{kVAM5u:"_45n503",kGVxlE:"_1rvjved",$$css:!0},label:{kGuDYH:"_vewgow",kMwMTN:"_qdq3cf",k63SB2:"_k50ysn",$$css:!0},valueRow:{k1xSpc:"_78zum5",kGNEyG:"_1pha0wt",kOIVth:"_1neeqzj",$$css:!0},value:{kGuDYH:"_19orhxu",k63SB2:"_1xlr1w8",kLWn49:"_1159mfc",$$css:!0},unit:{kGuDYH:"_1xebwwb",kMwMTN:"_qdq3cf",$$css:!0},deltaUp:{kGuDYH:"_vewgow",kMwMTN:"_5zgiyw",k63SB2:"_1s688f",$$css:!0},deltaDown:{kGuDYH:"_vewgow",kMwMTN:"_67euey",k63SB2:"_1s688f",$$css:!0},deltaNeutral:{kGuDYH:"_vewgow",kMwMTN:"_qdq3cf",$$css:!0},footerHint:{kGuDYH:"_vewgow",kMwMTN:"_qdq3cf",$$css:!0},footerHintPinned:{kMwMTN:"_4iqcr8",k63SB2:"_k50ysn",$$css:!0}}
+export{k as styles}

package/dist/D3/KpiCard/types.d.ts

@@ -0,0 +1,16 @@
+export type KpiMetric = {
+    id: string;
+    label: string;
+    value: number;
+    unit?: string;
+    delta?: number;
+    deltaLabel?: string;
+    sparkline?: number[];
+};
+export type KpiCardProps = {
+    metrics: KpiMetric[];
+    title?: string;
+    description?: string;
+    compact?: boolean;
+    onMetricClick?: (metric: KpiMetric) => void;
+};

package/dist/D3/LineChart/index.d.ts

@@ -0,0 +1,2 @@
+import type { LineChartProps } from './types';
+export declare function LineChart({ series, title, description, height, compact, onPointClick }: Readonly<LineChartProps>): import("react").JSX.Element;