neba 1.15.0 → 1.16.0

package/dist/components/sparkline/Sparkline.js

@@ -1 +1 @@
-"use client";import{jsx as a,jsxs as e,Fragment as l}from"react/jsx-runtime";import*as r from"react";import{areaPath as t,barMaxThickness as n,barPath as i,barRadius as o,extentOf as s,lineWidths as m,markerRadii as h,markGap as u,resolveColor as c,sparklineHeights as d,toValue as p}from"../../internal/chart.js";import{useMeasuredWidth as f}from"../../internal/chart-frame.js";import{cx as x,srOnlyClasses as v}from"../../internal/styles.js";import{linePath as b}from"../../internal/chart.js";import{useStyleDefaults as g}from"../../internal/defaults.js";export const Sparkline=/*@__PURE__*/r.forwardRef(function Sparkline(k,M){const{data:y,shape:j="line",curve:w="linear",size:$="md",color:N,endDot:W=!1,baseline:z,min:C,max:L,width:R,label:S,className:B,style:D,...F}=g(k,["size"]),G=r.useRef(null),I=f(G),q=r.useId().replace(/:/g,""),A=r.useMemo(()=>y.map(p),[y]),E=d[$],H=m[$],J=h[$],K=s([A],!1),O="bar"===j,P=C??(K?Math.min(K.min,z??K.min,O?0:K.min):0),Q=L??(K?Math.max(K.max,z??K.max,O?0:K.max):1),T=Q-P||1,U=Q===P&&!O,V=Math.min(Math.max(P,0),Q),X="number"==typeof R?R:I,Y=c(N??"var(--neba-chart-1)"),Z="bar"===j?0:H/2+(W?J:0),_=Z,aa=Math.max(1,E-2*Z),ea=a=>U?_+aa/2:_+(1-(a-P)/T)*aa,la=A.length>1?X/(A.length-1):X,ra=A.map((a,e)=>null===a.value?null:{x:e*la,y:ea(a.value)}),ta=(()=>{for(let a=A.length-1;a>=0;a--)if(null!==A[a].value)return a;return-1})(),na=Math.min(n[$]/2,Math.max(1,X/Math.max(1,A.length)-u));return e("div",{ref:M,className:x("relative block",B??void 0),style:{width:R??"100%",height:E,...D},...F,children:[a("div",{ref:G,className:"absolute inset-0",children:X>0&&A.length>0?e("svg",{width:X,height:E,viewBox:`0 0 ${X} ${E}`,role:S?"img":"presentation","aria-label":S,"aria-hidden":!S||void 0,className:"block overflow-visible",children:["area"===j?e(l,{children:[a("defs",{children:e("linearGradient",{id:`${q}-fill`,x1:"0",y1:"0",x2:"0",y2:"1",children:[a("stop",{offset:"0%",stopColor:`color-mix(in oklab, ${Y} 32%, transparent)`}),a("stop",{offset:"100%",stopColor:`color-mix(in oklab, ${Y} 2%, transparent)`})]})}),a("path",{d:t(ra,E,w),fill:`url(#${q}-fill)`})]}):null,void 0!==z?a("line",{x1:0,x2:X,y1:ea(z),y2:ea(z),stroke:"var(--neba-chart-baseline)",strokeWidth:1}):null,"bar"===j?A.map((e,l)=>null===e.value?null:a("path",{d:i(l*(X/Math.max(1,A.length))+(X/Math.max(1,A.length)-na)/2,Math.min(ea(e.value),ea(V)),na,Math.max(1,Math.abs(ea(e.value)-ea(V))),o/2,e.value>=0?"up":"down"),fill:e.color??Y},l)):a("path",{d:b(ra,w),fill:"none",stroke:Y,strokeWidth:H,strokeLinecap:"round",strokeLinejoin:"round"}),W&&ta>=0&&"bar"!==j?a("circle",{cx:ra[ta].x,cy:ra[ta].y,r:J,fill:Y,stroke:"var(--neba-chart-gap)",strokeWidth:u}):null]}):null}),S?a("span",{className:v,children:A.map(a=>null===a.value?"—":a.value).join(", ")}):null]})});
+"use client";import{jsx as e,jsxs as a,Fragment as l}from"react/jsx-runtime";import*as r from"react";import{areaPath as t,barMaxThickness as n,barPath as i,barRadius as o,extentOf as s,lineWidths as m,markerRadii as h,markGap as u,resolveColor as c,sparklineHeights as d,toValue as p}from"../../internal/chart.js";import{useMeasuredWidth as f}from"../../internal/chart-frame.js";import{cx as x,srOnlyClasses as v}from"../../internal/styles.js";import{linePath as b}from"../../internal/chart.js";import{useStyleDefaults as g}from"../../internal/defaults.js";export const Sparkline=/*@__PURE__*/r.forwardRef(function Sparkline(k,M){const{data:y,shape:j="line",curve:w="linear",nulls:$="gap",size:N="md",color:z,endDot:W=!1,baseline:B,min:C,max:L,width:R,label:S,className:D,style:F,...G}=g(k,["size"]),I=r.useRef(null),q=f(I),A=r.useId().replace(/:/g,""),E=r.useMemo(()=>{const e=y.map(p);return"zero"===$?e.map(e=>null===e.value?{...e,value:0}:e):e},[y,$]),H=d[N],J=m[N],K=h[N],O=s([E],!1),P="bar"===j,Q=C??(O?Math.min(O.min,B??O.min,P?0:O.min):0),T=L??(O?Math.max(O.max,B??O.max,P?0:O.max):1),U=T-Q||1,V=T===Q&&!P,X=Math.min(Math.max(Q,0),T),Y="number"==typeof R?R:q,Z=c(z??"var(--neba-chart-1)"),_="bar"===j?0:J/2+(W?K:0),ee=_,ae=Math.max(1,H-2*_),le=e=>V?ee+ae/2:ee+(1-(e-Q)/U)*ae,re=E.length>1?Y/(E.length-1):Y,te=E.map((e,a)=>null===e.value?null:{x:a*re,y:le(e.value)}),ne="connect"===$?te.filter(Boolean):te,ie=(()=>{for(let e=E.length-1;e>=0;e--)if(null!==E[e].value)return e;return-1})(),oe=Math.min(n[N]/2,Math.max(1,Y/Math.max(1,E.length)-u));return a("div",{ref:M,className:x("relative block",D??void 0),style:{width:R??"100%",height:H,...F},...G,children:[e("div",{ref:I,className:"absolute inset-0",children:Y>0&&E.length>0?a("svg",{width:Y,height:H,viewBox:`0 0 ${Y} ${H}`,role:S?"img":"presentation","aria-label":S,"aria-hidden":!S||void 0,className:"block overflow-visible",children:["area"===j?a(l,{children:[e("defs",{children:a("linearGradient",{id:`${A}-fill`,x1:"0",y1:"0",x2:"0",y2:"1",children:[e("stop",{offset:"0%",stopColor:`color-mix(in oklab, ${Z} 32%, transparent)`}),e("stop",{offset:"100%",stopColor:`color-mix(in oklab, ${Z} 2%, transparent)`})]})}),e("path",{d:t(ne,H,w),fill:`url(#${A}-fill)`})]}):null,void 0!==B?e("line",{x1:0,x2:Y,y1:le(B),y2:le(B),stroke:"var(--neba-chart-baseline)",strokeWidth:1}):null,"bar"===j?E.map((a,l)=>null===a.value?null:e("path",{d:i(l*(Y/Math.max(1,E.length))+(Y/Math.max(1,E.length)-oe)/2,Math.min(le(a.value),le(X)),oe,Math.max(1,Math.abs(le(a.value)-le(X))),o/2,a.value>=0?"up":"down"),fill:a.color??Z},l)):e("path",{d:b(ne,w),fill:"none",stroke:Z,strokeWidth:J,strokeLinecap:"round",strokeLinejoin:"round"}),W&&ie>=0&&"bar"!==j?e("circle",{cx:te[ie].x,cy:te[ie].y,r:K,fill:Z,stroke:"var(--neba-chart-gap)",strokeWidth:u}):null]}):null}),S?e("span",{className:v,children:E.map(e=>null===e.value?"—":e.value).join(", ")}):null]})});

package/dist/components/switch/Switch.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as a,Fragment as r}from"react/jsx-runtime";import*as n from"react";import{Switch as t}from"@base-ui/react/switch";import{Field as l}from"@base-ui/react/field";import{controlTextClasses as o,cx as i,hitAreaClasses as s,metaTextClasses as c,surfaceClasses as d,tickRowLeadingClasses as b}from"../../internal/styles.js";import{useStyleDefaults as h}from"../../internal/defaults.js";import{useFieldsetDisabled as m}from"../../internal/fieldset.js";const f={xs:"h-3.5 w-6",sm:"h-4 w-7",md:"h-5 w-9",lg:"h-6 w-11",xl:"h-7 w-13"},u={xs:"data-[checked]:start-[calc(100%-0.75rem)]",sm:"data-[checked]:start-[calc(100%-0.875rem)]",md:"data-[checked]:start-[calc(100%-1.125rem)]",lg:"data-[checked]:start-[calc(100%-1.375rem)]",xl:"data-[checked]:start-[calc(100%-1.625rem)]"},v=["relative inline-flex shrink-0 border",s,"[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]","rounded-full","[transition-property:background-color,border-color,box-shadow]","[transition-duration:var(--neba-duration-fill),var(--neba-duration),var(--neba-duration)]","[transition-timing-function:var(--neba-ease)]","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2"].join(" "),g=[d,"cursor-pointer bg-(--neba-groove) [border-color:var(--n-line)]","hover:bg-(--neba-groove-hover) hover:[border-color:var(--n-line-hover)]","data-[checked]:bg-(--n-fill) data-[checked]:[border-color:transparent]","data-[checked]:hover:bg-(--n-fill-hover)"].join(" "),p=[d,"cursor-default bg-(--neba-groove) [border-color:var(--n-line)]","[filter:saturate(0.55)]","data-[checked]:bg-(--n-fill) data-[checked]:[border-color:transparent]"].join(" "),x=["cursor-not-allowed bg-transparent [border-color:var(--neba-disabled-border)] shadow-none","data-[checked]:bg-(--neba-disabled-bg)"].join(" "),w=["absolute inset-y-0.5 start-0.5 aspect-square rounded-full bg-(--neba-surface)","[box-shadow:var(--neba-shadow-1)]","[transition:inset-inline-start_var(--neba-duration)_var(--neba-ease)]"].join(" ");export const Switch=/*@__PURE__*/n.forwardRef(function Switch(n,s){const{size:d="md",color:k="primary",label:N,description:j,error:y,invalid:$,labelPlacement:_="end",disabled:R,readOnly:S=!1,className:z,classNames:O,style:q,...D}=h(n,["size"]),E=m(R),F=null!=y&&!1!==y&&""!==y,L=$??F,P=L?"danger":k,T={"--n-fill":`var(--neba-${P}-fill)`,"--n-fill-hover":`var(--neba-${P}-fill-hover)`,"--n-accent":`var(--neba-${P}-accent)`,"--n-line":`var(--neba-${P}-line)`,"--n-line-hover":`var(--neba-${P}-line-hover)`,"--n-ring":`var(--neba-${P}-ring)`},A=e("span",{className:"flex h-[1lh] shrink-0 items-center",children:e(t.Root,{ref:s,className:i("neba-switch",v,f[d],E?x:S?p:g,O?.control),disabled:E,readOnly:S,...D,children:e(t.Thumb,{className:i("neba-switch-thumb",w,u[d],O?.thumb)})})}),B=N||j?a("span",{className:i("flex min-w-0 flex-col gap-0.5","start"===_?"flex-1":""),children:[N?e(l.Label,{className:i("leading-[1.4]",E?"text-(--neba-disabled-fg)":"cursor-pointer text-(--neba-fg)",O?.label),children:N}):null,j?e(l.Description,{className:i(c[d],"text-(--neba-muted-fg)",O?.description),children:j}):null]}):null;return a(l.Root,{disabled:E,invalid:L,className:i("inline-flex flex-col gap-1 align-top",z??""),style:{...T,...q},children:[e("div",{className:`flex items-start gap-2.5 ${o[d]} ${b}`,children:a(r,"start"===_?{children:[B,A]}:{children:[A,B]})}),e(l.Error,F?{match:!0,className:i(c[d],"text-(--n-accent)",O?.error),children:y}:{className:i(c[d],"text-(--n-accent)",O?.error)})]})});
+"use client";import{jsx as e,jsxs as a,Fragment as r}from"react/jsx-runtime";import*as n from"react";import{Switch as l}from"@base-ui/react/switch";import{Field as t}from"@base-ui/react/field";import{controlTextClasses as o,cx as i,hitAreaClasses as s,metaTextClasses as c,surfaceClasses as d,tickRowLeadingClasses as b}from"../../internal/styles.js";import{useStyleDefaults as h}from"../../internal/defaults.js";import{useFieldsetDisabled as m}from"../../internal/fieldset.js";const f={xs:"h-3.5 w-6",sm:"h-4 w-7",md:"h-5 w-9",lg:"h-6 w-11",xl:"h-7 w-13"},u={xs:"data-[checked]:start-[calc(100%-0.75rem)]",sm:"data-[checked]:start-[calc(100%-0.875rem)]",md:"data-[checked]:start-[calc(100%-1.125rem)]",lg:"data-[checked]:start-[calc(100%-1.375rem)]",xl:"data-[checked]:start-[calc(100%-1.625rem)]"},v={xs:"",sm:"",md:"py-[calc((1.25rem-1lh)/2)]",lg:"py-[calc((1.5rem-1lh)/2)]",xl:"py-[calc((1.75rem-1lh)/2)]"},g=["relative inline-flex shrink-0 border",s,"[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]","rounded-full","[transition-property:background-color,border-color,box-shadow]","[transition-duration:var(--neba-duration-fill),var(--neba-duration),var(--neba-duration)]","[transition-timing-function:var(--neba-ease)]","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2"].join(" "),p=[d,"cursor-pointer bg-(--neba-groove) [border-color:var(--n-line)]","hover:bg-(--neba-groove-hover) hover:[border-color:var(--n-line-hover)]","data-[checked]:bg-(--n-fill) data-[checked]:[border-color:transparent]","data-[checked]:hover:bg-(--n-fill-hover)"].join(" "),x=[d,"cursor-default bg-(--neba-groove) [border-color:var(--n-line)]","[filter:saturate(0.55)]","data-[checked]:bg-(--n-fill) data-[checked]:[border-color:transparent]"].join(" "),w=["cursor-not-allowed bg-transparent [border-color:var(--neba-disabled-border)] shadow-none","data-[checked]:bg-(--neba-disabled-bg)"].join(" "),k=["absolute inset-y-0.5 start-0.5 aspect-square rounded-full bg-(--neba-surface)","[box-shadow:var(--neba-shadow-1)]","[transition:inset-inline-start_var(--neba-duration)_var(--neba-ease)]"].join(" ");export const Switch=/*@__PURE__*/n.forwardRef(function Switch(n,s){const{size:d="md",color:N="primary",label:j,description:y,error:$,invalid:_,labelPlacement:R="end",disabled:S,readOnly:z=!1,className:O,classNames:q,style:D,...E}=h(n,["size"]),F=m(S),L=null!=$&&!1!==$&&""!==$,P=_??L,T=P?"danger":N,A={"--n-fill":`var(--neba-${T}-fill)`,"--n-fill-hover":`var(--neba-${T}-fill-hover)`,"--n-accent":`var(--neba-${T}-accent)`,"--n-line":`var(--neba-${T}-line)`,"--n-line-hover":`var(--neba-${T}-line-hover)`,"--n-ring":`var(--neba-${T}-ring)`},B=e("span",{className:"flex h-[1lh] shrink-0 items-center",children:e(l.Root,{ref:s,className:i("neba-switch",g,f[d],F?w:z?x:p,q?.control),disabled:F,readOnly:z,...E,children:e(l.Thumb,{className:i("neba-switch-thumb",k,u[d],q?.thumb)})})}),C=j||y?a("span",{className:i("flex min-w-0 flex-col gap-0.5","start"===R?"flex-1":""),children:[j?e(t.Label,{className:i("leading-[1.4]",F?"text-(--neba-disabled-fg)":"cursor-pointer text-(--neba-fg)",q?.label),children:j}):null,y?e(t.Description,{className:i(c[d],"text-(--neba-muted-fg)",q?.description),children:y}):null]}):null;return a(t.Root,{disabled:F,invalid:P,className:i("inline-flex flex-col gap-1 align-top",O??""),style:{...A,...D},children:[e("div",{className:i("flex items-start gap-2.5",o[d],b,v[d]),children:a(r,"start"===R?{children:[C,B]}:{children:[B,C]})}),e(t.Error,L?{match:!0,className:i(c[d],"text-(--n-accent)",q?.error),children:$}:{className:i(c[d],"text-(--n-accent)",q?.error)})]})});

package/dist/components/tabs/Tabs.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { NebaOrientation, NebaStyleProps, NebaVariant } from '../../types.js';
+import type { NebaAlign, NebaOrientation, NebaStyleProps, NebaVariant } from '../../types.js';
 /** A tab's value. The same restraint Select puts on its own — an identifier. */
 export type TabValue = string | number;
 /**
@@ -89,6 +89,22 @@ export interface TabsProps extends Omit<NebaStyleProps, 'variant'>, Omit<React.C
     wheel?: boolean;
     /** The tabs share the bar's full width, each taking an equal share of it. */
     fullWidth?: boolean;
+    /**
+     * Where a tab's label sits inside the tab, once the tab is wider than the
+     * label is.
+     *
+     * Which is the whole of when this is worth setting: a horizontal bar sizes
+     * each tab to its own content, so there is nothing to align until
+     * `fullWidth` gives them all an equal share. A **vertical** bar is the case
+     * it exists for — the tabs there are a column, every one of them as wide as
+     * the longest, and centred labels down a column read as a ragged edge on
+     * both sides. `start` is what a sidebar of tabs usually wants.
+     *
+     * It moves the label and the icons together, and nothing else: the tab keeps
+     * its own size, its padding and its indicator.
+     * @default 'center'
+     */
+    align?: NebaAlign;
     children?: React.ReactNode;
 }
 export interface TabProps extends Omit<React.ComponentPropsWithoutRef<'button'>, 'value' | 'color'> {

package/dist/components/tabs/Tabs.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{glowClasses as o,spotlightSlot as l,trackPointer as n}from"../../internal/glow.js";import{Tabs as i}from"@base-ui/react/tabs";import{controlHeightClasses as r,controlHeightValues as s,controlTextClasses as c,cx as d,gapClasses as f,hasContent as u,iconClasses as b,paddingXClasses as v,radiusClasses as h,surfaceClasses as p,surfaceSlots as m,transitionClasses as x}from"../../internal/styles.js";import{observeResize as w}from"../../internal/observe.js";import{bindAxisWheel as g}from"../../internal/wheel.js";import{useStyleDefaults as y}from"../../internal/defaults.js";const z=/*@__PURE__*/a.createContext({variant:"outline",size:"md",density:"default",orientation:"horizontal",fullWidth:!1}),j={solid:{horizontal:`${p} inline-flex bg-(--n-panel) p-1 [box-shadow:var(--neba-plate-glass)]`,vertical:`${p} inline-flex flex-col bg-(--n-panel) p-1 [box-shadow:var(--neba-plate-glass)]`},outline:{horizontal:"flex border-b [border-color:var(--n-line)]",vertical:"flex flex-col border-e [border-color:var(--n-line)]"},text:{horizontal:"flex",vertical:"flex flex-col"}},N={solid:{horizontal:"absolute left-(--active-tab-left) top-(--active-tab-top) h-(--active-tab-height) w-(--active-tab-width)",vertical:"absolute left-(--active-tab-left) top-(--active-tab-top) h-(--active-tab-height) w-(--active-tab-width)"},outline:{horizontal:"absolute bottom-0 left-(--active-tab-left) h-0.5 w-(--active-tab-width)",vertical:"absolute end-0 top-(--active-tab-top) h-(--active-tab-height) w-0.5"},text:{horizontal:"absolute bottom-0 left-(--active-tab-left) h-0.5 w-(--active-tab-width)",vertical:"absolute end-0 top-(--active-tab-top) h-(--active-tab-height) w-0.5"}},T={horizontal:"absolute left-(--active-tab-left) top-(--active-tab-top) h-(--active-tab-height) w-(--active-tab-width) border-b-2 [border-color:var(--n-accent)] !bg-transparent",vertical:"absolute left-(--active-tab-left) top-(--active-tab-top) h-(--active-tab-height) w-(--active-tab-width) border-e-2 [border-color:var(--n-accent)] !bg-transparent"},$={solid:`${p} bg-(--n-panel-press) [box-shadow:var(--neba-shadow-1),var(--neba-plate-glass)]`,outline:"bg-(--n-accent)",text:"bg-(--n-accent)"},k={solid:"text-(--neba-muted-fg) hover:text-(--neba-fg) data-[active]:text-(--n-accent)",outline:"text-(--neba-muted-fg) hover:text-(--neba-fg) data-[active]:text-(--n-accent)",text:"text-(--neba-muted-fg) hover:text-(--neba-fg) data-[active]:text-(--n-accent)"};export const Tab=/*@__PURE__*/a.forwardRef(function Tab({value:s,startIcon:p,endIcon:m,disabled:w=!1,className:g,style:y,children:j,...N},T){const{variant:$,size:M,density:E,fullWidth:P}=a.useContext(z);return t(i.Tab,{ref:T,value:s,disabled:w,style:{...w?void 0:l,...y},className:d("relative z-10 inline-flex shrink-0 cursor-pointer items-center justify-center select-none","whitespace-nowrap font-medium","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",r[M],c[M],f[M],v[E][M],"solid"===$?h[M]:"",x,b,k[$],"focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:[outline-offset:-2px]","data-[disabled]:cursor-not-allowed data-[disabled]:text-(--neba-disabled-fg)",w?"":o,P?"flex-1":"",g??""),...N,onPointerMove:n(N.onPointerMove,!w),children:[u(p)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:p}):null,j,u(m)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:m}):null]})});export const TabPanel=/*@__PURE__*/a.forwardRef(function TabPanel({value:t,keepMounted:o=!1,className:l,children:n,...r},s){const{size:c}=a.useContext(z);return e(i.Panel,{ref:s,value:t,keepMounted:o,className:["min-w-0 flex-1 text-(--neba-fg)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2","data-[starting-style]:opacity-0","[transition:opacity_var(--neba-duration)_var(--neba-ease)]",h[c],l??""].filter(Boolean).join(" "),...r,children:n})});export const Tabs=/*@__PURE__*/a.forwardRef(function Tabs(o,l){const{variant:n="outline",size:r="md",color:c="primary",density:f="default",value:u,defaultValue:b,onValueChange:v,orientation:p="horizontal",activateOnFocus:x=!1,loopFocus:k=!0,overflow:M="scroll",lines:E,wheel:P=!0,fullWidth:C=!1,className:R,style:V,children:W,..._}=y(o,["size","density","variant"]),F="horizontal"===p,A="wrap"===M,L=a.useRef(null),H=a.useRef(null),I=a.useMemo(()=>({variant:n,size:r,density:f,orientation:p,fullWidth:C}),[n,r,f,p,C]),O=[],B=[],q=e=>a.Children.forEach(e,e=>{a.isValidElement(e)&&e.type===a.Fragment?q(e.props.children):a.isValidElement(e)&&e.type===TabPanel?B.push(e):null!=e&&!1!==e&&O.push(e)});q(W);const D=O.length;return a.useEffect(()=>{const e=H.current,t=L.current;if(!e||!t)return;const a=()=>{const a=Math.abs(F?e.scrollLeft:e.scrollTop),o=F?e.clientWidth:e.clientHeight,l=F?e.scrollWidth:e.scrollHeight,n=F?"x":"y",i=F?"y":"x";t.toggleAttribute(`data-overflow-${n}-start`,a>1),t.toggleAttribute(`data-overflow-${n}-end`,l-o-a>1),t.removeAttribute(`data-overflow-${i}-start`),t.removeAttribute(`data-overflow-${i}-end`)};a(),e.addEventListener("scroll",a,{passive:!0});const o=w(e,a);return()=>{e.removeEventListener("scroll",a),o()}},[F,D]),a.useEffect(()=>{const e=H.current;if(e&&P)return g(e)},[P]),e(z.Provider,{value:I,children:t(i.Root,{ref:e=>{L.current=e,"function"==typeof l?l(e):l&&(l.current=e)},value:u,defaultValue:b,onValueChange:e=>v?.(e),orientation:p,className:d("flex min-w-0","vertical"===p?"flex-row gap-4":"flex-col gap-4",R??""),style:{...m(c,0),...V},..._,children:[t(i.List,{ref:H,activateOnFocus:x,loopFocus:k,className:d("relative shrink-0",j[n][p],"solid"===n?h[r]:"",C&&"horizontal"===p?"w-full":"",A?"flex-wrap":F?"overflow-x-auto":"",A&&void 0!==E?F?"overflow-y-auto":"overflow-x-auto":"",!A&&F?"overflow-y-hidden":"","overscroll-contain","[scrollbar-width:none] [&::-webkit-scrollbar]:hidden","neba-scroll-fade"),style:{"--n-fade":"2rem",maxHeight:A&&void 0!==E?`calc(${s[r]} * ${Math.max(1,Math.round(E))}${"solid"===n?" + 0.5rem":"outline"===n&&F?" + 1px":""})`:void 0},children:[O,e(i.Indicator,{className:["pointer-events-none",A&&"solid"!==n?T[p]:N[n][p],$[n],"solid"===n?h[r]:"rounded-full","[transition-property:left,top,width,height]","[transition-duration:var(--neba-duration)]","[transition-timing-function:var(--neba-ease)]"].join(" ")})]}),B]})})});
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{glowClasses as o,spotlightSlot as n,trackPointer as l}from"../../internal/glow.js";import{Tabs as i}from"@base-ui/react/tabs";import{controlHeightClasses as r,controlHeightValues as s,controlTextClasses as c,cx as d,gapClasses as f,hasContent as u,iconClasses as b,paddingXClasses as v,radiusClasses as h,surfaceClasses as p,surfaceSlots as m,transitionClasses as x}from"../../internal/styles.js";import{observeResize as g}from"../../internal/observe.js";import{bindAxisWheel as w}from"../../internal/wheel.js";import{useStyleDefaults as y}from"../../internal/defaults.js";const z=/*@__PURE__*/a.createContext({variant:"outline",size:"md",density:"default",orientation:"horizontal",fullWidth:!1,align:"center"}),j={solid:{horizontal:`${p} inline-flex bg-(--n-panel) p-1 [box-shadow:var(--neba-plate-glass)]`,vertical:`${p} inline-flex flex-col bg-(--n-panel) p-1 [box-shadow:var(--neba-plate-glass)]`},outline:{horizontal:"flex border-b [border-color:var(--n-line)]",vertical:"flex flex-col border-e [border-color:var(--n-line)]"},text:{horizontal:"flex",vertical:"flex flex-col"}},N={solid:{horizontal:"absolute left-(--active-tab-left) top-(--active-tab-top) h-(--active-tab-height) w-(--active-tab-width)",vertical:"absolute left-(--active-tab-left) top-(--active-tab-top) h-(--active-tab-height) w-(--active-tab-width)"},outline:{horizontal:"absolute bottom-0 left-(--active-tab-left) h-0.5 w-(--active-tab-width)",vertical:"absolute end-0 top-(--active-tab-top) h-(--active-tab-height) w-0.5"},text:{horizontal:"absolute bottom-0 left-(--active-tab-left) h-0.5 w-(--active-tab-width)",vertical:"absolute end-0 top-(--active-tab-top) h-(--active-tab-height) w-0.5"}},T={horizontal:"absolute left-(--active-tab-left) top-(--active-tab-top) h-(--active-tab-height) w-(--active-tab-width) border-b-2 [border-color:var(--n-accent)] !bg-transparent",vertical:"absolute left-(--active-tab-left) top-(--active-tab-top) h-(--active-tab-height) w-(--active-tab-width) border-e-2 [border-color:var(--n-accent)] !bg-transparent"},$={solid:`${p} bg-(--n-panel-press) [box-shadow:var(--neba-shadow-1),var(--neba-plate-glass)]`,outline:"bg-(--n-accent)",text:"bg-(--n-accent)"},k={start:"justify-start",center:"justify-center",end:"justify-end"},M={solid:"text-(--neba-muted-fg) hover:text-(--neba-fg) data-[active]:text-(--n-accent)",outline:"text-(--neba-muted-fg) hover:text-(--neba-fg) data-[active]:text-(--n-accent)",text:"text-(--neba-muted-fg) hover:text-(--neba-fg) data-[active]:text-(--n-accent)"};export const Tab=/*@__PURE__*/a.forwardRef(function Tab({value:s,startIcon:p,endIcon:m,disabled:g=!1,className:w,style:y,children:j,...N},T){const{variant:$,size:E,density:P,fullWidth:C,align:R}=a.useContext(z);return t(i.Tab,{ref:T,value:s,disabled:g,style:{...g?void 0:n,...y},className:d("relative z-10 inline-flex shrink-0 cursor-pointer items-center select-none","whitespace-nowrap font-medium",k[R],"[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",r[E],c[E],f[E],v[P][E],"solid"===$?h[E]:"",x,b,M[$],"focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:[outline-offset:-2px]","data-[disabled]:cursor-not-allowed data-[disabled]:text-(--neba-disabled-fg)",g?"":o,C?"flex-1":"",w??""),...N,onPointerMove:l(N.onPointerMove,!g),children:[u(p)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:p}):null,j,u(m)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:m}):null]})});export const TabPanel=/*@__PURE__*/a.forwardRef(function TabPanel({value:t,keepMounted:o=!1,className:n,children:l,...r},s){const{size:c}=a.useContext(z);return e(i.Panel,{ref:s,value:t,keepMounted:o,className:["min-w-0 flex-1 text-(--neba-fg)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2","data-[starting-style]:opacity-0","[transition:opacity_var(--neba-duration)_var(--neba-ease)]",h[c],n??""].filter(Boolean).join(" "),...r,children:l})});export const Tabs=/*@__PURE__*/a.forwardRef(function Tabs(o,n){const{variant:l="outline",size:r="md",color:c="primary",density:f="default",value:u,defaultValue:b,onValueChange:v,orientation:p="horizontal",activateOnFocus:x=!1,loopFocus:k=!0,overflow:M="scroll",lines:E,wheel:P=!0,fullWidth:C=!1,align:R="center",className:V,style:W,children:_,...F}=y(o,["size","density","variant"]),A="horizontal"===p,L="wrap"===M,H=a.useRef(null),I=a.useRef(null),O=a.useMemo(()=>({variant:l,size:r,density:f,orientation:p,fullWidth:C,align:R}),[l,r,f,p,C,R]),B=[],q=[],D=e=>a.Children.forEach(e,e=>{a.isValidElement(e)&&e.type===a.Fragment?D(e.props.children):a.isValidElement(e)&&e.type===TabPanel?q.push(e):null!=e&&!1!==e&&B.push(e)});D(_);const G=B.length;return a.useEffect(()=>{const e=I.current,t=H.current;if(!e||!t)return;const a=()=>{const a=Math.abs(A?e.scrollLeft:e.scrollTop),o=A?e.clientWidth:e.clientHeight,n=A?e.scrollWidth:e.scrollHeight,l=A?"x":"y",i=A?"y":"x";t.toggleAttribute(`data-overflow-${l}-start`,a>1),t.toggleAttribute(`data-overflow-${l}-end`,n-o-a>1),t.removeAttribute(`data-overflow-${i}-start`),t.removeAttribute(`data-overflow-${i}-end`)};a(),e.addEventListener("scroll",a,{passive:!0});const o=g(e,a);return()=>{e.removeEventListener("scroll",a),o()}},[A,G]),a.useEffect(()=>{const e=I.current;if(e&&P)return w(e)},[P]),e(z.Provider,{value:O,children:t(i.Root,{ref:e=>{H.current=e,"function"==typeof n?n(e):n&&(n.current=e)},value:u,defaultValue:b,onValueChange:e=>v?.(e),orientation:p,className:d("flex min-w-0","vertical"===p?"flex-row gap-4":"flex-col gap-4",V??""),style:{...m(c,0),...W},...F,children:[t(i.List,{ref:I,activateOnFocus:x,loopFocus:k,className:d("relative shrink-0",j[l][p],"solid"===l?h[r]:"",C&&"horizontal"===p?"w-full":"",L?"flex-wrap":A?"overflow-x-auto":"",L&&void 0!==E?A?"overflow-y-auto":"overflow-x-auto":"",!L&&A?"overflow-y-hidden":"","overscroll-contain","[scrollbar-width:none] [&::-webkit-scrollbar]:hidden","neba-scroll-fade"),style:{"--n-fade":"2rem",maxHeight:L&&void 0!==E?`calc(${s[r]} * ${Math.max(1,Math.round(E))}${"solid"===l?" + 0.5rem":"outline"===l&&A?" + 1px":""})`:void 0},children:[B,e(i.Indicator,{className:["pointer-events-none",L&&"solid"!==l?T[p]:N[l][p],$[l],"solid"===l?h[r]:"rounded-full","[transition-property:left,top,width,height]","[transition-duration:var(--neba-duration)]","[transition-timing-function:var(--neba-ease)]"].join(" ")})]}),q]})})});

package/dist/components/text-field/TextField.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{Field as r}from"@base-ui/react/field";import{Input as l}from"@base-ui/react/input";import{spotlightSlot as i,glowClasses as s,trackPointer as a}from"../../internal/glow.js";import{SpinnerIcon as o}from"../../internal/icons.js";import{controlTextLeadingClasses as c,cx as m,disabledClasses as d,fieldFocusTransitionClasses as u,fieldHeightClasses as p,fieldReadOnlyClasses as f,fieldRestClasses as x,fieldRingClasses as h,gapClasses as b,iconClasses as g,metaTextClasses as y,paddingXClasses as $,radiusClasses as v,stackGapClasses as w,surfaceSlots as N,transitionClasses as j}from"../../internal/styles.js";import{keyHandler as z}from"../../internal/keys.js";import{useStyleDefaults as k}from"../../internal/defaults.js";import{useFieldsetDisabled as D}from"../../internal/fieldset.js";const R={xs:`${b.xs} ${v.xs} ${c.xs}`,sm:`${b.sm} ${v.sm} ${c.sm}`,md:`${b.md} ${v.md} ${c.md}`,lg:`${b.lg} ${v.lg} ${c.lg}`,xl:`${b.xl} ${v.xl} ${c.xl}`},T={xs:"min-h-5.5 py-[3px]",sm:"min-h-6.5 py-[4px]",md:"min-h-8 py-[5px]",lg:"min-h-10 py-[8px]",xl:"min-h-12 py-[10px]"},F={none:"resize-none",vertical:"resize-y",horizontal:"resize-x",both:"resize"},I=["group relative flex w-full","[-webkit-tap-highlight-color:transparent]",j,u,h,g].join(" "),K=x,O=f;export const TextField=/*@__PURE__*/n.forwardRef(function TextField(c,u){const{variant:f="outline",size:x="md",color:h="primary",density:b="default",elevation:g=0,multiline:v=!1,rows:j=3,resize:P="vertical",label:C,description:E,error:L,invalid:M,startIcon:W,endIcon:q,loading:A=!1,fullWidth:B=!1,classNames:G,shortcuts:H,onKeyDown:J,readOnly:Q=!1,disabled:S,type:U="text",className:V,style:X,...Y}=k(c,["size","density","variant"]),Z=D(S),_=!Z&&!Q,ee=null!=L&&!1!==L&&""!==L,te=M??ee,ne=te?"danger":h,re=n.useRef(null),le=n.useCallback(e=>{re.current=e,"function"==typeof u?u(e):u&&(u.current=e)},[u]),ie=m(I,R[x],v?`${T[x]} items-start`:`${p[x]} items-center`,$[b][x],Z?d[f]:Q?O[f]:`${K[f]} ${s}`,Z?"":"cursor-text",G?.shell),se=m("neba-input min-w-0 flex-1 bg-transparent [font:inherit] text-inherit","[outline:none]","placeholder:text-(--neba-muted-fg)","caret-(--n-accent) selection:bg-(--n-soft-press)","disabled:cursor-not-allowed",v?`block ${F[P]}`:"self-stretch",G?.control),ae="inline-flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg) transition-[color] duration-(--neba-duration) group-focus-within:text-(--n-accent)";return t(r.Root,{disabled:Z,invalid:te,className:m("flex-col align-top",w[x],B?"flex w-full":"inline-flex",V??""),style:{...N(ne,g),..._?i:void 0,...X},children:[C?e(r.Label,{className:m(y[x],"font-medium",Z?"text-(--neba-disabled-fg)":"text-(--neba-fg)",G?.label),children:C}):null,t("span",{className:ie,onPointerMove:a(void 0,_),onPointerDown:e=>{e.target!==e.currentTarget||Z||(e.preventDefault(),re.current?.focus())},children:[W?e("span",{className:ae,children:W}):null,e(l,{ref:le,className:se,disabled:Z,readOnly:Q,"aria-busy":A||void 0,"data-loading":A||void 0,...v?{render:e("textarea",{rows:j})}:{type:U},...Y,onKeyDown:z(H,J)}),A?e("span",{className:ae,children:e(o,{})}):q?e("span",{className:ae,children:q}):null]}),E?e(r.Description,{className:m(y[x],"text-(--neba-muted-fg)",G?.description),children:E}):null,e(r.Error,ee?{match:!0,className:m(y[x],"text-(--n-accent)",G?.error),children:L}:{className:m(y[x],"text-(--n-accent)",G?.error)})]})});
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{Field as r}from"@base-ui/react/field";import{Input as l}from"@base-ui/react/input";import{fieldLight as i,fieldSpotlightSlot as s,glowClasses as a}from"../../internal/glow.js";import{SpinnerIcon as o}from"../../internal/icons.js";import{controlTextLeadingClasses as c,cx as m,disabledClasses as d,fieldFocusTransitionClasses as u,fieldHeightClasses as p,fieldReadOnlyClasses as f,fieldRestClasses as x,fieldRingClasses as h,gapClasses as b,iconClasses as g,metaTextClasses as y,paddingXClasses as $,radiusClasses as w,stackGapClasses as v,surfaceSlots as N,transitionClasses as j}from"../../internal/styles.js";import{keyHandler as z}from"../../internal/keys.js";import{useStyleDefaults as k}from"../../internal/defaults.js";import{useFieldsetDisabled as D}from"../../internal/fieldset.js";const R={xs:`${b.xs} ${w.xs} ${c.xs}`,sm:`${b.sm} ${w.sm} ${c.sm}`,md:`${b.md} ${w.md} ${c.md}`,lg:`${b.lg} ${w.lg} ${c.lg}`,xl:`${b.xl} ${w.xl} ${c.xl}`},T={xs:"min-h-5.5 py-[3px]",sm:"min-h-6.5 py-[4px]",md:"min-h-8 py-[5px]",lg:"min-h-10 py-[8px]",xl:"min-h-12 py-[10px]"},F={none:"resize-none",vertical:"resize-y",horizontal:"resize-x",both:"resize"},I=["group relative flex w-full","[-webkit-tap-highlight-color:transparent]",j,u,h,g].join(" "),K=x,O=f;export const TextField=/*@__PURE__*/n.forwardRef(function TextField(c,u){const{variant:f="outline",size:x="md",color:h="primary",density:b="default",elevation:g=0,multiline:w=!1,rows:j=3,resize:C="vertical",label:E,description:L,error:P,invalid:W,startIcon:q,endIcon:A,loading:B=!1,fullWidth:G=!1,classNames:H,shortcuts:J,onKeyDown:M,readOnly:Q=!1,disabled:S,type:U="text",className:V,style:X,...Y}=k(c,["size","density","variant"]),Z=D(S),_=!Z&&!Q,ee=null!=P&&!1!==P&&""!==P,te=W??ee,ne=te?"danger":h,re=n.useRef(null),le=n.useCallback(e=>{re.current=e,"function"==typeof u?u(e):u&&(u.current=e)},[u]),ie=m(I,R[x],w?`${T[x]} items-start`:`${p[x]} items-center`,$[b][x],Z?d[f]:Q?O[f]:`${K[f]} ${a}`,Z?"":"cursor-text",H?.shell),se=m("neba-input min-w-0 flex-1 bg-transparent [font:inherit] text-inherit","[outline:none]","placeholder:text-(--neba-muted-fg)","caret-(--n-accent) selection:bg-(--n-soft-press)","disabled:cursor-not-allowed",w?`block ${F[C]}`:"self-stretch",H?.control),ae="inline-flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg) transition-[color] duration-(--neba-duration) group-focus-within:text-(--n-accent)";return t(r.Root,{disabled:Z,invalid:te,className:m("flex-col align-top",v[x],G?"flex w-full":"inline-flex",V??""),style:{...N(ne,g),..._?s:void 0,...X},children:[E?e(r.Label,{className:m(y[x],"font-medium",Z?"text-(--neba-disabled-fg)":"text-(--neba-fg)",H?.label),children:E}):null,t("span",{className:ie,...i(_),onPointerDown:e=>{e.target!==e.currentTarget||Z||(e.preventDefault(),re.current?.focus())},children:[q?e("span",{className:ae,children:q}):null,e(l,{ref:le,className:se,disabled:Z,readOnly:Q,"aria-busy":B||void 0,"data-loading":B||void 0,...w?{render:e("textarea",{rows:j})}:{type:U},...Y,onKeyDown:z(J,M)}),B?e("span",{className:ae,children:e(o,{})}):A?e("span",{className:ae,children:A}):null]}),L?e(r.Description,{className:m(y[x],"text-(--neba-muted-fg)",H?.description),children:L}):null,e(r.Error,ee?{match:!0,className:m(y[x],"text-(--n-accent)",H?.error),children:P}:{className:m(y[x],"text-(--n-accent)",H?.error)})]})});

package/dist/internal/chart-brush.d.ts

@@ -0,0 +1,53 @@
+/**
+ * The strip under a plot, and the window on it.
+ *
+ * Its own module rather than a piece of `chart-frame.tsx`, and that is the
+ * whole reason it is here: the frame is imported by every cartesian chart, so
+ * anything inside it is a cost a page pays whether it draws the thing or not.
+ * `React.lazy` puts this behind a chunk of its own — the same arrangement
+ * `Image` makes for the dialog its `preview` opens — so a chart with no window
+ * downloads none of it, and one with a window fetches it while the plot is
+ * already narrowed and drawn.
+ *
+ * It is handed its `width` rather than measuring itself, and that is worth two
+ * things: one `ResizeObserver` registration instead of two, and no import back
+ * into the frame — which would be a cycle with the `import()` that reaches
+ * this file.
+ */
+import * as React from 'react';
+import type { NebaChartCategory } from '../types.js';
+export interface BrushProps {
+    /** The whole of the first drawn series, for the shape under the window. */
+    outline: readonly (number | null)[];
+    /** How many categories there are altogether. */
+    count: number;
+    range: readonly [number, number];
+    onRange: (range: [number, number]) => void;
+    color: string;
+    height: number;
+    words: {
+        start: string;
+        end: string;
+    };
+    /** What the two handles say they are on, read out with their positions. */
+    categories: readonly NebaChartCategory[];
+    locale?: string;
+    /** The chart's own measured width — the strip spans the same box. */
+    width: number;
+}
+/**
+ * The strip under the plot, and the window on it.
+ *
+ * A chart of two thousand points has no points on it — every column is a
+ * fraction of a pixel and the shape is a smear — so the plot draws a window of
+ * them and this draws all of them, small, with the window marked on it. That
+ * pairing is the whole idea: a window with no overview beside it is a reader
+ * who cannot tell where in the year they are.
+ *
+ * It is HTML rather than part of the SVG, and that is what makes the two
+ * handles real `role="slider"` buttons: focusable, arrow-keyed, and announcing
+ * the category they sit on. A pair of `<rect>`s inside the picture would be
+ * reachable by pointer alone, which on the one control that decides what the
+ * chart shows is not a control at all.
+ */
+export declare function ChartBrush({ outline, count, range, onRange, color, height, words, categories, locale, width }: BrushProps): React.JSX.Element;

package/dist/internal/chart-brush.js

@@ -0,0 +1 @@
+"use client";import{jsx as t,jsxs as e}from"react/jsx-runtime";import*as n from"react";import{formatCategory as r,linePath as o}from"./chart.js";import{beginPointerDrag as a}from"./drag.js";import{cx as i}from"./styles.js";export function ChartBrush({outline:s,count:l,range:u,onRange:c,color:h,height:d,words:f,categories:m,locale:g,width:w}){const x=n.useRef(null),p=n.useRef(null);n.useEffect(()=>()=>p.current?.(),[]);const v=Math.max(0,l-1),[b,y]=u,M=t=>0===v?0:t/v,k=n.useMemo(()=>{const t=s.filter(t=>null!==t);if(w<=0||0===t.length)return"";const e=Math.min(...t),n=Math.max(...t)-e||1,r=Math.max(1,d-4);return o(s.map((t,o)=>null===t?null:{x:M(o)*w,y:2+(1-(t-e)/n)*r}),"linear")},[s,w,d,v]),_=t=>{const e=x.current;if(!e)return 0;const n=e.getBoundingClientRect(),r=0===n.width?0:(t-n.left)/n.width;return Math.min(v,Math.max(0,Math.round(r*v)))},j=(t,e,n)=>{if("start"===t)return void c([Math.min(e,y-1),y]);if("end"===t)return void c([b,Math.max(e,b+1)]);const r=y-b,o=Math.min(Math.max(0,e-n),v-r);c([o,o+r])};function D(t,e){const n=_(e.clientX),r="window"===t?n-b:0;e.preventDefault(),p.current?.(),p.current=a({target:e.currentTarget,pointerId:e.pointerId,onMove:e=>j(t,_(e.clientX),r),onEnd:()=>{p.current=null}})}const R=e=>{const n="start"===e?b:y;return t("button",{type:"button",role:"slider","aria-label":"start"===e?f.start:f.end,"aria-valuemin":0,"aria-valuemax":v,"aria-valuenow":n,"aria-valuetext":r(m[n]??n,g),onPointerDown:t=>D(e,t),onKeyDown:t=>function(t,e){const n="ArrowLeft"===e.key||"ArrowDown"===e.key?-1:"ArrowRight"===e.key||"ArrowUp"===e.key?1:0;if(0!==n)j(t,("end"===t?y:b)+n,0);else if("Home"===e.key)j(t,0,0);else{if("End"!==e.key)return;j(t,v,0)}e.preventDefault()}(e,t),className:i("absolute inset-y-0 w-2 -translate-x-1/2 cursor-ew-resize rounded-full","bg-(--n-accent) [touch-action:none]","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-1"),style:{left:100*M(n)+"%"}})};return e("div",{ref:x,className:"absolute inset-x-0 bottom-0 select-none",style:{height:d},children:[e("svg",{width:"100%",height:d,viewBox:`0 0 ${Math.max(1,w)} ${d}`,preserveAspectRatio:"none","aria-hidden":"true",className:"absolute inset-0 block",children:[t("rect",{x:0,y:0,width:Math.max(1,w),height:d,rx:3,fill:"var(--neba-chart-grid)"}),k?t("path",{d:k,fill:"none",stroke:h,strokeWidth:1,opacity:.6}):null]}),t("div",{onPointerDown:t=>D("window",t),className:i("absolute inset-y-0 cursor-grab rounded-[3px] [touch-action:none]","bg-(--n-soft) [box-shadow:inset_0_0_0_1px_var(--n-accent)]","data-[dragging]:cursor-grabbing"),style:{left:100*M(b)+"%",width:100*(M(y)-M(b))+"%"}}),R("start"),R("end")]})}

package/dist/internal/chart-frame.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { type BoxProps } from '../components/box/Box.js';
 import { type BandScale, type ChartValue, type PlotBox, type ValueScale } from './chart.js';
-import type { NebaChartAxis, NebaChartCategory, NebaChartLegend, NebaChartSeries, NebaChartTooltip, NebaSize } from '../types.js';
+import type { NebaChartAxis, NebaChartBrush, NebaChartCategory, NebaChartLegend, NebaChartReference, NebaChartSeries, NebaChartTooltip, NebaSize } from '../types.js';
 /**
  * How wide the chart actually is, in pixels.
  *
@@ -118,6 +118,27 @@ export interface ChartBaseProps extends Omit<BoxProps, 'children' | 'title'> {
     tooltip?: boolean | NebaChartTooltip;
     /** What to draw when there is nothing to draw. */
     empty?: React.ReactNode;
+    /**
+     * Adds a small button in the corner that writes the chart's data out as a
+     * CSV file — the same numbers the hidden table under the plot holds.
+     *
+     * A picture is the one form of a number nobody can paste anywhere, and the
+     * table a screen reader gets is not reachable with a pointer. This is the
+     * pointer's way to the same thing.
+     *
+     * The file is built by a module that is **fetched when the button is
+     * pressed** rather than imported with the chart, so a page that never turns
+     * this on downloads none of it.
+     * @default false
+     */
+    exportable?: boolean;
+    /** What the downloaded file is called. @default 'chart.csv' */
+    exportFileName?: string;
+    /**
+     * Takes the CSV instead of downloading it — to post it somewhere, to open it
+     * in a viewer of your own, or to put a sheet around it.
+     */
+    onExport?: (csv: string) => void;
 }
 /** The props a chart with two axes adds. */
 export interface CartesianChartProps extends ChartBaseProps {
@@ -129,6 +150,49 @@ export interface CartesianChartProps extends ChartBaseProps {
     xAxis?: NebaChartAxis;
     /** The value axis. */
     yAxis?: NebaChartAxis;
+    /**
+     * A second value axis, drawn on the far edge, for the series that carry
+     * `axis: 'secondary'`.
+     *
+     * For the series whose units are not the others' — revenue beside a
+     * conversion rate. Passing this is what turns the split on; without it every
+     * series is measured on `yAxis` whatever it says.
+     *
+     * **Not read on a stacked chart.** A stack is a total, and a total across
+     * two units is not a number, so `stacked` puts everything back on one scale.
+     *
+     * The axis' own `tickFormat` writes its series' numbers everywhere they
+     * appear — the ticks, the tooltip and the table — because the alternative is
+     * a percentage printed as currency in the one place both series meet.
+     *
+     * Worth reaching for rarely. Two scales on one plot let a caller make any
+     * two series look like they move together by choosing the ranges, and the
+     * reader cannot see that it was done.
+     */
+    secondaryAxis?: NebaChartAxis;
+    /**
+     * A strip under the plot with the whole series on it, and a window the
+     * reader drags to choose which part the chart draws.
+     *
+     * For the series a plot cannot hold. Two thousand points is a chart with no
+     * points on it — every column is a fraction of a pixel and the shape is a
+     * smear — and the answer is a window of them with all of them small
+     * underneath, so the reader can see where the window is and move it.
+     *
+     * The strip is drawn **inside** the chart's own height, like the axis
+     * labels. `true` takes the defaults; an object holds the range or says how
+     * tall the strip is.
+     */
+    brush?: boolean | NebaChartBrush;
+    /**
+     * Lines and bands drawn across the plot at values the data has none of — a
+     * target, an SLA, a budget, the window a forecast covers.
+     *
+     * The scale is widened to hold them, so a target above everything measured
+     * is still on the chart. They are drawn under the marks and over the grid,
+     * and each one that names itself is read out with the data.
+     */
+    references?: readonly NebaChartReference[];
 }
 interface Visibility {
     visible: boolean[];
@@ -163,8 +227,14 @@ interface LegendProps {
  * light hue is illegible as text and because colour is what the swatch beside
  * it is for.
  *
- * A hidden series stays in the legend and goes grey rather than disappearing:
- * a list that shortens when you click it is a list you cannot click twice.
+ * A hidden series stays in the legend and fades rather than disappearing: a
+ * list that shortens when you click it is a list you cannot click twice. It
+ * fades whole — swatch and name together, at its own colour — rather than
+ * turning grey, because grey is a ninth colour on a chart that already has
+ * eight, and a row recoloured to say "off" is a row that no longer says which
+ * series it is. This is the second of the two places a chart is allowed to say
+ * something with opacity, and it is the same sentence the dimming makes one
+ * scale up: not the one you are looking at.
  *
  * `swatch` is for the chart whose marks carry a second identity channel. A
  * scatter past the third series tells its series apart by shape as well as by
@@ -289,6 +359,8 @@ interface DataTableProps {
     series: readonly NebaChartSeries[];
     values: readonly ChartValue[][];
     format: (value: number) => string;
+    /** One per series, on a chart whose two axes write their numbers differently. */
+    formatFor?: (series: number) => (value: number) => string;
     locale?: string;
 }
 /**
@@ -311,7 +383,29 @@ interface DataTableProps {
  * table nobody is looking at. Every prop it takes is either a primitive or
  * something already memoised above.
  */
-declare const ChartDataTable: React.MemoExoticComponent<({ id, caption, corner, categories, series, values, format, locale }: DataTableProps) => React.JSX.Element>;
+declare const ChartDataTable: React.MemoExoticComponent<({ id, caption, corner, categories, series, values, format, formatFor, locale }: DataTableProps) => React.JSX.Element>;
+interface ExportProps {
+    /** The sheet, built when the button is pressed and not before. */
+    rows: () => readonly (readonly unknown[])[];
+    fileName: string;
+    onExport?: (csv: string) => void;
+    label: string;
+}
+/**
+ * The button that hands the chart's numbers over.
+ *
+ * A plain `<button>` rather than an IconButton, for the reason the legend's
+ * rows are plain buttons too: this is inside the frame every chart imports, so
+ * a component pulled in here is one every chart pays for whether it draws the
+ * button or not.
+ *
+ * The CSV writer is **loaded** rather than imported, which is `highlight.ts`'
+ * arrangement in miniature. Escaping a spreadsheet field correctly is a page
+ * of rules nobody should carry to read a chart, and a bundler emits it as a
+ * chunk of its own behind the `import()` — so a page that never turns this on
+ * downloads none of it, and one that does fetches it on the press.
+ */
+declare function ChartExport({ rows, fileName, onExport, label }: ExportProps): React.JSX.Element;
 interface SurfaceProps extends Omit<BoxProps, 'children'> {
     legend: React.ReactNode;
     legendSide: NonNullable<NebaChartLegend['side']>;
@@ -368,15 +462,33 @@ export interface CartesianLayout {
     /** And what colour each one is, by its original index. */
     colors: readonly string[];
     scale: ValueScale;
+    /**
+     * The scale on the far edge, when the chart was given a `secondaryAxis` and
+     * a series asked for it. `null` on every chart with one value scale.
+     *
+     * A mark builder does not read it: it says which series a number belongs to
+     * when it calls `valuePx` or `point`, and the frame picks the scale. This is
+     * here for the chrome that has to know both exist.
+     */
+    secondScale: ValueScale | null;
+    /** Whether a series' numbers are measured on that far edge. */
+    onSecond: (series: number) => boolean;
     band: BandScale;
     /** Bars run along the category axis rather than across it. */
     horizontal: boolean;
-    /** Where a value sits along the value axis, in pixels from the chart's edge. */
-    valuePx: (value: number) => number;
+    /**
+     * Where a value sits along the value axis, in pixels from the chart's edge.
+     *
+     * `series` is its place in the array as it was passed, and it is what tells
+     * the frame which of two scales to read it against. Leaving it out measures
+     * against the first one, which is the right answer on the charts that have
+     * only that.
+     */
+    valuePx: (value: number, series?: number) => number;
     /** Where a category's centre sits along the category axis. */
     categoryPx: (index: number) => number;
     /** The two combined, whichever way round the chart runs. */
-    point: (index: number, value: number) => {
+    point: (index: number, value: number, series?: number) => {
         x: number;
         y: number;
     };
@@ -391,8 +503,10 @@ export interface CartesianLayout {
      * `categoryPx`'s offset-along-the-axis. Only meaningful with `xScale="value"`.
      */
     categoryValuePx: (value: number) => number;
-    /** Where the baseline is along the value axis. */
+    /** Where the baseline is along the value axis — the first one's. */
     zeroPx: number;
+    /** And a given series' own, which differs once there are two scales. */
+    zeroPxOf: (series?: number) => number;
     categories: readonly NebaChartCategory[];
     format: (value: number) => string;
     size: NebaSize;
@@ -509,5 +623,5 @@ interface CartesianProps extends CartesianChartProps {
  * component never has to know which way round the axes are.
  */
 export declare function CartesianChart(rawProps: CartesianProps): React.JSX.Element;
-export { ChartDataTable, ChartLegendBar, ChartScaleLegend, ChartStatus, ChartSummary, ChartSurface, ChartTooltipPanel, summarise, chartHeight, useMeasuredHeight, useMeasuredWidth, useReleaseOutside, useVisibility };
+export { ChartDataTable, ChartExport, ChartLegendBar, ChartScaleLegend, ChartStatus, ChartSummary, ChartSurface, ChartTooltipPanel, summarise, chartHeight, useMeasuredHeight, useMeasuredWidth, useReleaseOutside, useVisibility };
 export type { Visibility };

package/dist/internal/chart-frame.js

@@ -1 +1 @@
-"use client";import{jsx as e,Fragment as t,jsxs as n}from"react/jsx-runtime";import{useStyleDefaults as a}from"./defaults.js";import*as l from"react";import{Box as r}from"../components/box/Box.js";import{bandScale as i,categoryAt as s,categoryCount as o,categoryExtent as c,chartFontSizes as d,compactNumber as u,extentOf as h,fitsLast as m,formatCategory as f,markerRadii as x,plotHeights as g,seriesColor as p,showsTick as b,textWidth as v,tickStride as y,toFullShares as k,toValues as w,truncate as M,valueScale as N,warnPaletteOverflow as C}from"./chart.js";import{numberFormatter as S}from"./format.js";import{observeResize as z}from"./observe.js";import{chartMessages as P,emptyMessages as A,fillMessage as j,useMessages as T}from"./i18n.js";import{cx as B,hasContent as E,metaTextClasses as _,srOnlyClasses as L,transitionClasses as W}from"./styles.js";const $="undefined"==typeof document?l.useEffect:l.useLayoutEffect,R=[];function I(e){const[t,n]=l.useState(0);return $(()=>{const t=e.current;if(!t)return;const a=()=>n(t.clientWidth);return a(),z(t,a)},[e]),t}function F(e,t){const[n,a]=l.useState(0);return $(()=>{const n=e.current;if(!t||!n)return;const l=()=>a(n.clientHeight);return l(),z(n,l)},[e,t]),n}function H(e,t,n){return"number"==typeof e?e:void 0===e?g[t]:n}export const markTransitionClasses=["[transition:opacity_var(--neba-duration)_var(--neba-ease),","r_var(--neba-duration)_var(--neba-ease),","scale_var(--neba-duration)_var(--neba-ease)]"].join("");function D(e){const[t,n]=l.useState(()=>new Map),[a,r]=l.useState(null),i=function(e){const t=new Map;return e.map((e,n)=>{if(void 0===e.name)return`index:${n}`;const a=t.get(e.name)??0;return t.set(e.name,a+1),`name:${a}:${e.name}`})}(e),s=l.useRef({series:e,keys:i});l.useEffect(()=>{s.current={series:e,keys:i}});const o=l.useCallback(e=>{const{series:t,keys:a}=s.current,l=a[e];void 0!==l&&n(n=>{const a=new Map(n);return a.set(l,!(n.get(l)??!t[e]?.hidden)),a})},[]);return{visible:e.map((e,n)=>t.get(i[n])??!e.hidden),hovered:a,toggle:o,setHovered:r}}const V={top:"flex-col-reverse",bottom:"flex-col",left:"flex-row-reverse",right:"flex-row"},X={start:"justify-start",center:"justify-center",end:"justify-end"};function Y(e,t,n){const a=l.useRef(n);l.useEffect(()=>{a.current=n}),l.useEffect(()=>{if(!t)return;const n=t=>{const n=e.current;n&&t.target instanceof Node&&!n.contains(t.target)&&a.current()};return document.addEventListener("pointerdown",n,!0),()=>document.removeEventListener("pointerdown",n,!0)},[e,t])}function ChartLegendBar({series:a,colors:l,options:r,visibility:i,size:s,values:o,swatch:c}){const d=!1!==r.interactive,u="left"===r.side||"right"===r.side;return e("ul",{className:B("flex list-none flex-wrap items-center gap-x-3 gap-y-1 p-0",u?"min-w-0 flex-col items-start":"",X[r.align??"center"],_[s]),children:a.map((a,r)=>{const s=i.visible[r],u=null!==i.hovered&&i.hovered!==r,h=a.name??`${r+1}`,m=s?l[r]:"var(--neba-disabled-fg)",f=n(t,{children:[e("span",c?{"aria-hidden":"true",className:"flex size-2.5 shrink-0 items-center justify-center",children:c(r,m)}:{"aria-hidden":"true",className:`size-2.5 shrink-0 rounded-[0.1875rem] ${W}`,style:{backgroundColor:m}}),e("span",{className:"min-w-0 truncate",children:h}),o?.[r]?e("span",{className:"shrink-0 tabular-nums text-(--neba-muted-fg)",children:o[r]}):null]});return e("li",{className:"min-w-0",children:d?e("button",{type:"button","aria-pressed":s,onClick:()=>i.toggle(r),onPointerEnter:()=>i.setHovered(r),onPointerLeave:()=>i.setHovered(null),onFocus:()=>i.setHovered(r),onBlur:()=>i.setHovered(null),className:B("flex min-w-0 cursor-pointer items-center gap-1.5 rounded-(--neba-radius-xs)","px-1 py-0.5 text-(--neba-fg)","[transition-property:background-color,color,opacity]","[transition-duration:var(--neba-duration)]","[transition-timing-function:var(--neba-ease)]","hover:bg-(--n-soft)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-1",s?"":"text-(--neba-disabled-fg)",u?"opacity-55":""),children:f}):e("span",{className:B("flex min-w-0 items-center gap-1.5 px-1 py-0.5 text-(--neba-fg)",s?"":"text-(--neba-disabled-fg)"),children:f})},a.name??r)})})}function ChartScaleLegend({steps:a,from:l,to:r,middle:i,align:s,vertical:o,size:c}){return e("div",{className:B("flex",o?"":X[s]),children:n("div",{className:B("grid grid-cols-[auto_auto_auto] items-center gap-x-2",_[c]),children:[e("span",{className:"shrink-0 tabular-nums text-(--neba-muted-fg)",children:l}),e("span",{"aria-hidden":"true",className:B("flex h-2.5 overflow-hidden rounded-[0.1875rem]",o?"w-20":"w-24"),children:a.map(t=>e("span",{className:"h-full flex-1",style:{backgroundColor:t}},t))}),e("span",{className:"shrink-0 tabular-nums text-(--neba-muted-fg)",children:r}),i?n(t,{children:[e("span",{}),e("span",{className:"text-center tabular-nums text-(--neba-muted-fg)",children:i}),e("span",{})]}):null]})})}function ChartTooltipPanel({heading:t,items:a,x:l,y:r,flip:i,size:s}){return n("div",{"data-neba-tooltip":"",className:B("pointer-events-none absolute z-10 max-w-56 min-w-24","rounded-(--neba-radius-sm) border p-2","[background-image:var(--neba-grain),var(--neba-sheen)]","[background-blend-mode:overlay,normal] [backdrop-filter:var(--neba-blur)]","bg-(--neba-panel-press) [border-color:var(--n-line)]","[box-shadow:var(--neba-shadow-2),var(--neba-plate-glass)]",_[s]),style:i?{right:`calc(100% - ${l}px + 10px)`,top:r}:{left:l+10,top:r},children:[e("div",{className:"mb-1 font-medium text-(--neba-fg)",children:t}),e("ul",{className:"flex list-none flex-col gap-0.5 p-0",children:a.map(t=>n("li",{className:"flex items-center gap-1.5",children:[e("span",{"aria-hidden":"true",className:"size-2 shrink-0 rounded-[0.125rem]",style:{backgroundColor:t.color}}),t.name?e("span",{className:"min-w-0 flex-1 truncate text-(--neba-muted-fg)",children:t.name}):null,e("span",{className:"ms-auto shrink-0 font-medium tabular-nums text-(--neba-fg)",children:t.label??t.formatted})]},t.seriesIndex))})]})}function ChartSummary({id:t,template:n,count:a,min:l,max:r,locale:i}){return e("span",{id:t,hidden:!0,children:j(n,{count:S(i,{}).format(a),min:l,max:r})})}function Z(e,t){let n=0,a=1/0,l=-1/0;for(const t of e)for(const e of t)null===e.value||Number.isNaN(e.value)||(n+=1,a=Math.min(a,e.value),l=Math.max(l,e.value));return 0===n?{count:n,min:"",max:""}:{count:n,min:t(a),max:t(l)}}function ChartStatus({heading:a,items:r}){return e("span",{role:"status","aria-live":"polite",className:L,children:0===r.length?null:n(t,{children:[E(a)?n(t,{children:[a,", "]}):null,r.map((e,t)=>n(l.Fragment,{children:[t>0?", ":null,e.name?`${e.name}: `:null,e.label??e.formatted]},e.seriesIndex))]})})}const q=/*@__PURE__*/l.memo(function ChartDataTable({id:t,caption:a,corner:l,categories:r,series:i,values:s,format:o,locale:c}){return n("table",{id:t,className:L,children:[a?e("caption",{children:a}):null,e("thead",{children:n("tr",{children:[e("th",{scope:"col",children:l??""}),i.map((t,n)=>e("th",{scope:"col",children:t.name??n+1},t.name??n))]})}),e("tbody",{children:r.map((t,a)=>n("tr",{children:[e("th",{scope:"row",children:f(t,c)}),i.map((t,n)=>{const l=s[n]?.[a];return e("td",void 0!==l?.label?{children:l.label}:{children:null==l?.value?"":o(l.value)},t.name??n)})]},a))})]})});function ChartSurface({legend:t,legendSide:a,children:l,table:i,className:s,...o}){return n(r,{...o,className:B("relative flex gap-3",V[a],s??void 0),children:[e("div",{className:"relative min-w-0 flex-1",children:l}),t,i]})}export function CartesianChart(t){const{series:r,categories:m,xAxis:g,yAxis:b,horizontal:y=!1,stacked:z=!1,stackedFull:j=!1,includeZero:E=!0,bandRatio:L=1,inset:W=!1,headroom:$=0,markInset:V=0,xScale:X="band",marks:J,markRadius:K=24,table:O,summary:U,swatch:G,scale:Q,markTooltip:ee,height:te,format:ne,locale:ae,label:le,legend:re,tooltip:ie,empty:se,size:oe="md",variant:ce="text",padded:de=!1,className:ue,children:he,...me}=a(t,["size","variant","locale"]),fe=l.useRef(null),xe=I(fe),ge=T(A,ae),pe=T(P,ae),be=l.useId(),ve=l.useId(),ye=D(r);l.useEffect(()=>{C(r.length)},[r.length]);const[ke,we]=l.useState(null),[Me,Ne]=l.useState(null),[Ce,Se]=l.useState(null),ze=ne?JSON.stringify(ne):"",Pe=l.useCallback(e=>ne?S(ae,ne).format(e):u(e,ae),[ze,ae]),Ae=l.useMemo(()=>w(r),[r]),je=ye.visible.map(Number).join(""),Te=l.useMemo(()=>j?k(Ae,ye.visible,Pe):Ae,[Ae,j,je,Pe]),Be=l.useMemo(()=>r.map((e,t)=>p(e,t)),[r]),Ee=o(r),_e=l.useMemo(()=>Array.from({length:Ee},(e,t)=>s(t,m,Te)),[Ee,m,Te]),Le=Te.filter((e,t)=>ye.visible[t]),We=h(Le,z),$e=U??Z(Le,Pe),Re=H(te,oe,F(fe,"string"==typeof te)),Ie=d[oe],Fe=b,He=g,De=Q??N(We,{min:Fe?.min,max:Fe?.max,tickCount:Fe?.tickCount,includeZero:E}),Ve="value"===X?c(Le,m):null,Xe="value"===X?N(Ve,{min:He?.min,max:He?.max,tickCount:He?.tickCount,includeZero:!1}):null,Ye=De.ticks.map((e,t)=>Fe?.tickFormat?String(Fe.tickFormat(e,t)):Pe(e)),Ze=He?.tickFormat,qe=l.useMemo(()=>Xe?Xe.ticks.map((e,t)=>Ze?String(Ze(e,t)):u(e,ae)):_e.map((e,t)=>Ze?String(Ze(e,t)):f(e,ae)),[Xe?Xe.ticks.join(" "):_e,Ze,ae]),Je=Ye.reduce((e,t)=>Math.max(e,v(t,Ie)),0),Ke=Ie+6,Oe=y?He:Fe,Ue=Boolean(Oe?.label)&&!Oe?.hidden,Ge=Fe?.hidden?0:Je+10,Qe=(xe-(y?0:Ge)-16)/Math.max(1,Ee),et=!Xe&&(y||Qe-6>=2.4*Ie),tt=y?150:Qe-6,nt=l.useMemo(()=>et?qe.map(e=>M(e,tt,Ie)):qe,[qe,et,tt,Ie]),at=l.useMemo(()=>nt.reduce((e,t)=>Math.max(e,v(t,Ie)),0),[nt,Ie]),lt=y?He?.hidden?0:at+10:Ge,rt=y?Fe?.hidden?0:Ie+12+(Fe?.label?Ke:0):He?.hidden?0:Ie+12+(He?.label?Ke:0),it=(y?He:Fe)?.thickness??lt,st=(y?Fe:He)?.thickness??rt,ot=(y||Xe?12:Math.max(8,nt.length?at/2:8))+V,ct=x[oe]+4+$+V+(Ue?Ke+2:0),dt=Re,ut={left:it+V,top:ct,width:Math.max(0,xe-it-V-ot),height:Math.max(0,dt-ct-st-V)},ht=y?ut.height:ut.width,mt=i(W?Math.max(1,Ee-1):Ee,ht,L),ft=l.useCallback(e=>W?Ee<=1?ht/2:ht*e/(Ee-1):mt.centre(e),[W,Ee,ht,mt]),xt=l.useCallback(e=>y?ut.left+De.fraction(e)*ut.width:ut.top+(1-De.fraction(e))*ut.height,[y,ut.left,ut.top,ut.width,ut.height,De]),gt=l.useCallback((e,t)=>y?{x:xt(t),y:ut.top+ft(e)}:{x:ut.left+ft(e),y:xt(t)},[y,xt,ft,ut.left,ut.top]),pt=l.useCallback(e=>y?ut.top+(1-(Xe?.fraction(e)??0))*ut.height:ut.left+(Xe?.fraction(e)??0)*ut.width,[y,ut.left,ut.top,ut.width,ut.height,Xe]),bt=xt(Math.min(Math.max(0,De.min),De.max)),vt={plot:ut,values:Te,visible:ye.visible,colors:Be,scale:De,band:mt,horizontal:y,valuePx:xt,categoryPx:ft,point:gt,categoryScale:Xe,categoryValuePx:pt,zeroPx:bt,categories:_e,format:Pe,size:oe},yt=J?J(vt):R,kt=!1===ie?{mode:"none"}:!0===ie||void 0===ie?{}:ie,wt=kt.mode??(J?"item":"index"),Mt=null===Me?null:yt[Me]??null,Nt=J?Mt?Mt.index:null:ke,Ct=J?yt.length:Ee,St=()=>{we(null),Ne(null),Se(null)};Y(fe,null!==Nt,St);const zt=e=>{if("none"!==wt){if(J){const t=((e,t)=>{const n=fe.current;if(!n||0===yt.length)return null;const a=n.getBoundingClientRect(),l=e-a.left,r=t-a.top;let i=null,s=1/0,o=1/0;return yt.forEach((e,t)=>{const n=e.x-l,a=e.y-r,c=Math.sqrt(n*n+a*a);let d;if(void 0===e.rx)d=Math.max(0,c-e.r);else{const t=Math.max(0,Math.abs(n)-e.rx),l=Math.max(0,Math.abs(a)-(e.ry??e.rx));d=Math.sqrt(t*t+l*l)}d<=K&&(d<s||d===s&&c<o)&&(s=d,o=c,i=t)}),i})(e.clientX,e.clientY);t!==Me&&Ne(t)}else{const t=((e,t)=>{const n=fe.current;if(!n||0===Ee)return null;const a=n.getBoundingClientRect(),l=y?t-a.top-ut.top:e-a.left-ut.left;if(l<-mt.step||l>ht+mt.step)return null;const r=W?Ee<=1?0:Math.round(l/ht*(Ee-1)):Math.floor(l/mt.step);return Math.min(Ee-1,Math.max(0,r))})(e.clientX,e.clientY);t!==ke&&we(t)}"item"!==wt||J||Se(((e,t)=>{const n=fe.current;if(!n)return null;const a=n.getBoundingClientRect();return y?e-a.left:t-a.top})(e.clientX,e.clientY))}},Pt=e=>{const t=null===e?null:Math.min(Ct-1,Math.max(0,e));J?Ne(t):we(t)},At=e=>{Se(null);Pt(((J?Me:ke)??(e>0?-1:Ct))+e)},jt=null===Nt?[]:r.flatMap((e,t)=>{if(!ye.visible[t]||Mt&&Mt.series!==t)return[];const n=Te[t]?.[Nt];return n&&null!==n.value?[{seriesIndex:t,name:e.name,color:n.color??Be[t],value:n.value,formatted:Pe(n.value),label:n.label}]:[]}),Tt=Mt&&ee?ee(Mt):null,Bt=Tt?Tt.items:"item"===wt&&jt.length>1&&null!==Ce?[jt.reduce((e,t)=>Math.abs(xt(t.value??0)-Ce)<Math.abs(xt(e.value??0)-Ce)?t:e)]:jt,Et=Mt?Te[Mt.series]?.[Mt.index]?.x??m?.[Mt.index]??Mt.index:void 0,_t=e=>"number"==typeof e&&Xe?S(ae,{}).format(e):f(e,ae),Lt=Mt?Mt.x:y?xt(Bt[0]?.value??0):ut.left+ft(Nt??0),Wt=Mt?Mt.y:y?ut.top+ft(Nt??0):ut.top,$t=Mt?(Mt.x-ut.left)/Math.max(1,ut.width)>.6:(y?De.fraction(Bt[0]?.value??0):ft(Nt??0)/Math.max(1,ht))>.6,Rt=!1===re?{interactive:!1}:!0===re||void 0===re?{}:re,It=!0===re||!1!==re&&r.length>1,Ft=Rt.side??"bottom",Ht={...vt,hovered:ye.hovered,activeIndex:Nt,marks:yt,activeMark:Mt},Dt=0===Ee||null===We||"value"===X&&null===Ve;return n(ChartSurface,{...me,size:oe,variant:ce,padded:de,className:ue,legendSide:Ft,legend:It?e(ChartLegendBar,{series:r,colors:Be,options:Rt,visibility:ye,size:oe,swatch:G,values:Rt.showValue&&null!==Nt?r.map((e,t)=>{const n=Te[t]?.[Nt]?.value;return null==n?void 0:Pe(n)}):void 0}):null,table:Dt?null:O?.(be,Pe)??e(q,{id:be,caption:le,corner:He?.label,categories:_e,series:r,values:Te,format:Pe,locale:ae}),children:[n("div",{ref:fe,role:"img",tabIndex:Dt?void 0:0,"aria-label":le??pe.label,"aria-describedby":Dt?void 0:ve,onPointerMove:zt,onPointerDown:e=>{"touch"===e.pointerType&&zt(e)},onPointerLeave:e=>{"touch"!==e.pointerType&&St()},onKeyDown:"none"===wt?void 0:e=>{const t=y?"ArrowDown":"ArrowRight",n=y?"ArrowUp":"ArrowLeft";if(e.key===t)At(1);else if(e.key===n)At(-1);else if("Home"===e.key)Pt(0);else if("End"===e.key)Pt(Ct-1);else{if("Escape"!==e.key)return;St()}e.preventDefault()},onBlur:St,className:B("relative w-full","rounded-(--neba-radius-xs)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2"),style:{height:"string"==typeof te?te:Re},children:[Dt?e("div",{className:B("flex h-full items-center justify-center text-(--neba-muted-fg)",_[oe]),children:se??ge.title}):xe>0?n("svg",{width:xe,height:dt||"100%",viewBox:`0 0 ${xe} ${dt}`,"aria-hidden":"true",className:"block overflow-visible",children:[e(ChartAxes,{plot:ut,scale:De,band:mt,horizontal:y,inset:W,categoryPx:ft,valuePx:xt,tickTexts:Ye,widestTick:Je,categoryTexts:nt,widestCategory:at,categoryScale:Xe,categoryValuePx:pt,valueAxis:Fe,categoryAxis:He,fontSize:Ie,zeroPx:bt}),null===Nt||J||"index"!==wt||!1===kt.crosshair?null:(()=>{const t=ft(Nt);return e("line",y?{x1:ut.left,x2:ut.left+ut.width,y1:ut.top+t,y2:ut.top+t,stroke:"var(--neba-chart-baseline)",strokeWidth:1}:{x1:ut.left+t,x2:ut.left+t,y1:ut.top,y2:ut.top+ut.height,stroke:"var(--neba-chart-baseline)",strokeWidth:1})})(),he(Ht)]}):null,null!==Nt&&Bt.length>0&&"none"!==wt?kt.render?e("div",{className:"pointer-events-none absolute z-10",style:$t?{right:`calc(100% - ${Lt}px + 10px)`,top:Wt}:{left:Lt+10,top:Wt},children:kt.render({index:Nt,category:Et??_e[Nt],items:Bt})}):e(ChartTooltipPanel,{heading:Tt?Tt.heading:_t(Et??_e[Nt]),items:Bt,x:Lt,y:Wt,flip:$t,size:oe}):null]}),Dt?null:e(ChartSummary,{id:ve,template:pe.summary,locale:ae,...$e}),"none"===wt?null:e(ChartStatus,{heading:null===Nt?void 0:Tt?.heading??_t(Et??_e[Nt]),items:Bt})]})}function ChartAxes({plot:a,scale:l,horizontal:r,categoryPx:i,valuePx:s,tickTexts:o,widestTick:c,categoryTexts:d,widestCategory:u,categoryScale:h,categoryValuePx:f,valueAxis:x,categoryAxis:g,fontSize:p,zeroPx:k}){const w=!1!==x?.grid&&!x?.hidden,M=r?g:x,N=r?x:g,C=!g?.hidden&&(g?.grid??null!==h),S=e=>h?f(h.ticks[e]):(r?a.top:a.left)+i(e),z=y(d.length,r?a.height:a.width,r?1.8*p:Math.max(u,1)+12),P=y(l.ticks.length,r?a.width:a.height,r?Math.max(c,1)+16:2*p),A=d.length>1?Math.abs(S(1)-S(0)):a.width,j=l.ticks.length>1?Math.abs(s(l.ticks[1])-s(l.ticks[0])):a.height,T=m(d.length,z,A,r?1.8*p:v(d[d.length-1]??"",p)),B=m(l.ticks.length,P,j,r?v(o[o.length-1]??"",p):1.6*p);return n("g",{children:[l.ticks.map((t,i)=>{const c=s(t),d=Math.abs(t)<1e-9;return n("g",{children:[w?e("line",r?{x1:c,x2:c,y1:a.top,y2:a.top+a.height,stroke:d?"var(--neba-chart-baseline)":"var(--neba-chart-grid)",strokeWidth:1}:{x1:a.left,x2:a.left+a.width,y1:c,y2:c,stroke:d?"var(--neba-chart-baseline)":"var(--neba-chart-grid)",strokeWidth:1}):null,x?.hidden||!b(i,l.ticks.length,P,B)?null:e("text",r?{x:c,y:a.top+a.height+p+6,textAnchor:0===i?"start":i===l.ticks.length-1?"end":"middle",fontSize:p,fill:"var(--neba-muted-fg)",className:"tabular-nums",children:o[i]}:{x:a.left-8,y:c,textAnchor:"end",dominantBaseline:"central",fontSize:p,fill:"var(--neba-muted-fg)",className:"tabular-nums",children:o[i]})]},t)}),g?.hidden?null:n(t,{children:[e("line",r?{x1:k,x2:k,y1:a.top,y2:a.top+a.height,stroke:"var(--neba-chart-axis)",strokeWidth:1}:{x1:a.left,x2:a.left+a.width,y1:k,y2:k,stroke:"var(--neba-chart-axis)",strokeWidth:1}),d.map((t,l)=>{const i=S(l),s=b(l,d.length,z,T);return r?s?e("text",{x:a.left-8,y:i,textAnchor:"end",dominantBaseline:"central",fontSize:p,fill:"var(--neba-muted-fg)",className:h?"tabular-nums":void 0,children:t},l):null:n("g",{children:[C?e("line",{x1:i,x2:i,y1:a.top,y2:a.top+a.height,stroke:"var(--neba-chart-grid)",strokeWidth:1}):null,s?e("text",{x:i,y:a.top+a.height+p+6,textAnchor:h?0===l?"start":l===d.length-1?"end":"middle":"middle",fontSize:p,fill:"var(--neba-muted-fg)",className:h?"tabular-nums":void 0,children:t}):null]},l)})]}),M?.label&&!M.hidden?e("text",{x:a.left,y:p+2,textAnchor:"start",fontSize:p,fill:"var(--neba-muted-fg)",fontWeight:500,children:M.label}):null,N?.label&&!N.hidden?e("text",{x:a.left+a.width,y:a.top+a.height+2*p+12,textAnchor:"end",fontSize:p,fill:"var(--neba-muted-fg)",fontWeight:500,children:N.label}):null]})}export{q as ChartDataTable,ChartLegendBar,ChartScaleLegend,ChartStatus,ChartSummary,ChartSurface,ChartTooltipPanel,Z as summarise,H as chartHeight,F as useMeasuredHeight,I as useMeasuredWidth,Y as useReleaseOutside,D as useVisibility};
+"use client";import{jsx as e,Fragment as t,jsxs as n}from"react/jsx-runtime";import{useStyleDefaults as a}from"./defaults.js";import*as l from"react";import{Box as r}from"../components/box/Box.js";import{bandScale as i,categoryAt as o,categoryCount as s,categoryExtent as c,chartFontSizes as u,compactNumber as d,extentOf as h,fitsLast as m,formatCategory as f,markerRadii as x,plotHeights as g,resolveColor as p,seriesColor as v,showsTick as b,textWidth as y,tickStride as k,toFullShares as M,toValues as w,truncate as C,turnedAxis as S,valueScale as N,warnPaletteOverflow as z}from"./chart.js";import{numberFormatter as A}from"./format.js";import{observeResize as P}from"./observe.js";import{chartMessages as j,emptyMessages as B,fillMessage as T,useMessages as E}from"./i18n.js";import{cx as $,hasContent as F,metaTextClasses as R,srOnlyClasses as W,transitionClasses as _}from"./styles.js";const L="undefined"==typeof document?l.useEffect:l.useLayoutEffect,D=[];function I(e){const[t,n]=l.useState(0);return L(()=>{const t=e.current;if(!t)return;const a=()=>n(t.clientWidth);return a(),P(t,a)},[e]),t}function H(e,t){const[n,a]=l.useState(0);return L(()=>{const n=e.current;if(!t||!n)return;const l=()=>a(n.clientHeight);return l(),P(n,l)},[e,t]),n}function V(e,t,n){return"number"==typeof e?e:void 0===e?g[t]:n}export const markTransitionClasses=["[transition:opacity_var(--neba-duration)_var(--neba-ease),","r_var(--neba-duration)_var(--neba-ease),","scale_var(--neba-duration)_var(--neba-ease)]"].join("");function O(e){const[t,n]=l.useState(()=>new Map),[a,r]=l.useState(null),i=function(e){const t=new Map;return e.map((e,n)=>{if(void 0===e.name)return`index:${n}`;const a=t.get(e.name)??0;return t.set(e.name,a+1),`name:${a}:${e.name}`})}(e),o=l.useRef({series:e,keys:i});l.useEffect(()=>{o.current={series:e,keys:i}});const s=l.useCallback(e=>{const{series:t,keys:a}=o.current,l=a[e];void 0!==l&&n(n=>{const a=new Map(n);return a.set(l,!(n.get(l)??!t[e]?.hidden)),a})},[]);return{visible:e.map((e,n)=>t.get(i[n])??!e.hidden),hovered:a,toggle:s,setHovered:r}}const Z={top:"flex-col-reverse",bottom:"flex-col",left:"flex-row-reverse",right:"flex-row"},X={start:"justify-start",center:"justify-center",end:"justify-end"};function Y(e,t,n){const a=l.useRef(n);l.useEffect(()=>{a.current=n}),l.useEffect(()=>{if(!t)return;const n=t=>{const n=e.current;n&&t.target instanceof Node&&!n.contains(t.target)&&a.current()};return document.addEventListener("pointerdown",n,!0),()=>document.removeEventListener("pointerdown",n,!0)},[e,t])}function ChartLegendBar({series:a,colors:l,options:r,visibility:i,size:o,values:s,swatch:c}){const u=!1!==r.interactive,d="left"===r.side||"right"===r.side;return e("ul",{className:$("flex list-none flex-wrap items-center gap-x-3 gap-y-1 p-0",d?"min-w-0 flex-col items-start":"",X[r.align??"center"],R[o]),children:a.map((a,r)=>{const o=i.visible[r],d=null!==i.hovered&&i.hovered!==r,h=a.name??`${r+1}`,m=l[r],f=n(t,{children:[e("span",c?{"aria-hidden":"true",className:"flex size-2.5 shrink-0 items-center justify-center",children:c(r,m)}:{"aria-hidden":"true",className:`size-2.5 shrink-0 rounded-[0.1875rem] ${_}`,style:{backgroundColor:m}}),e("span",{className:"min-w-0 truncate",children:h}),s?.[r]?e("span",{className:"shrink-0 tabular-nums text-(--neba-muted-fg)",children:s[r]}):null]});return e("li",{className:"min-w-0",children:u?e("button",{type:"button","aria-pressed":o,onClick:()=>i.toggle(r),onPointerEnter:()=>i.setHovered(r),onPointerLeave:()=>i.setHovered(null),onFocus:()=>i.setHovered(r),onBlur:()=>i.setHovered(null),className:$("flex min-w-0 cursor-pointer items-center gap-1.5 rounded-(--neba-radius-xs)","px-1 py-0.5 text-(--neba-fg)","[transition-property:background-color,color,opacity]","[transition-duration:var(--neba-duration)]","[transition-timing-function:var(--neba-ease)]","hover:bg-(--n-soft)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-1",o?d?"opacity-55":"":"opacity-40"),children:f}):e("span",{className:$("flex min-w-0 items-center gap-1.5 px-1 py-0.5 text-(--neba-fg)",o?"":"opacity-40"),children:f})},a.name??r)})})}function ChartScaleLegend({steps:a,from:l,to:r,middle:i,align:o,vertical:s,size:c}){return e("div",{className:$("flex",s?"":X[o]),children:n("div",{className:$("grid grid-cols-[auto_auto_auto] items-center gap-x-2",R[c]),children:[e("span",{className:"shrink-0 tabular-nums text-(--neba-muted-fg)",children:l}),e("span",{"aria-hidden":"true",className:$("flex h-2.5 overflow-hidden rounded-[0.1875rem]",s?"w-20":"w-24"),children:a.map(t=>e("span",{className:"h-full flex-1",style:{backgroundColor:t}},t))}),e("span",{className:"shrink-0 tabular-nums text-(--neba-muted-fg)",children:r}),i?n(t,{children:[e("span",{}),e("span",{className:"text-center tabular-nums text-(--neba-muted-fg)",children:i}),e("span",{})]}):null]})})}function ChartTooltipPanel({heading:t,items:a,x:l,y:r,flip:i,size:o}){return n("div",{"data-neba-tooltip":"",className:$("pointer-events-none absolute z-10 max-w-56 min-w-24","rounded-(--neba-radius-sm) border p-2","[background-image:var(--neba-grain),var(--neba-sheen)]","[background-blend-mode:overlay,normal] [backdrop-filter:var(--neba-blur)]","bg-(--neba-panel-press) [border-color:var(--n-line)]","[box-shadow:var(--neba-shadow-2),var(--neba-plate-glass)]",R[o]),style:i?{right:`calc(100% - ${l}px + 10px)`,top:r}:{left:l+10,top:r},children:[e("div",{className:"mb-1 font-medium text-(--neba-fg)",children:t}),e("ul",{className:"flex list-none flex-col gap-0.5 p-0",children:a.map(t=>n("li",{className:"flex items-center gap-1.5",children:[e("span",{"aria-hidden":"true",className:"size-2 shrink-0 rounded-[0.125rem]",style:{backgroundColor:t.color}}),t.name?e("span",{className:"min-w-0 flex-1 truncate text-(--neba-muted-fg)",children:t.name}):null,e("span",{className:"ms-auto shrink-0 font-medium tabular-nums text-(--neba-fg)",children:t.label??t.formatted})]},t.seriesIndex))})]})}function ChartSummary({id:t,template:n,count:a,min:l,max:r,locale:i}){return e("span",{id:t,hidden:!0,children:T(n,{count:A(i,{}).format(a),min:l,max:r})})}function q(e,t){let n=0,a=1/0,l=-1/0;for(const t of e)for(const e of t)null===e.value||Number.isNaN(e.value)||(n+=1,a=Math.min(a,e.value),l=Math.max(l,e.value));return 0===n?{count:n,min:"",max:""}:{count:n,min:t(a),max:t(l)}}function ChartStatus({heading:a,items:r}){return e("span",{role:"status","aria-live":"polite",className:W,children:0===r.length?null:n(t,{children:[F(a)?n(t,{children:[a,", "]}):null,r.map((e,t)=>n(l.Fragment,{children:[t>0?", ":null,e.name?`${e.name}: `:null,e.label??e.formatted]},e.seriesIndex))]})})}const J=/*@__PURE__*/l.memo(function ChartDataTable({id:t,caption:a,corner:l,categories:r,series:i,values:o,format:s,formatFor:c,locale:u}){return n("table",{id:t,className:W,children:[a?e("caption",{children:a}):null,e("thead",{children:n("tr",{children:[e("th",{scope:"col",children:l??""}),i.map((t,n)=>e("th",{scope:"col",children:t.name??n+1},t.name??n))]})}),e("tbody",{children:r.map((t,a)=>n("tr",{children:[e("th",{scope:"row",children:f(t,u)}),i.map((t,n)=>{const l=o[n]?.[a];return e("td",void 0!==l?.label?{children:l.label}:{children:null==l?.value?"":(c?.(n)??s)(l.value)},t.name??n)})]},a))})]})}),K=l.lazy(()=>import("./chart-brush.js").then(e=>({default:e.ChartBrush})));function ChartExport({rows:t,fileName:n,onExport:a,label:l}){return e("button",{type:"button","aria-label":l,title:l,onClick:async()=>{const{toCsv:e,downloadText:l}=await(import("./csv.js")),r=e(t());a?a(r):l(r,n,"text/csv;charset=utf-8")},className:$("absolute end-0 top-0 z-10 inline-flex size-6 cursor-pointer items-center justify-center","rounded-(--neba-radius-xs) text-(--neba-muted-fg)","hover:bg-(--n-soft) hover:text-(--neba-fg)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-1",_),children:e("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",className:"size-3.5",children:e("path",{d:"M12 3v12m0 0 4-4m-4 4-4-4M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2"})})})}function ChartSurface({legend:t,legendSide:a,children:l,table:i,className:o,...s}){return n(r,{...s,className:$("relative flex gap-3",Z[a],o??void 0),children:[e("div",{className:"relative min-w-0 flex-1",children:l}),t,i]})}function ChartReferences({references:t,plot:a,horizontal:l,valuePx:r,categoryPx:i,categoryScale:o,categoryValuePx:s,fontSize:c}){return e("g",{children:t.map((t,u)=>{const d="value"===(t.axis??"value"),h=e=>d?r(e):o?s(e):(l?a.top:a.left)+i(e),m=d?!l:l,f=h(t.value),x=void 0===t.to?null:h(t.to),g=null===x?f:Math.min(f,x),v=null===x?f:Math.max(f,x),b=t.color?p(t.color):"var(--neba-muted-fg)",y=t.solid?void 0:"4 4",k=t.label?e("text",{x:m?a.left+a.width-4:g+4,y:m?g-5:a.top+c,textAnchor:m?"end":"start",fontSize:c,fontWeight:500,fill:b,children:t.label}):null;return n("g",{children:[null===x?null:e("rect",{x:m?a.left:g,y:m?g:a.top,width:m?a.width:Math.max(0,v-g),height:m?Math.max(0,v-g):a.height,fill:`color-mix(in oklab, ${b} 12%, transparent)`}),(null===x?[f]:[g,v]).map((t,n)=>e("line",{x1:m?a.left:t,x2:m?a.left+a.width:t,y1:m?t:a.top,y2:m?t:a.top+a.height,stroke:b,strokeWidth:1,strokeDasharray:y},n)),k]},u)})})}export function CartesianChart(r){const{series:m,categories:g,xAxis:p,yAxis:b,secondaryAxis:k,brush:P,references:T,horizontal:F=!1,stacked:_=!1,stackedFull:L=!1,includeZero:Z=!0,bandRatio:X=1,inset:U=!1,headroom:G=0,markInset:Q=0,xScale:ee="band",marks:te,markRadius:ne=24,table:ae,summary:le,swatch:re,scale:ie,markTooltip:oe,height:se,format:ce,locale:ue,label:de,legend:he,tooltip:me,empty:fe,exportable:xe=!1,exportFileName:ge="chart.csv",onExport:pe,size:ve="md",variant:be="text",padded:ye=!1,className:ke,children:Me,...we}=a(r,["size","variant","locale"]),Ce=l.useRef(null),Se=I(Ce),Ne=E(B,ue),ze=E(j,ue),Ae=l.useId(),Pe=l.useId(),je=O(m);l.useEffect(()=>{z(m.length)},[m.length]);const Be=s(m),Te=!0===P?{}:!1===P||void 0===P?null:P,[Ee,$e]=l.useState(null),Fe=Te?Te.range??Ee??Te.defaultRange??[0,Math.max(0,Be-1)]:[0,Math.max(0,Be-1)],Re=Math.min(Math.max(0,Math.round(Fe[0])),Math.max(0,Be-1)),We=Math.min(Math.max(Re,Math.round(Fe[1])),Math.max(0,Be-1)),_e=null!==Te&&(Re>0||We<Be-1),Le=l.useMemo(()=>_e?m.map(e=>({...e,data:e.data.slice(Re,We+1)})):m,[m,_e,Re,We]),De=l.useMemo(()=>_e&&g?g.slice(Re,We+1):g,[g,_e,Re,We]),[Ie,He]=l.useState(null),[Ve,Oe]=l.useState(null),[Ze,Xe]=l.useState(null),Ye=ce?JSON.stringify(ce):"",qe=l.useCallback(e=>ce?A(ue,ce).format(e):d(e,ue),[Ye,ue]),Je=l.useMemo(()=>w(Le),[Le]),Ke=je.visible.map(Number).join(""),Ue=l.useMemo(()=>L?M(Je,je.visible,qe):Je,[Je,L,Ke,qe]),Ge=l.useMemo(()=>Le.map((e,t)=>v(e,t)),[Le]),Qe=s(Le),et=l.useMemo(()=>Array.from({length:Qe},(e,t)=>o(t,De,Ue)),[Qe,De,Ue]),tt=l.useMemo(()=>_e?w(m):Ue,[_e,m,Ue]),nt=l.useMemo(()=>_e?Array.from({length:Be},(e,t)=>o(t,g,tt)):et,[_e,Be,g,tt,et]),at=Boolean(k)&&!_&&!L,lt=l.useCallback(e=>at&&"secondary"===Le[e]?.axis,[at,Le]),rt=Ue.filter((e,t)=>je.visible[t]),it=Ue.filter((e,t)=>je.visible[t]&&!lt(t)),ot=Ue.filter((e,t)=>je.visible[t]&&lt(t)),st=l.useMemo(()=>{const e=h(it,_),t=(T??[]).filter(e=>"value"===(e.axis??"value"));if(0===t.length)return e;const n=t.flatMap(e=>void 0===e.to?[e.value]:[e.value,e.to]);return{min:Math.min(e?.min??1/0,...n),max:Math.max(e?.max??-1/0,...n)}},[it,_,T]),ct=l.useMemo(()=>at?h(ot,!1):null,[at,ot]),ut=le??q(rt,qe),dt=V(se,ve,H(Ce,"string"==typeof se)),ht=u[ve],mt=b,ft=p,xt=ie??N(st,{min:mt?.min,max:mt?.max,tickCount:mt?.tickCount,includeZero:Z}),gt=null===ct?null:N(ct,{min:k?.min,max:k?.max,tickCount:k?.tickCount??xt.ticks.length,includeZero:Z}),pt="value"===ee?c(rt,De):null,vt="value"===ee?N(pt,{min:ft?.min,max:ft?.max,tickCount:ft?.tickCount,includeZero:!1}):null,bt=xt.ticks.map((e,t)=>mt?.tickFormat?String(mt.tickFormat(e,t)):qe(e)),yt=ft?.tickFormat,kt=l.useMemo(()=>vt?vt.ticks.map((e,t)=>yt?String(yt(e,t)):d(e,ue)):et.map((e,t)=>yt?String(yt(e,t)):f(e,ue)),[vt?vt.ticks.join(" "):et,yt,ue]),Mt=bt.reduce((e,t)=>Math.max(e,y(t,ht)),0),wt=(gt?.ticks??[]).map((e,t)=>k?.tickFormat?String(k.tickFormat(e,t)):qe(e)),Ct=wt.reduce((e,t)=>Math.max(e,y(t,ht)),0),St=ht+6,Nt=gt&&!k?.hidden?k?.thickness??(F?ht+12:Ct+10)+(k?.label?St:0):0,zt=F?ft:mt,At=Boolean(zt?.label)&&!zt?.hidden,Pt=F||ft?.hidden?0:ft?.tickAngle,jt=l.useMemo(()=>S(Pt,ht),[Pt,ht]),Bt=0!==jt.angle,Tt=mt?.hidden?0:Mt+10,Et=(Se-(F?0:Tt)-16)/Math.max(1,Qe),$t=Math.min(140,.4*dt),Ft=!vt&&(F||Bt||Et-6>=2.4*ht),Rt=F?150:Bt?jt.cut($t):Et-6,Wt=l.useMemo(()=>Ft?kt.map(e=>C(e,Rt,ht)):kt,[kt,Ft,Rt,ht]),_t=l.useMemo(()=>Wt.reduce((e,t)=>Math.max(e,y(t,ht)),0),[Wt,ht]),Lt=F?ft?.hidden?0:_t+10:Tt,Dt=jt.depth(_t),It=Te?(Te.height??32)+10:0,Ht=(F?mt?.hidden?0:ht+12+(mt?.label?St:0):ft?.hidden?0:Dt+12+(ft?.label?St:0))+It,Vt=(F?ft:mt)?.thickness??Lt,Ot=(F?mt:ft)?.thickness??Ht,Zt=(F||vt?12:Bt?jt.angle>0?jt.overhang(_t)+8:8:Math.max(8,Wt.length?jt.overhang(_t):8))+Q+(F?0:Nt),Xt=x[ve]+4+G+Q+(At?St+2:0)+(xe?20:0)+(F?Nt:0),Yt=dt,qt={left:Vt+Q,top:Xt,width:Math.max(0,Se-Vt-Q-Zt),height:Math.max(0,Yt-Xt-Ot-Q)},Jt=F?qt.height:qt.width,Kt=i(U?Math.max(1,Qe-1):Qe,Jt,X),Ut=l.useCallback(e=>U?Qe<=1?Jt/2:Jt*e/(Qe-1):Kt.centre(e),[U,Qe,Jt,Kt]),Gt=l.useCallback((e,t)=>{return n=void 0!==t&&lt(t)&&gt?gt:xt,F?qt.left+n.fraction(e)*qt.width:qt.top+(1-n.fraction(e))*qt.height;var n},[F,qt.left,qt.top,qt.width,qt.height,xt,gt,lt]),Qt=l.useCallback((e,t,n)=>F?{x:Gt(t,n),y:qt.top+Ut(e)}:{x:qt.left+Ut(e),y:Gt(t,n)},[F,Gt,Ut,qt.left,qt.top]),en=l.useCallback(e=>F?qt.top+(1-(vt?.fraction(e)??0))*qt.height:qt.left+(vt?.fraction(e)??0)*qt.width,[F,qt.left,qt.top,qt.width,qt.height,vt]),tn=l.useCallback(e=>{const t=void 0!==e&&lt(e)&&gt?gt:xt;return Gt(Math.min(Math.max(0,t.min),t.max),e)},[Gt,xt,gt,lt]),nn=tn(),an=l.useCallback(e=>lt(e)&&k?.tickFormat?e=>String(k.tickFormat(e,0)):qe,[lt,k,qe]),ln={plot:qt,values:Ue,visible:je.visible,colors:Ge,scale:xt,secondScale:gt,onSecond:lt,band:Kt,horizontal:F,valuePx:Gt,categoryPx:Ut,point:Qt,categoryScale:vt,categoryValuePx:en,zeroPx:nn,zeroPxOf:tn,categories:et,format:qe,size:ve},rn=te?te(ln):D,on=(T??[]).filter(e=>Boolean(e.label)),sn=e=>{const t=t=>"value"===(e.axis??"value")?qe(t):f(vt?t:et[t]??t,ue);return void 0===e.to?t(e.value):`${t(e.value)}–${t(e.to)}`},cn=!1===me?{mode:"none"}:!0===me||void 0===me?{}:me,un=cn.mode??(te?"item":"index"),dn=null===Ve?null:rn[Ve]??null,hn=te?dn?dn.index:null:Ie,mn=te?rn.length:Qe,fn=()=>{He(null),Oe(null),Xe(null)};Y(Ce,null!==hn,fn);const xn=e=>{if("none"!==un){if(te){const t=((e,t)=>{const n=Ce.current;if(!n||0===rn.length)return null;const a=n.getBoundingClientRect(),l=e-a.left,r=t-a.top;let i=null,o=1/0,s=1/0;return rn.forEach((e,t)=>{const n=e.x-l,a=e.y-r,c=Math.sqrt(n*n+a*a);let u;if(void 0===e.rx)u=Math.max(0,c-e.r);else{const t=Math.max(0,Math.abs(n)-e.rx),l=Math.max(0,Math.abs(a)-(e.ry??e.rx));u=Math.sqrt(t*t+l*l)}u<=ne&&(u<o||u===o&&c<s)&&(o=u,s=c,i=t)}),i})(e.clientX,e.clientY);t!==Ve&&Oe(t)}else{const t=((e,t)=>{const n=Ce.current;if(!n||0===Qe)return null;const a=n.getBoundingClientRect(),l=F?t-a.top-qt.top:e-a.left-qt.left;if(l<-Kt.step||l>Jt+Kt.step)return null;const r=U?Qe<=1?0:Math.round(l/Jt*(Qe-1)):Math.floor(l/Kt.step);return Math.min(Qe-1,Math.max(0,r))})(e.clientX,e.clientY);t!==Ie&&He(t)}"item"!==un||te||Xe(((e,t)=>{const n=Ce.current;if(!n)return null;const a=n.getBoundingClientRect();return F?e-a.left:t-a.top})(e.clientX,e.clientY))}},gn=e=>{const t=null===e?null:Math.min(mn-1,Math.max(0,e));te?Oe(t):He(t)},pn=e=>{Xe(null);gn(((te?Ve:Ie)??(e>0?-1:mn))+e)},vn=null===hn?[]:Le.flatMap((e,t)=>{if(!je.visible[t]||dn&&dn.series!==t)return[];const n=Ue[t]?.[hn];return n&&null!==n.value?[{seriesIndex:t,name:e.name,color:n.color??Ge[t],value:n.value,formatted:an(t)(n.value),label:n.label}]:[]}),bn=dn&&oe?oe(dn):null,yn=bn?bn.items:"item"===un&&vn.length>1&&null!==Ze?[vn.reduce((e,t)=>Math.abs(Gt(t.value??0)-Ze)<Math.abs(Gt(e.value??0)-Ze)?t:e)]:vn,kn=dn?Ue[dn.series]?.[dn.index]?.x??De?.[dn.index]??dn.index:void 0,Mn=e=>"number"==typeof e&&vt?A(ue,{}).format(e):f(e,ue),wn=dn?dn.x:F?Gt(yn[0]?.value??0):qt.left+Ut(hn??0),Cn=dn?dn.y:F?qt.top+Ut(hn??0):qt.top,Sn=dn?(dn.x-qt.left)/Math.max(1,qt.width)>.6:(F?xt.fraction(yn[0]?.value??0):Ut(hn??0)/Math.max(1,Jt))>.6,Nn=!1===he?{interactive:!1}:!0===he||void 0===he?{}:he,zn=!0===he||!1!==he&&Le.length>1,An=Nn.side??"bottom",Pn={...ln,hovered:je.hovered,activeIndex:hn,marks:rn,activeMark:dn},jn=0===Qe||null===st||"value"===ee&&null===pt;return n(ChartSurface,{...we,size:ve,variant:be,padded:ye,className:ke,legendSide:An,legend:zn?e(ChartLegendBar,{series:Le,colors:Ge,options:Nn,visibility:je,size:ve,swatch:re,values:Nn.showValue&&null!==hn?Le.map((e,t)=>{const n=Ue[t]?.[hn]?.value;return null==n?void 0:an(t)(n)}):void 0}):null,table:jn?null:n(t,{children:[ae?.(Ae,qe)??e(J,{id:Ae,caption:de,corner:ft?.label,categories:nt,series:Le,values:tt,format:qe,formatFor:at?an:void 0,locale:ue}),on.length>0?e("ul",{className:W,children:on.map((e,t)=>n("li",{children:[e.label,": ",sn(e)]},t))}):null]}),children:[xe&&!jn?e(ChartExport,{rows:()=>[[ft?.label??"",...Le.map((e,t)=>e.name??`${t+1}`)],...nt.map((e,t)=>[e,...tt.map(e=>e[t]?.value??null)])],fileName:ge,onExport:pe,label:ze.exportCsv}):null,n("div",{ref:Ce,role:"img",tabIndex:jn?void 0:0,"aria-label":de??ze.label,"aria-describedby":jn?void 0:Pe,onPointerMove:xn,onPointerDown:e=>{"touch"===e.pointerType&&xn(e)},onPointerLeave:e=>{"touch"!==e.pointerType&&fn()},onKeyDown:"none"===un?void 0:e=>{const t=F?"ArrowDown":"ArrowRight",n=F?"ArrowUp":"ArrowLeft";if(e.key===t)pn(1);else if(e.key===n)pn(-1);else if("Home"===e.key)gn(0);else if("End"===e.key)gn(mn-1);else{if("Escape"!==e.key)return;fn()}e.preventDefault()},onBlur:fn,className:$("relative w-full","rounded-(--neba-radius-xs)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2"),style:{height:"string"==typeof se?se:dt},children:[jn?e("div",{className:$("flex h-full items-center justify-center text-(--neba-muted-fg)",R[ve]),children:fe??Ne.title}):Se>0?n("svg",{width:Se,height:Yt||"100%",viewBox:`0 0 ${Se} ${Yt}`,"aria-hidden":"true",className:"block overflow-visible",children:[e(ChartAxes,{plot:qt,scale:xt,band:Kt,horizontal:F,inset:U,categoryPx:Ut,valuePx:Gt,tickTexts:bt,widestTick:Mt,categoryTexts:Wt,widestCategory:_t,categoryScale:vt,categoryValuePx:en,valueAxis:mt,categoryAxis:ft,secondScale:gt,secondTickTexts:wt,secondaryAxis:k,fontSize:ht,turn:jt,labelDepth:Dt,zeroPx:nn}),T&&T.length>0?e(ChartReferences,{references:T,plot:qt,horizontal:F,valuePx:Gt,categoryPx:Ut,categoryScale:vt,categoryValuePx:en,fontSize:ht}):null,null===hn||te||"index"!==un||!1===cn.crosshair?null:(()=>{const t=Ut(hn);return e("line",F?{x1:qt.left,x2:qt.left+qt.width,y1:qt.top+t,y2:qt.top+t,stroke:"var(--neba-chart-baseline)",strokeWidth:1}:{x1:qt.left+t,x2:qt.left+t,y1:qt.top,y2:qt.top+qt.height,stroke:"var(--neba-chart-baseline)",strokeWidth:1})})(),Me(Pn)]}):null,null!==hn&&yn.length>0&&"none"!==un?cn.render?e("div",{className:"pointer-events-none absolute z-10",style:Sn?{right:`calc(100% - ${wn}px + 10px)`,top:Cn}:{left:wn+10,top:Cn},children:cn.render({index:hn,category:kn??et[hn],items:yn})}):e(ChartTooltipPanel,{heading:bn?bn.heading:Mn(kn??et[hn]),items:yn,x:wn,y:Cn,flip:Sn,size:ve}):null]}),Te&&!jn?e(l.Suspense,{fallback:null,children:e(K,{outline:(tt[je.visible.indexOf(!0)]??tt[0]??[]).map(e=>e.value),count:Be,range:[Re,We],onRange:e=>{$e(e),Te.onRangeChange?.(e)},color:Ge[Math.max(0,je.visible.indexOf(!0))]??Ge[0],height:Te.height??32,words:{start:ze.start,end:ze.end},categories:nt,locale:ue,width:Se})}):null,jn?null:e(ChartSummary,{id:Pe,template:ze.summary,locale:ue,...ut}),"none"===un?null:e(ChartStatus,{heading:null===hn?void 0:bn?.heading??Mn(kn??et[hn]),items:yn})]})}function ChartAxes({plot:a,scale:l,horizontal:r,categoryPx:i,valuePx:o,tickTexts:s,widestTick:c,categoryTexts:u,widestCategory:d,categoryScale:h,categoryValuePx:f,valueAxis:x,categoryAxis:g,secondScale:p,secondTickTexts:v,secondaryAxis:M,fontSize:w,turn:C,labelDepth:S,zeroPx:N}){const z=!1!==x?.grid&&!x?.hidden,A=r?g:x,P=r?x:g,j=!g?.hidden&&(g?.grid??null!==h),B=e=>h?f(h.ticks[e]):(r?a.top:a.left)+i(e),T=0!==C.angle,E=C.room(d),$=k(u.length,r?a.height:a.width,r?1.8*w:E),F=k(l.ticks.length,r?a.width:a.height,r?Math.max(c,1)+16:2*w),R=u.length>1?Math.abs(B(1)-B(0)):a.width,W=l.ticks.length>1?Math.abs(o(l.ticks[1])-o(l.ticks[0])):a.height,_=m(u.length,$,R,r?1.8*w:T?E:y(u[u.length-1]??"",w)),L=a.top+a.height+C.offset,D=m(l.ticks.length,F,W,r?y(s[s.length-1]??"",w):1.6*w);return n("g",{children:[l.ticks.map((t,i)=>{const c=o(t),u=Math.abs(t)<1e-9;return n("g",{children:[z?e("line",r?{x1:c,x2:c,y1:a.top,y2:a.top+a.height,stroke:u?"var(--neba-chart-baseline)":"var(--neba-chart-grid)",strokeWidth:1}:{x1:a.left,x2:a.left+a.width,y1:c,y2:c,stroke:u?"var(--neba-chart-baseline)":"var(--neba-chart-grid)",strokeWidth:1}):null,x?.hidden||!b(i,l.ticks.length,F,D)?null:e("text",r?{x:c,y:a.top+a.height+w+6,textAnchor:0===i?"start":i===l.ticks.length-1?"end":"middle",fontSize:w,fill:"var(--neba-muted-fg)",className:"tabular-nums",children:s[i]}:{x:a.left-8,y:c,textAnchor:"end",dominantBaseline:"central",fontSize:w,fill:"var(--neba-muted-fg)",className:"tabular-nums",children:s[i]})]},t)}),g?.hidden?null:n(t,{children:[e("line",r?{x1:N,x2:N,y1:a.top,y2:a.top+a.height,stroke:"var(--neba-chart-axis)",strokeWidth:1}:{x1:a.left,x2:a.left+a.width,y1:N,y2:N,stroke:"var(--neba-chart-axis)",strokeWidth:1}),u.map((t,l)=>{const i=B(l),o=b(l,u.length,$,_);return r?o?e("text",{x:a.left-8,y:i,textAnchor:"end",dominantBaseline:"central",fontSize:w,fill:"var(--neba-muted-fg)",className:h?"tabular-nums":void 0,children:t},l):null:n("g",{children:[j?e("line",{x1:i,x2:i,y1:a.top,y2:a.top+a.height,stroke:"var(--neba-chart-grid)",strokeWidth:1}):null,o?e("text",{x:i,y:L,textAnchor:T?C.anchor:h?0===l?"start":l===u.length-1?"end":"middle":"middle",transform:T?`rotate(${C.angle} ${i} ${L})`:void 0,dominantBaseline:T?"central":void 0,fontSize:w,fill:"var(--neba-muted-fg)",className:h?"tabular-nums":void 0,children:t}):null]},l)})]}),p&&!M?.hidden?p.ticks.map((t,n)=>{const l=r?a.left+p.fraction(t)*a.width:a.top+(1-p.fraction(t))*a.height;return b(n,p.ticks.length,F,D)?e("text",r?{x:l,y:a.top-8,textAnchor:0===n?"start":n===p.ticks.length-1?"end":"middle",fontSize:w,fill:"var(--neba-muted-fg)",className:"tabular-nums",children:v[n]}:{x:a.left+a.width+8,y:l,textAnchor:"start",dominantBaseline:"central",fontSize:w,fill:"var(--neba-muted-fg)",className:"tabular-nums",children:v[n]},t):null}):null,p&&M?.label&&!M.hidden?e("text",{x:a.left+a.width,y:w+2,textAnchor:"end",fontSize:w,fill:"var(--neba-muted-fg)",fontWeight:500,children:M.label}):null,A?.label&&!A.hidden?e("text",{x:a.left,y:w+2,textAnchor:"start",fontSize:w,fill:"var(--neba-muted-fg)",fontWeight:500,children:A.label}):null,P?.label&&!P.hidden?e("text",{x:a.left+a.width,y:a.top+a.height+S+w+12,textAnchor:"end",fontSize:w,fill:"var(--neba-muted-fg)",fontWeight:500,children:P.label}):null]})}export{J as ChartDataTable,ChartExport,ChartLegendBar,ChartScaleLegend,ChartStatus,ChartSummary,ChartSurface,ChartTooltipPanel,q as summarise,V as chartHeight,H as useMeasuredHeight,I as useMeasuredWidth,Y as useReleaseOutside,O as useVisibility};

package/dist/internal/chart-line.js

@@ -1 +1 @@
-import{jsx as l,jsxs as e}from"react/jsx-runtime";import{areaPath as r,chartFontSizes as t,labelledPoints as o,linePath as n,lineWidths as a,markerRadii as i,markGap as s}from"./chart.js";import{markTransitionClasses as u}from"./chart-frame.js";export function LineSeries({context:c,curve:f,filled:p,stacked:d,markers:m,valueLabels:x,connectNulls:h,gradient:k,idPrefix:v}){const{values:$,visible:b,colors:y,hovered:g,activeIndex:j,plot:C,point:L,zeroPx:N,size:W,format:z}=c,B=a[W],E=i[W],G=b.indexOf(!0),P=[],S=[],w=[];return $.forEach((l,e)=>{const r=l.map((l,e)=>(l.value??0)<0?w[e]??0:S[e]??0);P.push(r),d&&b[e]&&l.forEach((l,e)=>{const r=l.value??0;r<0?w[e]=(w[e]??0)+r:S[e]=(S[e]??0)+r})}),e("g",{children:[e("defs",{children:[k?y.map((r,t)=>e("linearGradient",{id:`${v}-stroke-${t}`,x1:"0",y1:"0",x2:"1",y2:"0",children:[l("stop",{offset:"0%",stopColor:`color-mix(in oklab, ${r} 45%, transparent)`}),l("stop",{offset:"100%",stopColor:r})]},`stroke-${t}`)):null,p&&!d?y.map((r,t)=>e("linearGradient",{id:`${v}-fill-${t}`,x1:"0",y1:"0",x2:"0",y2:"1",children:[l("stop",{offset:"0%",stopColor:`color-mix(in oklab, ${r} 28%, transparent)`}),l("stop",{offset:"100%",stopColor:`color-mix(in oklab, ${r} 2%, transparent)`})]},`fill-${t}`)):null]}),$.map((a,i)=>{if(!b[i])return null;const c=y[i],$=null!==g&&g!==i,S=a.map((l,e)=>{if(null===l.value)return null;const r=d?P[i][e]+l.value:l.value;return L(e,r)}),w=h?S.filter(Boolean):S,A=a.map((l,e)=>null===l.value?null:d?L(e,P[i][e]):{x:L(e,l.value).x,y:N}),I=p&&d,O=o(a,x);return e("g",{opacity:$?.28:1,className:u,children:[p?l("path",{d:r(w,h?A.filter(Boolean):A,f),fill:d?`color-mix(in oklab, ${c} 70%, transparent)`:`url(#${v}-fill-${i})`,stroke:"none"}):null,I&&i!==G?l("path",{d:n(h?A.filter(Boolean):A,f),fill:"none",stroke:"var(--neba-chart-gap)",strokeWidth:s}):null,I?null:l("path",{d:n(w,f),fill:"none",stroke:k?`url(#${v}-stroke-${i})`:c,strokeWidth:B,strokeLinecap:"round",strokeLinejoin:"round"}),S.map((e,r)=>{if(!e)return null;return"all"===m||"auto"===m&&a.length<=14||r===j?l("circle",{cx:e.x,cy:e.y,r:r===j?E+1:E,fill:a[r].color??c,stroke:"var(--neba-chart-gap)",strokeWidth:s,className:u},r):null}),"none"===x?null:S.map((e,r)=>{const o=a[r].value;return e&&null!==o&&O(r)?l("text",{x:e.x,y:e.y-E-5,textAnchor:e.x>C.left+C.width-24?"end":e.x<C.left+24?"start":"middle",fontSize:t[W],fontWeight:500,fill:"var(--neba-fg)",className:"tabular-nums",children:a[r].label??z(o)},`label-${r}`):null})]},i)})]})}
+import{jsx as l,jsxs as e}from"react/jsx-runtime";import{areaPath as r,chartFontSizes as t,labelInk as o,labelledPoints as n,linePath as a,lineWidths as i,markerRadii as s,markGap as u}from"./chart.js";import{markTransitionClasses as c}from"./chart-frame.js";export function LineSeries({context:f,curve:p,filled:d,stacked:m,markers:x,valueLabels:h,connectNulls:k,gradient:v,idPrefix:$}){const{values:b,visible:y,colors:g,hovered:j,activeIndex:C,plot:L,point:N,zeroPxOf:W,size:z,format:B}=f,E=i[z],G=s[z],O=y.indexOf(!0),P=[],S=[],w=[];return b.forEach((l,e)=>{const r=l.map((l,e)=>(l.value??0)<0?w[e]??0:S[e]??0);P.push(r),m&&y[e]&&l.forEach((l,e)=>{const r=l.value??0;r<0?w[e]=(w[e]??0)+r:S[e]=(S[e]??0)+r})}),e("g",{children:[e("defs",{children:[v?g.map((r,t)=>e("linearGradient",{id:`${$}-stroke-${t}`,x1:"0",y1:"0",x2:"1",y2:"0",children:[l("stop",{offset:"0%",stopColor:`color-mix(in oklab, ${r} 45%, transparent)`}),l("stop",{offset:"100%",stopColor:r})]},`stroke-${t}`)):null,d&&!m?g.map((r,t)=>e("linearGradient",{id:`${$}-fill-${t}`,x1:"0",y1:"0",x2:"0",y2:"1",children:[l("stop",{offset:"0%",stopColor:`color-mix(in oklab, ${r} 28%, transparent)`}),l("stop",{offset:"100%",stopColor:`color-mix(in oklab, ${r} 2%, transparent)`})]},`fill-${t}`)):null]}),b.map((i,s)=>{if(!y[s])return null;const f=g[s],b=null!==j&&j!==s,S=i.map((l,e)=>{if(null===l.value)return null;const r=m?P[s][e]+l.value:l.value;return N(e,r,s)}),w=k?S.filter(Boolean):S,A=W(s),I=i.map((l,e)=>null===l.value?null:m?N(e,P[s][e],s):{x:N(e,l.value,s).x,y:A}),q=d&&m,D=n(i,h);return e("g",{opacity:b?.28:1,className:c,children:[d?l("path",{d:r(w,k?I.filter(Boolean):I,p),fill:m?`color-mix(in oklab, ${f} 70%, transparent)`:`url(#${$}-fill-${s})`,stroke:"none"}):null,q&&s!==O?l("path",{d:a(k?I.filter(Boolean):I,p),fill:"none",stroke:"var(--neba-chart-gap)",strokeWidth:u}):null,q?null:l("path",{d:a(w,p),fill:"none",stroke:v?`url(#${$}-stroke-${s})`:f,strokeWidth:E,strokeLinecap:"round",strokeLinejoin:"round"}),S.map((e,r)=>{if(!e)return null;return"all"===x||"auto"===x&&i.length<=14||r===C?l("circle",{cx:e.x,cy:e.y,r:r===C?G+1:G,fill:i[r].color??f,stroke:"var(--neba-chart-gap)",strokeWidth:u,className:c},r):null}),"none"===h?null:S.map((e,r)=>{const n=i[r].value;return e&&null!==n&&D(r)?l("text",{x:e.x,y:e.y-G-5,textAnchor:e.x>L.left+L.width-24?"end":e.x<L.left+24?"start":"middle",fontSize:t[z],fontWeight:500,fill:o(i[r].color??f),className:"tabular-nums",children:i[r].label??B(n)},`label-${r}`):null})]},s)})]})}