neba 1.3.0 → 1.5.0

package/dist/components/rating/Rating.d.ts

@@ -0,0 +1,100 @@
+import * as React from 'react';
+import type { NebaColor, NebaSize } from '../../types';
+export interface RatingProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'defaultValue' | 'onChange'> {
+    /** How much is rated. Use with `onValueChange` for a controlled Rating. */
+    value?: number;
+    /**
+     * Where an uncontrolled Rating starts.
+     * @default 0
+     */
+    defaultValue?: number;
+    /** Called with the new score. `0` is what a cleared Rating reports. */
+    onValueChange?: (value: number) => void;
+    /**
+     * How many stars there are, and therefore the highest score.
+     * @default 5
+     */
+    count?: number;
+    /**
+     * The smallest step that can be *chosen*, as a fraction of one star — `0.5`
+     * gives half stars, `1` whole ones. Anything outside `0 < precision <= 1`
+     * falls back to `1`.
+     *
+     * It bounds what a reader can pick and nothing else: a `value` of `4.3` is
+     * drawn as four stars and a third at every precision, because an average is
+     * not a choice and rounding it to the nearest half would be reporting a
+     * different number from the one it was handed.
+     * @default 1
+     */
+    precision?: number;
+    /** The glyph a filled star is drawn with. */
+    icon?: React.ReactNode;
+    /** And the one an empty star is drawn with. Has to be the same shape. */
+    emptyIcon?: React.ReactNode;
+    /**
+     * Choosing the score that is already chosen clears it back to `0`.
+     * @default true
+     */
+    clearable?: boolean;
+    /**
+     * Shows the score without letting it be changed — a product's average, a
+     * rating somebody else left.
+     *
+     * This is the one `readOnly` in the library that does not drain the
+     * saturation, because it is not a control being held still: there are no
+     * inputs at all, and what is left is a picture of a number. A row of grey
+     * stars would say the score itself was unavailable.
+     * @default false
+     */
+    readOnly?: boolean;
+    /** Unavailable. Drops the colour family for neutral grey. */
+    disabled?: boolean;
+    /** Identifies the value when a form is submitted. */
+    name?: string;
+    /** A form will not submit until a star has been chosen. */
+    required?: boolean;
+    /** Height of one star, on the standalone-glyph ladder. @default 'md' */
+    size?: NebaSize;
+    /**
+     * Semantic colour role. `warning` by default — the amber a star is expected
+     * to be — rather than `primary`, which is the one place in the library a
+     * component's default colour is chosen by what the object is instead of by
+     * what it means.
+     * @default 'warning'
+     */
+    color?: NebaColor;
+    /**
+     * Which language the accessible names are written in — a BCP 47 tag such as
+     * `ko`, `pt-BR` or `zh-Hant`. Unsupported tags fall back to English.
+     */
+    locale?: string;
+    /** Names the whole control. Defaults to the `locale`'s word for "Rating". */
+    label?: string;
+    /**
+     * What one star, and the whole control once it is read only, is called.
+     * Defaults to the `locale`'s way of saying "3 out of 5".
+     */
+    valueLabel?: (value: number, count: number) => string;
+}
+/**
+ * A score out of five, as a row of stars.
+ *
+ * Underneath an interactive Rating is a radio group of real `<input>`s, one per
+ * choosable score, each visually hidden under the half-star it stands for. That
+ * is the whole accessibility argument: a rating *is* "exactly one of these", so
+ * it gets one tab stop for the row, arrow keys within it, `aria-checked` on the
+ * one that is taken, and a value in a form submission — none of which a row of
+ * `<button>`s or a `<div>` with a click handler would have.
+ *
+ * The fraction is drawn by laying the filled star over the empty one and
+ * clipping it to a percentage of the width. Nothing is transformed and no glyph
+ * is scaled, so a half star is the left half of exactly the star beside it. The
+ * clip runs from the inline start, so it fills from the right under RTL without
+ * anything being told to.
+ *
+ * `readOnly` is a different component in the same clothes: no inputs, no radio
+ * group, and one `role="img"` carrying the score as a sentence. A star display
+ * that keeps twenty focusable radios is twenty tab stops on a page that was
+ * only reporting a number.
+ */
+export declare const Rating: React.ForwardRefExoticComponent<RatingProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/rating/Rating.js

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

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

@@ -0,0 +1 @@
+export * from './Rating';

package/dist/components/rating/index.js

@@ -0,0 +1 @@
+export*from"./Rating";

package/dist/components/scatter-chart/ScatterChart.d.ts

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { type CartesianChartProps } from '../../internal/chart-frame';
+import { type MarkShape } from '../../internal/chart';
+export interface ScatterChartProps extends CartesianChartProps {
+    /**
+     * What each mark is drawn as.
+     *
+     * - `auto` — the default. A circle while colour alone can carry identity, and
+     *   a shape per series from the fourth on, because past three series it
+     *   cannot: two of the palette's hues are indistinguishable under
+     *   deuteranopia, and a shape is the one channel a dot has going spare.
+     * - `varied` — a shape per series always, in the fixed order circle, square,
+     *   triangle, diamond, cross. Reach for it when the chart will be printed or
+     *   read in greyscale.
+     * - one of the five names — every mark the same shape. On four or more series
+     *   this is opting out of the second channel; do it only when each series
+     *   carries a `color` of its own.
+     * @default 'auto'
+     */
+    shape?: MarkShape | 'varied' | 'auto';
+    /**
+     * The radius of a mark with no `z`, in pixels.
+     * @default the `size` ladder — 4 at `md`
+     */
+    pointRadius?: number;
+    /**
+     * The radius of the largest bubble, in pixels. Everything else is scaled
+     * under it by area.
+     * @default a twelfth of the chart's height
+     */
+    maxRadius?: number;
+}
+/**
+ * Two numbers per point, and whether they move together.
+ *
+ * Both axes measure, which is what makes this the only chart in the library
+ * with no categories: there is no column a mark belongs to and no order the
+ * points could be shuffled out of. A point with a `z` is drawn as a bubble and
+ * one without it as a dot, so a scatter and a bubble chart are the same
+ * component reading the same data — the third number is simply present or not.
+ *
+ * `x` must be a number or a `Date`. A string has no place on a number line, and
+ * a chart of named things against one measure is a [BarChart](./bar-chart).
+ */
+export declare function ScatterChart({ shape, pointRadius, maxRadius, series, categories, size, xAxis, ...props }: ScatterChartProps): React.JSX.Element;

package/dist/components/scatter-chart/ScatterChart.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as a from"react";import{CartesianChart as l}from"../../internal/chart-frame";import{bubbleRadius as t,formatCategory as i,markerRadii as s,markGap as o,markPath as n,markShapes as c,plotHeights as u,pointX as d}from"../../internal/chart";import{cx as h,srOnlyClasses as m}from"../../internal/styles";export function ScatterChart({shape:r="auto",pointRadius:i,maxRadius:o,series:h,categories:m,size:p="md",xAxis:b,...v}){const y=i??s[p],g=o??Math.max(y+2,("number"==typeof v.height?v.height:u[p])/12),z=h.reduce((e,r)=>r.color?e:e+1,0),k="auto"===r||"varied"===r?"circle":r,M="varied"===r||"auto"===r&&z>3,j=a.useCallback(e=>M?c[e%c.length]:k,[M,k]),w=a.useCallback(e=>{const r=[];let a=0;return e.values.forEach(e=>{e.forEach(e=>{null!==e.value&&void 0!==e.z&&Number.isFinite(e.z)&&(a=Math.max(a,e.z))})}),e.values.forEach((l,i)=>{e.visible[i]&&l.forEach((l,s)=>{if(null===l.value)return;const o=d(l,s,m);null!==o&&r.push({series:i,index:s,x:e.categoryValuePx(o),y:e.valuePx(l.value),r:void 0===l.z?y:t(l.z,a,g,2)})})}),r},[m,y,g]);return e(l,{...v,series:h,categories:m,size:p,xScale:"value",xAxis:b,marks:w,markInset:g,includeZero:!1,swatch:(r,a)=>e("svg",{viewBox:"0 0 10 10",className:"size-2.5 overflow-visible","aria-hidden":"true",children:e("path",{d:n(j(r),5,5,4),fill:a})}),table:r=>e(f,{id:r,series:h,categories:m,label:v.label,xLabel:b?.label,yLabel:v.yAxis?.label,locale:v.locale,format:v.format}),children:r=>e(x,{context:r,shapeOf:j})})}function x({context:r,shapeOf:l}){const{marks:t,values:i,colors:s,hovered:c,activeMark:u}=r,d=a.useMemo(()=>[...t].sort((e,r)=>r.r-e.r),[t]);return e("g",{children:d.map(r=>{const a=i[r.series]?.[r.index],t=null!==c&&c!==r.series,d=u?.series===r.series&&u?.index===r.index;return e("path",{d:n(l(r.series),r.x,r.y,d?r.r+1:r.r),fill:a?.color??s[r.series],stroke:"var(--neba-chart-gap)",strokeWidth:o,opacity:t?.28:1},`${r.series}-${r.index}`)})})}function f({id:l,series:t,categories:s,label:o,xLabel:n,yLabel:c,locale:u,format:d}){const x=a.useMemo(()=>new Intl.NumberFormat(u,d??{maximumFractionDigits:2}),[u,d]),f=t.some(e=>e.data.some(e=>"object"==typeof e&&null!==e&&void 0!==e.z));return r("table",{id:l,className:h(m),children:[o?e("caption",{children:o}):null,e("thead",{children:r("tr",{children:[e("th",{scope:"col"}),e("th",{scope:"col",children:n??"x"}),e("th",{scope:"col",children:c??"y"}),f?e("th",{scope:"col",children:"z"}):null]})}),e("tbody",{children:t.flatMap((a,l)=>a.data.map((t,o)=>{const n="object"==typeof t&&null!==t?t:null,c=n?n.y:"number"==typeof t?t:null,d=n?.x??s?.[o]??o;return r("tr",{children:[e("th",{scope:"row",children:a.name??l+1}),e("td",{children:i(d,u)}),e("td",{children:null!==c&&Number.isFinite(c)?x.format(c):""}),f?e("td",{children:void 0===n?.z?"":x.format(n.z)}):null]},`${l}-${o}`)}))})]})}

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

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

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

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

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

@@ -18,7 +18,7 @@ export interface SelectOption {
     /** Unavailable, but still listed — the option exists, it just cannot be picked. */
     disabled?: boolean;
 }
-export interface SelectProps extends NebaStyleProps {
+export interface SelectProps extends NebaStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'defaultValue' | 'children'> {
     /**
      * The options, as data. There is no `<Select.Option>` to compose: what a
      * caller has is almost always an array already, and the list has to be
@@ -59,8 +59,6 @@ export interface SelectProps extends NebaStyleProps {
     /** Identifies the field when a form is submitted. */
     name?: string;
     id?: string;
-    className?: string;
-    style?: React.CSSProperties;
 }
 /**
  * One value chosen from a list of them.

package/dist/components/select/Select.js

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

package/dist/components/sparkline/Sparkline.d.ts

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import type { NebaChartCurve, NebaChartDatum, NebaColor, NebaSize } from '../../types';
+export interface SparklineProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'children'> {
+    /** The values. `null` is a gap, exactly as it is on every other chart. */
+    data: readonly NebaChartDatum[];
+    /**
+     * Which mark. A line for a trend, an area for a quantity, bars for a count of
+     * discrete things — the same three sentences the full charts say, at a size
+     * where nothing else is being said at all.
+     * @default 'line'
+     */
+    shape?: 'line' | 'area' | 'bar';
+    /** @default 'linear' */
+    curve?: NebaChartCurve;
+    /**
+     * How tall the strip is. Sized against the line of text it sits beside rather
+     * than against the page — a sparkline is a word in a sentence, not a picture.
+     * @default 'md'
+     */
+    size?: NebaSize;
+    /**
+     * The mark's colour. A `NebaColor` family, or any CSS colour.
+     *
+     * Unlike the full charts this one takes it directly: a sparkline has exactly
+     * one series and no legend, so there is nothing for a palette to hand out.
+     * @default the first chart slot
+     */
+    color?: NebaColor | (string & {});
+    /**
+     * Puts a dot on the last point. The one direct label a strip this small has
+     * room for, and it says where the series ended up.
+     * @default false
+     */
+    endDot?: boolean;
+    /**
+     * Draws a rule across the strip at this value — a target, a budget, last
+     * year's average. The one piece of context a sparkline can carry.
+     */
+    baseline?: number;
+    /**
+     * The ends of the scale. Left out, the strip fills itself with its own range,
+     * which is what makes a sparkline legible at twenty pixels tall — and what
+     * makes two of them side by side incomparable. Pass the same `min` and `max`
+     * to a row of them and they become a small-multiples chart.
+     */
+    min?: number;
+    max?: number;
+    /** How wide. Fills its container by default. */
+    width?: number | string;
+    /** A name for the strip, read out in place of it. */
+    label?: string;
+}
+/**
+ * A chart with everything taken away except the shape.
+ *
+ * No axes, no grid, no legend, no tooltip — it is not a small chart, it is a
+ * different thing: a word-sized picture that goes inside a sentence, beside a
+ * [Statistic](./statistic), or in a table cell, and says which way something has
+ * been going. Every number it could label is one the surrounding text already
+ * has, which is why it labels none of them.
+ *
+ * It scales itself to its own range, so the strip is always full. That is what
+ * makes it readable this small and it is also the trap: two sparklines side by
+ * side are drawn on two different scales unless they are given the same `min`
+ * and `max`.
+ */
+export declare const Sparkline: React.ForwardRefExoticComponent<SparklineProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/sparkline/Sparkline.js

@@ -0,0 +1 @@
+import{jsx as a,jsxs as e,Fragment as l}from"react/jsx-runtime";import*as r from"react";import{areaPath as t,barMaxThickness as n,barPath as i,barRadius as o,extentOf as s,lineWidths as h,markerRadii as m,markGap as c,resolveColor as u,sparklineHeights as d,toValue as p}from"../../internal/chart";import{useMeasuredWidth as f}from"../../internal/chart-frame";import{cx as x,srOnlyClasses as v}from"../../internal/styles";import{linePath as b}from"../../internal/chart";export const Sparkline=r.forwardRef(function({data:g,shape:M="line",curve:k="linear",size:y="md",color:w,endDot:$=!1,baseline:j,min:N,max:W,width:C,label:L,className:R,style:z,...B},D){const F=r.useRef(null),G=f(F),I=r.useId().replace(/:/g,""),S=r.useMemo(()=>g.map(p),[g]),q=d[y],A=h[y],E=m[y],H=s([S],!1),J=N??(H?Math.min(H.min,j??H.min):0),K=(W??(H?Math.max(H.max,j??H.max):1))-J||1,O="number"==typeof C?C:G,P=u(w??"var(--neba-chart-1)"),Q="bar"===M?0:A/2+($?E:0),T=Q,U=Math.max(1,q-2*Q),V=a=>T+(1-(a-J)/K)*U,X=S.length>1?O/(S.length-1):O,Y=S.map((a,e)=>null===a.value?null:{x:e*X,y:V(a.value)}),Z=(()=>{for(let a=S.length-1;a>=0;a--)if(null!==S[a].value)return a;return-1})(),_=Math.min(n[y]/2,Math.max(1,O/Math.max(1,S.length)-c));return e("div",{ref:D,className:x("relative block",R??void 0),style:{width:C??"100%",height:q,...z},...B,children:[a("div",{ref:F,className:"absolute inset-0",children:O>0&&S.length>0?e("svg",{width:O,height:q,viewBox:`0 0 ${O} ${q}`,role:L?"img":"presentation","aria-label":L,"aria-hidden":!L||void 0,className:"block overflow-visible",children:["area"===M?e(l,{children:[a("defs",{children:e("linearGradient",{id:`${I}-fill`,x1:"0",y1:"0",x2:"0",y2:"1",children:[a("stop",{offset:"0%",stopColor:`color-mix(in oklab, ${P} 32%, transparent)`}),a("stop",{offset:"100%",stopColor:`color-mix(in oklab, ${P} 2%, transparent)`})]})}),a("path",{d:t(Y,q,k),fill:`url(#${I}-fill)`})]}):null,void 0!==j?a("line",{x1:0,x2:O,y1:V(j),y2:V(j),stroke:"var(--neba-chart-baseline)",strokeWidth:1}):null,"bar"===M?S.map((e,l)=>null===e.value?null:a("path",{d:i(l*(O/Math.max(1,S.length))+(O/Math.max(1,S.length)-_)/2,Math.min(V(e.value),V(Math.max(J,0))),_,Math.max(1,Math.abs(V(e.value)-V(Math.max(J,0)))),o/2,e.value>=0?"up":"down"),fill:e.color??P},l)):a("path",{d:b(Y,k),fill:"none",stroke:P,strokeWidth:A,strokeLinecap:"round",strokeLinejoin:"round"}),$&&Z>=0&&"bar"!==M?a("circle",{cx:Y[Z].x,cy:Y[Z].y,r:E,fill:P,stroke:"var(--neba-chart-gap)",strokeWidth:c}):null]}):null}),L?a("span",{className:v,children:S.map(a=>null===a.value?"—":a.value).join(", ")}):null]})});

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

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

package/dist/components/sparkline/index.js

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

package/dist/components/statistic/Statistic.d.ts

@@ -22,6 +22,13 @@ export interface StatisticProps extends Omit<BoxProps, 'title' | 'prefix'> {
      * own locale and otherwise left alone.
      */
     format?: Intl.NumberFormatOptions;
+    /**
+     * Which language the figure is written in, the same prop every chart takes.
+     * A Statistic is the smallest chart on the page and sits next to the others in
+     * a dashboard, so a locale set on one of them has to be settable on all.
+     * @default the reader's
+     */
+    locale?: string;
     /** Set before the figure and never wrapped away from it — a currency sign. */
     prefix?: React.ReactNode;
     /**

package/dist/components/statistic/Statistic.js

@@ -1 +1 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as l from"react";import{Box as n}from"../box/Box";import{Chip as a}from"../chip/Chip";import{MinusIcon as r,TrendDownIcon as s,TrendUpIcon as m}from"../../internal/icons";import{hasContent as i,metaTextClasses as o,sheetSectionGapClasses as c}from"../../internal/styles";const u={xs:"text-[1.125rem]/[1.375rem]",sm:"text-[1.375rem]/[1.625rem]",md:"text-[1.75rem]/[2rem]",lg:"text-[2.25rem]/[2.5rem]",xl:"text-[2.875rem]/[3.25rem]"},d={xs:"text-[0.75rem]",sm:"text-[0.875rem]",md:"text-[1rem]",lg:"text-[1.25rem]",xl:"text-[1.5rem]"},x={xs:"gap-y-0.5",sm:"gap-y-0.5",md:"gap-y-1",lg:"gap-y-1",xl:"gap-y-1.5"},f={start:"items-start text-start",center:"items-center text-center",end:"items-end text-end"},p={up:e(m,{}),down:e(s,{}),flat:e(r,{})};export const Statistic=l.forwardRef(function({size:r="md",color:s="primary",density:m="default",label:b,value:h,format:g,prefix:w,unit:N,icon:y,previousValue:v,delta:$="percent",betterWhen:j="up",caption:M,align:z="start",className:B,children:k,...F},I){const C=l.useMemo(()=>new Intl.NumberFormat(void 0,g),[g]),R="number"==typeof h?h:null,S=null===R?h:C.format(R),V=null!==R&&void 0!==v?R-v:null,W=null!==V&&0!==v&&void 0!==v?V/Math.abs(v):null,q=null===V?null:V>0?"up":V<0?"down":"flat";let A=null;if(null!==V&&null!==q&&"none"!==$){const e=V>0?"+":V<0?"-":"",t=`${e}${C.format(Math.abs(V))}`,l=null===W?null:`${e}${(100*Math.abs(W)).toFixed(1).replace(/\.0$/,"")}%`;A="absolute"===$?t:"both"===$?[l,t].filter(Boolean).join(" · "):l??t}const D=null===q||"flat"===q?"secondary":q===j?"success":"danger",E=null!==A||i(M);return t(n,{ref:I,size:r,color:s,density:m,className:["flex flex-col",c[r],f[z],B??""].filter(Boolean).join(" "),...F,children:[i(b)||i(y)?t("div",{className:["flex min-w-0 items-center gap-1.5 font-medium text-(--neba-muted-fg)",o[r]].join(" "),children:[i(y)?e("span",{className:"flex shrink-0 items-center",children:y}):null,i(b)?e("span",{className:"min-w-0 truncate",children:b}):null]}):null,t("div",{className:["flex min-w-0 flex-wrap items-baseline gap-1 font-semibold text-(--neba-fg) tabular-nums",u[r]].join(" "),children:[i(w)?e("span",{className:`font-medium text-(--neba-muted-fg) ${d[r]}`,children:w}):null,e("span",{className:"min-w-0 break-words",children:S}),i(N)?e("span",{className:`font-medium text-(--neba-muted-fg) ${d[r]}`,children:N}):null]}),E?t("div",{className:`flex min-w-0 flex-wrap items-center gap-x-2 ${x[r]}`,children:[null!==A&&null!==q?e(a,{size:r,variant:"text",color:D,startIcon:p[q],className:"tabular-nums",children:A}):null,i(M)?e("span",{className:`min-w-0 text-(--neba-muted-fg) ${o[r]}`,children:M}):null]}):null,k]})});
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as l from"react";import{Box as n}from"../box/Box";import{Chip as a}from"../chip/Chip";import{MinusIcon as r,TrendDownIcon as s,TrendUpIcon as m}from"../../internal/icons";import{numberFormatter as i}from"../../internal/format";import{hasContent as o,metaTextClasses as c,sheetSectionGapClasses as u}from"../../internal/styles";const d={xs:"text-[1.125rem]/[1.375rem]",sm:"text-[1.375rem]/[1.625rem]",md:"text-[1.75rem]/[2rem]",lg:"text-[2.25rem]/[2.5rem]",xl:"text-[2.875rem]/[3.25rem]"},x={xs:"text-[0.75rem]",sm:"text-[0.875rem]",md:"text-[1rem]",lg:"text-[1.25rem]",xl:"text-[1.5rem]"},f={xs:"gap-y-0.5",sm:"gap-y-0.5",md:"gap-y-1",lg:"gap-y-1",xl:"gap-y-1.5"},p={start:"items-start text-start",center:"items-center text-center",end:"items-end text-end"},h={up:e(m,{}),down:e(s,{}),flat:e(r,{})};export const Statistic=l.forwardRef(function({size:l="md",color:r="primary",density:s="default",label:m,value:b,format:g,locale:w,prefix:N,unit:y,icon:$,previousValue:v,delta:j="percent",betterWhen:z="up",caption:B,align:M="start",className:k,children:C,...F},I){const R="number"==typeof b?b:null,S=null===R?b:i(w,g).format(R),V=null!==R&&void 0!==v?R-v:null,W=null!==V&&0!==v&&void 0!==v?V/Math.abs(v):null,q=null===V?null:V>0?"up":V<0?"down":"flat";let A=null;if(null!==V&&null!==q&&"none"!==j){const e=V>0?"+":V<0?"-":"",t=`${e}${i(w,g).format(Math.abs(V))}`,l=null===W?null:`${e}${(100*Math.abs(W)).toFixed(1).replace(/\.0$/,"")}%`;A="absolute"===j?t:"both"===j?[l,t].filter(Boolean).join(" · "):l??t}const D=null===q||"flat"===q?"secondary":q===z?"success":"danger",E=null!==A||o(B);return t(n,{ref:I,size:l,color:r,density:s,className:["flex flex-col",u[l],p[M],k??""].filter(Boolean).join(" "),...F,children:[o(m)||o($)?t("div",{className:["flex min-w-0 items-center gap-1.5 font-medium text-(--neba-muted-fg)",c[l]].join(" "),children:[o($)?e("span",{className:"flex shrink-0 items-center",children:$}):null,o(m)?e("span",{className:"min-w-0 truncate",children:m}):null]}):null,t("div",{className:["flex min-w-0 flex-wrap items-baseline gap-1 font-semibold text-(--neba-fg) tabular-nums",d[l]].join(" "),children:[o(N)?e("span",{className:`font-medium text-(--neba-muted-fg) ${x[l]}`,children:N}):null,e("span",{className:"min-w-0 break-words",children:S}),o(y)?e("span",{className:`font-medium text-(--neba-muted-fg) ${x[l]}`,children:y}):null]}),E?t("div",{className:`flex min-w-0 flex-wrap items-center gap-x-2 ${f[l]}`,children:[null!==A&&null!==q?e(a,{size:l,variant:"text",color:D,startIcon:h[q],className:"tabular-nums",children:A}):null,o(B)?e("span",{className:`min-w-0 text-(--neba-muted-fg) ${c[l]}`,children:B}):null]}):null,C]})});

package/dist/components/table/Table.d.ts

@@ -50,7 +50,18 @@ export interface TableProps<Row> extends Omit<BoxProps, 'padded' | 'children' |
     getRowKey?: (row: Row, index: number) => React.Key;
     /** Shown above the table, and read out as its accessible name. */
     caption?: React.ReactNode;
-    /** What to show instead of rows when `items` is empty. */
+    /**
+     * Which language the empty state is written in — a BCP 47 tag such as `ko`,
+     * `pt-BR` or `zh-Hant`. Unsupported tags fall back to English.
+     *
+     * `empty` writes the line out instead; this is for the far more common case
+     * where the page already knows its own language.
+     */
+    locale?: string;
+    /**
+     * What to show instead of rows when `items` is empty. Defaults to the
+     * `locale`'s wording for a table with nothing in it.
+     */
     empty?: React.ReactNode;
     /**
      * Tints every other row. Useful for a wide table where the eye has to track
@@ -77,4 +88,4 @@ export interface TableProps<Row> extends Omit<BoxProps, 'padded' | 'children' |
  * might sit next to. What Table adds is the part that is genuinely tabular: the
  * columns, the rows, and the fact that the two cannot drift apart.
  */
-export declare function Table<Row>({ headers, items, getRowKey, caption, empty, striped, hoverable, stickyHeader, onRowClick, size, density, className, ...boxProps }: TableProps<Row>): React.JSX.Element;
+export declare function Table<Row>({ headers, items, getRowKey, caption, locale, empty, striped, hoverable, stickyHeader, onRowClick, size, density, className, ...boxProps }: TableProps<Row>): React.JSX.Element;

package/dist/components/table/Table.js

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/components/toast/Toast.js

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

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

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

package/dist/components/tooltip/Tooltip.js

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