neba 1.13.0 → 1.16.0

package/dist/components/heatmap-chart/HeatmapChart.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as l from"react";import{ChartScaleLegend as n,ChartStatus as i,ChartSurface as a,ChartTooltipPanel as r,markTransitionClasses as o,useMeasuredWidth as d}from"../../internal/chart-frame.js";import{categoryAt as h,chartFontSizes as s,compactNumber as c,formatCategory as m,markGap as u,plotHeights as x,rampFill as f,rampInk as g,rampStep as p,rampSteps as v,squarify as w,textWidth as b,toValues as y,truncate as M}from"../../internal/chart.js";import{numberFormatter as $}from"../../internal/format.js";import{cx as j,metaTextClasses as k,srOnlyClasses as z}from"../../internal/styles.js";import{chartMessages as A,emptyMessages as N,useMessages as E}from"../../internal/i18n.js";import{useStyleDefaults as S}from"../../internal/defaults.js";export function HeatmapChart(C){const{series:I,categories:D,shape:L="grid",scale:P="sequential",midpoint:R=0,min:_,max:q,valueLabels:H="none",height:K,format:U,locale:W,label:F,legend:G,tooltip:J,empty:O,size:Q="md",variant:T="text",padded:V=!1,className:X,...Y}=S(C,["size","variant","locale"]),Z=l.useRef(null),ee=d(Z),te=E(N,W),le=E(A,W),ne=l.useId(),[ie,ae]=l.useState(null),re=l.useCallback(e=>U?$(W,U).format(e):c(e,W),[U,W]),oe=l.useMemo(()=>y(I),[I]),de=oe.reduce((e,t)=>Math.max(e,t.length),0),he=l.useMemo(()=>Array.from({length:de},(e,t)=>h(t,D,oe)),[de,D,oe]),se=l.useMemo(()=>I.map((e,t)=>e.name??`${t+1}`),[I]),ce=l.useMemo(()=>{let e=1/0,t=-1/0,l=!1;for(const n of oe)for(const i of n)null!==i.value&&(l=!0,e=Math.min(e,i.value),t=Math.max(t,i.value));return l?{min:e,max:t}:null},[oe]),me=_??ce?.min??0,ue=q??ce?.max??1,xe=l.useCallback(e=>p(e,me,ue,P,R),[me,ue,P,R]),fe="number"==typeof K?K:x[Q]??220,ge=s[Q],pe=!0===G||void 0===G||!1===G?{}:G,ve=!1!==G,we=pe.side??"bottom",be=!1===J?{mode:"none"}:!0===J||void 0===J?{}:J,ye="none"===be.mode,Me=null===ce||0===de||0===I.length,$e=l.useMemo(()=>{if("treemap"===L||ee<=0)return{texts:[],band:0};const e=Math.min(150,.25*ee),t=se.map(t=>M(t,e,ge));return{texts:t,band:t.reduce((e,t)=>Math.max(e,b(t,ge)),0)+10}},[L,se,ee,ge]),je="treemap"===L?0:ge+8,ke={left:$e.band,width:Math.max(0,ee-$e.band),height:Math.max(0,fe-je)},ze=l.useMemo(()=>{if(ke.width<=0||ke.height<=0)return[];if("treemap"===L){const e=[];return oe.forEach((t,l)=>t.forEach((t,n)=>{null!==t.value&&e.push({row:l,index:n,cell:t})})),w(e.map(e=>Math.max(0,e.cell.value??0)),ke.width,ke.height).map(t=>({row:e[t.index].row,index:e[t.index].index,cell:e[t.index].cell,x:ke.left+t.x,y:t.y,width:t.width,height:t.height}))}const e=ke.height/Math.max(1,I.length),t=ke.width/Math.max(1,de),l=[];return oe.forEach((n,i)=>n.forEach((n,a)=>{null!==n.value&&l.push({row:i,index:a,cell:n,x:ke.left+a*t,y:i*e,width:t,height:e})})),l},[L,oe,I.length,de,ke.left,ke.width,ke.height]),Ae=l.useCallback(e=>m(e.cell.x??D?.[e.index]??he[e.index]??e.index,W),[D,he,W]),Ne=null===ie?null:ze.find(e=>e.row===ie.row&&e.index===ie.index)??null,Ee=null===Ne?[]:[{seriesIndex:Ne.row,color:Ne.cell.color??f(xe(Ne.cell.value??0),P),value:Ne.cell.value,formatted:re(Ne.cell.value??0),label:Ne.cell.label}],Se=Array.from({length:v},(e,t)=>f(t,P));return t(a,{...Y,size:Q,variant:T,padded:V,className:X,legendSide:we,legend:ve&&!Me?e(n,{steps:Se,from:re("diverging"===P?-B(me,ue,R)+R:me),to:re("diverging"===P?B(me,ue,R)+R:ue),middle:"diverging"===P?re(R):void 0,align:pe.align??"center",vertical:"left"===we||"right"===we,size:Q}):null,table:Me?null:t("table",{id:ne,className:z,children:[F?e("caption",{children:F}):null,e("thead",{children:t("tr",{children:[e("th",{scope:"col"}),he.map((t,l)=>e("th",{scope:"col",children:m(t,W)},l))]})}),e("tbody",{children:oe.map((l,n)=>t("tr",{children:[e("th",{scope:"row",children:se[n]}),he.map((t,n)=>{const i=l[n];return e("td",{children:void 0!==i?.label?i.label:null==i?.value?"":re(i.value)},n)})]},n))})]}),children:[t("div",{ref:Z,role:"img",tabIndex:Me?void 0:0,"aria-label":F??le.label,"aria-describedby":Me?void 0:ne,onPointerLeave:()=>ae(null),onBlur:()=>ae(null),onKeyDown:e=>{if(ye||0===ze.length)return;const t=null===ie?-1:ze.findIndex(e=>e.row===ie.row&&e.index===ie.index);if("ArrowRight"===e.key||"ArrowDown"===e.key){const e=ze[Math.min(ze.length-1,t+1)];ae({row:e.row,index:e.index})}else if("ArrowLeft"===e.key||"ArrowUp"===e.key){const e=ze[Math.max(0,(-1===t?ze.length:t)-1)];ae({row:e.row,index:e.index})}else{if("Escape"!==e.key)return;ae(null)}e.preventDefault()},className:j("relative w-full rounded-(--neba-radius-xs)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2"),style:{height:fe},children:[Me?e("div",{className:j("flex h-full items-center justify-center text-(--neba-muted-fg)",k[Q]),children:O??te.title}):ee>0?t("svg",{width:ee,height:fe,viewBox:`0 0 ${ee} ${fe}`,"aria-hidden":"true",className:"block",children:[ze.map(l=>{const n=xe(l.cell.value??0),i=ie?.row===l.row&&ie?.index===l.index,a=Math.max(0,l.width-u),r=Math.max(0,l.height-u);if(a<=0||r<=0)return null;const d=re(l.cell.value??0),h="treemap"===L?"all"===H?[Ae(l),d]:[Ae(l)]:"all"===H?[d]:[],s=h.filter(e=>function(e,t,l,n){return l>=1.8*n&&t>=Math.min(b(e,n),2.5*n)+8}(e,a,r/h.length,ge)),c=l.cell.color?"var(--neba-surface)":g(n,P);return t("g",{children:[e("rect",{x:l.x+u/2,y:l.y+u/2,width:a,height:r,rx:Math.min(3,a/2,r/2),fill:l.cell.color??f(n,P),opacity:i?1:.94,onPointerEnter:ye?void 0:()=>ae({row:l.row,index:l.index}),className:o}),s.map((t,n)=>e("text",{x:l.x+l.width/2,y:l.y+l.height/2+(n-(s.length-1)/2)*(ge+2),textAnchor:"middle",dominantBaseline:"central",fontSize:ge,fontWeight:0===n?500:400,fill:c,opacity:0===n?1:.85,pointerEvents:"none",className:0===n&&"treemap"===L?void 0:"tabular-nums",children:M(t,l.width-8,ge)},n))]},`${l.row}-${l.index}`)}),"grid"===L?$e.texts.map((t,l)=>e("text",{x:ke.left-8,y:(l+.5)*ke.height/Math.max(1,I.length),textAnchor:"end",dominantBaseline:"central",fontSize:ge,fill:"var(--neba-muted-fg)",children:t},`row-${l}`)):null,"grid"===L?he.map((t,l)=>{const n=ke.width/Math.max(1,de),i=m(t,W);return l%Math.max(1,Math.ceil((b(i,ge)+8)/Math.max(1,n)))!==0?null:e("text",{x:ke.left+(l+.5)*n,y:ke.height+ge,textAnchor:"middle",fontSize:ge,fill:"var(--neba-muted-fg)",children:i},`col-${l}`)}):null]}):null,Ne&&!ye?be.render?e("div",{className:"pointer-events-none absolute z-10",style:{left:Ne.x+Ne.width/2,top:Ne.y},children:be.render({index:Ne.index,category:Ne.cell.x??he[Ne.index]??Ne.index,items:Ee})}):e(r,{heading:`${se[Ne.row]} · ${Ae(Ne)}`,items:Ee,x:Ne.x+Ne.width/2,y:Ne.y,flip:Ne.x+Ne.width/2>.6*ee,size:Q}):null]}),ye?null:e(i,{heading:Ne?`${se[Ne.row]} · ${Ae(Ne)}`:void 0,items:Ee})]})}function B(e,t,l){return Math.max(Math.abs(t-l),Math.abs(l-e))}
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as l from"react";import{ChartExport as n,ChartScaleLegend as a,ChartStatus as r,ChartSummary as i,ChartSurface as o,ChartTooltipPanel as d,markTransitionClasses as h,summarise as s,useMeasuredWidth as m,useReleaseOutside as c,chartHeight as u,useMeasuredHeight as x}from"../../internal/chart-frame.js";import{categoryAt as f,chartFontSizes as p,compactNumber as g,formatCategory as w,markGap as v,rampFill as b,rampInk as y,rampStep as M,rampSteps as k,squarify as A,textWidth as $,toValues as z,truncate as N,turnedAxis as j}from"../../internal/chart.js";import{numberFormatter as E}from"../../internal/format.js";import{cx as S,metaTextClasses as B,srOnlyClasses as C}from"../../internal/styles.js";import{chartMessages as D,emptyMessages as I,useMessages as F}from"../../internal/i18n.js";import{useStyleDefaults as L}from"../../internal/defaults.js";export function HeatmapChart(P){const{series:R,categories:U,shape:_="grid",scale:q="sequential",midpoint:H=0,min:K,max:T,valueLabels:G="none",xAxis:J,yAxis:O,height:Q,format:V,locale:X,label:Y,legend:Z,tooltip:ee,empty:te,exportable:le=!1,exportFileName:ne="chart.csv",onExport:ae,size:re="md",variant:ie="text",padded:oe=!1,className:de,...he}=L(P,["size","variant","locale"]),se=l.useRef(null),me=m(se),ce=F(I,X),ue=F(D,X),xe=l.useId(),[fe,pe]=l.useState(null);c(se,null!==fe,()=>pe(null));const ge=l.useId(),we=l.useCallback(e=>V?E(X,V).format(e):g(e,X),[V,X]),ve=l.useMemo(()=>z(R),[R]),be=ve.reduce((e,t)=>Math.max(e,t.length),0),ye=l.useMemo(()=>Array.from({length:be},(e,t)=>f(t,U,ve)),[be,U,ve]),Me=l.useMemo(()=>R.map((e,t)=>e.name??`${t+1}`),[R]),ke=l.useMemo(()=>{let e=1/0,t=-1/0,l=!1;for(const n of ve)for(const a of n)null!==a.value&&(l=!0,e=Math.min(e,a.value),t=Math.max(t,a.value));return l?{min:e,max:t}:null},[ve]),Ae=K??ke?.min??0,$e=T??ke?.max??1,ze=l.useCallback(e=>M(e,Ae,$e,q,H),[Ae,$e,q,H]),Ne=x(se,"string"==typeof Q),je=u(Q,re,Ne),Ee=p[re],Se=!0===Z||void 0===Z||!1===Z?{}:Z,Be=!1!==Z,Ce=Se.side??"bottom",De=!1===ee?{mode:"none"}:!0===ee||void 0===ee?{}:ee,Ie="none"===De.mode,Fe=null===ke||0===be||0===R.length,Le=O?.tickFormat,We="treemap"===_||O?.hidden,Pe=l.useMemo(()=>{if(We||me<=0)return{texts:[],band:0};const e=Math.min(150,.25*me),t=Me.map((t,l)=>N(Le?String(Le(t,l)):t,e,Ee));return{texts:t,band:t.reduce((e,t)=>Math.max(e,$(t,Ee)),0)+10}},[We,Me,Le,me,Ee]),Re="treemap"===_?0:J?.tickAngle,Ue=l.useMemo(()=>j(Re,Ee),[Re,Ee]),_e=J?.tickFormat,qe=l.useMemo(()=>ye.map((e,t)=>_e?String(_e(e,t)):w(e,X)),[ye,_e,X]),He=Math.min(140,.4*je),Ke=l.useMemo(()=>0===Ue.angle?qe:qe.map(e=>N(e,Ue.cut(He),Ee)),[qe,Ue,He,Ee]),Te=Ke.reduce((e,t)=>Math.max(e,$(t,Ee)),0),Ge=Ee+6,Je="treemap"===_||J?.hidden?0:Ue.depth(Te)+8+(J?.label?Ge:0),Oe=Boolean(O?.label)&&!We,Qe=(Oe?Ge+2:0)+(le?20:0),Ve={left:O?.thickness??Pe.band,top:Qe,width:Math.max(0,me-(O?.thickness??Pe.band)),height:Math.max(0,je-(J?.thickness??Je)-Qe)},Xe=l.useMemo(()=>{if(Ve.width<=0||Ve.height<=0)return[];if("treemap"===_){const e=[];return ve.forEach((t,l)=>t.forEach((t,n)=>{null!==t.value&&e.push({row:l,index:n,cell:t})})),A(e.map(e=>Math.max(0,e.cell.value??0)),Ve.width,Ve.height).map(t=>({row:e[t.index].row,index:e[t.index].index,cell:e[t.index].cell,x:Ve.left+t.x,y:Ve.top+t.y,width:t.width,height:t.height}))}const e=Ve.height/Math.max(1,R.length),t=Ve.width/Math.max(1,be),l=[];return ve.forEach((n,a)=>n.forEach((n,r)=>{null!==n.value&&l.push({row:a,index:r,cell:n,x:Ve.left+r*t,y:Ve.top+a*e,width:t,height:e})})),l},[_,ve,R.length,be,Ve.left,Ve.top,Ve.width,Ve.height]),Ye=l.useCallback(e=>w(e.cell.x??U?.[e.index]??ye[e.index]??e.index,X),[U,ye,X]),Ze=l.useMemo(()=>{if("treemap"!==_)return{heads:ye.map(e=>w(e,X)),rows:ve.map(e=>ye.map((t,l)=>e[l]))};const e=[],t=new Map,l=ve.map(l=>{const n=[];return l.forEach((l,a)=>{const r=w(l.x??U?.[a]??ye[a]??a,X);let i=t.get(r);void 0===i&&(i=e.length,t.set(r,i),e.push(r)),n[i]=l}),n});return{heads:e,rows:l}},[_,ye,ve,U,X]),et=null===fe?null:Xe.find(e=>e.row===fe.row&&e.index===fe.index)??null,tt=null===et?[]:[{seriesIndex:et.row,color:et.cell.color??b(ze(et.cell.value??0),q),value:et.cell.value,formatted:we(et.cell.value??0),label:et.cell.label}],lt=Array.from({length:k},(e,t)=>b(t,q));return t(o,{...he,size:re,variant:ie,padded:oe,className:de,legendSide:Ce,legend:Be&&!Fe?e(a,{steps:lt,from:we("diverging"===q?-W(Ae,$e,H)+H:Ae),to:we("diverging"===q?W(Ae,$e,H)+H:$e),middle:"diverging"===q?we(H):void 0,align:Se.align??"center",vertical:"left"===Ce||"right"===Ce,size:re}):null,table:Fe?null:t("table",{id:xe,className:C,children:[Y?e("caption",{children:Y}):null,e("thead",{children:t("tr",{children:[e("th",{scope:"col"}),Ze.heads.map((t,l)=>e("th",{scope:"col",children:t},l))]})}),e("tbody",{children:Ze.rows.map((l,n)=>t("tr",{children:[e("th",{scope:"row",children:Me[n]}),Ze.heads.map((t,n)=>{const a=l[n];return e("td",{children:void 0!==a?.label?a.label:null==a?.value?"":we(a.value)},n)})]},n))})]}),children:[le&&!Fe?e(n,{rows:()=>[["",...Ze.heads],...Ze.rows.map((e,t)=>[Me[t],...e.map(e=>e?.value??null)])],fileName:ne,onExport:ae,label:ue.exportCsv}):null,t("div",{ref:se,role:"img",tabIndex:Fe?void 0:0,"aria-label":Y??ue.label,"aria-describedby":Fe?void 0:ge,onPointerLeave:e=>{"touch"!==e.pointerType&&pe(null)},onBlur:()=>pe(null),onKeyDown:e=>{if(Ie||0===Xe.length)return;const t=null===fe?-1:Xe.findIndex(e=>e.row===fe.row&&e.index===fe.index),l="treemap"!==_&&-1!==t,n="ArrowRight"===e.key||"ArrowDown"===e.key;if(!l||"ArrowDown"!==e.key&&"ArrowUp"!==e.key)if(n||"ArrowLeft"===e.key||"ArrowUp"===e.key){const e=n?Xe[Math.min(Xe.length-1,t+1)]:Xe[Math.max(0,(-1===t?Xe.length:t)-1)];pe({row:e.row,index:e.index})}else{if("Escape"!==e.key)return;pe(null)}else{const l=Xe[t],n="ArrowDown"===e.key,a=Xe.filter(e=>e.index===l.index&&(n?e.row>l.row:e.row<l.row)).sort((e,t)=>n?e.row-t.row:t.row-e.row)[0];a&&pe({row:a.row,index:a.index})}e.preventDefault()},className:S("relative w-full rounded-(--neba-radius-xs)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2"),style:{height:"string"==typeof Q?Q:je},children:[Fe?e("div",{className:S("flex h-full items-center justify-center text-(--neba-muted-fg)",B[re]),children:te??ce.title}):me>0?t("svg",{width:me,height:je,viewBox:`0 0 ${me} ${je}`,"aria-hidden":"true",className:"block",children:[Xe.map(l=>{const n=ze(l.cell.value??0),a=fe?.row===l.row&&fe?.index===l.index,r=Math.max(0,l.width-v),i=Math.max(0,l.height-v);if(r<=0||i<=0)return null;const o=we(l.cell.value??0),d="treemap"===_?"all"===G?[Ye(l),o]:[Ye(l)]:"all"===G?[o]:[],s=d.filter(e=>function(e,t,l,n){return l>=1.8*n&&t>=Math.min($(e,n),2.5*n)+8}(e,r,i/d.length,Ee)),m=l.cell.color?"var(--neba-surface)":y(n,q);return t("g",{children:[e("rect",{x:l.x+v/2,y:l.y+v/2,width:r,height:i,rx:Math.min(3,r/2,i/2),fill:l.cell.color??b(n,q),opacity:a?1:.94,onPointerEnter:Ie?void 0:()=>pe({row:l.row,index:l.index}),className:h}),s.map((t,n)=>e("text",{x:l.x+l.width/2,y:l.y+l.height/2+(n-(s.length-1)/2)*(Ee+2),textAnchor:"middle",dominantBaseline:"central",fontSize:Ee,fontWeight:0===n?500:400,fill:m,opacity:0===n?1:.85,pointerEvents:"none",className:0===n&&"treemap"===_?void 0:"tabular-nums",children:N(t,l.width-8,Ee)},n))]},`${l.row}-${l.index}`)}),"grid"!==_||O?.hidden?null:Pe.texts.map((t,l)=>e("text",{x:Ve.left-8,y:Ve.top+(l+.5)*Ve.height/Math.max(1,R.length),textAnchor:"end",dominantBaseline:"central",fontSize:Ee,fill:"var(--neba-muted-fg)",children:t},`row-${l}`)),"grid"!==_||J?.hidden?null:Ke.map((t,l)=>{const n=Ve.width/Math.max(1,be);if(l%Math.max(1,Math.ceil(Ue.room(Te)/Math.max(1,n)))!==0)return null;const a=Ve.left+(l+.5)*n,r=Ve.top+Ve.height+Ue.offset-6;return e("text",{x:a,y:r,textAnchor:Ue.anchor,transform:0===Ue.angle?void 0:`rotate(${Ue.angle} ${a} ${r})`,dominantBaseline:0===Ue.angle?void 0:"central",fontSize:Ee,fill:"var(--neba-muted-fg)",children:t},`col-${l}`)}),Oe?e("text",{x:Ve.left,y:Ee+2,textAnchor:"start",fontSize:Ee,fill:"var(--neba-muted-fg)",fontWeight:500,children:O?.label}):null,"grid"===_&&J?.label&&!J.hidden?e("text",{x:Ve.left+Ve.width,y:Ve.top+Ve.height+Ue.depth(Te)+Ee+8,textAnchor:"end",fontSize:Ee,fill:"var(--neba-muted-fg)",fontWeight:500,children:J.label}):null]}):null,et&&!Ie?De.render?e("div",{className:"pointer-events-none absolute z-10",style:{left:et.x+et.width/2,top:et.y},children:De.render({index:et.index,category:et.cell.x??ye[et.index]??et.index,items:tt})}):e(d,{heading:`${Me[et.row]} · ${Ye(et)}`,items:tt,x:et.x+et.width/2,y:et.y,flip:et.x+et.width/2>.6*me,size:re}):null]}),Fe?null:e(i,{id:ge,template:ue.summary,locale:X,...s(ve,we)}),Ie?null:e(r,{heading:et?`${Me[et.row]} · ${Ye(et)}`:void 0,items:tt})]})}function W(e,t,l){return Math.max(Math.abs(t-l),Math.abs(l-e))}

package/dist/components/highlight/Highlight.js

@@ -1 +1 @@
-"use client";import{jsx as n}from"react/jsx-runtime";import*as e from"react";import{cx as t,transitionClasses as r}from"../../internal/styles.js";import{useStyleDefaults as o}from"../../internal/defaults.js";const l={solid:"bg-(--n-fill) text-(--n-on-solid)",outline:"border bg-(--n-panel) text-(--n-accent) [border-color:var(--n-line)]",text:"bg-transparent text-(--n-accent)"},i={regular:"font-normal",medium:"font-medium",semibold:"font-semibold",bold:"font-bold"},a=/[\p{L}\p{N}_]/u;function s(n){return n.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")}function c(n,e,t){const r=e>0?n[e-1]:"",o=t<n.length?n[t]:"";return!a.test(r)&&!a.test(o)}function u(n,e,t,r){e.lastIndex=0;const o=[];let l,i=0;for(;null!==(l=e.exec(n));){if(""===l[0]){e.lastIndex+=1;continue}const a=l.index,s=a+l[0].length;!t||c(n,a,s)?(a>i&&o.push(n.slice(i,a)),o.push(r(l[0],`${a}`)),i=s):e.lastIndex=a+1}return 0===o.length?n:(i<n.length&&o.push(n.slice(i)),o)}function f(n,t,r,o){if("string"==typeof n)return u(n,t,r,o);if("number"==typeof n)return u(String(n),t,r,o);if(Array.isArray(n))return e.Children.map(n,n=>f(n,t,r,o));if(e.isValidElement(n)){const l=n.props.children;return void 0===l||"function"==typeof l?n:e.cloneElement(n,void 0,f(l,t,r,o))}return n}export const Highlight=/*@__PURE__*/e.forwardRef(function(a,c){const{query:u,variant:d="solid",color:m="warning",caseSensitive:p=!1,wholeWord:g=!1,underline:h=!1,weight:x,className:b,style:v,children:y,...$}=o(a,["variant"]),w=e.useMemo(()=>function(n,e){if(n instanceof RegExp)return new RegExp(n.source,n.global?n.flags:`${n.flags}g`);const t=(Array.isArray(n)?n:[n]).map(n=>n.trim()).filter(Boolean).sort((n,e)=>e.length-n.length);return 0===t.length?null:new RegExp(t.map(s).join("|"),e?"gu":"giu")}(u,p),[u,p]),j=t("rounded-[0.25rem] px-0.5 -mx-0.5","box-decoration-clone",l[d],h?"underline decoration-2 underline-offset-2":"",x?i[x]:"",r),E=w?f(y,w,g,(e,t)=>n("mark",{className:j,children:e},t)):y;return n("span",{ref:c,className:b,style:{"--n-fill":`var(--neba-${m}-fill)`,"--n-on-solid":`var(--neba-${m}-on-solid)`,"--n-accent":`var(--neba-${m}-accent)`,"--n-panel":`var(--neba-${m}-panel)`,"--n-line":`var(--neba-${m}-line)`,...v},...$,children:E})});
+"use client";import{jsx as n}from"react/jsx-runtime";import*as e from"react";import{cx as t,transitionClasses as r}from"../../internal/styles.js";import{useStyleDefaults as o}from"../../internal/defaults.js";const i={solid:"bg-(--n-fill) text-(--n-on-solid)",outline:"border bg-(--n-panel) text-(--n-on-tint) [border-color:var(--n-line)]",text:"bg-transparent text-(--n-on-tint)"},l={solid:"px-0.5 -mx-0.5",outline:"px-0.5 -mx-[calc(0.125rem+1px)]",text:"px-0.5 -mx-0.5"},s={regular:"font-normal",medium:"font-medium",semibold:"font-semibold",bold:"font-bold"},a=/[\p{L}\p{N}_]/u,u=/[\u0300-\u036f]/g;function c(n){return n.normalize("NFD").replace(u,"").normalize("NFC")}function f(n){return n.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")}function d(n,e,t){const r=e>0?n[e-1]:"",o=t<n.length?n[t]:"";return!a.test(r)&&!a.test(o)}function m(n,e,t,r,o){e.lastIndex=0;const i=r?function(n){if(/^[\u0020-\u007e\s]*$/.test(n))return null;const e=[],t=[];let r="",o=0;for(const i of n){const n=o+i.length,l=c(i);if(""===l)for(let e=t.length-1;e>=0&&t[e]===o;e-=1)t[e]=n;else{for(let r=0;r<l.length;r+=1)e.push(o),t.push(n);r+=l}o=n}return{text:r,starts:e,ends:t}}(n):null,l=i?i.text:n,s=[];let a,u=0;for(;null!==(a=e.exec(l));){if(""===a[0]){e.lastIndex+=1;continue}const r=i?i.starts[a.index]:a.index,l=i?i.ends[a.index+a[0].length-1]:a.index+a[0].length;!t||d(n,r,l)?(r>u&&s.push(n.slice(u,r)),s.push(o(n.slice(r,l),`${r}`)),u=l):e.lastIndex=a.index+1}return 0===s.length?n:(u<n.length&&s.push(n.slice(u)),s)}function g(n,t,r,o,i){if("string"==typeof n)return m(n,t,r,o,i);if("number"==typeof n)return m(String(n),t,r,o,i);if(Array.isArray(n)){const e=n.map(n=>g(n,t,r,o,i));return e.every((e,t)=>e===n[t])?n:e}if(e.isValidElement(n)){const l=n.props.children;if(void 0===l||"function"==typeof l)return n;const s=g(l,t,r,o,i);return s===l?n:e.cloneElement(n,void 0,...p(s))}return n}function p(n){return Array.isArray(n)?n:[n]}export const Highlight=/*@__PURE__*/e.forwardRef(function Highlight(a,u){const{query:d,variant:m="solid",color:x="warning",caseSensitive:h=!1,wholeWord:b=!1,underline:y=!1,weight:v,className:$,style:E,children:A,...j}=o(a,["variant"]),w=e.useMemo(()=>function(n,e){if(n instanceof RegExp)return new RegExp(n.source,n.global?n.flags:`${n.flags}g`);const t=(Array.isArray(n)?n:[n]).map(n=>Array.from(n.trim(),c).join("")).filter(Boolean).sort((n,e)=>e.length-n.length);return 0===t.length?null:new RegExp(t.map(f).join("|"),e?"gu":"giu")}(d,h),[d,h]),N=t("rounded-[0.25rem]",l[m],"box-decoration-clone",i[m],y?"underline decoration-2 underline-offset-2":"",v?s[v]:"",r),R=b&&!(d instanceof RegExp),I=w?g(A,w,R,!(d instanceof RegExp),(e,t)=>n("mark",{className:N,children:e},t)):A;return e.createElement("span",{ref:u,className:$,style:{"--n-fill":`var(--neba-${x}-fill)`,"--n-on-solid":`var(--neba-${x}-on-solid)`,"--n-accent":`var(--neba-${x}-accent)`,"--n-on-tint":`var(--neba-${x}-on-tint)`,"--n-panel":`var(--neba-${x}-panel)`,"--n-line":`var(--neba-${x}-line)`,...E},...j},...p(I))});

package/dist/components/how-to-steps/HowToSteps.d.ts

@@ -108,7 +108,7 @@ export interface HowToStepsProps extends Omit<React.ComponentPropsWithoutRef<'di
      * and the list rows hold still, and what animates is the content they
      * changed.
      *
-     * A reduced-motion preference switches it off entirely, as it does every
+     * A reduced-motion preference cuts it to its last frame, as it does every
      * other effect in the library.
      * @default 'fade'
      */
@@ -150,4 +150,29 @@ export interface HowToStepsProps extends Omit<React.ComponentPropsWithoutRef<'di
     doneLabel?: string;
     restartLabel?: string;
 }
+/**
+ * A guide the reader walks through: numbered steps down one side, one step's
+ * instructions at a time beside them, and a way forward under those.
+ *
+ * It is [Timeline]'s interactive sibling, and the two are deliberately not one
+ * component. A Timeline *reports* — this happened, then this did, and here is
+ * where things have got to — and nothing in it is pressed. A HowToSteps *asks*:
+ * the reader is meant to do the thing on the screen and then say they have,
+ * which needs a current step, a way to change it, and an end.
+ *
+ * Two things about how it is built are load-bearing rather than incidental.
+ *
+ * **Every step's body is rendered into the same grid cell**, with the ones not
+ * showing left in the document, `invisible` and `inert`. The panel is therefore
+ * as tall as the tallest step at every moment, so moving between a one-line
+ * step and a five-line one does not resize the card the guide sits in — which,
+ * on a page the reader has already scrolled, moves everything under it. The
+ * finished panel is in that cell too, for the same reason.
+ *
+ * **The list is a list of buttons and not a tablist.** A stepper looks like
+ * tabs and is not one: the panels are ordered, the reader is expected to arrive
+ * at them in that order, and `aria-current="step"` is the attribute that says
+ * so. A tablist's roving focus would tell a screen reader that these are
+ * interchangeable views of one thing.
+ */
 export declare const HowToSteps: React.ForwardRefExoticComponent<HowToStepsProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/how-to-steps/HowToSteps.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import*as l from"react";import{Button as a}from"../button/Button.js";import{boxPaddingClasses as r}from"../box/Box.js";import{CheckIcon as i,ChevronIcon as o,RestartIcon as s,SuccessIcon as c}from"../../internal/icons.js";import{fill as m,stepsMessages as d,useMessages as p}from"../../internal/i18n.js";import{transitionProps as f}from"../../internal/animate.js";import{cx as x,hasContent as u,iconClasses as b,metaTextClasses as h,radiusClasses as v,sheetBodyClasses as g,sheetSectionGapClasses as N,sheetTitleClasses as w,surfaceClasses as y,surfaceSlots as k,toLength as j,transitionClasses as C}from"../../internal/styles.js";import{useStyleDefaults as z}from"../../internal/defaults.js";const S={xs:{box:"1.25rem",text:"text-[0.625rem]"},sm:{box:"1.5rem",text:"text-[0.6875rem]"},md:{box:"1.75rem",text:"text-[0.75rem]"},lg:{box:"2rem",text:"text-[0.8125rem]"},xl:{box:"2.25rem",text:"text-[0.875rem]"}},L={default:{xs:"gap-0.5",sm:"gap-1",md:"gap-1",lg:"gap-1.5",xl:"gap-2"},compact:{xs:"gap-0",sm:"gap-0",md:"gap-0.5",lg:"gap-0.5",xl:"gap-1"}},I={solid:[y,"text-(--neba-fg) bg-(--n-panel-hover)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[y,"border text-(--neba-fg) bg-(--n-panel)","[border-color:var(--n-line)]","[box-shadow:var(--n-elev),var(--neba-plate-glass)]"].join(" "),text:"text-(--neba-fg) bg-transparent"};function M(e){return"string"==typeof e?e:""}function R({level:e,...t}){return l.createElement(`h${Math.min(6,Math.max(1,e))}`,t)}export const HowToSteps=/*@__PURE__*/l.forwardRef(function(y,B){const{steps:_,title:H,headingLevel:T=3,step:$,defaultStep:E=0,onStepChange:A,completed:F,defaultCompleted:W=!1,onCompletedChange:q,orientation:D="vertical",maxHeight:G,railWidth:J="15rem",navigation:K=!0,divider:O=!0,transition:P="fade",completion:Q=!0,completedContent:U,variant:V="outline",size:X="md",color:Y="primary",density:Z="default",elevation:ee=0,locale:te,previousLabel:ne,nextLabel:le,doneLabel:ae,restartLabel:re,className:ie,style:oe,...se}=z(y,["size","density","variant","locale"]),ce=p(d,te),me=l.useId(),[de,pe]=l.useState(E),[fe,xe]=l.useState(W),ue=void 0!==$,be=void 0!==F,he=_.length,ve=Math.min(Math.max(ue?$:de,0),Math.max(he-1,0)),ge=Q&&(be?F:fe),Ne=void 0!==G,we="vertical"===D,ye=l.useRef(null),ke=l.useRef(null);if(l.useEffect(()=>{const e=ye.current,t=ke.current;if(!e||!t)return;const n=e.getBoundingClientRect(),l=t.getBoundingClientRect();we?l.top<n.top?e.scrollTop-=n.top-l.top:l.bottom>n.bottom&&(e.scrollTop+=l.bottom-n.bottom):l.left<n.left?e.scrollLeft-=n.left-l.left:l.right>n.right&&(e.scrollLeft+=l.right-n.right)},[ve,we]),0===he)return null;const je=(e,t=!1)=>{be||xe(t),ge!==t&&q?.(t),t||(ue||pe(e),e!==ve&&A?.(e))},Ce=0===ve,ze=ve===he-1,Se="none"===P?null:f(P),Le=t=>{const n=ge||t<ve,l=!ge&&t===ve;return e("span",{"aria-hidden":"true",className:x("z-1 flex shrink-0 items-center justify-center rounded-full border font-medium","size-(--n-step-mark) [&_svg]:size-[1.15em]",S[X].text,C,n?"bg-(--n-fill) text-(--n-on-solid) [border-color:transparent]":l?"bg-(--neba-surface) text-(--n-accent) [border-color:var(--n-accent)]":"bg-(--neba-surface) text-(--neba-muted-fg) [border-color:var(--n-line)]"),children:n?e(i,{}):t+1})},Ie=e("ol",{ref:ye,"aria-label":ce.steps,className:x("m-0 flex list-none p-0",we?"flex-col":"flex-row",L[Z][X],Ne&&we?"min-h-0 overflow-y-auto overscroll-contain":"",we?"":"overflow-x-auto overscroll-contain"),children:_.map((n,l)=>{const a=ge||l<ve,r=!ge&&l===ve,i=M(n.title);return t("li",{ref:r?ke:void 0,className:x("relative",we?"":"min-w-0 flex-1"),children:[l<he-1?e("span",{"aria-hidden":"true",className:x("absolute",C,a?"bg-(--n-fill)":"bg-(--n-line)",we?["w-px","[inset-inline-start:calc(0.25rem+var(--n-step-mark)/2)]","[top:calc(0.25rem+var(--n-step-mark))]","[height:calc(100%-var(--n-step-mark))]"].join(" "):["h-px","[inset-inline-start:calc(50%+var(--n-step-mark)/2)]","[top:calc(0.25rem+var(--n-step-mark)/2)]","[width:calc(100%-var(--n-step-mark))]"].join(" "))}):null,t("button",{type:"button",onClick:()=>je(l),"aria-current":r?"step":void 0,"aria-label":i?m(ce.step,{index:String(l+1),title:i}):void 0,className:x("flex w-full cursor-pointer items-center p-1 text-start",we?"gap-3":"flex-col gap-1.5 text-center",v.sm,"hover:bg-(--n-soft)",C,"focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-1"),children:[Le(l),e("span",{className:x("min-w-0",we?"truncate":"",h[X],r?"font-medium text-(--neba-fg)":"text-(--neba-muted-fg)"),children:n.title})]})]},l)})}),Me=t("div",{className:x("grid flex-1 grid-cols-1",Ne?"min-h-0":""),children:[_.map((n,l)=>{const a=ge||l!==ve;return t("div",{"aria-hidden":a,inert:a||void 0,className:x("col-start-1 row-start-1 min-w-0",Ne?"overflow-y-auto overscroll-contain":"",a?"invisible":Se?.className??""),style:a?void 0:Se?.style,children:[t("div",{className:"mb-3 flex items-baseline gap-3",children:[u(n.icon)?e("span",{"aria-hidden":"true",className:x("flex h-[1lh] shrink-0 items-center text-(--n-accent)",w[X],b),children:n.icon}):null,e(R,{level:T+1,className:x("m-0 min-w-0 flex-1 font-medium",w[X]),children:n.title}),e("span",{className:x("shrink-0 text-(--neba-muted-fg) tabular-nums",h[X]),children:m(ce.position,{index:String(l+1),total:String(he)})})]}),n.image?e("img",{src:n.image,alt:n.imageAlt??M(n.title),loading:"lazy",decoding:"async",className:x("mb-3 max-h-72 w-full object-contain",v[X])}):null,u(n.content)?e("div",{className:x("min-w-0",g[X]),children:n.content}):null]},l)}),Q?t("div",{"aria-hidden":!ge,inert:!ge||void 0,className:x("col-start-1 row-start-1 flex min-w-0 flex-col items-center justify-center gap-2 py-4 text-center",ge?Se?.className??"":"invisible"),style:ge?Se?.style:void 0,children:[e("span",{"aria-hidden":"true",className:"text-(--n-accent) [&_svg]:size-9",children:e(c,{})}),e("p",{className:x("m-0 font-medium",g[X]),children:U??ce.completed})]}):null]});return t("div",{ref:B,"aria-labelledby":u(H)?me:void 0,className:x("flex min-w-0 flex-col",v[X],r[Z][X],N[X],I[V],C,ie),style:{...k(Y,ee),"--n-fill":`var(--neba-${Y}-fill)`,"--n-on-solid":`var(--neba-${Y}-on-solid)`,"--n-step-mark":S[X].box,"--n-step-rail":j(J),...Ne?{maxHeight:j(G)}:null,...oe},...se,children:[u(H)?e(R,{level:T,id:me,className:x("m-0 shrink-0 font-medium",w[X]),children:H}):null,t("div",{className:x("flex min-w-0 flex-1 flex-col",Ne?"min-h-0":"",we?"gap-4 sm:flex-row sm:gap-5":"gap-4"),children:[e("div",{className:x("flex min-w-0 flex-col",Ne?"min-h-0":"",we?"sm:w-(--n-step-rail) sm:shrink-0":"",O?we?"border-b pb-4 sm:border-b-0 sm:border-e sm:pb-0 sm:pe-5":"border-b pb-4":"",O?"[border-color:var(--n-line)]":""),children:Ie}),t("div",{className:x("flex min-w-0 flex-1 flex-col",Ne?"min-h-0":"",N[X]),children:[Me,K?e("div",{className:"flex shrink-0 flex-wrap items-center justify-end gap-2",children:ge?e(a,{size:X,variant:"outline",color:Y,startIcon:e(s,{}),onClick:()=>je(0),children:re??ce.restart}):t(n,{children:[e(a,{size:X,variant:"outline",color:Y,disabled:Ce,startIcon:e("span",{className:"rotate-90 rtl:-rotate-90",children:e(o,{})}),onClick:()=>je(ve-1),children:ne??ce.previous}),e(a,ze&&Q?{size:X,variant:"solid",color:Y,startIcon:e(i,{}),onClick:()=>je(ve,!0),children:ae??ce.done}:{size:X,variant:"solid",color:Y,disabled:ze,endIcon:e("span",{className:"-rotate-90 rtl:rotate-90",children:e(o,{})}),onClick:()=>je(ve+1),children:le??ce.next})]})}):null]})]})]})});
+"use client";import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import*as l from"react";import{Button as a}from"../button/Button.js";import{boxPaddingClasses as r}from"../box/Box.js";import{CheckIcon as i,ChevronIcon as o,RestartIcon as s,SuccessIcon as c}from"../../internal/icons.js";import{fillMessage as m,stepsMessages as d,useMessages as f}from"../../internal/i18n.js";import{transitionProps as p}from"../../internal/animate.js";import{cx as u,hasContent as x,headingTitleClasses as b,iconClasses as g,metaTextClasses as h,radiusClasses as v,sheetBodyClasses as N,sheetSectionGapClasses as w,sheetTitleClasses as y,srOnlyClasses as j,surfaceClasses as k,surfaceSlots as S,toLength as C,transitionClasses as z}from"../../internal/styles.js";import{inertValue as R}from"../../internal/inert.js";import{useStyleDefaults as H}from"../../internal/defaults.js";const L={xs:{box:"1.25rem",text:"text-[0.625rem]"},sm:{box:"1.5rem",text:"text-[0.6875rem]"},md:{box:"1.75rem",text:"text-[0.75rem]"},lg:{box:"2rem",text:"text-[0.8125rem]"},xl:{box:"2.25rem",text:"text-[0.875rem]"}},I={default:{xs:"gap-0.5",sm:"gap-1",md:"gap-1",lg:"gap-1.5",xl:"gap-2"},compact:{xs:"gap-0",sm:"gap-0",md:"gap-0.5",lg:"gap-0.5",xl:"gap-1"}},M={solid:[k,"text-(--neba-fg) bg-(--n-panel-hover)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[k,"border text-(--neba-fg) bg-(--n-panel)","[border-color:var(--n-line)]","[box-shadow:var(--n-elev),var(--neba-plate-glass)]"].join(" "),text:"text-(--neba-fg) bg-transparent"};function T(e){return"string"==typeof e?e:""}function StepHeading({level:e,...t}){return l.createElement(`h${Math.min(6,Math.max(1,e))}`,t)}export const HowToSteps=/*@__PURE__*/l.forwardRef(function HowToSteps(k,B){const{steps:E,title:_,headingLevel:W=3,step:$,defaultStep:D=0,onStepChange:A,completed:F,defaultCompleted:q=!1,onCompletedChange:G,orientation:J="vertical",maxHeight:K,railWidth:O="15rem",navigation:P=!0,divider:Q=!0,transition:U="fade",completion:V=!0,completedContent:X,variant:Y="outline",size:Z="md",color:ee="primary",density:te="default",elevation:ne=0,locale:le,previousLabel:ae,nextLabel:re,doneLabel:ie,restartLabel:oe,className:se,style:ce,...me}=H(k,["size","density","variant","locale"]),de=f(d,le),fe=l.useId(),[pe,ue]=l.useState(D),[xe,be]=l.useState(q),ge=void 0!==$,he=void 0!==F,ve=E.length,Ne=Math.min(Math.max(ge?$:pe,0),Math.max(ve-1,0)),we=V&&(he?F:xe),ye=void 0!==K,je="vertical"===J,ke=l.useRef(null),Se=l.useRef(null);l.useEffect(()=>{const e=ke.current,t=Se.current;if(!e||!t)return;const n=e.getBoundingClientRect(),l=t.getBoundingClientRect();je?l.top<n.top?e.scrollTop-=n.top-l.top:l.bottom>n.bottom&&(e.scrollTop+=l.bottom-n.bottom):l.left<n.left?e.scrollLeft-=n.left-l.left:l.right>n.right&&(e.scrollLeft+=l.right-n.right)},[Ne,je]);const Ce=l.useRef(null),ze=l.useRef(null),Re=l.useRef(null);if(l.useEffect(()=>{null!==Re.current&&Re.current===we&&(Re.current=null,(we?Ce:ze).current?.focus())},[we]),0===ve)return null;const He=(e,t=!1)=>{he||be(t),we!==t&&G?.(t),t||(ge||ue(e),e!==Ne&&A?.(e))},Le=0===Ne,Ie=Ne===ve-1,Me=(e,t)=>{Re.current=e.currentTarget===document.activeElement?t:null},Te="none"===U?null:p(U),Be=t=>{const n=we||t<Ne,l=!we&&t===Ne;return e("span",{"aria-hidden":"true",className:u("z-1 flex shrink-0 items-center justify-center rounded-full border font-medium","size-(--n-step-mark) [&_svg]:size-[1.15em]",L[Z].text,z,n?"bg-(--n-fill) text-(--n-on-solid) [border-color:transparent]":l?"bg-(--neba-surface) text-(--n-accent) [border-color:var(--n-accent)]":"bg-(--neba-surface) text-(--neba-muted-fg) [border-color:var(--n-line)]"),children:n?e(i,{}):t+1})},Ee=e("ol",{ref:ke,"aria-label":de.steps,className:u("m-0 flex list-none p-0",je?"flex-col":"flex-row",I[te][Z],ye&&je?"min-h-0 overflow-y-auto overscroll-contain":"",je?"":"overflow-x-auto overscroll-contain"),children:E.map((n,l)=>{const a=we||l<Ne,r=!we&&l===Ne,i=T(n.title);return t("li",{ref:r?Se:void 0,className:u("relative",je?"":"min-w-0 flex-1"),children:[l<ve-1?e("span",{"aria-hidden":"true",className:u("absolute",z,a?"bg-(--n-fill)":"bg-(--n-line)",je?["w-px","[inset-inline-start:calc(0.25rem+var(--n-step-mark)/2)]","[top:calc(0.25rem+var(--n-step-mark))]","[height:calc(100%-var(--n-step-mark))]"].join(" "):["h-px","[inset-inline-start:calc(50%+var(--n-step-mark)/2)]","[top:calc(0.25rem+var(--n-step-mark)/2)]","[width:calc(100%-var(--n-step-mark))]"].join(" "))}):null,t("button",{type:"button",onClick:()=>He(l),"aria-current":r?"step":void 0,"aria-label":i?m(de.step,{index:String(l+1),title:i}):void 0,className:u("flex w-full cursor-pointer items-center p-1 text-start",je?"gap-3":"flex-col gap-1.5 text-center",v.sm,"hover:bg-(--n-soft)",z,"focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-1"),children:[Be(l),e("span",{className:u("min-w-0",je?"truncate":"",h[Z],r?"font-medium text-(--neba-fg)":"text-(--neba-muted-fg)"),children:n.title})]})]},l)})}),_e=t("div",{className:u("grid flex-1 grid-cols-1",ye?"min-h-0":""),children:[E.map((n,l)=>{const a=we||l!==Ne;return t("div",{"aria-hidden":a,inert:R(a),className:u("col-start-1 row-start-1 min-w-0",ye?"overflow-y-auto overscroll-contain":"",a?"invisible":Te?.className??""),style:a?void 0:Te?.style,children:[t("div",{className:"mb-3 flex items-baseline gap-3",children:[x(n.icon)?e("span",{"aria-hidden":"true",className:u("flex h-[1lh] shrink-0 items-center text-(--n-accent)",y[Z],g),children:n.icon}):null,e(StepHeading,{level:W+1,className:u("neba-heading min-w-0 flex-1","[&.neba-heading]:m-0 [&.neba-heading]:font-medium [&.neba-heading]:text-inherit",b[Z]),children:n.title}),e("span",{className:u("shrink-0 text-(--neba-muted-fg) tabular-nums",h[Z]),children:m(de.position,{index:String(l+1),total:String(ve)})})]}),n.image?e("img",{src:n.image,alt:n.imageAlt??T(n.title),loading:"lazy",decoding:"async",className:u("mb-3 max-h-72 w-full object-contain",v[Z])}):null,x(n.content)?e("div",{className:u("min-w-0",N[Z]),children:n.content}):null]},l)}),V?t("div",{"aria-hidden":!we,inert:R(!we),className:u("col-start-1 row-start-1 flex min-w-0 flex-col items-center justify-center gap-2 py-4 text-center",we?Te?.className??"":"invisible"),style:we?Te?.style:void 0,children:[e("span",{"aria-hidden":"true",className:"text-(--n-accent) [&_svg]:size-9",children:e(c,{})}),e("p",{className:u("m-0 font-medium",N[Z]),children:X??de.completed})]}):null]});return t("div",{ref:B,role:x(_)?"group":void 0,"aria-labelledby":x(_)?fe:void 0,className:u("flex min-w-0 flex-col",v[Z],r[te][Z],w[Z],M[Y],z,se),style:{...S(ee,ne),"--n-fill":`var(--neba-${ee}-fill)`,"--n-on-solid":`var(--neba-${ee}-on-solid)`,"--n-step-mark":L[Z].box,"--n-step-rail":C(O),...ye?{maxHeight:C(K)}:null,...ce},...me,children:[x(_)?e(StepHeading,{level:W,id:fe,className:u("neba-heading shrink-0","[&.neba-heading]:m-0 [&.neba-heading]:font-medium [&.neba-heading]:text-inherit",b[Z]),children:_}):null,e("span",{className:j,"aria-live":"polite",children:we?"":"string"==typeof E[Ne]?.title?m(de.step,{index:String(Ne+1),title:E[Ne].title}):m(de.position,{index:String(Ne+1),total:String(ve)})}),t("div",{className:u("flex min-w-0 flex-1 flex-col",ye?"min-h-0":"",je?"gap-4 sm:flex-row sm:gap-5":"gap-4"),children:[e("div",{className:u("flex min-w-0 flex-col",ye?"min-h-0":"",je?"sm:w-(--n-step-rail) sm:shrink-0":"",Q?je?"border-b pb-4 sm:border-b-0 sm:border-e sm:pb-0 sm:pe-5":"border-b pb-4":"",Q?"[border-color:var(--n-line)]":""),children:Ee}),t("div",{className:u("flex min-w-0 flex-1 flex-col",ye?"min-h-0":"",w[Z]),children:[_e,P?e("div",{className:"flex shrink-0 flex-wrap items-center justify-end gap-2",children:we?e(a,{ref:Ce,size:Z,variant:"outline",color:ee,startIcon:e(s,{}),onClick:e=>{Me(e,!1),He(0)},children:oe??de.restart}):t(n,{children:[e(a,{size:Z,variant:"outline",color:ee,disabled:Le,focusableWhenDisabled:!0,startIcon:e("span",{className:"rotate-90 rtl:-rotate-90",children:e(o,{})}),onClick:()=>He(Ne-1),children:ae??de.previous}),e(a,Ie&&V?{ref:ze,size:Z,variant:"solid",color:ee,startIcon:e(i,{}),onClick:e=>{Me(e,!0),He(Ne,!0)},children:ie??de.done}:{ref:ze,size:Z,variant:"solid",color:ee,disabled:Ie,focusableWhenDisabled:!0,endIcon:e("span",{className:"-rotate-90 rtl:rotate-90",children:e(o,{})}),onClick:()=>He(Ne+1),children:re??de.next})]})}):null]})]})]})});

package/dist/components/icon/Icon.js

@@ -1 +1 @@
-"use client";import{jsx as e}from"react/jsx-runtime";import*as t from"react";import{transitionProps as i}from"../../internal/animate.js";import{cx as n,iconSizeClasses as r}from"../../internal/styles.js";const s={xs:"text-[0.875rem]",sm:"text-[1rem]",md:"text-[1.25rem]",lg:"text-[1.5rem]",xl:"text-[1.75rem]"};export const Icon=/*@__PURE__*/t.forwardRef(function({icon:t,size:l="md",color:a="inherit",label:m,transition:o,className:c,style:f,...x},d){const g=i(o),u=n("inline-flex shrink-0 items-center justify-center align-middle",r[l],"[&>svg]:block [&>svg]:size-full [&>img]:block [&>img]:size-full",`leading-none ${s[l]}`,"inherit"===a?"":"text-(--n-accent)",g.className,c??"");return e("span",{ref:d,className:u,style:"inherit"===a?{...g.style,...f}:{"--n-accent":`var(--neba-${a}-accent)`,...g.style,...f},role:m?"img":void 0,"aria-label":m,"aria-hidden":!m||void 0,...x,children:t})});
+"use client";import{jsx as e}from"react/jsx-runtime";import*as t from"react";import{transitionProps as i}from"../../internal/animate.js";import{cx as n,iconSizeClasses as r}from"../../internal/styles.js";const s={xs:"text-[0.875rem]",sm:"text-[1rem]",md:"text-[1.25rem]",lg:"text-[1.5rem]",xl:"text-[1.75rem]"};export const Icon=/*@__PURE__*/t.forwardRef(function Icon({icon:t,size:l="md",color:a="inherit",label:m,transition:o,className:c,style:f,...x},d){const g=i(o),u=n("inline-flex shrink-0 items-center justify-center align-middle",r[l],"[&>svg]:block [&>svg]:size-full [&>img]:block [&>img]:size-full",`leading-none ${s[l]}`,"inherit"===a?"":"text-(--n-accent)",g.className,c??"");return e("span",{ref:d,className:u,style:"inherit"===a?{...g.style,...f}:{"--n-accent":`var(--neba-${a}-accent)`,...g.style,...f},role:m?"img":void 0,"aria-label":m,"aria-hidden":!m||void 0,...x,children:t})});

package/dist/components/icon-button/IconButton.d.ts

@@ -16,24 +16,4 @@ export interface IconButtonProps extends Omit<ButtonProps, 'children' | 'startIc
      */
     label: string;
 }
-/**
- * A round button with a glyph in it and nothing else.
- *
- * A [Button] with an icon and no children already goes square — the same height,
- * the same width, the acrylic corners cut off it. This is the other shape: a
- * disc.
- *
- * That disc is a deliberate exception to the house radius rule, which holds
- * every corner just short of the 50% that would make a control a pill, because
- * the flat run along the top and bottom edge is what still reads as a sheet with
- * its corners cut. The rule is about *labelled* controls: the flat run is there
- * for the line of text to sit on, and a glyph has no line of text. A circle with
- * a single mark centred in it is a punched token rather than a moulded key, so
- * it says the thing the rule exists to protect by a different route.
- *
- * Everything else is Button's, unchanged and on purpose: the variants, the
- * elevation ladder, the pointer light, `loading`, `readOnly`, and the values a
- * surrounding ButtonGroup sets. Two components that draw the same surface from
- * two copies of the same table are two components that will eventually disagree.
- */
 export declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/icon-button/IconButton.js

@@ -1 +1 @@
-"use client";import{jsx as t}from"react/jsx-runtime";import*as r from"react";import{Button as o}from"../button/Button.js";export const IconButton=/*@__PURE__*/r.forwardRef(function({icon:r,label:e,style:n,...a},s){return t(o,{ref:s,"aria-label":e,startIcon:r,style:{borderRadius:"9999px",...n},...a})});
+"use client";import{jsx as t}from"react/jsx-runtime";import*as r from"react";import{Button as a}from"../button/Button.js";const n={"--neba-radius-xs":"9999px","--neba-radius-sm":"9999px","--neba-radius-md":"9999px","--neba-radius-lg":"9999px","--neba-radius-xl":"9999px"};export const IconButton=/*@__PURE__*/r.forwardRef(function IconButton({icon:r,label:o,style:e,...s},i){return t(a,{ref:i,"aria-label":o,startIcon:r,style:{...n,...e},...s})});

package/dist/components/image/Image.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { NebaAspectFit } from '../aspect-ratio/AspectRatio.js';
-import type { NebaCorner, NebaElevation, NebaSize, NebaSlots } from '../../types.js';
+import type { NebaCorner, NebaElevation, NebaSide, NebaSize, NebaSlots } from '../../types.js';
 /** The parts an Image draws behind its root. */
 export type ImageSlot = 'image' | 'placeholder' | 'fallback' | 'frame' | 'watermark';
 /**
@@ -12,8 +12,61 @@ export type ImageSlot = 'image' | 'placeholder' | 'fallback' | 'frame' | 'waterm
  * valid value.
  */
 export type NebaImageFilter = 'none' | 'grayscale' | 'sepia' | 'invert' | 'saturate' | 'mute' | 'contrast';
+/**
+ * How far the picture is turned, clockwise, in degrees.
+ *
+ * Quarter turns and nothing between them. A picture turned by anything else no
+ * longer covers its own box, and filling the corners that leaves means
+ * enlarging it by an amount a caller would then want to tune — which is a photo
+ * editor, and the same line `filter` draws.
+ */
+export type NebaImageRotation = 0 | 90 | 180 | 270;
+/**
+ * Which way the picture is mirrored, along the axes it is shown on — so
+ * `horizontal` swaps left and right whatever `rotate` has done to it.
+ */
+export type NebaImageFlip = 'none' | 'horizontal' | 'vertical' | 'both';
+/**
+ * Where the picture sits in its box, spelled the way `object-position` spells
+ * it: a side, a corner, the centre, or two percentages across and down.
+ *
+ * Physical rather than logical, and on purpose. `NebaCorner` says `top-start`
+ * because a mark placed on a page belongs to the page's writing direction; the
+ * subject of a photograph is on the left of it in every language, so a crop
+ * that keeps it must not move to the other side on a right-to-left page.
+ */
+export type NebaImagePosition = 'center' | NebaSide | 'top left' | 'top right' | 'bottom left' | 'bottom right' | `${number}% ${number}%`;
+/**
+ * What fills the part of the box a picture leaves empty.
+ *
+ * `blur` is the picture itself, covering the box and blurred behind it — what a
+ * video player does with a portrait clip in a landscape frame, and the one fill
+ * that never reads as a gap. Any other string is a CSS `background`.
+ */
+export type NebaImageLetterbox = 'none' | 'blur';
 /** The silhouette a frame cuts the picture to. */
 export type NebaImageFrameShape = 'rect' | 'rounded' | 'circle' | 'cut' | 'arch';
+/**
+ * A picture to stand in while the file arrives, rather than a Skeleton.
+ *
+ * Drawn the way the picture will be — the same `fit`, `position`, `rotate`
+ * and `flip` — which is what it is for: a small copy of the same file, a few
+ * hundred bytes inlined as a data URI or already in memory as a `Blob`, so the
+ * reader sees the picture's colours and shape before its detail.
+ */
+export interface NebaImagePlaceholderOptions {
+    /**
+     * The stand-in: a URL, a data URI, or a `Blob`. A Blob is turned into an
+     * object URL for as long as it is shown and released when it is not.
+     */
+    src: string | Blob;
+    /**
+     * Blurs the stand-in, by this many pixels or by 20 for `true` — a copy
+     * stretched up from a few pixels is blocky without it.
+     * @default false
+     */
+    blur?: boolean | number;
+}
 export interface NebaImageFrameOptions {
     /** @default 'rounded' */
     shape?: NebaImageFrameShape;
@@ -105,29 +158,61 @@ export interface ImageProps extends Omit<React.ComponentPropsWithoutRef<'img'>,
      */
     ratio?: number | string | 'auto';
     /**
-     * The file's own pixel dimensions, as an `<img>` takes them.
+     * The file's own pixel dimensions, as an `<img>` takes them — or, given one
+     * at a time, the size of the box.
      *
-     * They are the platform's own answer to layout shift, and they are what to
-     * reach for when the proportion is the picture's rather than the layout's:
-     * `ratio` says "hold this shape whatever arrives", these two say "this is
-     * what will arrive". Give both and an `'auto'` ratio becomes their
+     * Together they are the platform's own answer to layout shift, and they are
+     * what to reach for when the proportion is the picture's rather than the
+     * layout's: `ratio` says "hold this shape whatever arrives", these two say
+     * "this is what will arrive". Give both and an `'auto'` ratio becomes their
      * proportion, so the box is reserved without anybody working out that 1200 by
      * 800 is 3/2.
      *
-     * They reach the `<img>` either way. One on its own reserves nothing, since
-     * a proportion needs two numbers.
+     * One on its own is not a proportion, so it is read as the length it looks
+     * like. `height={200}` is a box 200 pixels tall across whatever width it is
+     * given, and `width={320}` is one 320 wide — never wider than its container —
+     * and as tall as the picture makes it. A number is pixels and a string is a
+     * CSS length, and `fit` decides what the picture does inside. With a `ratio`
+     * as well, a lone `height` takes its width from the ratio.
+     *
+     * They reach the `<img>` either way.
      */
     width?: number | string;
     height?: number | string;
     /** How the picture fills that box. @default 'cover' */
     fit?: NebaAspectFit;
+    /**
+     * Where the picture sits in that box: which part survives a `cover` crop, and
+     * where `contain`, `none` and `scale-down` leave their empty space.
+     *
+     * Read on the picture as it is shown, so it holds through `rotate` and
+     * `flip` — `position="top"` keeps the top of what the reader sees, not the
+     * top of the file.
+     * @default 'center'
+     */
+    position?: NebaImagePosition;
+    /**
+     * What fills the box where `contain`, `none` or `scale-down` leave it empty:
+     * `blur` for the picture itself, blurred and covering the box behind it, or a
+     * CSS `background` — a colour, a token, a gradient.
+     *
+     * The blurred copy is the same file, so it is not a second download, and it
+     * is only drawn under a `fit` that can leave space; under `cover` and `fill`
+     * there is nothing for it to show through.
+     * @default 'none'
+     */
+    letterbox?: NebaImageLetterbox | (string & {});
     /** Rounds the corners at this step of the radius ladder. `false` for square. */
     rounded?: NebaSize | boolean;
     /**
      * What stands in while the file is arriving. A Skeleton of the right shape by
-     * default, `false` for nothing at all.
+     * default, a node of your own, `{ src }` for a picture — a small copy of the
+     * same file, as a URL or a `Blob` — or `false` for nothing at all.
+     *
+     * Like the Skeleton, a stand-in fills the box, so it needs one to fill: a
+     * `ratio`, or `width` and `height`.
      */
-    placeholder?: React.ReactNode | false;
+    placeholder?: React.ReactNode | false | NebaImagePlaceholderOptions;
     /**
      * What is drawn instead when the file does not arrive.
      *
@@ -136,8 +221,30 @@ export interface ImageProps extends Omit<React.ComponentPropsWithoutRef<'img'>,
      * what was meant to be there is a better answer than a blank space.
      */
     fallback?: React.ReactNode;
-    /** Called when the file fails. Useful for swapping a `src` you control. */
+    /**
+     * Called with `loading` when a file is asked for, then `loaded` or `failed`
+     * once it settles. `failed` is the moment to swap a `src` you control.
+     */
     onLoadingStatusChange?: (status: Phase) => void;
+    /**
+     * Marks the picture a page is judged by — usually the largest thing above
+     * the fold, which is what Largest Contentful Paint measures — so it is
+     * fetched early and never lazily: `loading="eager"` and a high fetch
+     * priority.
+     *
+     * Everything else about when a picture loads belongs to the `<img>` and
+     * passes straight through: `loading="lazy"` for one below the fold,
+     * `decoding`, `fetchPriority`. An attribute written out wins over what this
+     * implies.
+     *
+     * It also draws the picture from the first paint: no fade, and no Skeleton
+     * over it. A server-rendered page shows the `<img>` as soon as the browser
+     * has the file, rather than waiting for hydration to lift a cover and start a
+     * fade, which is exactly what Largest Contentful Paint would otherwise wait
+     * on. A `placeholder` picture still stands beneath it while it arrives.
+     * @default false
+     */
+    priority?: boolean;
     /**
      * Opens the full picture in a Dialog when it is clicked.
      *
@@ -154,6 +261,25 @@ export interface ImageProps extends Omit<React.ComponentPropsWithoutRef<'img'>,
      * @default 'none'
      */
     filter?: NebaImageFilter | (string & {});
+    /**
+     * Turns the picture clockwise, a quarter at a time.
+     *
+     * A picture on its side is laid out on its side: `width` and `height` still
+     * describe the file, so `width={1200} height={800} rotate={90}` reserves a
+     * box two wide by three tall, and a `ratio` of `'auto'` with neither takes
+     * the turned shape once the file has said what it is. An explicit `ratio` is
+     * the layout's and is kept, with `fit` deciding how the turned picture fills
+     * it.
+     * @default 0
+     */
+    rotate?: NebaImageRotation;
+    /**
+     * Mirrors the picture, along the axes it is shown on. The two props commute
+     * as a reader sees them: `flip="horizontal"` swaps left and right on the
+     * screen whether or not the picture has been turned.
+     * @default 'none'
+     */
+    flip?: NebaImageFlip;
     /**
      * How the picture is mounted: the silhouette it is cut to, and the line, the
      * mount, the shadow and the softened edge around it.

package/dist/components/image/Image.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import*as a from"react";import{AspectRatio as o}from"../aspect-ratio/AspectRatio.js";import{Skeleton as r}from"../skeleton/Skeleton.js";import{useStyleDefaults as l}from"../../internal/defaults.js";import{imageMessages as s,useMessages as i}from"../../internal/i18n.js";import{cx as c,metaTextValues as u,radiusClasses as d,toLength as f}from"../../internal/styles.js";const m={cover:"object-cover",contain:"object-contain",fill:"object-fill",none:"object-none"},p={none:"none",grayscale:"grayscale(1)",sepia:"sepia(0.72)",invert:"invert(1)",saturate:"saturate(1.5)",mute:"saturate(0.45)",contrast:"contrast(1.25)"},b={"top-start":"items-start justify-start","top-end":"items-start justify-end","bottom-start":"items-end justify-start","bottom-end":"items-end justify-end",center:"items-center justify-center"},g=a.lazy(()=>import("../dialog/Dialog.js").then(e=>({default:e.Dialog})));function h(e,t){switch(e){case"rect":return{borderRadius:"0px"};case"circle":return{borderRadius:"50%"};case"arch":return{borderRadius:`50% 50% ${t} ${t} / 55% 55% ${t} ${t}`};case"cut":return{clipPath:`polygon(${t} 0, calc(100% - ${t}) 0, 100% ${t}, 100% calc(100% - ${t}), calc(100% - ${t}) 100%, ${t} 100%, 0 calc(100% - ${t}), 0 ${t})`};default:return{borderRadius:t}}}function v(e){const t=t=>`linear-gradient(to ${t}, transparent, #000 ${e}, #000 calc(100% - ${e}), transparent)`,n=`${t("right")}, ${t("bottom")}`;return{maskImage:n,maskComposite:"intersect",WebkitMaskImage:n,WebkitMaskComposite:"source-in"}}export const Image=/*@__PURE__*/a.forwardRef(function(y,x){const{alt:$,ratio:k="auto",width:w,height:N,fit:j="cover",rounded:S=!1,placeholder:C,fallback:z,onLoadingStatusChange:M,preview:R=!1,filter:D="none",frame:_,watermark:I,protect:W=!1,locale:E,unavailableLabel:F,className:L,classNames:A,style:H,src:O,...P}=l(y,["locale"]),T=i(s,E),[U,q]=a.useState("loading"),[B,G]=a.useState(!1),J=a.useRef(null),K=a.useRef(M);a.useEffect(()=>{K.current=M});const Q=a.useCallback(e=>{J.current=e,"function"==typeof x?x(e):x&&(x.current=e)},[x]);a.useEffect(()=>{const e=J.current,t=O&&e?.complete?e.naturalWidth>0?"loaded":"failed":null;q(t??"loading"),t&&K.current?.(t)},[O]);const V=e=>{q(e),M?.(e)},X=!1===S?"":d[!0===S?"md":S],Y=D in p?p[D]:D,Z=!0===W?{}:!1===W?null:W,ee=null!==Z&&!1!==Z.contextMenu,te=null!==Z&&!1!==Z.drag,ne=null!==Z&&!1!==Z.select,ae=e=>e.preventDefault(),oe=Z?{onContextMenu:ee?ae:void 0,onDragStart:te?ae:void 0,draggable:!te&&void 0,className:ne?"select-none":"",style:ne?{WebkitTouchCallout:"none"}:void 0}:null,re=e("img",{ref:Q,src:O,alt:$,width:w,height:N,className:c("block size-full",m[j],X,"[transition:opacity_var(--neba-duration-fill)_var(--neba-ease),filter_var(--neba-duration-fill)_var(--neba-ease)]","loaded"===U?"opacity-100":"opacity-0",oe?.className,A?.image),style:{filter:"none"===Y?void 0:Y,...oe?.style},onLoad:()=>V("loaded"),onError:()=>V("failed"),onContextMenu:oe?.onContextMenu,onDragStart:oe?.onDragStart,draggable:oe?.draggable,...P}),le="failed"===U?e("span",{className:c("absolute inset-0 flex items-center justify-center","bg-(--neba-disabled-bg) text-(--neba-muted-fg)",X,A?.fallback),children:z??e("span",{className:"px-2 text-center text-sm",children:$||F||T.unavailable})}):"loading"===U&&!1!==C?e("span",{className:c("absolute inset-0",A?.placeholder),children:C??e(r,{shape:"rect",className:c("size-full",X)})}):null,se=void 0===I?null:function(t,n){const a="string"==typeof t?{content:t}:t,{content:o,position:r="bottom-end",repeat:l=!1,opacity:s=.35,size:i="xs",color:d="#ffffff"}=a,m="string"==typeof i&&i in u?u[i]:f(i)??u.xs,p=a.rotate??(l&&"string"==typeof o?-24:0);if(l&&"string"==typeof o){const t=function(e,t){let n=0;for(const t of e)n+=/[ᄀ-ᇿ⺀-꓏가-퟿豈-﫿︰-﹏]/.test(t)?1:.6;const a=Math.max(16,Math.round(16*(n+2.4))),o=e.replace(/[&<>]/g,e=>"&"===e?"&amp;":"<"===e?"&lt;":"&gt;");return{uri:`data:image/svg+xml,${encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" width="${a}" height="52"><text x="0" y="32" font-family="system-ui, sans-serif" font-size="16" fill="${t}" stroke="rgba(0,0,0,0.28)" stroke-width="0.6" paint-order="stroke">${o}</text></svg>`)}`,width:a,height:52}}(o,d);return e("span",{"aria-hidden":"true",className:c("pointer-events-none absolute select-none",n),style:{inset:"-40%",opacity:s,transform:`rotate(${p}deg)`,backgroundImage:`url("${t.uri}")`,backgroundSize:`calc(${m} * ${t.width/16}) calc(${m} * ${t.height/16})`}})}return e("span",{"aria-hidden":"true",className:c("pointer-events-none absolute inset-0 flex select-none p-2",b[r],n),children:e("span",{style:{color:d,opacity:s,fontSize:m,lineHeight:1.2,textShadow:"0 1px 2px rgba(0, 0, 0, 0.45)",transform:p?`rotate(${p}deg)`:void 0},children:o})})}(I,A?.watermark),ie=t("span",{className:"relative block size-full",children:[re,le,se]}),ce="auto"===k?function(e,t){const n="number"==typeof e?e:Number(e),a="number"==typeof t?t:Number(t);return Number.isFinite(n)&&Number.isFinite(a)&&n>0&&a>0?n/a:null}(w,N):null,ue=ce??k,de=void 0===_?null:function(e,t){const n=!0===t?"md":t;return{shape:"rounded",corner:!1===n?"md":n,..."string"==typeof e?{shape:e}:e}}(_,S),fe=null===de?"0px":function(e){return"string"==typeof e&&e in d?`var(--neba-radius-${e})`:f(e)??"0px"}(de.corner??"md"),me=null===de?void 0:f(de.mat),pe=null===de?void 0:f(de.feather),be={...null===de?null:h(de.shape,fe),...void 0===pe?null:v(pe),...null===de?H:null},ge="auto"===ue?e("span",{className:c("relative block overflow-hidden",null===de?X:"",null===de?L:""),style:be,children:ie}):e(o,{ratio:ue,className:c("overflow-hidden",null===de?X:"",null===de?L:""),style:be,children:ie}),he=null===de?void 0:function(e){if(void 0===e.border||!1===e.border)return;const t=!0===e.border?"1px":f(e.border);return`inset 0 0 0 ${t} ${e.borderColor??"var(--neba-line)"}`}(de),ve=void 0===me?fe:`calc(${fe} + ${me})`,ye=null===de?ge:t("span",{className:c("relative block",A?.frame,L),style:{...h(de.shape,ve),padding:me,background:de.background??(void 0===me?void 0:"var(--neba-surface)"),boxShadow:de.elevation?`var(--neba-shadow-${de.elevation})`:void 0,...H},children:[ge,void 0===he?null:e("span",{"aria-hidden":"true",className:"pointer-events-none absolute inset-0",style:{...h(de.shape,ve),boxShadow:he}})]});return R?t(n,{children:[e("button",{type:"button","aria-label":$,className:c("block w-full cursor-zoom-in [outline:none]","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:[outline-offset:2px]",X),onClick:()=>G(!0),children:ye}),e(a.Suspense,{fallback:null,children:e(g,{open:B,onOpenChange:G,size:"xl",title:$,children:t("span",{className:"relative mx-auto block w-fit",children:[e("img",{src:O,alt:$,className:c("mx-auto block max-h-[70vh] w-auto max-w-full",oe?.className),style:{filter:"none"===Y?void 0:Y,...oe?.style},onContextMenu:oe?.onContextMenu,onDragStart:oe?.onDragStart,draggable:oe?.draggable}),se]})})})]}):ye});
+"use client";import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import*as o from"react";import{AspectRatio as r}from"../aspect-ratio/AspectRatio.js";import{Skeleton as i}from"../skeleton/Skeleton.js";import{useStyleDefaults as a}from"../../internal/defaults.js";import{imageMessages as l,useMessages as s}from"../../internal/i18n.js";import{cx as c,metaTextValues as u,radiusClasses as d,toLength as f,transitionClasses as h}from"../../internal/styles.js";const p={cover:"object-cover",contain:"object-contain",fill:"object-fill",none:"object-none","scale-down":"object-scale-down"},b={none:"none",grayscale:"grayscale(1)",sepia:"sepia(0.72)",invert:"invert(1)",saturate:"saturate(1.5)",mute:"saturate(0.45)",contrast:"contrast(1.25)"},m={"top-start":"items-start justify-start","top-end":"items-start justify-end","bottom-start":"items-end justify-start","bottom-end":"items-end justify-end",center:"items-center justify-center"},g=Number.parseInt(o.version,10)>=19?"fetchPriority":"fetchpriority",v=o.lazy(()=>import("../dialog/Dialog.js").then(e=>({default:e.Dialog})));function y(e){const t="number"==typeof e?e:""===e.trim()?NaN:Number(e);return Number.isFinite(t)?`${t}px`:String(e)}const x=/^(-?\d*\.?\d+)%$/;function w(e,t,n){const o=function(e){let t=.5,n=.5;for(const[o,r]of e.trim().toLowerCase().split(/\s+/).entries()){const e=x.exec(r);if("left"===r||"right"===r)t="left"===r?0:1;else if("top"===r||"bottom"===r)n="top"===r?0:1;else if(null!==e)0===o?t=Number(e[1])/100:n=Number(e[1])/100;else if("center"!==r)return null}return[t,n]}(e);if(null===o)return e;let[r,i]=o;"horizontal"!==n&&"both"!==n||(r=1-r),"vertical"!==n&&"both"!==n||(i=1-i);for(let e=0;e<t;e+=1)[r,i]=[i,1-r];const a=e=>Math.round(1e4*e)/100+"%";return`${a(r)} ${a(i)}`}function $(e,t,n){const o=e=>0===n?e:`calc(${e} + ${2*n}px)`;return t?{...e,width:o("100cqh"),height:o("100cqw")}:{...e,position:"absolute",top:-n+"px",left:-n+"px",width:o("100%"),height:o("100%"),maxWidth:"none"}}function k(e,t){switch(e){case"rect":return{borderRadius:"0px"};case"circle":return{borderRadius:"50%"};case"arch":return{borderRadius:`50% 50% ${t} ${t} / 55% 55% ${t} ${t}`};case"cut":return{clipPath:`polygon(${t} 0, calc(100% - ${t}) 0, 100% ${t}, 100% calc(100% - ${t}), calc(100% - ${t}) 100%, ${t} 100%, 0 calc(100% - ${t}), 0 ${t})`};default:return{borderRadius:t}}}function N(e){const t=t=>`linear-gradient(to ${t}, transparent, #000 ${e}, #000 calc(100% - ${e}), transparent)`,n=`${t("right")}, ${t("bottom")}`;return{maskImage:n,maskComposite:"intersect",WebkitMaskImage:n,WebkitMaskComposite:"source-in"}}function TiledMark({text:n,color:r,opacity:i,rotate:a,fontSize:l,slot:s}){const u=`neba-mark-${o.useId().replace(/[^\w-]/g,"")}`,d=function(e){let t=0;for(const n of e)t+=/[ᄀ-ᇿ⺀-꓏가-퟿豈-﫿︰-﹏]/.test(n)?1:.6;return{width:Math.max(16,Math.round(16*(t+2.4))),height:52}}(n);return t("svg",{"aria-hidden":"true",className:c("pointer-events-none absolute select-none",s),style:{top:"-40%",left:"-40%",width:"180%",height:"180%",opacity:i,fontSize:l,transform:`rotate(${a}deg)`},children:[e("defs",{children:e("pattern",{id:u,patternUnits:"userSpaceOnUse",width:d.width/16+"em",height:d.height/16+"em",children:e("text",{x:"0",y:"2em",style:{fill:r,fontFamily:"system-ui, sans-serif",stroke:"rgba(0, 0, 0, 0.28)",strokeWidth:"0.0375em",paintOrder:"stroke"},children:n})})}),e("rect",{width:"100%",height:"100%",fill:`url(#${u})`})]})}export const Image=/*@__PURE__*/o.forwardRef(function Image(x,S){const{alt:z,ratio:R="auto",width:C,height:M,fit:_="cover",position:W,letterbox:L="none",rounded:O=!1,placeholder:P,fallback:D,onLoadingStatusChange:T,preview:E=!1,priority:F=!1,filter:I="none",rotate:U=0,flip:q="none",frame:H,watermark:B,protect:A=!1,locale:V,unavailableLabel:G,className:J,classNames:K,style:Q,src:X,onLoad:Y,onError:Z,onContextMenu:ee,onDragStart:te,draggable:ne,...oe}=a(x,["locale"]),re=s(l,V),ie=!1!==P&&function(e){return"object"==typeof e&&null!==e&&!o.isValidElement(e)&&"src"in e}(P)?P:null,ae=function(e){const[t,n]=o.useState(null);return o.useEffect(()=>{if("undefined"==typeof Blob||!(e instanceof Blob))return;const t=URL.createObjectURL(e);return n({blob:e,url:t}),()=>URL.revokeObjectURL(t)},[e]),"string"==typeof e?e:null!==t&&t.blob===e?t.url:void 0}(ie?.src),[le,se]=o.useState("loading"),[ce,ue]=o.useState(!1),[de,fe]=o.useState(null),he=o.useRef(null),pe=o.useRef(T);o.useEffect(()=>{pe.current=T});const be=o.useCallback(e=>{he.current=e,"function"==typeof S?S(e):S&&(S.current=e)},[S]);o.useEffect(()=>{const e=he.current,t=X&&e?.complete?e.naturalWidth>0?"loaded":"failed":null;se(t??"loading"),fe("loaded"===t&&e?{width:e.naturalWidth,height:e.naturalHeight}:null),pe.current?.(t??"loading")},[X]);const me=(e,t)=>{se(e),"loaded"===e&&fe({width:t.naturalWidth,height:t.naturalHeight}),T?.(e)},ge=!1===O?"":d[!0===O?"md":O],ve=I in b?b[I]:I,ye=!0===A?{}:!1===A?null:A,xe=null!==ye&&!1!==ye.contextMenu,we=null!==ye&&!1!==ye.drag,$e=null!==ye&&!1!==ye.select,ke=e=>e.preventDefault(),Ne=function(e){return Number.isFinite(e)?(Math.round(e/90)%4+4)%4:0}(U),je=Ne%2==1,Se=function(e,t){const n=e%2==1,o="horizontal"===t||"both"===t,r="vertical"===t||"both"===t,i=n?r:o,a=n?o:r;return{scale:i||a?`${i?-1:1} ${a?-1:1}`:void 0,rotate:0===e?void 0:90*e+"deg",...n?{position:"absolute",top:"50%",left:"50%",width:"100cqh",height:"100cqw",maxWidth:"none",translate:"-50% -50%"}:null}}(Ne,q),ze=void 0===W?void 0:w(W,Ne,q),Re="blur"===L&&"cover"!==_&&"fill"!==_,Ce="none"!==L&&"blur"!==L?L:void 0,Me=ye?{onContextMenu:xe?ke:void 0,onDragStart:we?ke:void 0,draggable:!we&&void 0,className:$e?"select-none":"",style:$e?{WebkitTouchCallout:"none"}:void 0}:null,_e=e("img",{ref:be,src:X,alt:z,width:C,height:M,className:c("block size-full",p[_],ge,"[transition:opacity_var(--neba-duration-fill)_var(--neba-ease),filter_var(--neba-duration-fill)_var(--neba-ease),transform_var(--neba-duration-fill)_var(--neba-ease)]",F||"loaded"===le?"opacity-100":"opacity-0",Re||null!==ie?"relative":"",Me?.className,K?.image),style:{filter:"none"===ve?void 0:ve,objectPosition:ze,...Se,...Me?.style},onLoad:e=>{me("loaded",e.currentTarget),Y?.(e)},onError:e=>{me("failed",e.currentTarget),Z?.(e)},onContextMenu:e=>{xe&&ke(e),ee?.(e)},onDragStart:e=>{we&&ke(e),te?.(e)},draggable:!we&&ne,...F?{loading:"eager",[g]:"high"}:null,...oe}),We=Re?e("img",{src:X,srcSet:oe.srcSet,sizes:oe.sizes,loading:oe.loading,decoding:oe.decoding,crossOrigin:oe.crossOrigin,referrerPolicy:oe.referrerPolicy,alt:"","aria-hidden":"true",draggable:!1,className:c("pointer-events-none block object-cover select-none","[transition:opacity_var(--neba-duration-fill)_var(--neba-ease)]","loaded"===le?"opacity-100":"opacity-0"),style:{...$(Se,je,48),objectPosition:ze,filter:("none"===ve?"":`${ve} `)+"blur(24px)"}}):null,Le=null!==ie&&ie.blur?!0===ie.blur?20:ie.blur:0,Oe=null===ie||"failed"===le||void 0===ae?null:e("img",{src:ae,alt:"","aria-hidden":"true",draggable:!1,className:c("pointer-events-none block select-none",p[_],"loaded"===le?"opacity-0 [transition:opacity_0ms_linear_var(--neba-duration-fill)]":"opacity-100",K?.placeholder),style:{...$(Se,je,2*Le),objectPosition:ze,filter:0===Le?void 0:`blur(${Le}px)`}}),Pe="failed"===le?e("span",{className:c("absolute inset-0 flex items-center justify-center","bg-(--neba-disabled-bg) text-(--neba-muted-fg)",ge,K?.fallback),children:D??e("span",{className:"px-2 text-center text-sm","aria-hidden":!!z||void 0,children:z||G||re.unavailable})}):"loading"!==le||!1===P||null!==ie||F?null:e("span",{className:c("absolute inset-0",K?.placeholder),children:P??e(i,{render:e("span",{}),shape:"rect",className:c("block size-full",ge)})}),De=void 0===B?null:function(t,n){const o="string"==typeof t?{content:t}:t,{content:r,position:i="bottom-end",repeat:a=!1,opacity:l=.35,size:s="xs",color:d="#ffffff"}=o,h="string"==typeof s&&s in u?u[s]:f(s)??u.xs,p=o.rotate??(a&&"string"==typeof r?-24:0);if(a&&"string"==typeof r)return e(TiledMark,{text:r,color:d,opacity:l,rotate:p,fontSize:h,slot:n});return e("span",{"aria-hidden":"true",className:c("pointer-events-none absolute inset-0 flex select-none p-2",m[i],n),children:e("span",{style:{color:d,opacity:l,fontSize:h,lineHeight:1.2,textShadow:"0 1px 2px rgba(0, 0, 0, 0.45)",transform:p?`rotate(${p}deg)`:void 0},children:r})})}(B,K?.watermark),Te=t("span",{className:"relative block size-full",style:je||void 0!==Ce?{containerType:je?"size":void 0,background:Ce}:void 0,children:[We,Oe,_e,Pe,De]}),Ee=function(e,t){const n="number"==typeof e?e:Number(e),o="number"==typeof t?t:Number(t);return Number.isFinite(n)&&Number.isFinite(o)&&n>0&&o>0?{width:n,height:o}:null}(C,M),Fe="auto"===R&&null!==Ee?Ee.width/Ee.height:null,Ie=null===Fe?R:je?1/Fe:Fe,Ue=void 0===M&&void 0!==C?y(C):void 0,qe=void 0===C&&void 0!==M?y(M):void 0,He=void 0!==Ue?{width:Ue,maxWidth:"100%"}:void 0!==qe?{height:qe,..."auto"===Ie?null:{width:"auto",maxWidth:"100%"}}:null,Be=void 0!==Ue||void 0!==qe&&"auto"!==Ie,Ae="auto"===Ie&&je&&null!==de&&void 0===qe?de.height/de.width:null,Ve=void 0===H?null:function(e,t){const n=!0===t?"md":t;return{shape:"rounded",corner:!1===n?"md":n,..."string"==typeof e?{shape:e}:e}}(H,O),Ge=null===Ve?"0px":function(e){return"string"==typeof e&&e in d?`var(--neba-radius-${e})`:f(e)??"0px"}(Ve.corner??"md"),Je=null===Ve?void 0:f(Ve.mat),Ke=null===Ve?void 0:f(Ve.feather),Qe={...He,...null===Ve?null:k(Ve.shape,Ge),...void 0===Ke?null:N(Ke),...null!==Ve||E?null:Q},Xe="auto"===Ie?e("span",{className:c("relative block overflow-hidden",null===Ve?ge:"",null!==Ve||E?"":J),style:null===Ae?Qe:{aspectRatio:Ae,...Qe},children:Te}):e(r,{render:e("span",{}),ratio:Ie,className:c("block overflow-hidden",null===Ve?ge:"",null!==Ve||E?"":J),style:Qe,children:Te}),Ye=null===Ve?void 0:function(e){if(void 0===e.border||!1===e.border)return;const t=!0===e.border?"1px":f(e.border);return`inset 0 0 0 ${t} ${e.borderColor??"var(--neba-line)"}`}(Ve),Ze=void 0===Je?Ge:`calc(${Ge} + ${Je})`,et=null===Ve?Xe:t("span",{className:c("relative block",K?.frame,E?"":J),style:{...k(Ve.shape,Ze),padding:Je,background:Ve.background??(void 0===Je?void 0:"var(--neba-surface)"),boxShadow:Ve.elevation?`var(--neba-shadow-${Ve.elevation})`:void 0,width:Be?"fit-content":void 0,maxWidth:Be?"100%":void 0,...E?null:Q},children:[Xe,void 0===Ye?null:e("span",{"aria-hidden":"true",className:"pointer-events-none absolute inset-0",style:{...k(Ve.shape,Ze),boxShadow:Ye}})]});return E?t(n,{children:[e("button",{type:"button","aria-label":z||re.preview,className:c("block cursor-zoom-in",h,Be?"[:where(&)]:w-fit [:where(&)]:max-w-full":"[:where(&)]:w-full","focus-visible:[outline:2px_solid_var(--n-ring,var(--neba-primary-ring))] focus-visible:[outline-offset:2px]",ge,J),style:Q,onClick:()=>ue(!0),children:et}),e(o.Suspense,{fallback:null,children:e(v,{open:ce,onOpenChange:ue,size:"xl",title:z||re.preview,children:t("span",{className:c("relative mx-auto block",je?"":"w-fit"),style:je?j(de??Ee):void 0,children:[e("img",{src:X,srcSet:oe.srcSet,crossOrigin:oe.crossOrigin,referrerPolicy:oe.referrerPolicy,alt:z,className:c(je?"block object-contain":"mx-auto block max-h-[70vh] w-auto max-w-full",Me?.className),style:{filter:"none"===ve?void 0:ve,...Se,...Me?.style},onContextMenu:Me?.onContextMenu,onDragStart:Me?.onDragStart,draggable:Me?.draggable}),De]})})})]}):et});function j(e){if(null===e)return{aspectRatio:"1",width:"min(100%, 70vh)",containerType:"size"};const t=e.height/e.width;return{aspectRatio:`${e.height} / ${e.width}`,width:`min(100%, ${e.height}px, calc(70vh * ${t}))`,containerType:"size"}}

package/dist/components/image/index.d.ts

@@ -1,2 +1,2 @@
 export { Image } from './Image.js';
-export type { ImageProps, ImageSlot, NebaImageFilter, NebaImageFrame, NebaImageFrameOptions, NebaImageFrameShape, NebaImageProtection, NebaImageWatermark, NebaImageWatermarkOptions } from './Image.js';
+export type { ImageProps, ImageSlot, NebaImageFilter, NebaImageFlip, NebaImageFrame, NebaImageFrameOptions, NebaImageFrameShape, NebaImageLetterbox, NebaImagePlaceholderOptions, NebaImagePosition, NebaImageProtection, NebaImageRotation, NebaImageWatermark, NebaImageWatermarkOptions } from './Image.js';

package/dist/components/inline-citation/InlineCitation.d.ts

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { type SourcesMessages } from '../../internal/i18n.js';
+import type { NebaColor, NebaSize } from '../../types.js';
+export interface InlineCitationProps extends Omit<React.ComponentPropsWithoutRef<'a'>, 'color' | 'title' | 'children'> {
+    /**
+     * Which source this is, and the only thing the mark itself says. It is the
+     * caller's number rather than one counted here: a citation sits in a
+     * paragraph, and the list it points at is somewhere else on the page.
+     */
+    index: number;
+    /** The heading of the preview. Without it there is nothing to preview. */
+    title?: React.ReactNode;
+    /** The line under it — the passage that was used, the publisher, a date. */
+    description?: React.ReactNode;
+    /** Where it came from, set beside the title in the preview. */
+    site?: React.ReactNode;
+    /**
+     * Where the citation points. A scheme outside `http`, `https`, `mailto` and
+     * `tel` leaves the mark as plain text rather than writing the URL out.
+     */
+    href?: string;
+    /** Where the link opens. `rel` gains `noopener noreferrer` whenever it leaves the tab. */
+    target?: string;
+    /**
+     * Shows the preview on hover and on focus. Off, the mark is a bare link, and
+     * the reader has the list at the bottom of the answer and nothing else.
+     * @default true
+     */
+    preview?: boolean;
+    /** The type scale of the preview. The mark itself is sized in `em`. @default 'md' */
+    size?: NebaSize;
+    /** @default 'primary' */
+    color?: NebaColor;
+    /** Which language the mark's accessible name is written in, as a BCP 47 tag. */
+    locale?: string;
+    /** That sentence, written out. Overrides the `locale`'s. */
+    labels?: Partial<SourcesMessages>;
+}
+/**
+ * A numbered footnote in the body of an answer, with the source behind it a
+ * hover away.
+ *
+ * The mark is the same square a [Sources](./sources) row draws, and that is the
+ * whole arrangement: a reader sees `2` in a sentence and finds `2` in the list
+ * underneath. Both read one class from `internal/styles.ts`, because two
+ * drawings of one number is two chances for the pair to stop matching.
+ *
+ * `index` is the caller's rather than counted here. A citation sits inside a
+ * paragraph and the list it points at is somewhere else on the page, so there
+ * is no parent that could number it — and a component that numbered itself by
+ * render order would renumber the whole answer whenever a sentence moved.
+ */
+export declare const InlineCitation: React.ForwardRefExoticComponent<InlineCitationProps & React.RefAttributes<HTMLAnchorElement>>;

package/dist/components/inline-citation/InlineCitation.js

@@ -0,0 +1 @@
+"use client";import{jsx as e}from"react/jsx-runtime";import*as r from"react";import{HoverCard as t}from"../hover-card/HoverCard.js";import{TextLink as n}from"../text-link/TextLink.js";import{fillMessage as i,sourcesMessages as o,useMessages as a}from"../../internal/i18n.js";import{safeHref as l,safeRel as s}from"../../internal/link.js";import{citationMarkClasses as m,cx as c,focusRingClasses as f,hasContent as d,metaTextClasses as p,transitionClasses as h}from"../../internal/styles.js";import{useStyleDefaults as v}from"../../internal/defaults.js";export const InlineCitation=/*@__PURE__*/r.forwardRef(function InlineCitation(r,u){const{index:g,title:b,description:j,site:x,href:y,target:$,rel:k,preview:z=!0,size:C="md",color:N="primary",locale:w,labels:I,className:H,style:L,...R}=v(r,["size","locale"]),S={...a(o,w),...I},T=i(S.citation,{index:String(g)}),q=l(y),A=e("a",{ref:u,href:q,target:q?$:void 0,rel:s($,k),"aria-label":T,className:c(m,"align-[0.15em] no-underline",q?"cursor-pointer":"cursor-default","hover:bg-(--n-soft-hover)",f,h,H??""),style:{"--n-soft":`var(--neba-${N}-soft)`,"--n-soft-hover":`var(--neba-${N}-soft-hover)`,"--n-on-tint":`var(--neba-${N}-on-tint)`,"--n-ring":`var(--neba-${N}-ring)`,...L},...R,children:g});return z&&d(b)?e(t,{size:C,color:N,trigger:A,title:q?e(n,{href:q,underline:"hover",target:$,rel:s($,k),children:b}):b,description:x,children:d(j)?e("span",{className:c("text-(--neba-muted-fg)",p[C]),children:j}):null}):A});

package/dist/components/inline-citation/index.d.ts

@@ -0,0 +1,2 @@
+export { InlineCitation } from './InlineCitation.js';
+export type { InlineCitationProps } from './InlineCitation.js';

package/dist/components/inline-citation/index.js

@@ -0,0 +1 @@
+export{InlineCitation}from"./InlineCitation.js";

package/dist/components/line-chart/LineChart.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { type CartesianChartProps } from '../../internal/chart-frame.js';
 import { type ChartMarkers } from '../../internal/chart-line.js';
-import type { NebaChartCurve, NebaChartValueLabels } from '../../types.js';
+import type { NebaChartCurve, NebaChartNulls, NebaChartValueLabels } from '../../types.js';
 export interface LineChartProps extends CartesianChartProps {
     /**
      * How the line gets from one point to the next.
@@ -33,10 +33,21 @@ export interface LineChartProps extends CartesianChartProps {
      */
     gradient?: boolean;
     /**
-     * Draws the line straight through a `null` instead of breaking at it.
+     * What the line does where a value is missing: break at it, bridge it, or
+     * read it as a nought.
      *
-     * Off, and it should stay off unless the gap is an artefact of how the data
-     * was collected. A bridged gap is a number the chart made up.
+     * `gap` is the default and the honest one. `connect` is for a gap that came
+     * from the collection rather than from the world, and `zero` is for a count
+     * where a missing row really does mean none — it rewrites the data, so the
+     * axis, the tooltip and the table all say nought too.
+     * @default 'gap'
+     */
+    nulls?: NebaChartNulls;
+    /**
+     * Draws the line straight through a `null` instead of breaking at it.
+     * @deprecated Pass `nulls="connect"`. `nulls` says the same thing and has a
+     * third answer this one cannot express; this is read only when `nulls` is
+     * left out.
      * @default false
      */
     connectNulls?: boolean;
@@ -71,4 +82,4 @@ export interface LineChartProps extends CartesianChartProps {
  * from the shared frame, which is what makes a LineChart and a BarChart on one
  * dashboard read as one drawing rather than two.
  */
-export declare function LineChart({ curve, markers, gradient, connectNulls, valueLabels, stacked, ...props }: LineChartProps): React.JSX.Element;
+export declare function LineChart({ curve, markers, gradient, nulls, connectNulls, valueLabels, stacked, series, ...props }: LineChartProps): React.JSX.Element;

package/dist/components/line-chart/LineChart.js

@@ -1 +1 @@
-"use client";import{jsx as e}from"react/jsx-runtime";import*as r from"react";import{CartesianChart as t}from"../../internal/chart-frame.js";import{LineSeries as n}from"../../internal/chart-line.js";export function LineChart({curve:a="linear",markers:c="auto",gradient:i=!1,connectNulls:o=!1,valueLabels:s="none",stacked:l=!1,...m}){const u=r.useId().replace(/:/g,"");return e(t,{...m,stacked:l,inset:!0,includeZero:!1,headroom:"none"===s?0:10,children:r=>e(n,{context:r,curve:a,filled:!1,stacked:l,markers:c,valueLabels:s,connectNulls:o,gradient:i,idPrefix:u})})}
+"use client";import{jsx as e}from"react/jsx-runtime";import*as r from"react";import{CartesianChart as n}from"../../internal/chart-frame.js";import{LineSeries as t}from"../../internal/chart-line.js";import{zeroGaps as a}from"../../internal/chart.js";export function LineChart({curve:o="linear",markers:s="auto",gradient:c=!1,nulls:i,connectNulls:l=!1,valueLabels:m="none",stacked:u=!1,series:d,...f}){const p=r.useId().replace(/:/g,""),h=i??(l?"connect":"gap"),j=r.useMemo(()=>"zero"===h?a(d):d,[d,h]);return e(n,{...f,series:j,stacked:u,inset:!0,includeZero:!1,headroom:"none"===m?0:10,children:r=>e(t,{context:r,curve:o,filled:!1,stacked:u,markers:s,valueLabels:m,connectNulls:"connect"===h,gradient:c,idPrefix:p})})}