@tribepad/themis 1.0.6 → 1.0.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/elements/AlertDialog/index.js +1 -1
- package/dist/elements/AlertDialog/index.js.map +1 -1
- package/dist/elements/AlertDialog/index.mjs +1 -1
- package/dist/elements/AlertDialog/index.mjs.map +1 -1
- package/dist/elements/Chart/ChartContext.d.ts.map +1 -1
- package/dist/elements/Chart/ChartLineSeries.d.ts.map +1 -1
- package/dist/elements/Chart/index.js +1 -1
- package/dist/elements/Chart/index.js.map +1 -1
- package/dist/elements/Chart/index.mjs +1 -1
- package/dist/elements/Chart/index.mjs.map +1 -1
- package/dist/elements/DatePicker/index.js +1 -1
- package/dist/elements/DatePicker/index.js.map +1 -1
- package/dist/elements/DatePicker/index.mjs +1 -1
- package/dist/elements/DatePicker/index.mjs.map +1 -1
- package/dist/elements/FileField/index.js +1 -1
- package/dist/elements/FileField/index.js.map +1 -1
- package/dist/elements/FileField/index.mjs +1 -1
- package/dist/elements/FileField/index.mjs.map +1 -1
- package/dist/elements/Modal/Modal.styles.d.ts +2 -0
- package/dist/elements/Modal/Modal.styles.d.ts.map +1 -1
- package/dist/elements/Modal/index.js +1 -1
- package/dist/elements/Modal/index.js.map +1 -1
- package/dist/elements/Modal/index.mjs +1 -1
- package/dist/elements/Modal/index.mjs.map +1 -1
- package/dist/elements/NumberField/NumberField.d.ts.map +1 -1
- package/dist/elements/NumberField/NumberField.types.d.ts +12 -0
- package/dist/elements/NumberField/NumberField.types.d.ts.map +1 -1
- package/dist/elements/NumberField/index.js +1 -1
- package/dist/elements/NumberField/index.js.map +1 -1
- package/dist/elements/NumberField/index.mjs +1 -1
- package/dist/elements/NumberField/index.mjs.map +1 -1
- package/dist/elements/OTPInput/OTPInput.d.ts +1 -1
- package/dist/elements/Resizable/index.js +1 -1
- package/dist/elements/Resizable/index.js.map +1 -1
- package/dist/elements/Resizable/index.mjs +1 -1
- package/dist/elements/Resizable/index.mjs.map +1 -1
- package/dist/elements/Switch/Switch.d.ts +11 -4
- package/dist/elements/Switch/Switch.d.ts.map +1 -1
- package/dist/elements/Switch/Switch.types.d.ts +5 -0
- package/dist/elements/Switch/Switch.types.d.ts.map +1 -1
- package/dist/elements/Switch/index.js +1 -1
- package/dist/elements/Switch/index.js.map +1 -1
- package/dist/elements/Switch/index.mjs +1 -1
- package/dist/elements/Switch/index.mjs.map +1 -1
- package/dist/elements/Tabs/Tabs.d.ts +3 -3
- package/dist/elements/Tabs/Tabs.d.ts.map +1 -1
- package/dist/elements/Tabs/Tabs.types.d.ts +4 -0
- package/dist/elements/Tabs/Tabs.types.d.ts.map +1 -1
- package/dist/elements/Tabs/index.js +1 -1
- package/dist/elements/Tabs/index.js.map +1 -1
- package/dist/elements/Tabs/index.mjs +1 -1
- package/dist/elements/Tabs/index.mjs.map +1 -1
- package/dist/elements/index.js +1 -1
- package/dist/elements/index.js.map +1 -1
- package/dist/elements/index.mjs +1 -1
- package/dist/elements/index.mjs.map +1 -1
- package/dist/hooks/index.d.ts +2 -0
- package/dist/hooks/index.d.ts.map +1 -0
- package/dist/hooks/index.js +2 -0
- package/dist/hooks/index.js.map +1 -0
- package/dist/hooks/index.mjs +2 -0
- package/dist/hooks/index.mjs.map +1 -0
- package/dist/hooks/useReducedMotion.d.ts +9 -0
- package/dist/hooks/useReducedMotion.d.ts.map +1 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +2 -2
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +2 -2
- package/dist/index.mjs.map +1 -1
- package/dist/styles/animations.css +172 -0
- package/dist/styles/index.js +1 -1
- package/dist/styles/index.js.map +1 -1
- package/dist/styles/index.mjs +1 -1
- package/dist/styles/index.mjs.map +1 -1
- package/dist/styles/shared-variants.d.ts +23 -0
- package/dist/styles/shared-variants.d.ts.map +1 -1
- package/dist/tailwind-source.css +1 -0
- package/dist/types/animation.d.ts +24 -0
- package/dist/types/animation.d.ts.map +1 -0
- package/dist/types/index.d.ts +2 -0
- package/dist/types/index.d.ts.map +1 -0
- package/dist/types/index.js +2 -0
- package/dist/types/index.js.map +1 -0
- package/dist/types/index.mjs +2 -0
- package/dist/types/index.mjs.map +1 -0
- package/dist/utils/index.d.ts +1 -0
- package/dist/utils/index.d.ts.map +1 -1
- package/dist/utils/index.js +1 -1
- package/dist/utils/index.js.map +1 -1
- package/dist/utils/index.mjs +1 -1
- package/dist/utils/index.mjs.map +1 -1
- package/dist/utils/shouldAnimate.d.ts +12 -0
- package/dist/utils/shouldAnimate.d.ts.map +1 -0
- package/package.json +48 -16
- package/src/elements/NumberField/NumberField.stories.tsx +100 -0
- package/src/elements/Switch/Switch.stories.tsx +60 -0
- package/src/elements/Tabs/Tabs.stories.tsx +332 -2
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import {createContext,forwardRef,useRef,useId,memo,useState,useMemo,useCallback,useEffect,useContext}from'react';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';import {cva}from'class-variance-authority';import {jsxs,jsx,Fragment}from'react/jsx-runtime';import {VisuallyHidden,useFocusRing}from'react-aria';import'react-aria-components';import {z}from'zod';function se(...o){return twMerge(clsx(o))}var we=cva("relative w-full overflow-hidden rounded-lg border",{variants:{variant:{default:"border-[var(--border)] bg-[var(--content-background)]",muted:"border-[var(--accent-background)] bg-[var(--accent-background)]/50"}},defaultVariants:{variant:"default"}}),Ee=cva("cursor-pointer focus-visible:outline-none",{variants:{type:{bar:"",line:"stroke-2"},state:{default:"",focused:"",selected:"opacity-80"}},defaultVariants:{type:"bar",state:"default"}});cva("pointer-events-none",{variants:{visible:{true:"opacity-100",false:"opacity-0"}},defaultVariants:{visible:false}});var Je=cva("flex flex-wrap items-center justify-center gap-4 px-4 py-2",{variants:{visible:{true:"",false:"hidden"}},defaultVariants:{visible:true}});var M={top:20,right:20,bottom:60,left:60},ve=300,ye=169,Mt=.2,Ae=.1,Vt=20,le=4,je=2,ce=6;var te={solid:"none",dashed:"8 4",dotted:"2 4"};var et="var(--border)",tt=1,ot=.7,ue="var(--border)",de=1,me=6,oe=12,nt=44,X=4,Le=2,Ne=["var(--chart-1, hsl(221 83% 53%))","var(--chart-2, hsl(142 71% 45%))","var(--chart-3, hsl(38 92% 50%))","var(--chart-4, hsl(262 83% 58%))","var(--chart-5, hsl(0 84% 60%))"];function Qe(o,t){let e=Math.floor(Math.log10(o)),a=o/Math.pow(10,e),n;return t?a<1.5?n=1:a<3?n=2:a<7?n=5:n=10:a<=1?n=1:a<=2?n=2:a<=5?n=5:n=10,n*Math.pow(10,e)}function rt(o,t,e=5){if(o===t){if(o===0)return [0,25,50,75,100];o=o*.9,t=t*1.1;}let a=Qe(t-o,false),n=Qe(a/(e-1),true),s=Math.floor(o/n)*n,r=Math.ceil(t/n)*n,i=[];for(let l=s;l<=r;l+=n)i.push(l);return i}function at(o,t,e,a=0){let n=o/t,s=n*(1-Mt),r=Math.max(Vt,s/e*(1-Ae));return {barWidth:r,groupWidth:n,getBarX:(l,p)=>{let h=a+n*l+n/2,u=e*r+(e-1)*(Ae*r);return h-u/2+p*(r+Ae*r)}}}function it(o){let[t,e]=useState({width:ve,height:ye,padding:M,plotArea:{x:M.left,y:M.top,width:ve-M.left-M.right,height:ye-M.top-M.bottom}});return useEffect(()=>{let a=o.current;if(!a)return;let n=r=>{let i=Math.max(r,ve),l=Math.max(i*.5625,ye),p={x:M.left,y:M.top,width:i-M.left-M.right,height:l-M.top-M.bottom};e({width:i,height:l,padding:M,plotArea:p});},s=new ResizeObserver(r=>{let i=r[0];i&&n(i.contentRect.width);});return n(a.getBoundingClientRect().width),s.observe(a),()=>{s.disconnect();}},[o]),t}function Ce(o){let{rows:t,cols:e,initialRow:a=0,initialCol:n=0,wrap:s=false,onFocusChange:r}=o,[i,l]=useState(a),[p,h]=useState(n),u=useCallback(d=>typeof e=="function"?e(d):e,[e]),b=useCallback((d,c)=>{r?.(d,c);},[r]),C=useCallback(()=>{h(d=>{let c=u(i)-1,g=d+1;return g>c&&(g=s?0:c),g!==d&&b(i,g),g});},[i,u,s,b]),m=useCallback(()=>{h(d=>{let c=d-1,g=u(i)-1;return c<0&&(c=s?g:0),c!==d&&b(i,c),c});},[i,u,s,b]),x=useCallback(()=>{l(d=>{let c=d+1;if(c>=t&&(c=s?0:t-1),c!==d){let g=u(c)-1;h(I=>{let y=Math.min(I,g);return b(c,y),y});}return c});},[t,u,s,b]),R=useCallback(()=>{l(d=>{let c=d-1;if(c<0&&(c=s?t-1:0),c!==d){let g=u(c)-1;h(I=>{let y=Math.min(I,g);return b(c,y),y});}return c});},[t,u,s,b]),D=useCallback(()=>{h(0),b(i,0);},[i,b]),A=useCallback(()=>{let d=u(i)-1;h(d),b(i,d);},[i,u,b]),f=useCallback((d,c)=>{let g=Math.max(0,Math.min(d,t-1)),I=u(g)-1,y=Math.max(0,Math.min(c,I));l(g),h(y),b(g,y);},[t,u,b]),S=useCallback((d,c)=>d===i&&c===p?0:-1,[i,p]);return useMemo(()=>({focusedRow:i,focusedCol:p,moveRight:C,moveLeft:m,moveDown:x,moveUp:R,moveToStart:D,moveToEnd:A,setFocus:f,getTabIndex:S}),[i,p,C,m,x,R,D,A,f,S])}var lt=createContext(null);function ct(){let o=useContext(lt);if(!o)throw new Error("useChartContext must be used within a ChartProvider");return o}function Kt(o){let t=new Set;return o.forEach(e=>{e.data.forEach(a=>{t.add(a.label);});}),Array.from(t)}function $t(o,t,e){let a=Kt(o),{plotArea:n}=t,s=1/0,r=-1/0;o.forEach(m=>{m.data.forEach(x=>{s=Math.min(s,x.value),r=Math.max(r,x.value);});}),(!isFinite(s)||!isFinite(r))&&(s=0,r=100);let i=e?Math.min(0,s):s,l=rt(i,r),p=l[l.length-1]||r,h=l[0]||i,u=m=>{if(a.length<=1)return n.x+n.width/2;let x=n.width/a.length;return n.x+x*m+x/2},b=p-h||1;return {allLabels:a,xScale:u,yScale:m=>{let x=(m-h)/b;return n.y+n.height*(1-x)},yMin:h,yMax:p,yTicks:l}}function ut({children:o,containerRef:t,data:e,type:a,title:n,description:s,xAxisLabel:r,yAxisLabel:i,showTooltip:l,showGrid:p,showLegend:h,announceTrends:u,trendUpFormat:b,trendDownFormat:C,startAtZero:m,reducedMotion:x=true,onPointFocus:R,onPointSelect:D}){let[A,f]=useState(null),[S,d]=useState(""),[c,g]=useState(false),[I,y]=useState(null),[_,E]=useState(null),[k,V]=useState(null),G=it(t),O=useMemo(()=>$t(e,G,m),[e,G,m]);useMemo(()=>Math.max(...e.map(v=>v.data.length)),[e]);let re=useCallback((v,T)=>(T?b:C).replace("{percent}",String(v)),[b,C]),De=(v,T)=>{if(!u||T<=0)return null;let w=e[v];if(!w)return null;let L=w.data[T],N=w.data[T-1];if(!L||!N||N.value===0)return null;let Z=(L.value-N.value)/Math.abs(N.value)*100,J=Z>=0,ie=Math.abs(Math.round(Z));return {text:re(ie,J),direction:J?"up":"down"}},B=Ce({rows:e.length,cols:v=>e[v]?.data.length||0,onFocusChange:(v,T)=>{let w=e[v],L=w?.data[T];if(!w||!L)return;let N=De(v,T);E(N?.text??null),V(N?.direction??null);let Z=`${T+1} of ${w.data.length}`,J=e.length>1?`${w.name}: `:"",ie=z(L.value),Lt=N?`, ${N.text}`:"";d(`${J}${L.label}, ${ie}${Lt}. ${Z}.`),l&&(g(true),y({series:v,point:T})),R?.(L,v,T);}}),ae=useMemo(()=>{let v=typeof navigator<"u"?navigator.language:"en-US";return new Intl.NumberFormat(v)},[]),z=useCallback(v=>ae.format(v),[ae]),ee=useCallback((v,T)=>{if(!u||T<=0)return null;let w=e[v];if(!w)return null;let L=w.data[T],N=w.data[T-1];if(!L||!N||N.value===0)return null;let Z=(L.value-N.value)/Math.abs(N.value)*100,J=Z>=0,ie=Math.abs(Math.round(Z));return {text:re(ie,J),direction:J?"up":"down"}},[e,u,re]),ge=useCallback(v=>Ne[v%Ne.length]??"var(--chart-1)",[]),F=useCallback((v,T)=>{let w=e[v],L=w?.data[T];if(!w||!L)return null;let N=O.allLabels.indexOf(L.label);return N===-1?null:{x:O.xScale(N),y:O.yScale(L.value)}},[e,O]),U=useCallback((v,T)=>{B.setFocus(v,T);},[B]),ze=useCallback((v,T)=>{f({series:v,point:T});let w=e[v],L=w?.data[T];w&&L&&D?.(L,v,T);},[e,D]),Xe=useCallback(()=>{f(null);},[]),Ye=useCallback(v=>{d(v);},[]),qe=useCallback((v,T)=>{if(l){g(true),y({series:v,point:T});let w=ee(v,T);E(w?.text??null),V(w?.direction??null);}},[l,ee]),Ze=useCallback(()=>{g(false),y(null);},[]),At=useMemo(()=>({focusedSeries:B.focusedRow,focusedPoint:B.focusedCol,selectedPoint:A,announcement:S,isTooltipVisible:c,tooltipPoint:I,currentTrend:_,currentTrendDirection:k,dimensions:G,scales:O,data:e,type:a,title:n,description:s,xAxisLabel:r,yAxisLabel:i,showTooltip:l,showGrid:p,showLegend:h,announceTrends:u,trendUpFormat:b,trendDownFormat:C,startAtZero:m,reducedMotion:x,setFocus:U,selectPoint:ze,clearSelection:Xe,announce:Ye,showTooltipAt:qe,hideTooltip:Ze,getTabIndex:B.getTabIndex,formatValue:z,getSeriesColor:ge,getPointCoordinates:F}),[B.focusedRow,B.focusedCol,B.getTabIndex,A,S,c,I,_,k,G,O,e,a,n,s,r,i,l,p,h,u,b,C,m,x,U,ze,Xe,Ye,qe,Ze,z,ge,F]);return jsx(lt.Provider,{value:At,children:o})}function _e({yTicks:o,yScale:t,plotX:e,plotWidth:a,visible:n}){return n?jsx("g",{className:"chart-grid","aria-hidden":"true","data-testid":"chart-grid",children:o.map(s=>{let r=t(s);return jsx("line",{x1:e,y1:r,x2:e+a,y2:r,stroke:et,strokeWidth:tt,strokeOpacity:ot},s)})}):null}_e.displayName="ChartGrid";function Ve({allLabels:o,yTicks:t,xScale:e,yScale:a,plotArea:n,xAxisLabel:s,yAxisLabel:r,formatValue:i}){let{x:l,y:p,width:h,height:u}=n;return jsxs("g",{className:"chart-axis","aria-hidden":"true","data-testid":"chart-axis",children:[jsx("line",{x1:l,y1:p+u,x2:l+h,y2:p+u,stroke:ue,strokeWidth:de}),jsx("line",{x1:l,y1:p,x2:l,y2:p+u,stroke:ue,strokeWidth:de}),o.map((b,C)=>{let m=e(C),x=p+u;return jsxs("g",{children:[jsx("line",{x1:m,y1:x,x2:m,y2:x+me,stroke:ue,strokeWidth:de}),jsx("text",{x:m,y:x+me+oe,textAnchor:"middle",fontSize:oe,fill:"currentColor",className:"text-[var(--content-foreground)]",children:b})]},b)}),t.map(b=>{let C=l,m=a(b);return jsxs("g",{children:[jsx("line",{x1:C-me,y1:m,x2:C,y2:m,stroke:ue,strokeWidth:de}),jsx("text",{x:C-me-4,y:m,textAnchor:"end",dominantBaseline:"middle",fontSize:oe,fill:"currentColor",className:"text-[var(--content-foreground)]",children:i(b)})]},b)}),jsx("text",{x:l+h/2,y:p+u+45,textAnchor:"middle",fontSize:oe,fill:"currentColor",className:"text-[var(--content-foreground)] font-medium",children:s}),jsx("text",{x:15,y:p+u/2,textAnchor:"middle",fontSize:oe,fill:"currentColor",className:"text-[var(--content-foreground)] font-medium",transform:`rotate(-90, 15, ${p+u/2})`,children:r})]})}Ve.displayName="ChartAxis";function be({type:o,x:t,y:e,width:a=ce*2,height:n=ce*2,color:s,seriesIndex:r,pointIndex:i,tabIndex:l,label:p,isSelected:h=false,onFocus:u,onBlur:b,onHover:C,onHoverEnd:m,onKeyDown:x}){let R=useRef(null),{isFocusVisible:D,focusProps:A}=useFocusRing();useEffect(()=>{l===0&&R.current&&document.activeElement?.closest('[role="graphics-document"]')!==null&&R.current.focus();},[l]);let f=Math.max(nt,a,n),S=o==="bar"?t-(f-a)/2:t-f/2,d=o==="bar"?e-(f-n)/2:e-f/2,c=E=>{A.onFocus?.(E),u?.(r,i);},g=E=>{A.onBlur?.(E),b?.();},I=E=>{C?.(r,i);},y=E=>{m?.();};return jsxs("g",{ref:R,role:"listitem",tabIndex:l,"aria-label":p,className:Ee({type:o,state:h?"selected":D?"focused":"default"}),onFocus:c,onBlur:g,onMouseEnter:I,onMouseLeave:y,onKeyDown:x,"data-testid":`chart-point-${r}-${i}`,children:[jsx("rect",{x:S,y:d,width:f,height:f,fill:"transparent",className:"cursor-pointer"}),o==="bar"?jsx("rect",{x:t,y:e,width:a,height:n,rx:le,ry:le,fill:s,className:"chart-bar"}):jsx("circle",{cx:t,cy:e,r:ce,fill:s,className:"chart-point"}),D&&(o==="bar"?jsx("rect",{x:t-X,y:e-X,width:a+X*2,height:n+X*2,rx:le+X,ry:le+X,fill:"none",stroke:"var(--ring)",strokeWidth:Le,className:"chart-focus-ring"}):jsx("circle",{cx:t,cy:e,r:ce+X,fill:"none",stroke:"var(--ring)",strokeWidth:Le,className:"chart-focus-ring"}))]})}be.displayName="ChartDataPoint";function ke({series:o,seriesIndex:t,totalSeries:e,dimensions:a,scales:n,color:s,getTabIndex:r,selectedPoint:i,onPointFocus:l,onPointBlur:p,onPointHover:h,onPointHoverEnd:u,onKeyDown:b,formatValue:C}){let{plotArea:m}=a,{allLabels:x,xScale:R,yScale:D,yMin:A}=n,{barWidth:f,getBarX:S}=at(m.width,x.length,e,m.x),d=D(Math.max(0,A));return jsx("g",{className:"chart-bar-series",role:"list","aria-label":`${o.name} series`,"data-testid":`chart-series-${t}`,children:o.data.map((c,g)=>{let I=x.indexOf(c.label);if(I===-1)return null;let y=S(I,t),_=D(c.value),E=Math.abs(d-_),k=c.value>=0?_:d,V=i?.series===t&&i?.point===g,G=`${o.name}: ${c.label}, ${C(c.value)}`;return jsx(be,{type:"bar",x:y,y:k,width:f,height:E,color:s,seriesIndex:t,pointIndex:g,tabIndex:r(t,g),label:G,isSelected:V,onFocus:l,onBlur:p,onHover:h,onHoverEnd:u,onKeyDown:b},`${c.label}-${g}`)})})}ke.displayName="ChartBarSeries";function Oe({series:o,seriesIndex:t,scales:e,color:a,pattern:n,getTabIndex:s,selectedPoint:r,onPointFocus:i,onPointBlur:l,onPointHover:p,onPointHoverEnd:h,onKeyDown:u,formatValue:b}){let{allLabels:C,xScale:m,yScale:x}=e,R=useMemo(()=>o.data.map((f,S)=>{let d=C.indexOf(f.label);return d===-1?null:{x:m(d),y:x(f.value),point:f,pointIndex:S,labelIndex:d}}).filter(f=>f!==null).sort((f,S)=>f.labelIndex-S.labelIndex),[o.data,C,m,x]),D=useMemo(()=>R.length===0?"":R.map((f,S)=>`${S===0?"M":"L"} ${f.x} ${f.y}`).join(" "),[R]),A=te[n]==="none"?void 0:te[n];return jsxs("g",{className:"chart-line-series",role:"list","aria-label":`${o.name} series`,"data-testid":`chart-series-${t}`,children:[jsx("path",{d:D,fill:"none",stroke:a,strokeWidth:je,strokeDasharray:A,strokeLinecap:"round",strokeLinejoin:"round",className:"chart-line","aria-hidden":"true"}),R.map(({x:f,y:S,point:d,pointIndex:c})=>{let g=r?.series===t&&r?.point===c,I=`${o.name}: ${d.label}, ${b(d.value)}`;return jsx(be,{type:"line",x:f,y:S,color:a,seriesIndex:t,pointIndex:c,tabIndex:s(t,c),label:I,isSelected:g,onFocus:i,onBlur:l,onHover:p,onHoverEnd:h,onKeyDown:u},`${d.label}-${c}`)})]})}Oe.displayName="ChartLineSeries";function Fe({type:o,data:t,dimensions:e,scales:a,titleId:n,descId:s,showGrid:r,xAxisLabel:i,yAxisLabel:l,getSeriesColor:p,getTabIndex:h,selectedPoint:u,formatValue:b,onKeyDown:C,onPointFocus:m,onPointBlur:x,onPointHover:R,onPointHoverEnd:D}){let{width:A,height:f,plotArea:S}=e,{allLabels:d,xScale:c,yScale:g,yTicks:I}=a;return jsxs("svg",{role:"graphics-document","aria-roledescription":`${o} chart`,"aria-labelledby":n,"aria-describedby":s,viewBox:`0 0 ${A} ${f}`,className:"h-full w-full",style:{maxHeight:f},"data-testid":"chart-svg",children:[jsx(_e,{yTicks:I,yScale:g,plotX:S.x,plotWidth:S.width,visible:r}),jsx(Ve,{allLabels:d,yTicks:I,xScale:c,yScale:g,plotArea:S,xAxisLabel:i,yAxisLabel:l,formatValue:b}),t.map((y,_)=>{let E=y.color||p(_),k=y.pattern||"solid";return o==="bar"?jsx(ke,{series:y,seriesIndex:_,totalSeries:t.length,dimensions:e,scales:a,color:E,getTabIndex:h,selectedPoint:u,onPointFocus:m,onPointBlur:x,onPointHover:R,onPointHoverEnd:D,onKeyDown:C,formatValue:b},y.name):jsx(Oe,{series:y,seriesIndex:_,scales:a,color:E,pattern:k,getTabIndex:h,selectedPoint:u,onPointFocus:m,onPointBlur:x,onPointHover:R,onPointHoverEnd:D,onKeyDown:C,formatValue:b},y.name)})]})}Fe.displayName="ChartSVG";var Ge=cva(["z-50 overflow-hidden rounded-md px-3 py-1.5 text-sm shadow-md","bg-[var(--content-foreground)] text-[var(--content-background)]","animate-in fade-in-0","data-[exiting]:animate-out data-[exiting]:fade-out-0"],{variants:{side:{top:["motion-safe:slide-in-from-bottom-2","data-[exiting]:motion-safe:slide-out-to-bottom-2"],bottom:["motion-safe:slide-in-from-top-2","data-[exiting]:motion-safe:slide-out-to-top-2"],left:["motion-safe:slide-in-from-right-2","data-[exiting]:motion-safe:slide-out-to-right-2"],right:["motion-safe:slide-in-from-left-2","data-[exiting]:motion-safe:slide-out-to-left-2"]}},defaultVariants:{side:"top"}});cva("fill-[var(--content-foreground)]",{variants:{side:{top:"rotate-180",bottom:"rotate-0",left:"rotate-90",right:"-rotate-90"}},defaultVariants:{side:"top"}});var vt=8;function Ke({visible:o,x:t,y:e,seriesName:a,label:n,value:s,chartWidth:r,chartHeight:i,trend:l,trendDirection:p}){let h=useRef(null),[u,b]=useState({left:0,top:0}),[C,m]=useState("top");return useEffect(()=>{if(!o||!h.current)return;let R=h.current.getBoundingClientRect(),D=R.width||120,A=R.height||50,f=t-D/2,S=e-A-vt,d="top";S<0&&(S=e+vt+16,d="bottom"),f<0&&(f=0),f+D>r&&(f=r-D),b({left:f,top:S}),m(d);},[o,t,e,r]),o?jsxs("div",{ref:h,"aria-hidden":"true",className:Ge({side:C}),style:{position:"absolute",left:u.left,top:u.top,pointerEvents:"none"},"data-testid":"chart-tooltip",children:[jsx("div",{className:"font-medium",children:a}),jsxs("div",{className:"opacity-80",children:[n,": ",jsx("span",{className:"font-semibold",children:s})]}),l&&jsxs("div",{className:"text-xs opacity-70 mt-1 flex items-center gap-1",children:[p==="up"?jsx("svg",{"aria-hidden":"true",className:"h-3 w-3 text-green-500",viewBox:"0 0 20 20",fill:"currentColor",children:jsx("path",{fillRule:"evenodd",d:"M10 17a.75.75 0 01-.75-.75V5.612L5.29 9.77a.75.75 0 01-1.08-1.04l5.25-5.5a.75.75 0 011.08 0l5.25 5.5a.75.75 0 11-1.08 1.04l-3.96-4.158V16.25A.75.75 0 0110 17z",clipRule:"evenodd"})}):p==="down"?jsx("svg",{"aria-hidden":"true",className:"h-3 w-3 text-red-500",viewBox:"0 0 20 20",fill:"currentColor",children:jsx("path",{fillRule:"evenodd",d:"M10 3a.75.75 0 01.75.75v10.638l3.96-4.158a.75.75 0 111.08 1.04l-5.25 5.5a.75.75 0 01-1.08 0l-5.25-5.5a.75.75 0 111.08-1.04l3.96 4.158V3.75A.75.75 0 0110 3z",clipRule:"evenodd"})}):null,jsx("span",{children:l})]})]}):null}Ke.displayName="ChartTooltip";function $e({data:o,visible:t,type:e,getSeriesColor:a}){return t?jsx("div",{className:Je({visible:t}),role:"list","aria-label":"Chart legend","data-testid":"chart-legend",children:o.map((n,s)=>{let r=n.color||a(s),i=n.pattern||"solid";return jsxs("div",{role:"listitem",className:"flex items-center gap-2",children:[e==="bar"?jsx("div",{className:"h-3 w-3 rounded-sm",style:{backgroundColor:r},"data-testid":`legend-color-${s}`,"aria-hidden":"true"}):jsx("svg",{width:"24",height:"12","aria-hidden":"true","data-testid":`legend-color-${s}`,children:jsx("line",{x1:"0",y1:"6",x2:"24",y2:"6",stroke:r,strokeWidth:"2",strokeDasharray:te[i]==="none"?void 0:te[i]})}),jsx("span",{className:"text-sm text-[var(--content-foreground)]",children:n.name})]},n.name)})}):null}$e.displayName="ChartLegend";function We({announcement:o}){return jsx(VisuallyHidden,{children:jsx("div",{role:"status","aria-live":"polite","aria-atomic":"true","data-testid":"chart-announcer",children:o})})}We.displayName="ChartAnnouncer";function Ue({data:o,title:t,xAxisLabel:e,yAxisLabel:a,formatValue:n,allLabels:s}){let r=o.length===1;return jsx(VisuallyHidden,{children:jsxs("table",{"data-testid":"chart-data-table",children:[jsxs("caption",{children:[t," data table"]}),jsx("thead",{children:jsxs("tr",{children:[jsx("th",{scope:"col",children:e}),r?jsx("th",{scope:"col",children:a}):o.map(i=>jsxs("th",{scope:"col",children:[i.name," (",a,")"]},i.name))]})}),jsx("tbody",{children:s.map(i=>jsxs("tr",{children:[jsx("th",{scope:"row",children:i}),o.map(l=>{let p=l.data.find(h=>h.label===i);return jsx("td",{children:p?n(p.value):"\u2014"},l.name)})]},i))})]})})}Ue.displayName="ChartDataTable";function Ct(o){let{roving:t,onSelect:e,onClear:a,disabled:n=false}=o;return {onKeyDown:useCallback(r=>{if(!n)switch(r.key){case "ArrowRight":r.preventDefault(),t.moveRight();break;case "ArrowLeft":r.preventDefault(),t.moveLeft();break;case "ArrowDown":r.preventDefault(),t.moveDown();break;case "ArrowUp":r.preventDefault(),t.moveUp();break;case "Home":r.preventDefault(),t.moveToStart();break;case "End":r.preventDefault(),t.moveToEnd();break;case "Enter":case " ":r.preventDefault(),e?.();break;case "Escape":r.preventDefault(),a?.();break;}},[t,e,a,n])}}function go({chartId:o}){let t=ct(),{data:e,type:a,title:n,xAxisLabel:s,yAxisLabel:r,showTooltip:i,showGrid:l,showLegend:p,dimensions:h,scales:u,announcement:b,isTooltipVisible:C,tooltipPoint:m,currentTrend:x,currentTrendDirection:R,selectedPoint:D,getTabIndex:A,formatValue:f,getSeriesColor:S,getPointCoordinates:d,setFocus:c,selectPoint:g,clearSelection:I,showTooltipAt:y,hideTooltip:_}=t,E=`${o}-title`,k=`${o}-desc`,V=Ce({rows:e.length,cols:F=>e[F]?.data.length||0,onFocusChange:(F,U)=>{c(F,U);}}),{onKeyDown:G}=Ct({roving:V,onSelect:()=>{g(V.focusedRow,V.focusedCol);},onClear:()=>{I();}}),O=useCallback((F,U)=>{V.setFocus(F,U),y(F,U);},[V,y]),re=useCallback(()=>{},[]),De=useCallback((F,U)=>{y(F,U);},[y]),B=useCallback(()=>{_();},[_]),ae=useMemo(()=>m?d(m.series,m.point)||{x:0,y:0}:{x:0,y:0},[m,d]),z=useMemo(()=>m?e[m.series]:null,[m,e]),ee=useMemo(()=>m?z?.data[m.point]:null,[m,z]),ge=useMemo(()=>p??e.length>1,[p,e.length]);return jsxs(Fragment,{children:[jsx(We,{announcement:b}),jsxs("div",{className:"relative",children:[jsx("div",{className:"relative z-0",children:jsx(Fe,{type:a,data:e,dimensions:h,scales:u,titleId:E,descId:k,showGrid:l,xAxisLabel:s,yAxisLabel:r,getSeriesColor:S,getTabIndex:A,selectedPoint:D,formatValue:f,onKeyDown:G,onPointFocus:O,onPointBlur:re,onPointHover:De,onPointHoverEnd:B})}),i&&ee&&z&&jsx(Ke,{visible:C,x:ae.x,y:ae.y,seriesName:z.name,label:ee.label,value:f(ee.value),chartWidth:h.width,chartHeight:h.height,trend:x,trendDirection:R})]}),jsx($e,{data:e,visible:ge,type:a,getSeriesColor:S}),jsx(Ue,{data:e,title:n,xAxisLabel:s,yAxisLabel:r,formatValue:f,allLabels:u.allLabels})]})}var St=forwardRef(({data:o,type:t,title:e,description:a,xAxisLabel:n,yAxisLabel:s,variant:r="default",className:i,showTooltip:l=true,showGrid:p=true,showLegend:h,announceTrends:u=false,trendUpFormat:b="up {percent}% from previous",trendDownFormat:C="down {percent}% from previous",startAtZero:m=true,reducedMotion:x,onPointFocus:R,onPointSelect:D,id:A,"aria-label":f,"aria-labelledby":S,"aria-describedby":d,"data-testid":c,...g},I)=>{let y=useRef(null),_=useId(),E=A||`chart-${_}`,k=`${E}-title`,V=`${E}-desc`,G=h??o.length>1;return jsxs("figure",{ref:O=>{typeof I=="function"?I(O):I&&(I.current=O),y.current=O;},id:E,role:"figure","aria-label":f,"aria-labelledby":S||k,"aria-describedby":d||V,"data-testid":c,className:se(we({variant:r}),"p-4",i),...g,children:[jsxs("figcaption",{className:"sr-only",children:[jsx("span",{id:k,children:e}),jsx("span",{id:V,children:a})]}),jsx(ut,{containerRef:y,data:o,type:t,title:e,description:a,xAxisLabel:n,yAxisLabel:s,showTooltip:l,showGrid:p,showLegend:G,announceTrends:u,trendUpFormat:b,trendDownFormat:C,startAtZero:m,reducedMotion:x,onPointFocus:R,onPointSelect:D,children:jsx(go,{chartId:E})})]})});St.displayName="Chart";var Tt=memo(St);Tt.displayName="Chart";var Pt=z.object({className:z.string().optional(),children:z.any().optional(),id:z.string().optional(),"aria-label":z.string().optional(),"aria-labelledby":z.string().optional(),"aria-describedby":z.string().optional(),"aria-live":z.enum(["off","polite","assertive"]).optional(),"aria-hidden":z.boolean().optional(),"data-testid":z.string().optional()});var It=z.object({label:z.string().min(1,"Label is required"),value:z.number(),description:z.string().optional()}),Rt=z.enum(["solid","dashed","dotted"]),Dt=z.object({name:z.string().min(1,"Series name is required"),color:z.string().optional(),pattern:Rt.optional().default("solid"),data:z.array(It).min(1,"At least one data point required")}),wt=z.enum(["bar","line"]),Et=z.enum(["default","muted"]),vo=Pt.extend({data:z.array(Dt).min(1,"At least one data series required").max(5,"Maximum 5 series allowed"),type:wt,title:z.string().min(1,"Title is required"),description:z.string().min(1,"Description is required"),xAxisLabel:z.string().min(1,"X-axis label is required"),yAxisLabel:z.string().min(1,"Y-axis label is required"),variant:Et.optional().default("default"),showTooltip:z.boolean().optional().default(true),showGrid:z.boolean().optional().default(true),showLegend:z.boolean().optional(),announceTrends:z.boolean().optional().default(false),trendUpFormat:z.string().optional().default("up {percent}% from previous"),trendDownFormat:z.string().optional().default("down {percent}% from previous"),startAtZero:z.boolean().optional().default(true),reducedMotion:z.boolean().optional(),onPointFocus:z.unknown().optional(),onPointSelect:z.unknown().optional()});export{Tt as Chart,vo as ChartPropsSchema,wt as ChartTypeSchema,Et as ChartVariantSchema,It as DataPointSchema,Dt as DataSeriesSchema,Rt as LinePatternSchema,we as chartVariants,Ee as dataPointVariants};//# sourceMappingURL=index.mjs.map
|
|
2
|
+
import {createContext,forwardRef,useRef,useId,memo,useState,useMemo,useCallback,useEffect,useContext}from'react';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';import {cva}from'class-variance-authority';import {jsxs,jsx,Fragment}from'react/jsx-runtime';import {VisuallyHidden,useFocusRing}from'react-aria';import'react-aria-components';import {z}from'zod';function se(...o){return twMerge(clsx(o))}var Ee=cva("relative w-full overflow-hidden rounded-lg border",{variants:{variant:{default:"border-[var(--border)] bg-[var(--content-background)]",muted:"border-[var(--accent-background)] bg-[var(--accent-background)]/50"}},defaultVariants:{variant:"default"}}),Ae=cva("cursor-pointer focus-visible:outline-none",{variants:{type:{bar:"",line:"stroke-2"},state:{default:"",focused:"",selected:"opacity-80"}},defaultVariants:{type:"bar",state:"default"}});cva("pointer-events-none",{variants:{visible:{true:"opacity-100",false:"opacity-0"}},defaultVariants:{visible:false}});var Je=cva("flex flex-wrap items-center justify-center gap-4 px-4 py-2",{variants:{visible:{true:"",false:"hidden"}},defaultVariants:{visible:true}});var _={top:20,right:20,bottom:60,left:60},xe=300,ye=169,Vt=.2,Le=.1,Ot=20,le=4,et=2,ce=6;var te={solid:"none",dashed:"8 4",dotted:"2 4"};var tt="var(--border)",ot=1,nt=.7,ue="var(--border)",de=1,me=6,oe=12,rt=44,X=4,Ne=2,Me=["var(--chart-1, hsl(221 83% 53%))","var(--chart-2, hsl(142 71% 45%))","var(--chart-3, hsl(38 92% 50%))","var(--chart-4, hsl(262 83% 58%))","var(--chart-5, hsl(0 84% 60%))"];function je(o,t){let e=Math.floor(Math.log10(o)),a=o/Math.pow(10,e),n;return t?a<1.5?n=1:a<3?n=2:a<7?n=5:n=10:a<=1?n=1:a<=2?n=2:a<=5?n=5:n=10,n*Math.pow(10,e)}function at(o,t,e=5){if(o===t){if(o===0)return [0,25,50,75,100];o=o*.9,t=t*1.1;}let a=je(t-o,false),n=je(a/(e-1),true),s=Math.floor(o/n)*n,r=Math.ceil(t/n)*n,i=[];for(let c=s;c<=r;c+=n)i.push(c);return i}function it(o,t,e,a=0){let n=o/t,s=n*(1-Vt),r=Math.max(Ot,s/e*(1-Le));return {barWidth:r,groupWidth:n,getBarX:(c,p)=>{let b=a+n*c+n/2,u=e*r+(e-1)*(Le*r);return b-u/2+p*(r+Le*r)}}}function st(o){let[t,e]=useState({width:xe,height:ye,padding:_,plotArea:{x:_.left,y:_.top,width:xe-_.left-_.right,height:ye-_.top-_.bottom}});return useEffect(()=>{let a=o.current;if(!a)return;let n=r=>{let i=Math.max(r,xe),c=Math.max(i*.5625,ye),p={x:_.left,y:_.top,width:i-_.left-_.right,height:c-_.top-_.bottom};e({width:i,height:c,padding:_,plotArea:p});},s=new ResizeObserver(r=>{let i=r[0];i&&n(i.contentRect.width);});return n(a.getBoundingClientRect().width),s.observe(a),()=>{s.disconnect();}},[o]),t}function Ce(o){let{rows:t,cols:e,initialRow:a=0,initialCol:n=0,wrap:s=false,onFocusChange:r}=o,[i,c]=useState(a),[p,b]=useState(n),u=useCallback(h=>typeof e=="function"?e(h):e,[e]),f=useCallback((h,d)=>{r?.(h,d);},[r]),S=useCallback(()=>{b(h=>{let d=u(i)-1,l=h+1;return l>d&&(l=s?0:d),l!==h&&f(i,l),l});},[i,u,s,f]),m=useCallback(()=>{b(h=>{let d=h-1,l=u(i)-1;return d<0&&(d=s?l:0),d!==h&&f(i,d),d});},[i,u,s,f]),x=useCallback(()=>{c(h=>{let d=h+1;if(d>=t&&(d=s?0:t-1),d!==h){let l=u(d)-1;b(v=>{let g=Math.min(v,l);return f(d,g),g});}return d});},[t,u,s,f]),E=useCallback(()=>{c(h=>{let d=h-1;if(d<0&&(d=s?t-1:0),d!==h){let l=u(d)-1;b(v=>{let g=Math.min(v,l);return f(d,g),g});}return d});},[t,u,s,f]),I=useCallback(()=>{b(0),f(i,0);},[i,f]),A=useCallback(()=>{let h=u(i)-1;b(h),f(i,h);},[i,u,f]),C=useCallback((h,d)=>{let l=Math.max(0,Math.min(h,t-1)),v=u(l)-1,g=Math.max(0,Math.min(d,v));c(l),b(g),f(l,g);},[t,u,f]),T=useCallback((h,d)=>h===i&&d===p?0:-1,[i,p]);return useMemo(()=>({focusedRow:i,focusedCol:p,moveRight:S,moveLeft:m,moveDown:x,moveUp:E,moveToStart:I,moveToEnd:A,setFocus:C,getTabIndex:T}),[i,p,S,m,x,E,I,A,C,T])}var ct=createContext(null);function Te(){let o=useContext(ct);if(!o)throw new Error("useChartContext must be used within a ChartProvider");return o}function Wt(o){let t=new Set;return o.forEach(e=>{e.data.forEach(a=>{t.add(a.label);});}),Array.from(t)}function Ut(o,t,e){let a=Wt(o),{plotArea:n}=t,s=1/0,r=-1/0;o.forEach(m=>{m.data.forEach(x=>{s=Math.min(s,x.value),r=Math.max(r,x.value);});}),(!isFinite(s)||!isFinite(r))&&(s=0,r=100);let i=e?Math.min(0,s):s,c=at(i,r),p=c[c.length-1]||r,b=c[0]||i,u=m=>{if(a.length<=1)return n.x+n.width/2;let x=n.width/a.length;return n.x+x*m+x/2},f=p-b||1;return {allLabels:a,xScale:u,yScale:m=>{let x=(m-b)/f;return n.y+n.height*(1-x)},yMin:b,yMax:p,yTicks:c}}function ut({children:o,containerRef:t,data:e,type:a,title:n,description:s,xAxisLabel:r,yAxisLabel:i,showTooltip:c,showGrid:p,showLegend:b,announceTrends:u,trendUpFormat:f,trendDownFormat:S,startAtZero:m,reducedMotion:x=false,onPointFocus:E,onPointSelect:I}){let[A,C]=useState(null),[T,h]=useState(""),[d,l]=useState(false),[v,g]=useState(null),[L,D]=useState(null),[k,V]=useState(null),G=st(t),O=useMemo(()=>Ut(e,G,m),[e,G,m]);useMemo(()=>Math.max(...e.map(y=>y.data.length)),[e]);let re=useCallback((y,P)=>(P?f:S).replace("{percent}",String(y)),[f,S]),we=(y,P)=>{if(!u||P<=0)return null;let w=e[y];if(!w)return null;let N=w.data[P],M=w.data[P-1];if(!N||!M||M.value===0)return null;let Z=(N.value-M.value)/Math.abs(M.value)*100,Q=Z>=0,ie=Math.abs(Math.round(Z));return {text:re(ie,Q),direction:Q?"up":"down"}},B=Ce({rows:e.length,cols:y=>e[y]?.data.length||0,onFocusChange:(y,P)=>{let w=e[y],N=w?.data[P];if(!w||!N)return;let M=we(y,P);D(M?.text??null),V(M?.direction??null);let Z=`${P+1} of ${w.data.length}`,Q=e.length>1?`${w.name}: `:"",ie=z(N.value),Mt=M?`, ${M.text}`:"";h(`${Q}${N.label}, ${ie}${Mt}. ${Z}.`),c&&(l(true),g({series:y,point:P})),E?.(N,y,P);}}),ae=useMemo(()=>{let y=typeof navigator<"u"?navigator.language:"en-US";return new Intl.NumberFormat(y)},[]),z=useCallback(y=>ae.format(y),[ae]),ee=useCallback((y,P)=>{if(!u||P<=0)return null;let w=e[y];if(!w)return null;let N=w.data[P],M=w.data[P-1];if(!N||!M||M.value===0)return null;let Z=(N.value-M.value)/Math.abs(M.value)*100,Q=Z>=0,ie=Math.abs(Math.round(Z));return {text:re(ie,Q),direction:Q?"up":"down"}},[e,u,re]),ge=useCallback(y=>Me[y%Me.length]??"var(--chart-1)",[]),F=useCallback((y,P)=>{let w=e[y],N=w?.data[P];if(!w||!N)return null;let M=O.allLabels.indexOf(N.label);return M===-1?null:{x:O.xScale(M),y:O.yScale(N.value)}},[e,O]),U=useCallback((y,P)=>{B.setFocus(y,P);},[B]),Xe=useCallback((y,P)=>{C({series:y,point:P});let w=e[y],N=w?.data[P];w&&N&&I?.(N,y,P);},[e,I]),Ye=useCallback(()=>{C(null);},[]),qe=useCallback(y=>{h(y);},[]),Ze=useCallback((y,P)=>{if(c){l(true),g({series:y,point:P});let w=ee(y,P);D(w?.text??null),V(w?.direction??null);}},[c,ee]),Qe=useCallback(()=>{l(false),g(null);},[]),Nt=useMemo(()=>({focusedSeries:B.focusedRow,focusedPoint:B.focusedCol,selectedPoint:A,announcement:T,isTooltipVisible:d,tooltipPoint:v,currentTrend:L,currentTrendDirection:k,dimensions:G,scales:O,data:e,type:a,title:n,description:s,xAxisLabel:r,yAxisLabel:i,showTooltip:c,showGrid:p,showLegend:b,announceTrends:u,trendUpFormat:f,trendDownFormat:S,startAtZero:m,reducedMotion:x,setFocus:U,selectPoint:Xe,clearSelection:Ye,announce:qe,showTooltipAt:Ze,hideTooltip:Qe,getTabIndex:B.getTabIndex,formatValue:z,getSeriesColor:ge,getPointCoordinates:F}),[B.focusedRow,B.focusedCol,B.getTabIndex,A,T,d,v,L,k,G,O,e,a,n,s,r,i,c,p,b,u,f,S,m,x,U,Xe,Ye,qe,Ze,Qe,z,ge,F]);return jsx(ct.Provider,{value:Nt,children:o})}function _e({yTicks:o,yScale:t,plotX:e,plotWidth:a,visible:n}){return n?jsx("g",{className:"chart-grid","aria-hidden":"true","data-testid":"chart-grid",children:o.map(s=>{let r=t(s);return jsx("line",{x1:e,y1:r,x2:e+a,y2:r,stroke:tt,strokeWidth:ot,strokeOpacity:nt},s)})}):null}_e.displayName="ChartGrid";function Ve({allLabels:o,yTicks:t,xScale:e,yScale:a,plotArea:n,xAxisLabel:s,yAxisLabel:r,formatValue:i}){let{x:c,y:p,width:b,height:u}=n;return jsxs("g",{className:"chart-axis","aria-hidden":"true","data-testid":"chart-axis",children:[jsx("line",{x1:c,y1:p+u,x2:c+b,y2:p+u,stroke:ue,strokeWidth:de}),jsx("line",{x1:c,y1:p,x2:c,y2:p+u,stroke:ue,strokeWidth:de}),o.map((f,S)=>{let m=e(S),x=p+u;return jsxs("g",{children:[jsx("line",{x1:m,y1:x,x2:m,y2:x+me,stroke:ue,strokeWidth:de}),jsx("text",{x:m,y:x+me+oe,textAnchor:"middle",fontSize:oe,fill:"currentColor",className:"text-[var(--content-foreground)]",children:f})]},f)}),t.map(f=>{let S=c,m=a(f);return jsxs("g",{children:[jsx("line",{x1:S-me,y1:m,x2:S,y2:m,stroke:ue,strokeWidth:de}),jsx("text",{x:S-me-4,y:m,textAnchor:"end",dominantBaseline:"middle",fontSize:oe,fill:"currentColor",className:"text-[var(--content-foreground)]",children:i(f)})]},f)}),jsx("text",{x:c+b/2,y:p+u+45,textAnchor:"middle",fontSize:oe,fill:"currentColor",className:"text-[var(--content-foreground)] font-medium",children:s}),jsx("text",{x:15,y:p+u/2,textAnchor:"middle",fontSize:oe,fill:"currentColor",className:"text-[var(--content-foreground)] font-medium",transform:`rotate(-90, 15, ${p+u/2})`,children:r})]})}Ve.displayName="ChartAxis";function fe({type:o,x:t,y:e,width:a=ce*2,height:n=ce*2,color:s,seriesIndex:r,pointIndex:i,tabIndex:c,label:p,isSelected:b=false,onFocus:u,onBlur:f,onHover:S,onHoverEnd:m,onKeyDown:x}){let E=useRef(null),{isFocusVisible:I,focusProps:A}=useFocusRing();useEffect(()=>{c===0&&E.current&&document.activeElement?.closest('[role="graphics-document"]')!==null&&E.current.focus();},[c]);let C=Math.max(rt,a,n),T=o==="bar"?t-(C-a)/2:t-C/2,h=o==="bar"?e-(C-n)/2:e-C/2,d=D=>{A.onFocus?.(D),u?.(r,i);},l=D=>{A.onBlur?.(D),f?.();},v=D=>{S?.(r,i);},g=D=>{m?.();};return jsxs("g",{ref:E,role:"listitem",tabIndex:c,"aria-label":p,className:Ae({type:o,state:b?"selected":I?"focused":"default"}),onFocus:d,onBlur:l,onMouseEnter:v,onMouseLeave:g,onKeyDown:x,"data-testid":`chart-point-${r}-${i}`,children:[jsx("rect",{x:T,y:h,width:C,height:C,fill:"transparent",className:"cursor-pointer"}),o==="bar"?jsx("rect",{x:t,y:e,width:a,height:n,rx:le,ry:le,fill:s,className:"chart-bar"}):jsx("circle",{cx:t,cy:e,r:ce,fill:s,className:"chart-point"}),I&&(o==="bar"?jsx("rect",{x:t-X,y:e-X,width:a+X*2,height:n+X*2,rx:le+X,ry:le+X,fill:"none",stroke:"var(--ring)",strokeWidth:Ne,className:"chart-focus-ring"}):jsx("circle",{cx:t,cy:e,r:ce+X,fill:"none",stroke:"var(--ring)",strokeWidth:Ne,className:"chart-focus-ring"}))]})}fe.displayName="ChartDataPoint";function Oe({series:o,seriesIndex:t,totalSeries:e,dimensions:a,scales:n,color:s,getTabIndex:r,selectedPoint:i,onPointFocus:c,onPointBlur:p,onPointHover:b,onPointHoverEnd:u,onKeyDown:f,formatValue:S}){let{plotArea:m}=a,{allLabels:x,xScale:E,yScale:I,yMin:A}=n,{barWidth:C,getBarX:T}=it(m.width,x.length,e,m.x),h=I(Math.max(0,A));return jsx("g",{className:"chart-bar-series",role:"list","aria-label":`${o.name} series`,"data-testid":`chart-series-${t}`,children:o.data.map((d,l)=>{let v=x.indexOf(d.label);if(v===-1)return null;let g=T(v,t),L=I(d.value),D=Math.abs(h-L),k=d.value>=0?L:h,V=i?.series===t&&i?.point===l,G=`${o.name}: ${d.label}, ${S(d.value)}`;return jsx(fe,{type:"bar",x:g,y:k,width:C,height:D,color:s,seriesIndex:t,pointIndex:l,tabIndex:r(t,l),label:G,isSelected:V,onFocus:c,onBlur:p,onHover:b,onHoverEnd:u,onKeyDown:f},`${d.label}-${l}`)})})}Oe.displayName="ChartBarSeries";var pt="(prefers-reduced-motion: reduce)";function jt(){return typeof window>"u"?false:window.matchMedia(pt).matches}function ft(){let[o,t]=useState(jt);return useEffect(()=>{let e=window.matchMedia(pt);t(e.matches);let a=n=>{t(n.matches);};return e.addEventListener("change",a),()=>e.removeEventListener("change",a)},[]),o}var oo=1e3,no=200,ro="cubic-bezier(0.16, 1, 0.3, 1)";function Fe({series:o,seriesIndex:t,scales:e,color:a,pattern:n,getTabIndex:s,selectedPoint:r,onPointFocus:i,onPointBlur:c,onPointHover:p,onPointHoverEnd:b,onKeyDown:u,formatValue:f}){let{allLabels:S,xScale:m,yScale:x}=e,{reducedMotion:E}=Te(),I=ft(),A=!E&&!I,C=useRef(null),T=useMemo(()=>o.data.map((l,v)=>{let g=S.indexOf(l.label);return g===-1?null:{x:m(g),y:x(l.value),point:l,pointIndex:v,labelIndex:g}}).filter(l=>l!==null).sort((l,v)=>l.labelIndex-v.labelIndex),[o.data,S,m,x]),h=useMemo(()=>T.length===0?"":T.map((l,v)=>`${v===0?"M":"L"} ${l.x} ${l.y}`).join(" "),[T]);useEffect(()=>{let l=C.current;if(!A||!l||!h||typeof l.animate!="function")return;let v=l.getTotalLength();l.style.strokeDasharray=String(v),l.style.strokeDashoffset=String(v);let g=l.animate([{strokeDashoffset:String(v)},{strokeDashoffset:"0"}],{duration:oo,delay:t*no,easing:ro,fill:"forwards"});return g.onfinish=()=>{l.style.strokeDasharray="",l.style.strokeDashoffset="";},()=>{g.cancel(),l.style.strokeDasharray="",l.style.strokeDashoffset="";}},[A,h,t]);let d=te[n]==="none"?void 0:te[n];return jsxs("g",{className:"chart-line-series",role:"list","aria-label":`${o.name} series`,"data-testid":`chart-series-${t}`,children:[jsx("path",{ref:C,d:h,fill:"none",stroke:a,strokeWidth:et,strokeDasharray:d,strokeLinecap:"round",strokeLinejoin:"round",className:"chart-line","aria-hidden":"true"}),T.map(({x:l,y:v,point:g,pointIndex:L})=>{let D=r?.series===t&&r?.point===L,k=`${o.name}: ${g.label}, ${f(g.value)}`;return jsx(fe,{type:"line",x:l,y:v,color:a,seriesIndex:t,pointIndex:L,tabIndex:s(t,L),label:k,isSelected:D,onFocus:i,onBlur:c,onHover:p,onHoverEnd:b,onKeyDown:u},`${g.label}-${L}`)})]})}Fe.displayName="ChartLineSeries";function He({type:o,data:t,dimensions:e,scales:a,titleId:n,descId:s,showGrid:r,xAxisLabel:i,yAxisLabel:c,getSeriesColor:p,getTabIndex:b,selectedPoint:u,formatValue:f,onKeyDown:S,onPointFocus:m,onPointBlur:x,onPointHover:E,onPointHoverEnd:I}){let{width:A,height:C,plotArea:T}=e,{allLabels:h,xScale:d,yScale:l,yTicks:v}=a;return jsxs("svg",{role:"graphics-document","aria-roledescription":`${o} chart`,"aria-labelledby":n,"aria-describedby":s,viewBox:`0 0 ${A} ${C}`,className:"h-full w-full",style:{maxHeight:C},"data-testid":"chart-svg",children:[jsx(_e,{yTicks:v,yScale:l,plotX:T.x,plotWidth:T.width,visible:r}),jsx(Ve,{allLabels:h,yTicks:v,xScale:d,yScale:l,plotArea:T,xAxisLabel:i,yAxisLabel:c,formatValue:f}),t.map((g,L)=>{let D=g.color||p(L),k=g.pattern||"solid";return o==="bar"?jsx(Oe,{series:g,seriesIndex:L,totalSeries:t.length,dimensions:e,scales:a,color:D,getTabIndex:b,selectedPoint:u,onPointFocus:m,onPointBlur:x,onPointHover:E,onPointHoverEnd:I,onKeyDown:S,formatValue:f},g.name):jsx(Fe,{series:g,seriesIndex:L,scales:a,color:D,pattern:k,getTabIndex:b,selectedPoint:u,onPointFocus:m,onPointBlur:x,onPointHover:E,onPointHoverEnd:I,onKeyDown:S,formatValue:f},g.name)})]})}He.displayName="ChartSVG";var Be=cva(["z-50 overflow-hidden rounded-md px-3 py-1.5 text-sm shadow-md","bg-[var(--content-foreground)] text-[var(--content-background)]","animate-in fade-in-0","data-[exiting]:animate-out data-[exiting]:fade-out-0"],{variants:{side:{top:["motion-safe:slide-in-from-bottom-2","data-[exiting]:motion-safe:slide-out-to-bottom-2"],bottom:["motion-safe:slide-in-from-top-2","data-[exiting]:motion-safe:slide-out-to-top-2"],left:["motion-safe:slide-in-from-right-2","data-[exiting]:motion-safe:slide-out-to-right-2"],right:["motion-safe:slide-in-from-left-2","data-[exiting]:motion-safe:slide-out-to-left-2"]}},defaultVariants:{side:"top"}});cva("fill-[var(--content-foreground)]",{variants:{side:{top:"rotate-180",bottom:"rotate-0",left:"rotate-90",right:"-rotate-90"}},defaultVariants:{side:"top"}});var Ct=8;function $e({visible:o,x:t,y:e,seriesName:a,label:n,value:s,chartWidth:r,chartHeight:i,trend:c,trendDirection:p}){let b=useRef(null),[u,f]=useState({left:0,top:0}),[S,m]=useState("top");return useEffect(()=>{if(!o||!b.current)return;let E=b.current.getBoundingClientRect(),I=E.width||120,A=E.height||50,C=t-I/2,T=e-A-Ct,h="top";T<0&&(T=e+Ct+16,h="bottom"),C<0&&(C=0),C+I>r&&(C=r-I),f({left:C,top:T}),m(h);},[o,t,e,r]),o?jsxs("div",{ref:b,"aria-hidden":"true",className:Be({side:S}),style:{position:"absolute",left:u.left,top:u.top,pointerEvents:"none"},"data-testid":"chart-tooltip",children:[jsx("div",{className:"font-medium",children:a}),jsxs("div",{className:"opacity-80",children:[n,": ",jsx("span",{className:"font-semibold",children:s})]}),c&&jsxs("div",{className:"text-xs opacity-70 mt-1 flex items-center gap-1",children:[p==="up"?jsx("svg",{"aria-hidden":"true",className:"h-3 w-3 text-green-500",viewBox:"0 0 20 20",fill:"currentColor",children:jsx("path",{fillRule:"evenodd",d:"M10 17a.75.75 0 01-.75-.75V5.612L5.29 9.77a.75.75 0 01-1.08-1.04l5.25-5.5a.75.75 0 011.08 0l5.25 5.5a.75.75 0 11-1.08 1.04l-3.96-4.158V16.25A.75.75 0 0110 17z",clipRule:"evenodd"})}):p==="down"?jsx("svg",{"aria-hidden":"true",className:"h-3 w-3 text-red-500",viewBox:"0 0 20 20",fill:"currentColor",children:jsx("path",{fillRule:"evenodd",d:"M10 3a.75.75 0 01.75.75v10.638l3.96-4.158a.75.75 0 111.08 1.04l-5.25 5.5a.75.75 0 01-1.08 0l-5.25-5.5a.75.75 0 111.08-1.04l3.96 4.158V3.75A.75.75 0 0110 3z",clipRule:"evenodd"})}):null,jsx("span",{children:c})]})]}):null}$e.displayName="ChartTooltip";function We({data:o,visible:t,type:e,getSeriesColor:a}){return t?jsx("div",{className:Je({visible:t}),role:"list","aria-label":"Chart legend","data-testid":"chart-legend",children:o.map((n,s)=>{let r=n.color||a(s),i=n.pattern||"solid";return jsxs("div",{role:"listitem",className:"flex items-center gap-2",children:[e==="bar"?jsx("div",{className:"h-3 w-3 rounded-sm",style:{backgroundColor:r},"data-testid":`legend-color-${s}`,"aria-hidden":"true"}):jsx("svg",{width:"24",height:"12","aria-hidden":"true","data-testid":`legend-color-${s}`,children:jsx("line",{x1:"0",y1:"6",x2:"24",y2:"6",stroke:r,strokeWidth:"2",strokeDasharray:te[i]==="none"?void 0:te[i]})}),jsx("span",{className:"text-sm text-[var(--content-foreground)]",children:n.name})]},n.name)})}):null}We.displayName="ChartLegend";function Ue({announcement:o}){return jsx(VisuallyHidden,{children:jsx("div",{role:"status","aria-live":"polite","aria-atomic":"true","data-testid":"chart-announcer",children:o})})}Ue.displayName="ChartAnnouncer";function ze({data:o,title:t,xAxisLabel:e,yAxisLabel:a,formatValue:n,allLabels:s}){let r=o.length===1;return jsx(VisuallyHidden,{children:jsxs("table",{"data-testid":"chart-data-table",children:[jsxs("caption",{children:[t," data table"]}),jsx("thead",{children:jsxs("tr",{children:[jsx("th",{scope:"col",children:e}),r?jsx("th",{scope:"col",children:a}):o.map(i=>jsxs("th",{scope:"col",children:[i.name," (",a,")"]},i.name))]})}),jsx("tbody",{children:s.map(i=>jsxs("tr",{children:[jsx("th",{scope:"row",children:i}),o.map(c=>{let p=c.data.find(b=>b.label===i);return jsx("td",{children:p?n(p.value):"\u2014"},c.name)})]},i))})]})})}ze.displayName="ChartDataTable";function Tt(o){let{roving:t,onSelect:e,onClear:a,disabled:n=false}=o;return {onKeyDown:useCallback(r=>{if(!n)switch(r.key){case "ArrowRight":r.preventDefault(),t.moveRight();break;case "ArrowLeft":r.preventDefault(),t.moveLeft();break;case "ArrowDown":r.preventDefault(),t.moveDown();break;case "ArrowUp":r.preventDefault(),t.moveUp();break;case "Home":r.preventDefault(),t.moveToStart();break;case "End":r.preventDefault(),t.moveToEnd();break;case "Enter":case " ":r.preventDefault(),e?.();break;case "Escape":r.preventDefault(),a?.();break;}},[t,e,a,n])}}function Do({chartId:o}){let t=Te(),{data:e,type:a,title:n,xAxisLabel:s,yAxisLabel:r,showTooltip:i,showGrid:c,showLegend:p,dimensions:b,scales:u,announcement:f,isTooltipVisible:S,tooltipPoint:m,currentTrend:x,currentTrendDirection:E,selectedPoint:I,getTabIndex:A,formatValue:C,getSeriesColor:T,getPointCoordinates:h,setFocus:d,selectPoint:l,clearSelection:v,showTooltipAt:g,hideTooltip:L}=t,D=`${o}-title`,k=`${o}-desc`,V=Ce({rows:e.length,cols:F=>e[F]?.data.length||0,onFocusChange:(F,U)=>{d(F,U);}}),{onKeyDown:G}=Tt({roving:V,onSelect:()=>{l(V.focusedRow,V.focusedCol);},onClear:()=>{v();}}),O=useCallback((F,U)=>{V.setFocus(F,U),g(F,U);},[V,g]),re=useCallback(()=>{},[]),we=useCallback((F,U)=>{g(F,U);},[g]),B=useCallback(()=>{L();},[L]),ae=useMemo(()=>m?h(m.series,m.point)||{x:0,y:0}:{x:0,y:0},[m,h]),z=useMemo(()=>m?e[m.series]:null,[m,e]),ee=useMemo(()=>m?z?.data[m.point]:null,[m,z]),ge=useMemo(()=>p??e.length>1,[p,e.length]);return jsxs(Fragment,{children:[jsx(Ue,{announcement:f}),jsxs("div",{className:"relative",children:[jsx("div",{className:"relative z-0",children:jsx(He,{type:a,data:e,dimensions:b,scales:u,titleId:D,descId:k,showGrid:c,xAxisLabel:s,yAxisLabel:r,getSeriesColor:T,getTabIndex:A,selectedPoint:I,formatValue:C,onKeyDown:G,onPointFocus:O,onPointBlur:re,onPointHover:we,onPointHoverEnd:B})}),i&&ee&&z&&jsx($e,{visible:S,x:ae.x,y:ae.y,seriesName:z.name,label:ee.label,value:C(ee.value),chartWidth:b.width,chartHeight:b.height,trend:x,trendDirection:E})]}),jsx(We,{data:e,visible:ge,type:a,getSeriesColor:T}),jsx(ze,{data:e,title:n,xAxisLabel:s,yAxisLabel:r,formatValue:C,allLabels:u.allLabels})]})}var Pt=forwardRef(({data:o,type:t,title:e,description:a,xAxisLabel:n,yAxisLabel:s,variant:r="default",className:i,showTooltip:c=true,showGrid:p=true,showLegend:b,announceTrends:u=false,trendUpFormat:f="up {percent}% from previous",trendDownFormat:S="down {percent}% from previous",startAtZero:m=true,reducedMotion:x,onPointFocus:E,onPointSelect:I,id:A,"aria-label":C,"aria-labelledby":T,"aria-describedby":h,"data-testid":d,...l},v)=>{let g=useRef(null),L=useId(),D=A||`chart-${L}`,k=`${D}-title`,V=`${D}-desc`,G=b??o.length>1;return jsxs("figure",{ref:O=>{typeof v=="function"?v(O):v&&(v.current=O),g.current=O;},id:D,role:"figure","aria-label":C,"aria-labelledby":T||k,"aria-describedby":h||V,"data-testid":d,className:se(Ee({variant:r}),"p-4",i),...l,children:[jsxs("figcaption",{className:"sr-only",children:[jsx("span",{id:k,children:e}),jsx("span",{id:V,children:a})]}),jsx(ut,{containerRef:g,data:o,type:t,title:e,description:a,xAxisLabel:n,yAxisLabel:s,showTooltip:c,showGrid:p,showLegend:G,announceTrends:u,trendUpFormat:f,trendDownFormat:S,startAtZero:m,reducedMotion:x,onPointFocus:E,onPointSelect:I,children:jsx(Do,{chartId:D})})]})});Pt.displayName="Chart";var Rt=memo(Pt);Rt.displayName="Chart";var It=z.object({className:z.string().optional(),children:z.any().optional(),id:z.string().optional(),"aria-label":z.string().optional(),"aria-labelledby":z.string().optional(),"aria-describedby":z.string().optional(),"aria-live":z.enum(["off","polite","assertive"]).optional(),"aria-hidden":z.boolean().optional(),"data-testid":z.string().optional()});var Dt=z.object({label:z.string().min(1,"Label is required"),value:z.number(),description:z.string().optional()}),wt=z.enum(["solid","dashed","dotted"]),Et=z.object({name:z.string().min(1,"Series name is required"),color:z.string().optional(),pattern:wt.optional().default("solid"),data:z.array(Dt).min(1,"At least one data point required")}),At=z.enum(["bar","line"]),Lt=z.enum(["default","muted"]),Eo=It.extend({data:z.array(Et).min(1,"At least one data series required").max(5,"Maximum 5 series allowed"),type:At,title:z.string().min(1,"Title is required"),description:z.string().min(1,"Description is required"),xAxisLabel:z.string().min(1,"X-axis label is required"),yAxisLabel:z.string().min(1,"Y-axis label is required"),variant:Lt.optional().default("default"),showTooltip:z.boolean().optional().default(true),showGrid:z.boolean().optional().default(true),showLegend:z.boolean().optional(),announceTrends:z.boolean().optional().default(false),trendUpFormat:z.string().optional().default("up {percent}% from previous"),trendDownFormat:z.string().optional().default("down {percent}% from previous"),startAtZero:z.boolean().optional().default(true),reducedMotion:z.boolean().optional(),onPointFocus:z.unknown().optional(),onPointSelect:z.unknown().optional()});export{Rt as Chart,Eo as ChartPropsSchema,At as ChartTypeSchema,Lt as ChartVariantSchema,Dt as DataPointSchema,Et as DataSeriesSchema,wt as LinePatternSchema,Ee as chartVariants,Ae as dataPointVariants};//# sourceMappingURL=index.mjs.map
|
|
3
3
|
//# sourceMappingURL=index.mjs.map
|