plass-ui 1.6.0 → 1.8.0

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

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as t from"react";import{ChartScaleLegend as n,ChartStatus as i,ChartSurface as r,ChartTooltipPanel as a,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 p,rampStep as g,rampSteps as w,squarify as v,textWidth as y,tickStride as b,toValues as M,truncate as $}from"../../internal/chart.js";import{numberFormatter as k}from"../../internal/format.js";import{cx as A,metaTextClasses as N,srOnlyClasses as j}from"../../internal/styles.js";import{useLabels as z}from"../../internal/labels.js";import{useDefaults as E}from"../../internal/defaults.js";export function PlHeatmapChart({series:S,categories:C,shape:D="grid",scale:I="sequential",midpoint:B=0,min:L,max:P,valueLabels:R="none",height:U,format:_,locale:q,label:F,legend:H,tooltip:K,empty:W,size:G,variant:J="ghost",padded:O=!1,className:Q,...T}){const V=E(),X=G??V.size??"md",Y=q??V.locale,Z=t.useRef(null),ee=d(Z),le=z(),te=t.useId(),ne=t.useId(),[ie,re]=t.useState(null),ae=t.useCallback(e=>_?k(Y,_).format(e):c(e,Y),[_,Y]),oe=t.useMemo(()=>M(S),[S]),de=oe.reduce((e,l)=>Math.max(e,l.length),0),he=t.useMemo(()=>Array.from({length:de},(e,l)=>h(l,C,oe)),[de,C,oe]),se=t.useMemo(()=>S.map((e,l)=>e.name??`${l+1}`),[S]),ce=t.useMemo(()=>oe.map((e,l)=>{const t=e.map(e=>e.value).filter(e=>null!==e);return{name:se[l],low:0===t.length?null:Math.min(...t),high:0===t.length?null:Math.max(...t)}}),[oe,se]),me=t.useMemo(()=>{let e=1/0,l=-1/0,t=!1;for(const n of oe)for(const i of n)null!==i.value&&(t=!0,e=Math.min(e,i.value),l=Math.max(l,i.value));return t?{min:e,max:l}:null},[oe]),ue=L??me?.min??0,xe=P??me?.max??1,fe=t.useCallback(e=>g(e,ue,xe,I,B),[ue,xe,I,B]),pe="number"==typeof U?U:x[X]??220,ge=s[X],we=!0===H||void 0===H||!1===H?{}:H,ve=!1!==H,ye=we.side??"bottom",be=!1===K?{mode:"none"}:!0===K||void 0===K?{}:K,Me="none"===be.mode,$e=null===me||0===de||0===S.length,ke=t.useMemo(()=>{if("treemap"===D||ee<=0)return{texts:[],band:0};const e=Math.min(150,.25*ee),l=se.map(l=>$(l,e,ge));return{texts:l,band:l.reduce((e,l)=>Math.max(e,y(l,ge)),0)+10}},[D,se,ee,ge]),Ae="treemap"===D?0:ge+8,Ne={left:ke.band,width:Math.max(0,ee-ke.band),height:Math.max(0,pe-Ae)},je=t.useMemo(()=>{if("treemap"===D)return{texts:[],widest:0};const e=he.map(e=>m(e,Y));return{texts:e,widest:e.reduce((e,l)=>Math.max(e,y(l,ge)),0)}},[D,he,Y,ge]),ze=b(de,Ne.width,je.widest+8),Ee=t.useMemo(()=>{if(Ne.width<=0||Ne.height<=0)return[];if("treemap"===D){const e=[];return oe.forEach((l,t)=>l.forEach((l,n)=>{null!==l.value&&e.push({row:t,index:n,cell:l})})),v(e.map(e=>Math.max(0,e.cell.value??0)),Ne.width,Ne.height).map(l=>({row:e[l.index].row,index:e[l.index].index,cell:e[l.index].cell,x:Ne.left+l.x,y:l.y,width:l.width,height:l.height}))}const e=Ne.height/Math.max(1,S.length),l=Ne.width/Math.max(1,de),t=[];return oe.forEach((n,i)=>n.forEach((n,r)=>{null!==n.value&&t.push({row:i,index:r,cell:n,x:Ne.left+r*l,y:i*e,width:l,height:e})})),t},[D,oe,S.length,de,Ne.left,Ne.width,Ne.height]),Se=t.useCallback((e,l)=>m(e.x??C?.[l]??he[l]??l,Y),[C,he,Y]),Ce=t.useCallback(e=>Se(e.cell,e.index),[Se]),De=null===ie?null:Ee.find(e=>e.row===ie.row&&e.index===ie.index)??null,Ie=null===De?[]:[{seriesIndex:De.row,color:De.cell.color??f(fe(De.cell.value??0),I),value:De.cell.value,formatted:ae(De.cell.value??0),label:De.cell.label}],Be=Array.from({length:w},(e,l)=>f(l,I));return l(r,{...T,size:X,variant:J,padded:O,className:Q,legendSide:ye,legend:ve&&!$e?e(n,{steps:Be,from:ae("diverging"===I?-reach(ue,xe,B)+B:ue),to:ae("diverging"===I?reach(ue,xe,B)+B:xe),middle:"diverging"===I?ae(B):void 0,align:we.align??"center",vertical:"left"===ye||"right"===ye,size:X}):null,table:$e?null:l("table","treemap"===D?{id:te,className:j,children:[F?e("caption",{children:F}):null,oe.map((t,n)=>l("tbody",{children:[e("tr",{children:e("th",{scope:"rowgroup",colSpan:2,children:se[n]})}),t.map((t,n)=>null===t.value?null:l("tr",{children:[e("th",{scope:"row",children:Se(t,n)}),e("td",{children:void 0!==t.label?t.label:ae(t.value)})]},n))]},n))]}:{id:te,className:j,children:[F?e("caption",{children:F}):null,e("thead",{children:l("tr",{children:[e("th",{scope:"col"}),he.map((l,t)=>e("th",{scope:"col",children:m(l,Y)},t))]})}),e("tbody",{children:oe.map((t,n)=>l("tr",{children:[e("th",{scope:"row",children:se[n]}),he.map((l,n)=>{const i=t[n];return e("td",{children:void 0!==i?.label?i.label:null==i?.value?"":ae(i.value)},n)})]},n))})]}),children:[l("div",{ref:Z,role:"img",tabIndex:$e?void 0:0,"aria-label":F??le.chart,"aria-describedby":$e?void 0:ne,onPointerLeave:()=>re(null),onBlur:()=>re(null),onKeyDown:e=>{if(Me||0===Ee.length)return;const l=null===ie?-1:Ee.findIndex(e=>e.row===ie.row&&e.index===ie.index);if("grid"!==D||-1===l||"ArrowDown"!==e.key&&"ArrowUp"!==e.key)if("ArrowRight"===e.key||"ArrowDown"===e.key){const e=Ee[Math.min(Ee.length-1,l+1)];re({row:e.row,index:e.index})}else if("ArrowLeft"===e.key||"ArrowUp"===e.key){const e=Ee[Math.max(0,(-1===l?Ee.length:l)-1)];re({row:e.row,index:e.index})}else{if("Escape"!==e.key)return;re(null)}else{const t="ArrowDown"===e.key?1:-1;let n=l+t;for(;n>=0&&n<Ee.length&&Ee[n].index!==Ee[l].index;)n+=t;n>=0&&n<Ee.length&&re({row:Ee[n].row,index:Ee[n].index})}e.preventDefault()},className:A("relative w-full rounded-(--plass-radius-xs)","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:outline-offset-2"),style:{height:pe},children:[$e?e("div",{className:A("flex h-full items-center justify-center text-(--plass-muted-fg)",N[X]),children:W??le.empty}):ee>0?l("svg",{width:ee,height:pe,viewBox:`0 0 ${ee} ${pe}`,"aria-hidden":"true",className:"block",children:[Ee.map(t=>{const n=fe(t.cell.value??0),i=ie?.row===t.row&&ie?.index===t.index,r=Math.max(0,t.width-u),a=Math.max(0,t.height-u);if(r<=0||a<=0)return null;const d=ae(t.cell.value??0),h="treemap"===D?"all"===R?[Ce(t),d]:[Ce(t)]:"all"===R?[d]:[],s=h.filter(e=>function fits(e,l,t,n){return t>=1.8*n&&l>=Math.min(y(e,n),2.5*n)+8}(e,r,a/h.length,ge)),c=t.cell.color?"var(--plass-surface)":p(n,I);return l("g",{children:[e("rect",{x:t.x+u/2,y:t.y+u/2,width:r,height:a,rx:Math.min(3,r/2,a/2),fill:t.cell.color??f(n,I),opacity:i?1:.94,onPointerEnter:Me?void 0:()=>re({row:t.row,index:t.index}),className:o}),s.map((l,n)=>e("text",{x:t.x+t.width/2,y:t.y+t.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"===D?void 0:"tabular-nums",children:$(l,t.width-8,ge)},n))]},`${t.row}-${t.index}`)}),"grid"===D?ke.texts.map((l,t)=>e("text",{x:Ne.left-8,y:(t+.5)*Ne.height/Math.max(1,S.length),textAnchor:"end",dominantBaseline:"central",fontSize:ge,fill:"var(--plass-muted-fg)",children:l},`row-${t}`)):null,"grid"===D?je.texts.map((l,t)=>{const n=Ne.width/Math.max(1,de);return t%ze!==0?null:e("text",{x:Ne.left+(t+.5)*n,y:Ne.height+ge,textAnchor:"middle",fontSize:ge,fill:"var(--plass-muted-fg)",children:l},`col-${t}`)}):null]}):null,De&&!Me?be.render?e("div",{className:"pointer-events-none absolute z-10",style:{left:De.x+De.width/2,top:De.y},children:be.render({index:De.index,category:De.cell.x??he[De.index]??De.index,items:Ie})}):e(a,{heading:`${se[De.row]} · ${Ce(De)}`,items:Ie,x:De.x+De.width/2,y:De.y,flip:De.x+De.width/2>.6*ee,size:X}):null]}),$e?null:e("span",{id:ne,className:j,children:ce.map((e,n)=>l(t.Fragment,{children:[n>0?", ":null,null===e.low?e.name:e.low===e.high?`${e.name} ${ae(e.low)}`:`${e.name} ${ae(e.low)}–${ae(e.high)}`]},n))}),Me?null:e(i,{heading:De?`${se[De.row]} · ${Ce(De)}`:void 0,items:Ie})]})}function reach(e,l,t){return Math.max(Math.abs(l-t),Math.abs(t-e))}
+"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as t from"react";import{ChartScaleLegend as n,ChartStatus as a,ChartSurface as i,ChartTooltipPanel as r,chartTableName as o,givenHeight as d,markTransitionClasses as h,useMeasuredSize as s}from"../../internal/chart-frame.js";import{categoryAt as c,chartFontSizes as u,compactNumber as m,formatCategory as x,markGap as f,plotHeights as p,rampFill as g,rampInk as w,rampStep as b,rampSteps as v,squarify as y,textWidth as M,tickStride as $,toValues as k,truncate as A}from"../../internal/chart.js";import{numberFormatter as N}from"../../internal/format.js";import{cx as j,metaTextClasses as z,srOnlyClasses as E}from"../../internal/styles.js";import{useLabels as B}from"../../internal/labels.js";import{useDefaults as I,useLocale as S}from"../../internal/defaults.js";export function PlHeatmapChart({series:C,categories:D,shape:P="grid",scale:L="sequential",midpoint:R=0,min:U,max:W,valueLabels:_="none",height:q,initialWidth:F,format:H,locale:K,label:G,"aria-label":J,"aria-labelledby":O,"aria-describedby":Q,legend:T,tooltip:V,empty:X,size:Y,variant:Z="ghost",padded:ee=!1,className:le,...te}){const ne=I(),ae=Y??ne.size??"md",ie=S(K),re=t.useRef(null),{width:oe,height:de,guessed:he}=s(re,F),se=B(),ce=t.useId(),ue=t.useId(),me=t.useId(),[xe,fe]=t.useState(null),pe=t.useCallback(e=>H?N(ie,H).format(e):m(e,ie),[H,ie]),ge=t.useMemo(()=>k(C),[C]),we=ge.reduce((e,l)=>Math.max(e,l.length),0),be=t.useMemo(()=>Array.from({length:we},(e,l)=>c(l,D,ge)),[we,D,ge]),ve=t.useMemo(()=>C.map((e,l)=>e.name??`${l+1}`),[C]),ye=t.useMemo(()=>ge.map((e,l)=>{const t=e.map(e=>e.value).filter(e=>null!==e);return{name:ve[l],low:0===t.length?null:Math.min(...t),high:0===t.length?null:Math.max(...t)}}),[ge,ve]),Me=t.useMemo(()=>{let e=1/0,l=-1/0,t=!1;for(const n of ge)for(const a of n)null!==a.value&&(t=!0,e=Math.min(e,a.value),l=Math.max(l,a.value));return t?{min:e,max:l}:null},[ge]),$e=U??Me?.min??0,ke=W??Me?.max??1,Ae=t.useCallback(e=>b(e,$e,ke,L,R),[$e,ke,L,R]),Ne=d(q,p[ae]??220),je=Ne??de??0,ze=u[ae],Ee=!0===T||void 0===T||!1===T?{}:T,Be=!1!==T,Ie=Ee.side??"bottom",Se=!1===V?{mode:"none"}:!0===V||void 0===V?{}:V,Ce="none"===Se.mode,De=null===Me||0===we||0===C.length,Pe=t.useMemo(()=>{if("treemap"===P||oe<=0)return{texts:[],band:0};const e=Math.min(150,.25*oe),l=ve.map(l=>A(l,e,ze));return{texts:l,band:l.reduce((e,l)=>Math.max(e,M(l,ze)),0)+10}},[P,ve,oe,ze]),Le="treemap"===P?0:ze+8,Re={left:Pe.band,width:Math.max(0,oe-Pe.band),height:Math.max(0,je-Le)},Ue=t.useMemo(()=>{if("treemap"===P)return{texts:[],widest:0};const e=be.map(e=>x(e,ie));return{texts:e,widest:e.reduce((e,l)=>Math.max(e,M(l,ze)),0)}},[P,be,ie,ze]),We=$(we,Re.width,Ue.widest+8),_e=t.useMemo(()=>{if(Re.width<=0||Re.height<=0)return[];if("treemap"===P){const e=[];return ge.forEach((l,t)=>l.forEach((l,n)=>{null!==l.value&&e.push({row:t,index:n,cell:l})})),y(e.map(e=>Math.max(0,e.cell.value??0)),Re.width,Re.height).map(l=>({row:e[l.index].row,index:e[l.index].index,cell:e[l.index].cell,x:Re.left+l.x,y:l.y,width:l.width,height:l.height}))}const e=Re.height/Math.max(1,C.length),l=Re.width/Math.max(1,we),t=[];return ge.forEach((n,a)=>n.forEach((n,i)=>{null!==n.value&&t.push({row:a,index:i,cell:n,x:Re.left+i*l,y:a*e,width:l,height:e})})),t},[P,ge,C.length,we,Re.left,Re.width,Re.height]),qe=t.useCallback((e,l)=>x(e.x??D?.[l]??be[l]??l,ie),[D,be,ie]),Fe=t.useCallback(e=>qe(e.cell,e.index),[qe]),He=null===xe?null:_e.find(e=>e.row===xe.row&&e.index===xe.index)??null;null!==xe&&null===He&&fe(null);const Ke=null===He?[]:[{seriesIndex:He.row,color:He.cell.color??g(Ae(He.cell.value??0),L),value:He.cell.value,formatted:pe(He.cell.value??0),label:He.cell.label}],Ge=Array.from({length:v},(e,l)=>g(l,L)),Je=o({label:G,"aria-label":J,"aria-labelledby":O});return l(i,{...te,size:ae,variant:Z,padded:ee,className:le,legendSide:Ie,legend:Be&&!De?e(n,{steps:Ge,from:pe("diverging"===L?-reach($e,ke,R)+R:$e),to:pe("diverging"===L?reach($e,ke,R)+R:ke),middle:"diverging"===L?pe(R):void 0,align:Ee.align??"center",vertical:"left"===Ie||"right"===Ie,size:ae}):null,table:De?null:l("table","treemap"===P?{id:ce,className:E,"aria-labelledby":Je.labelledBy,children:[Je.caption?e("caption",{children:Je.caption}):null,ge.map((t,n)=>l("tbody",{children:[e("tr",{children:e("th",{scope:"rowgroup",colSpan:2,children:ve[n]})}),t.map((t,n)=>null===t.value?null:l("tr",{children:[e("th",{scope:"row",children:qe(t,n)}),e("td",{children:void 0!==t.label?t.label:pe(t.value)})]},n))]},n))]}:{id:ce,className:E,"aria-labelledby":Je.labelledBy,children:[Je.caption?e("caption",{children:Je.caption}):null,e("thead",{children:l("tr",{children:[e("th",{scope:"col"}),be.map((l,t)=>e("th",{scope:"col",children:x(l,ie)},t))]})}),e("tbody",{children:ge.map((t,n)=>l("tr",{children:[e("th",{scope:"row",children:ve[n]}),be.map((l,n)=>{const a=t[n];return e("td",{children:void 0!==a?.label?a.label:null==a?.value?"":pe(a.value)},n)})]},n))})]}),children:[l("div",{ref:re,role:"img",tabIndex:De?void 0:0,"aria-labelledby":O,"aria-label":J??G??se.chart,"aria-describedby":j(Q,De?me:ue),onPointerLeave:()=>fe(null),onBlur:()=>fe(null),onKeyDown:e=>{if(Ce||0===_e.length)return;const l=null===xe?-1:_e.findIndex(e=>e.row===xe.row&&e.index===xe.index);if("grid"!==P||-1===l||"ArrowDown"!==e.key&&"ArrowUp"!==e.key)if("ArrowRight"===e.key||"ArrowDown"===e.key){const e=_e[Math.min(_e.length-1,l+1)];fe({row:e.row,index:e.index})}else if("ArrowLeft"===e.key||"ArrowUp"===e.key){const e=_e[Math.max(0,(-1===l?_e.length:l)-1)];fe({row:e.row,index:e.index})}else{if("Escape"!==e.key||null===xe)return;fe(null),e.stopPropagation()}else{const t="ArrowDown"===e.key?1:-1;let n=l+t;for(;n>=0&&n<_e.length&&_e[n].index!==_e[l].index;)n+=t;n>=0&&n<_e.length&&fe({row:_e[n].row,index:_e[n].index})}e.preventDefault()},className:j("relative w-full rounded-(--plass-radius-xs)","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:outline-offset-2",he&&"overflow-hidden"),style:{height:Ne??q},children:[De?e("div",{id:me,className:j("flex h-full items-center justify-center text-(--plass-muted-fg)",z[ae]),children:X??se.empty}):oe>0&&(null!==Ne||je>0)?l("svg",{width:oe,height:je,viewBox:`0 0 ${oe} ${je}`,"aria-hidden":"true",className:"block",children:[_e.map(t=>{const n=Ae(t.cell.value??0),a=xe?.row===t.row&&xe?.index===t.index,i=Math.max(0,t.width-f),r=Math.max(0,t.height-f);if(i<=0||r<=0)return null;const o=pe(t.cell.value??0),d="treemap"===P?"all"===_?[Fe(t),o]:[Fe(t)]:"all"===_?[o]:[],s=d.filter(e=>function fits(e,l,t,n){return t>=1.8*n&&l>=Math.min(M(e,n),2.5*n)+8}(e,i,r/d.length,ze)),c=t.cell.color?"var(--plass-surface)":w(n,L);return l("g",{children:[e("rect",{x:t.x+f/2,y:t.y+f/2,width:i,height:r,rx:Math.min(3,i/2,r/2),fill:t.cell.color??g(n,L),opacity:a?1:.94,onPointerEnter:Ce?void 0:()=>fe({row:t.row,index:t.index}),className:h}),s.map((l,n)=>e("text",{x:t.x+t.width/2,y:t.y+t.height/2+(n-(s.length-1)/2)*(ze+2),textAnchor:"middle",dominantBaseline:"central",fontSize:ze,fontWeight:0===n?500:400,fill:c,opacity:0===n?1:.85,pointerEvents:"none",className:0===n&&"treemap"===P?void 0:"tabular-nums",children:A(l,t.width-8,ze)},n))]},`${t.row}-${t.index}`)}),"grid"===P?Pe.texts.map((l,t)=>e("text",{x:Re.left-8,y:(t+.5)*Re.height/Math.max(1,C.length),textAnchor:"end",dominantBaseline:"central",fontSize:ze,fill:"var(--plass-muted-fg)",children:l},`row-${t}`)):null,"grid"===P?Ue.texts.map((l,t)=>{const n=Re.width/Math.max(1,we);return t%We!==0?null:e("text",{x:Re.left+(t+.5)*n,y:Re.height+ze,textAnchor:"middle",fontSize:ze,fill:"var(--plass-muted-fg)",children:l},`col-${t}`)}):null]}):null,He&&!Ce?Se.render?e("div",{className:"pointer-events-none absolute z-10",style:{left:He.x+He.width/2,top:He.y},children:Se.render({index:He.index,category:He.cell.x??be[He.index]??He.index,items:Ke})}):e(r,{heading:`${ve[He.row]} · ${Fe(He)}`,items:Ke,x:He.x+He.width/2,y:He.y,flip:He.x+He.width/2>.6*oe,size:ae}):null]}),De?null:e("span",{id:ue,className:E,children:ye.map((e,n)=>l(t.Fragment,{children:[n>0?", ":null,null===e.low?e.name:e.low===e.high?`${e.name} ${pe(e.low)}`:`${e.name} ${pe(e.low)}–${pe(e.high)}`]},n))}),Ce?null:e(a,{heading:He?`${ve[He.row]} · ${Fe(He)}`:void 0,items:Ke})]})}function reach(e,l,t){return Math.max(Math.abs(l-t),Math.abs(t-e))}

package/dist/components/hover-card/PlHoverCard.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as s}from"react/jsx-runtime";import{PreviewCard as l}from"@base-ui/react/preview-card";import{useDefaults as a}from"../../internal/defaults.js";import{PopupArrow as r}from"../../internal/picker.js";import{cx as i,glassClasses as n,hasContent as t,metaTextClasses as o,radiusClasses as d,sheetBodyClasses as m,sheetHeaderGapClasses as c,sheetPaddingXClasses as p,sheetPaddingYClasses as f,sheetSectionGapClasses as g,sheetTitleClasses as x,surfaceSlots as u}from"../../internal/styles.js";const y={xs:"max-w-64",sm:"max-w-72",md:"max-w-sm",lg:"max-w-md",xl:"max-w-lg"},h=/* @__PURE__ */[n,"relative flex flex-col","border text-(--plass-fg) bg-(--plass-glass-press)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--plass-shadow-3),var(--plass-gloss-glass)]","[outline:none]","[transition:opacity_var(--plass-duration)_var(--plass-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),v={xs:8,sm:9,md:10,lg:11,xl:12};export function PlHoverCard({size:n,color:w,density:b,trigger:O,title:j,description:N,children:z,side:P="bottom",align:C="center",sideOffset:D=8,alignOffset:_=0,delay:k=600,closeDelay:A=300,arrow:H=!1,open:R,defaultOpen:T,onOpenChange:W,width:$,className:q,style:B,...E}){const F=a(),G=n??F.size??"md",I=w??F.color??"primary",J=b??F.density??"default",K=v[G],L=t(j)||t(N);return s(l.Root,{open:R,defaultOpen:T,onOpenChange:e=>W?.(e),children:[e(l.Trigger,{delay:k,closeDelay:A,render:O}),e(l.Portal,{children:e(l.Positioner,{className:"plass-portal z-(--plass-z-portal) [outline:none]",side:P,align:C,sideOffset:D,alignOffset:_,children:s(l.Popup,{className:i(h,d[G],m[G],g[G],p[J][G],f[J][G],void 0===$?y[G]:"",q),style:{...u(I,3),...void 0===$?null:{maxWidth:"number"==typeof $?`${$}px`:$},...B},...E,children:[H?e(r,{as:l.Arrow,size:K}):null,L?s("div",{className:i("flex min-w-0 flex-col",c[G]),children:[t(j)?e("div",{className:i("m-0 font-semibold",x[G]),children:j}):null,t(N)?e("div",{className:i("m-0 text-(--plass-muted-fg)",o[G]),children:N}):null]}):null,t(z)?e("div",{className:"min-w-0",children:z}):null]})})})]})}
+"use client";import{jsx as e,jsxs as s}from"react/jsx-runtime";import{PreviewCard as l}from"@base-ui/react/preview-card";import{useDefaults as a}from"../../internal/defaults.js";import{PopupArrow as i}from"../../internal/picker.js";import{cx as r,glassClasses as n,hasContent as t,metaTextClasses as o,radiusClasses as d,sheetBodyClasses as m,sheetHeaderGapClasses as c,sheetPaddingXClasses as p,sheetPaddingYClasses as f,sheetSectionGapClasses as u,sheetTitleClasses as g,surfaceSlots as x}from"../../internal/styles.js";const y={xs:"max-w-64",sm:"max-w-72",md:"max-w-sm",lg:"max-w-md",xl:"max-w-lg"},h=/* @__PURE__ */[n,"relative flex flex-col","border text-(--plass-fg) bg-(--plass-glass-press)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--plass-shadow-3),var(--plass-gloss-glass)]","[outline:none]","[transition:opacity_var(--plass-duration)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),v={xs:8,sm:9,md:10,lg:11,xl:12};export function PlHoverCard({size:n,color:w,density:b,trigger:O,title:j,description:N,children:z,side:P="bottom",align:C="center",sideOffset:D=8,alignOffset:_=0,delay:k=600,closeDelay:A=300,arrow:H=!1,open:R,defaultOpen:T,onOpenChange:W,width:$,className:q,style:B,...E}){const F=a(),G=n??F.size??"md",I=w??F.color??"primary",J=b??F.density??"default",K=v[G],L=t(j)||t(N);return s(l.Root,{open:R,defaultOpen:T,onOpenChange:e=>W?.(e),children:[e(l.Trigger,{delay:k,closeDelay:A,render:O}),e(l.Portal,{children:e(l.Positioner,{className:"plass-portal z-(--plass-z-portal) [outline:none]",side:P,align:C,sideOffset:D,alignOffset:_,children:s(l.Popup,{className:r(h,d[G],m[G],u[G],p[J][G],f[J][G],void 0===$?y[G]:"",q),style:{...x(I,3),...void 0===$?null:{maxWidth:"number"==typeof $?`${$}px`:$},...B},...E,children:[H?e(i,{as:l.Arrow,size:K}):null,L?s("div",{className:r("flex min-w-0 flex-col",c[G]),children:[t(j)?e("div",{className:r("m-0 font-semibold",g[G]),children:j}):null,t(N)?e("div",{className:r("m-0 text-(--plass-muted-fg)",o[G]),children:N}):null]}):null,t(z)?e("div",{className:"min-w-0",children:z}):null]})})})]})}

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

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as l from"react";import{useRender as r}from"@base-ui/react/use-render";import{useDefaults as s}from"../../internal/defaults.js";import{bulletGapClasses as n,bulletSizeValues as o,bulletStatusClasses as i,connectorColorClasses as a,connectorStyleClasses as c,statusAt as d,titleStatusClasses as m}from"../../internal/steps.js";import{cx as p,hasContent as u,iconClasses as f,sheetBodyClasses as x,sheetTitleClasses as h,surfaceSlots as g}from"../../internal/styles.js";const v=/* @__PURE__ */l.createContext(null),w=/* @__PURE__ */l.createContext({index:0,last:!1}),y={default:{xs:"gap-4",sm:"gap-5",md:"gap-6",lg:"gap-7",xl:"gap-8"},compact:{xs:"gap-2.5",sm:"gap-3",md:"gap-4",lg:"gap-4",xl:"gap-5"}};export const PlHowToSteps=/* @__PURE__ */l.forwardRef(function PlHowToSteps({active:t,numbered:n=!0,connector:o="solid",size:i,color:a,density:c,render:d,className:m,style:u,children:f,...h},N){const b=s(),P=i??b.size??"md",j=a??b.color??"primary",H=c??b.density??"default",S=l.Children.toArray(f).filter(l.isValidElement),T=l.useMemo(()=>({size:P,density:H,color:j,active:t??null,numbered:n,connector:o}),[P,H,j,t,n,o]);return e(v.Provider,{value:T,children:r({render:d??e("ol",{}),ref:N,props:{role:"list",className:p("m-0 flex list-none flex-col p-0",y[H][P],x[P],m),style:{...g(j,0),...u},children:S.map((t,l)=>e(w.Provider,{value:{index:l,last:l===S.length-1},children:t},t.key??l)),...h}})})});export const PlHowToStep=/* @__PURE__ */l.forwardRef(function PlHowToStep({title:r,icon:s,status:x,className:y,children:N,...b},P){const j=l.useContext(v),{index:H,last:S}=l.useContext(w);if(!j)throw new Error("PlHowToStep has to be inside a PlHowToSteps.");const{size:T,color:C,active:z,numbered:k,connector:E}=j,R=x??d(H,z),A=o[T];return t("li",{ref:P,"aria-current":"current"===R?"step":void 0,className:p("relative flex",n[T],y),style:g(C,0),...b,children:[t("div",{className:"flex flex-col items-center self-stretch",children:[e("span",{"aria-hidden":"true",className:p("flex shrink-0 items-center justify-center rounded-full font-semibold","text-[0.7em] leading-none",f,i[R]),style:{width:A,height:A},children:u(s)?s:k?H+1:null}),S||"none"===E?null:e("span",{"aria-hidden":"true",className:p("mt-1 w-0 flex-1 border-s-2",c[E],a[R])})]}),t("div",{className:"min-w-0 flex-1 pb-0.5",children:[u(r)?e("div",{className:p("font-semibold",h[T],m[R]),children:r}):null,u(N)?e("div",{className:p(u(r)?"mt-1":"","text-(--plass-muted-fg)"),children:N}):null]})]})});
+"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as t from"react";import{useRender as s}from"@base-ui/react/use-render";import{useDefaults as r}from"../../internal/defaults.js";import{bulletGapClasses as n,bulletSizeValues as o,bulletStatusClasses as i,connectorColorClasses as a,connectorStyleClasses as c,statusAt as d,titleStatusClasses as m}from"../../internal/steps.js";import{cx as p,hasContent as f,iconClasses as u,sheetBodyClasses as x,sheetTitleClasses as h,surfaceSlots as g,transitionClasses as v}from"../../internal/styles.js";const w=/* @__PURE__ */t.createContext(null),y=/* @__PURE__ */t.createContext({index:0,last:!1}),N={default:{xs:"gap-4",sm:"gap-5",md:"gap-6",lg:"gap-7",xl:"gap-8"},compact:{xs:"gap-2.5",sm:"gap-3",md:"gap-4",lg:"gap-4",xl:"gap-5"}};export const PlHowToSteps=/* @__PURE__ */t.forwardRef(function PlHowToSteps({active:l,numbered:n=!0,connector:o="solid",size:i,color:a,density:c,render:d,className:m,style:f,children:u,...h},v){const b=r(),P=i??b.size??"md",j=a??b.color??"primary",H=c??b.density??"default",S=t.Children.toArray(u).filter(t.isValidElement),T=t.useMemo(()=>({size:P,density:H,color:j,active:l??null,numbered:n,connector:o}),[P,H,j,l,n,o]);return e(w.Provider,{value:T,children:s({render:d??e("ol",{}),ref:v,props:{role:"list",className:p("m-0 flex list-none flex-col p-0",N[H][P],x[P],m),style:{...g(j,0),...f},children:S.map((l,t)=>e(y.Provider,{value:{index:t,last:t===S.length-1},children:l},l.key??t)),...h}})})});export const PlHowToStep=/* @__PURE__ */t.forwardRef(function PlHowToStep({title:s,icon:r,status:x,className:N,children:b,...P},j){const H=t.useContext(w),{index:S,last:T}=t.useContext(y);if(!H)throw new Error("PlHowToStep has to be inside a PlHowToSteps.");const{size:C,color:z,active:k,numbered:E,connector:R}=H,$=x??d(S,k),A=o[C];return l("li",{ref:j,"aria-current":"current"===$?"step":void 0,className:p("relative flex",n[C],N),style:{...g(z,0),"--p-fill":`var(--plass-${z}-fill)`,"--p-on-solid":`var(--plass-${z}-on-solid)`},...P,children:[l("div",{className:"flex flex-col items-center self-stretch",children:[e("span",{"aria-hidden":"true",className:p("flex shrink-0 items-center justify-center rounded-full font-semibold","text-[0.7em] leading-none",u,i[$],v),style:{width:A,height:A},children:f(r)?r:E?S+1:null}),T||"none"===R?null:e("span",{"aria-hidden":"true",className:p("mt-1 w-0 flex-1 border-s-2",c[R],a[$],v)})]}),l("div",{className:"min-w-0 flex-1 pb-0.5",children:[f(s)?e("div",{className:p("font-semibold",h[C],m[$],v),children:s}):null,f(b)?e("div",{className:p(f(s)?"mt-1":"","text-(--plass-muted-fg)"),children:b}):null]})]})});

package/dist/components/image/PlImage.js

@@ -1 +1 @@
-"use client";import{jsx as e,Fragment as t,jsxs as r}from"react/jsx-runtime";import*as l from"react";import{useDefaults as n}from"../../internal/defaults.js";import{useLabels as o}from"../../internal/labels.js";import{PlSkeleton as i}from"../skeleton/PlSkeleton.js";import{PlassWatermark as a}from"../../internal/watermark.js";import{isSideways as s,layerStyle as u,objectPosition as c,poseStyle as d,quartersOf as f}from"../../internal/image.js";import{cx as p,focusRingClasses as h,radiusClasses as b,transitionClasses as m}from"../../internal/styles.js";function boxLength(e){return"number"==typeof e||/^\d+(\.\d+)?$/.test(e.trim())?`${Number(e)}px`:e}const g=Number.parseInt(l.version,10)>=19?"fetchPriority":"fetchpriority",v={none:"none",grayscale:"grayscale(1)",sepia:"sepia(0.72)",saturate:"saturate(1.35)",desaturate:"saturate(0.45)",contrast:"contrast(1.2)",dim:"brightness(0.82)"},y={draggable:!1,onDragStart:e=>e.preventDefault(),onContextMenu:e=>e.preventDefault()},w={cover:"object-cover",contain:"object-contain",fill:"object-fill",none:"object-none","scale-down":"object-scale-down"},j=/* @__PURE__ */l.lazy(()=>import("./PlImagePreview.js").then(e=>({default:e.PlImagePreview})));export const PlImage=/* @__PURE__ */l.forwardRef(function PlImage({alt:x,src:k,ratio:P,fit:S="cover",position:N,letterbox:z="none",rotate:L=0,flip:R="none",filter:$,watermark:C,protect:I=!1,rounded:W=!1,size:O,color:U,placeholder:E,fallback:D,preview:B=!1,previewLabel:T,onStatusChange:q,className:A,style:F,loading:H,priority:M=!1,width:V,height:G,...J},K){const Q=n(),X=o(),Y=T??X.preview,Z=O??Q.size??"md",_=U??Q.color??"primary",[ee,te]=l.useState({status:"loading",natural:null}),re=ee.status,[le,ne]=l.useState(!1),oe=H??(M?"eager":"lazy"),ie=J.fetchPriority??(M?"high":void 0),ae=void 0===ie?null:{[g]:ie},se=function isPicturePlaceholder(e){return"object"==typeof e&&null!==e&&!l.isValidElement(e)&&"src"in e}(E)?E:null,ue=function useStandInUrl(e){const[t,r]=l.useState(null);return l.useEffect(()=>{if("undefined"==typeof Blob||!(e instanceof Blob))return;const t=URL.createObjectURL(e);return r({blob:e,url:t}),()=>URL.revokeObjectURL(t)},[e]),"string"==typeof e?e:null!==t&&t.blob===e?t.url:void 0}(se?.src),ce=l.useRef(null),de=l.useCallback(e=>{ce.current=e,"function"==typeof K?K(e):K&&(K.current=e)},[K]),fe=l.useRef("loading"),pe=l.useRef(k),he=l.useRef(null),settle=(e,t)=>{const r="loaded"===e?function naturalSize(e){return null!==e&&e.naturalWidth>0?{width:e.naturalWidth,height:e.naturalHeight}:null}(t):null;te(t=>t.status===e&&t.natural?.width===r?.width&&t.natural?.height===r?.height?t:{status:e,natural:r}),fe.current!==e&&(fe.current=e,q?.(e))};l.useLayoutEffect(()=>{const e=ce.current;if(null!==e){if(pe.current!==k&&(pe.current=k,fe.current="loading"),e.getAttribute("src")&&e.complete)return e.naturalWidth>0&&(he.current={src:k,file:e.currentSrc}),void settle(e.naturalWidth>0?"loaded":"error",e);te(e=>"loading"===e.status?e:{status:"loading",natural:null})}},[k]);const be=W?b[Z]:"",me=void 0===$?void 0:v[$]??$,ge=f(L),ve=s(ge),ye=d(ge,R),we=void 0===N?void 0:c(N,ge,R),je=void 0===me&&null===ye&&void 0===we?void 0:{...void 0===me?null:{"--p-filter":me},objectPosition:we,...ye},xe="blur"===z&&"cover"!==S&&"fill"!==S,ke="none"===z||"blur"===z?void 0:z,Pe=void 0===me||"none"===me?"":`${me} `,Se=xe&&"error"!==re?e("img",{src:k,srcSet:J.srcSet,sizes:J.sizes,loading:oe,decoding:J.decoding,crossOrigin:J.crossOrigin,referrerPolicy:J.referrerPolicy,...ae,alt:"","aria-hidden":"true",draggable:!1,className:p("pointer-events-none block object-cover select-none",m,"loaded"===re?"opacity-100":"opacity-0"),style:{...u(ge,R,48),objectPosition:we,filter:`${Pe}blur(24px)`}}):null,Ne=null!==se&&se.blur?!0===se.blur?20:se.blur:0,ze=null===se||void 0===ue||"error"===re?null:e("img",{src:ue,alt:"","aria-hidden":"true",draggable:!1,className:p("pointer-events-none block select-none",w[S]),style:{...u(ge,R,2*Ne),objectPosition:we,filter:""===Pe&&0===Ne?void 0:`${Pe}blur(${Ne}px)`,..."loaded"===re?{opacity:0,transition:"opacity 0ms linear var(--plass-duration)"}:null}}),Le=e("img",{ref:de,src:k,alt:x,loading:oe,width:V,height:G,onLoad:e=>{const t=e.currentTarget,r=he.current;he.current=null,null!==r&&r.src!==k&&r.file===t.currentSrc||settle("loaded",t)},onError:()=>settle("error",null),style:je,className:p("block size-full",w[S],void 0===me?"":"[filter:var(--p-filter,none)]",m,xe||null!==ze?"relative":"","loaded"===re?"opacity-100":"opacity-0","error"===re?"hidden":"",I?"select-none [-webkit-touch-callout:none]":""),...ae,...J,...I?y:null}),Re=r(t,{children:[Se,ze,Le,"loading"===re&&null===se?e("span",{className:"absolute inset-0",children:void 0===E?e(i,{shape:"rect",color:_,size:Z,width:"100%",height:"100%",className:be}):E}):null,"error"===re?e("span",{className:"absolute inset-0 flex items-center justify-center bg-(--plass-glass-press) p-3 text-center text-[0.8125rem] text-(--plass-muted-fg)",children:D??x}):null,void 0!==C&&"loaded"===re?e(a,{watermark:C}):null]}),$e=function pixelSize(e,t){const r=Number(e),l=Number(t);return void 0!==e&&void 0!==t&&r>0&&l>0?{width:r,height:l}:null}(V,G)??ee.natural,Ce=void 0===G&&void 0!==V?boxLength(V):void 0,Ie=void 0===V&&void 0!==G?boxLength(G):void 0,We=void 0===P&&ve&&null!==$e&&void 0===Ie?`${$e.height} / ${$e.width}`:P,Oe=p("relative block overflow-hidden",be,A),Ue={...void 0===Ce?null:{width:Ce,maxWidth:"100%"},...void 0===Ie?null:{height:Ie,...void 0===P?null:{width:"auto",maxWidth:"100%"}},aspectRatio:We,background:ke,containerType:ve?"size":void 0,...F};return B?r(t,{children:[e("button",{type:"button","aria-label":x?`${x} — ${Y.toLowerCase()}`:Y,onClick:()=>ne(!0),disabled:"loaded"!==re,className:p(Oe,"w-full cursor-zoom-in p-0",h),style:Ue,children:Re}),e(l.Suspense,{fallback:null,children:e(j,{open:le,onOpenChange:ne,src:k,alt:x,label:Y,color:_,protect:I,watermark:C,quarters:ge,flip:R,file:$e})})]}):e("span",{className:Oe,style:Ue,children:Re})});
+"use client";import{jsx as e,Fragment as t,jsxs as r}from"react/jsx-runtime";import*as n from"react";import{useDefaults as l}from"../../internal/defaults.js";import{useLabels as o}from"../../internal/labels.js";import{lazyPart as i}from"../../internal/lazy.js";import{PlSkeleton as a}from"../skeleton/PlSkeleton.js";import{PlassWatermark as s}from"../../internal/watermark.js";import{isSideways as u,layerStyle as c,objectPosition as d,poseStyle as f,quartersOf as h}from"../../internal/image.js";import{cx as p,focusRingClasses as b,radiusClasses as m,transitionClasses as v}from"../../internal/styles.js";function boxLength(e){return"number"==typeof e||/^\d+(\.\d+)?$/.test(e.trim())?`${Number(e)}px`:e}const g=Number.parseInt(n.version,10)>=19?"fetchPriority":"fetchpriority",y={none:"none",grayscale:"grayscale(1)",sepia:"sepia(0.72)",saturate:"saturate(1.35)",desaturate:"saturate(0.45)",contrast:"contrast(1.2)",dim:"brightness(0.82)"},w={draggable:!1,onDragStart:e=>e.preventDefault(),onContextMenu:e=>e.preventDefault()},j={cover:"object-cover",contain:"object-contain",fill:"object-fill",none:"object-none","scale-down":"object-scale-down"};function subscribeToNothing(){return()=>{}}function onClient(){return!1}function onServer(){return!0}const S=/* @__PURE__ */i(()=>import("./PlImagePreview.js").then(e=>e.PlImagePreview));export const PlImage=/* @__PURE__ */n.forwardRef(function PlImage({alt:i,src:x,ratio:k,fit:P="cover",position:N,letterbox:z="none",rotate:L=0,flip:R="none",filter:$,watermark:C,protect:E=!1,rounded:I=!1,size:U,color:W,placeholder:O,fallback:T,preview:B=!1,previewLabel:D,onStatusChange:F,className:q,style:A,loading:H,priority:M=!1,width:V,height:G,...J},K){const Q=l(),X=o(),Y=D??X.preview,Z=U??Q.size??"md",_=W??Q.color??"primary",[ee,te]=n.useState({status:"loading",natural:null}),re=ee.status,[ne,le]=n.useState(!1),[oe,ie]=n.useState(!1),ae=function useServedSrc(e){const t=n.useSyncExternalStore(subscribeToNothing,onClient,onServer),[r]=n.useState(t?e:void 0);return r}(x),se=Boolean(x)&&ae===x&&void 0===C&&!E,ue=se||"loaded"===re?"opacity-100":"opacity-0",ce=H??(M?"eager":"lazy"),de=J.fetchPriority??(M?"high":void 0),fe=void 0===de?null:{[g]:de},he=function isPicturePlaceholder(e){return"object"==typeof e&&null!==e&&!n.isValidElement(e)&&"src"in e}(O)?O:null,pe=function useStandInUrl(e){const[t,r]=n.useState(null);return n.useEffect(()=>{if("undefined"==typeof Blob||!(e instanceof Blob))return;const t=URL.createObjectURL(e);return r({blob:e,url:t}),()=>URL.revokeObjectURL(t)},[e]),"string"==typeof e?e:null!==t&&t.blob===e?t.url:void 0}(he?.src),be=n.useRef(null),me=n.useCallback(e=>{be.current=e,"function"==typeof K?K(e):K&&(K.current=e)},[K]),ve=n.useRef("loading"),ge=n.useRef(x),ye=n.useRef(null),settle=(e,t)=>{const r="loaded"===e?function naturalSize(e){return null!==e&&e.naturalWidth>0?{width:e.naturalWidth,height:e.naturalHeight}:null}(t):null;te(t=>t.status===e&&t.natural?.width===r?.width&&t.natural?.height===r?.height?t:{status:e,natural:r}),ve.current!==e&&(ve.current=e,F?.(e))};n.useLayoutEffect(()=>{const e=be.current;if(null!==e){if(ge.current!==x&&(ge.current=x,ve.current="loading"),e.getAttribute("src")&&e.complete)return e.naturalWidth>0&&(ye.current={src:x,file:e.currentSrc}),void settle(e.naturalWidth>0?"loaded":"error",e);te(e=>"loading"===e.status?e:{status:"loading",natural:null})}},[x]);const we=I?m[Z]:"",je=void 0===$?void 0:y[$]??$,Se=h(L),xe=u(Se),ke=f(Se,R),Pe=void 0===N?void 0:d(N,Se,R),Ne=void 0===je&&null===ke&&void 0===Pe?void 0:{...void 0===je?null:{"--p-filter":je},objectPosition:Pe,...ke},ze="blur"===z&&"cover"!==P&&"fill"!==P,Le="none"===z||"blur"===z?void 0:z,Re=void 0===je||"none"===je?"":`${je} `,$e=ze&&"error"!==re?e("img",{src:x,srcSet:J.srcSet,sizes:J.sizes,loading:ce,decoding:J.decoding,crossOrigin:J.crossOrigin,referrerPolicy:J.referrerPolicy,...fe,alt:"","aria-hidden":"true",draggable:!1,className:p("pointer-events-none block object-cover select-none",v,ue),style:{...c(Se,R,48),objectPosition:Pe,filter:`${Re}blur(24px)`}}):null,Ce=null!==he&&he.blur?!0===he.blur?20:he.blur:0,Ee=null===he||void 0===pe||"error"===re?null:e("img",{src:pe,alt:"","aria-hidden":"true",draggable:!1,className:p("pointer-events-none block select-none","[--p-hold:var(--plass-duration)] motion-reduce:[--p-hold:0ms]",j[P]),style:{...c(Se,R,2*Ce),objectPosition:Pe,filter:""===Re&&0===Ce?void 0:`${Re}blur(${Ce}px)`,..."loaded"===re?{opacity:0,transition:"opacity 0ms linear var(--p-hold)"}:null}}),Ie="loading"===re&&null===he?e("span",{className:"absolute inset-0",children:void 0===O?e(a,{shape:"rect",color:_,size:Z,width:"100%",height:"100%",className:we}):O}):null,Ue=e("img",{ref:me,src:x,alt:i,loading:ce,width:V,height:G,onLoad:e=>{const t=e.currentTarget,r=ye.current;ye.current=null,null!==r&&r.src!==x&&r.file===t.currentSrc||settle("loaded",t)},onError:()=>settle("error",null),style:Ne,className:p("block size-full",j[P],void 0===je?"":"[filter:var(--p-filter,none)]",v,ze||null!==Ee||se&&null!==Ie?"relative":"",ue,"error"===re?"hidden":"",E?"select-none [-webkit-touch-callout:none]":""),...fe,...J,...E?w:null}),We=r(t,{children:[$e,Ee,se?Ie:null,Ue,se?null:Ie,"error"===re?e("span",{className:"absolute inset-0 flex items-center justify-center bg-(--plass-glass-press) p-3 text-center text-[0.8125rem] text-(--plass-muted-fg)",children:T??i}):null,void 0!==C&&"loaded"===re?e(s,{watermark:C}):null]}),Oe=function pixelSize(e,t){const r=Number(e),n=Number(t);return void 0!==e&&void 0!==t&&r>0&&n>0?{width:r,height:n}:null}(V,G)??ee.natural,Te=void 0===G&&void 0!==V?boxLength(V):void 0,Be=void 0===V&&void 0!==G?boxLength(G):void 0,De=void 0===k&&xe&&null!==Oe&&void 0===Be?`${Oe.height} / ${Oe.width}`:k,Fe=p("relative block overflow-hidden",we,q),qe={...void 0===Te?null:{width:Te,maxWidth:"100%"},...void 0===Be?null:{height:Be,...void 0===k?null:{width:"auto",maxWidth:"100%"}},aspectRatio:De,background:Le,containerType:xe?"size":void 0,...A};return B?r(t,{children:[e("button",{type:"button","aria-label":i?`${i} — ${Y.toLowerCase()}`:Y,onClick:()=>{ie(!0),le(!0)},onPointerEnter:S.preload,onFocus:S.preload,onTouchStart:S.preload,disabled:"loaded"!==re,className:p(Fe,"w-full cursor-zoom-in p-0",b),style:qe,children:We}),oe?e(n.Suspense,{fallback:null,children:e(S,{open:ne,onOpenChange:le,onUnavailable:()=>{le(!1),ie(!1)},src:x,alt:i,label:Y,color:_,protect:E,watermark:C,quarters:Se,flip:R,file:Oe})}):null]}):e("span",{className:Fe,style:qe,children:We})});

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

@@ -49,8 +49,9 @@ export interface PlImagePreviewProps {
  * overlay and the chrome around it — several times the weight of the picture
  * component that opens it — and `preview` is off by default, so a page drawing
  * a wall of thumbnails would otherwise be paying for a lightbox it never shows.
- * Reached through `React.lazy`, the chunk arrives after the first paint on the
- * pages that ask for one and is never fetched by the pages that do not.
+ * Reached through `React.lazy` and rendered from the first open, the chunk is
+ * fetched once a reader points at, focuses or opens a picture, and never on a
+ * page where nobody does.
  *
  * The same bargain `PlGallery` makes with `PlGalleryViewer`, for the same
  * reason.

package/dist/components/line-chart/PlLineChart.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 { PlassChartCurve, PlassChartValueLabels } from '../../types.js';
+import type { PlassChartCurve, PlassChartLabelColor, PlassChartNulls, PlassChartValueLabels } from '../../types.js';
 export interface PlLineChartProps extends CartesianChartProps {
     /**
      * How the line gets from one point to the next.
@@ -33,11 +33,24 @@ export interface PlLineChartProps extends CartesianChartProps {
      */
     gradient?: boolean;
     /**
-     * Draws the line straight through a `null` instead of breaking at it.
+     * What a gap in a series does to the line.
      *
-     * 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.
-     * @default false
+     * - `gap` — it breaks at the `null`. The default, and the only answer that
+     *   claims nothing the data did not: the blank says the reading is missing.
+     * - `connect` — the two sides are joined. Only when the gap is an artefact of
+     *   how the data was collected; otherwise the segment is a number the chart
+     *   made up.
+     * - `zero` — the gap is read as a zero, everywhere: on the axis, in the
+     *   tooltip and in the table as well as under the line. For a missing row
+     *   that genuinely means none.
+     * @default 'gap'
+     */
+    nulls?: PlassChartNulls;
+    /**
+     * Bridges a gap instead of breaking at it.
+     * @deprecated Use `nulls`. `connectNulls` is `nulls="connect"`, and `nulls`
+     * also has the third answer — reading the gap as a zero — which a boolean
+     * cannot express. It is still honoured when `nulls` is not given.
      */
     connectNulls?: boolean;
     /**
@@ -47,6 +60,19 @@ export interface PlLineChartProps extends CartesianChartProps {
      * @default 'none'
      */
     valueLabels?: PlassChartValueLabels;
+    /**
+     * What colour those numbers are written in.
+     *
+     * `series` — the default — gives each label the colour of the line it is
+     * sitting on, so a plot with four labelled series says which number belongs
+     * to which without the reader tracing it back. `ink` writes them all in the
+     * page's own foreground: the chart palette clears 4:1 against the sheet,
+     * which is the floor a *mark* is held to rather than the 4.5:1 body text
+     * wants, so reach for it where the labels have to meet the text contrast rule
+     * on their own.
+     * @default 'series'
+     */
+    valueLabelColor?: PlassChartLabelColor;
     /**
      * Stacks the series, each line riding on the total of the ones below it.
      *
@@ -71,4 +97,4 @@ export interface PlLineChartProps extends CartesianChartProps {
  * from the shared frame, which is what makes a PlLineChart and a PlBarChart on one
  * dashboard read as one drawing rather than two.
  */
-export declare function PlLineChart({ curve, markers, gradient, connectNulls, valueLabels, stacked, ...props }: PlLineChartProps): React.JSX.Element;
+export declare function PlLineChart({ curve, markers, gradient, nulls: nullsProp, connectNulls, valueLabels, valueLabelColor, stacked, series, ...props }: PlLineChartProps): React.JSX.Element;

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

package/dist/components/list/PlList.d.ts

@@ -52,6 +52,15 @@ export interface PlListItemProps extends Omit<React.ComponentPropsWithoutRef<'li
     selected?: boolean;
     /** Unavailable. The light goes out, the same way it does everywhere else. */
     disabled?: boolean;
+    /**
+     * Renders the row's link as something other than an `<a>`: the `Link` a
+     * router brings. Base UI's own escape hatch, as on `PlTextLink`.
+     *
+     * Giving one makes the row a link, as an `href` does, and an `href` on the
+     * element wins over the row's own. A disabled row goes nowhere, so it does
+     * not use it.
+     */
+    render?: useRender.RenderProp;
     /** The label. */
     children?: React.ReactNode;
 }
@@ -73,10 +82,12 @@ export declare const PlList: React.ForwardRefExoticComponent<PlListProps & React
  * One row.
  *
  * The shell is always an `<li>`. What changes is what is inside it: a plain run
- * of content, or — when `onClick` or `href` is given — a real `<button>` or
- * `<a>` wrapping that content, with `action` sitting outside it as a separate
- * control. This is the same shape a `PlChip` uses, for the same two reasons: a
- * `<span>` carrying a click handler is invisible to a keyboard, and a
- * `<button>` inside a `<button>` is markup the browser silently un-nests.
+ * of content, or — when `onClick`, `href` or `render` is given — a real
+ * `<button>` or `<a>` wrapping that content, with `action` sitting outside it
+ * as a separate control. This is the same shape a `PlChip` uses, for the same
+ * two reasons: a `<span>` carrying a click handler is invisible to a keyboard,
+ * and a `<button>` inside a `<button>` is markup the browser silently un-nests.
+ * A disabled row keeps its element: the `<a>` loses its address and the
+ * `<button>` takes `disabled`.
  */
 export declare const PlListItem: React.ForwardRefExoticComponent<PlListItemProps & React.RefAttributes<HTMLLIElement>>;

package/dist/components/list/PlList.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as s,Fragment as l}from"react/jsx-runtime";import*as r from"react";import{useDefaults as t}from"../../internal/defaults.js";import{useRender as a}from"@base-ui/react/use-render";import{focusRingClasses as i,gapClasses as n,glassClasses as o,hasContent as d,iconClasses as c,metaTextClasses as p,paddingXClasses as m,radiusClasses as f,sheetBodyClasses as x,surfaceSlots as u,transitionClasses as h}from"../../internal/styles.js";const g=/* @__PURE__ */r.createContext({size:"md",density:"default",dividers:!1}),v={solid:/* @__PURE__ */[o,"text-(--plass-fg) bg-(--plass-glass-press)","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),glass:/* @__PURE__ */[o,"border text-(--plass-fg) bg-(--plass-glass)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:"text-(--plass-fg) bg-transparent"},y={default:{xs:"py-1",sm:"py-1.5",md:"py-2",lg:"py-2.5",xl:"py-3"},compact:{xs:"py-0.5",sm:"py-0.5",md:"py-1",lg:"py-1.5",xl:"py-2"}},b=m,N={xs:f.xs,sm:f.xs,md:f.sm,lg:f.sm,xl:f.md};export const PlList=/* @__PURE__ */r.forwardRef(function PlList({variant:s="glass",size:l,color:i,density:n,elevation:o=0,dividers:d=!1,render:c,className:p,style:m,children:x,...y},b){const N=t(),j=l??N.size??"md",w=i??N.color??"primary",k=n??N.density??"default",z=r.useMemo(()=>({size:j,density:k,dividers:d}),[j,k,d]),C=["m-0 flex list-none flex-col",f[j],v[s],h,d?"overflow-hidden p-0 [&>li+li]:border-t [&>li+li]:[border-color:var(--plass-divider)]":"p-1",p??""].filter(Boolean).join(" "),P=a({render:c,ref:b,props:{role:"list",className:C,style:{...u(w,o),...m},children:x,...y}});return e(g.Provider,{value:z,children:P})});export const PlListItem=/* @__PURE__ */r.forwardRef(function PlListItem({startIcon:t,endIcon:a,description:o,action:m,href:f,selected:u=!1,disabled:v=!1,className:j,children:w,onClick:k,...z},C){const{size:P,density:B,dividers:I}=r.useContext(g),L=Boolean(k||f)&&!v,$=b[B][P],R=["flex min-w-0 flex-1 items-center text-start",$,y[B][P],n[P],x[P],h,c,I?"":N[P],v?"cursor-not-allowed opacity-50 saturate-[0.35]":u?"bg-(--p-soft-press) font-medium text-(--p-accent)":"",L?`cursor-pointer ${i}`:"",L&&!u?"hover:bg-(--p-soft)":"",L&&u?"hover:bg-(--p-soft-press)":""].filter(Boolean).join(" "),F=s(l,{children:[d(t)?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:t}):null,s("span",{className:"flex min-w-0 flex-1 flex-col",children:[d(w)?e("span",{className:"truncate",children:w}):null,d(o)?e("span",{className:`truncate text-(--plass-muted-fg) ${p[P]}`,children:o}):null]}),d(a)?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:a}):null]});return s("li",{ref:C,className:["flex w-full items-center",j??""].filter(Boolean).join(" "),...z,children:[L&&f?e("a",{href:f,className:R,"aria-current":u?"page":void 0,onClick:k,children:F}):L?e("button",{type:"button",className:R,"aria-current":!!u||void 0,onClick:k,children:F}):e("div",{className:R,"aria-disabled":v||void 0,children:F}),d(m)?e("div",{className:`flex shrink-0 items-center ${$}`,children:m}):null]})});
+"use client";import{jsx as e,jsxs as s,Fragment as l}from"react/jsx-runtime";import*as r from"react";import{useDefaults as t}from"../../internal/defaults.js";import{useRender as a}from"@base-ui/react/use-render";import{focusRingClasses as i,gapClasses as n,glassClasses as o,hasContent as d,iconClasses as c,metaTextClasses as p,paddingXClasses as m,radiusClasses as f,sheetBodyClasses as x,surfaceSlots as u,transitionClasses as h}from"../../internal/styles.js";const v=/* @__PURE__ */r.createContext({size:"md",density:"default",dividers:!1}),g={solid:/* @__PURE__ */[o,"text-(--plass-fg) bg-(--plass-glass-press)","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),glass:/* @__PURE__ */[o,"border text-(--plass-fg) bg-(--plass-glass)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:"text-(--plass-fg) bg-transparent"},y={default:{xs:"py-1",sm:"py-1.5",md:"py-2",lg:"py-2.5",xl:"py-3"},compact:{xs:"py-0.5",sm:"py-0.5",md:"py-1",lg:"py-1.5",xl:"py-2"}},b=m,N={xs:f.xs,sm:f.xs,md:f.sm,lg:f.sm,xl:f.md};export const PlList=/* @__PURE__ */r.forwardRef(function PlList({variant:s="glass",size:l,color:i,density:n,elevation:o=0,dividers:d=!1,render:c,className:p,style:m,children:x,...y},b){const N=t(),j=l??N.size??"md",w=i??N.color??"primary",k=n??N.density??"default",z=r.useMemo(()=>({size:j,density:k,dividers:d}),[j,k,d]),B=["m-0 flex list-none flex-col",f[j],g[s],h,d?"overflow-hidden p-0 [&>li+li]:border-t [&>li+li]:[border-color:var(--plass-divider)]":"p-1",p??""].filter(Boolean).join(" "),C=a({render:c,ref:b,props:{role:"list",className:B,style:{...u(w,o),...m},children:x,...y}});return e(v.Provider,{value:z,children:C})});export const PlListItem=/* @__PURE__ */r.forwardRef(function PlListItem({startIcon:t,endIcon:o,description:m,action:f,href:u,selected:g=!1,disabled:j=!1,render:w,className:k,children:z,onClick:B,...C},P){const{size:I,density:L,dividers:$}=r.useContext(v),R=Boolean(u||w),F=(R||Boolean(B))&&!j,M=b[L][I],q=["flex min-w-0 flex-1 items-center text-start",M,y[L][I],n[I],x[I],h,c,$?"":N[I],j?"cursor-not-allowed opacity-50 saturate-[0.35]":g?"bg-(--p-soft-press) font-medium text-(--p-accent)":"",F?`cursor-pointer ${i}`:"",F&&!g?"hover:bg-(--p-soft)":"",F&&g?"hover:bg-(--p-soft-press)":""].filter(Boolean).join(" "),A=s(l,{children:[d(t)?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:t}):null,s("span",{className:"flex min-w-0 flex-1 flex-col",children:[d(z)?e("span",{className:"truncate",children:z}):null,d(m)?e("span",{className:`truncate text-(--plass-muted-fg) ${p[I]}`,children:m}):null]}),d(o)?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:o}):null]}),D=a({render:j?e("a",{}):w??e("a",{}),enabled:R,props:{href:j?void 0:u,role:j?"link":void 0,"aria-disabled":j||void 0,className:q,"aria-current":g&&!j?"page":void 0,onClick:j?void 0:B,children:A}});return s("li",{ref:P,className:["flex w-full items-center",k??""].filter(Boolean).join(" "),...C,children:[D||(B?e("button",{type:"button",className:q,disabled:j,"aria-current":!(!g||j)||void 0,onClick:B,children:A}):e("div",{className:q,"aria-disabled":j||void 0,children:A})),d(f)?e("div",{className:`flex shrink-0 items-center ${M}`,children:f}):null]})});

package/dist/components/menu/PlMenu.d.ts

@@ -1,4 +1,6 @@
 import * as React from 'react';
+import { Menu as BaseUIMenu } from '@base-ui/react/menu';
+import type { useRender } from '@base-ui/react/use-render';
 import type { PlassAlign, PlassColor, PlassSide, PlassStyleProps } from '../../types.js';
 /**
  * A menu takes `size`, `color` and `density` and stops there.
@@ -73,6 +75,16 @@ export interface PlMenuItemProps {
     target?: string;
     /** The link's `rel`. Ignored without `href`. */
     rel?: string;
+    /**
+     * Renders the row's link as something other than an `<a>`: the `Link` a
+     * router brings. Base UI's own escape hatch, handed to its link row.
+     *
+     * Giving one makes the row a link, as an `href` does, and an `href` on the
+     * element wins over the row's own. The row's role, its highlight and the
+     * arrow keys stay Base UI's. A disabled row is not a link, so it does not use
+     * it.
+     */
+    render?: useRender.RenderProp<BaseUIMenu.LinkItem.State>;
     /** Content before the label — an icon, a swatch, a check. */
     startIcon?: React.ReactNode;
     /** Content after the label, before any `shortcut`. */
@@ -124,7 +136,7 @@ export interface PlMenuGroupProps {
     className?: string;
     style?: React.CSSProperties;
 }
-export interface PlMenuCheckboxItemProps extends Omit<PlMenuItemProps, 'href' | 'target' | 'rel' | 'startIcon' | 'onClick'> {
+export interface PlMenuCheckboxItemProps extends Omit<PlMenuItemProps, 'href' | 'target' | 'rel' | 'render' | 'startIcon' | 'onClick'> {
     checked?: boolean;
     defaultChecked?: boolean;
     onCheckedChange?: (checked: boolean) => void;
@@ -145,7 +157,7 @@ export interface PlMenuRadioGroupProps {
     className?: string;
     style?: React.CSSProperties;
 }
-export interface PlMenuRadioItemProps extends Omit<PlMenuItemProps, 'href' | 'target' | 'rel' | 'startIcon' | 'onClick'> {
+export interface PlMenuRadioItemProps extends Omit<PlMenuItemProps, 'href' | 'target' | 'rel' | 'render' | 'startIcon' | 'onClick'> {
     /** What this row sets the group to. */
     value: string | number;
     /** @default false */
@@ -155,12 +167,12 @@ export type PlMenuSeparatorProps = React.ComponentPropsWithoutRef<'div'>;
 /**
  * One row of a menu.
  *
- * Renders a real `<a>` when it is given an `href` and Base UI's own item
- * otherwise — the same split `PlListItem` makes, for the same reason. A menu of
- * links that are not links cannot be opened in a new tab, cannot be copied, and
- * tells a screen reader the wrong thing about every one of them.
+ * Renders a real `<a>` when it is given an `href` or a `render` and Base UI's
+ * own item otherwise — the same split `PlListItem` makes, for the same reason.
+ * A menu of links that are not links cannot be opened in a new tab, cannot be
+ * copied, and tells a screen reader the wrong thing about every one of them.
  */
-export declare function PlMenuItem({ onClick, href, target, rel, startIcon, endIcon, shortcut, description, color, closeOnClick, disabled, label, children, className, style }: PlMenuItemProps): React.JSX.Element;
+export declare function PlMenuItem({ onClick, href, target, rel, render, startIcon, endIcon, shortcut, description, color, closeOnClick, disabled, label, children, className, style }: PlMenuItemProps): React.JSX.Element;
 /** A row that ticks. The tick lands in the same slot a `startIcon` would. */
 export declare function PlMenuCheckboxItem({ checked, defaultChecked, onCheckedChange, endIcon, shortcut, description, color, closeOnClick, disabled, label, children, className, style }: PlMenuCheckboxItemProps): React.JSX.Element;
 /** One choice out of a set. Wraps the rows that make up the set. */

package/dist/components/menu/PlMenu.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as s,Fragment as l}from"react/jsx-runtime";import*as n from"react";import{useDefaults as t}from"../../internal/defaults.js";import{Menu as a}from"@base-ui/react/menu";import{ContextMenu as o}from"@base-ui/react/context-menu";import{safeRel as r}from"../../internal/link.js";import{MenuContext as i}from"../../internal/menu.js";import{CheckIcon as c,ChevronIcon as d,DotIcon as p}from"../../internal/icons.js";import{controlTextLeadingClasses as u,cx as m,forcedHighlightedClasses as h,gapClasses as f,glassClasses as x,hasContent as y,iconClasses as g,metaTextClasses as b,radiusClasses as C,surfaceSlots as N,transitionClasses as v}from"../../internal/styles.js";const k=/* @__PURE__ */[x,"max-h-[min(24rem,var(--available-height))] min-w-40 overflow-y-auto overscroll-contain","border bg-(--plass-glass-press) p-1","[border-color:var(--plass-glass-line)]","[box-shadow:var(--plass-shadow-3),var(--plass-gloss-glass)]","[outline:none]","[transition:opacity_var(--plass-duration)_var(--plass-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),w={default:{xs:"px-1.5 py-0.5",sm:"px-2 py-1",md:"px-2.5 py-1.5",lg:"px-3 py-2",xl:"px-3.5 py-2.5"},compact:{xs:"px-1 py-0.5",sm:"px-1.5 py-0.5",md:"px-2 py-1",lg:"px-2.5 py-1",xl:"px-3 py-1.5"}},z={xs:C.xs,sm:C.xs,md:C.sm,lg:C.sm,xl:C.md};function rowClasses(e,s,l,n){return m("relative flex w-full cursor-pointer items-center select-none",l?"text-(--p-accent)":"text-(--plass-fg)",w[s][e],z[e],f[e],u[e],v,g,"data-[highlighted]:bg-(--p-soft-hover)",h,"data-[popup-open]:bg-(--p-soft)","data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50","[outline:none]",n)}const O="flex h-[1lh] w-[1.2em] shrink-0 items-center justify-center";function shortcutClasses(e){return m("ms-2 shrink-0 text-(--plass-muted-fg) tabular-nums",b[e])}function RowBody({children:l,description:n,size:t}){return y(n)?s("span",{className:"flex min-w-0 flex-1 flex-col text-start",children:[e("span",{className:"truncate",children:l}),e("span",{className:m("truncate text-(--plass-muted-fg)",b[t]),children:n})]}):e("span",{className:"min-w-0 flex-1 truncate text-start",children:l})}export function PlMenuItem({onClick:t,href:o,target:c,rel:d,startIcon:p,endIcon:u,shortcut:h,description:f,color:x,closeOnClick:g=!0,disabled:b=!1,label:C,children:v,className:k,style:w}){const{size:z,density:P}=n.useContext(i),I=s(l,{children:[y(p)?e("span",{className:m(O,"text-(--plass-muted-fg)"),children:p}):null,e(RowBody,{description:f,size:z,children:v}),y(u)?e("span",{className:m(O,"text-(--plass-muted-fg)"),children:u}):null,y(h)?e("span",{className:shortcutClasses(z),children:h}):null]}),M=x?N(x,0):void 0,j=M||w?{...M,...w}:void 0;return void 0===o||b?e(a.Item,{disabled:b,label:C,closeOnClick:g,onClick:t,className:rowClasses(z,P,Boolean(x),k),style:j,children:I}):e(a.LinkItem,{href:o,target:c,rel:r(c,d),label:C,closeOnClick:g,onClick:t,className:rowClasses(z,P,Boolean(x),k),style:j,children:I})}export function PlMenuCheckboxItem({checked:l,defaultChecked:t,onCheckedChange:o,endIcon:r,shortcut:d,description:p,color:u,closeOnClick:h=!1,disabled:f=!1,label:x,children:g,className:b,style:C}){const{size:v,density:k}=n.useContext(i),w=u?N(u,0):void 0;return s(a.CheckboxItem,{checked:l,defaultChecked:t,onCheckedChange:e=>o?.(e),disabled:f,label:x,closeOnClick:h,className:rowClasses(v,k,Boolean(u),b),style:w||C?{...w,...C}:void 0,children:[e("span",{className:m(O,"text-(--p-accent)"),children:e(a.CheckboxItemIndicator,{className:"flex items-center justify-center",children:e(c,{})})}),e(RowBody,{description:p,size:v,children:g}),y(r)?e("span",{className:m(O,"text-(--plass-muted-fg)"),children:r}):null,y(d)?e("span",{className:shortcutClasses(v),children:d}):null]})}export function PlMenuRadioGroup({value:s,defaultValue:l,onValueChange:n,disabled:t=!1,children:o,className:r,style:i}){return e(a.RadioGroup,{value:s,defaultValue:l,onValueChange:e=>n?.(e),disabled:t,className:r,style:i,children:o})}export function PlMenuRadioItem({value:l,endIcon:t,shortcut:o,description:r,color:c,closeOnClick:d=!1,disabled:u=!1,label:h,children:f,className:x,style:g}){const{size:b,density:C}=n.useContext(i),v=c?N(c,0):void 0;return s(a.RadioItem,{value:l,disabled:u,label:h,closeOnClick:d,className:rowClasses(b,C,Boolean(c),x),style:v||g?{...v,...g}:void 0,children:[e("span",{className:m(O,"text-(--p-accent)"),children:e(a.RadioItemIndicator,{className:"flex items-center justify-center",children:e(p,{})})}),e(RowBody,{description:r,size:b,children:f}),y(t)?e("span",{className:m(O,"text-(--plass-muted-fg)"),children:t}):null,y(o)?e("span",{className:shortcutClasses(b),children:o}):null]})}export function PlMenuGroup({label:l,children:t,className:o,style:r}){const{size:c,density:d}=n.useContext(i);return s(a.Group,{className:o,style:r,children:[y(l)?e(a.GroupLabel,{className:m(w[d][c],b[c],"font-semibold tracking-wide text-(--plass-muted-fg) uppercase"),children:l}):null,t]})}export function PlMenuSeparator({className:s,...l}){return e(a.Separator,{className:m("-mx-1 my-1 h-px bg-(--plass-divider)",s),...l})}export function PlMenuSubmenu({label:l,startIcon:t,disabled:o=!1,side:r,sideOffset:c=4,children:p,className:h,style:f}){const{size:x,density:g,color:b}=n.useContext(i);return s(a.SubmenuRoot,{children:[s(a.SubmenuTrigger,{disabled:o,className:rowClasses(x,g,!1),children:[y(t)?e("span",{className:m(O,"text-(--plass-muted-fg)"),children:t}):null,e("span",{className:"min-w-0 flex-1 truncate text-start",children:l}),e("span",{className:m(O,"text-(--plass-muted-fg) -rotate-90 rtl:rotate-90"),children:e(d,{})})]}),e(a.Portal,{children:e(a.Positioner,{className:"plass-portal z-(--plass-z-portal) [outline:none]",side:r??"inline-end",sideOffset:c,align:"start",children:e(a.Popup,{className:m(k,C[x],u[x],h),style:{...N(b,3),...f},children:p})})})]})}export function PlMenu({size:l,color:o,density:r,trigger:c,open:d,defaultOpen:p,onOpenChange:h,side:f="bottom",align:x="start",sideOffset:y=6,modal:g=!0,openOnHover:b=!1,loopFocus:v=!0,disabled:w=!1,className:z,style:O,children:P}){const I=t(),M=l??I.size??"md",j=o??I.color??"primary",R=r??I.density??"default",B=n.useMemo(()=>({size:M,color:j,density:R}),[M,j,R]);return e(i.Provider,{value:B,children:s(a.Root,{open:d,defaultOpen:p,onOpenChange:e=>h?.(e),modal:g,loopFocus:v,disabled:w,children:[c?e(a.Trigger,{render:c,openOnHover:b,disabled:w}):null,e(a.Portal,{children:e(a.Positioner,{className:"plass-portal z-(--plass-z-portal) [outline:none]",side:f,align:x,sideOffset:y,children:e(a.Popup,{className:m(k,C[M],u[M],z),style:{...N(j,3),...O},children:P})})})]})})}export function PlContextMenu({size:l,color:a,density:r,content:c,children:d,open:p,defaultOpen:h,onOpenChange:f,loopFocus:x=!0,disabled:y=!1,className:g,style:b}){const v=t(),w=l??v.size??"md",z=a??v.color??"primary",O=r??v.density??"default",P=n.useMemo(()=>({size:w,color:z,density:O}),[w,z,O]);return e(i.Provider,{value:P,children:s(o.Root,{open:p,defaultOpen:h,onOpenChange:e=>f?.(e),loopFocus:x,disabled:y,children:[e(o.Trigger,{children:d}),e(o.Portal,{children:e(o.Positioner,{className:"plass-portal z-(--plass-z-portal) [outline:none]",children:e(o.Popup,{className:m(k,C[w],u[w],g),style:{...N(z,3),...b},children:c})})})]})})}
+"use client";import{jsx as e,jsxs as s,Fragment as l}from"react/jsx-runtime";import*as n from"react";import{useDefaults as t}from"../../internal/defaults.js";import{Menu as a}from"@base-ui/react/menu";import{ContextMenu as o}from"@base-ui/react/context-menu";import{safeRel as r}from"../../internal/link.js";import{MenuContext as i}from"../../internal/menu.js";import{CheckIcon as c,ChevronIcon as d,DotIcon as p}from"../../internal/icons.js";import{controlTextLeadingClasses as u,cx as m,forcedHighlightedClasses as h,gapClasses as f,glassClasses as x,hasContent as y,iconClasses as g,metaTextClasses as b,radiusClasses as C,surfaceSlots as N,transitionClasses as v}from"../../internal/styles.js";const k=/* @__PURE__ */[x,"max-h-[min(24rem,var(--available-height))] min-w-40 overflow-y-auto overscroll-contain","border bg-(--plass-glass-press) p-1","[border-color:var(--plass-glass-line)]","[box-shadow:var(--plass-shadow-3),var(--plass-gloss-glass)]","[outline:none]","[transition:opacity_var(--plass-duration)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),w={default:{xs:"px-1.5 py-0.5",sm:"px-2 py-1",md:"px-2.5 py-1.5",lg:"px-3 py-2",xl:"px-3.5 py-2.5"},compact:{xs:"px-1 py-0.5",sm:"px-1.5 py-0.5",md:"px-2 py-1",lg:"px-2.5 py-1",xl:"px-3 py-1.5"}},z={xs:C.xs,sm:C.xs,md:C.sm,lg:C.sm,xl:C.md};function rowClasses(e,s,l,n){return m("relative flex w-full cursor-pointer items-center select-none",l?"text-(--p-accent)":"text-(--plass-fg)",w[s][e],z[e],f[e],u[e],v,g,"data-[highlighted]:bg-(--p-soft-hover)",h,"data-[popup-open]:bg-(--p-soft)","data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50","[outline:none]",n)}const O="flex h-[1lh] w-[1.2em] shrink-0 items-center justify-center";function shortcutClasses(e){return m("ms-2 shrink-0 text-(--plass-muted-fg) tabular-nums",b[e])}function RowBody({children:l,description:n,size:t}){return y(n)?s("span",{className:"flex min-w-0 flex-1 flex-col text-start",children:[e("span",{className:"truncate",children:l}),e("span",{className:m("truncate text-(--plass-muted-fg)",b[t]),children:n})]}):e("span",{className:"min-w-0 flex-1 truncate text-start",children:l})}export function PlMenuItem({onClick:t,href:o,target:c,rel:d,render:p,startIcon:u,endIcon:h,shortcut:f,description:x,color:g,closeOnClick:b=!0,disabled:C=!1,label:v,children:k,className:w,style:z}){const{size:P,density:I}=n.useContext(i),M=s(l,{children:[y(u)?e("span",{className:m(O,"text-(--plass-muted-fg)"),children:u}):null,e(RowBody,{description:x,size:P,children:k}),y(h)?e("span",{className:m(O,"text-(--plass-muted-fg)"),children:h}):null,y(f)?e("span",{className:shortcutClasses(P),children:f}):null]}),j=g?N(g,0):void 0,R=j||z?{...j,...z}:void 0;return void 0===o&&void 0===p||C?e(a.Item,{disabled:C,label:v,closeOnClick:b,onClick:t,className:rowClasses(P,I,Boolean(g),w),style:R,children:M}):e(a.LinkItem,{render:p,href:o,target:c,rel:r(c,d),label:v,closeOnClick:b,onClick:t,className:rowClasses(P,I,Boolean(g),w),style:R,children:M})}export function PlMenuCheckboxItem({checked:l,defaultChecked:t,onCheckedChange:o,endIcon:r,shortcut:d,description:p,color:u,closeOnClick:h=!1,disabled:f=!1,label:x,children:g,className:b,style:C}){const{size:v,density:k}=n.useContext(i),w=u?N(u,0):void 0;return s(a.CheckboxItem,{checked:l,defaultChecked:t,onCheckedChange:e=>o?.(e),disabled:f,label:x,closeOnClick:h,className:rowClasses(v,k,Boolean(u),b),style:w||C?{...w,...C}:void 0,children:[e("span",{className:m(O,"text-(--p-accent)"),children:e(a.CheckboxItemIndicator,{className:"flex items-center justify-center",children:e(c,{})})}),e(RowBody,{description:p,size:v,children:g}),y(r)?e("span",{className:m(O,"text-(--plass-muted-fg)"),children:r}):null,y(d)?e("span",{className:shortcutClasses(v),children:d}):null]})}export function PlMenuRadioGroup({value:s,defaultValue:l,onValueChange:n,disabled:t=!1,children:o,className:r,style:i}){return e(a.RadioGroup,{value:s,defaultValue:l,onValueChange:e=>n?.(e),disabled:t,className:r,style:i,children:o})}export function PlMenuRadioItem({value:l,endIcon:t,shortcut:o,description:r,color:c,closeOnClick:d=!1,disabled:u=!1,label:h,children:f,className:x,style:g}){const{size:b,density:C}=n.useContext(i),v=c?N(c,0):void 0;return s(a.RadioItem,{value:l,disabled:u,label:h,closeOnClick:d,className:rowClasses(b,C,Boolean(c),x),style:v||g?{...v,...g}:void 0,children:[e("span",{className:m(O,"text-(--p-accent)"),children:e(a.RadioItemIndicator,{className:"flex items-center justify-center",children:e(p,{})})}),e(RowBody,{description:r,size:b,children:f}),y(t)?e("span",{className:m(O,"text-(--plass-muted-fg)"),children:t}):null,y(o)?e("span",{className:shortcutClasses(b),children:o}):null]})}export function PlMenuGroup({label:l,children:t,className:o,style:r}){const{size:c,density:d}=n.useContext(i);return s(a.Group,{className:o,style:r,children:[y(l)?e(a.GroupLabel,{className:m(w[d][c],b[c],"font-semibold tracking-wide text-(--plass-muted-fg) uppercase"),children:l}):null,t]})}export function PlMenuSeparator({className:s,...l}){return e(a.Separator,{className:m("-mx-1 my-1 h-px bg-(--plass-divider)",s),...l})}export function PlMenuSubmenu({label:l,startIcon:t,disabled:o=!1,side:r,sideOffset:c=4,children:p,className:h,style:f}){const{size:x,density:g,color:b}=n.useContext(i);return s(a.SubmenuRoot,{children:[s(a.SubmenuTrigger,{disabled:o,className:rowClasses(x,g,!1),children:[y(t)?e("span",{className:m(O,"text-(--plass-muted-fg)"),children:t}):null,e("span",{className:"min-w-0 flex-1 truncate text-start",children:l}),e("span",{className:m(O,"text-(--plass-muted-fg) -rotate-90 rtl:rotate-90"),children:e(d,{})})]}),e(a.Portal,{children:e(a.Positioner,{className:"plass-portal z-(--plass-z-portal) [outline:none]",side:r??"inline-end",sideOffset:c,align:"start",children:e(a.Popup,{className:m(k,C[x],u[x],h),style:{...N(b,3),...f},children:p})})})]})}export function PlMenu({size:l,color:o,density:r,trigger:c,open:d,defaultOpen:p,onOpenChange:h,side:f="bottom",align:x="start",sideOffset:y=6,modal:g=!0,openOnHover:b=!1,loopFocus:v=!0,disabled:w=!1,className:z,style:O,children:P}){const I=t(),M=l??I.size??"md",j=o??I.color??"primary",R=r??I.density??"default",B=n.useMemo(()=>({size:M,color:j,density:R}),[M,j,R]);return e(i.Provider,{value:B,children:s(a.Root,{open:d,defaultOpen:p,onOpenChange:e=>h?.(e),modal:g,loopFocus:v,disabled:w,children:[c?e(a.Trigger,{render:c,openOnHover:b,disabled:w}):null,e(a.Portal,{children:e(a.Positioner,{className:"plass-portal z-(--plass-z-portal) [outline:none]",side:f,align:x,sideOffset:y,children:e(a.Popup,{className:m(k,C[M],u[M],z),style:{...N(j,3),...O},children:P})})})]})})}export function PlContextMenu({size:l,color:a,density:r,content:c,children:d,open:p,defaultOpen:h,onOpenChange:f,loopFocus:x=!0,disabled:y=!1,className:g,style:b}){const v=t(),w=l??v.size??"md",z=a??v.color??"primary",O=r??v.density??"default",P=n.useMemo(()=>({size:w,color:z,density:O}),[w,z,O]);return e(i.Provider,{value:P,children:s(o.Root,{open:p,defaultOpen:h,onOpenChange:e=>f?.(e),loopFocus:x,disabled:y,children:[e(o.Trigger,{children:d}),e(o.Portal,{children:e(o.Positioner,{className:"plass-portal z-(--plass-z-portal) [outline:none]",children:e(o.Popup,{className:m(k,C[w],u[w],g),style:{...N(z,3),...b},children:c})})})]})})}

package/dist/components/menubar/PlMenubar.js

@@ -1 +1 @@
-"use client";import{jsxs as e,jsx as t}from"react/jsx-runtime";import*as s from"react";import{useDefaults as o}from"../../internal/defaults.js";import{Menubar as r}from"@base-ui/react/menubar";import{PlMenu as n}from"../menu/PlMenu.js";import{MenuContext as a}from"../../internal/menu.js";import{controlTextClasses as i,cx as l,gapClasses as c,hasContent as p,iconClasses as d,paddingXClasses as u,radiusClasses as m,transitionClasses as f}from"../../internal/styles.js";const b={xs:"h-4.5",sm:"h-5.5",md:"h-6.5",lg:"h-8",xl:"h-10"},h=/* @__PURE__ */["inline-flex shrink-0 cursor-pointer select-none items-center justify-center","whitespace-nowrap font-medium leading-none","text-(--plass-fg) bg-transparent","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",f,d,"hover:bg-(--p-soft)","data-[popup-open]:bg-(--p-soft-hover) data-[popup-open]:text-(--p-accent)","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:[outline-offset:-2px]","disabled:cursor-not-allowed disabled:opacity-50 disabled:saturate-[0.35]","disabled:hover:bg-transparent"].join(" ");export function PlMenubarMenu({label:o,startIcon:r,disabled:d=!1,children:f,className:v,style:x}){const{size:g,color:y,density:j}=s.useContext(a);return t(n,{size:g,color:y,density:j,disabled:d,openOnHover:!0,sideOffset:4,trigger:e("button",{type:"button",disabled:d,className:l(h,b[g],i[g],c[g],u["default"===j?"compact":j][g],m[g],v),style:x,children:[p(r)?r:null,o]}),children:f})}export const PlMenubar=/* @__PURE__ */s.forwardRef(function PlMenubar({size:e,color:n,density:i,orientation:p="horizontal",modal:d=!0,loopFocus:u=!0,disabled:m=!1,className:f,style:b,children:h,...v},x){const g=o(),y=e??g.size??"md",j=n??g.color??"primary",M=i??g.density??"default",w=s.useMemo(()=>({size:y,color:j,density:M}),[y,j,M]);return t(a.Provider,{value:w,children:t(r,{ref:x,orientation:p,modal:d,loopFocus:u,disabled:m,className:l("flex items-center","vertical"===p?"flex-col items-stretch":"flex-row",c[y],f),style:{"--p-soft":`var(--plass-${j}-soft)`,"--p-soft-hover":`var(--plass-${j}-soft-hover)`,"--p-accent":`var(--plass-${j}-accent)`,"--p-ring":`var(--plass-${j}-ring)`,...b},...v,children:h})})});
+"use client";import{jsxs as e,jsx as t}from"react/jsx-runtime";import*as s from"react";import{useDefaults as o}from"../../internal/defaults.js";import{Menubar as r}from"@base-ui/react/menubar";import{PlMenu as n}from"../menu/PlMenu.js";import{MenuContext as a}from"../../internal/menu.js";import{controlTextClasses as i,cx as l,gapClasses as c,hasContent as p,iconClasses as d,paddingXClasses as u,radiusClasses as m,transitionClasses as f}from"../../internal/styles.js";const b={xs:"h-4.5",sm:"h-5.5",md:"h-6.5",lg:"h-8",xl:"h-10"},h=/* @__PURE__ */["inline-flex shrink-0 cursor-pointer select-none items-center justify-center p-0","whitespace-nowrap font-medium leading-none","text-(--plass-fg) bg-transparent","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",f,d,"hover:bg-(--p-soft)","data-[popup-open]:bg-(--p-soft-hover) data-[popup-open]:text-(--p-accent)","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:[outline-offset:-2px]","disabled:cursor-not-allowed disabled:opacity-50 disabled:saturate-[0.35]","disabled:hover:bg-transparent"].join(" ");export function PlMenubarMenu({label:o,startIcon:r,disabled:d=!1,children:f,className:v,style:x}){const{size:g,color:y,density:j}=s.useContext(a);return t(n,{size:g,color:y,density:j,disabled:d,openOnHover:!0,sideOffset:4,trigger:e("button",{type:"button",disabled:d,className:l(h,b[g],i[g],c[g],u["default"===j?"compact":j][g],m[g],v),style:x,children:[p(r)?r:null,o]}),children:f})}export const PlMenubar=/* @__PURE__ */s.forwardRef(function PlMenubar({size:e,color:n,density:i,orientation:p="horizontal",modal:d=!0,loopFocus:u=!0,disabled:m=!1,className:f,style:b,children:h,...v},x){const g=o(),y=e??g.size??"md",j=n??g.color??"primary",M=i??g.density??"default",w=s.useMemo(()=>({size:y,color:j,density:M}),[y,j,M]);return t(a.Provider,{value:w,children:t(r,{ref:x,orientation:p,modal:d,loopFocus:u,disabled:m,className:l("flex items-center","vertical"===p?"flex-col items-stretch":"flex-row",c[y],f),style:{"--p-soft":`var(--plass-${j}-soft)`,"--p-soft-hover":`var(--plass-${j}-soft-hover)`,"--p-accent":`var(--plass-${j}-accent)`,"--p-ring":`var(--plass-${j}-ring)`,...b},...v,children:h})})});

package/dist/components/meter/PlMeter.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as r from"react";import{Meter as s}from"@base-ui/react/meter";import{useDefaults as a}from"../../internal/defaults.js";import{barThicknessClasses as t,fillClasses as o,fillTransitionClasses as m,progressSlots as n,trackClasses as i}from"../../internal/progress.js";import{cx as c,metaTextClasses as f,stackGapClasses as u}from"../../internal/styles.js";import{bandColor as d}from"../../internal/threshold.js";export const PlMeter=/* @__PURE__ */r.forwardRef(function PlMeter({value:r,min:p=0,max:h=100,label:x,showValue:j=!1,format:w,thresholds:N,size:b,color:y,className:v,style:g,...k},z){const M=a(),P=b??M.size??"md",R=y??M.color??"primary";return l(s.Root,{ref:z,value:r,min:p,max:h,format:w,locale:M.locale,className:c("flex w-full flex-col",u[P],v),style:{...n(d(r,R,N)),...g},...k,children:[x||j?l("div",{className:c("flex items-baseline gap-2",x?"justify-between":"justify-end",f[P]),children:[x?e(s.Label,{className:"min-w-0 truncate text-(--plass-fg)",children:x}):null,j?e(s.Value,{className:"shrink-0 tabular-nums text-(--plass-muted-fg)"}):null]}):null,e(s.Track,{className:c("relative w-full overflow-hidden rounded-full",i,t[P]),children:e(s.Indicator,{className:c("rounded-full",o,m)})})]})});
+"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as r from"react";import{Meter as a}from"@base-ui/react/meter";import{useDefaults as s,useLocale as t}from"../../internal/defaults.js";import{controlNaming as o}from"../../internal/form.js";import{barThicknessClasses as i,fillClasses as m,fillTransitionClasses as n,progressSlots as f,trackClasses as c}from"../../internal/progress.js";import{cx as u,metaTextClasses as d,stackGapClasses as p}from"../../internal/styles.js";import{bandColor as h}from"../../internal/threshold.js";export const PlMeter=/* @__PURE__ */r.forwardRef(function PlMeter({value:r,min:x=0,max:j=100,label:b,showValue:w=!1,format:y,thresholds:N,size:v,color:g,className:k,style:z,"aria-label":M,"aria-labelledby":P,...R},V){const I=s(),L=t(),T=v??I.size??"md",q=g??I.color??"primary";return l(a.Root,{ref:V,value:r,min:x,max:j,format:y,locale:L,className:u("flex w-full flex-col",p[T],k),style:{...f(h(r,q,N)),...z},...o(M,P),...R,children:[b||w?l("div",{className:u("flex items-baseline gap-2",b?"justify-between":"justify-end",d[T]),children:[b?e(a.Label,{className:"min-w-0 truncate text-(--plass-fg)",children:b}):null,w?e(a.Value,{className:"shrink-0 tabular-nums text-(--plass-muted-fg)"}):null]}):null,e(a.Track,{className:u("relative w-full overflow-hidden rounded-full",c,i[T]),children:e(a.Indicator,{className:u("rounded-full",m,n)})})]})});

package/dist/components/mockup/PlMockup.d.ts

@@ -99,6 +99,12 @@ export interface PlMockupProps extends Omit<React.ComponentPropsWithoutRef<'div'
      * any CSS length. The device is laid out at its own resolution and then scaled
      * to whatever this comes to, so the content inside is genuinely a screen's
      * worth rather than a page's worth shrunk.
+     *
+     * A number, with `height` left out or a number too, is a size known on the
+     * server, and the device is drawn at that scale in the first HTML. With any
+     * other length the stylesheet works the scale out from the box until the
+     * browser has measured it, so a server-rendered page has the device in its
+     * first HTML either way.
      * @default '100%'
      */
     width?: number | string;

package/dist/components/mockup/PlMockup.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t,Fragment as i}from"react/jsx-runtime";import*as r from"react";import{useRender as a}from"@base-ui/react/use-render";import{PlMockupCutout as s,defaultNotch as l,elevationFilters as o,finishSlots as h,mockupChrome as d,mockupMetrics as n,resolveOs as c,shellClasses as u}from"../../internal/mockup.js";import{cx as p,surfaceSlots as m}from"../../internal/styles.js";import{usePlElementSize as f}from"../../hooks/usePlElementSize.js";import{useDefaults as g}from"../../internal/defaults.js";export const PlMockup=/* @__PURE__ */r.forwardRef(function PlMockup(v,w){const{device:b,os:x,hardware:y="monitor",size:k,resolution:N,orientation:z="portrait",bezel:R="standard",finish:$="graphite",notch:j,systemUi:M=!0,scroll:P=!1,wallpaper:H,time:W="9:41",width:S,height:B,color:C,elevation:E=0,render:F,className:I,style:T,children:U,...q}=v,A=g(),D=k??A.size??"md",G=C??A.color??"primary",J=c(b,x),K=j??l(b,J),L="desktop"!==b&&"landscape"===z,O=n({device:b,size:D,resolution:N,orientation:z,bezel:R,hardware:y}),{screen:Q,frame:V,body:X,stand:Y,base:Z}=O,_=r.useRef(null),ee=f(_),te=null===ee||ee.width<=0||ee.height<=0?null:Math.min(ee.width/V.width,ee.height/V.height),ie=r.useCallback(e=>{_.current=e,"function"==typeof w?w(e):w&&(w.current=e)},[w]),re=M?d({os:J,notch:K,landscape:L,time:W}):{},ae="none"===R,se=t("div",{className:"plass-mockup-screen relative flex flex-col overflow-hidden",style:{width:Q.width,height:Q.height,borderRadius:O.screenRadius,background:H??"var(--plass-surface)",boxShadow:ae?void 0:"inset 0 0 0 1px var(--p-shell-shade)"},children:[re.top?.node,t("div",{className:"flex min-h-0 flex-1",children:[re.start?.node,e("div",{className:"min-w-0 flex-1 "+(P?"overflow-auto":"overflow-hidden"),style:{containerType:"size",containerName:"plass-screen"},children:U})]}),re.bottom?.node,e(s,{notch:K,screen:Q,landscape:L})]}),le=p("plass-mockup relative block",I??"");return a({render:F,ref:ie,props:{className:le,style:{...m(G,E),...h[$],width:S??(void 0===B?"100%":"auto"),height:B??"auto",aspectRatio:`${V.width} / ${V.height}`,filter:o[E],...T},children:e("div",{className:"absolute inset-0 flex items-center justify-center",style:{visibility:null===te?"hidden":void 0},children:t("div",{className:"flex shrink-0 flex-col items-center",style:{width:V.width,height:V.height,transform:`scale(${te??1})`},children:[e("div",{className:ae?"":u,style:{width:X.width,height:X.height,borderRadius:O.frameRadius,paddingBlock:`${O.bezel.top}px ${O.bezel.bottom}px`,paddingInline:O.bezel.x},children:se}),Y?t(i,{children:[e("div",{"aria-hidden":"true",style:{width:Y.neckWidth,height:Y.neckHeight,background:"var(--p-shell-shade)",clipPath:"polygon(16% 0, 84% 0, 100% 100%, 0 100%)"}}),e("div",{"aria-hidden":"true",className:u,style:{width:Y.footWidth,height:Y.footHeight,borderRadius:Y.footHeight/2}})]}):null,Z?e("div",{"aria-hidden":"true",className:`relative ${u}`,style:{width:Z.width,height:Z.height,borderRadius:`0 0 ${Math.round(.55*Z.height)}px ${Math.round(.55*Z.height)}px`,clipPath:"polygon(0 0, 100% 0, 98.5% 100%, 1.5% 100%)"},children:e("div",{className:"absolute inset-x-0 top-0 mx-auto",style:{width:Z.lipWidth,height:Math.round(.34*Z.height),borderRadius:`0 0 ${Math.round(.2*Z.height)}px ${Math.round(.2*Z.height)}px`,background:"var(--p-shell-shade)"}})}):null]})}),...q}})});
+"use client";import{jsx as e,jsxs as t,Fragment as i}from"react/jsx-runtime";import*as a from"react";import{useRender as r}from"@base-ui/react/use-render";import{PlMockupCutout as h,defaultNotch as s,elevationFilters as l,finishSlots as o,mockupChrome as n,mockupMetrics as d,resolveOs as c,shellClasses as p}from"../../internal/mockup.js";import{cx as m,surfaceSlots as u}from"../../internal/styles.js";import{usePlElementSize as f}from"../../hooks/usePlElementSize.js";import{useDefaults as g}from"../../internal/defaults.js";export const PlMockup=/* @__PURE__ */a.forwardRef(function PlMockup(w,v){const{device:b,os:x,hardware:y="monitor",size:k,resolution:N,orientation:$="portrait",bezel:z="standard",finish:R="graphite",notch:M,systemUi:j=!0,scroll:P=!1,wallpaper:H,time:W="9:41",width:q,height:S,color:T,elevation:B=0,render:E,className:F,style:I,children:U,...A}=w,C=g(),D=k??C.size??"md",G=T??C.color??"primary",J=c(b,x),K=M??s(b,J),L="desktop"!==b&&"landscape"===$,O=d({device:b,size:D,resolution:N,orientation:$,bezel:z,hardware:y}),{screen:Q,frame:V,body:X,stand:Y,base:Z}=O,_=a.useRef(null),ee=f(_),te=null!==ee&&(ee.width<=0||ee.height<=0),ie=null===ee||te?null:Math.min(ee.width/V.width,ee.height/V.height),ae="number"==typeof q&&q>0?void 0===S?q/V.width:"number"==typeof S&&S>0?Math.min(q/V.width,S/V.height):null:"number"==typeof S&&S>0&&void 0===q?S/V.height:null,re=ie??ae??`min(tan(atan2(100cqw, ${V.width}px)), tan(atan2(100cqh, ${V.height}px)))`,he=j?n({os:J,notch:K,landscape:L,time:W}):{},se="none"===z,le=t("div",{className:"plass-mockup-screen relative flex flex-col overflow-hidden",style:{width:Q.width,height:Q.height,borderRadius:O.screenRadius,background:H??"var(--plass-surface)",boxShadow:se?void 0:"inset 0 0 0 1px var(--p-shell-shade)"},children:[he.top?.node,t("div",{className:"flex min-h-0 flex-1",children:[he.start?.node,e("div",{className:"min-w-0 flex-1 "+(P?"overflow-auto":"overflow-hidden"),style:{containerType:"size",containerName:"plass-screen"},children:U})]}),he.bottom?.node,e(h,{notch:K,screen:Q,landscape:L})]}),oe=m("plass-mockup relative block",F??"");return r({render:E,ref:v,props:{className:oe,style:{...u(G,B),...o[R],width:q??(void 0===S?"100%":"auto"),height:S??"auto",aspectRatio:`${V.width} / ${V.height}`,filter:l[B],...I},children:e("div",{ref:_,className:"absolute inset-0 flex items-center justify-center",style:{containerType:"size",visibility:te&&null===ae?"hidden":void 0},children:t("div",{className:"flex shrink-0 flex-col items-center",style:{width:V.width,height:V.height,transform:`scale(${re})`},children:[e("div",{className:se?"":p,style:{width:X.width,height:X.height,borderRadius:O.frameRadius,paddingBlock:`${O.bezel.top}px ${O.bezel.bottom}px`,paddingInline:O.bezel.x},children:le}),Y?t(i,{children:[e("div",{"aria-hidden":"true",style:{width:Y.neckWidth,height:Y.neckHeight,background:"var(--p-shell-shade)",clipPath:"polygon(16% 0, 84% 0, 100% 100%, 0 100%)"}}),e("div",{"aria-hidden":"true",className:p,style:{width:Y.footWidth,height:Y.footHeight,borderRadius:Y.footHeight/2}})]}):null,Z?e("div",{"aria-hidden":"true",className:`relative ${p}`,style:{width:Z.width,height:Z.height,borderRadius:`0 0 ${Math.round(.55*Z.height)}px ${Math.round(.55*Z.height)}px`,clipPath:"polygon(0 0, 100% 0, 98.5% 100%, 1.5% 100%)"},children:e("div",{className:"absolute inset-x-0 top-0 mx-auto",style:{width:Z.lipWidth,height:Math.round(.34*Z.height),borderRadius:`0 0 ${Math.round(.2*Z.height)}px ${Math.round(.2*Z.height)}px`,background:"var(--p-shell-shade)"}})}):null]})}),...A}})});

package/dist/components/modal/PlModal.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as s}from"react/jsx-runtime";import{useDefaults as l}from"../../internal/defaults.js";import{useLabels as a}from"../../internal/labels.js";import{Dialog as o}from"@base-ui/react/dialog";import{CloseIcon as i}from"../../internal/icons.js";import{cx as r,focusRingClasses as t,glassClasses as n,hasContent as d,metaTextClasses as c,radiusClasses as p,sheetBodyClasses as m,sheetHeaderGapClasses as f,sheetLineClasses as u,sheetPaddingXClasses as x,sheetPaddingYClasses as h,sheetSectionGapClasses as g,sheetTitleClasses as v,surfaceSlots as y}from"../../internal/styles.js";const b={xs:"max-w-80",sm:"max-w-96",md:"max-w-lg",lg:"max-w-2xl",xl:"max-w-4xl"},w=/* @__PURE__ */[n,"relative flex w-full flex-col overflow-hidden","border text-(--plass-fg) bg-(--plass-glass-press)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--plass-shadow-4),var(--plass-gloss-glass)]","[outline:none]","[transition:opacity_var(--plass-duration-slow)_var(--plass-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),j=/* @__PURE__ */["fixed inset-0 z-(--plass-z-portal) bg-(--plass-scrim)","[backdrop-filter:blur(2px)] [-webkit-backdrop-filter:blur(2px)]","[transition:opacity_var(--plass-duration-slow)_var(--plass-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" ");export const PlModalClose=o.Close;export function PlModal({size:n,color:N,density:k,open:$,defaultOpen:_,onOpenChange:z,trigger:C,title:P,description:B,actions:O,dividers:D=!1,showClose:M=!0,closeLabel:T,width:W,fullWidth:L=!0,fullScreen:R=!1,modal:S=!0,dismissible:V=!0,className:q,classNames:A,style:E,children:F,...G}){const H=l(),I=a(),J=T??I.close,K=n??H.size??"md",Q=N??H.color??"primary",U=k??H.density??"default",X=x[U][K],Y=h[U][K],Z=D?`${X} ${Y}`:X,ee=d(P)||d(B),se=d(O);return s(o.Root,{open:$,defaultOpen:_,modal:S,disablePointerDismissal:!V,onOpenChange:(e,s)=>{V||e||"escape-key"!==s.reason?z?.(e):s.cancel()},children:[C?e(o.Trigger,{render:C}):null,s(o.Portal,{children:[e(o.Backdrop,{className:r("plass-portal",j,A?.backdrop)}),e(o.Viewport,{className:["plass-portal fixed inset-0 z-(--plass-z-portal) flex justify-center",R?"items-stretch":"items-center p-4"].join(" "),children:s(o.Popup,{className:[w,m[K],R?"h-full max-w-none rounded-none":`max-h-full ${p[K]} ${void 0===W?b[K]:""}`,R||L?"":"w-auto",D?"":`${Y} ${g[K]}`,q??""].filter(Boolean).join(" "),style:{...y(Q,3),...void 0===W?null:{maxWidth:"number"==typeof W?`${W}px`:W},...E},...G,children:[ee||M?s("div",{className:`flex shrink-0 items-start gap-3 ${Z}`,children:[s("div",{className:`flex min-w-0 flex-1 flex-col ${f[K]}`,children:[d(P)?e(o.Title,{className:`m-0 font-semibold ${v[K]}`,children:P}):null,d(B)?e(o.Description,{className:`m-0 text-(--plass-muted-fg) ${c[K]}`,children:B}):null]}),M?e(o.Close,{"aria-label":J,className:["flex size-[1.6em] shrink-0 cursor-pointer items-center justify-center","rounded-full text-(--plass-muted-fg)","[&_svg]:size-[1.1em] [&_svg]:shrink-0","[transition:background-color_var(--plass-duration)_var(--plass-ease),color_var(--plass-duration)_var(--plass-ease)]","hover:bg-(--p-soft) hover:text-(--plass-fg)",t].join(" "),children:e(i,{})}):null]}):null,d(F)?e("div",{className:["min-h-0 flex-1 overflow-y-auto overscroll-contain",Z,D&&(ee||M)?u:"",D?"":"-my-1 py-1"].filter(Boolean).join(" "),children:F}):null,se?e("div",{className:["flex shrink-0 flex-wrap items-center justify-end gap-2",Z,D?u:""].filter(Boolean).join(" "),children:O}):null]})})]})]})}
+"use client";import{jsx as s,jsxs as e}from"react/jsx-runtime";import{useDefaults as l}from"../../internal/defaults.js";import{useLabels as a}from"../../internal/labels.js";import{Dialog as i}from"@base-ui/react/dialog";import{CloseIcon as o}from"../../internal/icons.js";import{cx as r,focusRingClasses as t,glassClasses as n,hasContent as d,metaTextClasses as c,radiusClasses as p,sheetBodyClasses as m,sheetHeaderGapClasses as u,sheetLineClasses as f,sheetPaddingXClasses as x,sheetPaddingYClasses as h,sheetSectionGapClasses as g,sheetTitleClasses as v,surfaceSlots as y,targetClasses as b}from"../../internal/styles.js";const w={xs:"max-w-80",sm:"max-w-96",md:"max-w-lg",lg:"max-w-2xl",xl:"max-w-4xl"},j=/* @__PURE__ */[n,"relative flex w-full flex-col overflow-hidden","border text-(--plass-fg) bg-(--plass-glass-press)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--plass-shadow-4),var(--plass-gloss-glass)]","[outline:none]","[transition:opacity_var(--plass-duration-slow)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),N=/* @__PURE__ */["fixed inset-0 z-(--plass-z-portal) bg-(--plass-scrim)","[backdrop-filter:var(--plass-scrim-blur)] [-webkit-backdrop-filter:var(--plass-scrim-blur)]","[transition:opacity_var(--plass-duration-slow)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" ");export const PlModalClose=i.Close;export function PlModal({size:n,color:k,density:$,open:_,defaultOpen:z,onOpenChange:C,trigger:P,title:B,description:O,actions:D,dividers:M=!1,showClose:T=!0,closeLabel:W,width:L,fullWidth:R=!0,fullScreen:S=!1,modal:V=!0,dismissible:q=!0,className:A,classNames:E,style:F,children:G,...H}){const I=l(),J=a(),K=W??J.close,Q=n??I.size??"md",U=k??I.color??"primary",X=$??I.density??"default",Y=x[X][Q],Z=h[X][Q],ss=M?`${Y} ${Z}`:Y,es=d(B)||d(O),ls=d(D);return e(i.Root,{open:_,defaultOpen:z,modal:V,disablePointerDismissal:!q,onOpenChange:(s,e)=>{q||s||"escape-key"!==e.reason?C?.(s):e.cancel()},children:[P?s(i.Trigger,{render:P}):null,e(i.Portal,{children:[s(i.Backdrop,{className:r("plass-portal",N,E?.backdrop)}),s(i.Viewport,{className:["plass-portal fixed inset-0 z-(--plass-z-portal) flex justify-center",S?"items-stretch":"items-center p-4"].join(" "),children:e(i.Popup,{className:[j,m[Q],S?"h-full max-w-none rounded-none":`max-h-full ${p[Q]} ${void 0===L?w[Q]:""}`,S||R?"":"w-auto",M?"":`${Z} ${g[Q]}`,A??""].filter(Boolean).join(" "),style:{...y(U,3),...void 0===L?null:{maxWidth:"number"==typeof L?`${L}px`:L},...F},...H,children:[es||T?e("div",{className:`flex shrink-0 items-start gap-3 ${ss}`,children:[e("div",{className:`flex min-w-0 flex-1 flex-col ${u[Q]}`,children:[d(B)?s(i.Title,{className:`m-0 font-semibold ${v[Q]}`,children:B}):null,d(O)?s(i.Description,{className:`m-0 text-(--plass-muted-fg) ${c[Q]}`,children:O}):null]}),T?s(i.Close,{"aria-label":K,className:[b,"flex size-[1.6em] shrink-0 cursor-pointer items-center justify-center p-0","rounded-full text-(--plass-muted-fg)","[&_svg]:size-[1.1em] [&_svg]:shrink-0","[transition:background-color_var(--plass-duration)_var(--plass-ease),color_var(--plass-duration)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]","hover:bg-(--p-soft) hover:text-(--plass-fg)",t].join(" "),children:s(o,{})}):null]}):null,d(G)?s("div",{className:["min-h-0 flex-1 overflow-y-auto overscroll-contain",ss,M&&(es||T)?f:"",M?"":"-my-1 py-1"].filter(Boolean).join(" "),children:G}):null,ls?s("div",{className:["flex shrink-0 flex-wrap items-center justify-end gap-2",ss,M?f:""].filter(Boolean).join(" "),children:D}):null]})})]})]})}