neba 1.17.1 → 1.18.0

package/dist/components/date-range-picker/DateRangePicker.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as a from"react";import{Button as n}from"../button/Button.js";import{Calendar as t,usePickerLabels as s}from"../../internal/calendar.js";import{ArrowRightIcon as r,CalendarIcon as o}from"../../internal/icons.js";import{PickerFooter as i,PickerShell as c}from"../../internal/picker.js";import{WidthSizer as u}from"../../internal/sizer.js";import{addMonths as m,compareDay as d,displaySamples as h,formatDate as p,isValidDate as f,localeWeekStart as x,startOfDay as v,startOfMonth as b,toISODate as g,today as y,withPlaceholder as w}from"../../internal/date.js";import{cx as N,gapClasses as j,metaTextClasses as D}from"../../internal/styles.js";import{useStyleDefaults as S}from"../../internal/defaults.js";const C={start:null,end:null};export const DateRangePicker=/*@__PURE__*/a.forwardRef(function DateRangePicker(O,k){const{value:z,defaultValue:P,onValueChange:R,open:B,defaultOpen:M,onOpenChange:V,defaultMonth:E,minDate:I,maxDate:F,shouldDisableDate:L,locale:q,weekStartsOn:A,format:G={dateStyle:"medium"},monthCount:H=2,startPlaceholder:J,endPlaceholder:K,presets:Q,clearable:T=!1,closeOnSelect:U=!0,labels:W,name:X,size:Y="md",color:Z="primary",readOnly:$=!1,disabled:_=!1,startIcon:ee,...le}=S(O,["size","density","variant","locale","labelPlacement"]),ae=s(W,q),ne=A??x(q),[te,se]=a.useState(P??C),re=void 0!==z?z??C:te,oe=f(re.start)?re.start:null,ie=f(re.end)?re.end:null,[ce,ue]=a.useState(M??!1),me=B??ce,[de,he]=a.useState(null),[pe,fe]=a.useState(null),[xe,ve]=a.useState(()=>b(oe??E??y()));a.useEffect(()=>{me?ve(b(oe??E??y())):(he(null),fe(null))},[me]);const be=e=>{e&&($||_)||(void 0===B&&ue(e),V?.(e))},ge=e=>{void 0===z&&se(e),R?.(e)},ye=de??oe,we=null!==de?pe:ie,Ne=(l,a)=>f(l)?p(l,q,G):e("span",{className:"text-(--neba-muted-fg)",children:a??""}),je=m(xe,1),De=2===H,Se=h(q,G),Ce=null!==de?ae.end:null===oe?ae.start:null,Oe={size:Y,color:Z,locale:q,weekStartsOn:ne,selected:[oe,ie,de],rangeStart:ye,rangeEnd:we,onSelect:e=>{const l=v(e);return null===de||d(l,de)<0?(he(l),void fe(l)):(he(null),fe(null),ge({start:de,end:l}),void(U&&be(!1)))},onPreviewChange:e=>{null!==de&&fe(e??de)},minDate:I,maxDate:F,shouldDisableDate:L,showOutsideDays:!1,multiselectable:!0,labels:ae};return e(c,{...le,size:Y,color:Z,readOnly:$,disabled:_,triggerRef:k,startIcon:ee??e(o,{}),display:l("span",{className:"flex min-w-0 items-center gap-1.5",children:[l("span",{className:"flex min-w-0 flex-col",children:[e("span",{className:"truncate",children:Ne(oe,J)}),e(u,{samples:w(Se,J)})]}),e("span",{"aria-hidden":"true",className:"flex shrink-0 items-center text-(--neba-muted-fg) rtl:rotate-180",children:e(r,{})}),l("span",{className:"flex min-w-0 flex-col",children:[e("span",{className:"truncate",children:Ne(ie,K)}),e(u,{samples:w(Se,K)})]})]}),empty:null===oe&&null===ie,clearable:T,onClear:()=>ge(C),open:me,onOpenChange:be,clearLabel:ae.clear,hiddenValues:X?[{name:X,value:oe?g(oe):""},{name:X,value:ie?g(ie):""}]:void 0,repeats:!0,children:l("div",{className:"flex flex-col gap-1.5",children:[l("div",{className:N("flex items-stretch",j[Y]),children:[Q&&Q.length>0?e("div",{className:N("flex max-h-[calc(var(--n-cell,2rem)*8)] flex-col overflow-y-auto border-e pe-1.5","[border-color:var(--n-line)]"),children:Q.map((l,a)=>e(n,{variant:"text",size:Y,color:Z,density:"compact",className:"justify-start whitespace-nowrap",onClick:()=>(e=>{const l="function"==typeof e.value?e.value():e.value;he(null),fe(null),ge(l),f(l.start)&&ve(b(l.start)),U&&be(!1)})(l),children:l.label},a))}):null,e(t,{...Oe,month:xe,onMonthChange:ve,showNextButton:!De,autoFocus:!0}),De?e(t,{...Oe,month:je,onMonthChange:e=>ve(m(e,-1)),showPreviousButton:!1}):null]}),T||null!==Ce?l(i,{size:Y,children:[null!==Ce?e("span",{className:N("me-auto text-(--neba-muted-fg)",D[Y]),children:Ce}):null,T?e(n,{variant:"text",size:Y,color:Z,density:"compact",onClick:()=>{he(null),fe(null),ge(C),be(!1)},children:ae.clear}):null]}):null]})})});
+"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as a from"react";import{Button as n}from"../button/Button.js";import{Calendar as t,usePickerLabels as r}from"../../internal/calendar.js";import{ArrowRightIcon as s,CalendarIcon as o}from"../../internal/icons.js";import{PickerFooter as i,PickerShell as c}from"../../internal/picker.js";import{WidthSizer as u}from"../../internal/sizer.js";import{addMonths as m,compareDay as d,displaySamples as p,formatDate as h,isValidDate as f,localeWeekStart as x,startOfDay as v,startOfMonth as b,toISODate as g,today as y,withPlaceholder as j}from"../../internal/date.js";import{cx as w,gapClasses as N,metaTextClasses as D}from"../../internal/styles.js";import{useStyleDefaults as S}from"../../internal/defaults.js";import{useIntlLocale as C}from"../../internal/media.js";const O={start:null,end:null};export const DateRangePicker=/*@__PURE__*/a.forwardRef(function DateRangePicker(k,z){const{value:P,defaultValue:R,onValueChange:B,open:M,defaultOpen:V,onOpenChange:E,defaultMonth:I,minDate:F,maxDate:L,shouldDisableDate:q,locale:A,weekStartsOn:G,format:H={dateStyle:"medium"},monthCount:J=2,startPlaceholder:K,endPlaceholder:Q,presets:T,clearable:U=!1,closeOnSelect:W=!0,labels:X,name:Y,size:Z="md",color:$="primary",readOnly:_=!1,disabled:ee=!1,startIcon:le,...ae}=S(k,["size","density","variant","locale","labelPlacement"]),ne=r(X,A),te=C(A),re=G??x(te),[se,oe]=a.useState(R??O),ie=void 0!==P?P??O:se,ce=f(ie.start)?ie.start:null,ue=f(ie.end)?ie.end:null,[me,de]=a.useState(V??!1),pe=M??me,[he,fe]=a.useState(null),[xe,ve]=a.useState(null),[be,ge]=a.useState(()=>b(ce??I??y()));a.useEffect(()=>{pe?ge(b(ce??I??y())):(fe(null),ve(null))},[pe]);const ye=e=>{e&&(_||ee)||(void 0===M&&de(e),E?.(e))},je=e=>{void 0===P&&oe(e),B?.(e)},we=he??ce,Ne=null!==he?xe:ue,De=(l,a)=>f(l)?h(l,te,H):e("span",{className:"text-(--neba-muted-fg)",children:a??""}),Se=m(be,1),Ce=2===J,Oe=p(te,H),ke=null!==he?ne.end:null===ce?ne.start:null,ze={size:Z,color:$,locale:A,weekStartsOn:re,selected:[ce,ue,he],rangeStart:we,rangeEnd:Ne,onSelect:e=>{const l=v(e);return null===he||d(l,he)<0?(fe(l),void ve(l)):(fe(null),ve(null),je({start:he,end:l}),void(W&&ye(!1)))},onPreviewChange:e=>{null!==he&&ve(e??he)},minDate:F,maxDate:L,shouldDisableDate:q,showOutsideDays:!1,multiselectable:!0,labels:ne};return e(c,{...ae,size:Z,color:$,readOnly:_,disabled:ee,triggerRef:z,startIcon:le??e(o,{}),display:l("span",{className:"flex min-w-0 items-center gap-1.5",children:[l("span",{className:"flex min-w-0 flex-col",children:[e("span",{className:"truncate",children:De(ce,K)}),e(u,{samples:j(Oe,K)})]}),e("span",{"aria-hidden":"true",className:"flex shrink-0 items-center text-(--neba-muted-fg) rtl:rotate-180",children:e(s,{})}),l("span",{className:"flex min-w-0 flex-col",children:[e("span",{className:"truncate",children:De(ue,Q)}),e(u,{samples:j(Oe,Q)})]})]}),empty:null===ce&&null===ue,clearable:U,onClear:()=>je(O),open:pe,onOpenChange:ye,clearLabel:ne.clear,hiddenValues:Y?[{name:Y,value:ce?g(ce):""},{name:Y,value:ue?g(ue):""}]:void 0,repeats:!0,children:l("div",{className:"flex flex-col gap-1.5",children:[l("div",{className:w("flex items-stretch",N[Z]),children:[T&&T.length>0?e("div",{className:w("flex max-h-[calc(var(--n-cell,2rem)*8)] flex-col overflow-y-auto border-e pe-1.5","[border-color:var(--n-line)]"),children:T.map((l,a)=>e(n,{variant:"text",size:Z,color:$,density:"compact",className:"justify-start whitespace-nowrap",onClick:()=>(e=>{const l="function"==typeof e.value?e.value():e.value;fe(null),ve(null),je(l),f(l.start)&&ge(b(l.start)),W&&ye(!1)})(l),children:l.label},a))}):null,e(t,{...ze,month:be,onMonthChange:ge,showNextButton:!Ce,autoFocus:!0}),Ce?e(t,{...ze,month:Se,onMonthChange:e=>ge(m(e,-1)),showPreviousButton:!1}):null]}),U||null!==ke?l(i,{size:Z,children:[null!==ke?e("span",{className:w("me-auto text-(--neba-muted-fg)",D[Z]),children:ke}):null,U?e(n,{variant:"text",size:Z,color:$,density:"compact",onClick:()=>{fe(null),ve(null),je(O),ye(!1)},children:ne.clear}):null]}):null]})})});

package/dist/components/date-time-picker/DateTimePicker.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as l from"react";import{Button as a}from"../button/Button.js";import{Calendar as n,TimeGrid as o,usePickerLabels as s}from"../../internal/calendar.js";import{CalendarIcon as i}from"../../internal/icons.js";import{PickerDivider as r,PickerFooter as c,PickerShell as d}from"../../internal/picker.js";import{clampDate as m,displaySamples as u,formatDate as p,isDayOutside as h,isHour12 as f,isValidDate as S,localeWeekStart as b,mergeDateAndTime as y,startOfDay as D,startOfMonth as g,timeUnitRange as v,toISODateTime as x,today as j,withPlaceholder as C,withTime as k}from"../../internal/date.js";import{cx as w,gapClasses as z}from"../../internal/styles.js";import{useStyleDefaults as O}from"../../internal/defaults.js";export const DateTimePicker=/*@__PURE__*/l.forwardRef(function DateTimePicker(T,N){const{value:P,defaultValue:V,onValueChange:B,open:I,defaultOpen:M,onOpenChange:R,defaultMonth:E,minDate:F,maxDate:L,shouldDisableDate:q,shouldDisableTime:A,locale:G,weekStartsOn:H,format:J={dateStyle:"medium",timeStyle:"short"},hour12:K,showSeconds:Q=!1,hourStep:U=1,minuteStep:W=1,secondStep:X=1,placeholder:Y,clearable:Z=!1,showNowButton:$=!0,closeOnSelect:_=!1,labels:ee,name:te,size:le="md",color:ae="primary",density:ne="default",readOnly:oe=!1,disabled:se=!1,startIcon:ie,...re}=O(T,["size","density","variant","locale","labelPlacement"]),ce=s(ee,G),de=H??b(G),me=K??f(G),[ue,pe]=l.useState(V??null),he=void 0!==P?P:ue,[fe,Se]=l.useState(M??!1),be=I??fe,[ye,De]=l.useState(()=>g(S(he)?he:E??j()));l.useEffect(()=>{be&&De(g(S(he)?he:E??j()))},[be]);const ge=e=>{e&&(oe||se)||(void 0===I&&Se(e),R?.(e))},ve=e=>{const t=null===e?null:m(e,F,L);void 0===P&&pe(t),B?.(t)},xe=l.useCallback((e,t)=>{const[l,a]=v(t,e);return!!(S(F)&&a.getTime()<F.getTime())||(!!(S(L)&&l.getTime()>L.getTime())||(A?.(e,t)??!1))},[F,L,A]),je=new Date,Ce=k(je,{seconds:Q?je.getSeconds():0}),ke=h(Ce,F,L)||(q?.(Ce)??!1)||xe(Ce,"second"),we=C(u(G,J),Y);return e(d,{...re,size:le,color:ae,density:ne,readOnly:oe,disabled:se,triggerRef:N,startIcon:ie??e(i,{}),display:S(he)?p(he,G,J):Y??"",samples:we,empty:!S(he),clearable:Z,onClear:()=>ve(null),open:be,onOpenChange:ge,clearLabel:ce.clear,hiddenValues:te?[{name:te,value:S(he)?x(he,Q):""}]:void 0,children:t("div",{className:"flex flex-col gap-1.5",children:[t("div",{className:w("flex items-stretch",z[le]),children:[e(n,{size:le,color:ae,locale:G,weekStartsOn:de,month:ye,onMonthChange:De,selected:[he],onSelect:e=>{const t=S(he)?y(e,he):D(e);ve(t),De(g(t)),_&&ge(!1)},minDate:F,maxDate:L,shouldDisableDate:q,labels:ce,autoFocus:!0}),e(r,{}),e(o,{size:le,density:ne,locale:G,value:S(he)?he:null,referenceDate:S(he)?he:j(),onChange:ve,hour12:me,showSeconds:Q,hourStep:U,minuteStep:W,secondStep:X,shouldDisableTime:xe,labels:ce})]}),t(c,{size:le,children:[Z?e(a,{variant:"text",size:le,color:ae,density:"compact",onClick:()=>{ve(null),ge(!1)},children:ce.clear}):null,$?e(a,{variant:"text",size:le,color:ae,density:"compact",disabled:ke,onClick:()=>{ve(Ce),De(g(Ce))},children:ce.now}):null,e(a,{variant:"solid",size:le,color:ae,density:"compact",onClick:()=>ge(!1),children:ce.done})]})]})})});
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as l from"react";import{Button as a}from"../button/Button.js";import{Calendar as n,TimeGrid as o,usePickerLabels as s}from"../../internal/calendar.js";import{CalendarIcon as i}from"../../internal/icons.js";import{PickerDivider as r,PickerFooter as c,PickerShell as d}from"../../internal/picker.js";import{clampDate as m,displaySamples as u,formatDate as p,isDayOutside as h,isHour12 as f,isValidDate as S,localeWeekStart as b,mergeDateAndTime as y,startOfDay as D,startOfMonth as g,timeUnitRange as v,toISODateTime as j,today as x,withPlaceholder as C,withTime as k}from"../../internal/date.js";import{cx as w,gapClasses as z}from"../../internal/styles.js";import{useStyleDefaults as O}from"../../internal/defaults.js";import{useIntlLocale as T}from"../../internal/media.js";export const DateTimePicker=/*@__PURE__*/l.forwardRef(function DateTimePicker(N,P){const{value:V,defaultValue:B,onValueChange:I,open:M,defaultOpen:R,onOpenChange:E,defaultMonth:F,minDate:L,maxDate:q,shouldDisableDate:A,shouldDisableTime:G,locale:H,weekStartsOn:J,format:K={dateStyle:"medium",timeStyle:"short"},hour12:Q,showSeconds:U=!1,hourStep:W=1,minuteStep:X=1,secondStep:Y=1,placeholder:Z,clearable:$=!1,showNowButton:_=!0,closeOnSelect:ee=!1,labels:te,name:le,size:ae="md",color:ne="primary",density:oe="default",readOnly:se=!1,disabled:ie=!1,startIcon:re,...ce}=O(N,["size","density","variant","locale","labelPlacement"]),de=s(te,H),me=T(H),ue=J??b(me),pe=Q??f(me),[he,fe]=l.useState(B??null),Se=void 0!==V?V:he,[be,ye]=l.useState(R??!1),De=M??be,[ge,ve]=l.useState(()=>g(S(Se)?Se:F??x()));l.useEffect(()=>{De&&ve(g(S(Se)?Se:F??x()))},[De]);const je=e=>{e&&(se||ie)||(void 0===M&&ye(e),E?.(e))},xe=e=>{const t=null===e?null:m(e,L,q);void 0===V&&fe(t),I?.(t)},Ce=l.useCallback((e,t)=>{const[l,a]=v(t,e);return!!(S(L)&&a.getTime()<L.getTime())||(!!(S(q)&&l.getTime()>q.getTime())||(G?.(e,t)??!1))},[L,q,G]),ke=new Date,we=k(ke,{seconds:U?ke.getSeconds():0}),ze=h(we,L,q)||(A?.(we)??!1)||Ce(we,"second"),Oe=C(u(me,K),Z);return e(d,{...ce,size:ae,color:ne,density:oe,readOnly:se,disabled:ie,triggerRef:P,startIcon:re??e(i,{}),display:S(Se)?p(Se,me,K):Z??"",samples:Oe,empty:!S(Se),clearable:$,onClear:()=>xe(null),open:De,onOpenChange:je,clearLabel:de.clear,hiddenValues:le?[{name:le,value:S(Se)?j(Se,U):""}]:void 0,children:t("div",{className:"flex flex-col gap-1.5",children:[t("div",{className:w("flex items-stretch",z[ae]),children:[e(n,{size:ae,color:ne,locale:H,weekStartsOn:ue,month:ge,onMonthChange:ve,selected:[Se],onSelect:e=>{const t=S(Se)?y(e,Se):D(e);xe(t),ve(g(t)),ee&&je(!1)},minDate:L,maxDate:q,shouldDisableDate:A,labels:de,autoFocus:!0}),e(r,{}),e(o,{size:ae,density:oe,locale:H,value:S(Se)?Se:null,referenceDate:S(Se)?Se:x(),onChange:xe,hour12:pe,showSeconds:U,hourStep:W,minuteStep:X,secondStep:Y,shouldDisableTime:Ce,labels:de})]}),t(c,{size:ae,children:[$?e(a,{variant:"text",size:ae,color:ne,density:"compact",onClick:()=>{xe(null),je(!1)},children:de.clear}):null,_?e(a,{variant:"text",size:ae,color:ne,density:"compact",disabled:ze,onClick:()=>{xe(we),ve(g(we))},children:de.now}):null,e(a,{variant:"solid",size:ae,color:ne,density:"compact",onClick:()=>je(!1),children:de.done})]})]})})});

package/dist/components/drawer/Drawer.d.ts

@@ -54,6 +54,15 @@ export interface DrawerProps extends Pick<NebaStyleProps, 'size' | 'color' | 'de
     trigger?: React.ReactElement;
     /** The heading. Rendered as the element that names the drawer. */
     title?: React.ReactNode;
+    /**
+     * Which heading the title is, in the page's own outline. An `inline` drawer
+     * is part of the page, so its heading is too: one beside an `<h1>` wants `2`,
+     * and one inside a section headed `<h2>` wants `3`. An `overlay` drawer is a
+     * dialog and starts an outline of its own, where the default is what it
+     * wants.
+     * @default 2
+     */
+    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
     /** A line under the title, and the drawer's accessible description. */
     description?: React.ReactNode;
     /**
@@ -122,6 +131,18 @@ export interface DrawerProps extends Pick<NebaStyleProps, 'size' | 'color' | 'de
      * @default true
      */
     safeArea?: boolean;
+    /**
+     * Keeps the panel and its contents in the DOM while the drawer is closed,
+     * hidden, rather than building them each time it opens.
+     *
+     * For a drawer of links that should be in the page a crawler renders — the
+     * navigation a Sidebar becomes on a narrow screen above all. An `overlay`
+     * drawer is portalled, and a portal has nowhere to go until there is a
+     * document, so its contents arrive once the page has hydrated rather than in
+     * the server's HTML. An `inline` one is in the server's HTML as well.
+     * @default false
+     */
+    keepMounted?: boolean;
     /** The body. */
     children?: React.ReactNode;
 }

package/dist/components/drawer/Drawer.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as a,Fragment as r}from"react/jsx-runtime";import*as t from"react";import{Dialog as n}from"@base-ui/react/dialog";import{boxPaddingXClasses as l,boxPaddingYClasses as s}from"../box/Box.js";import{actionMessages as o,useMessages as d}from"../../internal/i18n.js";import{CloseIcon as i}from"../../internal/icons.js";import{cx as b,hasContent as m,headingTitleClasses as u,metaTextClasses as c,popupFadeClasses as f,sheetBodyClasses as p,sheetCloseClasses as x,sheetHeaderGapClasses as g,sheetSectionGapClasses as h,surfaceClasses as v,surfaceSlots as y}from"../../internal/styles.js";import{useStyleDefaults as w}from"../../internal/defaults.js";const j={xs:"w-56",sm:"w-64",md:"w-80",lg:"w-96",xl:"w-[28rem]"},N={left:{xs:"rounded-r-(--neba-radius-xs)",sm:"rounded-r-(--neba-radius-sm)",md:"rounded-r-(--neba-radius-md)",lg:"rounded-r-(--neba-radius-lg)",xl:"rounded-r-(--neba-radius-xl)"},right:{xs:"rounded-l-(--neba-radius-xs)",sm:"rounded-l-(--neba-radius-sm)",md:"rounded-l-(--neba-radius-md)",lg:"rounded-l-(--neba-radius-lg)",xl:"rounded-l-(--neba-radius-xl)"},top:{xs:"rounded-b-(--neba-radius-xs)",sm:"rounded-b-(--neba-radius-sm)",md:"rounded-b-(--neba-radius-md)",lg:"rounded-b-(--neba-radius-lg)",xl:"rounded-b-(--neba-radius-xl)"},bottom:{xs:"rounded-t-(--neba-radius-xs)",sm:"rounded-t-(--neba-radius-sm)",md:"rounded-t-(--neba-radius-md)",lg:"rounded-t-(--neba-radius-lg)",xl:"rounded-t-(--neba-radius-xl)"}},$={left:"border-r",right:"border-l",top:"border-b",bottom:"border-t"},_={left:"data-[starting-style]:[translate:-100%_0] data-[ending-style]:[translate:-100%_0]",right:"data-[starting-style]:[translate:100%_0] data-[ending-style]:[translate:100%_0]",top:"data-[starting-style]:[translate:0_-100%] data-[ending-style]:[translate:0_-100%]",bottom:"data-[starting-style]:[translate:0_100%] data-[ending-style]:[translate:0_100%]"},C={left:"flex-row justify-start",right:"flex-row justify-end",top:"flex-col justify-start",bottom:"flex-col justify-end"},k=[v,"relative flex flex-col overflow-hidden","text-(--neba-fg) bg-(--n-panel-press)","[border-color:var(--n-line)]","[outline:none]"].join(" "),z=["fixed inset-0 z-(--neba-z-portal) bg-(--neba-scrim)","[backdrop-filter:blur(2px)]",f].join(" "),B="env(safe-area-inset-top) solid transparent",D="env(safe-area-inset-bottom) solid transparent",T="env(safe-area-inset-left) solid transparent",L="env(safe-area-inset-right) solid transparent",O={top:{borderTop:B,borderLeft:T,borderRight:L},bottom:{borderBottom:D,borderLeft:T,borderRight:L},left:{borderTop:B,borderBottom:D,borderLeft:T},right:{borderTop:B,borderBottom:D,borderRight:L}},R="border-t [border-color:var(--n-line)]";export const DrawerClose=n.Close;export function Drawer(f){const{side:v="left",mode:B="overlay",size:D="md",color:T="primary",density:L="default",open:P,defaultOpen:A,onOpenChange:F,trigger:S,title:V,description:q,actions:E,dividers:G=!1,showClose:H,locale:I,closeLabel:J,extent:K,rounded:M=!0,modal:Q=!0,dismissible:U=!0,safeArea:W=!0,className:X,style:Y,children:Z,...ee}=w(f,["size","density","locale"]),ae=d(o,I),re="overlay"===B,te="left"===v||"right"===v,ne=H??re,[le,se]=t.useState(A??!0),oe=l[L][D],de=s[L][D],ie=G?`${oe} ${de}`:oe,be=m(V)||m(q),me=m(E),ue=void 0===K?null:{[te?"width":"height"]:"number"==typeof K?`${K}px`:K},ce=b(k,p[D],$[v],M?N[v][D]:"",re?"[box-shadow:var(--neba-shadow-3),var(--neba-plate-glass)]":"[box-shadow:var(--neba-plate-glass)]",re?`[transition:translate_var(--neba-duration)_var(--neba-ease)] ${_[v]}`:"",te?`h-full max-w-full ${void 0===K?j[D]:""}`:"w-full "+(void 0===K?"max-h-[85%]":""),G?"":`${de} ${h[D]}`,X??""),fe=re?n.Title:"h2",pe=re?n.Description:"p",xe=a(r,{children:[be||ne?a("div",{className:`flex shrink-0 items-start gap-3 ${ie}`,children:[a("div",{className:`flex min-w-0 flex-1 flex-col ${g[D]}`,children:[m(V)?e(fe,{className:b("neba-heading","[&.neba-heading]:m-0 [&.neba-heading]:font-semibold [&.neba-heading]:text-inherit",u[D]),children:V}):null,m(q)?e(pe,{className:`m-0 text-(--neba-muted-fg) ${c[D]}`,children:q}):null]}),ne?re?e(n.Close,{"aria-label":J??ae.close,className:x,children:e(i,{})}):e("button",{type:"button","aria-label":J??ae.close,className:x,onClick:()=>{void 0===P&&se(!1),F?.(!1)},children:e(i,{})}):null]}):null,m(Z)?e("div",{className:b("min-h-0 flex-1 overflow-y-auto overscroll-contain",ie,G&&(be||ne)?R:"",G?"":"py-1 -my-1"),children:Z}):null,me?e("div",{className:b("flex shrink-0 flex-wrap items-center justify-end gap-2",ie,G?R:""),children:E}):null]});return re?a(n.Root,{open:P,defaultOpen:A,modal:Q,disablePointerDismissal:!U,onOpenChange:(e,a)=>{U||e||"escape-key"!==a.reason?F?.(e):a.cancel()},children:[S?e(n.Trigger,{render:S}):null,a(n.Portal,{children:[e(n.Backdrop,{className:b("neba-portal",z,!0===Q?"":"pointer-events-none")}),e(n.Viewport,{className:b("neba-portal fixed inset-0 z-(--neba-z-portal) flex",C[v],!0===Q?"":"pointer-events-none"),children:e(n.Popup,{className:b(ce,!0===Q?"":"pointer-events-auto"),style:{...y(T,3),...ue,...W?O[v]:null,...Y},...ee,children:xe})})]})]}):P??le?e("div",{className:ce,style:{...y(T,0),...ue,...Y},...ee,children:xe}):null}
+"use client";import{jsx as e,jsxs as a,Fragment as r}from"react/jsx-runtime";import*as n from"react";import{Dialog as t}from"@base-ui/react/dialog";import{boxPaddingXClasses as l,boxPaddingYClasses as s}from"../box/Box.js";import{actionMessages as o,useMessages as d}from"../../internal/i18n.js";import{CloseIcon as i}from"../../internal/icons.js";import{cx as b,hasContent as m,headingTitleClasses as u,metaTextClasses as c,popupFadeClasses as f,sheetBodyClasses as p,sheetCloseClasses as h,sheetHeaderGapClasses as x,sheetSectionGapClasses as g,surfaceClasses as v,surfaceSlots as y}from"../../internal/styles.js";import{useStyleDefaults as w}from"../../internal/defaults.js";const j={xs:"w-56",sm:"w-64",md:"w-80",lg:"w-96",xl:"w-[28rem]"},N={left:{xs:"rounded-r-(--neba-radius-xs)",sm:"rounded-r-(--neba-radius-sm)",md:"rounded-r-(--neba-radius-md)",lg:"rounded-r-(--neba-radius-lg)",xl:"rounded-r-(--neba-radius-xl)"},right:{xs:"rounded-l-(--neba-radius-xs)",sm:"rounded-l-(--neba-radius-sm)",md:"rounded-l-(--neba-radius-md)",lg:"rounded-l-(--neba-radius-lg)",xl:"rounded-l-(--neba-radius-xl)"},top:{xs:"rounded-b-(--neba-radius-xs)",sm:"rounded-b-(--neba-radius-sm)",md:"rounded-b-(--neba-radius-md)",lg:"rounded-b-(--neba-radius-lg)",xl:"rounded-b-(--neba-radius-xl)"},bottom:{xs:"rounded-t-(--neba-radius-xs)",sm:"rounded-t-(--neba-radius-sm)",md:"rounded-t-(--neba-radius-md)",lg:"rounded-t-(--neba-radius-lg)",xl:"rounded-t-(--neba-radius-xl)"}},$={left:"border-r",right:"border-l",top:"border-b",bottom:"border-t"},_={left:"data-[starting-style]:[translate:-100%_0] data-[ending-style]:[translate:-100%_0]",right:"data-[starting-style]:[translate:100%_0] data-[ending-style]:[translate:100%_0]",top:"data-[starting-style]:[translate:0_-100%] data-[ending-style]:[translate:0_-100%]",bottom:"data-[starting-style]:[translate:0_100%] data-[ending-style]:[translate:0_100%]"},k={left:"flex-row justify-start",right:"flex-row justify-end",top:"flex-col justify-start",bottom:"flex-col justify-end"},C=[v,"relative flex flex-col overflow-hidden","[&[hidden]]:hidden","text-(--neba-fg) bg-(--n-panel-press)","[border-color:var(--n-line)]","[outline:none]"].join(" "),z=["fixed inset-0 z-(--neba-z-portal) bg-(--neba-scrim)","[backdrop-filter:blur(2px)]",f].join(" "),B="env(safe-area-inset-top) solid transparent",D="env(safe-area-inset-bottom) solid transparent",L="env(safe-area-inset-left) solid transparent",T="env(safe-area-inset-right) solid transparent",O={top:{borderTop:B,borderLeft:L,borderRight:T},bottom:{borderBottom:D,borderLeft:L,borderRight:T},left:{borderTop:B,borderBottom:D,borderLeft:L},right:{borderTop:B,borderBottom:D,borderRight:T}},R="border-t [border-color:var(--n-line)]";export const DrawerClose=t.Close;export function Drawer(f){const{side:v="left",mode:B="overlay",size:D="md",color:L="primary",density:T="default",open:P,defaultOpen:E,onOpenChange:M,trigger:A,title:F,headingLevel:S=2,description:V,actions:q,dividers:G=!1,showClose:H,locale:I,closeLabel:J,extent:K,rounded:Q=!0,modal:U=!0,dismissible:W=!0,safeArea:X=!0,keepMounted:Y=!1,className:Z,style:ee,children:ae,...re}=w(f,["size","density","locale"]),ne=d(o,I),te="overlay"===B,le="left"===v||"right"===v,se=H??te,[oe,de]=n.useState(E??!0),ie=l[T][D],be=s[T][D],me=G?`${ie} ${be}`:ie,ue=m(F)||m(V),ce=m(q),fe=void 0===K?null:{[le?"width":"height"]:"number"==typeof K?`${K}px`:K},pe=b(C,p[D],$[v],Q?N[v][D]:"",te?"[box-shadow:var(--neba-shadow-3),var(--neba-plate-glass)]":"[box-shadow:var(--neba-plate-glass)]",te?`[transition:translate_var(--neba-duration)_var(--neba-ease)] ${_[v]}`:"",le?`h-full max-w-full ${void 0===K?j[D]:""}`:"w-full "+(void 0===K?"max-h-[85%]":""),G?"":`${be} ${g[D]}`,Z??""),he=`h${S}`,xe=te?t.Description:"p",ge=b("neba-heading","[&.neba-heading]:m-0 [&.neba-heading]:font-semibold [&.neba-heading]:text-inherit",u[D]),ve=a(r,{children:[ue||se?a("div",{className:`flex shrink-0 items-start gap-3 ${me}`,children:[a("div",{className:`flex min-w-0 flex-1 flex-col ${x[D]}`,children:[m(F)?te?e(t.Title,{render:n.createElement(he),className:ge,children:F}):n.createElement(he,{className:ge},F):null,m(V)?e(xe,{className:`m-0 text-(--neba-muted-fg) ${c[D]}`,children:V}):null]}),se?te?e(t.Close,{"aria-label":J??ne.close,className:h,children:e(i,{})}):e("button",{type:"button","aria-label":J??ne.close,className:h,onClick:()=>{void 0===P&&de(!1),M?.(!1)},children:e(i,{})}):null]}):null,m(ae)?e("div",{className:b("min-h-0 flex-1 overflow-y-auto overscroll-contain",me,G&&(ue||se)?R:"",G?"":"py-1 -my-1"),children:ae}):null,ce?e("div",{className:b("flex shrink-0 flex-wrap items-center justify-end gap-2",me,G?R:""),children:q}):null]});if(!te){const a=P??oe;return a||Y?e("div",{hidden:!a||void 0,className:pe,style:{...y(L,0),...fe,...ee},...re,children:ve}):null}return a(t.Root,{open:P,defaultOpen:E,modal:U,disablePointerDismissal:!W,onOpenChange:(e,a)=>{W||e||"escape-key"!==a.reason?M?.(e):a.cancel()},children:[A?e(t.Trigger,{render:A}):null,a(t.Portal,{keepMounted:Y,children:[e(t.Backdrop,{className:b("neba-portal",z,!0===U?"":"pointer-events-none")}),e(t.Viewport,{className:b("neba-portal fixed inset-0 z-(--neba-z-portal) flex [&[hidden]]:hidden",k[v],!0===U?"":"pointer-events-none"),children:e(t.Popup,{className:b(pe,!0===U?"":"pointer-events-auto"),style:{...y(L,3),...fe,...X?O[v]:null,...ee},...re,children:ve})})]})]})}

package/dist/components/empty/Empty.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t,Fragment as r}from"react/jsx-runtime";import*as n from"react";import{useRender as l}from"@base-ui/react/use-render";import{boxPaddingXClasses as a}from"../box/Box.js";import{transitionProps as s}from"../../internal/animate.js";import{emptyMessages as o,useMessages as i}from"../../internal/i18n.js";import{cx as m,hasContent as c,iconClasses as d,radiusClasses as p,sheetBodyClasses as x,sheetHeaderGapClasses as f,sheetSectionGapClasses as u,sheetTitleClasses as y,surfaceClasses as h,surfaceSlots as v,transitionClasses as b}from"../../internal/styles.js";import{useStyleDefaults as g}from"../../internal/defaults.js";const j={default:{xs:"py-5",sm:"py-6",md:"py-8",lg:"py-10",xl:"py-12"},compact:{xs:"py-3",sm:"py-3.5",md:"py-4",lg:"py-5",xl:"py-6"}},N={xs:"text-[1.25rem]",sm:"text-[1.5rem]",md:"text-[1.75rem]",lg:"text-[2.125rem]",xl:"text-[2.5rem]"},k={solid:[h,"text-(--neba-fg) bg-(--n-panel-hover)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[h,"border text-(--neba-fg) bg-(--n-panel)","[border-color:var(--n-line)]","[box-shadow:var(--n-elev),var(--neba-plate-glass)]"].join(" "),text:"text-(--neba-fg) bg-transparent"};function TrayIcon(){return t("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:[e("path",{d:"M1.75 9.75h3l.9 1.6h4.7l.9-1.6h3",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"}),e("path",{d:"m1.75 9.75 2.1-6a1.5 1.5 0 0 1 1.42-1h5.46a1.5 1.5 0 0 1 1.42 1l2.1 6v2a1.5 1.5 0 0 1-1.5 1.5h-9.5a1.5 1.5 0 0 1-1.5-1.5Z",stroke:"currentColor",strokeWidth:"1.5",strokeLinejoin:"round"})]})}export const Empty=/*@__PURE__*/n.forwardRef(function Empty(h,w){const{variant:$="text",size:E="md",color:L="secondary",density:z="default",elevation:B=0,title:C,icon:I,action:T,locale:W,transition:F,render:M,className:R,style:V,children:Z,...q}=g(h,["size","density","variant","locale"]),A=i(o,W),D=void 0===C?A.title:C,G=void 0===I?e(TrayIcon,{}):I,H=s(F),J=c(D),K=n.isValidElement(M)&&("td"===M.type||"th"===M.type),{role:O,...P}=q,Q="role"in q?O:"status",S=m("flex w-full flex-col items-center justify-center text-center",a[z][E],j[z][E],p[E],u[E],b,k[$],H.className),U={...v(L,B),...H.style},X=t(r,{children:[c(G)?e("span",{className:`flex items-center text-(--neba-muted-fg) ${N[E]} ${d}`,children:G}):null,J||c(Z)?t("div",{className:`flex max-w-prose flex-col items-center ${f[E]}`,children:[J?e("div",{className:`neba-title font-semibold ${y[E]}`,children:D}):null,c(Z)?e("div",{className:`${x[E]} ${J?"text-(--neba-muted-fg)":""}`,children:Z}):null]}):null,c(T)?e("div",{className:"flex flex-wrap items-center justify-center gap-2",children:T}):null]});return l({render:M,ref:w,props:K?{className:R,style:V,children:e("div",{role:Q,className:S,style:U,children:X}),...P}:{role:Q,className:m(S,R??""),style:{...U,...V},children:X,...P}})});
+"use client";import{jsx as e,jsxs as t,Fragment as r}from"react/jsx-runtime";import*as n from"react";import{useRender as l}from"@base-ui/react/use-render";import{boxPaddingXClasses as a}from"../box/Box.js";import{transitionProps as s}from"../../internal/animate.js";import{emptyMessages as o,useMessages as i}from"../../internal/i18n.js";import{cx as m,hasContent as c,iconClasses as d,radiusClasses as p,sheetBodyClasses as x,sheetHeaderGapClasses as f,sheetSectionGapClasses as u,sheetTitleClasses as y,sheetTitleHeadingClasses as h,surfaceClasses as v,surfaceSlots as b,transitionClasses as g}from"../../internal/styles.js";import{useStyleDefaults as j}from"../../internal/defaults.js";const N={default:{xs:"py-5",sm:"py-6",md:"py-8",lg:"py-10",xl:"py-12"},compact:{xs:"py-3",sm:"py-3.5",md:"py-4",lg:"py-5",xl:"py-6"}},k={xs:"text-[1.25rem]",sm:"text-[1.5rem]",md:"text-[1.75rem]",lg:"text-[2.125rem]",xl:"text-[2.5rem]"},w={solid:[v,"text-(--neba-fg) bg-(--n-panel-hover)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[v,"border text-(--neba-fg) bg-(--n-panel)","[border-color:var(--n-line)]","[box-shadow:var(--n-elev),var(--neba-plate-glass)]"].join(" "),text:"text-(--neba-fg) bg-transparent"};function TrayIcon(){return t("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:[e("path",{d:"M1.75 9.75h3l.9 1.6h4.7l.9-1.6h3",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"}),e("path",{d:"m1.75 9.75 2.1-6a1.5 1.5 0 0 1 1.42-1h5.46a1.5 1.5 0 0 1 1.42 1l2.1 6v2a1.5 1.5 0 0 1-1.5 1.5h-9.5a1.5 1.5 0 0 1-1.5-1.5Z",stroke:"currentColor",strokeWidth:"1.5",strokeLinejoin:"round"})]})}export const Empty=/*@__PURE__*/n.forwardRef(function Empty(v,$){const{variant:E="text",size:L="md",color:z="secondary",density:B="default",elevation:C=0,title:I,icon:T,action:W,locale:F,transition:M,render:R,className:V,style:Z,children:q,...A}=j(v,["size","density","variant","locale"]),D=i(o,F),G=void 0===I?D.title:I,H=void 0===T?e(TrayIcon,{}):T,J=s(M),K=c(G),O=n.isValidElement(R)&&("td"===R.type||"th"===R.type),{role:P,...Q}=A,S="role"in A?P:"status",U=m("flex w-full flex-col items-center justify-center text-center",a[B][L],N[B][L],p[L],u[L],g,w[E],J.className),X={...b(z,C),...J.style},Y=t(r,{children:[c(H)?e("span",{className:`flex items-center text-(--neba-muted-fg) ${k[L]} ${d}`,children:H}):null,K||c(q)?t("div",{className:`flex max-w-prose flex-col items-center ${f[L]}`,children:[K?e("div",{className:`${h} font-semibold ${y[L]}`,children:G}):null,c(q)?e("div",{className:`${x[L]} ${K?"text-(--neba-muted-fg)":""}`,children:q}):null]}):null,c(W)?e("div",{className:"flex flex-wrap items-center justify-center gap-2",children:W}):null]});return l({render:R,ref:$,props:O?{className:V,style:Z,children:e("div",{role:S,className:U,style:X,children:Y}),...Q}:{role:S,className:m(U,V??""),style:{...X,...Z},children:Y,...Q}})});

package/dist/components/file-picker/FilePicker.d.ts

@@ -82,14 +82,6 @@ export interface FilePickerProps extends NebaStyleProps, Omit<React.ComponentPro
      */
     id?: string;
 }
-/**
- * `1.4 MB`, in the units a person reading a file list expects.
- *
- * Base 1000 rather than 1024, and `MB` rather than `MiB`: it is the number every
- * operating system's file browser shows, and a picker that disagrees with the
- * Finder about how big the file is has picked a fight it cannot win.
- */
-export declare function formatFileSize(bytes: number): string;
 /**
  * A box you drop files on, or click to open the file dialog.
  *

package/dist/components/file-picker/FilePicker.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as t from"react";import{useDropZone as r}from"../../internal/drop.js";import{glowClasses as l,spotlightSlot as a,trackPointer as o}from"../../internal/glow.js";import{CloseIcon as i}from"../../internal/icons.js";import{fileMessages as s,fillMessage as c,useMessages as d}from"../../internal/i18n.js";import{controlTextLeadingClasses as u,cx as f,disabledClasses as m,gapClasses as p,hasContent as h,hitAreaClasses as b,iconClasses as v,metaTextClasses as x,radiusClasses as g,readOnlyFilterClasses as y,sheetTitleClasses as j,stackGapClasses as k,surfaceClasses as $,surfaceSlots as N,transitionClasses as w}from"../../internal/styles.js";import{useStyleDefaults as z}from"../../internal/defaults.js";import{useFieldsetDisabled as C}from"../../internal/fieldset.js";const I={default:{xs:"p-4",sm:"p-5",md:"p-6",lg:"p-8",xl:"p-10"},compact:{xs:"p-2",sm:"p-3",md:"p-4",lg:"p-5",xl:"p-6"}},L={solid:[$,"border-2 border-dashed text-(--neba-fg) bg-(--n-panel-hover)","[border-color:var(--n-line)]","[box-shadow:var(--n-elev),var(--neba-plate-glass)]"].join(" "),outline:[$,"border-2 border-dashed text-(--neba-fg) bg-(--n-panel)","[border-color:var(--n-line)]","[box-shadow:var(--n-elev),var(--neba-plate-glass)]"].join(" "),text:"border-2 border-dashed text-(--neba-fg) bg-transparent [border-color:var(--n-line)]"},_={solid:"hover:bg-(--n-panel-press) hover:[border-color:var(--n-line-hover)]",outline:"hover:bg-(--n-panel-hover) hover:[border-color:var(--n-line-hover)]",text:"hover:bg-(--n-soft) hover:[border-color:var(--n-line-hover)]"};function UploadIcon(){return n("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:[e("path",{d:"M8 10.5V2.75m0 0L5.25 5.5M8 2.75 10.75 5.5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"}),e("path",{d:"M2.75 9.75v1.75a1.75 1.75 0 0 0 1.75 1.75h7a1.75 1.75 0 0 0 1.75-1.75V9.75",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})]})}export function formatFileSize(e){if(e<1e3)return`${e} B`;const n=["kB","MB","GB","TB"];let t=e/1e3,r=0;for(;t>=1e3&&r<n.length-1;)t/=1e3,r+=1;return`${t<10?t.toFixed(1):Math.round(t)} ${n[r]}`}function M(e,n){const t=e.name.toLowerCase(),r=e.type.toLowerCase();return n.split(",").map(e=>e.trim().toLowerCase()).filter(Boolean).some(e=>e.startsWith(".")?t.endsWith(e):e.endsWith("/*")?r.startsWith(`${e.slice(0,-1)}`):r===e)}export const FilePicker=/*@__PURE__*/t.forwardRef(function FilePicker($,F){const{variant:B="outline",size:E="md",color:W="primary",density:R="default",elevation:S=0,accept:T,multiple:P=!1,maxSize:V,maxFiles:q,value:A,defaultValue:D,onFilesChange:O,onReject:U,label:G,description:H,error:Y,invalid:J,title:K,hint:Q,icon:X,showList:Z=!0,removeLabel:ee,fullWidth:ne=!0,disabled:te,readOnly:re=!1,required:le=!1,name:ae,id:oe,locale:ie,className:se,style:ce,...de}=z($,["size","density","variant","locale"]),ue=C(te),fe=d(s,ie),me=ee??(e=>c(fe.remove,{name:e})),pe=t.useRef(null);t.useImperativeHandle(F,()=>pe.current);const[he,be]=t.useState(()=>[...D??[]]),ve=t.useMemo(()=>A?[...A]:he,[A,he]),xe=h(Y),ge=J??xe,ye=ge?"danger":W,je=ue||re,ke=t.useId(),$e=t.useId(),Ne=t.useId(),we=oe??Ne,ze=t.useCallback(e=>{A||be(e),O?.(e)},[O,A]),Ce=t.useCallback(e=>{const n=[],t=[],r=P?q??Number.POSITIVE_INFINITY:1,l=P?ve.length:0;for(const a of e)T&&!M(a,T)?t.push({file:a,reason:"type"}):void 0!==V&&a.size>V?t.push({file:a,reason:"size"}):l+n.length>=r?t.push({file:a,reason:"count"}):n.push(a);return{kept:n,rejections:t}},[T,ve.length,q,V,P]),Ie=t.useCallback(e=>{const{kept:n,rejections:t}=Ce(e);t.length>0&&U?.(t),n.length>0&&ze(P?[...ve,...n]:n)},[Ce,ze,ve,P,U]),{over:Le,handlers:_e}=r(je?void 0:Ie),Me=t.useRef(null),Fe=t.useRef(null),Be=t.useRef(null);t.useLayoutEffect(()=>{const e=Be.current;if(null===e)return;Be.current=null;const n=Fe.current?.querySelectorAll("li button")??[],t=n[Math.min(e,n.length-1)]??Me.current;t?.focus()},[ve]);const Ee=t.useCallback(()=>{const e=pe.current;if(e&&"undefined"!=typeof DataTransfer)try{const n=new DataTransfer;ve.forEach(e=>n.items.add(e)),e.files=n.files}catch{}},[ve]);t.useEffect(()=>{Ee();const e=pe.current;return e?.addEventListener("cancel",Ee),()=>e?.removeEventListener("cancel",Ee)},[Ee]);const We=f("flex w-full flex-col items-center justify-center text-center","cursor-pointer select-none",I[R][E],g[E],p[E],w,v,"focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2",ue?`${m[B]} border-2 border-dashed`:re?`${L[B]} ${y} cursor-default`:L[B],je?"":`${_[B]} ${l}`,Le&&!je?"bg-(--n-soft-press) [border-color:var(--n-ring)]":"");return n("div",{className:f("flex-col align-top",k[E],ne?"flex w-full":"inline-flex",se??""),style:{...N(ye,S),...je?void 0:a,...ce},...de,children:[h(G)?e("span",{id:$e,className:[x[E],"font-medium",ue?"text-(--neba-disabled-fg)":"text-(--neba-fg)"].join(" "),children:G}):null,n("div",{className:"flex w-full flex-col",..._e,children:[n("button",{ref:Me,onPointerMove:o(void 0,!je),type:"button",id:we,disabled:ue,"aria-labelledby":h(G)?`${$e} ${we}`:void 0,"aria-describedby":h(H)||xe?ke:void 0,"aria-invalid":ge||void 0,className:We,onClick:()=>{je||pe.current&&(pe.current.value="",pe.current.click())},children:[void 0===X?e("span",{className:"flex items-center text-(--n-accent) [&_svg]:size-[1.8em]",children:e(UploadIcon,{})}):h(X)?e("span",{className:"flex items-center text-(--n-accent) [&_svg]:size-[1.8em]",children:X}):null,e("span",{className:`font-medium ${j[E]}`,children:K??fe.title}),h(Q)?e("span",{className:`text-(--neba-muted-fg) ${x[E]}`,children:Q}):null]}),e("input",{ref:pe,type:"file",name:ae,accept:T,multiple:P,required:le&&0===ve.length,disabled:ue,tabIndex:-1,"aria-hidden":"true",className:"absolute size-px overflow-hidden opacity-0 [clip-path:inset(50%)]",onChange:e=>Ie(Array.from(e.target.files??[]))})]}),Z&&ve.length>0?e("ul",{ref:Fe,role:"list",className:`flex w-full flex-col ${k[E]} m-0 list-none p-0`,children:ve.map((t,r)=>n("li",{className:["flex w-full items-center gap-2 px-2 py-1.5",g.xs,u[E],"bg-(--n-soft) text-(--neba-fg)"].join(" "),children:[e("span",{className:"min-w-0 flex-1 truncate",children:t.name}),e("span",{className:`shrink-0 text-(--neba-muted-fg) tabular-nums ${x[E]}`,children:formatFileSize(t.size)}),je?null:e("button",{type:"button","aria-label":me(t.name),className:["relative inline-flex shrink-0 cursor-pointer items-center justify-center rounded-full",b,"size-[1.3em] text-(--neba-muted-fg) opacity-70","[transition:opacity_var(--neba-duration)_var(--neba-ease),color_var(--neba-duration)_var(--neba-ease)]","[&_svg]:size-[0.9em]","hover:text-(--neba-fg) hover:opacity-100 focus-visible:opacity-100","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-1"].join(" "),onClick:e=>{Be.current=e.currentTarget===document.activeElement?r:null,ze(ve.filter((e,n)=>n!==r))},children:e(i,{})})]},`${t.name}-${t.size}-${t.lastModified}-${r}`))}):null,h(H)&&!xe?e("span",{id:ke,className:`${x[E]} text-(--neba-muted-fg)`,children:H}):null,xe?e("span",{id:ke,className:`${x[E]} text-(--n-accent)`,children:Y}):null]})});
+"use client";import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as r from"react";import{formatFileSize as t}from"./formatFileSize.js";import{useLayoutEffectOnClient as l}from"../../internal/layout-effect.js";import{useDropZone as a}from"../../internal/drop.js";import{glowClasses as o,spotlightSlot as i,trackPointer as s}from"../../internal/glow.js";import{CloseIcon as c}from"../../internal/icons.js";import{fileMessages as d,fillMessage as u,useMessages as f}from"../../internal/i18n.js";import{controlTextLeadingClasses as m,cx as p,disabledClasses as b,gapClasses as h,hasContent as v,hitAreaClasses as x,iconClasses as g,metaTextClasses as y,radiusClasses as j,readOnlyFilterClasses as k,sheetTitleClasses as N,stackGapClasses as $,surfaceClasses as w,surfaceSlots as z,transitionClasses as C}from"../../internal/styles.js";import{useStyleDefaults as I}from"../../internal/defaults.js";import{useFieldsetDisabled as _}from"../../internal/fieldset.js";const L={default:{xs:"p-4",sm:"p-5",md:"p-6",lg:"p-8",xl:"p-10"},compact:{xs:"p-2",sm:"p-3",md:"p-4",lg:"p-5",xl:"p-6"}},M={solid:[w,"border-2 border-dashed text-(--neba-fg) bg-(--n-panel-hover)","[border-color:var(--n-line)]","[box-shadow:var(--n-elev),var(--neba-plate-glass)]"].join(" "),outline:[w,"border-2 border-dashed text-(--neba-fg) bg-(--n-panel)","[border-color:var(--n-line)]","[box-shadow:var(--n-elev),var(--neba-plate-glass)]"].join(" "),text:"border-2 border-dashed text-(--neba-fg) bg-transparent [border-color:var(--n-line)]"},W={solid:"hover:bg-(--n-panel-press) hover:[border-color:var(--n-line-hover)]",outline:"hover:bg-(--n-panel-hover) hover:[border-color:var(--n-line-hover)]",text:"hover:bg-(--n-soft) hover:[border-color:var(--n-line-hover)]"};function UploadIcon(){return n("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:[e("path",{d:"M8 10.5V2.75m0 0L5.25 5.5M8 2.75 10.75 5.5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"}),e("path",{d:"M2.75 9.75v1.75a1.75 1.75 0 0 0 1.75 1.75h7a1.75 1.75 0 0 0 1.75-1.75V9.75",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})]})}function E(e,n){const r=e.name.toLowerCase(),t=e.type.toLowerCase();return n.split(",").map(e=>e.trim().toLowerCase()).filter(Boolean).some(e=>e.startsWith(".")?r.endsWith(e):e.endsWith("/*")?t.startsWith(`${e.slice(0,-1)}`):t===e)}export const FilePicker=/*@__PURE__*/r.forwardRef(function FilePicker(w,F){const{variant:R="outline",size:S="md",color:T="primary",density:P="default",elevation:V=0,accept:q,multiple:A=!1,maxSize:B,maxFiles:D,value:O,defaultValue:U,onFilesChange:H,onReject:Y,label:G,description:J,error:K,invalid:Q,title:X,hint:Z,icon:ee,showList:ne=!0,removeLabel:re,fullWidth:te=!0,disabled:le,readOnly:ae=!1,required:oe=!1,name:ie,id:se,locale:ce,className:de,style:ue,...fe}=I(w,["size","density","variant","locale"]),me=_(le),pe=f(d,ce),be=re??(e=>u(pe.remove,{name:e})),he=r.useRef(null);r.useImperativeHandle(F,()=>he.current);const[ve,xe]=r.useState(()=>[...U??[]]),ge=r.useMemo(()=>O?[...O]:ve,[O,ve]),ye=v(K),je=Q??ye,ke=je?"danger":T,Ne=me||ae,$e=r.useId(),we=r.useId(),ze=r.useId(),Ce=se??ze,Ie=r.useCallback(e=>{O||xe(e),H?.(e)},[H,O]),_e=r.useCallback(e=>{const n=[],r=[],t=A?D??Number.POSITIVE_INFINITY:1,l=A?ge.length:0;for(const a of e)q&&!E(a,q)?r.push({file:a,reason:"type"}):void 0!==B&&a.size>B?r.push({file:a,reason:"size"}):l+n.length>=t?r.push({file:a,reason:"count"}):n.push(a);return{kept:n,rejections:r}},[q,ge.length,D,B,A]),Le=r.useCallback(e=>{const{kept:n,rejections:r}=_e(e);r.length>0&&Y?.(r),n.length>0&&Ie(A?[...ge,...n]:n)},[_e,Ie,ge,A,Y]),{over:Me,handlers:We}=a(Ne?void 0:Le),Ee=r.useRef(null),Fe=r.useRef(null),Re=r.useRef(null);l(()=>{const e=Re.current;if(null===e)return;Re.current=null;const n=Fe.current?.querySelectorAll("li button")??[],r=n[Math.min(e,n.length-1)]??Ee.current;r?.focus()},[ge]);const Se=r.useCallback(()=>{const e=he.current;if(e&&"undefined"!=typeof DataTransfer)try{const n=new DataTransfer;ge.forEach(e=>n.items.add(e)),e.files=n.files}catch{}},[ge]);r.useEffect(()=>{Se();const e=he.current;return e?.addEventListener("cancel",Se),()=>e?.removeEventListener("cancel",Se)},[Se]);const Te=p("flex w-full flex-col items-center justify-center text-center","cursor-pointer select-none",L[P][S],j[S],h[S],C,g,"focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2",me?`${b[R]} border-2 border-dashed`:ae?`${M[R]} ${k} cursor-default`:M[R],Ne?"":`${W[R]} ${o}`,Me&&!Ne?"bg-(--n-soft-press) [border-color:var(--n-ring)]":"");return n("div",{className:p("flex-col align-top",$[S],te?"flex w-full":"inline-flex",de??""),style:{...z(ke,V),...Ne?void 0:i,...ue},...fe,children:[v(G)?e("span",{id:we,className:[y[S],"font-medium",me?"text-(--neba-disabled-fg)":"text-(--neba-fg)"].join(" "),children:G}):null,n("div",{className:"flex w-full flex-col",...We,children:[n("button",{ref:Ee,onPointerMove:s(void 0,!Ne),type:"button",id:Ce,disabled:me,"aria-labelledby":v(G)?`${we} ${Ce}`:void 0,"aria-describedby":v(J)||ye?$e:void 0,"aria-invalid":je||void 0,className:Te,onClick:()=>{Ne||he.current&&(he.current.value="",he.current.click())},children:[void 0===ee?e("span",{className:"flex items-center text-(--n-accent) [&_svg]:size-[1.8em]",children:e(UploadIcon,{})}):v(ee)?e("span",{className:"flex items-center text-(--n-accent) [&_svg]:size-[1.8em]",children:ee}):null,e("span",{className:`font-medium ${N[S]}`,children:X??pe.title}),v(Z)?e("span",{className:`text-(--neba-muted-fg) ${y[S]}`,children:Z}):null]}),e("input",{ref:he,type:"file",name:ie,accept:q,multiple:A,required:oe&&0===ge.length,disabled:me,tabIndex:-1,"aria-hidden":"true",className:"absolute size-px overflow-hidden opacity-0 [clip-path:inset(50%)]",onChange:e=>Le(Array.from(e.target.files??[]))})]}),ne&&ge.length>0?e("ul",{ref:Fe,role:"list",className:`flex w-full flex-col ${$[S]} m-0 list-none p-0`,children:ge.map((r,l)=>n("li",{className:["flex w-full items-center gap-2 px-2 py-1.5",j.xs,m[S],"bg-(--n-soft) text-(--neba-fg)"].join(" "),children:[e("span",{className:"min-w-0 flex-1 truncate",children:r.name}),e("span",{className:`shrink-0 text-(--neba-muted-fg) tabular-nums ${y[S]}`,children:t(r.size)}),Ne?null:e("button",{type:"button","aria-label":be(r.name),className:["relative inline-flex shrink-0 cursor-pointer items-center justify-center rounded-full",x,"size-[1.3em] text-(--neba-muted-fg) opacity-70","[transition:opacity_var(--neba-duration)_var(--neba-ease),color_var(--neba-duration)_var(--neba-ease)]","[&_svg]:size-[0.9em]","hover:text-(--neba-fg) hover:opacity-100 focus-visible:opacity-100","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-1"].join(" "),onClick:e=>{Re.current=e.currentTarget===document.activeElement?l:null,Ie(ge.filter((e,n)=>n!==l))},children:e(c,{})})]},`${r.name}-${r.size}-${r.lastModified}-${l}`))}):null,v(J)&&!ye?e("span",{id:$e,className:`${y[S]} text-(--neba-muted-fg)`,children:J}):null,ye?e("span",{id:$e,className:`${y[S]} text-(--n-accent)`,children:K}):null]})});

package/dist/components/file-picker/formatFileSize.d.ts

@@ -0,0 +1,8 @@
+/**
+ * `1.4 MB`, in the units a person reading a file list expects.
+ *
+ * Base 1000 rather than 1024, and `MB` rather than `MiB`: it is the number every
+ * operating system's file browser shows, and a picker that disagrees with the
+ * Finder about how big the file is has picked a fight it cannot win.
+ */
+export declare function formatFileSize(bytes: number): string;

package/dist/components/file-picker/formatFileSize.js

@@ -0,0 +1 @@
+export function formatFileSize(e){if(e<1e3)return`${e} B`;const t=["kB","MB","GB","TB"];let r=e/1e3,n=0;for(;r>=1e3&&n<t.length-1;)r/=1e3,n+=1;return`${r<10?r.toFixed(1):Math.round(r)} ${t[n]}`}

package/dist/components/file-picker/index.d.ts

@@ -1,2 +1,3 @@
-export { FilePicker, formatFileSize } from './FilePicker.js';
+export { FilePicker } from './FilePicker.js';
+export { formatFileSize } from './formatFileSize.js';
 export type { FilePickerProps, FileRejection, FileRejectionReason } from './FilePicker.js';

package/dist/components/file-picker/index.js

@@ -1 +1 @@
-export{FilePicker,formatFileSize}from"./FilePicker.js";
+export{FilePicker}from"./FilePicker.js";export{formatFileSize}from"./formatFileSize.js";

package/dist/components/floating-bottom-navigation/FloatingBottomNavigation.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{useRender as n}from"@base-ui/react/use-render";import{barMinHeightClasses as r,BottomNavigationContext as o}from"../../internal/bottom-navigation.js";import{observeResize as s}from"../../internal/observe.js";import{cx as i,surfaceClasses as l,surfaceSlots as d,transitionClasses as f}from"../../internal/styles.js";import{useStyleDefaults as u}from"../../internal/defaults.js";const p={solid:[l,"text-(--neba-fg) bg-(--n-panel-press)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[l,"border text-(--neba-fg) bg-(--n-panel-hover)","[border-color:var(--n-line)]","[box-shadow:var(--n-elev),var(--neba-plate-glass)]"].join(" "),text:"text-(--neba-fg) bg-transparent"},m={static:"relative mx-auto w-fit",absolute:"absolute inset-x-0 bottom-(--n-nav-offset) z-30 mx-auto w-fit",sticky:"sticky bottom-(--n-nav-offset) z-30 mx-auto w-fit",fixed:"fixed inset-x-0 bottom-(--n-nav-offset) z-40 mx-auto w-fit"},v={default:{xs:"p-1",sm:"p-1",md:"p-1.5",lg:"p-1.5",xl:"p-2"},compact:{xs:"p-0.5",sm:"p-0.5",md:"p-1",lg:"p-1",xl:"p-1"}},c={solid:`${l} bg-(--n-panel-hover) [box-shadow:var(--neba-shadow-1),var(--neba-plate-glass)]`,outline:`${l} bg-(--n-soft-hover) [box-shadow:var(--neba-shadow-1),var(--neba-plate-glass)]`,text:"bg-(--n-soft-hover)"},b={xs:"gap-0.5",sm:"gap-0.5",md:"gap-1",lg:"gap-1",xl:"gap-1.5"};export const FloatingBottomNavigation=/*@__PURE__*/a.forwardRef(function FloatingBottomNavigation(l,x){const{variant:g="outline",size:y="md",color:h="primary",density:w="default",elevation:j=2,value:$,defaultValue:z=null,onValueChange:N,position:k="fixed",offset:A=16,labels:P="selected",safeArea:C=!0,disabled:E=!1,label:L,render:R,className:B,style:F,children:S,...V}=u(l,["size","density","variant"]),[W,q]=a.useState(z),H=void 0!==$,M=H?$:W,T=a.useCallback(e=>{H||q(e),N?.(e)},[H,N]),D=a.useMemo(()=>({value:M??null,change:T,size:y,density:w,labels:P,disabled:E,floating:!0}),[M,T,y,w,P,E]),G=a.useRef(null),I=a.useRef(null),J=a.useCallback(e=>{G.current=e,"function"==typeof x?x(e):x&&(x.current=e)},[x]),K=a.useCallback(e=>{const t=G.current,a=I.current;if(!t||!a)return;const n=t.querySelector("[data-nav-item][aria-current]");if(a.hidden=!n,!n)return void a.removeAttribute("data-ready");const r=!e||!a.hasAttribute("data-ready");r&&a.removeAttribute("data-ready"),a.style.setProperty("--n-nav-x",`${n.offsetLeft}px`),a.style.setProperty("--n-nav-y",`${n.offsetTop}px`),a.style.setProperty("--n-nav-w",`${n.offsetWidth}px`),a.style.setProperty("--n-nav-h",`${n.offsetHeight}px`),r&&a.offsetWidth,a.setAttribute("data-ready","")},[]);a.useLayoutEffect(()=>{K(!0)},[K,M,g,y,w,P,S]),a.useEffect(()=>{const e=G.current;if(!e)return;const t=e=>{"grid-template-columns"===e.propertyName&&K(!0)},a=s(e,()=>K(!1));return e.addEventListener("transitionend",t),()=>{a(),e.removeEventListener("transitionend",t)}},[K]);const O="number"==typeof A?`${A}px`:A,Q=i("flex max-w-full min-w-0 items-center rounded-full",r[y],v[w][y],b[y],p[g],m[k],f,B);return n({render:R??e("nav",{}),ref:J,props:{"aria-label":L,className:Q,style:{...d(h,j),"--n-nav-offset":C?`calc(${O} + env(safe-area-inset-bottom))`:O,...F},children:t(o.Provider,{value:D,children:[null!=M?e("span",{ref:I,"aria-hidden":"true",className:i("pointer-events-none absolute rounded-full","top-(--n-nav-y) left-(--n-nav-x) h-(--n-nav-h) w-(--n-nav-w)",c[g],"[transition-property:left,top,width,height]","[transition-timing-function:var(--neba-ease)]","[transition-duration:0ms] data-[ready]:[transition-duration:var(--neba-duration)]","motion-reduce:[transition-duration:0ms]")}):null,S]}),...V}})});
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{useLayoutEffectOnClient as n}from"../../internal/layout-effect.js";import{useRender as r}from"@base-ui/react/use-render";import{barMinHeightClasses as o,BottomNavigationContext as s}from"../../internal/bottom-navigation.js";import{observeResize as i}from"../../internal/observe.js";import{cx as l,surfaceClasses as d,surfaceSlots as f,transitionClasses as u}from"../../internal/styles.js";import{useStyleDefaults as p}from"../../internal/defaults.js";const m={solid:[d,"text-(--neba-fg) bg-(--n-panel-press)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[d,"border text-(--neba-fg) bg-(--n-panel-hover)","[border-color:var(--n-line)]","[box-shadow:var(--n-elev),var(--neba-plate-glass)]"].join(" "),text:"text-(--neba-fg) bg-transparent"},v={static:"relative mx-auto w-fit",absolute:"absolute inset-x-0 bottom-(--n-nav-offset) z-30 mx-auto w-fit",sticky:"sticky bottom-(--n-nav-offset) z-30 mx-auto w-fit",fixed:"fixed inset-x-0 bottom-(--n-nav-offset) z-40 mx-auto w-fit"},c={default:{xs:"p-1",sm:"p-1",md:"p-1.5",lg:"p-1.5",xl:"p-2"},compact:{xs:"p-0.5",sm:"p-0.5",md:"p-1",lg:"p-1",xl:"p-1"}},b={solid:`${d} bg-(--n-panel-hover) [box-shadow:var(--neba-shadow-1),var(--neba-plate-glass)]`,outline:`${d} bg-(--n-soft-hover) [box-shadow:var(--neba-shadow-1),var(--neba-plate-glass)]`,text:"bg-(--n-soft-hover)"},x={xs:"gap-0.5",sm:"gap-0.5",md:"gap-1",lg:"gap-1",xl:"gap-1.5"};export const FloatingBottomNavigation=/*@__PURE__*/a.forwardRef(function FloatingBottomNavigation(d,g){const{variant:y="outline",size:h="md",color:w="primary",density:j="default",elevation:$=2,value:z,defaultValue:N=null,onValueChange:k,position:A="fixed",offset:P=16,labels:C="selected",safeArea:E=!0,disabled:L=!1,label:R,render:B,className:F,style:S,children:V,...W}=p(d,["size","density","variant"]),[q,H]=a.useState(N),M=void 0!==z,T=M?z:q,D=a.useCallback(e=>{M||H(e),k?.(e)},[M,k]),G=a.useMemo(()=>({value:T??null,change:D,size:h,density:j,labels:C,disabled:L,floating:!0}),[T,D,h,j,C,L]),I=a.useRef(null),J=a.useRef(null),K=a.useCallback(e=>{I.current=e,"function"==typeof g?g(e):g&&(g.current=e)},[g]),O=a.useCallback(e=>{const t=I.current,a=J.current;if(!t||!a)return;const n=t.querySelector("[data-nav-item][aria-current]");if(a.hidden=!n,!n)return void a.removeAttribute("data-ready");const r=!e||!a.hasAttribute("data-ready");r&&a.removeAttribute("data-ready"),a.style.setProperty("--n-nav-x",`${n.offsetLeft}px`),a.style.setProperty("--n-nav-y",`${n.offsetTop}px`),a.style.setProperty("--n-nav-w",`${n.offsetWidth}px`),a.style.setProperty("--n-nav-h",`${n.offsetHeight}px`),r&&a.offsetWidth,a.setAttribute("data-ready","")},[]);n(()=>{O(!0)},[O,T,y,h,j,C,V]),a.useEffect(()=>{const e=I.current;if(!e)return;const t=e=>{"grid-template-columns"===e.propertyName&&O(!0)},a=i(e,()=>O(!1));return e.addEventListener("transitionend",t),()=>{a(),e.removeEventListener("transitionend",t)}},[O]);const Q="number"==typeof P?`${P}px`:P,U=l("flex max-w-full min-w-0 items-center rounded-full",o[h],c[j][h],x[h],m[y],v[A],u,F);return r({render:B??e("nav",{}),ref:K,props:{"aria-label":R,className:U,style:{...f(w,$),"--n-nav-offset":E?`calc(${Q} + env(safe-area-inset-bottom))`:Q,...S},children:t(s.Provider,{value:G,children:[null!=T?e("span",{ref:J,"aria-hidden":"true",className:l("pointer-events-none absolute rounded-full","top-(--n-nav-y) left-(--n-nav-x) h-(--n-nav-h) w-(--n-nav-w)",b[y],"[transition-property:left,top,width,height]","[transition-timing-function:var(--neba-ease)]","[transition-duration:0ms] data-[ready]:[transition-duration:var(--neba-duration)]","motion-reduce:[transition-duration:0ms]")}):null,V]}),...W}})});

package/dist/components/gallery/Gallery.d.ts

@@ -35,6 +35,19 @@ export interface NebaGalleryItem {
     title?: React.ReactNode;
     /** The second, one step down the scale and muted. */
     description?: React.ReactNode;
+    /**
+     * The same picture at other widths, as an `<img>` takes them, so a tile drawn
+     * 300 pixels wide is not sent a 4000-pixel original. The viewer is handed it
+     * too when the item has no `full`, and chooses a candidate for its own size.
+     */
+    srcSet?: string;
+    /**
+     * How wide the tile is drawn, for the browser to choose from `srcSet` by:
+     * `'(min-width: 64rem) 25vw, (min-width: 40rem) 33vw, 50vw'` for the default
+     * columns across the whole page. Left out, the browser assumes the tile is as
+     * wide as the window.
+     */
+    sizes?: string;
     /**
      * A larger file for the viewer, when the tile is a thumbnail. Falls back to
      * `src`, so a set that has only one size of each picture needs nothing here.
@@ -122,10 +135,21 @@ export interface GalleryProps extends Omit<React.ComponentPropsWithoutRef<'ul'>,
      * When the tiles' files load. `lazy` waits until a tile is near the screen,
      * so a wall of forty photographs asks for the few a reader can see rather
      * than all forty at once. Set `eager` when the gallery is the largest thing
-     * above the fold, where a lazy first row arrives later than it should.
+     * above the fold, where a lazy first row arrives later than it should, or
+     * leave this alone and give `priority` the length of that row.
      * @default 'lazy'
      */
     loading?: 'lazy' | 'eager';
+    /**
+     * How many tiles, counted from the first item, are pictures the page is
+     * judged by. Each of them is an Image with `priority`: fetched early and
+     * never lazily whatever `loading` says, and drawn from the first paint with
+     * no fade and no Skeleton. For a gallery whose first row is the largest thing
+     * above the fold, it is the length of that row; the tiles after it keep
+     * `loading`.
+     * @default 0
+     */
+    priority?: number;
     /**
      * Where a tile's `title` and `description` go. `below` puts them under the
      * picture, `overlay` writes them across the foot of it, and `hover` is
@@ -148,8 +172,9 @@ export interface GalleryProps extends Omit<React.ComponentPropsWithoutRef<'ul'>,
      * Opens the picture full size when a tile is clicked, with the rest of the
      * set an arrow key away.
      *
-     * The viewer is fetched on demand, so a Gallery that does not offer one does
-     * not carry it.
+     * The viewer is fetched when a pointer, the focus or a finger first reaches
+     * the gallery, and mounted by the press that opens it: a Gallery nobody
+     * reaches for does not carry it, and a server render does not wait on it.
      * @default false
      */
     preview?: boolean;
@@ -175,6 +200,23 @@ export interface GalleryProps extends Omit<React.ComponentPropsWithoutRef<'ul'>,
     /** Class names for the parts behind the root. */
     classNames?: NebaSlots<GallerySlot>;
 }
+/**
+ * The one request for the viewer's chunk, shared by everything that asks.
+ *
+ * Asked for when a pointer arrives over the gallery, when the focus reaches a
+ * tile or when a finger lands on one, so the download is under way before the
+ * press that opens it; and by `React.lazy` at that press, which is handed the
+ * same promise and waits only for what is left of it. A request that fails is
+ * forgotten, so the next one tries again rather than failing for good.
+ *
+ * An object rather than a function so a test can spy on it. Exported for that,
+ * and deliberately left out of the barrel.
+ */
+export declare const viewerChunk: {
+    load(): Promise<{
+        default: typeof import("./GalleryViewer.js").GalleryViewer;
+    }>;
+};
 /**
  * Whether an item is turned onto its side, whatever number its turn was written
  * as. Exported for the viewer, and deliberately left out of the barrel.

package/dist/components/gallery/Gallery.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t,Fragment as i}from"react/jsx-runtime";import*as r from"react";import{Image as o}from"../image/Image.js";import{responsiveSlots as a,withBaseline as l}from"../../internal/responsive.js";import{useBreakpointValue as s}from"../../hooks/useMediaQuery.js";import{fillMessage as n,galleryMessages as u,useMessages as d}from"../../internal/i18n.js";import{cx as m,hasContent as c,metaTextClasses as p,radiusClasses as f,sheetTitleClasses as h,toLength as g,transitionClasses as x}from"../../internal/styles.js";import{useStyleDefaults as b}from"../../internal/defaults.js";const v=r.lazy(()=>import("./GalleryViewer.js").then(e=>({default:e.GalleryViewer}))),w={xs:2,sm:3,lg:4},y={xs:"0.25rem",sm:"0.375rem",md:"0.5rem",lg:"0.75rem",xl:"1rem"};function N(e,t){if(void 0===e)return t;if("number"==typeof e)return e>0?e:t;const[i,r]=e.split("/"),o=void 0===r?Number(i):Number(i)/Number(r);return Number.isFinite(o)&&o>0?o:t}export function isSideways(e){return Math.abs(Math.round((e.rotate??0)/90))%2==1}export function shownRatioOf(e,t){const i=N(e.ratio,t);return void 0!==e.ratio&&isSideways(e)?1/i:i}const j={none:"",lift:"group-hover/tile:[box-shadow:var(--neba-shadow-2)] group-has-[:focus-visible]/tile:[box-shadow:var(--neba-shadow-2)] supports-[not_selector(:has(*))]:group-focus-within/tile:[box-shadow:var(--neba-shadow-2)]",dim:"",zoom:""},$={none:"",lift:"",dim:"group-hover/tile:[filter:brightness(0.82)] group-has-[:focus-visible]/tile:[filter:brightness(0.82)] supports-[not_selector(:has(*))]:group-focus-within/tile:[filter:brightness(0.82)]",zoom:"group-hover/tile:[transform:scale(1.06)] group-has-[:focus-visible]/tile:[transform:scale(1.06)] supports-[not_selector(:has(*))]:group-focus-within/tile:[transform:scale(1.06)]"};export const Gallery=/*@__PURE__*/r.forwardRef(function Gallery(_,k){const{items:M,layout:S="grid",columns:z,gap:R="md",ratio:q=1,rowHeight:G=220,rounded:A="md",fit:C="cover",letterbox:I,loading:O="lazy",caption:F="none",hover:V="lift",preview:B=!1,onItemSelect:E,filter:H,frame:Q,watermark:T,protect:W=!1,label:D,locale:J,empty:K,className:L,classNames:P,style:U,...X}=b(_,["locale"]),Y=d(u,J),Z=r.useId(),[ee,te]=r.useState(null),ie=l(z??w,2),re=Math.max(1,s(ie)??2),oe="string"==typeof R&&R in y?y[R]:g(R)??y.md,ae=!1===A?"":f[!0===A?"md":A],le=N(q,1),se=(r,a,l)=>{const s=c(r.title)||c(r.description),u="none"!==F&&s,d="overlay"===F||"hover"===F,f=`${Z}-${a}-title`,g=`${Z}-${a}-description`,b=`${Z}-${a}-position`,v=n(Y.item,{index:String(a+1),total:String(M.length)}),w=e(o,{src:r.src,alt:r.alt,ratio:"grid"===S?q:"quilted"===S?"auto":void 0!==r.ratio&&isSideways(r)?shownRatioOf(r,le):r.ratio??q,fit:C,position:r.position,letterbox:I,rotate:r.rotate,flip:r.flip,placeholder:r.placeholder,loading:O,rounded:!1,filter:H,frame:Q,watermark:T,protect:W,className:m("size-full",P?.image),classNames:{image:m("motion-reduce:[transition-duration:0ms]",$[V])}}),y=u?t("span",{className:m("min-w-0",d?m("pointer-events-none absolute inset-x-0 bottom-0 flex flex-col gap-0.5 p-2.5 text-white","[background:linear-gradient(to_top,color-mix(in_oklab,#000_72%,transparent),transparent)]","hover"===F?"opacity-0 group-hover/tile:opacity-100 group-has-[:focus-visible]/tile:opacity-100 supports-[not_selector(:has(*))]:group-focus-within/tile:opacity-100 [@media(hover:none)]:opacity-100 [transition:opacity_var(--neba-duration-fill)_var(--neba-ease)]":""):"flex flex-col gap-0.5 pt-1.5",P?.caption),children:[c(r.title)?e("span",{id:f,className:m("truncate font-medium",h.sm,d?"":"text-(--neba-fg)",P?.title),children:r.title}):null,c(r.description)?e("span",{id:g,className:m("truncate",p.md,d?"text-white/80":"text-(--neba-muted-fg)",P?.description),children:r.description}):null]}):null,N=t("span",{className:m("relative block overflow-hidden",ae,"quilted"===S||"justified"===S?"size-full":"","[transition:box-shadow_var(--neba-duration)_var(--neba-ease)]",j[V]),children:[w,d?y:null]}),_=d||!u?N:t(i,{children:[N,y]});return e("li",{className:m("group/tile relative m-0 min-w-0 list-none","justified"===S?"flex flex-col":"",P?.item),style:l,children:B||E?t("button",{type:"button","aria-label":u?void 0:`${r.alt} — ${v}`,"aria-labelledby":u?`${c(r.title)?f:g} ${b}`:void 0,"aria-haspopup":B?"dialog":void 0,"aria-describedby":u&&c(r.title)&&c(r.description)?g:void 0,className:m("block w-full text-start",B?"cursor-zoom-in":"cursor-pointer",x,"focus-visible:[outline:2px_solid_var(--n-ring,var(--neba-primary-ring))] focus-visible:[outline-offset:2px]",ae,"justified"===S?"flex-1":""),onClick:()=>(e=>{E?.(M[e],e),B&&te(e)})(a),children:[_,u?e("span",{id:b,hidden:!0,children:v}):null]}):_},r.id??r.src)},ne=m("neba-gallery m-0 list-none p-0","justified"===S?"neba-gallery-justified flex flex-wrap":"","masonry"===S?"flex items-start":"","grid"===S||"quilted"===S?"grid":"",L??""),ue={gap:oe,...a("cols",ie,e=>String(Math.max(1,Math.round(e)))),..."grid"===S||"quilted"===S?{gridTemplateColumns:"repeat(var(--n-cols), minmax(0, 1fr))"}:null,..."quilted"===S?{gridAutoRows:`${G}px`,gridAutoFlow:"dense"}:null,...U};let de;if("masonry"===S){de=function(e,t){const i=Array.from({length:t},()=>[]),r=new Array(t).fill(0);return e.forEach((e,o)=>{let a=0;for(let e=1;e<t;e+=1)r[e]<r[a]&&(a=e);i[a].push(o),r[a]+=1/e}),i}(M.map(e=>shownRatioOf(e,le)),re).map((t,i)=>e("li",{className:"m-0 flex min-w-0 flex-1 list-none flex-col",style:{gap:oe},children:e("ul",{className:"m-0 flex list-none flex-col p-0",style:{gap:oe},children:t.map(e=>se(M[e],e,{}))})},i))}else de="justified"===S?M.map((e,t)=>{const i=shownRatioOf(e,le);return se(e,t,{flexGrow:i,flexBasis:i*G+"px",maxWidth:"100%"})}):M.map((e,t)=>se(e,t,"quilted"===S?{gridColumn:`span ${Math.max(1,Math.round(e.cols??1))}`,gridRow:`span ${Math.max(1,Math.round(e.rows??1))}`}:{}));return 0===M.length&&c(K)?e(i,{children:K}):t(i,{children:[e("ul",{ref:k,role:"list","aria-label":D??Y.label,className:ne,style:ue,...X,children:de}),B?e(r.Suspense,{fallback:null,children:e(v,{items:M,index:ee,onIndexChange:te,locale:J,watermark:T,protect:W,messages:Y})}):null]})});
+"use client";import{jsx as e,jsxs as t,Fragment as i}from"react/jsx-runtime";import*as o from"react";import{Image as r}from"../image/Image.js";import{breakpoints as a,hiddenBelowClasses as l,hiddenFromClasses as n,responsiveSlots as s,valueAt as u,withBaseline as c}from"../../internal/responsive.js";import{useBreakpointValue as d}from"../../hooks/useMediaQuery.js";import{useHydrated as m}from"../../internal/media.js";import{fillMessage as p,galleryMessages as f,useMessages as h}from"../../internal/i18n.js";import{cx as g,hasContent as x,metaTextClasses as b,radiusClasses as v,sheetTitleClasses as w,toLength as y,transitionClasses as j}from"../../internal/styles.js";import{useStyleDefaults as N}from"../../internal/defaults.js";let k;export const viewerChunk={load:()=>(k??=import("./GalleryViewer.js").then(e=>({default:e.GalleryViewer})).catch(e=>{throw k=void 0,e}),k)};const M=o.lazy(()=>viewerChunk.load()),$={xs:2,sm:3,lg:4},S={xs:"0.25rem",sm:"0.375rem",md:"0.5rem",lg:"0.75rem",xl:"1rem"};function _(e,t){if(void 0===e)return t;if("number"==typeof e)return e>0?e:t;const[i,o]=e.split("/"),r=void 0===o?Number(i):Number(i)/Number(o);return Number.isFinite(r)&&r>0?r:t}export function isSideways(e){return Math.abs(Math.round((e.rotate??0)/90))%2==1}export function shownRatioOf(e,t){const i=_(e.ratio,t);return void 0!==e.ratio&&isSideways(e)?1/i:i}const z={none:"",lift:"group-hover/tile:[box-shadow:var(--neba-shadow-2)] group-has-[:focus-visible]/tile:[box-shadow:var(--neba-shadow-2)] supports-[not_selector(:has(*))]:group-focus-within/tile:[box-shadow:var(--neba-shadow-2)]",dim:"",zoom:""},R={none:"",lift:"",dim:"group-hover/tile:[filter:brightness(0.82)] group-has-[:focus-visible]/tile:[filter:brightness(0.82)] supports-[not_selector(:has(*))]:group-focus-within/tile:[filter:brightness(0.82)]",zoom:"group-hover/tile:[transform:scale(1.06)] group-has-[:focus-visible]/tile:[transform:scale(1.06)] supports-[not_selector(:has(*))]:group-focus-within/tile:[transform:scale(1.06)]"};export const Gallery=/*@__PURE__*/o.forwardRef(function Gallery(k,C){const{items:q,layout:F="grid",columns:G,gap:A="md",ratio:I=1,rowHeight:O=220,rounded:E="md",fit:T="cover",letterbox:P,loading:V="lazy",priority:B=0,caption:H="none",hover:Q="lift",preview:W=!1,onItemSelect:D,filter:J,frame:K,watermark:L,protect:U=!1,label:X,locale:Y,empty:Z,className:ee,classNames:te,style:ie,onPointerEnter:oe,onFocus:re,onTouchStart:ae,...le}=N(k,["locale"]),ne=h(f,Y),se=o.useId(),[ue,ce]=o.useState(null),[de,me]=o.useState(!1),pe=o.useRef(!1),fe=()=>{W&&!pe.current&&(pe.current=!0,viewerChunk.load().catch(()=>{}))},he=c(G??$,2),ge=Math.max(1,d(he)??2),xe=m(),be="string"==typeof A&&A in S?S[A]:y(A)??S.md,ve=!1===E?"":v[!0===E?"md":E],we=_(I,1),ye=(o,a,l)=>{const n=x(o.title)||x(o.description),s="none"!==H&&n,u="overlay"===H||"hover"===H,c=`${se}-${a}-title`,d=`${se}-${a}-description`,m=`${se}-${a}-position`,f=p(ne.item,{index:String(a+1),total:String(q.length)}),h=a<B,v=e(r,{src:o.src,srcSet:o.srcSet,sizes:o.sizes,alt:o.alt,ratio:"grid"===F?I:"quilted"===F?"auto":void 0!==o.ratio&&isSideways(o)?shownRatioOf(o,we):o.ratio??I,fit:T,position:o.position,letterbox:P,rotate:o.rotate,flip:o.flip,placeholder:o.placeholder,loading:h?void 0:V,priority:h,rounded:!1,filter:J,frame:K,watermark:L,protect:U,className:g("size-full",te?.image),classNames:{image:g("motion-reduce:[transition-duration:0ms]",R[Q])}}),y=s?t("span",{className:g("min-w-0",u?g("pointer-events-none absolute inset-x-0 bottom-0 flex flex-col gap-0.5 p-2.5 text-white","[background:linear-gradient(to_top,color-mix(in_oklab,#000_72%,transparent),transparent)]","hover"===H?"opacity-0 group-hover/tile:opacity-100 group-has-[:focus-visible]/tile:opacity-100 supports-[not_selector(:has(*))]:group-focus-within/tile:opacity-100 [@media(hover:none)]:opacity-100 [transition:opacity_var(--neba-duration-fill)_var(--neba-ease)]":""):"flex flex-col gap-0.5 pt-1.5",te?.caption),children:[x(o.title)?e("span",{id:c,className:g("truncate font-medium",w.sm,u?"":"text-(--neba-fg)",te?.title),children:o.title}):null,x(o.description)?e("span",{id:d,className:g("truncate",b.md,u?"text-white/80":"text-(--neba-muted-fg)",te?.description),children:o.description}):null]}):null,N=t("span",{className:g("relative block overflow-hidden",ve,"quilted"===F||"justified"===F?"size-full":"","[transition:box-shadow_var(--neba-duration)_var(--neba-ease)]",z[Q]),children:[v,u?y:null]}),k=u||!s?N:t(i,{children:[N,y]});return e("li",{className:g("group/tile relative m-0 min-w-0 list-none","justified"===F?"flex flex-col":"",te?.item),style:l,children:W||D?t("button",{type:"button","aria-label":s?void 0:`${o.alt} — ${f}`,"aria-labelledby":s?`${x(o.title)?c:d} ${m}`:void 0,"aria-haspopup":W?"dialog":void 0,"aria-describedby":s&&x(o.title)&&x(o.description)?d:void 0,className:g("block w-full text-start",W?"cursor-zoom-in":"cursor-pointer",j,"focus-visible:[outline:2px_solid_var(--n-ring,var(--neba-primary-ring))] focus-visible:[outline-offset:2px]",ve,"justified"===F?"flex-1":""),onClick:()=>(e=>{D?.(q[e],e),W&&(me(!0),ce(e))})(a),children:[k,s?e("span",{id:m,hidden:!0,children:f}):null]}):k},o.id??o.src)},je=g("neba-gallery m-0 list-none p-0","justified"===F?"neba-gallery-justified flex flex-wrap":"","masonry"===F?"flex items-start":"","grid"===F||"quilted"===F?"grid":"",ee??""),Ne={gap:be,...s("cols",he,e=>String(Math.max(1,Math.round(e)))),..."grid"===F||"quilted"===F?{gridTemplateColumns:"repeat(var(--n-cols), minmax(0, 1fr))"}:null,..."quilted"===F?{gridAutoRows:`${O}px`,gridAutoFlow:"dense"}:null,...ie};let ke;if("masonry"===F){const t=q.map(e=>shownRatioOf(e,we)),i=(i,o)=>function(e,t){const i=Array.from({length:t},()=>[]),o=new Array(t).fill(0);return e.forEach((e,r)=>{let a=0;for(let e=1;e<t;e+=1)o[e]<o[a]&&(a=e);i[a].push(r),o[a]+=1/e}),i}(t,i).map((t,r)=>e("li",{className:g("m-0 flex min-w-0 flex-1 list-none flex-col",o),style:{gap:be},children:e("ul",{className:"m-0 flex list-none flex-col p-0",style:{gap:be},children:t.map(e=>ye(q[e],e,{}))})},`${i}-${r}`)),o=a.map(e=>({breakpoint:e,count:Math.max(1,Math.round(u(he,e)??2))})),r=o.filter((e,t)=>0===t||e.count!==o[t-1].count);ke=xe||1===r.length?i(Math.max(1,Math.round(ge)),""):r.flatMap((e,t)=>{const o=r[t+1];return i(e.count,g(l[e.breakpoint],o?n[o.breakpoint]:""))})}else ke="justified"===F?q.map((e,t)=>{const i=shownRatioOf(e,we);return ye(e,t,{flexGrow:i,flexBasis:i*O+"px",maxWidth:"100%"})}):q.map((e,t)=>ye(e,t,"quilted"===F?{gridColumn:`span ${Math.max(1,Math.round(e.cols??1))}`,gridRow:`span ${Math.max(1,Math.round(e.rows??1))}`}:{}));return 0===q.length&&x(Z)?e(i,{children:Z}):t(i,{children:[e("ul",{ref:C,role:"list","aria-label":X??ne.label,className:je,style:Ne,...le,onPointerEnter:e=>{fe(),oe?.(e)},onFocus:e=>{fe(),re?.(e)},onTouchStart:e=>{fe(),ae?.(e)},children:ke}),W&&de?e(o.Suspense,{fallback:null,children:e(M,{items:q,index:ue,onIndexChange:ce,locale:Y,watermark:L,protect:U,messages:ne})}):null]})});

package/dist/components/gallery/GalleryViewer.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import{Dialog as l}from"../dialog/Dialog.js";import{IconButton as n}from"../icon-button/IconButton.js";import{Image as a}from"../image/Image.js";import{ChevronIcon as i}from"../../internal/icons.js";import{fillMessage as r}from"../../internal/i18n.js";import{cx as o,hasContent as s,metaTextClasses as c,srOnlyClasses as m}from"../../internal/styles.js";import{isSideways as d,shownRatioOf as u}from"./Gallery.js";export function GalleryViewer({items:p,index:f,onIndexChange:h,locale:v,watermark:x,protect:g,messages:b}){const j=null!==f,y=null===f?void 0:p[f],N=null===f||f<=0,w=null===f||f>=p.length-1,k=y?.title??y?.alt,D=void 0!==y&&d(y),C=D&&void 0!==y.ratio?u(y,1):null,K=e=>{e>=0&&e<p.length&&h(e)};return e(l,{open:j,onOpenChange:e=>{e||h(null)},size:"xl",locale:v,title:y?.title??y?.alt??"",description:y?.description,onKeyDown:e=>{if(null===f||e.metaKey||e.ctrlKey||e.altKey)return;const t="rtl"===getComputedStyle(e.currentTarget).direction?-1:1;"ArrowRight"===e.key?(e.preventDefault(),K(f+t)):"ArrowLeft"===e.key&&(e.preventDefault(),K(f-t))},children:t("div",{className:"flex flex-col gap-3",children:[t("div",{className:"relative flex items-center justify-center",children:[y?e(a,{src:y.full??y.src,alt:y.alt,ratio:C??"auto",fit:"contain",rounded:"md",rotate:y.rotate,flip:y.flip,watermark:x,protect:g,className:D?null===C?"max-h-[70vh]":void 0:"max-h-[70vh] w-auto",classNames:D?void 0:{image:"max-h-[70vh] w-auto object-contain"},style:D?{width:null===C?"100%":`min(100%, calc(70vh * ${C}))`}:void 0},y.id??y.src):null,p.length>1?t("div",{className:"pointer-events-none absolute inset-x-0 flex items-center justify-between px-1",children:[e(n,{variant:"solid",elevation:1,label:b.previous,disabled:N,focusableWhenDisabled:!0,className:"pointer-events-auto",icon:e("span",{className:"flex items-center rotate-90 rtl:-rotate-90",children:e(i,{})}),onClick:()=>K((f??0)-1)}),e(n,{variant:"solid",elevation:1,label:b.next,disabled:w,focusableWhenDisabled:!0,className:"pointer-events-auto",icon:e("span",{className:"flex items-center -rotate-90 rtl:rotate-90",children:e(i,{})}),onClick:()=>K((f??0)+1)})]}):null]}),p.length>1?t("p",{className:o("m-0 text-center text-(--neba-muted-fg)",c.md),"aria-live":"polite","aria-atomic":"true",children:[s(k)?t("span",{className:m,children:[k,", "]}):null,e("span",{children:r(b.item,{index:String((f??0)+1),total:String(p.length)})})]}):null]})})}
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import{Dialog as l}from"../dialog/Dialog.js";import{IconButton as n}from"../icon-button/IconButton.js";import{Image as i}from"../image/Image.js";import{ChevronIcon as a}from"../../internal/icons.js";import{fillMessage as r}from"../../internal/i18n.js";import{cx as o,hasContent as s,metaTextClasses as c,srOnlyClasses as m}from"../../internal/styles.js";import{isSideways as d,shownRatioOf as u}from"./Gallery.js";export function GalleryViewer({items:p,index:f,onIndexChange:h,locale:v,watermark:x,protect:g,messages:b}){const j=null!==f,y=null===f?void 0:p[f],N=null===f||f<=0,w=null===f||f>=p.length-1,k=y?.title??y?.alt,D=void 0!==y&&d(y),C=D&&void 0!==y.ratio?u(y,1):null,S=e=>{e>=0&&e<p.length&&h(e)};return e(l,{open:j,onOpenChange:e=>{e||h(null)},size:"xl",locale:v,title:y?.title??y?.alt??"",description:y?.description,onKeyDown:e=>{if(null===f||e.metaKey||e.ctrlKey||e.altKey)return;const t="rtl"===getComputedStyle(e.currentTarget).direction?-1:1;"ArrowRight"===e.key?(e.preventDefault(),S(f+t)):"ArrowLeft"===e.key&&(e.preventDefault(),S(f-t))},children:t("div",{className:"flex flex-col gap-3",children:[t("div",{className:"relative flex items-center justify-center",children:[y?e(i,{src:y.full??y.src,srcSet:void 0===y.full?y.srcSet:void 0,alt:y.alt,ratio:C??"auto",fit:"contain",rounded:"md",rotate:y.rotate,flip:y.flip,watermark:x,protect:g,className:D?null===C?"max-h-[70vh]":void 0:"max-h-[70vh] w-auto",classNames:D?void 0:{image:"max-h-[70vh] w-auto object-contain"},style:D?{width:null===C?"100%":`min(100%, calc(70vh * ${C}))`}:void 0},y.id??y.src):null,p.length>1?t("div",{className:"pointer-events-none absolute inset-x-0 flex items-center justify-between px-1",children:[e(n,{variant:"solid",elevation:1,label:b.previous,disabled:N,focusableWhenDisabled:!0,className:"pointer-events-auto",icon:e("span",{className:"flex items-center rotate-90 rtl:-rotate-90",children:e(a,{})}),onClick:()=>S((f??0)-1)}),e(n,{variant:"solid",elevation:1,label:b.next,disabled:w,focusableWhenDisabled:!0,className:"pointer-events-auto",icon:e("span",{className:"flex items-center -rotate-90 rtl:rotate-90",children:e(a,{})}),onClick:()=>S((f??0)+1)})]}):null]}),p.length>1?t("p",{className:o("m-0 text-center text-(--neba-muted-fg)",c.md),"aria-live":"polite","aria-atomic":"true",children:[s(k)?t("span",{className:m,children:[k,", "]}):null,e("span",{children:r(b.item,{index:String((f??0)+1),total:String(p.length)})})]}):null]})})}

package/dist/components/gauge-chart/GaugeChart.js

@@ -1 +1 @@
-"use client";import{jsx as t,jsxs as a,Fragment as e}from"react/jsx-runtime";import*as n from"react";import{ChartSurface as r,useMeasuredWidth as l,chartHeight as s,useMeasuredHeight as i}from"../../internal/chart-frame.js";import{arcPath as o,chartFontSizes as m,compactNumber as h,ringPath as c,textWidth as f,truncate as u}from"../../internal/chart.js";import{numberFormatter as d}from"../../internal/format.js";import{emptyMessages as x,useMessages as p}from"../../internal/i18n.js";import{thresholdColor as M}from"../../internal/progress.js";import{cx as g,hasContent as b,metaTextClasses as v}from"../../internal/styles.js";import{useStyleDefaults as y}from"../../internal/defaults.js";function N(t,a,e,n){const r=(n-90)*Math.PI/180;return[t+e*Math.cos(r),a+e*Math.sin(r)]}export function GaugeChart(j){const{value:k,min:w=0,max:z=100,sweep:S=180,thickness:$=.22,thresholds:W,ticks:q=!1,showRange:A=!0,center:B,caption:C,height:D,format:I,locale:L,label:P,empty:R,size:F="md",variant:G="text",color:Y="primary",padded:E=!1,className:H,...J}=y(j,["size","variant","locale"]),K=n.useRef(null),O=l(K),Q=p(x,L),T=n.useCallback(t=>I?d(L,I).format(t):h(t,L),[I,L]),U=Math.max(1,Math.min(360,S)),V=U/2,X=-V,Z=V,_=z-w,tt=null===k||Number.isNaN(k)||0===_?null:Math.min(1,Math.max(0,(k-w)/_)),at=null===k?Y:M(k,Y,W),et=i(K,"string"==typeof D),nt=s(D,F,et),rt=m[F],lt=Math.min(.9,Math.max(.05,$)),st=V*Math.PI/180,it=U>=360?1:Math.max(0,-Math.cos(st)),ot=U>=180?1:Math.sin(st),mt=Math.sin(st),ht=-Math.cos(st),ct=A&&U<330?[w,z].map(t=>u(T(t),Math.max(0,.28*O),rt)):[],ft=ct.reduce((t,a)=>Math.max(t,f(a,rt)),0),ut=.35*rt,dt=!1===q?0:.85*rt,xt=ht<=.25,pt=xt?0:.5*rt,Mt=xt?rt:rt*(.35+.55*ht),gt=ct.length>0?ht*pt+Mt+.25*rt:0,bt=Math.max(ut,dt),vt=Math.max(ut,dt),yt=Math.max(ut,dt,gt),Nt=[(O/2-bt)/Math.max(.05,ot),(nt-vt-yt)/(1+it)];if(ft>0&&mt>.05){const t=xt?ft/2:ft;Nt.push(Math.max(0,O/2-ut-t)/mt-pt)}const jt=Math.max(0,Math.min(...Nt)),kt=jt*(1-lt),wt=O/2,zt=vt+jt*(1+it)+yt,St=vt+jt+Math.max(0,(nt-zt)/2),$t=O>0,Wt=0===_||$t&&jt<=0,qt=b(C)?1.85*rt:0,At=St-kt*(1-Math.min(1,it))/2,Bt=Math.min(kt,Math.abs(St-At)),Ct=Math.min(kt,Math.abs(St-At-qt/2)),Dt=2*Math.sqrt(Math.max(0,kt*kt-Ct*Ct)),It=B??(null===k?"—":T(k)),Lt="string"==typeof It?f(It,1):0,Pt=Lt>0?Math.max(rt,Math.min(2*rt,function(t,a,e,n,r){const l=t*t/(4*r*r)+n*n,s=2*a*n,i=a*a-e*e;return l<=0||i>=0?0:(Math.sqrt(s*s-4*l*i)-s)/(2*l)}(Lt,Bt,kt,.42,.86))):2*rt,Rt=!1===q?0:Math.max(2,Math.floor(q));return t(r,{...J,variant:G,color:Y,size:F,padded:E,legendSide:"bottom",className:H,legend:null,table:null,children:t("div",{ref:K,className:"relative w-full",style:{height:"string"==typeof D?D:nt},...void 0===P?{}:null===tt||null===k?{role:"img","aria-label":P}:{role:"meter","aria-label":P,"aria-valuenow":k,"aria-valuemin":w,"aria-valuemax":z,"aria-valuetext":["string"==typeof It||"number"==typeof It?String(It):T(k),"string"==typeof C||"number"==typeof C?String(C):""].filter(Boolean).join(" ")},children:Wt?t("div",{className:g("flex h-full items-center justify-center text-(--neba-muted-fg)",v[F]),children:R??Q.title}):$t?a(e,{children:[a("svg",{width:O,height:nt,viewBox:`0 0 ${O} ${nt}`,"aria-hidden":"true",className:"block",children:[t("path",{d:o(wt,St,jt,kt,X,Z),fill:`var(--neba-${Y}-soft)`}),null!==tt?t("path",{d:c(wt,St,(jt+kt)/2,X,Z),fill:"none",stroke:`var(--neba-${at}-fill)`,strokeWidth:jt-kt,pathLength:"1",strokeDasharray:"1",strokeDashoffset:1-tt,style:{transition:"stroke-dashoffset var(--neba-duration-fill) var(--neba-ease), stroke var(--neba-duration) var(--neba-ease)"}}):null,Rt>0?Array.from({length:Rt},(a,e)=>{const n=X+U*e/(Rt-1),[r,l]=N(wt,St,jt+.25*rt,n),[s,i]=N(wt,St,jt+.6*rt,n);return t("line",{x1:r,y1:l,x2:s,y2:i,stroke:"var(--neba-chart-grid)",strokeWidth:1,strokeLinecap:"round"},e)}):null,ct.length>0?[[ct[0],X,"start"],[ct[1],Z,"end"]].map(([a,e,n])=>{const[r,l]=N(wt,St,jt+pt,e);return t("text",{x:r,y:l+Mt,textAnchor:xt?"middle":"start"===n?"end":"start",fontSize:rt,fill:"var(--neba-muted-fg)",children:a},n)}):null]}),a("div",{className:"pointer-events-none absolute inset-x-0 mx-auto flex flex-col items-center gap-0.5 text-center",style:{top:At+qt/2,maxWidth:Dt,transform:"translateY(-50%)"},children:[t("span",{className:"font-semibold tabular-nums text-(--neba-fg)",style:{fontSize:Pt},children:It}),C?t("span",{className:g("text-(--neba-muted-fg)",v[F]),children:C}):null]})]}):a("div",{className:"flex h-full flex-col items-center justify-center gap-0.5 text-center",children:[t("span",{className:"font-semibold tabular-nums text-(--neba-fg)",style:{fontSize:2*rt},children:It}),C?t("span",{className:g("text-(--neba-muted-fg)",v[F]),children:C}):null]})})})}
+"use client";import{jsx as t,jsxs as a,Fragment as e}from"react/jsx-runtime";import*as n from"react";import{ChartSurface as r,useMeasuredWidth as l,chartHeight as s,useMeasuredHeight as i}from"../../internal/chart-frame.js";import{arcPath as o,chartFontSizes as m,compactNumber as h,ringPath as c,textWidth as f,truncate as u}from"../../internal/chart.js";import{numberFormatter as d}from"../../internal/format.js";import{emptyMessages as x,useMessages as p}from"../../internal/i18n.js";import{thresholdColor as M}from"../../internal/progress.js";import{cx as g,hasContent as b,metaTextClasses as v}from"../../internal/styles.js";import{useStyleDefaults as y}from"../../internal/defaults.js";import{useIntlLocale as j}from"../../internal/media.js";function N(t,a,e,n){const r=(n-90)*Math.PI/180;return[t+e*Math.cos(r),a+e*Math.sin(r)]}export function GaugeChart(k){const{value:w,min:z=0,max:S=100,sweep:$=180,thickness:W=.22,thresholds:q,ticks:A=!1,showRange:B=!0,center:C,caption:D,height:I,format:L,locale:P,label:R,empty:F,size:G="md",variant:Y="text",color:E="primary",padded:H=!1,className:J,...K}=y(k,["size","variant","locale"]),O=n.useRef(null),Q=l(O),T=p(x,P),U=j(P),V=n.useCallback(t=>L?d(U,L).format(t):h(t,U),[L,U]),X=Math.max(1,Math.min(360,$)),Z=X/2,_=-Z,tt=Z,at=S-z,et=null===w||Number.isNaN(w)||0===at?null:Math.min(1,Math.max(0,(w-z)/at)),nt=null===w?E:M(w,E,q),rt=i(O,"string"==typeof I),lt=s(I,G,rt),st=m[G],it=Math.min(.9,Math.max(.05,W)),ot=Z*Math.PI/180,mt=X>=360?1:Math.max(0,-Math.cos(ot)),ht=X>=180?1:Math.sin(ot),ct=Math.sin(ot),ft=-Math.cos(ot),ut=B&&X<330?[z,S].map(t=>u(V(t),Math.max(0,.28*Q),st)):[],dt=ut.reduce((t,a)=>Math.max(t,f(a,st)),0),xt=.35*st,pt=!1===A?0:.85*st,Mt=ft<=.25,gt=Mt?0:.5*st,bt=Mt?st:st*(.35+.55*ft),vt=ut.length>0?ft*gt+bt+.25*st:0,yt=Math.max(xt,pt),jt=Math.max(xt,pt),Nt=Math.max(xt,pt,vt),kt=[(Q/2-yt)/Math.max(.05,ht),(lt-jt-Nt)/(1+mt)];if(dt>0&&ct>.05){const t=Mt?dt/2:dt;kt.push(Math.max(0,Q/2-xt-t)/ct-gt)}const wt=Math.max(0,Math.min(...kt)),zt=wt*(1-it),St=Q/2,$t=jt+wt*(1+mt)+Nt,Wt=jt+wt+Math.max(0,(lt-$t)/2),qt=Q>0,At=0===at||qt&&wt<=0,Bt=b(D)?1.85*st:0,Ct=Wt-zt*(1-Math.min(1,mt))/2,Dt=Math.min(zt,Math.abs(Wt-Ct)),It=Math.min(zt,Math.abs(Wt-Ct-Bt/2)),Lt=2*Math.sqrt(Math.max(0,zt*zt-It*It)),Pt=C??(null===w?"—":V(w)),Rt="string"==typeof Pt?f(Pt,1):0,Ft=Rt>0?Math.max(st,Math.min(2*st,function(t,a,e,n,r){const l=t*t/(4*r*r)+n*n,s=2*a*n,i=a*a-e*e;return l<=0||i>=0?0:(Math.sqrt(s*s-4*l*i)-s)/(2*l)}(Rt,Dt,zt,.42,.86))):2*st,Gt=!1===A?0:Math.max(2,Math.floor(A));return t(r,{...K,variant:Y,color:E,size:G,padded:H,legendSide:"bottom",className:J,legend:null,table:null,children:t("div",{ref:O,className:"relative w-full",style:{height:"string"==typeof I?I:lt},...void 0===R?{}:null===et||null===w?{role:"img","aria-label":R}:{role:"meter","aria-label":R,"aria-valuenow":w,"aria-valuemin":z,"aria-valuemax":S,"aria-valuetext":["string"==typeof Pt||"number"==typeof Pt?String(Pt):V(w),"string"==typeof D||"number"==typeof D?String(D):""].filter(Boolean).join(" ")},children:At?t("div",{className:g("flex h-full items-center justify-center text-(--neba-muted-fg)",v[G]),children:F??T.title}):qt?a(e,{children:[a("svg",{width:Q,height:lt,viewBox:`0 0 ${Q} ${lt}`,"aria-hidden":"true",className:"block",children:[t("path",{d:o(St,Wt,wt,zt,_,tt),fill:`var(--neba-${E}-soft)`}),null!==et?t("path",{d:c(St,Wt,(wt+zt)/2,_,tt),fill:"none",stroke:`var(--neba-${nt}-fill)`,strokeWidth:wt-zt,pathLength:"1",strokeDasharray:"1",strokeDashoffset:1-et,style:{transition:"stroke-dashoffset var(--neba-duration-fill) var(--neba-ease), stroke var(--neba-duration) var(--neba-ease)"}}):null,Gt>0?Array.from({length:Gt},(a,e)=>{const n=_+X*e/(Gt-1),[r,l]=N(St,Wt,wt+.25*st,n),[s,i]=N(St,Wt,wt+.6*st,n);return t("line",{x1:r,y1:l,x2:s,y2:i,stroke:"var(--neba-chart-grid)",strokeWidth:1,strokeLinecap:"round"},e)}):null,ut.length>0?[[ut[0],_,"start"],[ut[1],tt,"end"]].map(([a,e,n])=>{const[r,l]=N(St,Wt,wt+gt,e);return t("text",{x:r,y:l+bt,textAnchor:Mt?"middle":"start"===n?"end":"start",fontSize:st,fill:"var(--neba-muted-fg)",children:a},n)}):null]}),a("div",{className:"pointer-events-none absolute inset-x-0 mx-auto flex flex-col items-center gap-0.5 text-center",style:{top:Ct+Bt/2,maxWidth:Lt,transform:"translateY(-50%)"},children:[t("span",{className:"font-semibold tabular-nums text-(--neba-fg)",style:{fontSize:Ft},children:Pt}),D?t("span",{className:g("text-(--neba-muted-fg)",v[G]),children:D}):null]})]}):a("div",{className:"flex h-full flex-col items-center justify-center gap-0.5 text-center",children:[t("span",{className:"font-semibold tabular-nums text-(--neba-fg)",style:{fontSize:2*st},children:Pt}),D?t("span",{className:g("text-(--neba-muted-fg)",v[G]),children:D}):null]})})})}

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

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

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

@@ -20,6 +20,20 @@ export interface HowToStep {
     image?: string;
     /** What that picture says for a reader who cannot see it. Defaults to `title`. */
     imageAlt?: string;
+    /**
+     * The picture's own pixel dimensions, as an `<img>` takes them. Together they
+     * are its proportion, which the browser reserves before the file arrives, so
+     * the panel is the right height from the first paint rather than growing as
+     * the pictures land. They are not a size: the picture still spans the panel.
+     */
+    imageWidth?: number;
+    imageHeight?: number;
+    /**
+     * When the picture is fetched. `lazy` waits until the guide is near the
+     * screen; `eager` is for a guide at the top of the page.
+     * @default 'lazy'
+     */
+    imageLoading?: 'lazy' | 'eager';
 }
 export interface HowToStepsProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'title' | 'content'> {
     /**