neba 1.8.1 → 1.10.0

package/dist/components/pie-chart/PieChart.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{ChartDataTable as n,ChartLegendBar as l,ChartSurface as i,ChartTooltipPanel as r,useMeasuredWidth as o,useVisibility as s}from"../../internal/chart-frame.js";import{arcPath as d,categoryAt as u,chartFontSizes as m,compactNumber as c,formatCategory as h,markGap as v,plotHeights as f,seriesColor as p,toValue as x}from"../../internal/chart.js";import{numberFormatter as b}from"../../internal/format.js";import{cx as g,metaTextClasses as y}from"../../internal/styles.js";import{emptyMessages as M,useMessages as N}from"../../internal/i18n.js";const j={pie:0,donut:.62,semi:.62};export function PieChart({data:w,categories:I,shape:P="pie",startAngle:z=0,center:k,valueLabels:A="none",height:$,format:L,locale:S,label:_,legend:B,tooltip:E,empty:R,size:C="md",variant:D="text",padded:O=!1,className:K,...V}){const W=a.useRef(null),q=o(W),F=N(M,S),G=a.useId(),H=a.useCallback(e=>L?b(S,L).format(e):c(e,S),[L,S]),J=a.useMemo(()=>w.map(x),[w]),Q=a.useMemo(()=>J.map((e,t)=>({name:h(u(t,I,[J]),S),data:[w[t]],color:e.color})),[J,I,w,S]),T=s(Q),[U,X]=a.useState(null),Y=Q.map((e,t)=>p(e,t)),Z=J.reduce((e,t,a)=>T.visible[a]&&null!==t.value?e+Math.abs(t.value):e,0),ee="semi"===P,te="number"==typeof $?$:f[C],ae=m[C],ne=!1===B?{interactive:!1}:!0===B||void 0===B?{}:B,le=!1!==B&&Q.length>1,ie=ne.side??"bottom",re=!1===E?{mode:"none"}:!0===E||void 0===E?{}:E,oe="none"===re.mode,se=q/2,de=Math.max(0,Math.min(q/2,ee?te:te/2)-2),ue=ee?Math.min(te,te/2+de/2):te/2,me=de*j[P],ce=Z<=0||de<=0,he=de>0?Math.min(4,v/de*(180/Math.PI)):0,ve=ee?180:360,fe=[];let pe=ee?-90:z;J.forEach((e,t)=>{if(!T.visible[t]||null===e.value||0===e.value)return;const a=Math.abs(e.value)/Z,n=a*ve;fe.push({index:t,start:pe,end:pe+n,value:e.value,share:a}),pe+=n});const xe=null===U?[]:[{seriesIndex:U,name:Q[U]?.name,color:J[U]?.color??Y[U],value:J[U]?.value??null,formatted:`${H(J[U]?.value??0)} · ${Math.round(10*(Math.abs(J[U]?.value??0)/Z*100+Number.EPSILON))/10}%`,label:J[U]?.label}];return e(i,{...V,size:C,variant:D,padded:O,className:K,legendSide:ie,legend:le?e(l,{series:Q,colors:Y,options:ne,visibility:T,size:C,values:ne.showValue?J.map(e=>null===e.value?void 0:H(e.value)):void 0}):null,table:ce?null:e(n,{id:G,caption:_,categories:Q.map(e=>e.name??""),series:[{name:_,data:w}],values:[J],format:H,locale:S}),children:t("div",{ref:W,role:"img",tabIndex:ce?void 0:0,"aria-label":_,"aria-describedby":ce?void 0:G,onPointerLeave:()=>X(null),onBlur:()=>X(null),onKeyDown:e=>{if("ArrowRight"!==e.key&&"ArrowLeft"!==e.key)return;const t=fe.map(e=>e.index);if(0===t.length)return;const a=null===U?-1:t.indexOf(U),n="ArrowRight"===e.key?a+1:a-1;X(t[(n+t.length)%t.length]),e.preventDefault()},className:g("relative w-full rounded-(--neba-radius-xs)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2"),style:{height:te},children:[ce?e("div",{className:g("flex h-full items-center justify-center text-(--neba-muted-fg)",y[C]),children:R??F.title}):q>0?t("svg",{width:q,height:te,viewBox:`0 0 ${q} ${te}`,"aria-hidden":"true",className:"block",children:[fe.map(t=>{const a=null!==T.hovered&&T.hovered!==t.index||null!==U&&U!==t.index,n=t.end-t.start>2*he?he/2:0;return e("path",{d:d(se,ue,de,me,t.start+n,t.end-n),fill:J[t.index].color??Y[t.index],opacity:a?.32:1,onPointerEnter:oe?void 0:()=>X(t.index),className:"[transition:opacity_var(--neba-duration)_var(--neba-ease)]"},t.index)}),"all"===A?fe.map(t=>{const a=((t.start+t.end)/2-90)*(Math.PI/180),n=me>0?(me+de)/2:.68*de,l=`${Math.round(100*t.share)}%`;return(t.end-t.start)*(Math.PI/180)*n<2*ae||de-me<1.6*ae?null:e("text",{x:se+n*Math.cos(a),y:ue+n*Math.sin(a),textAnchor:"middle",dominantBaseline:"central",fontSize:ae,fontWeight:600,fill:"var(--neba-surface)",className:"tabular-nums",children:l},t.index)}):null]}):null,k&&me>0?e("div",{className:"pointer-events-none absolute flex flex-col items-center justify-center text-center",style:{left:se-me,top:ue-me,width:2*me,height:ee?me:2*me},children:k}):null,null===U||oe?null:re.render?e("div",{className:"pointer-events-none absolute top-0 left-1/2 z-10",children:re.render({index:U,category:Q[U]?.name??U,items:xe})}):e(r,{heading:Q[U]?.name,items:xe,x:se,y:8,flip:!1,size:C})]})})}
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{ChartDataTable as n,ChartLegendBar as l,ChartStatus as i,ChartSurface as r,ChartTooltipPanel as o,useMeasuredWidth as s,useVisibility as d}from"../../internal/chart-frame.js";import{arcPath as u,categoryAt as m,chartFontSizes as c,compactNumber as h,formatCategory as v,markGap as f,plotHeights as p,seriesColor as b,toValue as x}from"../../internal/chart.js";import{numberFormatter as g}from"../../internal/format.js";import{cx as y,metaTextClasses as M}from"../../internal/styles.js";import{chartMessages as N,emptyMessages as j,useMessages as w}from"../../internal/i18n.js";const I={pie:0,donut:.62,semi:.62};export function PieChart({data:P,categories:z,shape:k="pie",startAngle:A=0,center:$,valueLabels:L="none",height:S,format:_,locale:B,label:E,legend:R,tooltip:C,empty:D,size:O="md",variant:K="text",padded:V=!1,className:W,...q}){const F=a.useRef(null),G=s(F),H=w(j,B),J=w(N,B),Q=a.useId(),T=a.useCallback(e=>_?g(B,_).format(e):h(e,B),[_,B]),U=a.useMemo(()=>P.map(x),[P]),X=a.useMemo(()=>U.map((e,t)=>({name:v(m(t,z,[U]),B),data:[P[t]],color:e.color})),[U,z,P,B]),Y=d(X),[Z,ee]=a.useState(null),te=X.map((e,t)=>b(e,t)),ae=U.reduce((e,t,a)=>Y.visible[a]&&null!==t.value?e+Math.abs(t.value):e,0),ne="semi"===k,le="number"==typeof S?S:p[O],ie=c[O],re=!1===R?{interactive:!1}:!0===R||void 0===R?{}:R,oe=!1!==R&&X.length>1,se=re.side??"bottom",de=!1===C?{mode:"none"}:!0===C||void 0===C?{}:C,ue="none"===de.mode,me=G/2,ce=Math.max(0,Math.min(G/2,ne?le:le/2)-2),he=ne?Math.min(le,le/2+ce/2):le/2,ve=ce*I[k],fe=ae<=0||ce<=0,pe=ce>0?Math.min(4,f/ce*(180/Math.PI)):0,be=ne?180:360,xe=[];let ge=ne?-90:A;U.forEach((e,t)=>{if(!Y.visible[t]||null===e.value||0===e.value)return;const a=Math.abs(e.value)/ae,n=a*be;xe.push({index:t,start:ge,end:ge+n,value:e.value,share:a}),ge+=n});const ye=null===Z?[]:[{seriesIndex:Z,name:X[Z]?.name,color:U[Z]?.color??te[Z],value:U[Z]?.value??null,formatted:`${T(U[Z]?.value??0)} · ${Math.round(10*(Math.abs(U[Z]?.value??0)/ae*100+Number.EPSILON))/10}%`,label:U[Z]?.label}];return t(r,{...q,size:O,variant:K,padded:V,className:W,legendSide:se,legend:oe?e(l,{series:X,colors:te,options:re,visibility:Y,size:O,values:re.showValue?U.map(e=>null===e.value?void 0:T(e.value)):void 0}):null,table:fe?null:e(n,{id:Q,caption:E,categories:X.map(e=>e.name??""),series:[{name:E,data:P}],values:[U],format:T,locale:B}),children:[t("div",{ref:F,role:"img",tabIndex:fe?void 0:0,"aria-label":E??J.label,"aria-describedby":fe?void 0:Q,onPointerLeave:()=>ee(null),onBlur:()=>ee(null),onKeyDown:e=>{if("ArrowRight"!==e.key&&"ArrowLeft"!==e.key)return;const t=xe.map(e=>e.index);if(0===t.length)return;const a=null===Z?-1:t.indexOf(Z),n="ArrowRight"===e.key?a+1:a-1;ee(t[(n+t.length)%t.length]),e.preventDefault()},className:y("relative w-full rounded-(--neba-radius-xs)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2"),style:{height:le},children:[fe?e("div",{className:y("flex h-full items-center justify-center text-(--neba-muted-fg)",M[O]),children:D??H.title}):G>0?t("svg",{width:G,height:le,viewBox:`0 0 ${G} ${le}`,"aria-hidden":"true",className:"block",children:[xe.map(t=>{const a=null!==Y.hovered&&Y.hovered!==t.index||null!==Z&&Z!==t.index,n=t.end-t.start>2*pe?pe/2:0;return e("path",{d:u(me,he,ce,ve,t.start+n,t.end-n),fill:U[t.index].color??te[t.index],opacity:a?.32:1,onPointerEnter:ue?void 0:()=>ee(t.index),className:"[transition:opacity_var(--neba-duration)_var(--neba-ease)]"},t.index)}),"all"===L?xe.map(t=>{const a=((t.start+t.end)/2-90)*(Math.PI/180),n=ve>0?(ve+ce)/2:.68*ce,l=`${Math.round(100*t.share)}%`;return(t.end-t.start)*(Math.PI/180)*n<2*ie||ce-ve<1.6*ie?null:e("text",{x:me+n*Math.cos(a),y:he+n*Math.sin(a),textAnchor:"middle",dominantBaseline:"central",fontSize:ie,fontWeight:600,fill:"var(--neba-surface)",className:"tabular-nums",children:l},t.index)}):null]}):null,$&&ve>0?e("div",{className:"pointer-events-none absolute flex flex-col items-center justify-center text-center",style:{left:me-ve,top:he-ve,width:2*ve,height:ne?ve:2*ve},children:$}):null,null===Z||ue?null:de.render?e("div",{className:"pointer-events-none absolute top-0 left-1/2 z-10",children:de.render({index:Z,category:X[Z]?.name??Z,items:ye})}):e(o,{heading:X[Z]?.name,items:ye,x:me,y:8,flip:!1,size:O})]}),ue?null:e(i,{heading:null===Z?void 0:X[Z]?.name,items:ye})]})}

package/dist/components/pill/Pill.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as n,Fragment as t}from"react/jsx-runtime";import*as l from"react";import{controlSlots as o,controlTextClasses as i,focusRingClasses as r,gapClasses as s,hasContent as a,iconClasses as c,iconSizeClasses as d,metaTextClasses as m,paddingXClasses as x,pressTransitionClasses as f,sheetBodyClasses as u,surfaceClasses as p,transitionClasses as h}from"../../internal/styles.js";const v={solid:[p,"text-(--n-on-solid) bg-(--n-fill)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[p,"border text-(--n-accent) bg-(--n-panel)","[border-color:var(--n-line)]","[box-shadow:var(--n-elev),var(--neba-plate-glass)]"].join(" "),text:`${p} text-(--n-accent) bg-(--n-soft)`},b={solid:"hover:bg-(--n-fill-hover) active:bg-(--n-fill-active)",outline:"hover:bg-(--n-panel-hover) hover:[border-color:var(--n-line-hover)] active:bg-(--n-panel-press)",text:"hover:bg-(--n-soft-hover) active:bg-(--n-soft-press)"},g={xs:"min-h-5.5",sm:"min-h-6.5",md:"min-h-8",lg:"min-h-10",xl:"min-h-12"},w={xs:"rounded-[0.6875rem]",sm:"rounded-[0.8125rem]",md:"rounded-[1rem]",lg:"rounded-[1.25rem]",xl:"rounded-[1.5rem]"},j={default:{xs:"px-3",sm:"px-4",md:"px-5",lg:"px-6",xl:"px-8"},compact:{xs:"px-1.5",sm:"px-2",md:"px-2.5",lg:"px-3",xl:"px-4"}},y={static:{top:"",bottom:""},sticky:{top:"sticky top-3 z-20",bottom:"sticky bottom-3 z-20"},fixed:{top:"fixed inset-x-0 top-3 z-30 mx-auto w-fit",bottom:"fixed inset-x-0 bottom-3 z-30 mx-auto w-fit"}};export const Pill=/*@__PURE__*/l.forwardRef(function({variant:p="solid",size:N="md",color:k="secondary",density:z="default",elevation:$=2,startIcon:_,endIcon:C,title:R,description:B,details:H,expanded:I=!1,position:E="static",side:F="top",className:O,style:P,children:S,onClick:q,...A},D){const G=l.useRef(null),[J,K]=l.useState(0);l.useEffect(()=>{const e=G.current;if(!e)return;const n=new ResizeObserver(()=>{K(e.scrollHeight)});return n.observe(e),K(e.scrollHeight),()=>n.disconnect()},[H]);const L=Boolean(q),M=x[z][N],Q=n(t,{children:[a(_)?e("span",{className:`flex shrink-0 items-center justify-center overflow-hidden rounded-full [&_img]:size-full [&_img]:object-cover ${d[N]}`,children:_}):null,a(R)||a(B)||a(S)?n("span",{className:["flex min-w-0 flex-1 flex-col items-center justify-center text-center",j[z][N]].join(" "),children:[a(R)?e("span",{className:"max-w-full truncate",children:R}):null,a(B)?e("span",{className:`max-w-full truncate font-normal ${m[N]} [color:color-mix(in_oklab,currentColor_72%,transparent)]`,children:B}):null,S]}):null]});return n("div",{ref:D,className:["inline-flex max-w-full flex-col overflow-hidden align-middle",w[N],"font-medium whitespace-nowrap select-none",i[N],v[p],h,f,c,L?`neba-glow ${b[p]}`:"",y[E][F],O??""].filter(Boolean).join(" "),style:{...o(k,$,p),...P},...A,children:[n("div",{className:["flex shrink-0 items-center py-1",g[N],s[N],L?"ps-0":M,a(C)?"pe-1":L?"pe-0":""].join(" "),children:[L?e("button",{type:"button",className:["flex min-w-0 flex-1 cursor-pointer items-center justify-center self-stretch","rounded-[inherit]",s[N],M,r].join(" "),onClick:q,children:Q}):Q,a(C)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:C}):null]}),a(H)?e("div",{className:["overflow-hidden","[transition:height_var(--neba-duration)_var(--neba-ease)]","motion-reduce:[transition-duration:0ms]"].join(" "),style:{height:I?J:0},inert:!I,children:e("div",{ref:G,className:`whitespace-normal ${M} pb-2 ${u[N]}`,children:H})}):null]})});
+"use client";import{jsx as e,jsxs as n,Fragment as t}from"react/jsx-runtime";import*as l from"react";import{observeResize as o}from"../../internal/observe.js";import{controlSlots as i,controlTextClasses as r,cx as s,focusRingClasses as a,gapClasses as c,hasContent as d,iconClasses as m,iconSizeClasses as x,metaTextClasses as f,paddingXClasses as p,pressTransitionClasses as u,sheetBodyClasses as h,surfaceClasses as v,transitionClasses as b}from"../../internal/styles.js";const g={solid:[v,"text-(--n-on-solid) bg-(--n-fill)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[v,"border text-(--n-accent) bg-(--n-panel)","[border-color:var(--n-line)]","[box-shadow:var(--n-elev),var(--neba-plate-glass)]"].join(" "),text:`${v} text-(--n-accent) bg-(--n-soft)`},w={solid:"hover:bg-(--n-fill-hover) active:bg-(--n-fill-active)",outline:"hover:bg-(--n-panel-hover) hover:[border-color:var(--n-line-hover)] active:bg-(--n-panel-press)",text:"hover:bg-(--n-soft-hover) active:bg-(--n-soft-press)"},j={xs:"min-h-5.5",sm:"min-h-6.5",md:"min-h-8",lg:"min-h-10",xl:"min-h-12"},y={xs:"rounded-[0.6875rem]",sm:"rounded-[0.8125rem]",md:"rounded-[1rem]",lg:"rounded-[1.25rem]",xl:"rounded-[1.5rem]"},N={default:{xs:"px-3",sm:"px-4",md:"px-5",lg:"px-6",xl:"px-8"},compact:{xs:"px-1.5",sm:"px-2",md:"px-2.5",lg:"px-3",xl:"px-4"}},k={static:{top:"",bottom:""},sticky:{top:"sticky top-3 z-20",bottom:"sticky bottom-3 z-20"},fixed:{top:"fixed inset-x-0 top-3 z-30 mx-auto w-fit",bottom:"fixed inset-x-0 bottom-3 z-30 mx-auto w-fit"}};export const Pill=/*@__PURE__*/l.forwardRef(function({variant:v="solid",size:z="md",color:$="secondary",density:_="default",elevation:C=2,startIcon:H,endIcon:I,title:R,description:B,details:E,expanded:F=!1,position:P="static",side:S="top",className:q,style:A,children:D,onClick:G,...J},K){const L=l.useRef(null),[M,O]=l.useState(0);l.useEffect(()=>{const e=L.current;if(e)return O(e.scrollHeight),o(e,()=>O(e.scrollHeight))},[E]);const Q=Boolean(G),T=p[_][z],U=n(t,{children:[d(H)?e("span",{className:`flex shrink-0 items-center justify-center overflow-hidden rounded-full [&_img]:size-full [&_img]:object-cover ${x[z]}`,children:H}):null,d(R)||d(B)||d(D)?n("span",{className:["flex min-w-0 flex-1 flex-col items-center justify-center text-center",N[_][z]].join(" "),children:[d(R)?e("span",{className:"max-w-full truncate",children:R}):null,d(B)?e("span",{className:`max-w-full truncate font-normal ${f[z]} [color:color-mix(in_oklab,currentColor_72%,transparent)]`,children:B}):null,D]}):null]});return n("div",{ref:K,className:s("inline-flex max-w-full flex-col overflow-hidden align-middle",y[z],"font-medium whitespace-nowrap select-none",r[z],g[v],b,u,m,Q?`neba-glow ${w[v]}`:"",k[P][S],q??""),style:{...i($,C,v),...A},...J,children:[n("div",{className:["flex shrink-0 items-center py-1",j[z],c[z],Q?"ps-0":T,d(I)?"pe-1":Q?"pe-0":""].join(" "),children:[Q?e("button",{type:"button",className:["flex min-w-0 flex-1 cursor-pointer items-center justify-center self-stretch","rounded-[inherit]",c[z],T,a].join(" "),onClick:G,children:U}):U,d(I)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:I}):null]}),d(E)?e("div",{className:["overflow-hidden","[transition:height_var(--neba-duration)_var(--neba-ease)]","motion-reduce:[transition-duration:0ms]"].join(" "),style:{height:F?M:0},inert:!F,children:e("div",{ref:L,className:`whitespace-normal ${T} pb-2 ${h[z]}`,children:E})}):null]})});

package/dist/components/popover/Popover.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import{Popover as o}from"@base-ui/react/popover";import{boxPaddingXClasses as t,boxPaddingYClasses as n}from"../box/Box.js";import{actionMessages as s,useMessages as i}from"../../internal/i18n.js";import{CloseIcon as l}from"../../internal/icons.js";import{hasContent as r,metaTextClasses as d,radiusClasses as c,sheetBodyClasses as m,sheetHeaderGapClasses as p,sheetSectionGapClasses as f,sheetTitleClasses as u,surfaceClasses as h,surfaceSlots as x}from"../../internal/styles.js";const b={xs:"max-w-56",sm:"max-w-64",md:"max-w-80",lg:"max-w-96",xl:"max-w-lg"},g=[h,"relative flex flex-col","border text-(--neba-fg) bg-(--n-panel-press)","[border-color:var(--n-line)]","[box-shadow:var(--neba-shadow-3),var(--neba-plate-glass)]","[outline:none]","[transition:opacity_var(--neba-duration)_var(--neba-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),v={xs:8,sm:9,md:10,lg:11,xl:12};export const PopoverClose=o.Close;export function Popover({size:h="md",color:w="primary",density:y="default",trigger:j,title:N,description:_,children:k,side:O="bottom",align:C="center",sideOffset:P=6,alignOffset:z=0,arrow:$=!1,open:B,defaultOpen:L,onOpenChange:M,modal:T=!1,dismissible:W=!0,showClose:A=!1,locale:D,closeLabel:E,width:R,className:q,style:F,...G}){const H=i(s,D),I=t[y][h],J=n[y][h],K=v[h],Q=r(N)||r(_);return a(o.Root,{open:B,defaultOpen:L,modal:T,onOpenChange:(e,a)=>{W||e||"escape-key"!==a.reason&&"outside-press"!==a.reason&&"focus-out"!==a.reason?M?.(e):a.cancel()},children:[j?e(o.Trigger,{render:j}):null,e(o.Portal,{children:e(o.Positioner,{className:"neba-portal z-50 [outline:none]",side:O,align:C,sideOffset:P,alignOffset:z,children:a(o.Popup,{className:[g,c[h],m[h],f[h],I,J,void 0===R?b[h]:"",q??""].filter(Boolean).join(" "),style:{...x(w,3),...void 0===R?null:{maxWidth:"number"==typeof R?`${R}px`:R},...F},...G,children:[$?e(o.Arrow,{className:["data-[side=top]:bottom-[-1px]","data-[side=bottom]:top-[-1px] data-[side=bottom]:rotate-180","data-[side=left]:right-[-1px] data-[side=left]:-rotate-90","data-[side=right]:left-[-1px] data-[side=right]:rotate-90"].join(" "),children:a("svg",{width:K,height:K/2,viewBox:"0 0 10 5","aria-hidden":"true",className:"block",children:[e("path",{d:"M0 0h10L5 5z",fill:"var(--n-panel-press)"}),e("path",{d:"M0 0 5 5 10 0",fill:"none",stroke:"var(--n-line)",strokeWidth:"1",vectorEffect:"non-scaling-stroke"})]})}):null,Q||A?a("div",{className:"flex shrink-0 items-start gap-3",children:[a("div",{className:`flex min-w-0 flex-1 flex-col ${p[h]}`,children:[r(N)?e(o.Title,{className:`m-0 font-semibold ${u[h]}`,children:N}):null,r(_)?e(o.Description,{className:`m-0 text-(--neba-muted-fg) ${d[h]}`,children:_}):null]}),A?e(o.Close,{"aria-label":E??H.close,className:["flex size-[1.6em] shrink-0 cursor-pointer items-center justify-center","rounded-full text-(--neba-muted-fg)","[&_svg]:size-[1.1em] [&_svg]:shrink-0","[transition:background-color_var(--neba-duration)_var(--neba-ease),color_var(--neba-duration)_var(--neba-ease)]","hover:bg-(--n-soft) hover:text-(--neba-fg)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2"].join(" "),children:e(l,{})}):null]}):null,r(k)?e("div",{className:"min-w-0",children:k}):null]})})})]})}
+"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import{Popover as t}from"@base-ui/react/popover";import{boxPaddingXClasses as o,boxPaddingYClasses as s}from"../box/Box.js";import{actionMessages as n,useMessages as i}from"../../internal/i18n.js";import{CloseIcon as l}from"../../internal/icons.js";import{cx as r,hasContent as d,metaTextClasses as c,radiusClasses as m,sheetBodyClasses as p,sheetHeaderGapClasses as f,sheetSectionGapClasses as u,sheetTitleClasses as h,surfaceClasses as x,surfaceSlots as b}from"../../internal/styles.js";const g={xs:"max-w-56",sm:"max-w-64",md:"max-w-80",lg:"max-w-96",xl:"max-w-lg"},v=[x,"relative flex flex-col","border text-(--neba-fg) bg-(--n-panel-press)","[border-color:var(--n-line)]","[box-shadow:var(--neba-shadow-3),var(--neba-plate-glass)]","[outline:none]","[transition:opacity_var(--neba-duration)_var(--neba-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),w={xs:8,sm:9,md:10,lg:11,xl:12};export const PopoverClose=t.Close;export function Popover({size:x="md",color:y="primary",density:j="default",trigger:N,title:_,description:k,children:O,side:C="bottom",align:P="center",sideOffset:z=6,alignOffset:$=0,arrow:B=!1,open:L,defaultOpen:M,onOpenChange:T,modal:W=!1,dismissible:A=!0,showClose:D=!1,locale:E,closeLabel:R,width:q,className:F,style:G,...H}){const I=i(n,E),J=o[j][x],K=s[j][x],Q=w[x],S=d(_)||d(k);return a(t.Root,{open:L,defaultOpen:M,modal:W,onOpenChange:(e,a)=>{A||e||"escape-key"!==a.reason&&"outside-press"!==a.reason&&"focus-out"!==a.reason?T?.(e):a.cancel()},children:[N?e(t.Trigger,{render:N}):null,e(t.Portal,{children:e(t.Positioner,{className:"neba-portal z-50 [outline:none]",side:C,align:P,sideOffset:z,alignOffset:$,children:a(t.Popup,{className:r(v,m[x],p[x],u[x],J,K,void 0===q?g[x]:"",F??""),style:{...b(y,3),...void 0===q?null:{maxWidth:"number"==typeof q?`${q}px`:q},...G},...H,children:[B?e(t.Arrow,{className:["data-[side=top]:bottom-[-1px]","data-[side=bottom]:top-[-1px] data-[side=bottom]:rotate-180","data-[side=left]:right-[-1px] data-[side=left]:-rotate-90","data-[side=right]:left-[-1px] data-[side=right]:rotate-90"].join(" "),children:a("svg",{width:Q,height:Q/2,viewBox:"0 0 10 5","aria-hidden":"true",className:"block",children:[e("path",{d:"M0 0h10L5 5z",fill:"var(--n-panel-press)"}),e("path",{d:"M0 0 5 5 10 0",fill:"none",stroke:"var(--n-line)",strokeWidth:"1",vectorEffect:"non-scaling-stroke"})]})}):null,S||D?a("div",{className:"flex shrink-0 items-start gap-3",children:[a("div",{className:`flex min-w-0 flex-1 flex-col ${f[x]}`,children:[d(_)?e(t.Title,{className:`m-0 font-semibold ${h[x]}`,children:_}):null,d(k)?e(t.Description,{className:`m-0 text-(--neba-muted-fg) ${c[x]}`,children:k}):null]}),D?e(t.Close,{"aria-label":R??I.close,className:["flex size-[1.6em] shrink-0 cursor-pointer items-center justify-center","rounded-full text-(--neba-muted-fg)","[&_svg]:size-[1.1em] [&_svg]:shrink-0","[transition:background-color_var(--neba-duration)_var(--neba-ease),color_var(--neba-duration)_var(--neba-ease)]","hover:bg-(--n-soft) hover:text-(--neba-fg)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2"].join(" "),children:e(l,{})}):null]}):null,d(O)?e("div",{className:"min-w-0",children:O}):null]})})})]})}

package/dist/components/progress-box/ProgressBox.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{Progress as s}from"@base-ui/react/progress";import{plateGapClasses as t,plateRadiusClasses as n,plateSizeClasses as r,progressAriaText as i,progressFraction as o,progressSlots as m,progressText as f}from"../../internal/progress.js";import{metaTextClasses as c,stackGapClasses as u}from"../../internal/styles.js";export const ProgressBox=/*@__PURE__*/l.forwardRef(function({size:l="md",color:d="primary",count:h=4,value:x=null,min:b=0,max:p=100,label:g,showValue:v=!1,format:j,className:y,style:w,...N},M){const B=o(x,b,p),V=null===B,k=void 0!==j,A=Math.max(1,Math.floor(h));return a(s.Root,{ref:M,value:x??null,min:b,max:p,format:j,getAriaValueText:i(B,k),className:["inline-flex flex-col",u[l],y??""].filter(Boolean).join(" "),style:{...m(d),...w},...N,children:[g||v?a("div",{className:["flex items-baseline gap-2",g?"justify-between":"justify-end",c[l]].join(" "),children:[g?e(s.Label,{className:"min-w-0 truncate text-(--neba-fg)",children:g}):null,v?e(s.Value,{className:"shrink-0 tabular-nums text-(--neba-muted-fg)",children:e=>f(B,e,k)}):null]}):null,e(s.Track,{className:`flex ${t[l]}`,children:Array.from({length:A},(a,s)=>e("span",{className:["relative overflow-hidden bg-(--n-soft)","[box-shadow:var(--neba-plate-glass)]",r[l],n[l],V?"neba-plate-wave":""].filter(Boolean).join(" "),style:V?{"--n-i":s}:void 0,children:V?null:e("span",{className:"absolute inset-y-0 start-0 bg-(--n-fill) [transition:width_var(--neba-duration-fill)_var(--neba-ease)]",style:{width:`${Math.min(100,Math.max(0,100*(B*A-s)))}%`}})},s))})]})});
+"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{Progress as s}from"@base-ui/react/progress";import{plateGapClasses as t,plateRadiusClasses as r,plateSizeClasses as n,progressAriaText as i,progressFraction as o,progressSlots as m,progressText as c}from"../../internal/progress.js";import{cx as u,metaTextClasses as f,stackGapClasses as d}from"../../internal/styles.js";export const ProgressBox=/*@__PURE__*/l.forwardRef(function({size:l="md",color:h="primary",count:x=4,value:b=null,min:p=0,max:g=100,label:v,showValue:y=!1,format:w,className:j,style:N,...M},V){const k=o(b,p,g),A=null===k,R=void 0!==w,T=Math.max(1,Math.floor(x));return a(s.Root,{ref:V,value:b??null,min:p,max:g,format:w,getAriaValueText:i(k,R),className:u("inline-flex flex-col",d[l],j??""),style:{...m(h),...N},...M,children:[v||y?a("div",{className:["flex items-baseline gap-2",v?"justify-between":"justify-end",f[l]].join(" "),children:[v?e(s.Label,{className:"min-w-0 truncate text-(--neba-fg)",children:v}):null,y?e(s.Value,{className:"shrink-0 tabular-nums text-(--neba-muted-fg)",children:e=>c(k,e,R)}):null]}):null,e(s.Track,{className:`flex ${t[l]}`,children:Array.from({length:T},(a,s)=>e("span",{className:u("relative overflow-hidden bg-(--n-soft)","[box-shadow:var(--neba-plate-glass)]",n[l],r[l],A?"neba-plate-wave":""),style:A?{"--n-i":s}:void 0,children:A?null:e("span",{className:"absolute inset-y-0 start-0 bg-(--n-fill) [transition:width_var(--neba-duration-fill)_var(--neba-ease)]",style:{width:`${Math.min(100,Math.max(0,100*(k*T-s)))}%`}})},s))})]})});

package/dist/components/progress-circular/ProgressCircular.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as a from"react";import{Progress as s}from"@base-ui/react/progress";import{progressAriaText as t,progressFraction as n,progressSlots as i,progressText as l,ringDiameters as o,ringStrokes as c}from"../../internal/progress.js";import{gapClasses as m,metaTextClasses as f}from"../../internal/styles.js";export const ProgressCircular=/*@__PURE__*/a.forwardRef(function({size:a="md",color:u="primary",value:h=null,min:d=0,max:x=100,label:k,showValue:p=!1,format:b,className:g,style:v,...y},$){const j=n(h,d,x),N=null===j,w=void 0!==b,V=o[a],B=c[a],D=V/2,L=D-B/2,P=2*Math.PI*L,R=N?`${.28*P} ${P}`:`${P}`,W=N?0:P*(1-j);return r(s.Root,{ref:$,value:h??null,min:d,max:x,format:b,getAriaValueText:t(j,w),className:["inline-flex items-center",m[a],f[a],g??""].filter(Boolean).join(" "),style:{...i(u),...v},...y,children:[r("svg",{className:N?"neba-ring-spin shrink-0":"shrink-0",width:V,height:V,viewBox:`0 0 ${V} ${V}`,fill:"none","aria-hidden":"true",children:[e("circle",{cx:D,cy:D,r:L,stroke:"var(--n-soft)",strokeWidth:B}),e("circle",{cx:D,cy:D,r:L,stroke:"var(--n-accent)",strokeWidth:B,strokeLinecap:"round",strokeDasharray:R,strokeDashoffset:W,transform:`rotate(-90 ${D} ${D})`,className:"[transition:stroke-dashoffset_var(--neba-duration-fill)_var(--neba-ease)]"})]}),k?e(s.Label,{className:"min-w-0 truncate text-(--neba-fg)",children:k}):null,p?e(s.Value,{className:"shrink-0 tabular-nums text-(--neba-muted-fg)",children:e=>l(j,e,w)}):null]})});
+"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as a from"react";import{Progress as s}from"@base-ui/react/progress";import{progressAriaText as t,progressFraction as n,progressSlots as i,progressText as l,ringDiameters as o,ringStrokes as c}from"../../internal/progress.js";import{cx as m,gapClasses as u,metaTextClasses as f}from"../../internal/styles.js";export const ProgressCircular=/*@__PURE__*/a.forwardRef(function({size:a="md",color:h="primary",value:d=null,min:x=0,max:k=100,label:p,showValue:b=!1,format:g,className:v,style:y,...$},N){const j=n(d,x,k),w=null===j,V=void 0!==g,D=o[a],L=c[a],P=D/2,R=P-L/2,W=2*Math.PI*R,_=w?`${.28*W} ${W}`:`${W}`,z=w?0:W*(1-j);return r(s.Root,{ref:N,value:d??null,min:x,max:k,format:g,getAriaValueText:t(j,V),className:m("inline-flex items-center",u[a],f[a],v??""),style:{...i(h),...y},...$,children:[r("svg",{className:w?"neba-ring-spin shrink-0":"shrink-0",width:D,height:D,viewBox:`0 0 ${D} ${D}`,fill:"none","aria-hidden":"true",children:[e("circle",{cx:P,cy:P,r:R,stroke:"var(--n-soft)",strokeWidth:L}),e("circle",{cx:P,cy:P,r:R,stroke:"var(--n-accent)",strokeWidth:L,strokeLinecap:"round",strokeDasharray:_,strokeDashoffset:z,transform:`rotate(-90 ${P} ${P})`,className:"[transition:stroke-dashoffset_var(--neba-duration-fill)_var(--neba-ease)]"})]}),p?e(s.Label,{className:"min-w-0 truncate text-(--neba-fg)",children:p}):null,b?e(s.Value,{className:"shrink-0 tabular-nums text-(--neba-muted-fg)",children:e=>l(j,e,V)}):null]})});

package/dist/components/progress-linear/ProgressLinear.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as a from"react";import{Progress as r}from"@base-ui/react/progress";import{barThicknessClasses as n,progressAriaText as s,progressFraction as t,progressSlots as i,progressText as o}from"../../internal/progress.js";import{metaTextClasses as m,stackGapClasses as u}from"../../internal/styles.js";export const ProgressLinear=/*@__PURE__*/a.forwardRef(function({size:a="md",color:f="primary",value:c=null,min:d=0,max:b=100,label:p,showValue:x=!1,format:j,className:g,style:h,...w},v){const N=t(c,d,b),y=null===N,V=void 0!==j;return l(r.Root,{ref:v,value:c??null,min:d,max:b,format:j,getAriaValueText:s(N,V),className:["flex w-full flex-col",u[a],g??""].filter(Boolean).join(" "),style:{...i(f),...h},...w,children:[p||x?l("div",{className:["flex items-baseline gap-2",p?"justify-between":"justify-end",m[a]].join(" "),children:[p?e(r.Label,{className:"min-w-0 truncate text-(--neba-fg)",children:p}):null,x?e(r.Value,{className:"shrink-0 tabular-nums text-(--neba-muted-fg)",children:e=>o(N,e,V)}):null]}):null,e(r.Track,{className:`relative w-full overflow-hidden rounded-full bg-(--n-soft) ${n[a]}`,children:e(r.Indicator,{className:["absolute rounded-full bg-(--n-fill)",y?"neba-sweep":"top-0 [transition:width_var(--neba-duration-fill)_var(--neba-ease)]"].join(" ")})})]})});
+"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as a from"react";import{Progress as r}from"@base-ui/react/progress";import{barThicknessClasses as s,progressAriaText as n,progressFraction as t,progressSlots as i,progressText as o}from"../../internal/progress.js";import{cx as m,metaTextClasses as u,stackGapClasses as f}from"../../internal/styles.js";export const ProgressLinear=/*@__PURE__*/a.forwardRef(function({size:a="md",color:c="primary",value:d=null,min:b=0,max:p=100,label:x,showValue:g=!1,format:h,className:j,style:w,...v},N){const y=t(d,b,p),V=null===y,k=void 0!==h;return l(r.Root,{ref:N,value:d??null,min:b,max:p,format:h,getAriaValueText:n(y,k),className:m("flex w-full flex-col",f[a],j??""),style:{...i(c),...w},...v,children:[x||g?l("div",{className:["flex items-baseline gap-2",x?"justify-between":"justify-end",u[a]].join(" "),children:[x?e(r.Label,{className:"min-w-0 truncate text-(--neba-fg)",children:x}):null,g?e(r.Value,{className:"shrink-0 tabular-nums text-(--neba-muted-fg)",children:e=>o(y,e,k)}):null]}):null,e(r.Track,{className:`relative w-full overflow-hidden rounded-full bg-(--n-soft) ${s[a]}`,children:e(r.Indicator,{className:["absolute rounded-full bg-(--n-fill)",V?"neba-sweep":"top-0 [transition:width_var(--neba-duration-fill)_var(--neba-ease)]"].join(" ")})})]})});

package/dist/components/radio-group/RadioGroup.d.ts

@@ -1,7 +1,18 @@
 import * as React from 'react';
 import { Radio as BaseUIRadio } from '@base-ui/react/radio';
 import { RadioGroup as BaseUIRadioGroup } from '@base-ui/react/radio-group';
-import type { NebaColor, NebaOrientation, NebaSize } from '../../types.js';
+import type { NebaColor, NebaFieldSlot, NebaOrientation, NebaSize, NebaSlots } from '../../types.js';
+/**
+ * The parts a RadioGroup draws behind its root. `control` is the element that
+ * holds the options — the one carrying the row or column direction — and not
+ * any single Radio, which has slots of its own.
+ */
+export type RadioGroupSlot = NebaFieldSlot;
+/**
+ * The parts one Radio draws. There is no `error`: a validity message belongs to
+ * the question, and the question is the group.
+ */
+export type RadioSlot = Exclude<NebaFieldSlot, 'error'> | 'indicator';
 export interface RadioGroupProps extends Omit<React.ComponentPropsWithoutRef<typeof BaseUIRadioGroup>, 'className' | 'style' | 'render'> {
     /** @default 'md' */
     size?: NebaSize;
@@ -23,6 +34,11 @@ export interface RadioGroupProps extends Omit<React.ComponentPropsWithoutRef<typ
     /** Forces the invalid state without a message. Defaults to `!!error`. */
     invalid?: boolean;
     className?: string;
+    /**
+     * Class names for the parts behind the root. The element holding the options
+     * is `classNames.control`; a single option is styled on the Radio itself.
+     */
+    classNames?: NebaSlots<RadioGroupSlot>;
     style?: React.CSSProperties;
 }
 export interface RadioProps extends Omit<React.ComponentPropsWithoutRef<typeof BaseUIRadio.Root>, 'className' | 'style' | 'render' | 'children'> {
@@ -31,6 +47,11 @@ export interface RadioProps extends Omit<React.ComponentPropsWithoutRef<typeof B
     /** Helper text under the label. */
     description?: React.ReactNode;
     className?: string;
+    /**
+     * Class names for the parts behind the root — the dot is
+     * `classNames.control`.
+     */
+    classNames?: NebaSlots<RadioSlot>;
     style?: React.CSSProperties;
 }
 /**

package/dist/components/radio-group/RadioGroup.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as r from"react";import{Radio as n}from"@base-ui/react/radio";import{RadioGroup as l}from"@base-ui/react/radio-group";import{Field as o}from"@base-ui/react/field";import{controlTextClasses as i,metaTextClasses as t,surfaceClasses as s,tickDotClasses as d,tickRowLeadingClasses as c,tickSizeClasses as b,transitionClasses as f}from"../../internal/styles.js";const h=/*@__PURE__*/r.createContext({size:"md",color:"primary",readOnly:!1}),m=["relative inline-flex shrink-0 items-center justify-center rounded-full border","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",f,"active:[transition-duration:0ms]","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2"].join(" "),u=[s,"cursor-pointer bg-(--n-panel) [border-color:var(--n-line)]","hover:bg-(--n-panel-hover) hover:[border-color:var(--n-line-hover)]","data-[checked]:bg-(--n-fill) data-[checked]:text-(--n-on-solid)","data-[checked]:[border-color:transparent]","data-[checked]:hover:bg-(--n-fill-hover)"].join(" "),p=[s,"cursor-default bg-(--n-panel) [border-color:var(--n-line)]","[filter:saturate(0.55)]","data-[checked]:bg-(--n-fill) data-[checked]:text-(--n-on-solid)","data-[checked]:[border-color:transparent]"].join(" "),v=["cursor-not-allowed bg-transparent [border-color:var(--neba-disabled-border)] shadow-none","data-[checked]:bg-(--neba-disabled-bg)"].join(" ");export const Radio=/*@__PURE__*/r.forwardRef(function({label:l,description:s,disabled:f=!1,className:x,style:g,...j},y){const N=r.useContext(h),$=j.readOnly??N.readOnly;return e(o.Root,{disabled:f,className:["flex flex-col",x??""].filter(Boolean).join(" "),style:g,children:a("div",{className:`flex items-start gap-2 ${i[N.size]} ${c}`,children:[e("span",{className:"flex h-[1lh] shrink-0 items-center",children:e(n.Root,{ref:y,className:[m,b[N.size],f?v:$?p:u].join(" "),disabled:f,...j,children:e(n.Indicator,{className:`rounded-full bg-current ${d[N.size]}`})})}),l||s?a("span",{className:"flex min-w-0 flex-col gap-0.5",children:[l?e(o.Label,{className:["leading-[1.4]",f?"text-(--neba-disabled-fg)":"cursor-pointer text-(--neba-fg)"].join(" "),children:l}):null,s?e(o.Description,{className:`${t[N.size]} text-(--neba-muted-fg)`,children:s}):null]}):null]})})});export const RadioGroup=/*@__PURE__*/r.forwardRef(function({size:n="md",color:i="primary",orientation:s="vertical",label:d,description:c,error:b,invalid:f,disabled:m=!1,readOnly:u=!1,className:p,style:v,children:x,...g},j){const y=null!=b&&!1!==b&&""!==b,N=f??y,$=N?"danger":i,k={"--n-fill":`var(--neba-${$}-fill)`,"--n-fill-hover":`var(--neba-${$}-fill-hover)`,"--n-on-solid":`var(--neba-${$}-on-solid)`,"--n-accent":`var(--neba-${$}-accent)`,"--n-panel":"var(--neba-panel)","--n-panel-hover":"var(--neba-panel-hover)","--n-line":`var(--neba-${$}-line)`,"--n-line-hover":`var(--neba-${$}-line-hover)`,"--n-ring":`var(--neba-${$}-ring)`},R=r.useMemo(()=>({size:n,color:$,readOnly:u}),[n,$,u]);return e(h.Provider,{value:R,children:a(o.Root,{disabled:m,invalid:N,className:["flex flex-col gap-1.5",p??""].filter(Boolean).join(" "),style:{...k,...v},children:[d?e(o.Label,{className:[t[n],"font-medium",m?"text-(--neba-disabled-fg)":"text-(--neba-fg)"].join(" "),children:d}):null,c?e(o.Description,{className:`${t[n]} text-(--neba-muted-fg)`,children:c}):null,e(l,{ref:j,disabled:m,readOnly:u,className:["flex","horizontal"===s?"flex-row flex-wrap gap-x-5 gap-y-2":"flex-col gap-2"].join(" "),...g,children:x}),y?e(o.Error,{match:!0,className:`${t[n]} text-(--n-accent)`,children:b}):null]})})});
+"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as r from"react";import{Radio as n}from"@base-ui/react/radio";import{RadioGroup as l}from"@base-ui/react/radio-group";import{Field as o}from"@base-ui/react/field";import{controlTextClasses as i,cx as t,hitAreaClasses as s,metaTextClasses as c,surfaceClasses as d,tickDotClasses as b,tickRowLeadingClasses as f,tickSizeClasses as m,transitionClasses as h}from"../../internal/styles.js";const p=/*@__PURE__*/r.createContext({size:"md",color:"primary",readOnly:!1}),u=["relative inline-flex shrink-0 items-center justify-center rounded-full border",s,"[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",h,"active:[transition-duration:0ms]","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2"].join(" "),v=[d,"cursor-pointer bg-(--n-panel) [border-color:var(--n-line)]","hover:bg-(--n-panel-hover) hover:[border-color:var(--n-line-hover)]","data-[checked]:bg-(--n-fill) data-[checked]:text-(--n-on-solid)","data-[checked]:[border-color:transparent]","data-[checked]:hover:bg-(--n-fill-hover)"].join(" "),x=[d,"cursor-default bg-(--n-panel) [border-color:var(--n-line)]","[filter:saturate(0.55)]","data-[checked]:bg-(--n-fill) data-[checked]:text-(--n-on-solid)","data-[checked]:[border-color:transparent]"].join(" "),g=["cursor-not-allowed bg-transparent [border-color:var(--neba-disabled-border)] shadow-none","data-[checked]:bg-(--neba-disabled-bg)"].join(" ");export const Radio=/*@__PURE__*/r.forwardRef(function({label:l,description:s,disabled:d=!1,className:h,classNames:N,style:y,...k},j){const R=r.useContext(p),$=k.readOnly??R.readOnly;return e(o.Root,{disabled:d,className:t("flex flex-col",h??""),style:y,children:a("div",{className:`flex items-start gap-2 ${i[R.size]} ${f}`,children:[e("span",{className:"flex h-[1lh] shrink-0 items-center",children:e(n.Root,{ref:j,className:t(u,m[R.size],d?g:$?x:v,N?.control),disabled:d,...k,children:e(n.Indicator,{className:t("rounded-full bg-current",b[R.size],N?.indicator)})})}),l||s?a("span",{className:"flex min-w-0 flex-col gap-0.5",children:[l?e(o.Label,{className:t("leading-[1.4]",d?"text-(--neba-disabled-fg)":"cursor-pointer text-(--neba-fg)",N?.label),children:l}):null,s?e(o.Description,{className:t(c[R.size],"text-(--neba-muted-fg)",N?.description),children:s}):null]}):null]})})});export const RadioGroup=/*@__PURE__*/r.forwardRef(function({size:n="md",color:i="primary",orientation:s="vertical",label:d,description:b,error:f,invalid:m,disabled:h=!1,readOnly:u=!1,className:v,classNames:x,style:g,children:N,...y},k){const j=null!=f&&!1!==f&&""!==f,R=m??j,$=R?"danger":i,w={"--n-fill":`var(--neba-${$}-fill)`,"--n-fill-hover":`var(--neba-${$}-fill-hover)`,"--n-on-solid":`var(--neba-${$}-on-solid)`,"--n-accent":`var(--neba-${$}-accent)`,"--n-panel":"var(--neba-panel)","--n-panel-hover":"var(--neba-panel-hover)","--n-line":`var(--neba-${$}-line)`,"--n-line-hover":`var(--neba-${$}-line-hover)`,"--n-ring":`var(--neba-${$}-ring)`},z=r.useMemo(()=>({size:n,color:$,readOnly:u}),[n,$,u]);return e(p.Provider,{value:z,children:a(o.Root,{disabled:h,invalid:R,className:t("flex flex-col gap-1.5",v??""),style:{...w,...g},children:[d?e(o.Label,{className:t(c[n],"font-medium",h?"text-(--neba-disabled-fg)":"text-(--neba-fg)",x?.label),children:d}):null,b?e(o.Description,{className:t(c[n],"text-(--neba-muted-fg)",x?.description),children:b}):null,e(l,{ref:k,disabled:h,readOnly:u,className:t("flex","horizontal"===s?"flex-row flex-wrap gap-x-5 gap-y-2":"flex-col gap-2",x?.control),...y,children:N}),e(o.Error,j?{match:!0,className:t(c[n],"text-(--n-accent)",x?.error),children:f}:{className:t(c[n],"text-(--n-accent)",x?.error)})]})})});

package/dist/components/rating/Rating.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as n from"react";import{StarIcon as l,StarOutlineIcon as t}from"../../internal/icons.js";import{fillMessage as r,ratingMessages as i,useMessages as o}from"../../internal/i18n.js";import{controlSlots as s,focusWithinRingClasses as d,gapClasses as c,iconSizeClasses as m,radiusClasses as u,srOnlyClasses as h,transitionClasses as f}from"../../internal/styles.js";const b="flex items-center justify-center";export const Rating=/*@__PURE__*/n.forwardRef(function({value:p,defaultValue:x=0,onValueChange:y,count:v=5,precision:g=1,icon:j,emptyIcon:N,clearable:M=!0,readOnly:w=!1,disabled:k=!1,name:S,required:C=!1,size:L="md",color:P="warning",locale:q,label:I,valueLabel:A,className:B,style:R,onPointerLeave:V,...z},E){const F=o(i,q),O=n.useId(),D=S??O,[G,H]=n.useState(x),J=void 0!==p,K=J?p:G,[Q,T]=n.useState(null),U=Math.max(1,Math.floor(v)),W=g>0&&g<=1?g:1,X=Math.round(1/W),Y=Math.max(0,Math.min(U,Q??K)),Z=n.useCallback(e=>A?A(e,U):e<=0?F.empty:r(F.value,{value:String(e),max:String(U)}),[A,U,F]),$=e=>{J||H(e),y?.(e)},_=Array.from({length:U},(n,r)=>{const i=Math.max(0,Math.min(1,Y-r));return a("span",{className:["relative inline-flex shrink-0",m[L],u.xs,w||k?"":d].filter(Boolean).join(" "),children:[e("span",{className:[b,m[L],k?"text-(--neba-disabled-fg)":"text-(--n-empty)"].join(" "),children:N??e(t,{})}),e("span",{"aria-hidden":"true",className:"pointer-events-none absolute inset-y-0 start-0 overflow-hidden",style:{width:100*i+"%"},children:e("span",{className:[b,m[L],k?"text-(--neba-disabled-fg)":"text-(--n-fill)",f].join(" "),children:j??e(l,{})})}),w?null:Array.from({length:X},(a,n)=>{const l=Number((r+(n+1)*W).toFixed(4));return e("label",{className:["absolute inset-y-0",k?"cursor-not-allowed":"cursor-pointer"].join(" "),style:{insetInlineStart:100*n/X+"%",width:100/X+"%"},onPointerEnter:()=>{k||T(l)},children:e("input",{type:"radio",className:h,name:D,value:l,checked:K===l,disabled:k,required:C,"aria-label":Z(l),onChange:()=>$(l),onClick:()=>{M&&K===l&&$(0)}})},l)})]},r)}),ee=["inline-flex items-center align-middle",c[L],k?"cursor-not-allowed":"",B??""].filter(Boolean).join(" "),ae={...s(P,0,"solid"),"--n-empty":"color-mix(in oklab, var(--neba-muted-fg) 40%, transparent)",...R};return e("div",w?{ref:E,role:"img","aria-label":Z(Math.max(0,Math.min(U,K))),className:ee,style:ae,onPointerLeave:V,...z,children:_}:{ref:E,role:"radiogroup","aria-label":I??F.label,"aria-disabled":k||void 0,"aria-required":C||void 0,className:ee,style:ae,onPointerLeave:e=>{T(null),V?.(e)},...z,children:_})});
+"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as n from"react";import{StarIcon as t,StarOutlineIcon as l}from"../../internal/icons.js";import{fillMessage as r,ratingMessages as i,useMessages as s}from"../../internal/i18n.js";import{controlSlots as o,cx as d,focusWithinRingClasses as c,gapClasses as m,iconSizeClasses as u,radiusClasses as h,srOnlyClasses as f,transitionClasses as b}from"../../internal/styles.js";const p="flex items-center justify-center";export const Rating=/*@__PURE__*/n.forwardRef(function({value:x,defaultValue:y=0,onValueChange:v,count:g=5,precision:j=1,icon:N,emptyIcon:M,clearable:w=!0,readOnly:k=!1,disabled:S=!1,name:C,required:L=!1,size:P="md",color:q="warning",locale:I,label:A,valueLabel:R,className:V,style:z,onPointerLeave:E,...F},O){const B=s(i,I),D=n.useId(),G=C??D,[H,J]=n.useState(y),K=void 0!==x,Q=K?x:H,[T,U]=n.useState(null),W=Math.max(1,Math.floor(g)),X=j>0&&j<=1?j:1,Y=Math.round(1/X),Z=Math.max(0,Math.min(W,T??Q)),$=n.useCallback(e=>R?R(e,W):e<=0?B.empty:r(B.value,{value:String(e),max:String(W)}),[R,W,B]),_=e=>{K||J(e),v?.(e)},ee=Array.from({length:W},(n,r)=>{const i=Math.max(0,Math.min(1,Z-r));return a("span",{className:d("relative inline-flex shrink-0",u[P],h.xs,k||S?"":c),children:[e("span",{className:[p,u[P],S?"text-(--neba-disabled-fg)":"text-(--n-empty)"].join(" "),children:M??e(l,{})}),e("span",{"aria-hidden":"true",className:"pointer-events-none absolute inset-y-0 start-0 overflow-hidden",style:{width:100*i+"%"},children:e("span",{className:[p,u[P],S?"text-(--neba-disabled-fg)":"text-(--n-fill)",b].join(" "),children:N??e(t,{})})}),k?null:Array.from({length:Y},(a,n)=>{const t=Number((r+(n+1)*X).toFixed(4));return e("label",{className:["absolute inset-y-0",S?"cursor-not-allowed":"cursor-pointer"].join(" "),style:{insetInlineStart:100*n/Y+"%",width:100/Y+"%"},onPointerEnter:()=>{S||U(t)},children:e("input",{type:"radio",className:f,name:G,value:t,checked:Q===t,disabled:S,required:L,"aria-label":$(t),onChange:()=>_(t),onClick:()=>{w&&Q===t&&_(0)}})},t)})]},r)}),ae=d("inline-flex items-center align-middle",m[P],S?"cursor-not-allowed":"",V??""),ne={...o(q,0,"solid"),"--n-empty":"color-mix(in oklab, var(--neba-muted-fg) 40%, transparent)",...z};return e("div",k?{ref:O,role:"img","aria-label":$(Math.max(0,Math.min(W,Q))),className:ae,style:ne,onPointerLeave:E,...F,children:ee}:{ref:O,role:"radiogroup","aria-label":A??B.label,"aria-disabled":S||void 0,"aria-required":L||void 0,className:ae,style:ne,onPointerLeave:e=>{U(null),E?.(e)},...F,children:ee})});

package/dist/components/scroll-area/ScrollArea.d.ts

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import type { NebaColor, NebaSize } from '../../types.js';
+/**
+ * Which axes may scroll.
+ *
+ * `NebaOrientation` plus a third value rather than the type itself, because
+ * "both" is meaningless everywhere that type is used today — a Divider, a
+ * ButtonGroup and a Slider each run one way — and widening it there to say it
+ * here would be the second spelling this library keeps out.
+ */
+export type ScrollAreaOrientation = 'vertical' | 'horizontal' | 'both';
+export interface ScrollAreaProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color'> {
+    /** Which axes may scroll. @default 'vertical' */
+    orientation?: ScrollAreaOrientation;
+    /**
+     * A fixed height. A vertical scroll area has to be bounded by something or
+     * there is nothing to scroll; this is the shortest way to say what by.
+     */
+    height?: number | string;
+    /** The same, as a ceiling rather than a fixed height. */
+    maxHeight?: number | string;
+    /** Thickness of the scrollbar and the size of its inset. @default 'md' */
+    size?: NebaSize;
+    /** The family the thumb carries. @default 'primary' */
+    color?: NebaColor;
+    /**
+     * Fades the content out at each edge that has more beyond it, and only at
+     * those edges — so the fade is a statement about the content rather than
+     * decoration, and it disappears at the top when you are at the top.
+     * @default false
+     */
+    fade?: boolean;
+    children?: React.ReactNode;
+}
+/**
+ * A box with its own scrollbar.
+ *
+ * The browser's scrollbar is drawn by the operating system, which means it is
+ * seventeen pixels wide on one machine, overlaid and invisible on the next, and
+ * a different colour in a dark theme than the sheet it is cut into. This one is
+ * an element, so it is the same everywhere and it can be made of the library's
+ * own tokens.
+ *
+ * It is not [ScrollZone](./scroll-zone), which is a *rail* — a strip of items
+ * laid out in one direction with buttons that step through them, for a row of
+ * cards or a line of chips. This is the plain case: a box that is too small for
+ * what is in it. Underneath, both are ordinary scroll containers, so the wheel,
+ * the trackpad, the keyboard and momentum are the browser's own in both.
+ */
+export declare const ScrollArea: React.ForwardRefExoticComponent<ScrollAreaProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/scroll-area/ScrollArea.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as a from"react";import{ScrollArea as n}from"@base-ui/react/scroll-area";import{cx as o,focusRingClasses as l,toLength as t}from"../../internal/styles.js";const i={xs:"0.25rem",sm:"0.3125rem",md:"0.375rem",lg:"0.5rem",xl:"0.625rem"},s={xs:"1rem",sm:"1.25rem",md:"1.5rem",lg:"2rem",xl:"2.5rem"},c=["flex touch-none select-none rounded-full p-px","bg-transparent hover:bg-(--n-soft)","opacity-0 transition-[opacity,background-color] duration-(--neba-duration) ease-(--neba-ease)","data-[hovering]:opacity-100 data-[scrolling]:opacity-100 data-[scrolling]:duration-0"].join(" "),m="flex-1 rounded-full bg-(--n-thumb) hover:bg-(--n-thumb-hover)";export const ScrollArea=/*@__PURE__*/a.forwardRef(function({orientation:a="vertical",height:h,maxHeight:d,size:b="md",color:u="primary",fade:f=!1,className:g,style:p,children:x,...v},y){const N="vertical"===a||"both"===a,w="horizontal"===a||"both"===a;return r(n.Root,{ref:y,className:o("relative overflow-hidden",g??""),style:{"--n-soft":`var(--neba-${u}-soft)`,"--n-ring":`var(--neba-${u}-ring)`,"--n-thumb":`color-mix(in oklab, var(--neba-${u}-accent) 35%, transparent)`,"--n-thumb-hover":`color-mix(in oklab, var(--neba-${u}-accent) 55%, transparent)`,"--n-rail":i[b],"--n-fade":s[b],height:t(h),maxHeight:t(d),...p},...v,children:[e(n.Viewport,{style:{height:"100%",width:"100%"},className:o("overscroll-contain [outline:none]",l,f?"neba-scroll-fade":""),children:e(n.Content,{className:"min-w-full",children:x})}),N?e(n.Scrollbar,{orientation:"vertical",className:`${c} w-(--n-rail) [margin-block:2px]`,children:e(n.Thumb,{className:m})}):null,w?e(n.Scrollbar,{orientation:"horizontal",className:`${c} h-(--n-rail) [margin-inline:2px]`,children:e(n.Thumb,{className:m})}):null,N&&w?e(n.Corner,{}):null]})});

package/dist/components/scroll-area/index.d.ts

@@ -0,0 +1,2 @@
+export { ScrollArea } from './ScrollArea.js';
+export type { ScrollAreaOrientation, ScrollAreaProps } from './ScrollArea.js';

package/dist/components/scroll-area/index.js

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

package/dist/components/scroll-zone/ScrollZone.d.ts

@@ -9,8 +9,9 @@ import type { NebaOrientation, NebaStyleProps } from '../../types.js';
  * - `always` — both, from the first paint, with the one that has nowhere to go
  *   `disabled` rather than gone. What a row whose content arrives later wants,
  *   since the buttons do not appear under the pointer half a second in.
- * - `none` — none at all. Dragging, the wheel and the arrow keys are still
- *   there; this is the strip that scrolls the way a phone scrolls.
+ * - `none` — none at all. Dragging, the arrow keys and whatever the pointer can
+ *   already swipe with are still there; this is the strip that scrolls the way
+ *   a phone scrolls.
  */
 export type ScrollZoneButtons = 'auto' | 'always' | 'none';
 /**
@@ -28,19 +29,20 @@ export type ScrollZoneMode = 'item' | 'page' | 'hold';
 /**
  * Where the scroll buttons sit, which is also where the strip ends.
  *
+ * - `inline` — beside the strip, in the layout. The default. The scroller stops
+ *   where the button starts, so an item is *cut off* at the button's edge
+ *   rather than sliding beneath it: nothing is ever half-hidden behind a
+ *   control, and the button is legible over the page rather than over whatever
+ *   it landed on.
  * - `overlay` — over the ends of the strip, which keeps every pixel of the box
- *   for content and lets an item pass under a button. The default, and what a
- *   shelf of pictures wants.
- * - `inline` — beside the strip, in the layout. The scroller stops where the
- *   button starts, so an item is *cut off* at the button's edge rather than
- *   sliding beneath it: nothing is ever half-hidden behind a control, and the
- *   button is legible over the page rather than over whatever it landed on.
+ *   for content and lets an item pass under a button. What a shelf of pictures
+ *   wants, where the thing under the button is a picture that carries on.
  *
  * The lane an `inline` button sits in is kept even while that button has
  * nowhere to go, or the strip would resize under the pointer every time it
  * reached an end.
  */
-export type ScrollZoneButtonPlacement = 'overlay' | 'inline';
+export type ScrollZoneButtonPlacement = 'inline' | 'overlay';
 export interface ScrollZoneProps extends NebaStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color'> {
     /**
      * Which way the children run, and therefore which way the zone scrolls.
@@ -63,10 +65,10 @@ export interface ScrollZoneProps extends NebaStyleProps, Omit<React.ComponentPro
     /** When the scroll buttons are drawn. @default 'auto' */
     buttons?: ScrollZoneButtons;
     /**
-     * Whether the buttons sit over the strip or beside it. `inline` is what to
-     * reach for when an item disappearing under a button reads as a bug rather
-     * than as depth.
-     * @default 'overlay'
+     * Whether the buttons sit beside the strip or over it. `overlay` is what to
+     * reach for when the thing under a button is content that carries on rather
+     * than something to be read whole.
+     * @default 'inline'
      */
     buttonPlacement?: ScrollZoneButtonPlacement;
     /** What pressing one does. @default 'item' */
@@ -89,6 +91,21 @@ export interface ScrollZoneProps extends NebaStyleProps, Omit<React.ComponentPro
      * @default true
      */
     drag?: boolean;
+    /**
+     * Turns a wheel rolled over the strip into travel along it — the one axis a
+     * mouse has, on a strip that does not run along it. Off by default, because a
+     * wheel taken from the page is the page's: a reader who meant to scroll past
+     * the shelf is held by it instead.
+     *
+     * What it does take it gives back at the ends, so a strip with nothing left
+     * ahead of it is something to scroll past rather than something to be caught
+     * in. A trackpad swiping sideways is left alone — that already scrolls the
+     * strip, and answering it here would move twice as far as it was asked to —
+     * and a vertical zone ignores the prop, the wheel already pointing the way it
+     * runs.
+     * @default false
+     */
+    wheel?: boolean;
     /** Shows the native scrollbar. @default false */
     scrollbar?: boolean;
     /**
@@ -109,10 +126,11 @@ export interface ScrollZoneProps extends NebaStyleProps, Omit<React.ComponentPro
  *
  * The mechanism is an ordinary scroll container, and everything the component
  * offers is a way of driving one. Swiping on a phone, two-finger dragging on a
- * trackpad, the wheel, the arrow keys and the scrollbar are the browser's own
- * and are never intercepted; what is added on top is a pair of buttons for the
- * pointer that has neither a wheel nor a finger, and a mouse drag for the strip
- * that reads as something to pull rather than something to page.
+ * trackpad, the arrow keys and the scrollbar are the browser's own and are
+ * never intercepted; what is added on top is a pair of buttons for the pointer
+ * that has neither a wheel nor a finger, a mouse drag for the strip that reads
+ * as something to pull rather than something to page, and — only where it is
+ * asked for — the wheel turned onto the axis the strip runs along.
  *
  * Nothing is transformed. A translated track would have to argue for an
  * exception to the house rule; a scroll offset does not, and it is also what

package/dist/components/scroll-zone/ScrollZone.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{IconButton as r}from"../icon-button/IconButton.js";import{spacingValue as o}from"../../internal/grid.js";import{scrollMessages as i,useMessages as s}from"../../internal/i18n.js";import{ChevronIcon as l}from"../../internal/icons.js";import{cx as a}from"../../internal/styles.js";const c={xs:"p-1",sm:"p-1.5",md:"p-2",lg:"p-3",xl:"p-4"},u={xs:"gap-1",sm:"gap-1.5",md:"gap-2",lg:"gap-3",xl:"gap-4"};export const ScrollZone=/*@__PURE__*/n.forwardRef(function({orientation:d="horizontal",lines:m=1,spacing:p=2,buttons:f="auto",buttonPlacement:v="overlay",mode:b="item",step:w=1,speed:g=900,snap:h=!1,drag:y=!0,scrollbar:x=!1,variant:k="solid",size:L="md",color:E="primary",density:C="default",locale:R,label:j,previousLabel:P,nextLabel:M,className:N,style:T,children:A,...z},D){const S=s(i,R),B="horizontal"===d,F=Math.max(1,Math.round(m)),H=Math.max(1,Math.round(w)),I=n.useRef(null),W=n.useRef(null),[$,q]=n.useState({back:!1,forward:!1}),O=n.useCallback(()=>{const e=I.current;if(!e)return;const t=B?e.clientWidth:e.clientHeight,n=B?e.scrollWidth:e.scrollHeight,r=Math.abs(B?e.scrollLeft:e.scrollTop);q(e=>{const o=r>1,i=n-t-r>1;return e.back===o&&e.forward===i?e:{back:o,forward:i}})},[B]);n.useEffect(()=>{const e=I.current,t=W.current;if(!e)return;if(O(),"undefined"==typeof ResizeObserver)return;const n=new ResizeObserver(O);return n.observe(e),t&&n.observe(t),()=>n.disconnect()},[O]);const X=n.useCallback(()=>{const e=I.current;return e&&B&&"rtl"===getComputedStyle(e).direction?-1:1},[B]),Y=n.useCallback((e,t)=>{const n=I.current;if(!n)return;const r=t?"undefined"!=typeof window&&window.matchMedia?.("(prefers-reduced-motion: reduce)").matches?"auto":"smooth":"auto";n.scrollBy(B?{left:e,behavior:r}:{top:e,behavior:r})},[B]),_=n.useCallback(()=>{const e=I.current,t=W.current;if(!e||!t)return[];const n=B&&"rtl"===getComputedStyle(e).direction,r=B?n?"right":"left":"top",o=n?-1:1,i=e.getBoundingClientRect()[r],s=[];for(const e of Array.from(t.children)){const t=Math.round((e.getBoundingClientRect()[r]-i)*o);s.includes(t)||s.push(t)}return s.sort((e,t)=>e-t)},[B]),K=n.useCallback((e,t=b)=>{const n=I.current;if(!n)return;const r=X(),o=B?n.clientWidth:n.clientHeight;if("page"===t)return void Y(o*(e?1:-1)*r,!0);const i=_(),s=i.filter(e=>e>1),l=i.filter(e=>e<-1),a=e?s[H-1]:l[l.length-H];Y(void 0!==a?a*r:o*(e?1:-1)*r,!0)},[X,B,_,H,b,Y]),V=n.useRef(null);n.useEffect(()=>()=>V.current?.(),[]);const Z=n.useCallback((e,t)=>{if(V.current)return;const n=X(),r=performance.now();let o=r,i=0;const s=t=>{const r=t-o;o=t,Y(g*r/1e3*(e?1:-1)*n,!1),i=requestAnimationFrame(s)};i=requestAnimationFrame(s);const l=()=>{cancelAnimationFrame(i),V.current=null,window.removeEventListener(t,l),window.removeEventListener("pointercancel",l),window.removeEventListener("blur",l),performance.now()-r<140&&K(e,"item")};V.current=l,window.addEventListener(t,l),window.addEventListener("pointercancel",l),window.addEventListener("blur",l)},[K,X,Y,g]),G=n.useRef(null);function J(e){return"hold"!==b?{onClick:()=>K(e)}:{onPointerDown:t=>{0===t.button&&Z(e,"pointerup")},onKeyDown:t=>{"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),Z(e,"keyup"))}}}n.useEffect(()=>()=>G.current?.(),[]);const Q="none"!==f&&("always"===f||$.back||$.forward),U="inline"===v;function ee(t){const n=t?$.forward:$.back;if("auto"===f&&!n&&!U)return e("span",{});const o=B?t?"-rotate-90 rtl:rotate-90":"rotate-90 rtl:-rotate-90":t?"":"rotate-180",i="auto"===f&&!n,s=e(r,{variant:k,size:L,color:E,density:C,elevation:1,label:t?M??S.next:P??S.previous,disabled:!n,className:"pointer-events-auto",icon:e("span",{className:a("flex items-center",o),children:e(l,{})}),...J(t)});return U?e("span",{className:a("flex shrink-0 items-center justify-center",i?"invisible":""),inert:i,children:s}):s}return t("div",{ref:D,className:a("relative flex min-w-0",U&&B?"flex-row items-stretch":"flex-col",U?u[L]:"",N),style:{"--n-ring":`var(--neba-${E}-ring)`,...T},...z,children:[Q&&U?ee(!1):null,e("div",{ref:I,tabIndex:0,role:j?"group":void 0,"aria-label":j,className:a("min-h-0 min-w-0 grow",B?"overflow-x-auto overflow-y-hidden":"overflow-y-auto overflow-x-hidden",h?B?"snap-x snap-mandatory":"snap-y snap-mandatory":"",x?"":"[scrollbar-width:none] [&::-webkit-scrollbar]:hidden",y&&($.back||$.forward)?"cursor-grab data-[dragging]:cursor-grabbing":"","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:[outline-offset:-2px]"),onScroll:O,onPointerDown:function(e){if(!y||"touch"===e.pointerType||0!==e.button)return;G.current?.();const t=e.currentTarget,n=e.clientX,r=e.clientY,o=t.scrollLeft,i=t.scrollTop;let s=!1;const l=document.body.style.getPropertyValue("-webkit-user-select"),a=e=>{const l=e.clientX-n,a=e.clientY-r;if(!s){if(Math.abs(B?l:a)<4)return;s=!0,t.setPointerCapture(e.pointerId),t.dataset.dragging="true",document.body.style.setProperty("-webkit-user-select","none")}B?t.scrollLeft=o-l:t.scrollTop=i-a},c=()=>{G.current=null,t.removeEventListener("pointermove",a),t.removeEventListener("pointerup",u),t.removeEventListener("pointercancel",c),delete t.dataset.dragging,l?document.body.style.setProperty("-webkit-user-select",l):document.body.style.removeProperty("-webkit-user-select")},u=()=>{const e=s;if(c(),!e)return;const n=e=>{e.stopPropagation(),e.preventDefault()};t.addEventListener("click",n,{capture:!0,once:!0}),window.setTimeout(()=>t.removeEventListener("click",n,!0),0)};G.current=c,t.addEventListener("pointermove",a),t.addEventListener("pointerup",u),t.addEventListener("pointercancel",c)},children:e("div",{ref:W,className:a(h?"[&>*]:snap-start":""),style:{display:"grid",gap:o(p),gridAutoFlow:B?"column":"row",...B?{width:"max-content",gridTemplateRows:`repeat(${F}, auto)`,gridAutoColumns:"max-content"}:{gridTemplateColumns:`repeat(${F}, minmax(0, 1fr))`,gridAutoRows:"max-content"}},children:A})}),Q&&U?ee(!0):null,Q&&!U?t("div",{className:a("pointer-events-none absolute inset-0 flex justify-between",B?"items-center":"flex-col items-center",c[L]),children:[ee(!1),ee(!0)]}):null]})});
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{IconButton as r}from"../icon-button/IconButton.js";import{spacingValue as o}from"../../internal/grid.js";import{scrollMessages as i,useMessages as l}from"../../internal/i18n.js";import{ChevronIcon as s}from"../../internal/icons.js";import{queryMatches as a,reducedMotionQuery as c}from"../../internal/media.js";import{observeResize as u}from"../../internal/observe.js";import{cx as d}from"../../internal/styles.js";const f={xs:"p-1",sm:"p-1.5",md:"p-2",lg:"p-3",xl:"p-4"},m={xs:"gap-1",sm:"gap-1.5",md:"gap-2",lg:"gap-3",xl:"gap-4"};export const ScrollZone=/*@__PURE__*/n.forwardRef(function({orientation:p="horizontal",lines:v=1,spacing:b=2,buttons:w="auto",buttonPlacement:g="inline",mode:h="item",step:y=1,speed:x=900,snap:k=!1,drag:L=!0,wheel:E=!1,scrollbar:C=!1,variant:j="solid",size:M="md",color:P="primary",density:R="default",locale:N,label:T,previousLabel:A,nextLabel:D,className:W,style:S,children:z,...B},F){const Y=l(i,N),H="horizontal"===p,I=Math.max(1,Math.round(v)),X=Math.max(1,Math.round(y)),$=n.useRef(null),q=n.useRef(null),[K,_]=n.useState({back:!1,forward:!1}),V=n.useCallback(()=>{const e=$.current;if(!e)return;const t=H?e.clientWidth:e.clientHeight,n=H?e.scrollWidth:e.scrollHeight,r=Math.abs(H?e.scrollLeft:e.scrollTop);_(e=>{const o=r>1,i=n-t-r>1;return e.back===o&&e.forward===i?e:{back:o,forward:i}})},[H]);n.useEffect(()=>{const e=$.current,t=q.current;if(!e)return;V();const n=[u(e,V),t?u(t,V):null];return()=>{for(const e of n)e?.()}},[V]);const Z=n.useCallback(()=>{const e=$.current;return e&&H&&"rtl"===getComputedStyle(e).direction?-1:1},[H]),G=n.useCallback((e,t)=>{const n=$.current;if(!n)return;const r=t?a(c)?"auto":"smooth":"auto";n.scrollBy(H?{left:e,behavior:r}:{top:e,behavior:r})},[H]),J=n.useCallback(()=>{const e=$.current,t=q.current;if(!e||!t)return[];const n=H&&"rtl"===getComputedStyle(e).direction,r=H?n?"right":"left":"top",o=n?-1:1,i=e.getBoundingClientRect()[r],l=[];for(const e of Array.from(t.children)){const t=Math.round((e.getBoundingClientRect()[r]-i)*o);l.includes(t)||l.push(t)}return l.sort((e,t)=>e-t)},[H]),O=n.useCallback((e,t=h)=>{const n=$.current;if(!n)return;const r=Z(),o=H?n.clientWidth:n.clientHeight;if("page"===t)return void G(o*(e?1:-1)*r,!0);const i=J(),l=i.filter(e=>e>1),s=i.filter(e=>e<-1),a=e?l[X-1]:s[s.length-X];G(void 0!==a?a*r:o*(e?1:-1)*r,!0)},[Z,H,J,X,h,G]),Q=n.useRef(null);n.useEffect(()=>()=>Q.current?.(),[]);const U=n.useCallback((e,t)=>{if(Q.current)return;const n=Z(),r=performance.now();let o=r,i=0;const l=t=>{const r=t-o;o=t,G(x*r/1e3*(e?1:-1)*n,!1),i=requestAnimationFrame(l)};i=requestAnimationFrame(l);const s=()=>{cancelAnimationFrame(i),Q.current=null,window.removeEventListener(t,s),window.removeEventListener("pointercancel",s),window.removeEventListener("blur",s),performance.now()-r<140&&O(e,"item")};Q.current=s,window.addEventListener(t,s),window.addEventListener("pointercancel",s),window.addEventListener("blur",s)},[O,Z,G,x]),ee=n.useRef(null);function te(e){return"hold"!==h?{onClick:()=>O(e)}:{onPointerDown:t=>{0===t.button&&U(e,"pointerup")},onKeyDown:t=>{"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),U(e,"keyup"))}}}n.useEffect(()=>()=>ee.current?.(),[]),n.useEffect(()=>{const e=$.current;if(!e||!E||!H)return;const t=t=>{if(t.ctrlKey||Math.abs(t.deltaX)>Math.abs(t.deltaY))return;const n=1===t.deltaMode?16:2===t.deltaMode?e.clientWidth:1,r=t.deltaY*n;if(!r)return;const o=Math.abs(e.scrollLeft);(r>0?e.scrollWidth-e.clientWidth-o>1:o>1)&&(t.preventDefault(),G(r*Z(),!1))};return e.addEventListener("wheel",t,{passive:!1}),()=>e.removeEventListener("wheel",t)},[Z,H,G,E]);const ne="none"!==w&&("always"===w||K.back||K.forward),re="inline"===g;function oe(t){const n=t?K.forward:K.back;if("auto"===w&&!n&&!re)return e("span",{});const o=H?t?"-rotate-90 rtl:rotate-90":"rotate-90 rtl:-rotate-90":t?"":"rotate-180",i="auto"===w&&!n,l=e(r,{variant:j,size:M,color:P,density:R,elevation:1,label:t?D??Y.next:A??Y.previous,disabled:!n,className:"pointer-events-auto",icon:e("span",{className:d("flex items-center",o),children:e(s,{})}),...te(t)});return re?e("span",{className:d("flex shrink-0 items-center justify-center",i?"invisible":""),inert:i,children:l}):l}return t("div",{ref:F,className:d("relative flex min-w-0",re&&H?"flex-row items-stretch":"flex-col",re?m[M]:"",W),style:{"--n-ring":`var(--neba-${P}-ring)`,...S},...B,children:[ne&&re?oe(!1):null,e("div",{ref:$,tabIndex:0,role:"group","aria-label":T??Y.label,className:d("min-h-0 min-w-0 grow",H?"overflow-x-auto overflow-y-hidden":"overflow-y-auto overflow-x-hidden",k?H?"snap-x snap-mandatory":"snap-y snap-mandatory":"",C?"":"[scrollbar-width:none] [&::-webkit-scrollbar]:hidden",L&&(K.back||K.forward)?"cursor-grab data-[dragging]:cursor-grabbing":"","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:[outline-offset:-2px]"),onScroll:V,onPointerDown:function(e){if(!L||"touch"===e.pointerType||0!==e.button)return;ee.current?.();const t=e.currentTarget,n=e.clientX,r=e.clientY,o=t.scrollLeft,i=t.scrollTop;let l=!1;const s=document.body.style.getPropertyValue("-webkit-user-select"),a=e=>{const s=e.clientX-n,a=e.clientY-r;if(!l){if(Math.abs(H?s:a)<4)return;l=!0,t.setPointerCapture(e.pointerId),t.dataset.dragging="true",document.body.style.setProperty("-webkit-user-select","none")}H?t.scrollLeft=o-s:t.scrollTop=i-a},c=()=>{ee.current=null,t.removeEventListener("pointermove",a),t.removeEventListener("pointerup",u),t.removeEventListener("pointercancel",c),delete t.dataset.dragging,s?document.body.style.setProperty("-webkit-user-select",s):document.body.style.removeProperty("-webkit-user-select")},u=()=>{const e=l;if(c(),!e)return;const n=e=>{e.stopPropagation(),e.preventDefault()};t.addEventListener("click",n,{capture:!0,once:!0}),window.setTimeout(()=>t.removeEventListener("click",n,!0),0)};ee.current=c,t.addEventListener("pointermove",a),t.addEventListener("pointerup",u),t.addEventListener("pointercancel",c)},children:e("div",{ref:q,className:d(k?"[&>*]:snap-start":""),style:{display:"grid",gap:o(b),gridAutoFlow:H?"column":"row",...H?{width:"max-content",gridTemplateRows:`repeat(${I}, auto)`,gridAutoColumns:"max-content"}:{gridTemplateColumns:`repeat(${I}, minmax(0, 1fr))`,gridAutoRows:"max-content"}},children:z})}),ne&&re?oe(!0):null,ne&&!re?t("div",{className:d("pointer-events-none absolute inset-0 flex justify-between",H?"items-center":"flex-col items-center",f[M]),children:[oe(!1),oe(!0)]}):null]})});

package/dist/components/segmented-button/SegmentedButton.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{Radio as n}from"@base-ui/react/radio";import{RadioGroup as r}from"@base-ui/react/radio-group";import{controlHeightClasses as s,controlSlots as l,controlTextClasses as o,gapClasses as i,hasContent as d,iconClasses as u,paddingXClasses as c,surfaceClasses as f,transitionClasses as h}from"../../internal/styles.js";const p=/*@__PURE__*/a.createContext({variant:"outline",size:"md",density:"default",fullWidth:!1}),b={solid:`${f} bg-(--n-panel) p-1 [box-shadow:var(--n-elev),var(--neba-plate-glass)]`,outline:`${f} border bg-(--n-panel) p-1 [border-color:var(--n-line)] [box-shadow:var(--n-elev),var(--neba-plate-glass)]`,text:""},m={solid:`${f} bg-(--n-fill) [box-shadow:var(--neba-shadow-1),var(--neba-plate-solid)]`,outline:`${f} bg-(--n-panel-press) [box-shadow:var(--neba-shadow-1),var(--neba-plate-glass)]`,text:`${f} bg-(--n-panel-press) [box-shadow:var(--neba-shadow-1),var(--neba-plate-glass)]`},v={solid:"data-[checked]:text-(--n-on-solid)",outline:"data-[checked]:text-(--n-accent)",text:"data-[checked]:text-(--n-accent)"};export const Segment=/*@__PURE__*/a.forwardRef(function({value:r,startIcon:l,endIcon:f,disabled:b=!1,className:m,children:x,...g},y){const{variant:w,size:k,density:$,fullWidth:j}=a.useContext(p);return t(n.Root,{ref:y,value:r,disabled:b,"data-segment":"",className:["relative z-10 inline-flex shrink-0 cursor-pointer items-center justify-center select-none","whitespace-nowrap font-medium","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",s[k],o[k],i[k],c[$][k],"rounded-full",h,u,"text-(--neba-muted-fg) hover:text-(--neba-fg)",v[w],"focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:[outline-offset:-2px]","data-[disabled]:cursor-not-allowed data-[disabled]:text-(--neba-disabled-fg)","data-[readonly]:cursor-default",j?"flex-1":"",m??""].filter(Boolean).join(" "),...g,children:[d(l)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:l}):null,x,d(f)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:f}):null]})});export const SegmentedButton=/*@__PURE__*/a.forwardRef(function({variant:n="outline",size:s="md",color:o="primary",density:i="default",elevation:d=0,value:u,defaultValue:c=null,onValueChange:f,disabled:v=!1,readOnly:x=!1,name:g,fullWidth:y=!1,className:w,style:k,children:$,...j},R){const[N,z]=a.useState(c),W=void 0!==u,C=W?u:N,P=a.useRef(null),S=a.useRef(null),A=a.useCallback(e=>{const t=P.current,a=S.current;if(!t||!a)return;const n=t.querySelector("[data-segment][data-checked]");if(!n)return;const r=!e||!a.hasAttribute("data-ready");r&&a.removeAttribute("data-ready"),a.style.setProperty("--n-seg-x",`${n.offsetLeft}px`),a.style.setProperty("--n-seg-y",`${n.offsetTop}px`),a.style.setProperty("--n-seg-w",`${n.offsetWidth}px`),a.style.setProperty("--n-seg-h",`${n.offsetHeight}px`),r&&a.offsetWidth,a.setAttribute("data-ready","")},[]);a.useLayoutEffect(()=>{A(!0)},[A,C,n,s,i,y,$]),a.useEffect(()=>{const e=P.current;if(!e)return;const t=new ResizeObserver(()=>A(!1));return t.observe(e),()=>t.disconnect()},[A]);const B=a.useMemo(()=>({variant:n,size:s,density:i,fullWidth:y}),[n,s,i,y]);return e(p.Provider,{value:B,children:t(r,{ref:e=>{P.current=e,"function"==typeof R?R(e):R&&(R.current=e)},value:C,onValueChange:e=>{const t=e??null;W||z(t),f?.(t)},disabled:v,readOnly:x,name:g,className:["relative inline-flex items-center rounded-full",b[n],h,x?"[filter:saturate(0.55)]":"",y?"flex w-full":"",w??""].filter(Boolean).join(" "),style:{...l(o,d,n),...k},...j,children:[null!=C?e("span",{ref:S,"aria-hidden":"true",className:["pointer-events-none absolute rounded-full","left-(--n-seg-x) top-(--n-seg-y) h-(--n-seg-h) w-(--n-seg-w)",m[n],"[transition-property:left,top,width,height]","[transition-timing-function:var(--neba-ease)]","[transition-duration:0ms] data-[ready]:[transition-duration:var(--neba-duration)]"].join(" ")}):null,$]})})});
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{Radio as n}from"@base-ui/react/radio";import{RadioGroup as r}from"@base-ui/react/radio-group";import{observeResize as s}from"../../internal/observe.js";import{controlHeightClasses as l,controlSlots as o,controlTextClasses as i,cx as d,gapClasses as u,hasContent as c,iconClasses as f,paddingXClasses as p,surfaceClasses as h,transitionClasses as b}from"../../internal/styles.js";const m=/*@__PURE__*/a.createContext({variant:"outline",size:"md",density:"default",fullWidth:!1}),v={solid:`${h} bg-(--n-panel) p-1 [box-shadow:var(--n-elev),var(--neba-plate-glass)]`,outline:`${h} border bg-(--n-panel) p-1 [border-color:var(--n-line)] [box-shadow:var(--n-elev),var(--neba-plate-glass)]`,text:""},x={solid:`${h} bg-(--n-fill) [box-shadow:var(--neba-shadow-1),var(--neba-plate-solid)]`,outline:`${h} bg-(--n-panel-press) [box-shadow:var(--neba-shadow-1),var(--neba-plate-glass)]`,text:`${h} bg-(--n-panel-press) [box-shadow:var(--neba-shadow-1),var(--neba-plate-glass)]`},g={solid:"data-[checked]:text-(--n-on-solid)",outline:"data-[checked]:text-(--n-accent)",text:"data-[checked]:text-(--n-accent)"};export const Segment=/*@__PURE__*/a.forwardRef(function({value:r,startIcon:s,endIcon:o,disabled:h=!1,className:v,children:x,...y},w){const{variant:k,size:$,density:j,fullWidth:N}=a.useContext(m);return t(n.Root,{ref:w,value:r,disabled:h,"data-segment":"",className:d("relative z-10 inline-flex shrink-0 cursor-pointer items-center justify-center select-none","whitespace-nowrap font-medium","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",l[$],i[$],u[$],p[j][$],"rounded-full",b,f,"text-(--neba-muted-fg) hover:text-(--neba-fg)",g[k],"focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:[outline-offset:-2px]","data-[disabled]:cursor-not-allowed data-[disabled]:text-(--neba-disabled-fg)","data-[readonly]:cursor-default",N?"flex-1":"",v??""),...y,children:[c(s)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:s}):null,x,c(o)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:o}):null]})});export const SegmentedButton=/*@__PURE__*/a.forwardRef(function({variant:n="outline",size:l="md",color:i="primary",density:d="default",elevation:u=0,value:c,defaultValue:f=null,onValueChange:p,disabled:h=!1,readOnly:g=!1,name:y,fullWidth:w=!1,className:k,style:$,children:j,...N},R){const[W,z]=a.useState(f),C=void 0!==c,P=C?c:W,S=a.useRef(null),A=a.useRef(null),V=a.useCallback(e=>{const t=S.current,a=A.current;if(!t||!a)return;const n=t.querySelector("[data-segment][data-checked]");if(!n)return;const r=!e||!a.hasAttribute("data-ready");r&&a.removeAttribute("data-ready"),a.style.setProperty("--n-seg-x",`${n.offsetLeft}px`),a.style.setProperty("--n-seg-y",`${n.offsetTop}px`),a.style.setProperty("--n-seg-w",`${n.offsetWidth}px`),a.style.setProperty("--n-seg-h",`${n.offsetHeight}px`),r&&a.offsetWidth,a.setAttribute("data-ready","")},[]);a.useLayoutEffect(()=>{V(!0)},[V,P,n,l,d,w,j]),a.useEffect(()=>{const e=S.current;if(e)return s(e,()=>V(!1))},[V]);const B=a.useMemo(()=>({variant:n,size:l,density:d,fullWidth:w}),[n,l,d,w]);return e(m.Provider,{value:B,children:t(r,{ref:e=>{S.current=e,"function"==typeof R?R(e):R&&(R.current=e)},value:P,onValueChange:e=>{const t=e??null;C||z(t),p?.(t)},disabled:h,readOnly:g,name:y,className:["relative inline-flex items-center rounded-full",v[n],b,g?"[filter:saturate(0.55)]":"",w?"flex w-full":"",k??""].filter(Boolean).join(" "),style:{...o(i,u,n),...$},...N,children:[null!=P?e("span",{ref:A,"aria-hidden":"true",className:["pointer-events-none absolute rounded-full","left-(--n-seg-x) top-(--n-seg-y) h-(--n-seg-h) w-(--n-seg-w)",x[n],"[transition-property:left,top,width,height]","[transition-timing-function:var(--neba-ease)]","[transition-duration:0ms] data-[ready]:[transition-duration:var(--neba-duration)]"].join(" ")}):null,j]})})});

package/dist/components/select/Select.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { NebaElevation, NebaStyleProps } from '../../types.js';
+import type { NebaElevation, NebaFieldSlot, NebaSlots, NebaStyleProps } from '../../types.js';
 /**
  * What a Select's value may be.
  *
@@ -18,6 +18,15 @@ export interface SelectOption {
     /** Unavailable, but still listed — the option exists, it just cannot be picked. */
     disabled?: boolean;
 }
+/**
+ * The parts a Select draws behind its root.
+ *
+ * `control` is the trigger — the box the reader presses, which is a TextField's
+ * shell to the pixel and is styled as one. `popup` and `item` are portalled, so
+ * they render at the end of `<body>` and a descendant selector written against
+ * the root will not reach them; these are the only way in.
+ */
+export type SelectSlot = NebaFieldSlot | 'popup' | 'item';
 export interface SelectProps extends NebaStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'defaultValue' | 'children'> {
     /**
      * The options, as data. There is no `<Select.Option>` to compose: what a
@@ -59,6 +68,12 @@ export interface SelectProps extends NebaStyleProps, Omit<React.ComponentPropsWi
     /** Identifies the field when a form is submitted. */
     name?: string;
     id?: string;
+    /**
+     * Class names for the parts behind the root. `className` is the root — the
+     * column holding the label, the trigger and the two lines under it — and the
+     * trigger itself is `classNames.control`.
+     */
+    classNames?: NebaSlots<SelectSlot>;
 }
 /**
  * One value chosen from a list of them.

package/dist/components/select/Select.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as t from"react";import{Select as l}from"@base-ui/react/select";import{Field as n}from"@base-ui/react/field";import{CheckIcon as r,ChevronIcon as i}from"../../internal/icons.js";import{WidthSizer as s}from"../../internal/sizer.js";import{controlHeightClasses as o,controlTextLeadingClasses as d,disabledClasses as c,fieldReadOnlyClasses as m,fieldRestClasses as u,focusWithinRingClasses as h,gapClasses as f,hasContent as p,iconClasses as b,metaTextClasses as g,paddingXClasses as x,radiusClasses as v,stackGapClasses as j,surfaceClasses as N,surfaceSlots as w,transitionClasses as y}from"../../internal/styles.js";const I=["group relative flex w-full cursor-pointer items-center select-none","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",y,"focus-within:[transition-duration:0ms]",h,b].join(" "),S=[N,"max-h-[min(20rem,var(--available-height))] overflow-y-auto overscroll-contain","min-w-[var(--anchor-width)] border bg-(--n-panel-press) p-1","[border-color:var(--n-line)]","[box-shadow:var(--neba-shadow-3),var(--neba-plate-glass)]","[outline:none]"].join(" "),$=["relative flex cursor-pointer items-center gap-2 select-none","rounded-(--neba-radius-xs) py-1.5 pe-2 ps-7",y,"data-[highlighted]:bg-(--n-soft-hover) data-[highlighted]:text-(--n-accent)","data-[selected]:text-(--n-accent) data-[selected]:font-medium","data-[disabled]:cursor-not-allowed data-[disabled]:text-(--neba-disabled-fg)","[outline:none]"].join(" ");export const Select=/*@__PURE__*/t.forwardRef(function({variant:h="outline",size:b="md",color:N="primary",density:y="default",elevation:V=0,items:z,value:k,defaultValue:O,onValueChange:P,placeholder:R,label:T,description:q,error:C,invalid:M,startIcon:W,fullWidth:_=!1,disabled:B=!1,readOnly:D=!1,required:E=!1,name:L,id:A,className:F,style:G,...H},J){const K=null!=C&&!1!==C&&""!==C,Q=M??K,U=Q?"danger":N,X=t.useMemo(()=>z.map(e=>({label:e.label??String(e.value),value:e.value})),[z]),Y=t.useMemo(()=>[...z.map(e=>e.label??String(e.value)),...p(R)?[R]:[]],[z,R]);return a(n.Root,{disabled:B,invalid:Q,className:["flex-col align-top",j[b],_?"flex w-full":"inline-flex",F??""].filter(Boolean).join(" "),style:{...w(U,V),...G},...H,children:[T?e(n.Label,{className:[g[b],"font-medium",B?"text-(--neba-disabled-fg)":"text-(--neba-fg)"].join(" "),children:T}):null,a(l.Root,{id:A,name:L,items:X,value:k,defaultValue:O,onValueChange:e=>P?.(e),disabled:B,readOnly:D,required:E,children:[a(l.Trigger,{ref:J,className:[I,o[b],d[b],v[b],f[b],x[y][b],B?c[h]:D?`${m[h]} cursor-default`:u[h]].join(" "),children:[W?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:W}):null,a("span",{className:"flex min-w-0 flex-1 flex-col",children:[e(l.Value,{className:["w-full truncate text-start","data-[placeholder]:text-(--neba-muted-fg)"].join(" "),placeholder:R}),e(s,{samples:Y})]}),e(l.Icon,{className:["flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)","[transition:rotate_var(--neba-duration)_var(--neba-ease)]","data-[popup-open]:rotate-180"].join(" "),children:e(i,{})})]}),e(l.Portal,{children:e(l.Positioner,{className:"neba-portal z-50 [outline:none]",sideOffset:6,alignItemWithTrigger:!1,children:e(l.Popup,{className:`${S} ${v[b]} ${d[b]}`,style:w(U,3),children:z.map(t=>a(l.Item,{value:t.value,disabled:t.disabled,className:$,children:[e(l.ItemIndicator,{className:"absolute start-1.5 flex size-4 items-center justify-center",children:e(r,{})}),e(l.ItemText,{className:"truncate",children:t.label??String(t.value)})]},String(t.value)))})})})]}),q?e(n.Description,{className:`${g[b]} text-(--neba-muted-fg)`,children:q}):null,K?e(n.Error,{match:!0,className:`${g[b]} text-(--n-accent)`,children:C}):null]})});
+"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as t from"react";import{Select as l}from"@base-ui/react/select";import{Field as n}from"@base-ui/react/field";import{CheckIcon as r,ChevronIcon as i}from"../../internal/icons.js";import{WidthSizer as s}from"../../internal/sizer.js";import{controlHeightClasses as o,controlTextLeadingClasses as c,cx as d,disabledClasses as m,fieldReadOnlyClasses as u,fieldRestClasses as h,focusWithinRingClasses as f,gapClasses as p,hasContent as b,iconClasses as g,metaTextClasses as x,paddingXClasses as v,radiusClasses as N,stackGapClasses as w,surfaceClasses as j,surfaceSlots as y,transitionClasses as I}from"../../internal/styles.js";const S=["group relative flex w-full cursor-pointer items-center select-none","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",I,"focus-within:[transition-duration:0ms]",f,g].join(" "),V=[j,"max-h-[min(20rem,var(--available-height))] overflow-y-auto overscroll-contain","min-w-[var(--anchor-width)] border bg-(--n-panel-press) p-1","[border-color:var(--n-line)]","[box-shadow:var(--neba-shadow-3),var(--neba-plate-glass)]","[outline:none]"].join(" "),z=["relative flex cursor-pointer items-center gap-2 select-none","rounded-(--neba-radius-xs) py-1.5 pe-2 ps-7",I,"data-[highlighted]:bg-(--n-soft-hover) data-[highlighted]:text-(--n-accent)","data-[selected]:text-(--n-accent) data-[selected]:font-medium","data-[disabled]:cursor-not-allowed data-[disabled]:text-(--neba-disabled-fg)","[outline:none]"].join(" ");export const Select=/*@__PURE__*/t.forwardRef(function({variant:f="outline",size:g="md",color:j="primary",density:I="default",elevation:k=0,items:O,value:P,defaultValue:R,onValueChange:T,placeholder:q,label:C,description:M,error:W,invalid:_,startIcon:D,fullWidth:E=!1,disabled:L=!1,readOnly:$=!1,required:A=!1,name:B,id:F,className:G,classNames:H,style:J,...K},Q){const U=null!=W&&!1!==W&&""!==W,X=_??U,Y=X?"danger":j,Z=t.useMemo(()=>O.map(e=>({label:e.label??String(e.value),value:e.value})),[O]),ee=t.useMemo(()=>[...O.map(e=>e.label??String(e.value)),...b(q)?[q]:[]],[O,q]);return a(n.Root,{disabled:L,invalid:X,className:d("flex-col align-top",w[g],E?"flex w-full":"inline-flex",G??""),style:{...y(Y,k),...J},...K,children:[C?e(n.Label,{className:d(x[g],"font-medium",L?"text-(--neba-disabled-fg)":"text-(--neba-fg)",H?.label),children:C}):null,a(l.Root,{id:F,name:B,items:Z,value:P,defaultValue:R,onValueChange:e=>T?.(e),disabled:L,readOnly:$,required:A,children:[a(l.Trigger,{ref:Q,className:d(S,o[g],c[g],N[g],p[g],v[I][g],L?m[f]:$?`${u[f]} cursor-default`:h[f],H?.control),children:[D?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:D}):null,a("span",{className:"flex min-w-0 flex-1 flex-col",children:[e(l.Value,{className:["w-full truncate text-start","data-[placeholder]:text-(--neba-muted-fg)"].join(" "),placeholder:q}),e(s,{samples:ee})]}),e(l.Icon,{className:["flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)","[transition:rotate_var(--neba-duration)_var(--neba-ease)]","data-[popup-open]:rotate-180"].join(" "),children:e(i,{})})]}),e(l.Portal,{children:e(l.Positioner,{className:"neba-portal z-50 [outline:none]",sideOffset:6,alignItemWithTrigger:!1,children:e(l.Popup,{className:d(V,N[g],c[g],H?.popup),style:y(Y,3),children:O.map(t=>a(l.Item,{value:t.value,disabled:t.disabled,className:d(z,H?.item),children:[e(l.ItemIndicator,{className:"absolute start-1.5 flex size-4 items-center justify-center",children:e(r,{})}),e(l.ItemText,{className:"truncate",children:t.label??String(t.value)})]},String(t.value)))})})})]}),M?e(n.Description,{className:d(x[g],"text-(--neba-muted-fg)",H?.description),children:M}):null,e(n.Error,U?{match:!0,className:d(x[g],"text-(--n-accent)",H?.error),children:W}:{className:d(x[g],"text-(--n-accent)",H?.error)})]})});

package/dist/components/shortcut/Shortcut.js

@@ -1 +1 @@
-"use client";import{jsx as n,Fragment as e,jsxs as a}from"react/jsx-runtime";import*as o from"react";import{controlHeightClasses as t,controlSlots as r,controlTextClasses as l,paddingXClasses as s,radiusClasses as m,srOnlyClasses as i,surfaceClasses as c,transitionClasses as d}from"../../internal/styles.js";const w=n=>({symbol:n,name:n}),u={mod:{mac:{symbol:"⌘",name:"Command"},windows:w("Ctrl"),linux:w("Ctrl")},meta:{mac:{symbol:"⌘",name:"Command"},windows:w("Win"),linux:w("Super")},ctrl:{mac:{symbol:"⌃",name:"Control"},windows:w("Ctrl"),linux:w("Ctrl")},alt:{mac:{symbol:"⌥",name:"Option"},windows:w("Alt"),linux:w("Alt")},shift:{mac:{symbol:"⇧",name:"Shift"},windows:w("Shift"),linux:w("Shift")},enter:{mac:{symbol:"↩",name:"Enter"},windows:w("Enter"),linux:w("Enter")},tab:{mac:{symbol:"⇥",name:"Tab"},windows:w("Tab"),linux:w("Tab")},escape:{mac:{symbol:"⎋",name:"Escape"},windows:w("Esc"),linux:w("Esc")},backspace:{mac:{symbol:"⌫",name:"Backspace"},windows:w("Backspace"),linux:w("Backspace")},delete:{mac:{symbol:"⌦",name:"Delete"},windows:w("Del"),linux:w("Del")},capslock:{mac:{symbol:"⇪",name:"Caps Lock"},windows:w("Caps Lock"),linux:w("Caps Lock")}},p={cmdorctrl:"mod",commandorcontrol:"mod",cmd:"meta",command:"meta",super:"meta",win:"meta",windows:"meta",control:"ctrl",option:"alt",opt:"alt",return:"enter",esc:"escape",del:"delete",caps:"capslock"},b={up:{symbol:"↑",name:"Arrow up"},down:{symbol:"↓",name:"Arrow down"},left:{symbol:"←",name:"Arrow left"},right:{symbol:"→",name:"Arrow right"},arrowup:{symbol:"↑",name:"Arrow up"},arrowdown:{symbol:"↓",name:"Arrow down"},arrowleft:{symbol:"←",name:"Arrow left"},arrowright:{symbol:"→",name:"Arrow right"}};function f(){if("undefined"==typeof navigator)return"windows";const n=navigator.userAgentData,e=`${n?.platform??""} ${navigator.platform??""} ${navigator.userAgent??""}`;return/mac|iphone|ipad|ipod/i.test(e)?"mac":/win/i.test(e)?"windows":"linux"}function y(){return()=>{}}function x(){return"windows"}const g={xs:"xs",sm:"xs",md:"sm",lg:"md",xl:"lg"},h={solid:[c,"text-(--n-on-solid) bg-(--n-fill)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[c,"border text-(--n-accent) bg-(--n-panel)","[border-color:var(--n-line)]","[box-shadow:var(--n-elev),var(--neba-plate-glass)]"].join(" "),text:"text-(--n-accent) bg-(--n-soft)"},v={xs:"min-w-5.5",sm:"min-w-6.5",md:"min-w-8",lg:"min-w-10",xl:"min-w-12"};export const Shortcut=/*@__PURE__*/o.forwardRef(function({variant:c="outline",size:A="md",color:k="secondary",density:C="compact",elevation:j=0,keys:E,os:S="auto",separator:B,className:N,style:D,...L},T){const $=o.useSyncExternalStore(y,f,x),F="auto"===S?$:S,z=g[A],O=function(n){return Array.isArray(n)?n.map(n=>n.trim()).filter(Boolean):n.split("+").map(n=>n.trim()).filter(Boolean)}(E),R=O.map(n=>function(n,e){const a=n.toLowerCase().replace(/[\s_-]/g,""),o=p[a]??a,t=b[o];if(t)return t;const r=u[o];return r?r[e]:w(1===n.length?n.toUpperCase():n)}(n,F)),U=void 0===B?"mac"===F?null:"+":B,W=["inline-flex shrink-0 items-center justify-center","font-mono font-medium leading-none whitespace-nowrap tabular-nums",t[z],l[z],v[z],s[C][z],m[z],h[c],d].join(" ");return n("span",{ref:T,className:["inline-flex max-w-full items-center gap-1 align-middle",N??""].filter(Boolean).join(" "),style:{...r(k,j,c),...D},...L,children:R.map((t,r)=>a(o.Fragment,{children:[r>0&&null!==U?n("span",{"aria-hidden":"true",className:"text-(--neba-muted-fg)",children:U}):null,n("kbd",{className:W,children:t.symbol===t.name?t.symbol:a(e,{children:[n("span",{"aria-hidden":"true",children:t.symbol}),n("span",{className:i,children:t.name})]})})]},r))})});
+"use client";import{jsx as n,Fragment as e,jsxs as a}from"react/jsx-runtime";import*as o from"react";import{controlHeightClasses as t,controlSlots as r,controlTextClasses as l,cx as s,paddingXClasses as m,radiusClasses as i,srOnlyClasses as c,surfaceClasses as d,transitionClasses as w}from"../../internal/styles.js";const u=n=>({symbol:n,name:n}),p={mod:{mac:{symbol:"⌘",name:"Command"},windows:u("Ctrl"),linux:u("Ctrl")},meta:{mac:{symbol:"⌘",name:"Command"},windows:u("Win"),linux:u("Super")},ctrl:{mac:{symbol:"⌃",name:"Control"},windows:u("Ctrl"),linux:u("Ctrl")},alt:{mac:{symbol:"⌥",name:"Option"},windows:u("Alt"),linux:u("Alt")},shift:{mac:{symbol:"⇧",name:"Shift"},windows:u("Shift"),linux:u("Shift")},enter:{mac:{symbol:"↩",name:"Enter"},windows:u("Enter"),linux:u("Enter")},tab:{mac:{symbol:"⇥",name:"Tab"},windows:u("Tab"),linux:u("Tab")},escape:{mac:{symbol:"⎋",name:"Escape"},windows:u("Esc"),linux:u("Esc")},backspace:{mac:{symbol:"⌫",name:"Backspace"},windows:u("Backspace"),linux:u("Backspace")},delete:{mac:{symbol:"⌦",name:"Delete"},windows:u("Del"),linux:u("Del")},capslock:{mac:{symbol:"⇪",name:"Caps Lock"},windows:u("Caps Lock"),linux:u("Caps Lock")}},b={cmdorctrl:"mod",commandorcontrol:"mod",cmd:"meta",command:"meta",super:"meta",win:"meta",windows:"meta",control:"ctrl",option:"alt",opt:"alt",return:"enter",esc:"escape",del:"delete",caps:"capslock"},f={up:{symbol:"↑",name:"Arrow up"},down:{symbol:"↓",name:"Arrow down"},left:{symbol:"←",name:"Arrow left"},right:{symbol:"→",name:"Arrow right"},arrowup:{symbol:"↑",name:"Arrow up"},arrowdown:{symbol:"↓",name:"Arrow down"},arrowleft:{symbol:"←",name:"Arrow left"},arrowright:{symbol:"→",name:"Arrow right"}};let y=null;function x(){return y??=function(){if("undefined"==typeof navigator)return"windows";const n=navigator.userAgentData,e=`${n?.platform??""} ${navigator.platform??""} ${navigator.userAgent??""}`;return/mac|iphone|ipad|ipod/i.test(e)?"mac":/win/i.test(e)?"windows":"linux"}(),y}function g(){return()=>{}}function h(){return"windows"}const v={xs:"xs",sm:"xs",md:"sm",lg:"md",xl:"lg"},A={solid:[d,"text-(--n-on-solid) bg-(--n-fill)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[d,"border text-(--n-accent) bg-(--n-panel)","[border-color:var(--n-line)]","[box-shadow:var(--n-elev),var(--neba-plate-glass)]"].join(" "),text:"text-(--n-accent) bg-(--n-soft)"},k={xs:"min-w-5.5",sm:"min-w-6.5",md:"min-w-8",lg:"min-w-10",xl:"min-w-12"};export const Shortcut=/*@__PURE__*/o.forwardRef(function({variant:d="outline",size:y="md",color:C="secondary",density:j="compact",elevation:E=0,keys:S,os:B="auto",separator:N,className:D,style:L,...T},$){const F=o.useSyncExternalStore(g,x,h),z="auto"===B?F:B,O=v[y],R=function(n){return Array.isArray(n)?n.map(n=>n.trim()).filter(Boolean):n.split("+").map(n=>n.trim()).filter(Boolean)}(S),U=R.map(n=>function(n,e){const a=n.toLowerCase().replace(/[\s_-]/g,""),o=b[a]??a,t=f[o];if(t)return t;const r=p[o];return r?r[e]:u(1===n.length?n.toUpperCase():n)}(n,z)),W=void 0===N?"mac"===z?null:"+":N,_=["inline-flex shrink-0 items-center justify-center","font-mono font-medium leading-none whitespace-nowrap tabular-nums",t[O],l[O],k[O],m[j][O],i[O],A[d],w].join(" ");return n("span",{ref:$,className:s("inline-flex max-w-full items-center gap-1 align-middle",D??""),style:{...r(C,E,d),...L},...T,children:U.map((t,r)=>a(o.Fragment,{children:[r>0&&null!==W?n("span",{"aria-hidden":"true",className:"text-(--neba-muted-fg)",children:W}):null,n("kbd",{className:_,children:t.symbol===t.name?t.symbol:a(e,{children:[n("span",{"aria-hidden":"true",children:t.symbol}),n("span",{className:c,children:t.name})]})})]},r))})});