ioloco-charts 0.1.1 → 0.2.2

package/dist/D3/BarChart/index.js

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

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

@@ -1,6 +1,7 @@
 export type BarDatum = {
     label: string;
     value: number;
+    color?: string;
 };
 export type BarChartProps = {
     data: BarDatum[];

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

@@ -1,2 +1,2 @@
 import type { StackedBarChartProps } from './types';
-export declare function StackedBarChart({ data, seriesKeys, title, description, height, compact, valueLabel, hoverHint, onSegmentClick }: Readonly<StackedBarChartProps>): import("react").JSX.Element;
+export declare function StackedBarChart({ data, seriesKeys, seriesColors, title, description, height, compact, valueLabel, hoverHint, onSegmentClick }: Readonly<StackedBarChartProps>): import("react").JSX.Element;

package/dist/D3/StackedBarChart/index.js

@@ -1,40 +1,40 @@
 "use client";
-import{jsx as t}from"react/jsx-runtime"
-import{useRef as r,useMemo as e,useEffect as o}from"react"
-import{max as s}from"d3-array"
-import{scaleBand as a,scaleLinear as i,scaleOrdinal as n}from"d3-scale"
-import{select as c}from"d3-selection"
-import{stack as m}from"d3-shape"
+import{jsx as r}from"react/jsx-runtime"
+import{useRef as e,useMemo as t,useCallback as o,useEffect as s}from"react"
+import{max as a}from"d3-array"
+import{scaleBand as i,scaleLinear as n,scaleOrdinal as c}from"d3-scale"
+import{select as m}from"d3-selection"
+import{stack as l}from"d3-shape"
 import{chartPalette as d}from"../../tokens.stylex.js"
 import{ChartFrame as h}from"../shared/ChartFrame/index.js"
-import{ChartLegend as l}from"../shared/ChartLegend/index.js"
-import{renderXAxis as f,renderYAxis as p}from"../shared/chartAxisLayout/render.js"
-import{stackedBarChartAxisLayout as g}from"../shared/chartAxisLayout/stackedBarChart.js"
-import{chartFrameInteractionProps as u,chartPointerHandlers as j}from"../shared/chartBinding.js"
-import{bindChartPointer as k,applyPointerOpacity as y}from"../shared/chartInteraction.js"
-import{formatChartHint as $}from"../shared/chartLabels.js"
-import{useChartInteraction as b}from"../shared/useChartInteraction.js"
-import{useChartLegendToggle as x}from"../shared/useChartLegendToggle.js"
-import{innerSize as v}from"../shared/chartUtils.js"
-import{appendBarSeriesGradient as C,sanitizeGradientKey as L,SHAPE_STROKE_WIDTH as w}from"../shared/chartVisualStyle.js"
-function I(t){const r=new Set
-for(const e of t)for(const t of Object.keys(e.segments))r.add(t)
-return[...r]}function S({data:S,seriesKeys:B,title:F="Stacked bar chart",description:A,height:H=320,compact:M=!1,valueLabel:T,hoverHint:K="Hover a segment for details.",onSegmentClick:O}){const R=r(null),U=b(K),V=r(O)
-V.current=O
-const q=e(()=>B??I(S),[S,B]),{hiddenIds:z,visibleIds:D,toggle:E}=x(q),G=e(()=>q.filter(t=>D.includes(t)),[q,D])
-o(()=>{const t=R.current
-if(!t||0===G.length)return
-const r=S.map(t=>({label:t.label,...t.segments})),e=t.clientWidth||640,o=M?Math.min(H,280):H,h=g(M),l=h.margin,{width:u,height:b}=v(e,o,l),x=c(t)
-x.selectAll("*").remove(),x.attr("viewBox",`0 0 ${e} ${o}`)
-const I=x.append("defs")
-q.forEach((t,r)=>{if(!G.includes(t))return
-const e=d[r%d.length]
-C(I,`stacked-${L(t)}`,e,M)})
-const B=x.append("g").attr("transform",`translate(${l.left},${l.top})`),F=a().domain(r.map(t=>t.label)).range([0,u]).padding(.25),A=m().keys(G)(r),K=i().domain([0,s(A,t=>s(t,t=>t[1])??0)??0]).nice().range([b,0]),O=n().domain(q).range(q.map((t,r)=>d[r%d.length]))
-f(B,F,b,h.x),p(B,K,h.y),B.selectAll("g.layer").data(A).join("g").attr("class","layer").selectAll("rect").data(t=>t.map(r=>({...r,key:t.key}))).join("rect").attr("x",t=>F(t.data.label)??0).attr("y",t=>K(t[1])).attr("height",t=>K(t[0])-K(t[1])).attr("width",F.bandwidth()).attr("fill",t=>`url(#stacked-${L(t.key)})`).attr("stroke",t=>O(t.key)).attr("stroke-width",w).attr("stroke-opacity",.3)
-const z=B.selectAll("g.layer rect")
-k(z,{keyFn:t=>`${t.data.label}:${t.key}`,hintFn:t=>$(`${t.data.label} · ${t.key}`,t[1]-t[0],T),...j(U),onClick:t=>V.current?.({label:t.data.label,segment:t.key,value:t[1]-t[0]})})
-const D=U.registerFocusApply(()=>{y(z,t=>`${t.data.label}:${t.key}`,U.getFocusOpacity)})
-return()=>{D(),z.on("mouseenter mouseleave click",null)}},[M,S,H,U.getFocusOpacity,U.onHover,U.onHoverEnd,U.onPointerMove,U.onToggleSelect,U.registerFocusApply,K,T,q,G])
-const J=e(()=>t(l,{ariaLabel:"Series",hiddenIds:z,onToggle:E,items:q.map((t,r)=>({id:t,label:t,color:d[r%d.length]}))}),[z,q,E])
-return t(h,{title:F,description:A,height:M?Math.min(H,280):H,compact:M,...u(U),svgRef:R,legend:J})}export{S as StackedBarChart}
+import{ChartLegend as f}from"../shared/ChartLegend/index.js"
+import{renderXAxis as p,renderYAxis as g}from"../shared/chartAxisLayout/render.js"
+import{stackedBarChartAxisLayout as u}from"../shared/chartAxisLayout/stackedBarChart.js"
+import{chartFrameInteractionProps as j,chartPointerHandlers as k}from"../shared/chartBinding.js"
+import{bindChartPointer as y,applyPointerOpacity as $}from"../shared/chartInteraction.js"
+import{formatChartHint as b}from"../shared/chartLabels.js"
+import{useChartInteraction as x}from"../shared/useChartInteraction.js"
+import{useChartLegendToggle as v}from"../shared/useChartLegendToggle.js"
+import{innerSize as C}from"../shared/chartUtils.js"
+import{appendBarSeriesGradient as L,sanitizeGradientKey as w,SHAPE_STROKE_WIDTH as I}from"../shared/chartVisualStyle.js"
+function S(r){const e=new Set
+for(const t of r)for(const r of Object.keys(t.segments))e.add(r)
+return[...e]}function B({data:B,seriesKeys:F,seriesColors:A,title:H="Stacked bar chart",description:M,height:T=320,compact:K=!1,valueLabel:O,hoverHint:R="Hover a segment for details.",onSegmentClick:U}){const V=e(null),q=x(R),z=e(U)
+z.current=U
+const D=t(()=>F??S(B),[B,F]),{hiddenIds:E,visibleIds:G,toggle:J}=v(D),N=t(()=>D.filter(r=>G.includes(r)),[D,G]),P=o((r,e)=>A?.[r]??d[e%d.length],[A])
+s(()=>{const r=V.current
+if(!r||0===N.length)return
+const e=B.map(r=>({label:r.label,...r.segments})),t=r.clientWidth||640,o=K?Math.min(T,280):T,s=u(K),d=s.margin,{width:h,height:f}=C(t,o,d),j=m(r)
+j.selectAll("*").remove(),j.attr("viewBox",`0 0 ${t} ${o}`)
+const x=j.append("defs")
+D.forEach((r,e)=>{if(!N.includes(r))return
+const t=P(r,e)
+L(x,`stacked-${w(r)}`,t,K)})
+const v=j.append("g").attr("transform",`translate(${d.left},${d.top})`),S=i().domain(e.map(r=>r.label)).range([0,h]).padding(.25),F=l().keys(N)(e),A=n().domain([0,a(F,r=>a(r,r=>r[1])??0)??0]).nice().range([f,0]),H=c().domain(D).range(D.map((r,e)=>P(r,e)))
+p(v,S,f,s.x),g(v,A,s.y),v.selectAll("g.layer").data(F).join("g").attr("class","layer").selectAll("rect").data(r=>r.map(e=>({...e,key:r.key}))).join("rect").attr("x",r=>S(r.data.label)??0).attr("y",r=>A(r[1])).attr("height",r=>A(r[0])-A(r[1])).attr("width",S.bandwidth()).attr("fill",r=>`url(#stacked-${w(r.key)})`).attr("stroke",r=>H(r.key)).attr("stroke-width",I).attr("stroke-opacity",.3)
+const M=v.selectAll("g.layer rect")
+y(M,{keyFn:r=>`${r.data.label}:${r.key}`,hintFn:r=>b(`${r.data.label} · ${r.key}`,r[1]-r[0],O),...k(q),onClick:r=>z.current?.({label:r.data.label,segment:r.key,value:r[1]-r[0]})})
+const R=q.registerFocusApply(()=>{$(M,r=>`${r.data.label}:${r.key}`,q.getFocusOpacity)})
+return()=>{R(),M.on("mouseenter mouseleave click",null)}},[P,K,B,T,q.getFocusOpacity,q.onHover,q.onHoverEnd,q.onPointerMove,q.onToggleSelect,q.registerFocusApply,R,O,D,A,N])
+const Q=t(()=>r(f,{ariaLabel:"Series",hiddenIds:E,onToggle:J,items:D.map((r,e)=>({id:r,label:r,color:P(r,e)}))}),[P,E,D,J])
+return r(h,{title:H,description:M,height:K?Math.min(T,280):T,compact:K,...j(q),svgRef:V,legend:Q})}export{B as StackedBarChart}

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

@@ -5,6 +5,8 @@ export type StackedBarRow = {
 export type StackedBarChartProps = {
     data: StackedBarRow[];
     seriesKeys?: string[];
+    /** Optional color per series key; falls back to the default chart palette. */
+    seriesColors?: Record<string, string>;
     title?: string;
     description?: string;
     height?: number;

package/dist/D3/index.d.ts

@@ -26,8 +26,6 @@ export { TreemapChart } from './TreemapChart';
 export type { TreemapChartProps, TreemapNode } from './TreemapChart/types';
 export { SparklineChart } from './SparklineChart';
 export type { SparklineChartProps, SparklineSeries } from './SparklineChart/types';
-export { KpiCard } from './KpiCard';
-export type { KpiCardProps, KpiMetric } from './KpiCard/types';
 export { RelationshipDiagram, type DependencyGraph, type DependencyLink, type DependencyNode, type DependencyNodeType, type DependencyRelationship, type RelationshipDiagramProps } from './RelationshipDiagram';
 export { ChartFrame, type ChartFrameProps } from './shared/ChartFrame';
 export { ChartLegend, type ChartLegendItem, type ChartLegendProps } from './shared/ChartLegend';

package/dist/index.js

@@ -12,7 +12,6 @@ export{GanttTimeline}from"./D3/GanttTimeline/index.js"
 export{SankeyChart}from"./D3/SankeyChart/index.js"
 export{TreemapChart}from"./D3/TreemapChart/index.js"
 export{SparklineChart}from"./D3/SparklineChart/index.js"
-export{KpiCard}from"./D3/KpiCard/index.js"
 export{RelationshipDiagram}from"./D3/RelationshipDiagram/index.js"
 export{ChartFrame}from"./D3/shared/ChartFrame/index.js"
 export{ChartLegend}from"./D3/shared/ChartLegend/index.js"

package/dist/ioloco-charts.css

@@ -1 +1 @@
-@layer priority1{._q7jof,:root{--_3kibph:#0000001f;--_nu89q3:var(--blackWhiteColor);--_nlcxv4:#0000008c;--_1l3ajwk:#374151;--_dtq5hu:#374151;--_i53b70:#00c595;--_1e1ve05:#00bfff;--_s8vpk3:#f57373;--_1c781:orange;--_yoxkkg:var(--secondaryColor);--_i86ma6:var(--secondaryColor);--_1vga2en:var(--quaternaryColor);--_1jrvoj:#0000001f;--_1w671vd:var(--blackWhiteColor);--_1de526y:#374151}._1jknjb,:root{--color-primary-50:#f9fafb;--color-primary-100:#f3f4f6;--color-primary-200:#e5e7eb;--color-primary-300:#d1d5db;--color-primary-400:#9ca3af;--color-primary-500:#6b7280;--color-primary-600:#4b5563;--color-primary-700:#374151;--color-primary-800:#1f2937;--color-primary-900:#000;--color-secondary-50:#f0fdfa;--color-secondary-100:#ccfbf1;--color-secondary-200:#99f6e4;--color-secondary-300:#5eead4;--color-secondary-400:#2dd4bf;--color-secondary-500:#00c595;--color-secondary-600:#00a082;--color-secondary-700:#007a6b;--color-secondary-800:#005d55;--color-secondary-900:#004d47;--color-tertiary-50:#f0f9ff;--color-tertiary-100:#e0f2fe;--color-tertiary-200:#bae6fd;--color-tertiary-300:#7dd3fc;--color-tertiary-400:#38bdf8;--color-tertiary-500:#00bfff;--color-tertiary-600:#0ea5e9;--color-tertiary-700:#0284c7;--color-tertiary-800:#0369a1;--color-tertiary-900:#0c4a6e;--color-quaternary-50:#fef7f7;--color-quaternary-100:#feeaea;--color-quaternary-200:#fecaca;--color-quaternary-300:#fca5a5;--color-quaternary-400:#f87171;--color-quaternary-500:#f57373;--color-quaternary-600:#ef4444;--color-quaternary-700:#dc2626;--color-quaternary-800:#b91c1c;--color-quaternary-900:#991b1b;--color-quinary-50:#fff7ed;--color-quinary-100:#ffedd5;--color-quinary-200:#fed7aa;--color-quinary-300:#fdba74;--color-quinary-400:#fb923c;--color-quinary-500:orange;--color-quinary-600:#ff8c00;--color-quinary-700:#e67e00;--color-quinary-800:#cc7000;--color-quinary-900:#b36200;--primaryColor:var(--color-primary-900);--secondaryColor:var(--color-secondary-500);--tertiaryColor:var(--color-tertiary-500);--quaternaryColor:var(--color-quaternary-500);--quinaryColor:var(--color-quinary-500);--blackWhiteColor:#fff;--whiteBlackColor:#000;--disabledColor:#0000001a}}@layer priority2{._1ghz6dp{margin:0}._kaxd7b{padding:.6rem .9rem}._3vcqe7{padding:1.2rem}._qo3fwf{padding:1.6rem}}@layer priority3{._r1djjy{border-color:var(--_1jrvoj)}._1yf9t2n{border-color:var(--_3kibph)}._45n503{border-color:var(--_yoxkkg)}._1xh8lfz{border-radius:.2rem}._18jy0o0{border-radius:.4rem}._9mmeec{border-radius:.6rem}._1o5ta1t{border-radius:.8rem}._1e6avla{border-radius:999px}._1y0btm7{border-style:solid}._mkeg23{border-width:1px}._73f2yu{gap:.35rem}._1neeqzj{gap:.4rem}._praio3{gap:.55rem}._13z6uf9{gap:.5rem}._1p549t4{gap:.6rem 1rem}._rpnz5g{gap:.8rem 1.6rem}._1rq4zhh{gap:.8rem}._bhn5rf{gap:1.2rem}._8fetqu{gap:1rem}._1uexzyd{margin-left:-.3rem;margin-right:-.3rem}._b3r6kr{overflow:hidden}._3rcno1{padding-top:.2rem;padding-bottom:.2rem}._11pq3io{padding-left:.3rem;padding-right:.3rem}._mqliwb{text-decoration:line-through}}@layer priority4{._1winvzj{-webkit-user-select:none}._1pha0wt{align-items:baseline}._6s0dn4{align-items:center}._1cy8zhl{align-items:flex-start}._1asp76r{background-color:var(--_1w671vd)}._1a1xyot{background-color:var(--_nu89q3)}._1rvjved{box-shadow:0 0 0 2px #00000014}._14nb6pt{box-shadow:0 4px 14px #00000014}._1xa3opb{box-shadow:0 6px 18px #0000001f}._gnmr2x{color:var(--_1de526y)}._67euey{color:var(--_1vga2en)}._5zgiyw{color:var(--_i86ma6)}._qdq3cf{color:var(--_nlcxv4)}._4iqcr8{color:var(--_yoxkkg)}._1jm3nie{cursor:grab}._1ypdohk{cursor:pointer}._1lliihq{display:block}._78zum5{display:flex}._rvj5dj{display:grid}._dt5ytf{flex-direction:column}._2lah0s{flex-shrink:0}._1a02dak{flex-wrap:wrap}._rlpt6b{font-family:var(--font-inter,inter,Inter,system-ui,-apple-system,BlinkMacSystemFont,sans-serif)}._1hptrd9{font-size:1.1rem}._vewgow{font-size:1.2rem}._1xebwwb{font-size:1.3rem}._1elmx46{font-size:1.8rem}._19orhxu{font-size:2.4rem}._k50ysn{font-weight:500}._1s688f{font-weight:600}._1xlr1w8{font-weight:700}._1y6fwsi{grid-template-columns:1fr}._1de81ps{grid-template-columns:minmax(10rem,14rem) 1fr}._17b3u6i{grid-template-columns:minmax(8rem,10rem) 1fr}._19vp1m2{grid-template-columns:repeat(auto-fit,minmax(18rem,1fr))}._1qughib{justify-content:space-between}._1159mfc{line-height:1.1}._1u7k74{line-height:1.2}._37zpob{line-height:1.4}._3onkmb{opacity:.35}._yd83as{opacity:.45}._47corl{pointer-events:none}._10l6tqk{position:absolute}._1n2onr6{position:relative}._tuk9sc{transform:translate(12px,-50%)}._x6bhzk{transition-duration:.15s}._hd6ntr{transition-property:box-shadow,transform}._npjden{transition-property:opacity,background-color}._wji4o3{transition-timing-function:ease}._87ps6o{-webkit-user-select:none;user-select:none}._eaf4i8{white-space:normal}._1fj9vlw{white-space:pre-line}._htitgo{z-index:2}._ddrp5s:hover{background-color:#0000000a}}@layer priority5{._1lut4zz{height:.8rem}._1l36t39{height:1rem}._1r7j5eq{height:3.2rem}._1p62t0q{height:42rem}._1i2h5o5{margin-bottom:.15rem}._yccheo{margin-bottom:.4rem}._dj266r{margin-top:0}._owlazn{max-width:24rem}._1sfyvwd{min-height:3.2rem}._1j9c18f{min-height:36rem}._17zuyli{min-height:42rem}._oml2pt{width:.8rem}._h8yej3{width:100%}._cdlrvm{width:1rem}}
+@layer priority1{._q7jof,:root{--_3kibph:#0000001f;--_nu89q3:var(--blackWhiteColor);--_nlcxv4:#0000008c;--_1l3ajwk:#374151;--_dtq5hu:#374151;--_i53b70:#00c595;--_1e1ve05:#00bfff;--_s8vpk3:#f57373;--_1c781:orange;--_yoxkkg:var(--secondaryColor);--_i86ma6:var(--secondaryColor);--_1vga2en:var(--quaternaryColor);--_1jrvoj:#0000001f;--_1w671vd:var(--blackWhiteColor);--_1de526y:#374151}._1jknjb,:root{--color-primary-50:#f9fafb;--color-primary-100:#f3f4f6;--color-primary-200:#e5e7eb;--color-primary-300:#d1d5db;--color-primary-400:#9ca3af;--color-primary-500:#6b7280;--color-primary-600:#4b5563;--color-primary-700:#374151;--color-primary-800:#1f2937;--color-primary-900:#000;--color-secondary-50:#f0fdfa;--color-secondary-100:#ccfbf1;--color-secondary-200:#99f6e4;--color-secondary-300:#5eead4;--color-secondary-400:#2dd4bf;--color-secondary-500:#00c595;--color-secondary-600:#00a082;--color-secondary-700:#007a6b;--color-secondary-800:#005d55;--color-secondary-900:#004d47;--color-tertiary-50:#f0f9ff;--color-tertiary-100:#e0f2fe;--color-tertiary-200:#bae6fd;--color-tertiary-300:#7dd3fc;--color-tertiary-400:#38bdf8;--color-tertiary-500:#00bfff;--color-tertiary-600:#0ea5e9;--color-tertiary-700:#0284c7;--color-tertiary-800:#0369a1;--color-tertiary-900:#0c4a6e;--color-quaternary-50:#fef7f7;--color-quaternary-100:#feeaea;--color-quaternary-200:#fecaca;--color-quaternary-300:#fca5a5;--color-quaternary-400:#f87171;--color-quaternary-500:#f57373;--color-quaternary-600:#ef4444;--color-quaternary-700:#dc2626;--color-quaternary-800:#b91c1c;--color-quaternary-900:#991b1b;--color-quinary-50:#fff7ed;--color-quinary-100:#ffedd5;--color-quinary-200:#fed7aa;--color-quinary-300:#fdba74;--color-quinary-400:#fb923c;--color-quinary-500:orange;--color-quinary-600:#ff8c00;--color-quinary-700:#e67e00;--color-quinary-800:#cc7000;--color-quinary-900:#b36200;--primaryColor:var(--color-primary-900);--secondaryColor:var(--color-secondary-500);--tertiaryColor:var(--color-tertiary-500);--quaternaryColor:var(--color-quaternary-500);--quinaryColor:var(--color-quinary-500);--blackWhiteColor:#fff;--whiteBlackColor:#000;--disabledColor:#0000001a}}@layer priority2{._1ghz6dp{margin:0}._kaxd7b{padding:.6rem .9rem}._3vcqe7{padding:1.2rem}._qo3fwf{padding:1.6rem}}@layer priority3{._r1djjy{border-color:var(--_1jrvoj)}._1yf9t2n{border-color:var(--_3kibph)}._1xh8lfz{border-radius:.2rem}._18jy0o0{border-radius:.4rem}._9mmeec{border-radius:.6rem}._1o5ta1t{border-radius:.8rem}._1e6avla{border-radius:999px}._1y0btm7{border-style:solid}._mkeg23{border-width:1px}._73f2yu{gap:.35rem}._praio3{gap:.55rem}._13z6uf9{gap:.5rem}._1p549t4{gap:.6rem 1rem}._rpnz5g{gap:.8rem 1.6rem}._1rq4zhh{gap:.8rem}._bhn5rf{gap:1.2rem}._8fetqu{gap:1rem}._1uexzyd{margin-left:-.3rem;margin-right:-.3rem}._b3r6kr{overflow:hidden}._3rcno1{padding-top:.2rem;padding-bottom:.2rem}._11pq3io{padding-left:.3rem;padding-right:.3rem}._mqliwb{text-decoration:line-through}}@layer priority4{._1winvzj{-webkit-user-select:none}._6s0dn4{align-items:center}._1cy8zhl{align-items:flex-start}._1asp76r{background-color:var(--_1w671vd)}._1a1xyot{background-color:var(--_nu89q3)}._1xa3opb{box-shadow:0 6px 18px #0000001f}._gnmr2x{color:var(--_1de526y)}._qdq3cf{color:var(--_nlcxv4)}._4iqcr8{color:var(--_yoxkkg)}._1jm3nie{cursor:grab}._1ypdohk{cursor:pointer}._1lliihq{display:block}._78zum5{display:flex}._rvj5dj{display:grid}._dt5ytf{flex-direction:column}._2lah0s{flex-shrink:0}._1a02dak{flex-wrap:wrap}._rlpt6b{font-family:var(--font-inter,inter,Inter,system-ui,-apple-system,BlinkMacSystemFont,sans-serif)}._1hptrd9{font-size:1.1rem}._vewgow{font-size:1.2rem}._1xebwwb{font-size:1.3rem}._1elmx46{font-size:1.8rem}._k50ysn{font-weight:500}._1s688f{font-weight:600}._1de81ps{grid-template-columns:minmax(10rem,14rem) 1fr}._17b3u6i{grid-template-columns:minmax(8rem,10rem) 1fr}._1qughib{justify-content:space-between}._1u7k74{line-height:1.2}._37zpob{line-height:1.4}._3onkmb{opacity:.35}._yd83as{opacity:.45}._47corl{pointer-events:none}._10l6tqk{position:absolute}._1n2onr6{position:relative}._tuk9sc{transform:translate(12px,-50%)}._x6bhzk{transition-duration:.15s}._npjden{transition-property:opacity,background-color}._87ps6o{-webkit-user-select:none;user-select:none}._eaf4i8{white-space:normal}._1fj9vlw{white-space:pre-line}._htitgo{z-index:2}._ddrp5s:hover{background-color:#0000000a}}@layer priority5{._1lut4zz{height:.8rem}._1l36t39{height:1rem}._1p62t0q{height:42rem}._1i2h5o5{margin-bottom:.15rem}._yccheo{margin-bottom:.4rem}._dj266r{margin-top:0}._owlazn{max-width:24rem}._1sfyvwd{min-height:3.2rem}._1j9c18f{min-height:36rem}._17zuyli{min-height:42rem}._oml2pt{width:.8rem}._h8yej3{width:100%}._cdlrvm{width:1rem}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ioloco-charts",
-  "version": "0.1.1",
+  "version": "0.2.2",
   "description": "Stylex D3 chart components for React",
   "author": {
     "name": "Besjan Sejrani"

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

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

package/dist/D3/KpiCard/index.js

@@ -1,12 +0,0 @@
-"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 l}from"../shared/useChartInteraction.js"
-import{Sparkline as t}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:l,isHovered:d,isSelected:s,onHover:a,onPointerMove:u,onHoverEnd:v,onToggleSelect:h,onClick:m}){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:u,onMouseLeave:v,onClick(){h(),m?.(i)},onKeyDown(e){"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),h(),m?.(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(t,{values:i.sparkline,color:r[l%r.length]}):null]})}function a({metrics:r,title:t="KPIs",description:a,compact:u=!1,hoverHint:v="Hover a KPI card for details.",onMetricClick:h}){const m=l(v)
-return e("div",{...o.props(c.root),children:[e("div",{...o.props(c.header),children:[n("h4",{...o.props(c.headerTitle),children:t}),u?null:n("p",{...o.props(c.headerDescription),children:a})]}),e("div",{ref:m.setTooltipContainer,...o.props(c.grid,c.gridRelative,u?c.gridCompact:null),children:[r.map((e,o)=>n(s,{metric:e,index:o,isHovered:m.getHoverKey()===e.id,isSelected:m.getSelectedKey()===e.id,onHover:n=>m.onHover(e.id,d(e),n.nativeEvent),onPointerMove:e=>m.onPointerMove(e.nativeEvent),onHoverEnd:m.onHoverEnd,onToggleSelect:()=>m.onToggleSelect(e.id,`${e.label}: ${e.value.toLocaleString()}`),onClick:h},e.id)),n(i,{tooltip:m.tooltip})]}),n("span",{...o.props(c.footerHint,m.isPinned?c.footerHintPinned:null),children:m.hint})]})}export{a as KpiCard}

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

@@ -1,108 +0,0 @@
-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

@@ -1,3 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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;
-    hoverHint?: string;
-    onMetricClick?: (metric: KpiMetric) => void;
-};