neba 1.3.0 → 1.5.0

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

@@ -0,0 +1,151 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { NebaMockupBezel, NebaMockupDevice, NebaMockupFinish, NebaMockupHardware, NebaMockupNotch, NebaMockupOrientation, NebaMockupOs, NebaMockupResolution } from '../../internal/mockup';
+import type { NebaColor, NebaElevation, NebaSize, NebaTransition } from '../../types';
+export type { NebaMockupBezel, NebaMockupDevice, NebaMockupFinish, NebaMockupHardware, NebaMockupNotch, NebaMockupOrientation, NebaMockupOs, NebaMockupResolution } from '../../internal/mockup';
+export interface MockupProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color'> {
+    /**
+     * Which machine this is a picture of. The one prop with no default: a mockup
+     * that has not said what it is a mockup of has not said anything.
+     */
+    device: NebaMockupDevice;
+    /**
+     * The system whose chrome is drawn on the screen. A desktop runs `macos`,
+     * `windows` or `linux`; a tablet runs `ipados` or `android`; a phone runs `ios`
+     * or `android`. Anything else falls back to the device's own default —
+     * `macos`, `ipados` and `ios` respectively.
+     */
+    os?: NebaMockupOs;
+    /**
+     * What holds a desktop screen up: a stand under it, or a keyboard in front of
+     * it. Ignored on a tablet and a phone, which hold themselves up.
+     * @default 'monitor'
+     */
+    hardware?: NebaMockupHardware;
+    /**
+     * How big the device is, on a five-step ladder of real resolutions per device
+     * — from a 320-wide phone to a 430-wide one, from a 1024-wide desktop to a
+     * 1920-wide one.
+     *
+     * As on Box, `size` here does not set a height or a type scale. What it sets
+     * is the resolution of the screen, which is the only thing about a device
+     * there is to scale. `resolution` overrides it outright.
+     * @default 'md'
+     */
+    size?: NebaSize;
+    /**
+     * The screen's logical resolution in CSS pixels, when none of the five steps
+     * is the machine you mean. This is the viewport the content is laid out
+     * against, not the panel's physical pixel count.
+     */
+    resolution?: NebaMockupResolution;
+    /**
+     * Which way a handheld is held. Landscape turns the screen, the bezel and the
+     * cut-out together. Ignored on a desktop, whose stand does not turn with it.
+     * @default 'portrait'
+     */
+    orientation?: NebaMockupOrientation;
+    /**
+     * How much hardware there is around the screen. `none` is not a thinner
+     * bezel — it is no hardware at all, leaving the screen on its own with its
+     * corners cut, which is what a mockup that only wants the viewport asks for.
+     * `thick` is an older device: narrow sides, a forehead and a chin.
+     * @default 'standard'
+     */
+    bezel?: NebaMockupBezel;
+    /**
+     * What the hardware is made of. Fixed colours rather than theme tokens — a
+     * graphite phone stays graphite on a page switched to dark.
+     * @default 'graphite'
+     */
+    finish?: NebaMockupFinish;
+    /**
+     * The camera cut-out. Hardware rather than chrome, so it is drawn whether or
+     * not `systemUi` is on. Defaults to what the device would have: a dynamic
+     * island on an iOS phone, a punch hole on an Android one, nothing anywhere
+     * else.
+     */
+    notch?: NebaMockupNotch;
+    /**
+     * Draws the system's own bars — a status bar and a home indicator, a menu bar
+     * and a dock, a taskbar. Each one takes its own space rather than covering the
+     * content, so turning it off gives the screen back to `children` rather than
+     * uncovering anything.
+     * @default true
+     */
+    systemUi?: boolean;
+    /**
+     * Whether content taller than the screen scrolls. Off, it is clipped, which is
+     * what a still picture of a device wants.
+     * @default false
+     */
+    scroll?: boolean;
+    /**
+     * What is behind the content: any CSS `background` value — a colour, a
+     * gradient, a `url()`.
+     * @default the page's own surface colour
+     */
+    wallpaper?: string;
+    /**
+     * The clock in the status bar or the taskbar, and the only text the chrome
+     * draws. A string rather than a `Date`, because a mockup's clock is a prop of
+     * the picture and reading the real one would differ between the server that
+     * renders the page and the browser that hydrates it.
+     * @default '9:41'
+     */
+    time?: string;
+    /**
+     * The rendered width of the whole device on the page — a number in pixels or
+     * any CSS length. The device is laid out at its own resolution and then scaled
+     * to whatever this comes to, so the content inside is genuinely a screen's
+     * worth rather than a page's worth shrunk.
+     * @default '100%'
+     */
+    width?: number | string;
+    /**
+     * The rendered height. Given on its own it decides the size and the width
+     * follows the device's proportion, which is what a mockup in a row of fixed
+     * height wants.
+     */
+    height?: number | string;
+    /** Reaches the accent in the chrome — a dock's first icon, a taskbar's. */
+    color?: NebaColor;
+    /**
+     * How far off the page the device sits. Drawn as a silhouette rather than a
+     * box, so the shadow follows a lid on a neck on a foot, and it does not shrink
+     * with the device.
+     * @default 0
+     */
+    elevation?: NebaElevation;
+    /**
+     * An entrance animation, run once on mount: `transition="fade"`, or an object
+     * for the details.
+     */
+    transition?: NebaTransition;
+    /** Renders something other than a `<div>`: `render={<figure />}`. */
+    render?: useRender.RenderProp;
+    /** What is on the screen. */
+    children?: React.ReactNode;
+}
+/**
+ * A device with a screen you can put anything on: a phone, a tablet, a monitor
+ * or a laptop, with the system's own bars drawn on it.
+ *
+ * The screen is a viewport at the device's own resolution — a `md` phone is 390
+ * by 844 CSS pixels — and the whole device is then scaled once to whatever room
+ * it has been given. So the content inside is laid out against a screen rather
+ * than against the page: a 390-pixel column wraps where it would wrap on a
+ * phone, and the mockup can be 200 pixels wide on the page without the content
+ * knowing.
+ *
+ * That scale is a `transform`, and it is the one place in the library where one
+ * is used. The rule it is an exception to is about controls, where a scale
+ * resamples a label under the pointer that is pressing it. Nothing here is
+ * pressed and the scale never changes on an interaction: it is set once from the
+ * space available, which is the only way to draw a 1440-pixel desktop in a
+ * paragraph's width at all.
+ *
+ * The screen is also a container (`neba-screen`), so content inside can answer
+ * to the device's width with a container query rather than to the window's.
+ */
+export declare const Mockup: React.ForwardRefExoticComponent<MockupProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/mockup/Mockup.js

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

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

@@ -0,0 +1,2 @@
+export { Mockup } from './Mockup';
+export type { MockupProps, NebaMockupBezel, NebaMockupDevice, NebaMockupFinish, NebaMockupHardware, NebaMockupNotch, NebaMockupOrientation, NebaMockupOs, NebaMockupResolution } from './Mockup';

package/dist/components/mockup/index.js

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

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]})});

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

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