neba 1.4.0 → 1.6.0

package/dist/components/table/Table.js

@@ -1 +1 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import{Box as r}from"../box/Box";import{controlTextLeadingClasses as a,metaTextClasses as l,paddingXValues as n}from"../../internal/styles";const o={default:{xs:"0.25rem",sm:"0.375rem",md:"0.625rem",lg:"0.75rem",xl:"0.875rem"},compact:{xs:"0.125rem",sm:"0.25rem",md:"0.375rem",lg:"0.5rem",xl:"0.625rem"}},s=["[--n-row:transparent]","[transition:background-color_var(--neba-duration)_var(--neba-ease)]"].join(" "),i={borderTop:"1px solid var(--n-line)",backgroundColor:"var(--n-row)"};export function Table({headers:d,items:c,getRowKey:m,caption:p,empty:h,striped:b=!1,hoverable:x=!1,stickyHeader:y=!1,onRowClick:g,size:f="md",density:u="default",className:v,...w}){const k=n[u][f],N=o[u][f],j=Boolean(g),$=x||j,B={padding:`${N} ${k}`},C={...B,backgroundColor:"var(--n-panel-press)"};return e(r,{size:f,density:u,padded:!1,className:["overflow-x-auto",v??""].filter(Boolean).join(" "),...w,children:t("table",{className:`w-full text-start ${a[f]} text-(--neba-fg)`,style:{borderCollapse:"collapse"},children:[p?e("caption",{className:`${l[f]} text-(--neba-muted-fg)`,style:{...B,textAlign:"start"},children:p}):null,e("colgroup",{children:d.map(t=>e("col",{style:void 0===t.width?void 0:{width:"number"==typeof t.width?`${t.width}px`:t.width}},t.key))}),e("thead",{children:e("tr",{children:d.map(t=>e("th",{scope:"col",className:["font-semibold whitespace-nowrap text-(--neba-muted-fg)",y?"sticky top-0 z-10 [backdrop-filter:var(--neba-blur)]":""].filter(Boolean).join(" "),style:{...C,textAlign:t.align??"start"},children:t.label??t.key},t.key))})}),e("tbody",{children:0===c.length?e("tr",{className:s,style:i,children:e("td",{colSpan:d.length,className:"text-(--neba-muted-fg)",style:{padding:`2rem ${k}`,textAlign:"center"},children:h??"No data"})}):c.map((t,r)=>e("tr",{className:[s,b&&r%2==1?"[--n-row:var(--n-panel-hover)]":"",$?"hover:[--n-row:var(--n-soft)]":"",j?"cursor-pointer":""].filter(Boolean).join(" "),style:i,onClick:g?()=>g(t,r):void 0,children:d.map(a=>e("td",{style:{...B,textAlign:a.align??"start"},children:a.render?a.render(t,r):t[a.key]},a.key))},m?m(t,r):r))})]})})}
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{Box as r}from"../box/Box";import{useMessages as n}from"../../internal/i18n";import{controlTextLeadingClasses as o,metaTextClasses as l,paddingXValues as a}from"../../internal/styles";const i={default:{xs:"0.25rem",sm:"0.375rem",md:"0.625rem",lg:"0.75rem",xl:"0.875rem"},compact:{xs:"0.125rem",sm:"0.25rem",md:"0.375rem",lg:"0.5rem",xl:"0.625rem"}},s=["[--n-row:transparent]","[transition:background-color_var(--neba-duration)_var(--neba-ease)]"].join(" "),d=["cursor-pointer [outline:none]","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:[outline-offset:-2px]"].join(" "),c={borderTop:"1px solid var(--n-line)",backgroundColor:"var(--n-row)"};export function Table({headers:m,items:p,getRowKey:b,caption:h,locale:u,empty:y,striped:f=!1,hoverable:x=!1,stickyHeader:g=!1,onRowClick:v,size:w="md",density:k="default",className:j,...N}){const $=n(u),B=a[k][w],C=i[k][w],A=Boolean(v),_=x||A,z={padding:`${C} ${B}`},T={...z,backgroundColor:"var(--n-panel-press)"};return e(r,{size:w,density:k,padded:!1,className:["overflow-x-auto",j??""].filter(Boolean).join(" "),...N,children:t("table",{className:`w-full text-start ${o[w]} text-(--neba-fg)`,style:{borderCollapse:"collapse"},children:[h?e("caption",{className:`${l[w]} text-(--neba-muted-fg)`,style:{...z,textAlign:"start"},children:h}):null,e("colgroup",{children:m.map(t=>e("col",{style:void 0===t.width?void 0:{width:"number"==typeof t.width?`${t.width}px`:t.width}},t.key))}),e("thead",{children:e("tr",{children:m.map(t=>e("th",{scope:"col",className:["font-semibold whitespace-nowrap text-(--neba-muted-fg)",g?"sticky top-0 z-10 [backdrop-filter:var(--neba-blur)]":""].filter(Boolean).join(" "),style:{...T,textAlign:t.align??"start"},children:t.label??t.key},t.key))})}),e("tbody",{children:0===p.length?e("tr",{className:s,style:c,children:e("td",{colSpan:m.length,className:"text-(--neba-muted-fg)",style:{padding:`2rem ${B}`,textAlign:"center"},children:y??$.table.empty})}):p.map((t,r)=>e("tr",{className:[s,f&&r%2==1?"[--n-row:var(--n-panel-hover)]":"",_?"hover:[--n-row:var(--n-soft)]":"",A?d:""].filter(Boolean).join(" "),style:c,tabIndex:A?0:void 0,onClick:v?()=>v(t,r):void 0,onKeyDown:v?e=>{e.target===e.currentTarget&&("Enter"!==e.key&&" "!==e.key||(e.preventDefault(),v(t,r)))}:void 0,children:m.map(n=>e("td",{style:{...z,textAlign:n.align??"start"},children:n.render?n.render(t,r):t[n.key]},n.key))},b?b(t,r):r))})]})})}

package/dist/components/text-link/TextLink.js

@@ -1 +1 @@
-import{jsx as n,Fragment as e,jsxs as r}from"react/jsx-runtime";import*as i from"react";import{useRender as o}from"@base-ui/react/use-render";import{useMessages as a}from"../../internal/i18n";import{ExternalLinkIcon as t,LinkIcon as l}from"../../internal/icons";import{controlTextLeadingClasses as s,focusRingClasses as c,srOnlyClasses as m}from"../../internal/styles";const d={always:"[&.neba-link]:underline",hover:"[&.neba-link]:no-underline [&.neba-link]:hover:underline",none:"[&.neba-link]:no-underline"},u=["neba-link","cursor-pointer","[&_svg]:pointer-events-none [&_svg]:inline [&_svg]:size-[0.95em] [&_svg]:shrink-0",["[transition-property:color,text-decoration-color]","[transition-duration:var(--neba-duration)]","[transition-timing-function:var(--neba-ease)]"].join(" "),c,"focus-visible:rounded-[0.25rem]"].join(" ");export const TextLink=i.forwardRef(function({href:i,underline:c="always",color:p,size:b,newTab:f=!1,icon:v,locale:h,render:k,className:g,style:x,children:y,...j},w){const _=a(h),N=v??f,T=!0===N?n(f?t:l,{}):N,z=[u,b?s[b]:"",d[c],p?"[&.neba-link]:text-(--n-accent)":"[&.neba-link]:text-inherit",g??""].filter(Boolean).join(" "),C={"--n-underline":"color-mix(in oklab, currentColor 45%, transparent)","--n-underline-hover":"currentColor","--n-ring":`var(--neba-${p??"primary"}-ring)`,...p?{"--n-accent":`var(--neba-${p}-accent)`}:null};return o({render:k??n("a",{}),ref:w,props:{href:i,target:f?"_blank":void 0,rel:f?"noopener noreferrer":void 0,className:z,style:{...C,...x},children:r(e,{children:[y,T?n("span",{className:"ms-[0.25em]",children:T}):null,f?r(e,{children:[" ",n("span",{className:m,children:_.link.newTab})]}):null]}),...j}})});
+import{jsx as n,Fragment as e,jsxs as r}from"react/jsx-runtime";import*as i from"react";import{useRender as o}from"@base-ui/react/use-render";import{useMessages as a}from"../../internal/i18n";import{ExternalLinkIcon as t,LinkIcon as l}from"../../internal/icons";import{controlTextLeadingClasses as s,focusRingClasses as c,srOnlyClasses as m}from"../../internal/styles";const d={always:"[&.neba-link]:underline",hover:"[&.neba-link]:no-underline [&.neba-link]:hover:underline",none:"[&.neba-link]:no-underline"},u=["neba-link","cursor-pointer","[&_svg]:pointer-events-none [&_svg]:inline [&_svg]:size-[0.95em] [&_svg]:shrink-0",["[transition-property:color,text-decoration-color]","[transition-duration:var(--neba-duration)]","[transition-timing-function:var(--neba-ease)]"].join(" "),c,"focus-visible:rounded-[0.25rem]"].join(" ");export const TextLink=i.forwardRef(function({href:i,underline:c="always",color:p,size:b,newTab:f=!1,icon:v,locale:h,render:k,className:g,style:x,children:j,...y},w){const _=a(h),N=v??f,T=!0===N?n(f?t:l,{}):N,z=[u,b?s[b]:"",d[c],p?"[&.neba-link]:text-(--n-accent)":"[&.neba-link]:text-inherit",g??""].filter(Boolean).join(" "),B={"--n-underline":"color-mix(in oklab, currentColor 45%, transparent)","--n-underline-hover":"currentColor","--n-ring":`var(--neba-${p??"primary"}-ring)`,...p?{"--n-accent":`var(--neba-${p}-accent)`}:null},{rel:C,...$}=y,F=f?[...new Set([...(C??"").split(/\s+/).filter(Boolean),"noopener","noreferrer"])].join(" "):C;return o({render:k??n("a",{}),ref:w,props:{href:i,target:f?"_blank":void 0,className:z,style:{...B,...x},children:r(e,{children:[j,T?n("span",{className:"ms-[0.25em]",children:T}):null,f?r(e,{children:[" ",n("span",{className:m,children:_.link.newTab})]}):null]}),...$,rel:F}})});

package/dist/components/time-picker/TimePicker.js

@@ -1 +1 @@
-import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as o from"react";import{Button as t}from"../button/Button";import{TimeGrid as l,usePickerLabels as a}from"../../internal/calendar";import{ClockIcon as i}from"../../internal/icons";import{PickerFooter as r,PickerShell as s}from"../../internal/picker";import{displaySamples as c,formatDate as d,isHour12 as u,isValidDate as m,secondsOfDay as p,timeUnitSpan as h,toISOTime as f,withPlaceholder as S,withTime as b}from"../../internal/date";import{cx as g}from"../../internal/styles";export const TimePicker=o.forwardRef(function({value:y,defaultValue:v,onValueChange:x,open:C,defaultOpen:w,onOpenChange:z,referenceDate:k,minTime:D,maxTime:O,shouldDisableTime:T,hour12:j,showSeconds:V=!1,hourStep:B=1,minuteStep:I=1,secondStep:M=1,locale:N,format:R,placeholder:F,clearable:H=!1,showNowButton:P=!0,closeOnSelect:q=!1,labels:A,name:E,size:G="md",color:J="primary",density:K="default",readOnly:L=!1,disabled:Q=!1,startIcon:U,...W},X){const Y=a(A),Z=j??u(N),[$,_]=o.useState(v??null),ee=void 0!==y?y:$,[ne,oe]=o.useState(w??!1),te=C??ne,[le]=o.useState(()=>k??new Date),ae=e=>{e&&(L||Q)||(void 0===C&&oe(e),z?.(e))},ie=e=>{void 0===y&&_(e),x?.(e)},re=o.useCallback((e,n)=>{const[o,t]=h(n,e);return!!(m(D)&&t<p(D))||(!!(m(O)&&o>p(O))||(T?.(e,n)??!1))},[D,O,T]),se=R??{hour:"numeric",minute:"2-digit",...V?{second:"2-digit"}:{}},ce=new Date,de=b(k??le,{hours:ce.getHours(),minutes:ce.getMinutes(),seconds:V?ce.getSeconds():0}),ue=P||H||!q,me=o.useMemo(()=>S(c(N,se),F),[N,se,F]);return e(s,{...W,size:G,color:J,density:K,readOnly:L,disabled:Q,triggerRef:X,startIcon:U??e(i,{}),display:m(ee)?d(ee,N,se):F??"",samples:me,empty:!m(ee),clearable:H,onClear:()=>ie(null),open:te,onOpenChange:ae,labels:Y,hiddenValues:E?[{name:E,value:m(ee)?f(ee,V):""}]:void 0,children:n("div",{className:g("flex flex-col",ue&&"gap-1.5"),children:[e(l,{size:G,density:K,locale:N,value:m(ee)?ee:null,referenceDate:k??le,onChange:e=>{ie(e),q&&ae(!1)},hour12:Z,showSeconds:V,hourStep:B,minuteStep:I,secondStep:M,shouldDisableTime:re,labels:Y,autoFocus:!0}),ue?n(r,{size:G,children:[H?e(t,{variant:"text",size:G,color:J,density:"compact",onClick:()=>{ie(null),ae(!1)},children:Y.clear}):null,P?e(t,{variant:"text",size:G,color:J,density:"compact",disabled:re(de,"second"),onClick:()=>{ie(de),ae(!1)},children:Y.now}):null,q?null:e(t,{variant:"solid",size:G,color:J,density:"compact",onClick:()=>ae(!1),children:Y.done})]}):null]})})});
+import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as o from"react";import{Button as t}from"../button/Button";import{TimeGrid as l,usePickerLabels as a}from"../../internal/calendar";import{ClockIcon as i}from"../../internal/icons";import{PickerFooter as r,PickerShell as s}from"../../internal/picker";import{displaySamples as c,formatDate as d,isHour12 as u,isValidDate as m,secondsOfDay as p,timeUnitSpan as h,toISOTime as f,withPlaceholder as S,withTime as b}from"../../internal/date";import{cx as g}from"../../internal/styles";export const TimePicker=o.forwardRef(function({value:y,defaultValue:v,onValueChange:x,open:C,defaultOpen:w,onOpenChange:z,referenceDate:k,minTime:D,maxTime:O,shouldDisableTime:T,hour12:j,showSeconds:M=!1,hourStep:V=1,minuteStep:B=1,secondStep:I=1,locale:N,format:R,placeholder:F,clearable:H=!1,showNowButton:P=!0,closeOnSelect:q=!1,labels:A,name:E,size:G="md",color:J="primary",density:K="default",readOnly:L=!1,disabled:Q=!1,startIcon:U,...W},X){const Y=a(A),Z=j??u(N),[$,_]=o.useState(v??null),ee=void 0!==y?y:$,[ne,oe]=o.useState(w??!1),te=C??ne,[le]=o.useState(()=>k??new Date),ae=e=>{e&&(L||Q)||(void 0===C&&oe(e),z?.(e))},ie=e=>{void 0===y&&_(e),x?.(e)},re=o.useCallback((e,n)=>{const[o,t]=h(n,e);return!!(m(D)&&t<p(D))||(!!(m(O)&&o>p(O))||(T?.(e,n)??!1))},[D,O,T]),se=o.useMemo(()=>R??{hour:"numeric",minute:"2-digit",...M?{second:"2-digit"}:{}},[R,M]),ce=new Date,de=b(k??le,{hours:ce.getHours(),minutes:ce.getMinutes(),seconds:M?ce.getSeconds():0}),ue=P||H||!q,me=o.useMemo(()=>S(c(N,se),F),[N,se,F]);return e(s,{...W,size:G,color:J,density:K,readOnly:L,disabled:Q,triggerRef:X,startIcon:U??e(i,{}),display:m(ee)?d(ee,N,se):F??"",samples:me,empty:!m(ee),clearable:H,onClear:()=>ie(null),open:te,onOpenChange:ae,labels:Y,hiddenValues:E?[{name:E,value:m(ee)?f(ee,M):""}]:void 0,children:n("div",{className:g("flex flex-col",ue&&"gap-1.5"),children:[e(l,{size:G,density:K,locale:N,value:m(ee)?ee:null,referenceDate:k??le,onChange:e=>{ie(e),q&&ae(!1)},hour12:Z,showSeconds:M,hourStep:V,minuteStep:B,secondStep:I,shouldDisableTime:re,labels:Y,autoFocus:!0}),ue?n(r,{size:G,children:[H?e(t,{variant:"text",size:G,color:J,density:"compact",onClick:()=>{ie(null),ae(!1)},children:Y.clear}):null,P?e(t,{variant:"text",size:G,color:J,density:"compact",disabled:re(de,"second"),onClick:()=>{ie(de),ae(!1)},children:Y.now}):null,q?null:e(t,{variant:"solid",size:G,color:J,density:"compact",onClick:()=>ae(!1),children:Y.done})]}):null]})})});

package/dist/components/timeline-chart/TimelineChart.d.ts

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { type CartesianChartProps } from '../../internal/chart-frame';
+import type { NebaChartCategory, NebaTimelineSeries } from '../../types';
+export interface TimelineChartProps extends Omit<CartesianChartProps, 'series' | 'categories' | 'legend'> {
+    /**
+     * One row per series, and the spans on it. A row's name is what the axis
+     * says down the left-hand side.
+     */
+    series: readonly NebaTimelineSeries[];
+    /**
+     * Where the time axis starts and ends. Taken from the spans otherwise, and
+     * rounded outward to a date a calendar has a name for.
+     */
+    min?: NebaChartCategory;
+    max?: NebaChartCategory;
+    /**
+     * How thick a bar may get, in pixels. Below the cap the bars fill their share
+     * of the row; above it the leftover stays as air.
+     * @default the `size` ladder — 24 at `md`
+     */
+    barSize?: number;
+    /**
+     * Cuts the corners off a span.
+     *
+     * Both ends, unlike a [BarChart](./bar-chart), where the baseline end stays
+     * square. A span grows from nothing: neither of its ends is a zero, so
+     * neither is the one the reader is measuring from.
+     * @default true
+     */
+    rounded?: boolean;
+}
+/**
+ * Work against time — a row per thing, a bar per stretch of it.
+ *
+ * The two axes are a set of rows and a calendar, which makes this a
+ * [BarChart](./bar-chart) turned on its side with the baseline taken away:
+ * every bar starts where its own data says rather than at zero, so what the
+ * chart is about is *when* rather than *how much*.
+ *
+ * Not to be confused with [Timeline](../display/timeline), which is a list of
+ * steps and draws no axis at all. That one is for a sequence of events; this
+ * one is for how long each of them took.
+ */
+export declare function TimelineChart({ series, min, max, barSize, rounded, size, density, xAxis, yAxis, locale, ...props }: TimelineChartProps): React.JSX.Element;

package/dist/components/timeline-chart/TimelineChart.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as t from"react";import{CartesianChart as o}from"../../internal/chart-frame";import{barBandRatio as r,barMaxThickness as a,barRadius as s,formatTimeTicks as l,formatTimeValue as i,markGap as c,resolveColor as m,seriesColor as d,timeScale as u,toNumber as h}from"../../internal/chart";import{srOnlyClasses as x}from"../../internal/styles";export function TimelineChart({series:n,min:s,max:m,barSize:x,rounded:b=!0,size:y="md",density:k="default",xAxis:g,yAxis:v,locale:$,...C}){const w=t.useMemo(()=>n.map(f),[n]),z=t.useMemo(()=>w.map(e=>e.spans),[w]),A=t.useMemo(()=>{let e=1/0,n=-1/0,t=!1;for(const o of z)for(const r of o)r&&(t=!0,e=Math.min(e,r.from),n=Math.max(n,r.to));return t?{min:e,max:n}:null},[z]),j=t.useMemo(()=>u(A,{min:h(s)??void 0,max:h(m)??void 0,tickCount:v?.tickCount}),[A,s,m,v?.tickCount]),E=t.useMemo(()=>l(j.ticks,j.unit,$),[j,$]),P=t.useMemo(()=>n.map((e,n)=>d(e,n)),[n]),B=t.useMemo(()=>[{data:z.map(e=>e.some(Boolean)?1:null)}],[z]),I=t.useMemo(()=>n.map((e,n)=>e.name??`${n+1}`),[n]),T=x??a[y],F=t.useCallback(e=>{const n=[];return w.forEach((t,o)=>{const r=Math.min(T,Math.max(1,(e.band.band-c*(t.lanes-1))/t.lanes)),a=r*t.lanes+c*(t.lanes-1),s=e.plot.top+e.categoryPx(o)-a/2+r/2;t.spans.forEach((t,a)=>{if(!t)return;const l=e.valuePx(t.from),i=e.valuePx(t.to);n.push({series:o,index:a,x:(l+i)/2,y:s+t.lane*(r+c),r:r/2,rx:Math.max(0,(i-l)/2),ry:r/2})})}),n},[w,T]),N=t.useCallback(e=>{const n=z[e.series]?.[e.index];if(!n)return null;const t=[{seriesIndex:e.series,name:I[e.series],color:n.color??P[e.series],value:n.to-n.from,formatted:`${i(n.from,j.unit,$)} – ${i(n.to,j.unit,$)}`}];return{heading:n.span.label??I[e.series],items:t}},[z,I,P,j.unit,$]);return e(o,{...C,series:B,categories:I,size:y,density:k,locale:$,horizontal:!0,scale:j,xAxis:g,yAxis:{tickFormat:(e,n)=>E[n]??"",...v},legend:!1,bandRatio:r[k],marks:F,markTooltip:N,table:t=>e(M,{id:t,names:I,series:n,spans:z,unit:j.unit,label:C.label,corner:g?.label,locale:$}),children:n=>e(p,{context:n,spans:z,colors:P,rounded:b})})}function f(e){const n=e.data.map(e=>{const n=h(e.start),t=h(e.end);return null===n||null===t?null:{from:Math.min(n,t),to:Math.max(n,t),lane:0,color:e.color?m(e.color):void 0,span:e}}),t=[];return n.map((e,n)=>({one:e,index:n})).filter(e=>Boolean(e.one)).sort((e,n)=>e.one.from-n.one.from).forEach(({one:e})=>{const n=t.findIndex(n=>n<=e.from),o=-1===n?t.length:n;t[o]=e.to,e.lane=o}),{spans:n,lanes:Math.max(1,t.length)}}function p({context:n,spans:t,colors:o,rounded:r}){const{marks:a,activeMark:l,plot:i}=n,c=r?s:0;return e("g",{children:a.map(n=>{const r=t[n.series]?.[n.index];if(!r)return null;const a=l?.series===n.series&&l?.index===n.index,s=n.rx??n.r,m=2*(n.ry??n.r),d=Math.max(i.left,n.x-s),u=Math.min(i.left+i.width,n.x+s);if(u<i.left||d>i.left+i.width)return null;const h=Math.max(1,u-d);return e("rect",{x:d,y:n.y-m/2,width:h,height:m,rx:Math.min(c,h/2,m/2),fill:r.color??o[n.series],opacity:a?1:.92},`${n.series}-${n.index}`)})})}function M({id:t,names:o,series:r,spans:a,unit:s,label:l,corner:c,locale:m}){const d=r.some(e=>e.data.some(e=>void 0!==e.label));return n("table",{id:t,className:x,children:[l?e("caption",{children:l}):null,e("thead",{children:n("tr",{children:[e("th",{scope:"col",children:c??""}),d?e("th",{scope:"col",children:"label"}):null,e("th",{scope:"col",children:"start"}),e("th",{scope:"col",children:"end"})]})}),e("tbody",{children:a.flatMap((t,a)=>t.map((t,l)=>n("tr",{children:[e("th",{scope:"row",children:o[a]}),d?e("td",{children:r[a].data[l]?.label??""}):null,e("td",{children:t?i(t.from,s,m):""}),e("td",{children:t?i(t.to,s,m):""})]},`${a}-${l}`)))})]})}

package/dist/components/timeline-chart/index.d.ts

@@ -0,0 +1,2 @@
+export { TimelineChart } from './TimelineChart';
+export type { TimelineChartProps } from './TimelineChart';

package/dist/components/timeline-chart/index.js

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

package/dist/components/toast/Toast.d.ts

@@ -69,7 +69,15 @@ export interface ToastProviderProps extends Pick<NebaStyleProps, 'variant' | 'si
     limit?: number;
     /** How wide a toast is allowed to get. Numbers are pixels. @default 380 */
     width?: number | string;
-    /** Accessible name of every toast's × button. */
+    /**
+     * Which language every toast's × is named in — a BCP 47 tag such as `ko`, `pt-BR` or
+     * `zh-Hant`. Unsupported tags fall back to English.
+     *
+     * `closeLabel` write the words out instead; this is for the far more common
+     * case where the page already knows its own language.
+     */
+    locale?: string;
+    /** Accessible name of every toast's × button. Defaults to the `locale`'s word. */
     closeLabel?: string;
     children?: React.ReactNode;
 }
@@ -113,4 +121,4 @@ export declare function useToast(): {
  * limit, the swipe, the F6 focus hotkey, and the live region that makes a
  * message that appeared out of nowhere reach a screen reader at all.
  */
-export declare function ToastProvider({ variant, size, color, density, position, timeout, limit, width, closeLabel, children }: ToastProviderProps): React.JSX.Element;
+export declare function ToastProvider({ variant, size, color, density, position, timeout, limit, width, locale, closeLabel, children }: ToastProviderProps): React.JSX.Element;

package/dist/components/toast/Toast.js

@@ -1 +1 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as o from"react";import{Toast as i}from"@base-ui/react/toast";import{boxPaddingClasses as n}from"../box/Box";import{CloseIcon as s,severityIcons as a}from"../../internal/icons";import{controlSlots as r,focusRingClasses as l,hasContent as c,iconClasses as d,metaTextClasses as p,radiusClasses as u,sheetBodyClasses as m,sheetHeaderGapClasses as f,sheetSectionGapClasses as b,sheetTitleClasses as x,surfaceClasses as v}from"../../internal/styles";const h={"top-start":"top-0 items-start","top-center":"top-0 items-center","top-end":"top-0 items-end","bottom-start":"bottom-0 items-start flex-col-reverse","bottom-center":"bottom-0 items-center flex-col-reverse","bottom-end":"bottom-0 items-end flex-col-reverse"},y={solid:[v,"text-(--n-on-solid) bg-(--n-fill)","[box-shadow:var(--neba-shadow-3),var(--neba-plate-solid)]"].join(" "),outline:[v,"border text-(--neba-fg) bg-(--n-panel-press)","[border-color:var(--n-line)]","[box-shadow:var(--neba-shadow-3),var(--neba-plate-glass)]"].join(" "),text:[v,"text-(--neba-fg) bg-(--n-panel-press)","[box-shadow:var(--neba-shadow-3),var(--neba-plate-glass)]"].join(" ")},g={solid:"",outline:"text-(--n-accent)",text:"text-(--n-accent)"};function w(e){const{color:t,variant:o,icon:i,actionLabel:n,onAction:s,...a}=e;return{...a,data:{color:t,variant:o,icon:i},actionProps:void 0===n?void 0:{children:n,onClick:s}}}export function useToast(){const e=i.useToastManager();return o.useMemo(()=>({add:t=>e.add(w(t)),close:t=>e.close(t),update:(t,o)=>e.update(t,w(o)),promise:(t,o)=>e.promise(t,{loading:w(o.loading),success:e=>w("function"==typeof o.success?o.success(e):o.success),error:e=>w("function"==typeof o.error?o.error(e):o.error)}),toasts:e.toasts}),[e])}function j({toast:o,variant:v,color:h,size:w,density:j,closeLabel:N,swipeDirection:_}){const T=o.data?.variant??v??"outline",z=o.data?.color??h,$=void 0===o.data?.icon?a[z]:o.data.icon,k=g[T],D=c(o.title);return t(i.Root,{toast:o,swipeDirection:_,className:["pointer-events-auto flex w-full items-start",n[j??"default"][w],u[w],b[w],m[w],y[T],d,"[transition:opacity_var(--neba-duration)_var(--neba-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0","data-[limited]:hidden",l,"[outline:none]"].filter(Boolean).join(" "),style:r(z,3,T),children:[c($)?e("span",{className:`flex h-[1lh] shrink-0 items-center ${k}`,children:$}):null,t("div",{className:`flex min-w-0 flex-1 flex-col ${f[w]}`,children:[e(i.Title,{className:`neba-title font-semibold ${x[w]} ${k}`}),e(i.Description,{className:D?""+("solid"===T?"":"text-(--neba-muted-fg)"):""})]}),e(i.Action,{className:["flex h-[1lh] shrink-0 cursor-pointer items-center rounded-full px-2","font-medium underline-offset-2",k||"text-(--n-on-solid)","hover:underline","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2",p[w]].join(" ")}),e("span",{className:"flex h-[1lh] shrink-0 items-center",children:e(i.Close,{"aria-label":N,className:["inline-flex size-[1.15em] cursor-pointer items-center justify-center rounded-full","opacity-70 [transition:opacity_var(--neba-duration)_var(--neba-ease)]","hover:opacity-100 focus-visible:opacity-100","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2"].join(" "),children:e(s,{})})})]})}function N(t){const{toasts:o}=i.useToastManager(),{position:n,width:s,...a}=t,r=[n.startsWith("top")?"up":"down","left","right"];return e(i.Portal,{children:e(i.Viewport,{className:["neba-portal pointer-events-none fixed inset-x-0 z-50 flex flex-col gap-2 p-4",h[n]].join(" "),children:o.map(t=>e("div",{className:"w-full",style:{maxWidth:"number"==typeof s?`${s}px`:s},children:e(j,{toast:t,swipeDirection:r,...a})},t.id))})})}export function ToastProvider({variant:o="outline",size:n="md",color:s="primary",density:a="default",position:r="bottom-end",timeout:l=5e3,limit:c=3,width:d=380,closeLabel:p="Close",children:u}){return t(i.Provider,{timeout:l,limit:c,children:[u,e(N,{position:r,variant:o,size:n,color:s,density:a,width:d,closeLabel:p})]})}
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as o from"react";import{Toast as i}from"@base-ui/react/toast";import{boxPaddingClasses as n}from"../box/Box";import{useMessages as s}from"../../internal/i18n";import{CloseIcon as a,severityIcons as r}from"../../internal/icons";import{controlSlots as l,focusRingClasses as c,hasContent as d,iconClasses as m,metaTextClasses as p,radiusClasses as u,sheetBodyClasses as f,sheetHeaderGapClasses as b,sheetSectionGapClasses as x,sheetTitleClasses as v,surfaceClasses as h}from"../../internal/styles";const y={"top-start":"top-0 items-start","top-center":"top-0 items-center","top-end":"top-0 items-end","bottom-start":"bottom-0 items-start flex-col-reverse","bottom-center":"bottom-0 items-center flex-col-reverse","bottom-end":"bottom-0 items-end flex-col-reverse"},g={solid:[h,"text-(--n-on-solid) bg-(--n-fill)","[box-shadow:var(--neba-shadow-3),var(--neba-plate-solid)]"].join(" "),outline:[h,"border text-(--neba-fg) bg-(--n-panel-press)","[border-color:var(--n-line)]","[box-shadow:var(--neba-shadow-3),var(--neba-plate-glass)]"].join(" "),text:[h,"text-(--neba-fg) bg-(--n-panel-press)","[box-shadow:var(--neba-shadow-3),var(--neba-plate-glass)]"].join(" ")},w={solid:"",outline:"text-(--n-accent)",text:"text-(--n-accent)"};function j(e){const{color:t,variant:o,icon:i,actionLabel:n,onAction:s,...a}=e;return{...a,data:{color:t,variant:o,icon:i},actionProps:void 0===n?void 0:{children:n,onClick:s}}}export function useToast(){const e=i.useToastManager();return o.useMemo(()=>({add:t=>e.add(j(t)),close:t=>e.close(t),update:(t,o)=>e.update(t,j(o)),promise:(t,o)=>e.promise(t,{loading:j(o.loading),success:e=>j("function"==typeof o.success?o.success(e):o.success),error:e=>j("function"==typeof o.error?o.error(e):o.error)}),toasts:e.toasts}),[e])}function N({toast:o,variant:s,color:h,size:y,density:j,closeLabel:N,swipeDirection:_}){const T=o.data?.variant??s??"outline",z=o.data?.color??h,$=void 0===o.data?.icon?r[z]:o.data.icon,k=w[T],D=d(o.title);return t(i.Root,{toast:o,swipeDirection:_,className:["pointer-events-auto flex w-full items-start",n[j??"default"][y],u[y],x[y],f[y],g[T],m,"[transition:opacity_var(--neba-duration)_var(--neba-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0","data-[limited]:hidden",c,"[outline:none]"].filter(Boolean).join(" "),style:l(z,3,T),children:[d($)?e("span",{className:`flex h-[1lh] shrink-0 items-center ${k}`,children:$}):null,t("div",{className:`flex min-w-0 flex-1 flex-col ${b[y]}`,children:[e(i.Title,{className:`neba-title font-semibold ${v[y]} ${k}`}),e(i.Description,{className:D?""+("solid"===T?"":"text-(--neba-muted-fg)"):""})]}),e(i.Action,{className:["flex h-[1lh] shrink-0 cursor-pointer items-center rounded-full px-2","font-medium underline-offset-2",k||"text-(--n-on-solid)","hover:underline","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2",p[y]].join(" ")}),e("span",{className:"flex h-[1lh] shrink-0 items-center",children:e(i.Close,{"aria-label":N,className:["inline-flex size-[1.15em] cursor-pointer items-center justify-center rounded-full","opacity-70 [transition:opacity_var(--neba-duration)_var(--neba-ease)]","hover:opacity-100 focus-visible:opacity-100","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2"].join(" "),children:e(a,{})})})]})}function _(t){const{toasts:o}=i.useToastManager(),{position:n,width:s,...a}=t,r=[n.startsWith("top")?"up":"down","left","right"];return e(i.Portal,{children:e(i.Viewport,{className:["neba-portal pointer-events-none fixed inset-x-0 z-50 flex flex-col gap-2 p-4",y[n]].join(" "),children:o.map(t=>e("div",{className:"w-full",style:{maxWidth:"number"==typeof s?`${s}px`:s},children:e(N,{toast:t,swipeDirection:r,...a})},t.id))})})}export function ToastProvider({variant:o="outline",size:n="md",color:a="primary",density:r="default",position:l="bottom-end",timeout:c=5e3,limit:d=3,width:m=380,locale:p,closeLabel:u,children:f}){const b=s(p);return t(i.Provider,{timeout:c,limit:d,children:[f,e(_,{position:l,variant:o,size:n,color:a,density:r,width:m,closeLabel:u??b.action.close})]})}

package/dist/components/tooltip/Tooltip.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Tooltip as BaseUITooltip } from '@base-ui/react/tooltip';
 import type { NebaAlign, NebaSide, NebaStyleProps } from '../../types';
-export interface TooltipProps extends Pick<NebaStyleProps, 'size' | 'color' | 'density'> {
+export interface TooltipProps extends Pick<NebaStyleProps, 'size' | 'color' | 'density'>, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'content' | 'children'> {
     /**
      * What the tooltip says.
      *
@@ -46,8 +46,6 @@ export interface TooltipProps extends Pick<NebaStyleProps, 'size' | 'color' | 'd
      * @default false
      */
     disabled?: boolean;
-    className?: string;
-    style?: React.CSSProperties;
 }
 /**
  * Shares one delay across a group of tooltips: once any of them has opened, its
@@ -78,4 +76,4 @@ export type TooltipProviderProps = React.ComponentProps<typeof BaseUITooltip.Pro
  * this component wires both, and drops the reference while it is closed rather
  * than pointing at an element that is not in the document.
  */
-export declare function Tooltip({ content, children, size, color, density, side, align, sideOffset, delay, closeDelay, arrow, open, defaultOpen, onOpenChange, disabled, className, style }: TooltipProps): React.JSX.Element;
+export declare function Tooltip({ content, children, size, color, density, side, align, sideOffset, delay, closeDelay, arrow, open, defaultOpen, onOpenChange, disabled, className, style, ...props }: TooltipProps): React.JSX.Element;

package/dist/components/tooltip/Tooltip.js

@@ -1 +1 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{Tooltip as o}from"@base-ui/react/tooltip";import{controlSlots as i,metaTextClasses as s,paddingXClasses as n,radiusClasses as l,surfaceClasses as r}from"../../internal/styles";export const TooltipProvider=o.Provider;const d=[r,"max-w-64 text-(--n-on-solid) bg-(--n-fill)","[box-shadow:var(--neba-shadow-3),var(--neba-plate-solid)]","[outline:none]","[transition:opacity_var(--neba-duration)_var(--neba-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0","data-[instant]:[transition-duration:0ms]"].join(" "),p={xs:"py-0.5",sm:"py-0.5",md:"py-1",lg:"py-1.5",xl:"py-2"},c={xs:6,sm:7,md:8,lg:9,xl:10};export function Tooltip({content:r,children:m,size:h="sm",color:y="secondary",density:f="default",side:x="top",align:b="center",sideOffset:g=6,delay:u,closeDelay:v,arrow:w=!0,open:j,defaultOpen:O,onOpenChange:N,disabled:P=!1,className:T,style:z}){const B=c[h],C=a.useId(),[D,_]=a.useState(O??!1),k=j??D;return t(o.Root,{open:j,defaultOpen:O,onOpenChange:e=>{_(e),N?.(e)},children:[e(o.Trigger,{render:m,delay:u,closeDelay:v,disabled:P,"aria-describedby":k?C:void 0}),e(o.Portal,{children:e(o.Positioner,{className:"neba-portal z-50 [outline:none]",side:x,align:b,sideOffset:g,children:t(o.Popup,{id:C,role:"tooltip",className:[d,l[h],n[f][h],p[h],s[h],T??""].filter(Boolean).join(" "),style:{...i(y,3,"solid"),...z},children:[w?e(o.Arrow,{className:["data-[side=top]:bottom-[-1px]","data-[side=bottom]:top-[-1px] data-[side=bottom]:rotate-180","data-[side=left]:right-[-1px] data-[side=left]:-rotate-90","data-[side=right]:left-[-1px] data-[side=right]:rotate-90"].join(" "),children:e("svg",{width:B,height:B/2,viewBox:"0 0 10 5","aria-hidden":"true",className:"block",children:e("path",{d:"M0 0h10L5 5z",fill:"var(--n-fill)"})})}):null,r]})})})]})}
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{Tooltip as o}from"@base-ui/react/tooltip";import{controlSlots as i,metaTextClasses as s,paddingXClasses as n,radiusClasses as l,surfaceClasses as r}from"../../internal/styles";export const TooltipProvider=o.Provider;const d=[r,"max-w-64 text-(--n-on-solid) bg-(--n-fill)","[box-shadow:var(--neba-shadow-3),var(--neba-plate-solid)]","[outline:none]","[transition:opacity_var(--neba-duration)_var(--neba-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0","data-[instant]:[transition-duration:0ms]"].join(" "),p={xs:"py-0.5",sm:"py-0.5",md:"py-1",lg:"py-1.5",xl:"py-2"},c={xs:6,sm:7,md:8,lg:9,xl:10};export function Tooltip({content:r,children:m,size:h="sm",color:y="secondary",density:f="default",side:x="top",align:b="center",sideOffset:g=6,delay:u,closeDelay:v,arrow:w=!0,open:j,defaultOpen:O,onOpenChange:N,disabled:P=!1,className:T,style:z,...B}){const C=c[h],D=a.useId(),[_,k]=a.useState(O??!1),A=j??_;return t(o.Root,{open:j,defaultOpen:O,onOpenChange:e=>{k(e),N?.(e)},children:[e(o.Trigger,{render:m,delay:u,closeDelay:v,disabled:P,"aria-describedby":A?D:void 0}),e(o.Portal,{children:e(o.Positioner,{className:"neba-portal z-50 [outline:none]",side:x,align:b,sideOffset:g,children:t(o.Popup,{id:D,role:"tooltip",className:[d,l[h],n[f][h],p[h],s[h],T??""].filter(Boolean).join(" "),style:{...i(y,3,"solid"),...z},...B,children:[w?e(o.Arrow,{className:["data-[side=top]:bottom-[-1px]","data-[side=bottom]:top-[-1px] data-[side=bottom]:rotate-180","data-[side=left]:right-[-1px] data-[side=left]:-rotate-90","data-[side=right]:left-[-1px] data-[side=right]:rotate-90"].join(" "),children:e("svg",{width:C,height:C/2,viewBox:"0 0 10 5","aria-hidden":"true",className:"block",children:e("path",{d:"M0 0h10L5 5z",fill:"var(--n-fill)"})})}):null,r]})})})]})}

package/dist/components/tree-view/TreeView.js

@@ -1 +1 @@
-import{jsx as e,Fragment as t,jsxs as r}from"react/jsx-runtime";import*as n from"react";import{ChevronIcon as a}from"../../internal/icons";import{controlTextClasses as l,cx as s,gapClasses as o,hasContent as i,iconClasses as c,radiusClasses as d,surfaceClasses as u,surfaceSlots as m,transitionClasses as f}from"../../internal/styles";const p=n.createContext({size:"md",density:"default",disabled:!1,expandedKeys:new Set,selectedKeys:new Set,activeKey:null,toggle:()=>{},select:()=>{},activate:()=>{},register:()=>()=>{}}),x={solid:[u,"text-(--neba-fg) bg-(--n-panel-hover)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[u,"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"},g={xs:"0.875rem",sm:"1rem",md:"1.25rem",lg:"1.5rem",xl:"1.75rem"},b={xs:"1.375rem",sm:"1.625rem",md:"2rem",lg:"2.5rem",xl:"3rem"},h={default:{xs:"px-1.5",sm:"px-2",md:"px-2.5",lg:"px-3",xl:"px-3.5"},compact:{xs:"px-1",sm:"px-1",md:"px-1.5",lg:"px-2",xl:"px-2.5"}},v={xs:"rounded-[0.3125rem]",sm:"rounded-[0.375rem]",md:"rounded-[0.5rem]",lg:"rounded-[0.625rem]",xl:"rounded-[0.75rem]"},y={none:"",simple:"neba-tree-simple",folder:"neba-tree-folder"};function w(e){return Array.from(e.querySelectorAll('[role="treeitem"]'))}const k=e=>String(e);export const TreeView=n.forwardRef(function({variant:t="outline",size:r="md",color:a="primary",density:l="default",elevation:o=0,lines:i="simple",expanded:c,defaultExpanded:u,onExpandedChange:h,selected:v,defaultSelected:C,onSelectedChange:N,multiple:S=!1,disabled:K=!1,label:A,className:D,style:R,children:E,onKeyDown:j,...I},P){const[V,z]=n.useState(u??[]),[_,O]=n.useState(C??[]),[J,L]=n.useState(null),M=c??V,T=v??_,q=n.useRef(null),F=n.useCallback(e=>{q.current=e,"function"==typeof P?P(e):P&&(P.current=e)},[P]),H=n.useCallback(e=>{const t=k(e),r=c??V,n=r.some(e=>k(e)===t)?r.filter(e=>k(e)!==t):[...r,e];void 0===c&&z(n),h?.(n)},[c,V,h]),U=n.useCallback(e=>{const t=k(e),r=v??_,n=r.some(e=>k(e)===t),a=S?n?r.filter(e=>k(e)!==t):[...r,e]:[e];void 0===v&&O(a),N?.(a)},[S,v,_,N]),B=n.useRef(new Map),G=n.useCallback((e,t)=>(B.current.set(e,t),()=>{B.current.delete(e)}),[]),Q=JSON.stringify(M.map(k)),W=JSON.stringify(T.map(k)),X=n.useMemo(()=>({size:r,density:l,disabled:K,expandedKeys:new Set(M.map(k)),selectedKeys:new Set(T.map(k)),activeKey:J,toggle:H,select:U,activate:L,register:G}),[r,l,K,Q,W,J,H,U,G]);n.useEffect(()=>{const e=q.current;if(!e)return;const t=w(e);0!==t.length&&(null!==J&&t.some(e=>e.dataset.nebaValue===J)||L(t[0].dataset.nebaValue??null))});const Y=s("flex list-none flex-col p-1",d[r],x[t],f,y[i],D);return e(p.Provider,{value:X,children:e("ul",{ref:F,role:"tree","aria-label":A,"aria-multiselectable":S||void 0,className:Y,style:{...m(a,o),"--n-tree-indent":g[r],"--n-tree-row":b[r],...R},onKeyDown:function(e){if(j?.(e),e.defaultPrevented)return;const t=q.current,r=e.target?.closest?.('[role="treeitem"]');if(!t||!r||!t.contains(r))return;const n=w(t),a=n.indexOf(r);if(-1===a)return;const l=t=>{t&&(e.preventDefault(),L(t.dataset.nebaValue??null),t.focus())},s=e=>{const t=e.dataset.nebaValue;t&&B.current.get(t)?.toggle()},o="rtl"===getComputedStyle(t).direction,i=o?"ArrowLeft":"ArrowRight",c=o?"ArrowRight":"ArrowLeft",d=r.getAttribute("aria-expanded");switch(e.key){case"ArrowDown":l(n[a+1]);break;case"ArrowUp":l(n[a-1]);break;case"Home":l(n[0]);break;case"End":l(n[n.length-1]);break;case i:"false"===d?(e.preventDefault(),s(r)):"true"===d&&l(n[a+1]);break;case c:"true"===d?(e.preventDefault(),s(r)):l(r.parentElement?.closest('[role="treeitem"]'));break;case"Enter":case" ":e.preventDefault(),r.click()}},...I,children:E})})});export const TreeItem=n.forwardRef(function({value:d,label:u,startIcon:m,endIcon:x,action:g,href:b,expandable:y,disabled:w=!1,className:C,children:N,onClick:S,...K},A){const{size:D,density:R,disabled:E,expandedKeys:j,selectedKeys:I,activeKey:P,toggle:V,select:z,activate:_,register:O}=n.useContext(p),J=n.useId(),L=d??J,M=k(L),T=n.useRef(null),q=n.useCallback(e=>{T.current=e,"function"==typeof A?A(e):A&&(A.current=e)},[A]),F=n.Children.toArray(N),H=y??F.length>0,U=H&&j.has(M),B=I.has(M),G=w||E,Q=n.useRef({toggle:()=>{}});Q.current.toggle=()=>{!G&&H&&V(L)},n.useEffect(()=>O(M,Q.current),[M,O]);const W=s("flex min-w-0 flex-1 cursor-pointer items-center text-start","h-(--n-tree-row)",h[R][D],v[D],o[D],l[D],f,c,"group-focus-visible/tree-item:[outline:2px_solid_var(--n-ring)]","group-focus-visible/tree-item:outline-offset-[-2px]",G?"cursor-not-allowed text-(--neba-disabled-fg)":B?"bg-(--n-soft-press) font-medium text-(--n-accent) hover:bg-(--n-soft-press)":"hover:bg-(--n-soft)"),X=r(t,{children:[e("span",{"aria-hidden":"true",onClick:e=>{!G&&H&&(e.stopPropagation(),e.preventDefault(),T.current?.focus(),_(M),V(L))},className:s("flex h-[1lh] w-[1.15em] shrink-0 items-center justify-center","[transition:rotate_var(--neba-duration)_var(--neba-ease)]",H?"text-(--neba-muted-fg)":"",U?"rotate-0":"-rotate-90 rtl:rotate-90"),children:H?e(a,{}):null}),i(m)?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:m}):null,e("span",{className:"min-w-0 flex-1 truncate",children:u}),i(x)?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:x}):null]});return r("li",{ref:q,role:"treeitem","aria-expanded":H?U:void 0,"aria-selected":!!B||void 0,"aria-disabled":G||void 0,"data-neba-value":M,tabIndex:P===M?0:-1,className:s("group/tree-item relative block [outline:none]",C),onClick:function(e){e.stopPropagation(),G?e.preventDefault():(T.current?.focus(),_(M),S?.(e),e.defaultPrevented||(H&&V(L),z(L)))},...K,children:[r("div",{className:"flex w-full items-center",children:[b&&!G?e("a",{href:b,tabIndex:-1,className:W,"aria-current":B?"page":void 0,children:X}):e("div",{className:W,children:X}),i(g)?e("span",{className:s("flex shrink-0 items-center",h[R][D]),onClick:e=>e.stopPropagation(),children:g}):null]}),H&&U&&F.length>0?e("ul",{role:"group",className:"list-none ps-(--n-tree-indent)",children:N}):null]})});
+import{jsx as e,Fragment as t,jsxs as r}from"react/jsx-runtime";import*as n from"react";import{ChevronIcon as a}from"../../internal/icons";import{controlTextClasses as l,cx as s,gapClasses as o,hasContent as i,iconClasses as c,radiusClasses as d,surfaceClasses as u,surfaceSlots as m,transitionClasses as f}from"../../internal/styles";const p=n.createContext({size:"md",density:"default",disabled:!1,expandedKeys:new Set,selectedKeys:new Set,activeKey:null,toggle:()=>{},select:()=>{},activate:()=>{},register:()=>()=>{}}),x={solid:[u,"text-(--neba-fg) bg-(--n-panel-hover)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[u,"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"},b={xs:"0.875rem",sm:"1rem",md:"1.25rem",lg:"1.5rem",xl:"1.75rem"},g={xs:"1.375rem",sm:"1.625rem",md:"2rem",lg:"2.5rem",xl:"3rem"},h={default:{xs:"px-1.5",sm:"px-2",md:"px-2.5",lg:"px-3",xl:"px-3.5"},compact:{xs:"px-1",sm:"px-1",md:"px-1.5",lg:"px-2",xl:"px-2.5"}},v={xs:"rounded-[0.3125rem]",sm:"rounded-[0.375rem]",md:"rounded-[0.5rem]",lg:"rounded-[0.625rem]",xl:"rounded-[0.75rem]"},w={none:"",simple:"neba-tree-simple",folder:"neba-tree-folder"};function y(e){return Array.from(e.querySelectorAll('[role="treeitem"]'))}const k=e=>String(e);export const TreeView=n.forwardRef(function({variant:t="outline",size:r="md",color:a="primary",density:l="default",elevation:o=0,lines:i="simple",expanded:c,defaultExpanded:u,onExpandedChange:h,selected:v,defaultSelected:C,onSelectedChange:N,multiple:S=!1,disabled:K=!1,label:A,className:D,style:j,children:R,onKeyDown:E,...I},P){const[V,z]=n.useState(u??[]),[_,L]=n.useState(C??[]),[M,T]=n.useState(null),q=c??V,F=v??_,H=n.useRef(null),O=n.useCallback(e=>{H.current=e,"function"==typeof P?P(e):P&&(P.current=e)},[P]),U=n.useCallback(e=>{const t=k(e),r=c??V,n=r.some(e=>k(e)===t)?r.filter(e=>k(e)!==t):[...r,e];void 0===c&&z(n),h?.(n)},[c,V,h]),B=n.useCallback(e=>{const t=k(e),r=v??_,n=r.some(e=>k(e)===t),a=S?n?r.filter(e=>k(e)!==t):[...r,e]:[e];void 0===v&&L(a),N?.(a)},[S,v,_,N]),G=n.useRef(new Map),J=n.useCallback((e,t)=>(G.current.set(e,t),()=>{G.current.delete(e)}),[]),Q=q.map(k).join("\0"),W=F.map(k).join("\0"),X=n.useMemo(()=>({size:r,density:l,disabled:K,expandedKeys:new Set(q.map(k)),selectedKeys:new Set(F.map(k)),activeKey:M,toggle:U,select:B,activate:T,register:J}),[r,l,K,Q,W,M,U,B,J]);n.useEffect(()=>{const e=H.current;if(!e)return;const t=y(e);0!==t.length&&(null!==M&&t.some(e=>e.dataset.nebaValue===M)||T(t[0].dataset.nebaValue??null))});const Y=s("flex list-none flex-col p-1",d[r],x[t],f,w[i],D);return e(p.Provider,{value:X,children:e("ul",{ref:O,role:"tree","aria-label":A,"aria-multiselectable":S||void 0,className:Y,style:{...m(a,o),"--n-tree-indent":b[r],"--n-tree-row":g[r],...j},onKeyDown:function(e){if(E?.(e),e.defaultPrevented)return;const t=H.current,r=e.target?.closest?.('[role="treeitem"]');if(!t||!r||!t.contains(r))return;const n=y(t),a=n.indexOf(r);if(-1===a)return;const l=t=>{t&&(e.preventDefault(),T(t.dataset.nebaValue??null),t.focus())},s=e=>{const t=e.dataset.nebaValue;t&&G.current.get(t)?.toggle()},o="rtl"===getComputedStyle(t).direction,i=o?"ArrowLeft":"ArrowRight",c=o?"ArrowRight":"ArrowLeft",d=r.getAttribute("aria-expanded");switch(e.key){case"ArrowDown":l(n[a+1]);break;case"ArrowUp":l(n[a-1]);break;case"Home":l(n[0]);break;case"End":l(n[n.length-1]);break;case i:"false"===d?(e.preventDefault(),s(r)):"true"===d&&l(n[a+1]);break;case c:"true"===d?(e.preventDefault(),s(r)):l(r.parentElement?.closest('[role="treeitem"]'));break;case"Enter":case" ":e.preventDefault(),r.click()}},...I,children:R})})});export const TreeItem=n.forwardRef(function({value:d,label:u,startIcon:m,endIcon:x,action:b,href:g,expandable:w,disabled:y=!1,className:C,children:N,onClick:S,...K},A){const{size:D,density:j,disabled:R,expandedKeys:E,selectedKeys:I,activeKey:P,toggle:V,select:z,activate:_,register:L}=n.useContext(p),M=n.useId(),T=d??M,q=k(T),F=n.useRef(null),H=n.useCallback(e=>{F.current=e,"function"==typeof A?A(e):A&&(A.current=e)},[A]),O=n.Children.toArray(N),U=w??O.length>0,B=U&&E.has(q),G=I.has(q),J=y||R,Q=n.useRef({toggle:()=>{}});Q.current.toggle=()=>{!J&&U&&V(T)},n.useEffect(()=>L(q,Q.current),[q,L]);const W=s("flex min-w-0 flex-1 cursor-pointer items-center text-start","h-(--n-tree-row)",h[j][D],v[D],o[D],l[D],f,c,"group-focus-visible/tree-item:[outline:2px_solid_var(--n-ring)]","group-focus-visible/tree-item:outline-offset-[-2px]",J?"cursor-not-allowed text-(--neba-disabled-fg)":G?"bg-(--n-soft-press) font-medium text-(--n-accent) hover:bg-(--n-soft-press)":"hover:bg-(--n-soft)"),X=r(t,{children:[e("span",{"aria-hidden":"true",onClick:e=>{!J&&U&&(e.stopPropagation(),e.preventDefault(),F.current?.focus(),_(q),V(T))},className:s("flex h-[1lh] w-[1.15em] shrink-0 items-center justify-center","[transition:rotate_var(--neba-duration)_var(--neba-ease)]",U?"text-(--neba-muted-fg)":"",B?"rotate-0":"-rotate-90 rtl:rotate-90"),children:U?e(a,{}):null}),i(m)?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:m}):null,e("span",{className:"min-w-0 flex-1 truncate",children:u}),i(x)?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:x}):null]});return r("li",{ref:H,role:"treeitem","aria-expanded":U?B:void 0,"aria-selected":!!G||void 0,"aria-disabled":J||void 0,"data-neba-value":q,tabIndex:P===q?0:-1,className:s("group/tree-item relative block [outline:none]",C),onClick:function(e){e.stopPropagation(),J?e.preventDefault():(F.current?.focus(),_(q),S?.(e),e.defaultPrevented||(U&&V(T),z(T)))},...K,children:[r("div",{className:"flex w-full items-center",children:[g&&!J?e("a",{href:g,tabIndex:-1,className:W,"aria-current":G?"page":void 0,children:X}):e("div",{className:W,children:X}),i(b)?e("span",{className:s("flex shrink-0 items-center",h[j][D]),onClick:e=>e.stopPropagation(),children:b}):null]}),U&&B&&O.length>0?e("ul",{role:"group",className:"list-none ps-(--n-tree-indent)",children:N}):null]})});

package/dist/components/window-pane/WindowPane.d.ts

@@ -0,0 +1,178 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { NebaWindowControl, NebaWindowOffset, NebaWindowOs } from '../../internal/window';
+import type { NebaColor, NebaElevation, NebaSize } from '../../types';
+export type { NebaWindowControl, NebaWindowOffset, NebaWindowOs } from '../../internal/window';
+/** The three CSS positions a window can be laid out with. */
+export type WindowPanePosition = 'static' | 'absolute' | 'fixed';
+/** What a resize reports: the window's size in pixels. */
+export interface WindowPaneSize {
+    width: number;
+    height: number;
+}
+export interface WindowPaneProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'title' | 'onResize'> {
+    /**
+     * Whose window this is a picture of. Decides where the controls sit, how they
+     * are drawn, how tall the title bar is and how its corners are cut.
+     * @default 'macos'
+     */
+    os?: NebaWindowOs;
+    /** The window's name, in the title bar. Also what names the window itself. */
+    title?: React.ReactNode;
+    /** A glyph beside the title — the app's mark. */
+    icon?: React.ReactNode;
+    /** Anything else the title bar carries, set beside the controls. */
+    actions?: React.ReactNode;
+    /**
+     * Which of the three buttons the title bar has. `true` is all of them,
+     * `false` is none, and an array is exactly the ones named — a window that can
+     * be closed but not minimized is `['close']`.
+     *
+     * The order is the system's rather than the array's: macOS puts close first
+     * and Windows puts it last, and that is not something a caller should have to
+     * remember.
+     * @default true
+     */
+    controls?: boolean | readonly NebaWindowControl[];
+    /**
+     * The scale of the chrome — the title bar's height, its buttons and its type.
+     * It does not touch the content, which is the caller's and is laid out at its
+     * own scale, exactly as it would be on a desktop where the title bar does not
+     * grow with the document.
+     * @default 'md'
+     */
+    size?: NebaSize;
+    /** The colour family the focus rings and an `accent` title bar take. @default 'primary' */
+    color?: NebaColor;
+    /**
+     * Dyes the title bar with the colour family, the way Windows offers to. Off,
+     * the bar is the neutral shade the system draws by default.
+     * @default false
+     */
+    accent?: boolean;
+    /**
+     * How much of what is behind the window shows through its chrome, from `0` to
+     * `1`. It applies to the title bar, the body's own fill and the border —
+     * never to the content on it, which stays exactly as legible as it was.
+     *
+     * Anything above `0` also turns the acrylic on, so the page underneath is
+     * blurred rather than merely visible. `1` is a window that is nothing but its
+     * edge and its chrome.
+     * @default 0
+     */
+    transparency?: number;
+    /**
+     * Whether this is the window in front.
+     *
+     * Left out, the window works it out for itself: it is in front until another
+     * WindowPane on the page is pressed or takes the focus, exactly as windows on
+     * a desktop behave. A click on the page *around* the windows changes nothing
+     * — a paragraph is not a desktop.
+     *
+     * Pass it to drive that yourself, which is what a caller keeping its own
+     * z-order wants.
+     *
+     * What being in front looks like is the system's: coloured traffic lights on
+     * macOS against grey ones, an accent title bar and an accent border on
+     * Windows 10, a tinted header bar on GNOME — and, on all four, a window one
+     * step further off the page than the ones behind it.
+     */
+    active?: boolean;
+    /**
+     * The shadow around the window. `2` here, against the `0` everything else
+     * defaults to, for the reason Pill's is `2`: a window is by definition not
+     * part of the page it is on.
+     * @default 2
+     */
+    elevation?: NebaElevation;
+    /**
+     * How the window is laid out. `static` leaves it in the flow (as a
+     * relatively positioned box, so `offset` can move it without disturbing
+     * anything around it); `absolute` pins it inside the nearest positioned
+     * ancestor, which is what a desktop full of windows wants; `fixed` pins it to
+     * the viewport.
+     * @default 'static'
+     */
+    position?: WindowPanePosition;
+    /** Lets the title bar be dragged. @default false */
+    draggable?: boolean;
+    /** Lets the edges and corners be dragged. @default false */
+    resizable?: boolean;
+    /** The window's width — a number in pixels or any CSS length. */
+    width?: number | string;
+    /** And its height. Left out, the window is as tall as what is in it. */
+    height?: number | string;
+    /** How small it may be dragged, in pixels. @default 180 */
+    minWidth?: number;
+    /** The same downward. Defaults to the title bar's own height. */
+    minHeight?: number;
+    /** How far it has been dragged from where the layout put it. */
+    offset?: NebaWindowOffset;
+    /** Where an uncontrolled window starts. @default { x: 0, y: 0 } */
+    defaultOffset?: NebaWindowOffset;
+    onOffsetChange?: (offset: NebaWindowOffset) => void;
+    /** Fires with the window's size, in pixels, while an edge is dragged. */
+    onResize?: (size: WindowPaneSize) => void;
+    /** Whether the window is on screen at all. Closing it renders nothing. */
+    open?: boolean;
+    /** @default true */
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Whether the window is rolled up to its title bar. This is what minimizing
+     * means for a window that is part of a page rather than of a desktop: there
+     * is no dock for it to go to, so it stays where it is with nothing under the
+     * bar.
+     */
+    minimized?: boolean;
+    /** @default false */
+    defaultMinimized?: boolean;
+    onMinimizedChange?: (minimized: boolean) => void;
+    /**
+     * Whether the window fills whatever is holding it. Its corners go square
+     * while it does, as they do on every system.
+     */
+    maximized?: boolean;
+    /** @default false */
+    defaultMaximized?: boolean;
+    onMaximizedChange?: (maximized: boolean) => void;
+    /** Whether content taller than the window scrolls. @default true */
+    scroll?: boolean;
+    /**
+     * Which language the title bar's buttons name themselves in — a BCP 47 tag
+     * such as `ko`, `pt-BR` or `zh-Hant`. Unsupported tags fall back to English.
+     */
+    locale?: string;
+    /** Overrides the buttons' own names. */
+    minimizeLabel?: string;
+    maximizeLabel?: string;
+    restoreLabel?: string;
+    closeLabel?: string;
+    resizeLabel?: string;
+    /** Renders something other than a `<div>`: `render={<section />}`. */
+    render?: useRender.RenderProp;
+    /** What is in the window. */
+    children?: React.ReactNode;
+}
+/**
+ * A window, drawn the way one of four systems draws it, with anything at all
+ * inside it.
+ *
+ * It is not a real window and does not pretend to be one: there is no desktop,
+ * no z-order and no dock. What it is is a *frame that behaves* — the title bar
+ * drags, the corners resize, the three buttons are real buttons with real names
+ * — so a screenshot of an app, a demo of a feature or a piece of a landing page
+ * can be shown as the thing it will be rather than as a picture of it.
+ *
+ * Nothing here is transformed. A dragged window moves on `left` and `top` and a
+ * resized one changes `width` and `height`, which is what keeps the text inside
+ * it at whole pixels through both gestures — a `translate()` would resample
+ * every glyph in the window for the length of the drag, which is exactly what
+ * the house rule against transforming a surface exists to prevent.
+ *
+ * `minimize` rolls the window up to its title bar rather than sending it
+ * anywhere, because a page has nowhere to send it to. `maximize` fills whatever
+ * is holding the window, which is the container for `position="absolute"` and
+ * the viewport for `fixed`.
+ */
+export declare const WindowPane: React.ForwardRefExoticComponent<WindowPaneProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/window-pane/WindowPane.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import*as i from"react";import{useRender as o}from"@base-ui/react/use-render";import{useMessages as r}from"../../internal/i18n";import{cx as s,hasContent as a,iconClasses as d,surfaceClasses as l}from"../../internal/styles";import{WindowControls as c,orderControls as u,windowChrome as m,windowMetrics as h,windowSlots as w}from"../../internal/window";function g(e,t,n){const[o,r]=i.useState(t),s=void 0!==e;return[s?e:o,i.useCallback(e=>{s||r(e),n?.(e)},[s,n])]}const f=[{edge:"n",className:"inset-x-3 top-0 h-1.5 cursor-ns-resize"},{edge:"s",className:"inset-x-3 bottom-0 h-1.5 cursor-ns-resize"},{edge:"w",className:"inset-y-3 left-0 w-1.5 cursor-ew-resize"},{edge:"e",className:"inset-y-3 right-0 w-1.5 cursor-ew-resize"},{edge:"nw",className:"top-0 left-0 size-3 cursor-nwse-resize"},{edge:"ne",className:"top-0 right-0 size-3 cursor-nesw-resize"},{edge:"sw",className:"bottom-0 left-0 size-3 cursor-nesw-resize"},{edge:"se",className:"right-0 bottom-0 size-3 cursor-nwse-resize"}];export const WindowPane=i.forwardRef(function({os:p="macos",title:b,icon:v,actions:x,controls:y=!0,size:z="md",color:E="primary",accent:N=!1,transparency:k=0,active:C,elevation:L=2,position:M="static",draggable:S=!1,resizable:P=!1,width:R,height:I,minWidth:B=180,minHeight:D,offset:A,defaultOffset:T,onOffsetChange:H,onResize:W,open:j,defaultOpen:O=!0,onOpenChange:X,minimized:$,defaultMinimized:F=!1,onMinimizedChange:Y,maximized:_,defaultMaximized:q=!1,onMaximizedChange:K,scroll:U=!0,locale:V,minimizeLabel:G,maximizeLabel:J,restoreLabel:Q,closeLabel:Z,resizeLabel:ee,render:te,className:ne,style:ie,children:oe,...re},se){const ae=r(V),de=m(p),le=h(p,z),ce=i.useId(),[ue,me]=g(j,O,X),[he,we]=g($,F,Y),[ge,fe]=g(_,q,K),[pe,be]=g(A,T??{x:0,y:0},H),[ve,xe]=i.useState(null),[ye,ze]=i.useState(!0),Ee=C??ye,[Ne,ke]=i.useState(null),[Ce,Le]=i.useState(null),[Me,Se]=i.useState(!1),[Pe,Re]=i.useState(!1),[Ie,Be]=i.useState(ue);Ie!==ue&&(Be(ue),Re(!ue)),i.useEffect(()=>{if(!Pe)return;const e=window.setTimeout(()=>Re(!1),260);return()=>window.clearTimeout(e)},[Pe]);const De=i.useRef(null),Ae=i.useCallback(e=>{De.current=e,"function"==typeof se?se(e):se&&(se.current=e)},[se]);i.useEffect(()=>{if(void 0!==C)return;const e=De.current;if(!e)return;const t=t=>{const n=t.target;if(!(n instanceof Node))return;if(e.contains(n))return void ze(!0);const i=n instanceof Element?n:n.parentElement;i?.closest(".neba-window")&&ze(!1)};return document.addEventListener("pointerdown",t,!0),document.addEventListener("focusin",t,!0),()=>{document.removeEventListener("pointerdown",t,!0),document.removeEventListener("focusin",t,!0)}},[C]);const Te=i.useRef(null);function He(e,t){if(0!==e.button)return;Te.current?.();const n=e.currentTarget;n.setPointerCapture(e.pointerId),n.dataset.dragging="true",Se(!0);const i=e.clientX,o=e.clientY,r=document.body.style.getPropertyValue("-webkit-user-select");document.body.style.setProperty("-webkit-user-select","none");const s=e=>{t(e.clientX-i,e.clientY-o)},a=()=>{Te.current=null,Se(!1),n.removeEventListener("pointermove",s),n.removeEventListener("pointerup",a),n.removeEventListener("pointercancel",a),delete n.dataset.dragging,r?document.body.style.setProperty("-webkit-user-select",r):document.body.style.removeProperty("-webkit-user-select")};Te.current=a,n.addEventListener("pointermove",s),n.addEventListener("pointerup",a),n.addEventListener("pointercancel",a)}i.useEffect(()=>()=>Te.current?.(),[]);const We={width:Math.max(0,B),height:Math.max(le.bar,D??le.bar)};function je(e){xe(e),W?.(e)}const Oe=u(p,!0===y?["minimize","maximize","close"]:!1===y?[]:y),Xe=Oe.includes("maximize");i.useEffect(()=>{if(he||null===Ce)return;const e=window.setTimeout(()=>Le(null),400);return()=>window.clearTimeout(e)},[he,Ce]);const $e={minimize:G??ae.window.minimize,maximize:J??ae.window.maximize,restore:Q??ae.window.restore,close:Z??ae.action.close},Fe=e(c,{os:p,metrics:le,controls:Oe,maximized:ge,active:Ee,labels:$e,onCommand:function(e){"close"===e?me(!1):"minimize"===e?function(e){const t=De.current,n=t?.firstElementChild;if(t&&n instanceof HTMLElement&&ke(n.offsetHeight+(t.offsetHeight-t.clientHeight)),e&&void 0===(ve?.height??I)&&t)return Le(t.getBoundingClientRect().height),void requestAnimationFrame(()=>we(!0));we(e)}(!he):fe(!ge)}}),Ye=a(b)?e("span",{id:ce,className:"min-w-0 truncate",children:b}):null,_e=a(v)?e("span",{className:"flex shrink-0 items-center",children:v}):null,qe=t("div",{className:s("relative flex shrink-0 items-center select-none",d,S&&!ge?"cursor-grab active:cursor-grabbing":""),style:{height:le.bar,textShadow:"var(--n-window-bar-shadow)",fontWeight:le.weight,paddingInlineStart:le.padX,paddingInlineEnd:le.padEnd,gap:Math.round(.7*le.title),fontSize:le.title,backgroundColor:"var(--n-window-bar)",backgroundImage:"var(--n-window-bar-image)",color:"var(--n-window-bar-fg)",borderBlockEnd:de.rule?"1px solid var(--n-window-line)":void 0},onPointerDown:function(e){if(!S||ge)return;const t={...pe};He(e,(e,n)=>be({x:t.x+e,y:t.y+n}))},onDoubleClick:Xe?()=>fe(!ge):void 0,children:["start"===de.controlsSide?Fe:null,"center"===de.titleAlign?e("span",{"aria-hidden":"true",className:"pointer-events-none absolute inset-x-0 flex items-center justify-center",style:{paddingInline:le.controlsWidth(Oe.length)+2*le.padX},children:t("span",{className:"flex min-w-0 items-center",style:{gap:Math.round(.5*le.title)},children:[_e,Ye]})}):t(n,{children:[_e,Ye]}),e("span",{className:"flex-1"}),a(x)?e("span",{className:"flex shrink-0 items-center",style:{gap:Math.round(.5*le.title)},onPointerDown:e=>e.stopPropagation(),children:x}):null,"end"===de.controlsSide?Fe:null]}),Ke=ge?{left:0,top:0,width:"100%",height:"100%"}:{left:pe.x,top:pe.y,width:ve?.width??R,height:he?Ne??le.bar:ve?.height??I??Ce??void 0},Ue=o({render:te,ref:Ae,props:{role:"group","aria-labelledby":Ye?ce:void 0,className:s("neba-window relative flex min-w-0 flex-col overflow-hidden",k>0?l:"",de.glass&&0===k?"[backdrop-filter:var(--neba-blur)]":"","[transition-property:left,top,width,height,opacity,box-shadow,background-color,border-color,border-radius]","[transition-duration:var(--neba-duration-window)]","[transition-timing-function:var(--neba-ease)]","motion-reduce:[transition-duration:0ms]","data-[gesture]:[transition-property:none]",ne),"data-gesture":Me?"":void 0,inert:!ue||void 0,style:{opacity:ue?void 0:0,...w({os:p,color:E,accent:N,transparency:k,active:Ee,elevation:L}),position:"static"===M?"relative":M,...Ke,borderRadius:ge?0:`${le.radius}px ${le.radius}px ${le.radiusBottom}px ${le.radiusBottom}px`,borderStyle:"solid",borderWidth:le.frame,borderColor:"var(--n-window-line)",backgroundColor:"var(--n-window-band)",boxShadow:"var(--n-window-shadow), var(--neba-plate-glass)",...ie},children:t(n,{children:[qe,e("div",{className:s("min-h-0 flex-1",U?"overflow-auto":"overflow-hidden"),style:{backgroundColor:"var(--n-window-body)",marginInline:le.band.side,marginBottom:le.band.bottom,boxShadow:le.band.side>0?"inset 0 0 0 1px rgb(0 0 0 / 0.12)":void 0},inert:he,children:oe}),!P||ge||he?null:f.map(t=>{const n="se"===t.edge;return e("div",{role:n?"button":void 0,tabIndex:n?0:void 0,"aria-label":n?ee??ae.window.resize:void 0,"aria-hidden":n?void 0:"true",className:s("absolute z-10 touch-none",t.className,n?"focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:[outline-offset:-2px]":""),onPointerDown:e=>function(e,t){const n=De.current;if(!n||ge)return;const i=n.getBoundingClientRect(),o={width:i.width,height:i.height,x:pe.x,y:pe.y},r=e.includes("e"),s=e.includes("w"),a=e.includes("n"),d=e.includes("s");He(t,(e,t)=>{let{width:n,height:i}=o,{x:l,y:c}=o;r&&(n=Math.max(We.width,o.width+e)),d&&(i=Math.max(We.height,o.height+t)),s&&(n=Math.max(We.width,o.width-e),l=o.x+(o.width-n)),a&&(i=Math.max(We.height,o.height-t),c=o.y+(o.height-i)),je({width:n,height:i}),(s||a)&&be({x:l,y:c})})}(t.edge,e),onKeyDown:n?e=>{const t={ArrowRight:[16,0],ArrowLeft:[-16,0],ArrowDown:[0,16],ArrowUp:[0,-16]}[e.key];t&&(e.preventDefault(),function(e,t){const n=De.current;if(!n)return;const i=n.getBoundingClientRect();je({width:Math.max(We.width,i.width+e),height:Math.max(We.height,i.height+t)})}(t[0],t[1]))}:void 0},t.edge)})]}),...re}});return ue||Pe?Ue:null});

package/dist/components/window-pane/index.d.ts

@@ -0,0 +1,2 @@
+export { WindowPane } from './WindowPane';
+export type { NebaWindowControl, NebaWindowOffset, NebaWindowOs, WindowPanePosition, WindowPaneProps, WindowPaneSize } from './WindowPane';

package/dist/components/window-pane/index.js

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

package/dist/index.d.ts

@@ -12,10 +12,13 @@ export * from './components/animate-rotate';
 export * from './components/animate-slide';
 export * from './components/animate-typing';
 export * from './components/animate-zoom';
+export * from './components/area-chart';
 export * from './components/aspect-ratio';
 export * from './components/avatar';
 export * from './components/badge';
+export * from './components/bar-chart';
 export * from './components/blockquote';
+export * from './components/bottom-navigation';
 export * from './components/box';
 export * from './components/breadcrumb';
 export * from './components/button';
@@ -25,6 +28,7 @@ export * from './components/carousel';
 export * from './components/chat-bubble';
 export * from './components/checkbox';
 export * from './components/chip';
+export * from './components/collapsible';
 export * from './components/color-picker';
 export * from './components/combobox';
 export * from './components/container';
@@ -38,10 +42,14 @@ export * from './components/drawer';
 export * from './components/empty';
 export * from './components/file-picker';
 export * from './components/grid';
+export * from './components/floating-action-button';
+export * from './components/floating-bottom-navigation';
 export * from './components/grid-container';
+export * from './components/heatmap-chart';
 export * from './components/highlight';
 export * from './components/icon';
 export * from './components/icon-button';
+export * from './components/line-chart';
 export * from './components/list';
 export * from './components/menu';
 export * from './components/mockup';
@@ -50,17 +58,22 @@ export * from './components/otp-field';
 export * from './components/overlay';
 export * from './components/pagination';
 export * from './components/panes';
+export * from './components/pie-chart';
 export * from './components/pill';
 export * from './components/popover';
 export * from './components/progress-box';
 export * from './components/progress-circular';
 export * from './components/progress-linear';
 export * from './components/radio-group';
+export * from './components/rating';
+export * from './components/scatter-chart';
+export * from './components/scroll-zone';
 export * from './components/segmented-button';
 export * from './components/select';
 export * from './components/shortcut';
 export * from './components/skeleton';
 export * from './components/slider';
+export * from './components/sparkline';
 export * from './components/spoiler';
 export * from './components/statistic';
 export * from './components/switch';
@@ -70,8 +83,10 @@ export * from './components/text-field';
 export * from './components/text-link';
 export * from './components/time-picker';
 export * from './components/timeline';
+export * from './components/timeline-chart';
 export * from './components/toast';
 export * from './components/toolbar';
 export * from './components/tooltip';
 export * from './components/tree-view';
 export * from './components/typography';
+export * from './components/window-pane';

package/dist/index.js

@@ -1 +1 @@
-export*from"./types";export*from"./components/accordion";export*from"./components/alert";export*from"./components/animate-appear";export*from"./components/animate-blink";export*from"./components/animate-fade";export*from"./components/animate-grow";export*from"./components/animate-headline";export*from"./components/animate-lighting";export*from"./components/animate-marquee";export*from"./components/animate-rotate";export*from"./components/animate-slide";export*from"./components/animate-typing";export*from"./components/animate-zoom";export*from"./components/aspect-ratio";export*from"./components/avatar";export*from"./components/badge";export*from"./components/blockquote";export*from"./components/box";export*from"./components/breadcrumb";export*from"./components/button";export*from"./components/button-group";export*from"./components/card";export*from"./components/carousel";export*from"./components/chat-bubble";export*from"./components/checkbox";export*from"./components/chip";export*from"./components/color-picker";export*from"./components/combobox";export*from"./components/container";export*from"./components/data-table";export*from"./components/date-picker";export*from"./components/date-range-picker";export*from"./components/date-time-picker";export*from"./components/dialog";export*from"./components/divider";export*from"./components/drawer";export*from"./components/empty";export*from"./components/file-picker";export*from"./components/grid";export*from"./components/grid-container";export*from"./components/highlight";export*from"./components/icon";export*from"./components/icon-button";export*from"./components/list";export*from"./components/menu";export*from"./components/mockup";export*from"./components/number-field";export*from"./components/otp-field";export*from"./components/overlay";export*from"./components/pagination";export*from"./components/panes";export*from"./components/pill";export*from"./components/popover";export*from"./components/progress-box";export*from"./components/progress-circular";export*from"./components/progress-linear";export*from"./components/radio-group";export*from"./components/segmented-button";export*from"./components/select";export*from"./components/shortcut";export*from"./components/skeleton";export*from"./components/slider";export*from"./components/spoiler";export*from"./components/statistic";export*from"./components/switch";export*from"./components/table";export*from"./components/tabs";export*from"./components/text-field";export*from"./components/text-link";export*from"./components/time-picker";export*from"./components/timeline";export*from"./components/toast";export*from"./components/toolbar";export*from"./components/tooltip";export*from"./components/tree-view";export*from"./components/typography";
+export*from"./types";export*from"./components/accordion";export*from"./components/alert";export*from"./components/animate-appear";export*from"./components/animate-blink";export*from"./components/animate-fade";export*from"./components/animate-grow";export*from"./components/animate-headline";export*from"./components/animate-lighting";export*from"./components/animate-marquee";export*from"./components/animate-rotate";export*from"./components/animate-slide";export*from"./components/animate-typing";export*from"./components/animate-zoom";export*from"./components/area-chart";export*from"./components/aspect-ratio";export*from"./components/avatar";export*from"./components/badge";export*from"./components/bar-chart";export*from"./components/blockquote";export*from"./components/bottom-navigation";export*from"./components/box";export*from"./components/breadcrumb";export*from"./components/button";export*from"./components/button-group";export*from"./components/card";export*from"./components/carousel";export*from"./components/chat-bubble";export*from"./components/checkbox";export*from"./components/chip";export*from"./components/collapsible";export*from"./components/color-picker";export*from"./components/combobox";export*from"./components/container";export*from"./components/data-table";export*from"./components/date-picker";export*from"./components/date-range-picker";export*from"./components/date-time-picker";export*from"./components/dialog";export*from"./components/divider";export*from"./components/drawer";export*from"./components/empty";export*from"./components/file-picker";export*from"./components/grid";export*from"./components/floating-action-button";export*from"./components/floating-bottom-navigation";export*from"./components/grid-container";export*from"./components/heatmap-chart";export*from"./components/highlight";export*from"./components/icon";export*from"./components/icon-button";export*from"./components/line-chart";export*from"./components/list";export*from"./components/menu";export*from"./components/mockup";export*from"./components/number-field";export*from"./components/otp-field";export*from"./components/overlay";export*from"./components/pagination";export*from"./components/panes";export*from"./components/pie-chart";export*from"./components/pill";export*from"./components/popover";export*from"./components/progress-box";export*from"./components/progress-circular";export*from"./components/progress-linear";export*from"./components/radio-group";export*from"./components/rating";export*from"./components/scatter-chart";export*from"./components/scroll-zone";export*from"./components/segmented-button";export*from"./components/select";export*from"./components/shortcut";export*from"./components/skeleton";export*from"./components/slider";export*from"./components/sparkline";export*from"./components/spoiler";export*from"./components/statistic";export*from"./components/switch";export*from"./components/table";export*from"./components/tabs";export*from"./components/text-field";export*from"./components/text-link";export*from"./components/time-picker";export*from"./components/timeline";export*from"./components/timeline-chart";export*from"./components/toast";export*from"./components/toolbar";export*from"./components/tooltip";export*from"./components/tree-view";export*from"./components/typography";export*from"./components/window-pane";

package/dist/internal/animate.d.ts

@@ -99,15 +99,6 @@ export declare function transitionProps(transition: NebaTransition | undefined):
     className: string;
     style: React.CSSProperties;
 };
-/**
- * Whether the reader has asked for less motion.
- *
- * The CSS side of this is handled in the stylesheet, where every keyframe is
- * switched off at once. This is for the three effects whose motion is written
- * in JavaScript — a typewriter, a headline reel, a measured marquee — where
- * there is no rule to switch off and the component has to decide for itself
- * what "still" means.
- */
 export declare function usePrefersReducedMotion(): boolean;
 export interface AnimationRunOptions {
     trigger: NebaAnimateTrigger;

package/dist/internal/animate.js

@@ -1 +1 @@
-import*as e from"react";export const animationClasses={fade:"neba-anim-fade",grow:"neba-anim-scale",slide:"neba-anim-slide",zoom:"neba-anim-scale",rotate:"neba-anim-rotate",blink:"neba-anim-blink"};export const animBaseClass="neba-anim";export const defaultDurations={fade:320,grow:340,slide:380,zoom:340,rotate:460,blink:900};export function lengthValue(e){return"number"==typeof e?`${e}px`:e}export function isInfinite(e){return"infinite"===e}export function animationSlots(e){const n={"--n-anim-duration":`${e.duration}ms`,"--n-anim-delay":`${e.delay}ms`,"--n-anim-repeat":(i=e.repeat,"infinite"===i?"infinite":String(i)),"--n-anim-direction":(t=e.mode??"in",a=e.alternate,"out"===t?a?"alternate-reverse":"reverse":a?"alternate":"normal")};var t,a,i;return e.easing&&(n["--n-anim-ease"]=e.easing),void 0!==e.opacity&&(n["--n-anim-opacity"]=String(e.opacity)),void 0!==e.scale&&(n["--n-anim-scale"]=String(e.scale)),void 0!==e.x&&(n["--n-anim-x"]=e.x),void 0!==e.y&&(n["--n-anim-y"]=e.y),void 0!==e.angle&&(n["--n-anim-angle"]=e.angle),void 0!==e.angleTo&&(n["--n-anim-angle-to"]=e.angleTo),n}export function slideOffsets(e,n){const t=lengthValue(n),a="number"==typeof n?-n+"px":`calc(-1 * ${t})`;switch(e){case"top":return{x:"0px",y:a};case"bottom":return{x:"0px",y:t};case"left":return{x:a,y:"0px"};default:return{x:t,y:"0px"}}}export function transitionProps(e){if(!e)return{className:"",style:{}};const n="string"==typeof e?{type:e}:e,{type:t}=n,a={duration:n.duration??defaultDurations[t],delay:n.delay??0,easing:n.easing,repeat:n.repeat??("blink"===t?"infinite":1),alternate:n.alternate};if("grow"!==t&&"zoom"!==t||(a.scale=n.scale??("zoom"===t?.4:.8)),"slide"===t){const{x:e,y:t}=slideOffsets(n.from??"bottom",n.distance??"100%");a.x=e,a.y=t}return"rotate"===t&&(a.angle=`${n.angle??-180}deg`),{className:`neba-anim ${animationClasses[t]}`,style:animationSlots(a)}}export function usePrefersReducedMotion(){const[n,t]=e.useState(!1);return e.useEffect(()=>{if("undefined"==typeof window||!window.matchMedia)return;const e=window.matchMedia("(prefers-reduced-motion: reduce)");t(e.matches);const n=e=>t(e.matches);return e.addEventListener("change",n),()=>e.removeEventListener("change",n)},[]),n}export function useAnimationRun({trigger:n,play:t,once:a,threshold:i,paused:o,infinite:r}){const s=e.useRef(null),[c,l]=e.useState("mount"===n),[u,m]=e.useState(0),d=e.useCallback(()=>{l(!0),m(e=>e+1)},[]);e.useLayoutEffect(()=>{const e=s.current;if(!e||0===u)return;const n=[e,...e.querySelectorAll(".neba-anim, .neba-marquee-track")];for(const e of n)e.style.animationName="none";e.offsetWidth;for(const e of n)e.style.animationName=""},[u]),e.useEffect(()=>{if("visible"!==n)return;const e=s.current;if(!e||"undefined"==typeof IntersectionObserver)return void l(!0);const t=new IntersectionObserver(([e])=>{e.isIntersecting?(d(),a&&t.disconnect()):a||l(!1)},{threshold:i});return t.observe(e),()=>t.disconnect()},[n,a,i,d]),e.useEffect(()=>{"manual"===n&&(t?d():l(!1))},[n,t,d]);const f="hover"===n?{onPointerEnter:d,onFocus:d,onPointerLeave:()=>{r&&l(!1)},onBlur:()=>{r&&l(!1)}}:{};return{ref:e.useCallback(e=>{s.current=e},[]),state:c&&!o?"running":"paused",started:c,handlers:f}}export function useAnimateElement(e){const{effect:n,trigger:t,play:a,once:i,threshold:o,paused:r,infinite:s,...c}=e,l=useAnimationRun({trigger:t,play:a,once:i,threshold:o,paused:r,infinite:s});return{ref:l.ref,className:n?`neba-anim ${animationClasses[n]}`:"",style:{...animationSlots(c),"--n-anim-state":l.state},props:{...l.handlers,"data-neba-animation":n??void 0,"data-state":l.state}}}
+import*as e from"react";export const animationClasses={fade:"neba-anim-fade",grow:"neba-anim-scale",slide:"neba-anim-slide",zoom:"neba-anim-scale",rotate:"neba-anim-rotate",blink:"neba-anim-blink"};export const animBaseClass="neba-anim";export const defaultDurations={fade:320,grow:340,slide:380,zoom:340,rotate:460,blink:900};export function lengthValue(e){return"number"==typeof e?`${e}px`:e}export function isInfinite(e){return"infinite"===e}export function animationSlots(e){const n={"--n-anim-duration":`${e.duration}ms`,"--n-anim-delay":`${e.delay}ms`,"--n-anim-repeat":(i=e.repeat,"infinite"===i?"infinite":String(i)),"--n-anim-direction":(t=e.mode??"in",a=e.alternate,"out"===t?a?"alternate-reverse":"reverse":a?"alternate":"normal")};var t,a,i;return e.easing&&(n["--n-anim-ease"]=e.easing),void 0!==e.opacity&&(n["--n-anim-opacity"]=String(e.opacity)),void 0!==e.scale&&(n["--n-anim-scale"]=String(e.scale)),void 0!==e.x&&(n["--n-anim-x"]=e.x),void 0!==e.y&&(n["--n-anim-y"]=e.y),void 0!==e.angle&&(n["--n-anim-angle"]=e.angle),void 0!==e.angleTo&&(n["--n-anim-angle-to"]=e.angleTo),n}export function slideOffsets(e,n){const t=lengthValue(n),a="number"==typeof n?-n+"px":`calc(-1 * ${t})`;switch(e){case"top":return{x:"0px",y:a};case"bottom":return{x:"0px",y:t};case"left":return{x:a,y:"0px"};default:return{x:t,y:"0px"}}}export function transitionProps(e){if(!e)return{className:"",style:{}};const n="string"==typeof e?{type:e}:e,{type:t}=n,a={duration:n.duration??defaultDurations[t],delay:n.delay??0,easing:n.easing,repeat:n.repeat??("blink"===t?"infinite":1),alternate:n.alternate};if("grow"!==t&&"zoom"!==t||(a.scale=n.scale??("zoom"===t?.4:.8)),"slide"===t){const{x:e,y:t}=slideOffsets(n.from??"bottom",n.distance??"100%");a.x=e,a.y=t}return"rotate"===t&&(a.angle=`${n.angle??-180}deg`),{className:`neba-anim ${animationClasses[t]}`,style:animationSlots(a)}}const n="(prefers-reduced-motion: reduce)";function t(e){if("undefined"==typeof window||!window.matchMedia)return()=>{};const t=window.matchMedia(n);return t.addEventListener("change",e),()=>t.removeEventListener("change",e)}function a(){return!("undefined"==typeof window||!window.matchMedia)&&window.matchMedia(n).matches}function i(){return!1}export function usePrefersReducedMotion(){return e.useSyncExternalStore(t,a,i)}export function useAnimationRun({trigger:n,play:t,once:a,threshold:i,paused:o,infinite:r}){const s=e.useRef(null),[c,l]=e.useState("mount"===n),[u,d]=e.useState(0),f=e.useCallback(()=>{l(!0),d(e=>e+1)},[]);e.useLayoutEffect(()=>{const e=s.current;if(!e||0===u)return;const n=[e,...e.querySelectorAll(".neba-anim, .neba-marquee-track")];for(const e of n)e.style.animationName="none";e.offsetWidth;for(const e of n)e.style.animationName=""},[u]),e.useEffect(()=>{if("visible"!==n)return;const e=s.current;if(!e||"undefined"==typeof IntersectionObserver)return void l(!0);const t=new IntersectionObserver(([e])=>{e.isIntersecting?(f(),a&&t.disconnect()):a||l(!1)},{threshold:i});return t.observe(e),()=>t.disconnect()},[n,a,i,f]),e.useEffect(()=>{"manual"===n&&(t?f():l(!1))},[n,t,f]);const m="hover"===n?{onPointerEnter:f,onFocus:f,onPointerLeave:()=>{r&&l(!1)},onBlur:()=>{r&&l(!1)}}:{};return{ref:e.useCallback(e=>{s.current=e},[]),state:c&&!o?"running":"paused",started:c,handlers:m}}export function useAnimateElement(e){const{effect:n,trigger:t,play:a,once:i,threshold:o,paused:r,infinite:s,...c}=e,l=useAnimationRun({trigger:t,play:a,once:i,threshold:o,paused:r,infinite:s});return{ref:l.ref,className:n?`neba-anim ${animationClasses[n]}`:"",style:{...animationSlots(c),"--n-anim-state":l.state},props:{...l.handlers,"data-neba-animation":n??void 0,"data-state":l.state}}}