neba 1.4.0 → 1.5.0

package/dist/components/heatmap-chart/HeatmapChart.d.ts

@@ -0,0 +1,69 @@
+import * as React from 'react';
+import { type ChartScaleKind } from '../../internal/chart';
+import type { NebaChartCategory, NebaChartLegend, NebaChartSeries } from '../../types';
+import type { ChartBaseProps } from '../../internal/chart-frame';
+export interface HeatmapChartProps extends Omit<ChartBaseProps, 'legend'> {
+    /**
+     * The rows. Each series is a row of the grid or a group of the treemap, and
+     * each datum a cell or a tile.
+     *
+     * `y` is the magnitude and `x` names the column. A `null` is a gap: the cell
+     * is left as surface rather than drawn as the bottom of the scale, because
+     * "nothing happened" and "the least of anything" are not the same reading.
+     */
+    series: readonly NebaChartSeries[];
+    /** The column names. Points may carry their own `x` instead. */
+    categories?: readonly NebaChartCategory[];
+    /**
+     * - `grid` — a cell per row and column, which is the shape for two
+     *   categorical axes and one magnitude: hours against weekdays, a cohort
+     *   against a week.
+     * - `treemap` — a tile per datum, sized by its share and packed to fill the
+     *   box. For parts of a whole where the parts are grouped and there are more
+     *   of them than a [PieChart](./pie-chart) can hold.
+     * @default 'grid'
+     */
+    shape?: 'grid' | 'treemap';
+    /**
+     * How the magnitude is coloured.
+     *
+     * - `sequential` — one hue, pale to deep. The default, and right whenever
+     *   more is simply more.
+     * - `diverging` — two hues either side of a neutral, for a value with a
+     *   *middle* that means something: over and under target, gained and lost.
+     *   Reached for on a plain magnitude it invents a boundary the data has none
+     *   of.
+     * @default 'sequential'
+     */
+    scale?: ChartScaleKind;
+    /** Where a `diverging` scale turns over. @default 0 */
+    midpoint?: number;
+    /** Where the scale starts and ends. Taken from the data otherwise. */
+    min?: number;
+    max?: number;
+    /**
+     * Writes each cell's value on it, where the cell is big enough for the text
+     * to fit with room either side. A label that does not fit is dropped rather
+     * than clipped — the tooltip and the table still have it.
+     * @default 'none'
+     */
+    valueLabels?: 'none' | 'all';
+    /** Where the scale legend sits. `false` leaves it off. */
+    legend?: boolean | Pick<NebaChartLegend, 'side' | 'align'>;
+}
+/**
+ * A magnitude per cell, coloured rather than measured.
+ *
+ * Two shapes of the same idea. A `grid` is the one to reach for when both axes
+ * are categorical and the question is *where* — which hour of which day, which
+ * cohort in which week; a bar chart of the same data would be forty bars nobody
+ * can scan. A `treemap` is for parts of a whole with more parts than a
+ * [PieChart](./pie-chart) can hold, and it is the same component because the
+ * data is the same shape: a row of a heatmap and a group of a treemap are both
+ * a named series of named magnitudes.
+ *
+ * Colour here encodes *size* and not identity, so it comes off a one-hue ramp
+ * rather than off the categorical palette — a heatmap in eight hues says its
+ * cells are eight unrelated things.
+ */
+export declare function HeatmapChart({ series, categories, shape, scale, midpoint, min, max, valueLabels, height, format, locale, label, legend, tooltip, empty, size, variant, padded, className, ...box }: HeatmapChartProps): React.JSX.Element;

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

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

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

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

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

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

package/dist/components/highlight/Highlight.js

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

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

@@ -0,0 +1,74 @@
+import * as React from 'react';
+import { type CartesianChartProps } from '../../internal/chart-frame';
+import { type ChartMarkers } from '../../internal/chart-line';
+import type { NebaChartCurve, NebaChartValueLabels } from '../../types';
+export interface LineChartProps extends CartesianChartProps {
+    /**
+     * How the line gets from one point to the next.
+     *
+     * - `linear` — straight segments. The default, and the only one that claims
+     *   nothing the data did not say.
+     * - `smooth` — a monotone cubic. Curved, but it will not dip below a value
+     *   that both of its neighbours are above; a plain spline would.
+     * - `step` — held at each value until the next one. What a rate, a tier or a
+     *   setting actually did between two readings, rather than a diagonal
+     *   pretending it drifted.
+     * @default 'linear'
+     */
+    curve?: NebaChartCurve;
+    /**
+     * Dots on the points.
+     *
+     * `auto` — the default — draws them while there are few enough points for a
+     * dot to mean something, and stops at fourteen. Whatever this says, the point
+     * under the pointer always gets one: that is what tells the reader which
+     * column the tooltip is about.
+     * @default 'auto'
+     */
+    markers?: ChartMarkers;
+    /**
+     * Fades the line from a paler step of its own hue at the start to the full
+     * colour at the end, so the recent end of a long series is the loud one.
+     * @default false
+     */
+    gradient?: boolean;
+    /**
+     * Draws the line straight through a `null` instead of breaking at it.
+     *
+     * Off, and it should stay off unless the gap is an artefact of how the data
+     * was collected. A bridged gap is a number the chart made up.
+     * @default false
+     */
+    connectNulls?: boolean;
+    /**
+     * Which values are written on the line. `last` is the one to reach for — it
+     * names where each series ended up, which is the question a line chart is
+     * usually being asked.
+     * @default 'none'
+     */
+    valueLabels?: NebaChartValueLabels;
+    /**
+     * Stacks the series, each line riding on the total of the ones below it.
+     *
+     * Rare on a line chart and worth thinking twice about: the reader can follow
+     * the bottom series and the top total, and nothing in between. An
+     * [AreaChart](./area-chart) is the shape that makes stacking legible.
+     * @default false
+     */
+    stacked?: boolean;
+}
+/**
+ * A value against time, or against anything else with an order to it.
+ *
+ * The line is the mark that says *change*: it claims the space between two
+ * points is a journey rather than two separate facts, which is true of a
+ * temperature and false of four product categories. Reach for a
+ * [BarChart](./bar-chart) when the categories could be shuffled without losing
+ * anything.
+ *
+ * Everything around the line — the axes, the grid, the crosshair, the legend,
+ * the tooltip and the table a screen reader gets instead of the picture — comes
+ * from the shared frame, which is what makes a LineChart and a BarChart on one
+ * dashboard read as one drawing rather than two.
+ */
+export declare function LineChart({ curve, markers, gradient, connectNulls, valueLabels, stacked, ...props }: LineChartProps): React.JSX.Element;

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

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

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

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

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

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

package/dist/components/number-field/NumberField.d.ts

@@ -14,7 +14,7 @@ import type { NebaElevation, NebaStyleProps } from '../../types';
  * nobody hits.
  */
 export type NumberFieldSteppers = 'end' | 'split' | 'none';
-export interface NumberFieldProps extends NebaStyleProps {
+export interface NumberFieldProps extends NebaStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'defaultValue' | 'children'> {
     /**
      * Drop shadow depth. `0` (the default) is flat — a field is a well, not a
      * surface that floats.
@@ -57,11 +57,17 @@ export interface NumberFieldProps extends NebaStyleProps {
      * reports `1240`.
      */
     format?: Intl.NumberFormatOptions;
-    /** Which locale the number is written and parsed in. Defaults to the runtime's. */
+    /**
+     * Which locale the number is written and parsed in. Defaults to the runtime's.
+     *
+     * A plain BCP 47 string also names the two steppers, since a field that reads
+     * its digits in one language should not read its buttons in another.
+     * `incrementLabel` and `decrementLabel` write those words out instead.
+     */
     locale?: Intl.LocalesArgument;
     /** Where the steppers sit, or `none` for a field without them. @default 'end' */
     steppers?: NumberFieldSteppers;
-    /** Accessible name of the increment button. */
+    /** Accessible name of the increment button. Defaults to the `locale`'s word. */
     incrementLabel?: string;
     /** Accessible name of the decrement button. */
     decrementLabel?: string;
@@ -93,8 +99,6 @@ export interface NumberFieldProps extends NebaStyleProps {
     /** Placeholder shown while the field is empty. */
     placeholder?: string;
     id?: string;
-    className?: string;
-    style?: React.CSSProperties;
 }
 /**
  * A field that only holds a number.
@@ -110,4 +114,4 @@ export interface NumberFieldProps extends NebaStyleProps {
  * clamping, the press-and-hold repeat on the steppers, and the hidden input
  * that submits with a form.
  */
-export declare function NumberField({ variant, size, color, density, elevation, value, defaultValue, onValueChange, onValueCommitted, min, max, step, largeStep, smallStep, snapOnStep, allowWheelScrub, format, locale, steppers, incrementLabel, decrementLabel, label, description, error, invalid, startIcon, endIcon, fullWidth, disabled, readOnly, required, name, placeholder, id, className, style }: NumberFieldProps): React.JSX.Element;
+export declare function NumberField({ variant, size, color, density, elevation, value, defaultValue, onValueChange, onValueCommitted, min, max, step, largeStep, smallStep, snapOnStep, allowWheelScrub, format, locale, steppers, incrementLabel, decrementLabel, label, description, error, invalid, startIcon, endIcon, fullWidth, disabled, readOnly, required, name, placeholder, id, className, style, ...props }: NumberFieldProps): React.JSX.Element;

package/dist/components/number-field/NumberField.js

@@ -1 +1 @@
-import{jsx as e,jsxs as n}from"react/jsx-runtime";import{NumberField as t}from"@base-ui/react/number-field";import{Field as a}from"@base-ui/react/field";import{MinusIcon as l,PlusIcon as i}from"../../internal/icons";import{controlHeightClasses as r,controlTextLeadingClasses as s,disabledClasses as o,fieldReadOnlyClasses as c,fieldRestClasses as d,focusWithinRingClasses as m,gapClasses as u,hasContent as p,iconClasses as f,metaTextClasses as b,paddingXClasses as h,radiusClasses as x,stackGapClasses as g,surfaceSlots as v,transitionClasses as N}from"../../internal/styles";const j=["group relative flex w-full cursor-text items-center","[-webkit-tap-highlight-color:transparent]",N,"focus-within:[transition-duration:0ms]",m,f].join(" "),w=["inline-flex size-[1.7em] shrink-0 cursor-pointer items-center justify-center","rounded-(--neba-radius-xs) text-(--neba-muted-fg) select-none","[&_svg]:size-[0.9em] [&_svg]:shrink-0","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]","[transition:background-color_var(--neba-duration)_var(--neba-ease),color_var(--neba-duration)_var(--neba-ease)]","active:[transition-duration:0ms]","hover:bg-(--n-soft) hover:text-(--n-accent)","active:bg-(--n-soft-press)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-1","disabled:cursor-not-allowed disabled:bg-transparent disabled:text-(--neba-disabled-fg)"].join(" ");export function NumberField({variant:m="outline",size:f="md",color:N="primary",density:k="default",elevation:y=0,value:S,defaultValue:_,onValueChange:V,onValueCommitted:I,min:C,max:O,step:z,largeStep:D,smallStep:L,snapOnStep:W,allowWheelScrub:$=!1,format:q,locale:B,steppers:F="end",incrementLabel:R="Increase",decrementLabel:E="Decrease",label:G,description:A,error:H,invalid:J,startIcon:K,endIcon:M,fullWidth:P=!1,disabled:Q=!1,readOnly:T=!1,required:U=!1,name:X,placeholder:Y,id:Z,className:ee,style:ne}){const te=p(H),ae=J??te,le=ae?"danger":N,ie=h[k][f],re={end:`${ie} pe-1`,split:"px-1",none:ie},se=e(t.Decrement,{"aria-label":E,className:w,children:e(l,{})}),oe=e(t.Increment,{"aria-label":R,className:w,children:e(i,{})}),ce="none"!==F&&!T;return n(a.Root,{disabled:Q,invalid:ae,className:["flex-col align-top",g[f],P?"flex w-full":"inline-flex",ee??""].filter(Boolean).join(" "),style:{...v(le,y),...ne},children:[G?e(a.Label,{className:[b[f],"font-medium",Q?"text-(--neba-disabled-fg)":"text-(--neba-fg)"].join(" "),children:G}):null,e(t.Root,{id:Z,name:X,className:"contents",value:S,defaultValue:_,onValueChange:e=>V?.(e),onValueCommitted:e=>I?.(e),min:C,max:O,step:z,largeStep:D,smallStep:L,snapOnStep:W,allowWheelScrub:$,format:q,locale:B,disabled:Q,readOnly:T,required:U,children:n(t.Group,{className:[j,r[f],s[f],x[f],u[f],ce?re[F]:ie,Q?o[m]:T?c[m]:d[m]].join(" "),children:[ce&&"split"===F?se:null,K?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:K}):null,e(t.Input,{placeholder:Y,className:["min-w-0 flex-1 self-stretch bg-transparent [font:inherit] text-inherit","[outline:none]","tabular-nums","split"===F&&ce?"text-center":"","placeholder:text-(--neba-muted-fg)","caret-(--n-accent) selection:bg-(--n-soft-press)","disabled:cursor-not-allowed"].filter(Boolean).join(" ")}),M?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:M}):null,ce&&"end"===F?n("span",{className:"flex shrink-0 items-center gap-0.5",children:[se,oe]}):null,ce&&"split"===F?oe:null]})}),A?e(a.Description,{className:`${b[f]} text-(--neba-muted-fg)`,children:A}):null,te?e(a.Error,{match:!0,className:`${b[f]} text-(--n-accent)`,children:H}):null]})}
+import{jsx as e,jsxs as n}from"react/jsx-runtime";import{NumberField as t}from"@base-ui/react/number-field";import{Field as a}from"@base-ui/react/field";import{useMessages as l}from"../../internal/i18n";import{MinusIcon as i,PlusIcon as r}from"../../internal/icons";import{controlHeightClasses as s,controlTextLeadingClasses as o,disabledClasses as c,fieldReadOnlyClasses as d,fieldRestClasses as m,focusWithinRingClasses as u,gapClasses as p,hasContent as f,iconClasses as b,metaTextClasses as h,paddingXClasses as x,radiusClasses as g,stackGapClasses as v,surfaceSlots as N,transitionClasses as j}from"../../internal/styles";const w=["group relative flex w-full cursor-text items-center","[-webkit-tap-highlight-color:transparent]",j,"focus-within:[transition-duration:0ms]",u,b].join(" "),y=["inline-flex size-[1.7em] shrink-0 cursor-pointer items-center justify-center","rounded-(--neba-radius-xs) text-(--neba-muted-fg) select-none","[&_svg]:size-[0.9em] [&_svg]:shrink-0","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]","[transition:background-color_var(--neba-duration)_var(--neba-ease),color_var(--neba-duration)_var(--neba-ease)]","active:[transition-duration:0ms]","hover:bg-(--n-soft) hover:text-(--n-accent)","active:bg-(--n-soft-press)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-1","disabled:cursor-not-allowed disabled:bg-transparent disabled:text-(--neba-disabled-fg)"].join(" ");export function NumberField({variant:u="outline",size:b="md",color:j="primary",density:k="default",elevation:S=0,value:_,defaultValue:V,onValueChange:C,onValueCommitted:I,min:O,max:z,step:L,largeStep:W,smallStep:$,snapOnStep:q,allowWheelScrub:B=!1,format:D,locale:F,steppers:R="end",incrementLabel:E,decrementLabel:G,label:A,description:H,error:J,invalid:K,startIcon:M,endIcon:P,fullWidth:Q=!1,disabled:T=!1,readOnly:U=!1,required:X=!1,name:Y,placeholder:Z,id:ee,className:ne,style:te,...ae}){const le=l("string"==typeof F?F:void 0),ie=f(J),re=K??ie,se=re?"danger":j,oe=x[k][b],ce={end:`${oe} pe-1`,split:"px-1",none:oe},de=e(t.Decrement,{"aria-label":G??le.number.decrease,className:y,children:e(i,{})}),me=e(t.Increment,{"aria-label":E??le.number.increase,className:y,children:e(r,{})}),ue="none"!==R&&!U;return n(a.Root,{disabled:T,invalid:re,className:["flex-col align-top",v[b],Q?"flex w-full":"inline-flex",ne??""].filter(Boolean).join(" "),style:{...N(se,S),...te},...ae,children:[A?e(a.Label,{className:[h[b],"font-medium",T?"text-(--neba-disabled-fg)":"text-(--neba-fg)"].join(" "),children:A}):null,e(t.Root,{id:ee,name:Y,className:"contents",value:_,defaultValue:V,onValueChange:e=>C?.(e),onValueCommitted:e=>I?.(e),min:O,max:z,step:L,largeStep:W,smallStep:$,snapOnStep:q,allowWheelScrub:B,format:D,locale:F,disabled:T,readOnly:U,required:X,children:n(t.Group,{className:[w,s[b],o[b],g[b],p[b],ue?ce[R]:oe,T?c[u]:U?d[u]:m[u]].join(" "),children:[ue&&"split"===R?de:null,M?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:M}):null,e(t.Input,{placeholder:Z,className:["min-w-0 flex-1 self-stretch bg-transparent [font:inherit] text-inherit","[outline:none]","tabular-nums","split"===R&&ue?"text-center":"","placeholder:text-(--neba-muted-fg)","caret-(--n-accent) selection:bg-(--n-soft-press)","disabled:cursor-not-allowed"].filter(Boolean).join(" ")}),P?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:P}):null,ue&&"end"===R?n("span",{className:"flex shrink-0 items-center gap-0.5",children:[de,me]}):null,ue&&"split"===R?me:null]})}),H?e(a.Description,{className:`${h[b]} text-(--neba-muted-fg)`,children:H}):null,ie?e(a.Error,{match:!0,className:`${h[b]} text-(--n-accent)`,children:J}):null]})}

package/dist/components/overlay/Overlay.d.ts

@@ -25,7 +25,7 @@ export type OverlayTone = 'scrim' | 'blur' | 'solid' | 'clear';
  * no `elevation` either: the overlay *is* the plane everything else floats
  * above, and a scrim with a drop shadow is a scrim with an edge.
  */
-export interface OverlayProps {
+export interface OverlayProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'children'> {
     /** The overlay is shown. Use with `onOpenChange` for a controlled overlay. */
     open?: boolean;
     /** Whether the overlay starts shown, for an uncontrolled one. */
@@ -57,17 +57,22 @@ export interface OverlayProps {
     size?: NebaSize;
     /** Semantic colour role. Reaches the focus ring and whatever the content reads. */
     color?: NebaColor;
+    /**
+     * Which language the overlay is named in — a BCP 47 tag such as `ko`, `pt-BR` or
+     * `zh-Hant`. Unsupported tags fall back to English.
+     *
+     * `label` writes the word out instead; this is for the far more common
+     * case where the page already knows its own language.
+     */
+    locale?: string;
     /**
      * The accessible name of the overlay. An overlay that holds nothing readable
      * — a bare spinner, a `clear` sheet — still has to say what it is, so this
-     * has a default rather than being optional.
-     * @default 'Overlay'
+     * falls back to the `locale`'s word for it rather than to nothing.
      */
     label?: string;
     /** What sits on top of the scrim — a spinner, a line of text, a small card. */
     children?: React.ReactNode;
-    className?: string;
-    style?: React.CSSProperties;
 }
 /**
  * A sheet over the whole page that stops it being used.
@@ -82,4 +87,4 @@ export interface OverlayProps {
  * held inside, the page behind going inert, and focus returning to wherever it
  * came from when the overlay closes.
  */
-export declare function Overlay({ open, defaultOpen, onOpenChange, tone, dismissible, modal, align, size, color, label, className, style, children }: OverlayProps): React.JSX.Element;
+export declare function Overlay({ open, defaultOpen, onOpenChange, tone, dismissible, modal, align, size, color, locale, label, className, style, children, ...props }: OverlayProps): React.JSX.Element;

package/dist/components/overlay/Overlay.js

@@ -1 +1 @@
-import{jsx as e,jsxs as a}from"react/jsx-runtime";import{Dialog as r}from"@base-ui/react/dialog";import{surfaceSlots as n}from"../../internal/styles";const t={scrim:"bg-(--neba-scrim) [backdrop-filter:blur(2px)]",blur:"[background-color:color-mix(in_oklab,var(--neba-scrim)_55%,transparent)] [backdrop-filter:blur(14px)_saturate(1.4)]",solid:"bg-(--neba-surface)",clear:""},l={start:"items-start",center:"items-center",end:"items-end"},i={xs:"p-3",sm:"p-4",md:"p-6",lg:"p-8",xl:"p-10"},s=["[transition:opacity_var(--neba-duration)_var(--neba-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" ");export function Overlay({open:o,defaultOpen:c,onOpenChange:p,tone:m="scrim",dismissible:d=!1,modal:b=!0,align:f="center",size:u="md",color:x="primary",label:y="Overlay",className:g,style:h,children:j}){return e(r.Root,{open:o,defaultOpen:c,modal:b,disablePointerDismissal:!d,onOpenChange:(e,a)=>{d||e||"escape-key"!==a.reason?p?.(e):a.cancel()},children:a(r.Portal,{children:[e(r.Backdrop,{className:`neba-portal fixed inset-0 z-50 ${s} ${t[m]}`}),e(r.Viewport,{className:["neba-portal fixed inset-0 z-50 flex justify-center",l[f],i[u]].join(" "),children:e(r.Popup,{"aria-label":y,className:["flex max-h-full max-w-full flex-col items-center justify-center","[outline:none]",s,g??""].filter(Boolean).join(" "),style:{...n(x,0),...h},children:j})})]})})}
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import{Dialog as r}from"@base-ui/react/dialog";import{useMessages as n}from"../../internal/i18n";import{surfaceSlots as l}from"../../internal/styles";const t={scrim:"bg-(--neba-scrim) [backdrop-filter:blur(2px)]",blur:"[background-color:color-mix(in_oklab,var(--neba-scrim)_55%,transparent)] [backdrop-filter:blur(14px)_saturate(1.4)]",solid:"bg-(--neba-surface)",clear:""},i={start:"items-start",center:"items-center",end:"items-end"},o={xs:"p-3",sm:"p-4",md:"p-6",lg:"p-8",xl:"p-10"},s=["[transition:opacity_var(--neba-duration)_var(--neba-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" ");export function Overlay({open:c,defaultOpen:m,onOpenChange:p,tone:d="scrim",dismissible:b=!1,modal:f=!0,align:u="center",size:x="md",color:y="primary",locale:g,label:h,className:j,style:k,children:v,...O}){const _=n(g);return e(r.Root,{open:c,defaultOpen:m,modal:f,disablePointerDismissal:!b,onOpenChange:(e,a)=>{b||e||"escape-key"!==a.reason?p?.(e):a.cancel()},children:a(r.Portal,{children:[e(r.Backdrop,{className:`neba-portal fixed inset-0 z-50 ${s} ${t[d]}`}),e(r.Viewport,{className:["neba-portal fixed inset-0 z-50 flex justify-center",i[u],o[x]].join(" "),children:e(r.Popup,{"aria-label":h??_.overlay.label,className:["flex max-h-full max-w-full flex-col items-center justify-center","[outline:none]",s,j??""].filter(Boolean).join(" "),style:{...l(y,0),...k},...O,children:v})})]})})}

package/dist/components/pagination/Pagination.d.ts

@@ -30,17 +30,39 @@ export interface PaginationProps extends NebaStyleProps, Omit<React.ComponentPro
     elevation?: NebaElevation;
     /** Unavailable. Every button in the row stops answering. */
     disabled?: boolean;
-    /** Accessible name of the `<nav>`. @default 'Pagination' */
+    /**
+     * The address of a page, which turns every number in the row into a real
+     * link.
+     *
+     * Without it the row is buttons, and a crawler cannot press one — so a paged
+     * list of articles, products or search results exists for a reader and stops
+     * at page one for everything else. With it the numbers are `<a href>`, the
+     * two arrows carry `rel="prev"` / `rel="next"`, and the browser's own
+     * behaviour comes back: open in a new tab, copy the address, see where a
+     * press is going before making it.
+     *
+     * `onPageChange` still fires and the press is still cancelled first, so a
+     * client-side router keeps the page it already has. A link with nowhere to go
+     * — the current page, a stepper at the end of the row — stays a `<button>`,
+     * because `disabled` is not something an `<a>` can be.
+     */
+    getPageHref?: (page: number) => string;
+    /**
+     * Which language the row names itself in — a BCP 47 tag such as `ko`, `pt-BR`
+     * or `zh-Hant`. Unsupported tags fall back to English.
+     *
+     * Every string below writes one of these out instead; this is for the far more
+     * common case where the page already knows its own language. Nothing here is
+     * ever drawn, so without it a Korean page reads its pages out in English.
+     */
+    locale?: string;
+    /** Accessible name of the `<nav>`. Defaults to the `locale`'s word for it. */
     label?: string;
-    /** Accessible name of a page button. @default `Page ${page}` */
+    /** Accessible name of a page button. Defaults to the `locale`'s wording. */
     pageLabel?: (page: number) => string;
-    /** @default 'Previous page' */
     previousLabel?: string;
-    /** @default 'Next page' */
     nextLabel?: string;
-    /** @default 'First page' */
     firstLabel?: string;
-    /** @default 'Last page' */
     lastLabel?: string;
 }
 /**

package/dist/components/pagination/Pagination.js

@@ -1 +1 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{Button as n}from"../button/Button";import{ChevronIcon as r}from"../../internal/icons";import{controlTextClasses as i,gapClasses as l,srOnlyClasses as o}from"../../internal/styles";function s(e,t){return Array.from({length:Math.max(0,t-e+1)},(t,a)=>e+a)}function m(){return e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:e("path",{d:"m7.5 4.5 3.5 3.5-3.5 3.5M3.5 4.5 7 8l-3.5 3.5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})}const c={xs:"h-5.5 min-w-5.5",sm:"h-6.5 min-w-6.5",md:"h-8 min-w-8",lg:"h-10 min-w-10",xl:"h-12 min-w-12"};export const Pagination=a.forwardRef(function({variant:d="text",size:u="md",color:h="primary",density:f="compact",elevation:p=0,count:x,page:g,defaultPage:b=1,onPageChange:v,siblingCount:M=1,boundaryCount:w=1,showEdges:N=!1,showArrows:y=!0,disabled:L=!1,label:j="Pagination",pageLabel:k=e=>`Page ${e}`,previousLabel:C="Previous page",nextLabel:P="Next page",firstLabel:$="First page",lastLabel:z="Last page",className:B,children:A,...E},F){const[I,R]=a.useState(b),S=Math.min(Math.max(g??I,1),Math.max(x,1)),W=e=>{const t=Math.min(Math.max(e,1),x);t!==S&&(void 0===g&&R(t),v?.(t))};if(x<2)return null;const q=function(e,t,a,n){const r=s(1,Math.min(n,e)),i=s(Math.max(e-n+1,n+1),e),l=Math.max(Math.min(t-a,e-n-2*a-1),n+2),o=Math.min(Math.max(t+a,n+2*a+2),i.length>0?i[0]-2:e-1);return[...r,...l>n+2?["start-ellipsis"]:n+1<e-n?[n+1]:[],...s(l,o),...o<e-n-1?["end-ellipsis"]:e-n>n?[e-n]:[],...i]}(x,S,M,w),D=S<=1,G=S>=x,H=(t,a,r,i,l,o)=>e("li",{className:"flex",children:e(n,{variant:d,size:u,color:h,density:f,elevation:p,disabled:L||i,"aria-label":a,startIcon:e("span",{className:`flex items-center ${l}`,children:o}),onClick:()=>W(r)})},t);return t("nav",{ref:F,"aria-label":j,className:["flex items-center",B??""].filter(Boolean).join(" "),...E,children:[t("ul",{role:"list",className:`m-0 flex list-none items-center p-0 ${l[u]}`,children:[N?H("first",$,1,D,"rotate-180 rtl:rotate-0",e(m,{})):null,y?H("previous",C,S-1,D,"rotate-90 rtl:-rotate-90",e(r,{})):null,q.map((t,a)=>e("li","number"==typeof t?{className:"flex",children:e(n,{variant:t===S?"solid":d,size:u,color:h,density:f,elevation:p,disabled:L,"aria-label":k(t),"aria-current":t===S?"page":void 0,className:"tabular-nums",onClick:()=>W(t),children:t})}:{"aria-hidden":"true",className:["flex select-none items-center justify-center","text-(--neba-muted-fg)",i[u],c[u]].join(" "),children:"…"},`slot-${a}`)),y?H("next",P,S+1,G,"-rotate-90 rtl:rotate-90",e(r,{})):null,N?H("last",z,x,G,"rtl:rotate-180",e(m,{})):null]}),e("span",{className:o,"aria-live":"polite",children:`${k(S)} of ${x}`}),A]})});
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{Button as n}from"../button/Button";import{fillMessage as i,useMessages as r}from"../../internal/i18n";import{ChevronIcon as l}from"../../internal/icons";import{controlTextClasses as o,gapClasses as s,srOnlyClasses as m}from"../../internal/styles";function c(e,t){return Array.from({length:Math.max(0,t-e+1)},(t,a)=>e+a)}function u(){return e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:e("path",{d:"m7.5 4.5 3.5 3.5-3.5 3.5M3.5 4.5 7 8l-3.5 3.5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})}const d={xs:"h-5.5 min-w-5.5",sm:"h-6.5 min-w-6.5",md:"h-8 min-w-8",lg:"h-10 min-w-10",xl:"h-12 min-w-12"};export const Pagination=a.forwardRef(function({variant:h="text",size:p="md",color:f="primary",density:g="compact",elevation:x=0,count:b,page:v,defaultPage:y=1,onPageChange:M,siblingCount:w=1,boundaryCount:N=1,showEdges:j=!1,showArrows:L=!0,disabled:k=!1,getPageHref:C,locale:K,label:P,pageLabel:S,previousLabel:z,nextLabel:B,firstLabel:$,lastLabel:A,className:D,children:E,...H},I){const R=r(K),W=S??(e=>i(R.pagination.page,{page:String(e)})),[q,F]=a.useState(y),G=Math.min(Math.max(v??q,1),Math.max(b,1));if(b<2)return null;const J=function(e,t,a,n){const i=c(1,Math.min(n,e)),r=c(Math.max(e-n+1,n+1),e),l=Math.max(Math.min(t-a,e-n-2*a-1),n+2),o=Math.min(Math.max(t+a,n+2*a+2),r.length>0?r[0]-2:e-1);return[...i,...l>n+2?["start-ellipsis"]:n+1<e-n?[n+1]:[],...c(l,o),...o<e-n-1?["end-ellipsis"]:e-n>n?[e-n]:[],...r]}(b,G,w,N),O=G<=1,Q=G>=b,T=(t,a,n)=>C&&!a?{render:e("a",{href:C(t),rel:n})}:null,U=(e,t)=>{e.metaKey||e.ctrlKey||e.shiftKey||e.altKey||C&&!M||(e.preventDefault(),(e=>{const t=Math.min(Math.max(e,1),b);t!==G&&(void 0===v&&F(t),M?.(t))})(t))},V=(t,a,i,r,l,o,s)=>e("li",{className:"flex",children:e(n,{variant:h,size:p,color:f,density:g,elevation:x,disabled:k||r,"aria-label":a,startIcon:e("span",{className:`flex items-center ${l}`,children:o}),onClick:e=>U(e,i),...T(i,k||r,s)})},t);return t("nav",{ref:I,"aria-label":P??R.pagination.label,className:["flex items-center",D??""].filter(Boolean).join(" "),...H,children:[t("ul",{role:"list",className:`m-0 flex list-none items-center p-0 ${s[p]}`,children:[j?V("first",$??R.pagination.first,1,O,"rotate-180 rtl:rotate-0",e(u,{})):null,L?V("previous",z??R.pagination.previous,G-1,O,"rotate-90 rtl:-rotate-90",e(l,{}),"prev"):null,J.map((t,a)=>e("li","number"==typeof t?{className:"flex",children:e(n,{variant:t===G?"solid":h,size:p,color:f,density:g,elevation:x,disabled:k,"aria-label":W(t),"aria-current":t===G?"page":void 0,className:"tabular-nums",onClick:e=>U(e,t),...T(t,k||t===G),children:t})}:{"aria-hidden":"true",className:["flex select-none items-center justify-center","text-(--neba-muted-fg)",o[p],d[p]].join(" "),children:"…"},`slot-${a}`)),L?V("next",B??R.pagination.next,G+1,Q,"-rotate-90 rtl:rotate-90",e(l,{}),"next"):null,j?V("last",A??R.pagination.last,b,Q,"rtl:rotate-180",e(u,{})):null]}),e("span",{className:m,"aria-live":"polite",children:i(R.pagination.status,{page:String(G),total:String(b)})}),E]})});

package/dist/components/panes/Panes.js

@@ -1 +1 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{cx as r,transitionClasses as o}from"../../internal/styles";const i=n.createContext({basis:null}),a={xs:"basis-1",sm:"basis-1.5",md:"basis-2",lg:"basis-2.5",xl:"basis-3"},s={xs:4,sm:6,md:8,lg:10,xl:12};function l(e,t,n){if(null==e)return;if("number"==typeof e)return t*e/100;const r=/^\s*(-?[\d.]+)\s*(px|rem|em|%)\s*$/.exec(e);if(!r)return;const o=Number(r[1]);if(!Number.isNaN(o))switch(r[2]){case"px":return o;case"%":return t*o/100;case"rem":return o*parseFloat(getComputedStyle(document.documentElement).fontSize||"16");case"em":return o*parseFloat(n&&getComputedStyle(n).fontSize||"16");default:return}}export const Panes=n.forwardRef(function({orientation:c="horizontal",resizable:u=!0,color:d="primary",size:m="md",onResize:f,onResizeEnd:p,className:h,style:g,children:v,...x},b){const y=n.Children.toArray(v).filter(n.isValidElement),z=y.length,w=n.useRef(null),S=n.useCallback(e=>{w.current=e,"function"==typeof b?b(e):b&&(b.current=e)},[b]),R=n.useRef([]);R.current=y.map(e=>e.props);const[C,E]=n.useState(null),N=C&&C.length===z?C:null,M=n.useRef(null);M.current=N;const L="horizontal"===c,$=s[m]*Math.max(0,z-1);function k(e){const t=w.current,n=M.current;if(!u||!t||!n||void 0===n[e+1])return null;const r=t.getBoundingClientRect(),o=(L?r.width:r.height)-$;if(o<=0)return null;const i=R.current[e],a=R.current[e+1],s=n[e]*o,c=s+n[e+1]*o,d=Math.max(l(i?.minSize,o,t)??0,c-(l(a?.maxSize,o,t)??c)),m=Math.min(l(i?.maxSize,o,t)??c,c-(l(a?.minSize,o,t)??0));return m<d?null:{root:t,current:n,extent:o,start:s,pair:c,resize(t){const r=Math.min(m,Math.max(d,s+t)),i=[...n];return i[e]=r/o,i[e+1]=(c-r)/o,E(i),f?.(i.map(e=>100*e)),i}}}n.useEffect(()=>{const e=w.current;if(!e)return;const t=()=>{const t=e.getBoundingClientRect(),n=(L?t.width:t.height)-$;n<=0||E(t=>t&&t.length===z?t:function(e,t,n){const r=e.map(e=>l(e.defaultSize,t,n)),o=r.reduce((e,t)=>e+(t??0),0),i=r.filter(e=>void 0===e).length,a=i>0?Math.max(0,t-o)/i:0,s=r.map(e=>Math.max(0,e??a)),c=s.reduce((e,t)=>e+t,0);return c<=0?s.map(()=>1/Math.max(1,s.length)):s.map(e=>e/c)}(R.current,n,e))};t();const n=new ResizeObserver(t);return n.observe(e),()=>n.disconnect()},[z,L,$]);const A=r("group/handle relative z-1 flex shrink-0 grow-0 items-center justify-center",a[m],o,"[outline:none] focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-0",u?r(L?"cursor-col-resize":"cursor-row-resize","hover:bg-(--n-soft) data-[dragging]:bg-(--n-soft)"):"");return e("div",{ref:S,className:r("flex h-full w-full",L?"flex-row":"flex-col","min-h-0 min-w-0",h),style:{"--n-accent":`var(--neba-${d}-accent)`,"--n-soft":`var(--neba-${d}-soft)`,"--n-ring":`var(--neba-${d}-ring)`,...g},...x,children:y.map((a,s)=>t(n.Fragment,{children:[s>0?e("div",{role:"separator","aria-orientation":L?"vertical":"horizontal","aria-valuenow":N?Math.round(100*N[s-1]):void 0,"aria-valuemin":0,"aria-valuemax":100,"aria-disabled":!u||void 0,tabIndex:u?0:-1,className:A,onPointerDown:e=>{0===e.button&&function(e,t){const n=k(e);if(!n)return;const r=t.currentTarget;r.setPointerCapture(t.pointerId),r.dataset.dragging="true";const o=document.body.style.userSelect;document.body.style.userSelect="none";const i=L?t.clientX:t.clientY,a=L&&"rtl"===getComputedStyle(n.root).direction?-1:1;let s=n.current;const l=e=>{const t=L?e.clientX:e.clientY;s=n.resize((t-i)*a)},c=()=>{r.removeEventListener("pointermove",l),r.removeEventListener("pointerup",c),r.removeEventListener("pointercancel",c),delete r.dataset.dragging,document.body.style.userSelect=o,p?.(s.map(e=>100*e))};r.addEventListener("pointermove",l),r.addEventListener("pointerup",c),r.addEventListener("pointercancel",c)}(s-1,e)},onKeyDown:e=>{const t=L?"ArrowLeft":"ArrowUp",n=L?"ArrowRight":"ArrowDown";e.key!==t&&e.key!==n||(e.preventDefault(),function(e,t){const n=k(e);if(!n)return;const r=n.resize(t);p?.(r.map(e=>100*e))}(s-1,e.key===n?16:-16))},children:e("span",{"aria-hidden":"true",className:r("pointer-events-none bg-(--neba-border)",o,L?"h-full w-px":"h-px w-full",u?"group-hover/handle:bg-(--n-accent) group-focus-visible/handle:bg-(--n-accent) group-data-[dragging]/handle:bg-(--n-accent)":"")})}):null,e(i.Provider,{value:{basis:N?`calc((100% - ${$}px) * ${N[s].toFixed(6)})`:null},children:a})]},a.key??s))})});export const Pane=n.forwardRef(function({defaultSize:t,minSize:o,maxSize:a,className:s,style:l,children:c,...u},d){const{basis:m}=n.useContext(i);return e("div",{ref:d,className:r("relative min-h-0 min-w-0 overflow-auto",s),style:{flex:m?`0 0 ${m}`:"1 1 0%",...l},...u,children:c})});
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{cx as r,transitionClasses as o}from"../../internal/styles";const i=n.createContext({basis:null}),s={xs:"basis-1",sm:"basis-1.5",md:"basis-2",lg:"basis-2.5",xl:"basis-3"},a={xs:4,sm:6,md:8,lg:10,xl:12};function l(e,t,n){if(null==e)return;if("number"==typeof e)return t*e/100;const r=/^\s*(-?[\d.]+)\s*(px|rem|em|%)\s*$/.exec(e);if(!r)return;const o=Number(r[1]);if(!Number.isNaN(o))switch(r[2]){case"px":return o;case"%":return t*o/100;case"rem":return o*parseFloat(getComputedStyle(document.documentElement).fontSize||"16");case"em":return o*parseFloat(n&&getComputedStyle(n).fontSize||"16");default:return}}export const Panes=n.forwardRef(function({orientation:c="horizontal",resizable:u=!0,color:d="primary",size:m="md",onResize:f,onResizeEnd:p,className:g,style:h,children:v,...b},x){const y=n.Children.toArray(v).filter(n.isValidElement),w=y.length,z=n.useRef(null),S=n.useCallback(e=>{z.current=e,"function"==typeof x?x(e):x&&(x.current=e)},[x]),R=n.useRef([]);R.current=y.map(e=>e.props);const[E,k]=n.useState(null),C=E&&E.length===w?E:null,N=n.useRef(null);N.current=C;const M="horizontal"===c,P=a[m]*Math.max(0,w-1);function L(e){const t=z.current,n=N.current;if(!u||!t||!n||void 0===n[e+1])return null;const r=t.getBoundingClientRect(),o=(M?r.width:r.height)-P;if(o<=0)return null;const i=R.current[e],s=R.current[e+1],a=n[e]*o,c=a+n[e+1]*o,d=Math.max(l(i?.minSize,o,t)??0,c-(l(s?.maxSize,o,t)??c)),m=Math.min(l(i?.maxSize,o,t)??c,c-(l(s?.minSize,o,t)??0));return m<d?null:{root:t,current:n,extent:o,start:a,pair:c,resize(t){const r=Math.min(m,Math.max(d,a+t)),i=[...n];return i[e]=r/o,i[e+1]=(c-r)/o,k(i),f?.(i.map(e=>100*e)),i}}}n.useEffect(()=>{const e=z.current;if(!e)return;const t=()=>{const t=e.getBoundingClientRect(),n=(M?t.width:t.height)-P;n<=0||k(t=>t&&t.length===w?t:function(e,t,n){const r=e.map(e=>l(e.defaultSize,t,n)),o=r.reduce((e,t)=>e+(t??0),0),i=r.filter(e=>void 0===e).length,s=i>0?Math.max(0,t-o)/i:0,a=r.map(e=>Math.max(0,e??s)),c=a.reduce((e,t)=>e+t,0);return c<=0?a.map(()=>1/Math.max(1,a.length)):a.map(e=>e/c)}(R.current,n,e))};t();const n=new ResizeObserver(t);return n.observe(e),()=>n.disconnect()},[w,M,P]);const $=n.useRef(null);n.useEffect(()=>()=>$.current?.(),[]);const A=r("group/handle relative z-1 flex shrink-0 grow-0 items-center justify-center",s[m],o,"[outline:none] focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-0",u?r(M?"cursor-col-resize":"cursor-row-resize","hover:bg-(--n-soft) data-[dragging]:bg-(--n-soft)"):"");return e("div",{ref:S,className:r("flex h-full w-full",M?"flex-row":"flex-col","min-h-0 min-w-0",g),style:{"--n-accent":`var(--neba-${d}-accent)`,"--n-soft":`var(--neba-${d}-soft)`,"--n-ring":`var(--neba-${d}-ring)`,...h},...b,children:y.map((s,a)=>t(n.Fragment,{children:[a>0?e("div",{role:"separator","aria-orientation":M?"vertical":"horizontal","aria-valuenow":C?Math.round(100*C[a-1]):void 0,"aria-valuemin":0,"aria-valuemax":100,"aria-disabled":!u||void 0,tabIndex:u?0:-1,className:A,onPointerDown:e=>{0===e.button&&function(e,t){const n=L(e);if(!n)return;const r=t.currentTarget;r.setPointerCapture(t.pointerId),r.dataset.dragging="true";const o=document.body.style.getPropertyValue("-webkit-user-select");document.body.style.setProperty("-webkit-user-select","none");const i=M?t.clientX:t.clientY,s=M&&"rtl"===getComputedStyle(n.root).direction?-1:1;let a=n.current;const l=e=>{const t=M?e.clientX:e.clientY;a=n.resize((t-i)*s)},c=()=>{$.current=null,r.removeEventListener("pointermove",l),r.removeEventListener("pointerup",u),r.removeEventListener("pointercancel",u),delete r.dataset.dragging,o?document.body.style.setProperty("-webkit-user-select",o):document.body.style.removeProperty("-webkit-user-select")},u=()=>{c(),p?.(a.map(e=>100*e))};$.current=c,r.addEventListener("pointermove",l),r.addEventListener("pointerup",u),r.addEventListener("pointercancel",u)}(a-1,e)},onKeyDown:e=>{const t=M?"ArrowLeft":"ArrowUp",n=M?"ArrowRight":"ArrowDown";e.key!==t&&e.key!==n||(e.preventDefault(),function(e,t){const n=L(e);if(!n)return;const r=n.resize(t);p?.(r.map(e=>100*e))}(a-1,e.key===n?16:-16))},children:e("span",{"aria-hidden":"true",className:r("pointer-events-none bg-(--neba-border)",o,M?"h-full w-px":"h-px w-full",u?"group-hover/handle:bg-(--n-accent) group-focus-visible/handle:bg-(--n-accent) group-data-[dragging]/handle:bg-(--n-accent)":"")})}):null,e(i.Provider,{value:{basis:C?`calc((100% - ${P}px) * ${C[a].toFixed(6)})`:null},children:s})]},s.key??a))})});export const Pane=n.forwardRef(function({defaultSize:t,minSize:o,maxSize:s,className:a,style:l,children:c,...u},d){const{basis:m}=n.useContext(i);return e("div",{ref:d,className:r("relative min-h-0 min-w-0 overflow-auto",a),style:{flex:m?`0 0 ${m}`:"1 1 0%",...l},...u,children:c})});

package/dist/components/pie-chart/PieChart.d.ts

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import { type ChartBaseProps } from '../../internal/chart-frame';
+import type { NebaChartCategory, NebaChartDatum } from '../../types';
+export interface PieChartProps extends ChartBaseProps {
+    /**
+     * The slices. Numbers, or points that carry their own name and colour.
+     *
+     * One series and not an array of them, because that is what a pie *is*: the
+     * slices are the entities here, so each one takes a palette slot of its own
+     * and the legend lists them rather than listing series.
+     */
+    data: readonly NebaChartDatum[];
+    /** What each slice is called. Points may carry their own `x` instead. */
+    categories?: readonly NebaChartCategory[];
+    /**
+     * - `pie` — a filled disc. The default.
+     * - `donut` — a ring, with room in the middle for the total.
+     * - `semi` — half a ring, opened along the bottom. For a gauge, or for a
+     *   dashboard tile that is wider than it is tall.
+     * @default 'pie'
+     */
+    shape?: 'pie' | 'donut' | 'semi';
+    /**
+     * Where the first slice starts, in degrees clockwise from twelve o'clock.
+     * Ignored by `semi`, which is defined by where it opens.
+     * @default 0
+     */
+    startAngle?: number;
+    /**
+     * What goes in the hole. A `donut` or a `semi` with nothing in the middle is
+     * a pie with a bite out of it; the total, or the one figure the chart is
+     * about, is what the ring was drawn around.
+     */
+    center?: React.ReactNode;
+    /**
+     * Writes each slice's share on it, where the slice is wide enough for the
+     * text to fit with room either side. A label that does not fit is dropped
+     * rather than clipped — the tooltip and the table still have it.
+     *
+     * The number written is the **share**, not the value: a share is what a pie
+     * is a picture of, and the value is one hover away.
+     * @default 'none'
+     */
+    valueLabels?: 'none' | 'all';
+}
+/**
+ * Parts of a whole, at a glance.
+ *
+ * The narrowest chart in the library and the easiest one to misuse. An angle is
+ * a poor thing to compare — two slices within a few percent of each other are
+ * indistinguishable, and a reader cannot rank six of them — so the pie is right
+ * for exactly one question: *is one of these most of it?* Anything finer than
+ * that, and anything past six slices, is a [BarChart](./bar-chart).
+ *
+ * A slice's colour follows the slice and not its size, so a chart that is
+ * refiltered or resorted keeps every category the colour it had.
+ */
+export declare function PieChart({ data, categories, shape, startAngle, center, valueLabels, height, format, locale, label, legend, tooltip, empty, size, variant, padded, className, ...box }: PieChartProps): React.JSX.Element;

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

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

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

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

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

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

package/dist/components/popover/Popover.d.ts

@@ -10,7 +10,7 @@ import type { NebaAlign, NebaSide, NebaStyleProps } from '../../types';
  * the page by definition, so it carries a shadow at level 3 and a prop that
  * could sit it flat would be a prop that could stop it being a popover.
  */
-export interface PopoverProps extends Pick<NebaStyleProps, 'size' | 'color' | 'density'> {
+export interface PopoverProps extends Pick<NebaStyleProps, 'size' | 'color' | 'density'>, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'title' | 'children'> {
     /**
      * The element the popup hangs off and that opens it. Exactly one element,
      * which must accept a ref and spread props — every Neba component does.
@@ -69,7 +69,15 @@ export interface PopoverProps extends Pick<NebaStyleProps, 'size' | 'color' | 'd
     dismissible?: boolean;
     /** Shows the × in the corner. @default false */
     showClose?: boolean;
-    /** Accessible name of the × button. */
+    /**
+     * Which language the × is named in — a BCP 47 tag such as `ko`, `pt-BR` or
+     * `zh-Hant`. Unsupported tags fall back to English.
+     *
+     * `closeLabel` writes the word out instead; this is for the far more common
+     * case where the page already knows its own language.
+     */
+    locale?: string;
+    /** Accessible name of the × button. Defaults to the `locale`'s word for it. */
     closeLabel?: string;
     /**
      * A hard cap on the popup's width, overriding the one `size` implies. Numbers
@@ -77,8 +85,6 @@ export interface PopoverProps extends Pick<NebaStyleProps, 'size' | 'color' | 'd
      * single line of help — rather than for tuning the scale, which is `size`.
      */
     width?: number | string;
-    className?: string;
-    style?: React.CSSProperties;
 }
 export type PopoverCloseProps = React.ComponentPropsWithoutRef<typeof BaseUIPopover.Close>;
 /**
@@ -106,4 +112,4 @@ export declare const PopoverClose: React.ForwardRefExoticComponent<Omit<import("
  * the `aria-labelledby` / `aria-describedby` wiring. What is left here is the
  * surface, the width ladder and the header.
  */
-export declare function Popover({ size, color, density, trigger, title, description, children, side, align, sideOffset, alignOffset, arrow, open, defaultOpen, onOpenChange, modal, dismissible, showClose, closeLabel, width, className, style }: PopoverProps): React.JSX.Element;
+export declare function Popover({ size, color, density, trigger, title, description, children, side, align, sideOffset, alignOffset, arrow, open, defaultOpen, onOpenChange, modal, dismissible, showClose, locale, closeLabel, width, className, style, ...props }: PopoverProps): React.JSX.Element;

package/dist/components/popover/Popover.js

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

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

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

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

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