plass-ui 1.7.0 → 1.8.1

package/dist/internal/chart-frame.d.ts

@@ -20,7 +20,7 @@ import { type PlBoxProps } from '../components/box/PlBox.js';
 import { type BandScale, type ChartValue, type PlotBox, type ValueScale } from './chart.js';
 import type { PlassChartAxis, PlassChartCategory, PlassChartLegend, PlassChartReference, PlassChartSeries, PlassChartTooltip, PlassSize } from '../types.js';
 /**
- * How wide the chart actually is, in pixels.
+ * How big the chart actually is, in pixels.
  *
  * An SVG cannot lay a chart out from a percentage: every tick position, every
  * bar width and the decision about how many category labels fit are arithmetic
@@ -32,8 +32,32 @@ import type { PlassChartAxis, PlassChartCategory, PlassChartLegend, PlassChartRe
  * it on a server-rendered page is a box of the right height with nothing in it,
  * which is why the height is a prop and not something measured too: a reserve
  * that is dropped when the content arrives is the same jump twice.
+ *
+ * The height is measured as well, for the one case where the prop does not
+ * say it in pixels. A `height` given as a CSS length is laid out by the
+ * stylesheet, so the box is already that tall in the server's HTML, and the
+ * drawing is laid out at whatever the box comes to. `height` is `null` until
+ * the box has been measured.
+ *
+ * `initialWidth` is the caller's width for the time before there is one. The
+ * server's render and the render that hydrates its HTML both lay the chart out
+ * at it, so the two agree, and the layout effect after hydration replaces it
+ * with the measurement. `guessed` says the width is still the caller's: a chart
+ * cuts its drawing at the edge of its box while it is, because a guess wider
+ * than the box would otherwise spill across the page until the script runs.
  */
-declare function useMeasuredWidth(ref: React.RefObject<HTMLElement | null>): number;
+declare function useMeasuredSize(ref: React.RefObject<HTMLElement | null>, initialWidth?: number): {
+    width: number;
+    height: number | null;
+    guessed: boolean;
+};
+/**
+ * The height a chart is drawn at when it is known before the box is measured:
+ * the number it was given, or the `size` ladder's when it was given none.
+ * `null` for a CSS length, which the box is laid out at and the drawing then
+ * measures.
+ */
+declare function givenHeight(height: number | string | undefined, ladder: number): number | null;
 /**
  * What every chart takes, and the reason it is one interface: a dashboard is
  * built by copying a tile and changing the component in it, and that only works
@@ -83,14 +107,37 @@ declare function useMeasuredWidth(ref: React.RefObject<HTMLElement | null>): num
  */
 export declare const markTransitionClasses: string;
 export interface ChartBaseProps extends Omit<PlBoxProps, 'children' | 'title'> {
+    /** @default 'ghost' */
+    variant?: PlBoxProps['variant'];
     /**
      * How tall the drawing is. A number is pixels; a string is any CSS length.
      * Defaults to the `size` ladder.
      *
+     * A string sets the box's height and the drawing is laid out at the height
+     * the box is measured at, so on a server, and until the script has run, the
+     * box is that tall with nothing drawn in it. A percentage needs a parent
+     * whose height is known, as it does anywhere in CSS.
+     *
      * The axis labels are drawn *inside* this, not under it, so a card sized to
      * the chart is a card the chart fits in.
      */
     height?: number | string;
+    /**
+     * The width to draw at until the box has been measured, in pixels.
+     *
+     * A chart is laid out from the width its box is measured at, and a server
+     * has no box to measure: without this, the HTML it sends holds an empty box
+     * of the right height and the plot arrives with the script. Given the width
+     * the chart usually has, the server and the render that hydrates its HTML
+     * draw the whole chart at it, and the measured width takes over before the
+     * hydrated page is painted. Until then a drawing wider than its box is cut
+     * at the box's edge. A `height` given as a CSS length is not known until the
+     * box is measured either, so with one the server draws the box alone.
+     *
+     * A page rendered only in the browser measures the box before its first
+     * paint, so it never shows this width.
+     */
+    initialWidth?: number;
     /**
      * How the numbers are written, everywhere they appear — the axis, the
      * tooltip, the labels on the marks. `Intl.NumberFormat` options, the same
@@ -105,6 +152,12 @@ export interface ChartBaseProps extends Omit<PlBoxProps, 'children' | 'title'> {
     /**
      * The chart's accessible name — what it is a chart *of*. Read out in place of
      * the drawing, and used as the caption of the table underneath it.
+     *
+     * It is not text anybody sees, so an `aria-label` names the drawing in its
+     * place, as one names a control in its visible label's, and an
+     * `aria-labelledby` outranks both. The table is named by whichever of the
+     * three names the drawing: a reference points it at the same element, and
+     * words are its caption.
      */
     label?: string;
     /**
@@ -301,9 +354,26 @@ declare function ChartStatus({ heading, items }: {
     heading?: React.ReactNode;
     items: readonly ChartTooltipItem[];
 }): React.JSX.Element;
-interface DataTableProps {
-    id: string;
+/** What the table under a chart is called. See `chartTableName`. */
+interface ChartTableName {
+    /** The words it is captioned with: an `aria-label`, else `label`. */
     caption?: string;
+    /** A caller's `aria-labelledby`, which names it in place of a caption. */
+    labelledBy?: string;
+}
+/**
+ * What the table under a chart is called, by the precedence its picture is
+ * called by: a caller's `aria-labelledby`, then an `aria-label` in `label`'s
+ * place, then `label`.
+ *
+ * A reference names the table by the same element it names the picture by,
+ * and leaves it no caption, whose words would be read inside the table as a
+ * name nobody gave it. Words are its caption, as `label` always was. With
+ * none of the three the table has no name, as before.
+ */
+declare function chartTableName({ label, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy }: Pick<ChartBaseProps, 'label' | 'aria-label' | 'aria-labelledby'>): ChartTableName;
+interface DataTableProps extends ChartTableName {
+    id: string;
     corner?: React.ReactNode;
     categories: readonly PlassChartCategory[];
     series: readonly PlassChartSeries[];
@@ -311,7 +381,24 @@ interface DataTableProps {
     format: (value: number) => string;
     locale?: string;
 }
-declare const ChartDataTable: React.MemoExoticComponent<({ id, caption, corner, categories, series, values, format, locale }: DataTableProps) => React.JSX.Element>;
+/**
+ * The chart, as a table, for the readers a drawing does not reach.
+ *
+ * Not an option and not a toggle. A tooltip that is the only way to a number
+ * gates that number behind a pointer, and an SVG with an `aria-label` on it
+ * says "revenue by month" and then says nothing else at all. This is the same
+ * data in the one form every assistive technology already reads, so the picture
+ * is free to be a picture.
+ *
+ * It is clipped rather than `display: none`, for the reason `srOnlyClasses`
+ * gives: the second one takes it off the accessibility tree along with the
+ * screen, which would leave the chart exactly as mute as before.
+ *
+ * Memoised, because it is a row for every category and none of it changes when
+ * the pointer or a key moves the active column, which re-renders the chart
+ * around it every time.
+ */
+declare const ChartDataTable: React.MemoExoticComponent<({ id, caption, labelledBy, corner, categories, series, values, format, locale }: DataTableProps) => React.JSX.Element>;
 interface SurfaceProps extends Omit<PlBoxProps, 'children'> {
     legend: React.ReactNode;
     legendSide: NonNullable<PlassChartLegend['side']>;
@@ -402,6 +489,11 @@ export interface CartesianLayout {
     categoryValuePx: (value: number) => number;
     /** Where the baseline is along the value axis. */
     zeroPx: number;
+    /**
+     * How tall the drawing is, in pixels: the `height` asked for, or the height
+     * the box was measured at when that was a CSS length.
+     */
+    height: number;
     categories: readonly PlassChartCategory[];
     format: (value: number) => string;
     size: PlassSize;
@@ -417,6 +509,15 @@ export interface CartesianContext extends CartesianLayout {
     /** The one the pointer is on, or the one the arrow keys walked to. */
     activeMark: ChartMark | null;
 }
+/**
+ * One line of the summary a screen reader is handed: a series and its end, or
+ * a timeline's row and the stretch of time it covers.
+ */
+interface ChartSummaryEntry {
+    name: string;
+    /** What the series ended on, or `null` for a series that is all gaps. */
+    said: React.ReactNode | null;
+}
 interface CartesianProps extends CartesianChartProps {
     /**
      * Makes the category axis a second value axis instead of a row of columns.
@@ -437,8 +538,25 @@ interface CartesianProps extends CartesianChartProps {
      * @default 24
      */
     markRadius?: number;
-    /** The table under the chart, for a chart whose data is not a grid. */
-    table?: (id: string) => React.ReactNode;
+    /**
+     * The table under the chart, for a chart whose data is not a grid. Handed
+     * the id it is referred to by and what it is called.
+     */
+    table?: (id: string, name: ChartTableName) => React.ReactNode;
+    /**
+     * What a screen reader is handed in place of the drawing, for a chart whose
+     * series are not what it is about. A timeline hands the frame one stand-in
+     * series for its rows, and "each series and where it ended" would read that
+     * series out as a number nobody wrote. The reference lines still follow it.
+     */
+    summary?: readonly ChartSummaryEntry[];
+    /**
+     * How a value on the value axis is written wherever the frame writes one
+     * itself, in place of `format`: a reference line in the description, for
+     * one. A timeline's value axis is a calendar, and an instant written as a
+     * number is a count of milliseconds nobody reads.
+     */
+    writeValue?: (value: number) => string;
     /** The legend's swatch, for a chart whose marks are not all the same shape. */
     swatch?: (index: number, color: string) => React.ReactNode;
     /**
@@ -507,8 +625,11 @@ interface CartesianProps extends CartesianChartProps {
      * A line's marker gets away with it because a line is inset from both ends
      * anyway; a scatter places a mark wherever the number says, including exactly
      * on the corner.
+     *
+     * A function is handed the height the chart is drawn at, for a reserve that
+     * is a share of it.
      */
-    markInset?: number;
+    markInset?: number | ((height: number) => number);
     /** Draws the marks. */
     children: (context: CartesianContext) => React.ReactNode;
 }
@@ -520,6 +641,6 @@ interface CartesianProps extends CartesianChartProps {
  * function's business, and they are handed pixels rather than values so a
  * component never has to know which way round the axes are.
  */
-export declare function CartesianChart({ series, categories, xAxis, yAxis, reference, horizontal, stacked, includeZero, bandRatio, inset, headroom, markInset, xScale, marks, markRadius, table, swatch, stroked, scale: givenScale, markTooltip, height, format, locale: localeProp, label, legend, tooltip, empty, size: sizeProp, variant, padded, className, children, ...box }: CartesianProps): React.JSX.Element;
-export { ChartDataTable, ChartLegendBar, ChartScaleLegend, ChartStatus, ChartSurface, ChartTooltipPanel, entryKeys, useMeasuredWidth, useVisibility };
-export type { Visibility };
+export declare function CartesianChart({ series, categories, xAxis, yAxis, reference, horizontal, stacked, includeZero, bandRatio, inset, headroom, markInset: markInsetProp, xScale, marks, markRadius, table, summary: givenSummary, writeValue, swatch, stroked, scale: givenScale, markTooltip, height, initialWidth, format, locale: localeProp, label, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, legend, tooltip, empty, size: sizeProp, variant, padded, className, children, ...box }: CartesianProps): React.JSX.Element;
+export { ChartDataTable, ChartLegendBar, ChartScaleLegend, ChartStatus, ChartSurface, ChartTooltipPanel, chartTableName, entryKeys, givenHeight, useMeasuredSize, useVisibility };
+export type { ChartSummaryEntry, ChartTableName, Visibility };

package/dist/internal/chart-frame.js

@@ -1 +1 @@
-"use client";import{jsx as e,Fragment as t,jsxs as l}from"react/jsx-runtime";import*as a from"react";import{PlBox as n}from"../components/box/PlBox.js";import{bandScale as i,categoryAt as s,categoryCount as r,categoriesAreDates as o,categoryExtent as c,chartFontSizes as d,compactNumber as u,extentOf as h,fitCategoryLabels as m,fitsLast as p,formatCategory as f,formatTimeTicks as x,lineDash as g,lineWidths as v,logScale as y,markerRadii as k,plotHeights as b,resolveColor as w,seriesColor as M,autoTickAngle as C,showsTick as N,textWidth as z,tickAngleOf as S,tickStride as A,tiltedDepth as P,tiltedPitch as $,tiltedRoom as j,tiltedStep as B,toValues as W,truncate as _,timeScale as T,valueScale as I,writeChartValue as D}from"./chart.js";import{useDefaults as E}from"./defaults.js";import{usePlElementSize as K}from"../hooks/usePlElementSize.js";import{useLabels as F}from"./labels.js";import{textOf as L}from"./text.js";import{cx as R,glassClasses as V,hasContent as H,metaTextClasses as X,srOnlyClasses as Y,transitionClasses as Z}from"./styles.js";const O=[];function useMeasuredWidth(e){return K(e)?.width??0}export const markTransitionClasses=/* @__PURE__ */["[transition:opacity_var(--plass-duration)_var(--plass-ease),r_var(--plass-duration)_var(--plass-ease),scale_var(--plass-duration)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]"].join(" ");function entryKeys(e){const t=new Map,l=new Map;return e.map((e,a)=>{const n=e.id??null;if(null!==n){const e=l.get(n)??0;return l.set(n,e+1),`${n}#${e}@id`}const i=e.name??null;if(null===i)return String(a);const s=t.get(i)??0;return t.set(i,s+1),`${i}#${s}`})}function useVisibility(e,t){const l=entryKeys(e),[n,i]=a.useState(()=>{const t=new Set;return e.forEach((e,a)=>{e.hidden&&t.add(l[a])}),t});[...n].some(e=>!l.includes(e))&&i(new Set([...n].filter(e=>l.includes(e))));const[s,r]=a.useState(null),o=null!==s&&t?l.indexOf(s):-1;return null!==s&&-1===o&&r(null),{keys:l,visible:l.map(e=>!n.has(e)),hovered:-1===o?null:o,toggle:e=>{const t=l[e];void 0!==t&&i(e=>{const l=new Set(e);return l.has(t)?l.delete(t):l.add(t),l})},setHovered:e=>r(null===e?null:l[e]??null)}}const U={top:"flex-col-reverse",bottom:"flex-col",left:"flex-row-reverse rtl:flex-row",right:"flex-row rtl:flex-row-reverse"},q={start:"justify-start",center:"justify-center",end:"justify-end"};function DashedRule({ink:t,size:l}){const a=v[l],n=16+a;return e("svg",{"aria-hidden":"true",width:n,height:10,viewBox:`0 0 ${n} 10`,className:"block shrink-0",children:e("line",{x1:a/2,x2:n-a/2,y1:5,y2:5,stroke:t,strokeWidth:a,strokeDasharray:g,strokeLinecap:"round"})})}function ChartLegendBar({series:n,colors:i,options:s,visibility:r,size:o,values:c,swatch:d,dashed:u}){const h=!1!==s.interactive,m="left"===s.side||"right"===s.side,p=F(),[f,x]=a.useState(!1),g=s.maxEntries,v=void 0!==g&&g>0&&n.length>g&&!f,y=v?n.slice(0,g):n,k=n.length-y.length,b=entryKeys(n);return l("ul",{className:R("m-0 flex list-none flex-wrap items-center gap-x-3 gap-y-1 p-0",m?"min-w-0 flex-col items-start":"",q[s.align??"center"],X[o]),children:[y.map((a,n)=>{const s=r.visible[n],m=null!==r.hovered&&r.hovered!==n,p=a.name??`${n+1}`,f=i[n],x=s?m?"opacity-55":"":"opacity-40",g=l(t,{children:[d?e("span",{"aria-hidden":"true",className:"flex size-2.5 shrink-0 items-center justify-center",children:d(n,f)}):u?.[n]?e(DashedRule,{ink:f,size:o}):e("span",{"aria-hidden":"true",className:`size-2.5 shrink-0 rounded-[0.1875rem] ${Z}`,style:{backgroundColor:f}}),e("span",{className:"min-w-0 truncate",children:p}),c?.[n]?e("span",{className:"shrink-0 tabular-nums text-(--plass-muted-fg)",children:c[n]}):null]});return e("li",{className:"min-w-0",children:h?e("button",{type:"button","aria-pressed":s,onClick:()=>r.toggle(n),onPointerEnter:()=>r.setHovered(n),onPointerLeave:()=>r.setHovered(null),onFocus:()=>r.setHovered(n),onBlur:()=>r.setHovered(null),className:R("flex min-w-0 cursor-pointer items-center gap-1.5 rounded-(--plass-radius-xs)","px-1 py-0.5 text-(--plass-fg)","[transition-property:background-color,color,opacity]","[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]","motion-reduce:[transition-duration:0ms]","hover:bg-(--p-soft)","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:outline-offset-1",s?"":"line-through",x),children:g}):e("span",{className:R("flex min-w-0 items-center gap-1.5 px-1 py-0.5 text-(--plass-fg)",s?"":"line-through",x),children:g})},b[n])}),v||f?e("li",{className:"min-w-0",children:e("button",{type:"button","aria-expanded":f,onClick:()=>x(e=>!e),className:R("flex cursor-pointer items-center rounded-(--plass-radius-xs)","px-1 py-0.5 font-medium text-(--plass-muted-fg)","[transition-property:background-color,color]","[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]","motion-reduce:[transition-duration:0ms]","hover:bg-(--p-soft) hover:text-(--plass-fg)","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:outline-offset-1"),children:f?p.chartFewer:p.chartMore(k)})}):null]})}function ChartScaleLegend({steps:a,from:n,to:i,middle:s,align:r,vertical:o,size:c}){return e("div",{className:R("flex",o?"":q[r]),children:l("div",{className:R("grid grid-cols-[auto_auto_auto] items-center gap-x-2",X[c]),children:[e("span",{className:"shrink-0 tabular-nums text-(--plass-muted-fg)",children:n}),e("span",{"aria-hidden":"true",className:R("flex h-2.5 overflow-hidden rounded-[0.1875rem]",o?"w-20":"w-24"),children:a.map(t=>e("span",{className:"h-full flex-1",style:{backgroundColor:t}},t))}),e("span",{className:"shrink-0 tabular-nums text-(--plass-muted-fg)",children:i}),s?l(t,{children:[e("span",{}),e("span",{className:"text-center tabular-nums text-(--plass-muted-fg)",children:s}),e("span",{})]}):null]})})}function itemText(e){const a=e.label??e.formatted;return void 0===e.aside?a:l(t,{children:[a," (",e.aside,")"]})}function ChartTooltipPanel({heading:t,items:a,x:n,y:i,flip:s,size:r}){return l("div",{"data-plass-tooltip":"",className:R("pointer-events-none absolute z-10 max-w-56 min-w-24","rounded-(--plass-radius-sm) border p-2",V,"bg-(--plass-glass-press) [border-color:var(--plass-glass-line)]","[box-shadow:var(--plass-shadow-3),var(--plass-gloss-glass)]",X[r]),style:s?{right:`calc(100% - ${n}px + 10px)`,top:i}:{left:n+10,top:i},children:[e("div",{className:"mb-1 font-medium text-(--plass-fg)",children:t}),e("ul",{className:"m-0 flex list-none flex-col gap-0.5 p-0",children:a.map(t=>l("li",{className:"flex items-center gap-1.5",children:[e("span",{"aria-hidden":"true",className:"size-2 shrink-0 rounded-[0.125rem]",style:{backgroundColor:t.color}}),t.name?e("span",{className:"min-w-0 flex-1 truncate text-(--plass-muted-fg)",children:t.name}):null,e("span",{className:"ms-auto shrink-0 font-medium tabular-nums text-(--plass-fg)",children:itemText(t)})]},t.seriesIndex))})]})}function ChartStatus({heading:n,items:i}){return e("span",{role:"status","aria-live":"polite",className:Y,children:0===i.length?null:l(t,{children:[H(n)?l(t,{children:[n,", "]}):null,i.map((e,t)=>l(a.Fragment,{children:[t>0?", ":null,e.name?`${e.name}: `:null,itemText(e)]},e.seriesIndex))]})})}const G=/* @__PURE__ */a.memo(function ChartDataTable({id:t,caption:a,corner:n,categories:i,series:s,values:r,format:o,locale:c}){const d=entryKeys(s);return l("table",{id:t,className:Y,children:[a?e("caption",{children:a}):null,e("thead",{children:l("tr",{children:[e("th",{scope:"col",children:n??""}),s.map((t,l)=>e("th",{scope:"col",children:t.name??l+1},d[l]))]})}),e("tbody",{children:i.map((t,a)=>l("tr",{children:[e("th",{scope:"row",children:f(t,c)}),d.map((t,l)=>{const n=r[l]?.[a];return e("td",void 0!==n?.label?{children:n.label}:{children:null==n?.value?"":o(n.value)},t)})]},a))})]})});function ChartSurface({legend:t,legendSide:a,children:i,table:s,className:r,...o}){return l(n,{...o,className:R("relative flex gap-3",U[a],r??void 0),children:[e("div",{className:"relative min-w-0 flex-1",children:i}),t,s]})}function markKey(e,t){return`${e.key??t[e.series]??e.series}:${e.index}`}export function CartesianChart({series:n,categories:p,xAxis:g,yAxis:v,reference:w,horizontal:N=!1,stacked:A=!1,includeZero:$=!0,bandRatio:K=1,inset:V=!1,headroom:H=0,markInset:Z=0,xScale:U="band",marks:q,markRadius:J=24,table:Q,swatch:ee,stroked:te=!1,scale:le,markTooltip:ae,height:ne,format:ie,locale:se,label:re,legend:oe,tooltip:ce,empty:de,size:ue,variant:he="ghost",padded:me=!1,className:pe,children:fe,...xe}){const ge=E(),ve=ue??ge.size??"md",ye=se??ge.locale,ke=a.useRef(null),be=useMeasuredWidth(ke),we=F(),Me=a.useId(),Ce=a.useId(),Ne=a.useId(),ze=!1===oe?{interactive:!1}:!0===oe||void 0===oe?{}:oe,Se=!0===oe||!1!==oe&&n.length>1,Ae=ze.side??"bottom",Pe=useVisibility(n,Se&&!1!==ze.interactive),[$e,je]=a.useState(null),[Be,We]=a.useState(null),[_e,Te]=a.useState(null),Ie=a.useCallback(e=>D(e,ie,ye),[ie,ye]),De=a.useMemo(()=>W(n),[n]),Ee=a.useMemo(()=>n.map((e,t)=>M(e,t)),[n]),Ke=a.useMemo(()=>n.map(e=>!0===e.dashed),[n]),Fe=r(n),Le=a.useMemo(()=>Array.from({length:Fe},(e,t)=>s(t,p,De)),[Fe,p,De]),Re=De.filter((e,t)=>Pe.visible[t]),Ve=h(Re,A),He=a.useMemo(()=>n.flatMap((e,t)=>{if(!Pe.visible[t])return[];const l=[...De[t]??[]].reverse().find(e=>null!==e.value),a=e.name??`${t+1}`;return void 0===l?[{name:a,said:null}]:[{name:a,said:l.label??Ie(l.value)}]}),[n,De,Pe.visible,Ie]),Xe="number"==typeof ne?ne:void 0===ne?b[ve]:null,Ye=d[ve],Ze=v,Oe=g,Ue=a.useMemo(()=>void 0===w?[]:Array.isArray(w)?w:[w],[w]),qe=le??("log"===Ze?.scale?y(Ve,{min:Ze.min,max:Ze.max,tickCount:Ze.tickCount}):I(Ve,{min:Ze?.min,max:Ze?.max,tickCount:Ze?.tickCount,includeZero:$})),Ge="value"===U?c(Re,p):null,Je="value"===U&&o(De,p),Qe="value"!==U?null:Je?T(Ge,{min:Oe?.min,max:Oe?.max,tickCount:Oe?.tickCount}):"log"===Oe?.scale?y(Ge,{min:Oe.min,max:Oe.max,tickCount:Oe.tickCount}):I(Ge,{min:Oe?.min,max:Oe?.max,tickCount:Oe?.tickCount,includeZero:!1}),et=Qe&&"unit"in Qe?x(Qe.ticks,Qe.unit,ye):null,tt=qe.ticks.map((e,t)=>Ze?.tickFormat?L(Ze.tickFormat(e,t)):Ie(e)),lt=Oe?.tickFormat,at=a.useMemo(()=>Le.map((e,t)=>lt?L(lt(e,t)):f(e,ye)),[Le,lt,ye]),nt=Qe?Qe.ticks.map((e,t)=>lt?L(lt(Je?new Date(e):e,t)):et?.[t]??u(e,ye)):at,it=tt.reduce((e,t)=>Math.max(e,z(t,Ye)),0),st=Ye+6,rt=Ze?.hidden?0:it+10+(Ze?.label?st:0),ot=(be-(N?0:rt)-16)/Math.max(1,Fe),ct=Xe??0,dt=null!==Qe,ut=Oe?.tickAngle,ht=N?0:"auto"===ut?dt?0:C(nt,{slot:ot,fontSize:Ye}):S(ut),mt=0!==ht&&!Oe?.hidden,pt=Math.max(3*Ye,.4*ct),ft=a.useMemo(()=>mt?nt.map(e=>_(e,j(pt,ht,Ye),Ye)):m(nt,{horizontal:N,slot:ot,fontSize:Ye,ticks:dt}),[nt,mt,pt,ht,N,ot,Ye,dt]),xt=a.useMemo(()=>ft.reduce((e,t)=>Math.max(e,z(t,Ye)),0),[ft,Ye]),gt=mt?B(xt,ht,Ye)+4:0,vt=N?Oe?.hidden?0:xt+10+(Oe?.label?st:0):rt,yt=N?Ze?.hidden?0:Ye+12+(Ze?.label?st:0):Oe?.hidden?0:(mt?P(xt,ht,Ye)+14:Ye+12)+(Oe?.label?st:0),kt=Math.max((N?Oe:Ze)?.thickness??vt,mt&&ht<0?gt:0),bt=(N?Ze:Oe)?.thickness??yt,wt=(N?12:mt?ht>0?gt:12:Qe?12:Math.max(8,ft.length?xt/2:8))+Z,Mt=k[ve]+4+H+Z,Ct={left:kt+Z,top:Mt,width:Math.max(0,be-kt-Z-wt),height:Math.max(0,ct-Mt-bt-Z)},Nt=N?Ct.height:Ct.width,zt=i(V?Math.max(1,Fe-1):Fe,Nt,K),St=a.useCallback(e=>V?Fe<=1?Nt/2:Nt*e/(Fe-1):zt.centre(e),[V,Fe,Nt,zt]),At=a.useCallback(e=>N?Ct.left+qe.fraction(e)*Ct.width:Ct.top+(1-qe.fraction(e))*Ct.height,[N,Ct.left,Ct.top,Ct.width,Ct.height,qe]),Pt=a.useCallback((e,t)=>N?{x:At(t),y:Ct.top+St(e)}:{x:Ct.left+St(e),y:At(t)},[N,At,St,Ct.left,Ct.top]),$t=a.useCallback(e=>N?Ct.top+(1-(Qe?.fraction(e)??0))*Ct.height:Ct.left+(Qe?.fraction(e)??0)*Ct.width,[N,Ct.left,Ct.top,Ct.width,Ct.height,Qe]),jt=At(Math.min(Math.max(0,qe.min),qe.max)),Bt={plot:Ct,values:De,visible:Pe.visible,colors:Ee,dashed:Ke,scale:qe,band:zt,horizontal:N,valuePx:At,categoryPx:St,point:Pt,categoryScale:Qe,categoryValuePx:$t,zeroPx:jt,categories:Le,format:Ie,size:ve},Wt=!1===ce?{mode:"none"}:!0===ce||void 0===ce?{}:ce,_t=Wt.mode??(q?"item":"index"),Tt=q??("nearest"===_t?e=>function gridMarks(e,t){const l=[],a=k[e.size],n=[];return e.values.forEach((i,s)=>{const r=i.map((e,t)=>n[t]??0);t&&e.visible[s]&&i.forEach((e,t)=>{n[t]=(n[t]??0)+(e.value??0)}),e.visible[s]&&i.forEach((n,i)=>{if(null===n.value)return;const o=e.point(i,t?r[i]+n.value:n.value);l.push({series:s,index:i,x:o.x,y:o.y,r:a})})}),l}(e,A):void 0),It=Tt?Tt(Bt):O,Dt=null===Be?-1:It.findIndex(e=>markKey(e,Pe.keys)===Be),Et=-1===Dt?null:It[Dt],Kt=Tt?Et?Et.index:null:$e,Ft=Tt?It.length:Fe,clearActive=()=>{je(null),We(null),Te(null)};(null!==$e&&$e>=Fe||null!==Be&&!Et)&&clearActive();const goTo=e=>{const t=null===e?null:Math.min(Ft-1,Math.max(0,e));if(Te(null),Tt){const e=null===t?void 0:It[t];We(e?markKey(e,Pe.keys):null)}else je(t)},step=e=>{goTo(((Tt?-1===Dt?null:Dt:$e)??(e>0?-1:Ft))+e)},Lt=null===Kt?[]:n.flatMap((e,t)=>{if(!Pe.visible[t]||Et&&Et.series!==t)return[];const l=De[t]?.[Kt];return l&&null!==l.value?[{seriesIndex:t,name:e.name,color:l.color??Ee[t],value:l.value,formatted:Ie(l.value),label:l.label}]:[]}),Rt=Et&&ae?ae(Et):null,Vt=Rt?Rt.items:"item"===_t&&Lt.length>1&&null!==_e?[Lt.reduce((e,t)=>Math.abs(At(t.value??0)-_e)<Math.abs(At(e.value??0)-_e)?t:e)]:Lt,Ht=Et?De[Et.series]?.[Et.index]?.x??p?.[Et.index]??Et.index:void 0,Xt=Et?Et.x:N?At(Vt[0]?.value??0):Ct.left+St(Kt??0),Yt=Et?Et.y:N?Ct.top+St(Kt??0):Ct.top,Zt=Et?(Et.x-Ct.left)/Math.max(1,Ct.width)>.6:(N?qe.fraction(Vt[0]?.value??0):St(Kt??0)/Math.max(1,Nt))>.6,Ot={...Bt,hovered:Pe.hovered,activeIndex:Kt,marks:It,activeMark:Et},Ut=0===Fe||null===Ve||"value"===U&&null===Ge;return l(ChartSurface,{...xe,size:ve,variant:he,padded:me,className:pe,legendSide:Ae,legend:Se?e(ChartLegendBar,{series:n,colors:Ee,options:ze,visibility:Pe,size:ve,swatch:ee,dashed:te?Ke:void 0,values:ze.showValue&&null!==Kt?n.map((e,t)=>{const l=De[t]?.[Kt]?.value;return null==l?void 0:Ie(l)}):void 0}):null,table:Ut?null:Q?.(Me)??e(G,{id:Me,caption:re,corner:Oe?.label,categories:Le,series:n,values:De,format:Ie,locale:ye}),children:[l("div",{ref:ke,role:"img",tabIndex:Ut?void 0:0,"aria-label":re??we.chart,"aria-describedby":Ut?Ne:Ce,onPointerMove:e=>{if("none"!==_t){if(Tt){const t=((e,t)=>{const l=ke.current;if(!l||0===It.length)return null;const a=l.getBoundingClientRect(),n=e-a.left,i=t-a.top;let s=null,r=1/0,o=1/0;return It.forEach((e,t)=>{const l=Math.hypot(e.x-n,e.y-i),a=void 0===e.rx?Math.max(0,l-e.r):Math.hypot(Math.max(0,Math.abs(e.x-n)-e.rx),Math.max(0,Math.abs(e.y-i)-(e.ry??e.rx)));a<=J&&(a<r||a===r&&l<o)&&(r=a,o=l,s=t)}),s})(e.clientX,e.clientY);We(null===t?null:markKey(It[t],Pe.keys))}else je(((e,t)=>{const l=ke.current;if(!l||0===Fe)return null;const a=l.getBoundingClientRect(),n=N?t-a.top-Ct.top:e-a.left-Ct.left;if(n<-zt.step||n>Nt+zt.step)return null;const i=V?Fe<=1?0:Math.round(n/Nt*(Fe-1)):Math.floor(n/zt.step);return Math.min(Fe-1,Math.max(0,i))})(e.clientX,e.clientY));"item"!==_t||Tt||Te(((e,t)=>{const l=ke.current;if(!l)return null;const a=l.getBoundingClientRect();return N?e-a.left:t-a.top})(e.clientX,e.clientY))}},onPointerLeave:clearActive,onKeyDown:"none"===_t?void 0:e=>{const t=N?"ArrowDown":"ArrowRight",l=N?"ArrowUp":"ArrowLeft";if(e.key===t)step(1);else if(e.key===l)step(-1);else if("Home"===e.key)goTo(0);else if("End"===e.key)goTo(Ft-1);else{if("Escape"!==e.key||null===$e&&null===Be)return;clearActive(),e.stopPropagation()}e.preventDefault()},onBlur:clearActive,className:R("relative w-full","rounded-(--plass-radius-xs)","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:outline-offset-2"),style:{height:Xe??ne},children:[Ut?e("div",{id:Ne,className:R("flex h-full items-center justify-center text-(--plass-muted-fg)",X[ve]),children:de??we.empty}):be>0?l("svg",{width:be,height:ct||"100%",viewBox:`0 0 ${be} ${ct}`,"aria-hidden":"true",className:"block overflow-visible",children:[e(ChartAxes,{plot:Ct,scale:qe,band:zt,horizontal:N,inset:V,categoryPx:St,valuePx:At,tickTexts:tt,categoryTexts:ft,categoryScale:Qe,categoryValuePx:$t,valueAxis:Ze,categoryAxis:Oe,references:Ue,fontSize:Ye,zeroPx:jt,tickAngle:mt?ht:0,tickBand:mt?8+P(xt,ht,Ye):Ye+6}),null===Kt||Tt||"index"!==_t||!1===Wt.crosshair?null:(()=>{const t=St(Kt);return e("line",N?{x1:Ct.left,x2:Ct.left+Ct.width,y1:Ct.top+t,y2:Ct.top+t,stroke:"var(--plass-chart-baseline)",strokeWidth:1}:{x1:Ct.left+t,x2:Ct.left+t,y1:Ct.top,y2:Ct.top+Ct.height,stroke:"var(--plass-chart-baseline)",strokeWidth:1})})(),fe(Ot)]}):null,null!==Kt&&Vt.length>0&&"none"!==_t?Wt.render?e("div",{className:"pointer-events-none absolute z-10",style:Zt?{right:`calc(100% - ${Xt}px + 10px)`,top:Yt}:{left:Xt+10,top:Yt},children:Wt.render({index:Rt?.index??Kt,category:Rt?.category??Ht??Le[Kt],items:Rt?.renderItems??Vt})}):e(ChartTooltipPanel,{heading:Rt?Rt.heading:f(Ht??Le[Kt],ye),items:Vt,x:Xt,y:Yt,flip:Zt,size:ve}):null]}),Ut?null:l("span",{id:Ce,className:Y,children:[He.map((e,n)=>l(a.Fragment,{children:[n>0?", ":null,null===e.said?e.name:l(t,{children:[e.name," ",e.said]})]},n)),Ue.map((e,t)=>l(a.Fragment,{children:[", ",e.label?`${e.label} ${Ie(e.value)}`:Ie(e.value)]},`reference-${t}`))]}),"none"===_t?null:e(ChartStatus,{heading:null===Kt?void 0:Rt?.heading??f(Ht??Le[Kt],ye),items:Vt})]})}function ChartAxes({plot:a,scale:n,horizontal:i,categoryPx:s,valuePx:r,tickTexts:o,categoryTexts:c,categoryScale:d,categoryValuePx:u,valueAxis:h,categoryAxis:m,references:f,fontSize:x,zeroPx:v,tickAngle:y,tickBand:k}){const b=!1!==h?.grid&&!h?.hidden,M=!m?.hidden&&(m?.grid??null!==d),categoryAlong=e=>d?u(d.ticks[e]):(i?a.top:a.left)+s(e),C=Math.max(...c.map(e=>z(e,x)),1),S=y?$(y,x):C+12,P=A(c.length,i?a.height:a.width,i?1.8*x:S),j=A(n.ticks.length,i?a.width:a.height,i?Math.max(...o.map(e=>z(e,x)),1)+16:2*x),B=c.length>1?Math.abs(categoryAlong(1)-categoryAlong(0)):a.width,W=n.ticks.length>1?Math.abs(r(n.ticks[1])-r(n.ticks[0])):a.height,_=c[c.length-1]??"",T=0!==y||p(c.length,P,B,i?1.8*x:z(_,x)),I=p(n.ticks.length,j,W,i?z(o[o.length-1]??"",x):1.6*x);return l("g",{children:[n.ticks.map((t,s)=>{const c=r(t),d=Math.abs(t)<1e-9;return l("g",{children:[b?e("line",i?{x1:c,x2:c,y1:a.top,y2:a.top+a.height,stroke:d?"var(--plass-chart-baseline)":"var(--plass-chart-grid)",strokeWidth:1}:{x1:a.left,x2:a.left+a.width,y1:c,y2:c,stroke:d?"var(--plass-chart-baseline)":"var(--plass-chart-grid)",strokeWidth:1}):null,h?.hidden||!N(s,n.ticks.length,j,I)?null:e("text",i?{x:c,y:a.top+a.height+x+6,textAnchor:0===s?"start":s===n.ticks.length-1?"end":"middle",fontSize:x,fill:"var(--plass-muted-fg)",className:"tabular-nums",children:o[s]}:{x:a.left-8,y:c,textAnchor:"end",dominantBaseline:"central",fontSize:x,fill:"var(--plass-muted-fg)",className:"tabular-nums",children:o[s]})]},t)}),m?.hidden?null:l(t,{children:[e("line",i?{x1:v,x2:v,y1:a.top,y2:a.top+a.height,stroke:"var(--plass-chart-axis)",strokeWidth:1}:{x1:a.left,x2:a.left+a.width,y1:v,y2:v,stroke:"var(--plass-chart-axis)",strokeWidth:1}),c.map((t,n)=>{const s=categoryAlong(n),r=N(n,c.length,P,T);if(!r&&(i||!M))return null;const o=s,u=a.top+a.height+8+x/2;return i?e("text",{x:a.left-8,y:s,textAnchor:"end",dominantBaseline:"central",fontSize:x,fill:"var(--plass-muted-fg)",className:d?"tabular-nums":void 0,children:t},n):l("g",{children:[M?e("line",{x1:s,x2:s,y1:a.top,y2:a.top+a.height,stroke:"var(--plass-chart-grid)",strokeWidth:1}):null,r?e("text",y?{x:o,y:u,transform:`rotate(${y} ${o} ${u})`,textAnchor:y<0?"end":"start",dominantBaseline:"central",fontSize:x,fill:"var(--plass-muted-fg)",className:d?"tabular-nums":void 0,children:t}:{x:s,y:a.top+a.height+x+6,textAnchor:d?0===n?"start":n===c.length-1?"end":"middle":"middle",fontSize:x,fill:"var(--plass-muted-fg)",className:d?"tabular-nums":void 0,children:t}):null]},n)})]}),f.map((t,n)=>{const s=r(t.value),o=t.color?w(t.color):"var(--plass-muted-fg)",c=!1===t.dashed?void 0:g;return l("g",{children:[e("line",i?{x1:s,x2:s,y1:a.top,y2:a.top+a.height,stroke:o,strokeWidth:1,strokeDasharray:c}:{x1:a.left,x2:a.left+a.width,y1:s,y2:s,stroke:o,strokeWidth:1,strokeDasharray:c}),t.label?e("text",{x:i?s:a.left+a.width,y:i?a.top+x:s-4,textAnchor:i?"middle":"end",fontSize:x,fontWeight:500,fill:o,children:t.label}):null]},n)}),h?.label?e("text",{x:i?a.left+a.width:a.left,y:i?a.top+a.height+k+x+6:a.top-8,textAnchor:i?"end":"start",fontSize:x,fill:"var(--plass-muted-fg)",fontWeight:500,children:h.label}):null,m?.label&&!i?e("text",{x:a.left+a.width,y:a.top+a.height+k+x+6,textAnchor:"end",fontSize:x,fill:"var(--plass-muted-fg)",fontWeight:500,children:m.label}):null]})}export{G as ChartDataTable,ChartLegendBar,ChartScaleLegend,ChartStatus,ChartSurface,ChartTooltipPanel,entryKeys,useMeasuredWidth,useVisibility};
+"use client";import{jsx as e,Fragment as t,jsxs as l}from"react/jsx-runtime";import*as a from"react";import{PlBox as n}from"../components/box/PlBox.js";import{bandScale as i,categoryAt as s,categoryCount as r,categoriesAreDates as o,categoryExtent as d,chartFontSizes as c,compactNumber as u,extentOf as h,fitCategoryLabels as m,fitsLast as p,formatCategory as f,formatTimeTicks as x,lineDash as g,lineWidths as v,logScale as y,markerRadii as b,plotHeights as k,resolveColor as w,seriesColor as M,autoTickAngle as N,showsTick as z,textWidth as C,tickAngleOf as S,tickStride as A,tiltedDepth as $,tiltedPitch as P,tiltedRoom as j,tiltedStep as B,toValues as T,truncate as W,timeScale as _,valueScale as I,writeChartValue as D}from"./chart.js";import{useDefaults as E,useLocale as F}from"./defaults.js";import{usePlElementSize as K}from"../hooks/usePlElementSize.js";import{useLabels as H}from"./labels.js";import{layoutBox as L}from"./layout-box.js";import{textOf as R}from"./text.js";import{cx as V,glassClasses as Z,hasContent as O,metaTextClasses as U,srOnlyClasses as X,transitionClasses as Y}from"./styles.js";const q=[];function useMeasuredSize(e,t){const l=K(e);if(null!==l)return{width:l.width,height:l.height,guessed:!1};const a=void 0!==t&&Number.isFinite(t)&&t>0?t:0;return{width:a,height:null,guessed:a>0}}function givenHeight(e,t){return"number"==typeof e?e:void 0===e?t:null}export const markTransitionClasses=/* @__PURE__ */["[transition:opacity_var(--plass-duration)_var(--plass-ease),r_var(--plass-duration)_var(--plass-ease),scale_var(--plass-duration)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]"].join(" ");function entryKeys(e){const t=new Map,l=new Map;return e.map((e,a)=>{const n=e.id??null;if(null!==n){const e=l.get(n)??0;return l.set(n,e+1),`${n}#${e}@id`}const i=e.name??null;if(null===i)return String(a);const s=t.get(i)??0;return t.set(i,s+1),`${i}#${s}`})}function useVisibility(e,t){const l=entryKeys(e),[n,i]=a.useState(()=>{const t=new Set;return e.forEach((e,a)=>{e.hidden&&t.add(l[a])}),t});[...n].some(e=>!l.includes(e))&&i(new Set([...n].filter(e=>l.includes(e))));const[s,r]=a.useState(null),o=null!==s&&t?l.indexOf(s):-1;return null!==s&&-1===o&&r(null),{keys:l,visible:l.map(e=>!n.has(e)),hovered:-1===o?null:o,toggle:e=>{const t=l[e];void 0!==t&&i(e=>{const l=new Set(e);return l.has(t)?l.delete(t):l.add(t),l})},setHovered:e=>r(null===e?null:l[e]??null)}}const G={top:"flex-col-reverse",bottom:"flex-col",left:"flex-row-reverse rtl:flex-row",right:"flex-row rtl:flex-row-reverse"},J={start:"justify-start",center:"justify-center",end:"justify-end"};function DashedRule({ink:t,size:l}){const a=v[l],n=16+a;return e("svg",{"aria-hidden":"true",width:n,height:10,viewBox:`0 0 ${n} 10`,className:"block shrink-0",children:e("line",{x1:a/2,x2:n-a/2,y1:5,y2:5,stroke:t,strokeWidth:a,strokeDasharray:g,strokeLinecap:"round"})})}function ChartLegendBar({series:n,colors:i,options:s,visibility:r,size:o,values:d,swatch:c,dashed:u}){const h=!1!==s.interactive,m="left"===s.side||"right"===s.side,p=H(),[f,x]=a.useState(!1),g=s.maxEntries,v=void 0!==g&&g>0&&n.length>g&&!f,y=v?n.slice(0,g):n,b=n.length-y.length,k=entryKeys(n);return l("ul",{className:V("m-0 flex list-none flex-wrap items-center gap-x-3 gap-y-1 p-0",m?"min-w-0 flex-col items-start":"",J[s.align??"center"],U[o]),children:[y.map((a,n)=>{const s=r.visible[n],m=null!==r.hovered&&r.hovered!==n,p=a.name??`${n+1}`,f=i[n],x=s?m?"opacity-55":"":"opacity-40",g=l(t,{children:[c?e("span",{"aria-hidden":"true",className:"flex size-2.5 shrink-0 items-center justify-center",children:c(n,f)}):u?.[n]?e(DashedRule,{ink:f,size:o}):e("span",{"aria-hidden":"true",className:`size-2.5 shrink-0 rounded-[0.1875rem] ${Y}`,style:{backgroundColor:f}}),e("span",{className:"min-w-0 truncate",children:p}),d?.[n]?e("span",{className:"shrink-0 tabular-nums text-(--plass-muted-fg)",children:d[n]}):null]});return e("li",{className:"min-w-0",children:h?e("button",{type:"button","aria-pressed":s,onClick:()=>r.toggle(n),onPointerEnter:()=>r.setHovered(n),onPointerLeave:()=>r.setHovered(null),onFocus:()=>r.setHovered(n),onBlur:()=>r.setHovered(null),className:V("flex min-w-0 cursor-pointer items-center gap-1.5 rounded-(--plass-radius-xs)","px-1 py-0.5 text-(--plass-fg)","[transition-property:background-color,color,opacity]","[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]","motion-reduce:[transition-duration:0ms]","hover:bg-(--p-soft)","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:outline-offset-1",s?"":"line-through",x),children:g}):e("span",{className:V("flex min-w-0 items-center gap-1.5 px-1 py-0.5 text-(--plass-fg)",s?"":"line-through",x),children:g})},k[n])}),v||f?e("li",{className:"min-w-0",children:e("button",{type:"button","aria-expanded":f,onClick:()=>x(e=>!e),className:V("flex cursor-pointer items-center rounded-(--plass-radius-xs)","px-1 py-0.5 font-medium text-(--plass-muted-fg)","[transition-property:background-color,color]","[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]","motion-reduce:[transition-duration:0ms]","hover:bg-(--p-soft) hover:text-(--plass-fg)","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:outline-offset-1"),children:f?p.chartFewer:p.chartMore(b)})}):null]})}function ChartScaleLegend({steps:a,from:n,to:i,middle:s,align:r,vertical:o,size:d}){return e("div",{className:V("flex",o?"":J[r]),children:l("div",{className:V("grid grid-cols-[auto_auto_auto] items-center gap-x-2",U[d]),children:[e("span",{className:"shrink-0 tabular-nums text-(--plass-muted-fg)",children:n}),e("span",{"aria-hidden":"true",className:V("flex h-2.5 overflow-hidden rounded-[0.1875rem]",o?"w-20":"w-24"),children:a.map(t=>e("span",{className:"h-full flex-1",style:{backgroundColor:t}},t))}),e("span",{className:"shrink-0 tabular-nums text-(--plass-muted-fg)",children:i}),s?l(t,{children:[e("span",{}),e("span",{className:"text-center tabular-nums text-(--plass-muted-fg)",children:s}),e("span",{})]}):null]})})}function itemText(e){const a=e.label??e.formatted;return void 0===e.aside?a:l(t,{children:[a," (",e.aside,")"]})}function ChartTooltipPanel({heading:t,items:a,x:n,y:i,flip:s,size:r}){return l("div",{"data-plass-tooltip":"",className:V("pointer-events-none absolute z-10 max-w-56 min-w-24","rounded-(--plass-radius-sm) border p-2",Z,"bg-(--plass-glass-press) [border-color:var(--plass-glass-line)]","[box-shadow:var(--plass-shadow-3),var(--plass-gloss-glass)]",U[r]),style:s?{right:`calc(100% - ${n}px + 10px)`,top:i}:{left:n+10,top:i},children:[e("div",{className:"mb-1 font-medium text-(--plass-fg)",children:t}),e("ul",{className:"m-0 flex list-none flex-col gap-0.5 p-0",children:a.map(t=>l("li",{className:"flex items-center gap-1.5",children:[e("span",{"aria-hidden":"true",className:"size-2 shrink-0 rounded-[0.125rem]",style:{backgroundColor:t.color}}),t.name?e("span",{className:"min-w-0 flex-1 truncate text-(--plass-muted-fg)",children:t.name}):null,e("span",{className:"ms-auto shrink-0 font-medium tabular-nums text-(--plass-fg)",children:itemText(t)})]},t.seriesIndex))})]})}function ChartStatus({heading:n,items:i}){return e("span",{role:"status","aria-live":"polite",className:X,children:0===i.length?null:l(t,{children:[O(n)?l(t,{children:[n,", "]}):null,i.map((e,t)=>l(a.Fragment,{children:[t>0?", ":null,e.name?`${e.name}: `:null,itemText(e)]},e.seriesIndex))]})})}function chartTableName({label:e,"aria-label":t,"aria-labelledby":l}){return l?{labelledBy:l}:{caption:t??e}}const Q=/* @__PURE__ */a.memo(function ChartDataTable({id:t,caption:a,labelledBy:n,corner:i,categories:s,series:r,values:o,format:d,locale:c}){const u=entryKeys(r);return l("table",{id:t,className:X,"aria-labelledby":n,children:[a?e("caption",{children:a}):null,e("thead",{children:l("tr",{children:[e("th",{scope:"col",children:i??""}),r.map((t,l)=>e("th",{scope:"col",children:t.name??l+1},u[l]))]})}),e("tbody",{children:s.map((t,a)=>l("tr",{children:[e("th",{scope:"row",children:f(t,c)}),u.map((t,l)=>{const n=o[l]?.[a];return e("td",void 0!==n?.label?{children:n.label}:{children:null==n?.value?"":d(n.value)},t)})]},a))})]})});function ChartSurface({legend:t,legendSide:a,children:i,table:s,className:r,...o}){return l(n,{...o,className:V("relative flex gap-3",G[a],r??void 0),children:[e("div",{className:"relative min-w-0 flex-1",children:i}),t,s]})}function markKey(e,t){return`${e.key??t[e.series]??e.series}:${e.index}`}export function CartesianChart({series:n,categories:p,xAxis:g,yAxis:v,reference:w,horizontal:z=!1,stacked:A=!1,includeZero:P=!0,bandRatio:K=1,inset:Z=!1,headroom:O=0,markInset:Y=0,xScale:G="band",marks:J,markRadius:ee=24,table:te,summary:le,writeValue:ae,swatch:ne,stroked:ie=!1,scale:se,markTooltip:re,height:oe,initialWidth:de,format:ce,locale:ue,label:he,"aria-label":me,"aria-labelledby":pe,"aria-describedby":fe,legend:xe,tooltip:ge,empty:ve,size:ye,variant:be="ghost",padded:ke=!1,className:we,children:Me,...Ne}){const ze=E(),Ce=ye??ze.size??"md",Se=F(ue),Ae=a.useRef(null),{width:$e,height:Pe,guessed:je}=useMeasuredSize(Ae,de),Be=a.useRef({key:"",across:1,down:1}),Te=H(),We=a.useId(),_e=a.useId(),Ie=a.useId(),De=!1===xe?{interactive:!1}:!0===xe||void 0===xe?{}:xe,Ee=!0===xe||!1!==xe&&n.length>1,Fe=De.side??"bottom",Ke=useVisibility(n,Ee&&!1!==De.interactive),[He,Le]=a.useState(null),[Re,Ve]=a.useState(null),[Ze,Oe]=a.useState(null),Ue=a.useCallback(e=>ae?ae(e):D(e,ce,Se),[ae,ce,Se]),Xe=a.useMemo(()=>T(n),[n]),Ye=a.useMemo(()=>n.map((e,t)=>M(e,t)),[n]),qe=a.useMemo(()=>n.map(e=>!0===e.dashed),[n]),Ge=r(n),Je=a.useMemo(()=>Array.from({length:Ge},(e,t)=>s(t,p,Xe)),[Ge,p,Xe]),Qe=Xe.filter((e,t)=>Ke.visible[t]),et=h(Qe,A),tt=a.useMemo(()=>le??n.flatMap((e,t)=>{if(!Ke.visible[t])return[];const l=[...Xe[t]??[]].reverse().find(e=>null!==e.value),a=e.name??`${t+1}`;return void 0===l?[{name:a,said:null}]:[{name:a,said:l.label??Ue(l.value)}]}),[le,n,Xe,Ke.visible,Ue]),lt=givenHeight(oe,k[Ce]),at=c[Ce],nt=v,it=g,st=a.useMemo(()=>void 0===w?[]:Array.isArray(w)?w:[w],[w]),rt=se??("log"===nt?.scale?y(et,{min:nt.min,max:nt.max,tickCount:nt.tickCount}):I(et,{min:nt?.min,max:nt?.max,tickCount:nt?.tickCount,includeZero:P})),ot="value"===G?d(Qe,p):null,dt="value"===G&&o(Xe,p),ct="value"!==G?null:dt?_(ot,{min:it?.min,max:it?.max,tickCount:it?.tickCount}):"log"===it?.scale?y(ot,{min:it.min,max:it.max,tickCount:it.tickCount}):I(ot,{min:it?.min,max:it?.max,tickCount:it?.tickCount,includeZero:!1}),ut=ct&&"unit"in ct?x(ct.ticks,ct.unit,Se):null,ht=rt.ticks.map((e,t)=>nt?.tickFormat?R(nt.tickFormat(e,t)):Ue(e)),mt=it?.tickFormat,pt=a.useMemo(()=>Je.map((e,t)=>mt?R(mt(e,t)):f(e,Se)),[Je,mt,Se]),ft=ct?ct.ticks.map((e,t)=>mt?R(mt(dt?new Date(e):e,t)):ut?.[t]??u(e,Se)):pt,xt=ht.reduce((e,t)=>Math.max(e,C(t,at)),0),gt=at+6,vt=nt?.hidden?0:xt+10+(nt?.label?gt:0),yt=($e-(z?0:vt)-16)/Math.max(1,Ge),bt=lt??Pe??0,kt="function"==typeof Y?Y(bt):Y,wt=null!==ct,Mt=it?.tickAngle,Nt=z?0:"auto"===Mt?wt?0:N(ft,{slot:yt,fontSize:at}):S(Mt),zt=0!==Nt&&!it?.hidden,Ct=Math.max(3*at,.4*bt),St=a.useMemo(()=>zt?ft.map(e=>W(e,j(Ct,Nt,at),at)):m(ft,{horizontal:z,slot:yt,fontSize:at,ticks:wt}),[ft,zt,Ct,Nt,z,yt,at,wt]),At=a.useMemo(()=>St.reduce((e,t)=>Math.max(e,C(t,at)),0),[St,at]),$t=zt?B(At,Nt,at)+4:0,Pt=z?it?.hidden?0:At+10+(it?.label?gt:0):vt,jt=z?nt?.hidden?0:at+12+(nt?.label?gt:0):it?.hidden?0:(zt?$(At,Nt,at)+14:at+12)+(it?.label?gt:0),Bt=Math.max((z?it:nt)?.thickness??Pt,zt&&Nt<0?$t:0),Tt=(z?nt:it)?.thickness??jt,Wt=(z?12:zt?Nt>0?$t:12:ct?12:Math.max(8,St.length?At/2:8))+kt,_t=b[Ce]+4+O+kt,It={left:Bt+kt,top:_t,width:Math.max(0,$e-Bt-kt-Wt),height:Math.max(0,bt-_t-Tt-kt)},Dt=z?It.height:It.width,Et=i(Z?Math.max(1,Ge-1):Ge,Dt,K),Ft=a.useCallback(e=>Z?Ge<=1?Dt/2:Dt*e/(Ge-1):Et.centre(e),[Z,Ge,Dt,Et]),Kt=a.useCallback(e=>z?It.left+rt.fraction(e)*It.width:It.top+(1-rt.fraction(e))*It.height,[z,It.left,It.top,It.width,It.height,rt]),Ht=a.useCallback((e,t)=>z?{x:Kt(t),y:It.top+Ft(e)}:{x:It.left+Ft(e),y:Kt(t)},[z,Kt,Ft,It.left,It.top]),Lt=a.useCallback(e=>z?It.top+(1-(ct?.fraction(e)??0))*It.height:It.left+(ct?.fraction(e)??0)*It.width,[z,It.left,It.top,It.width,It.height,ct]),Rt=Kt(Math.min(Math.max(0,rt.min),rt.max)),Vt={plot:It,values:Xe,visible:Ke.visible,colors:Ye,dashed:qe,scale:rt,band:Et,horizontal:z,valuePx:Kt,categoryPx:Ft,point:Ht,categoryScale:ct,categoryValuePx:Lt,zeroPx:Rt,height:bt,categories:Je,format:Ue,size:Ce},Zt=!1===ge?{mode:"none"}:!0===ge||void 0===ge?{}:ge,Ot=Zt.mode??(J?"item":"index"),Ut=J??("nearest"===Ot?e=>function gridMarks(e,t){const l=[],a=b[e.size],n=[];return e.values.forEach((i,s)=>{const r=i.map((e,t)=>n[t]??0);t&&e.visible[s]&&i.forEach((e,t)=>{n[t]=(n[t]??0)+(e.value??0)}),e.visible[s]&&i.forEach((n,i)=>{if(null===n.value)return;const o=e.point(i,t?r[i]+n.value:n.value);l.push({series:s,index:i,x:o.x,y:o.y,r:a})})}),l}(e,A):void 0),Xt=Ut?Ut(Vt):q,Yt=null===Re?-1:Xt.findIndex(e=>markKey(e,Ke.keys)===Re),qt=-1===Yt?null:Xt[Yt],Gt=Ut?qt?qt.index:null:He,Jt=Ut?Xt.length:Ge,clearActive=()=>{Le(null),Ve(null),Oe(null)};(null!==He&&He>=Ge||null!==Re&&!qt)&&clearActive();const goTo=e=>{const t=null===e?null:Math.min(Jt-1,Math.max(0,e));if(Oe(null),Ut){const e=null===t?void 0:Xt[t];Ve(e?markKey(e,Ke.keys):null)}else Le(t)},step=e=>{goTo(((Ut?-1===Yt?null:Yt:He)??(e>0?-1:Jt))+e)},Qt=null===Gt?[]:n.flatMap((e,t)=>{if(!Ke.visible[t]||qt&&qt.series!==t)return[];const l=Xe[t]?.[Gt];return l&&null!==l.value?[{seriesIndex:t,name:e.name,color:l.color??Ye[t],value:l.value,formatted:Ue(l.value),label:l.label}]:[]}),el=qt&&re?re(qt):null,tl=el?el.items:"item"===Ot&&Qt.length>1&&null!==Ze?[Qt.reduce((e,t)=>Math.abs(Kt(t.value??0)-Ze)<Math.abs(Kt(e.value??0)-Ze)?t:e)]:Qt,ll=qt?Xe[qt.series]?.[qt.index]?.x??p?.[qt.index]??qt.index:void 0,al=qt?qt.x:z?Kt(tl[0]?.value??0):It.left+Ft(Gt??0),nl=qt?qt.y:z?It.top+Ft(Gt??0):It.top,il=qt?(qt.x-It.left)/Math.max(1,It.width)>.6:(z?rt.fraction(tl[0]?.value??0):Ft(Gt??0)/Math.max(1,Dt))>.6,sl={...Vt,hovered:Ke.hovered,activeIndex:Gt,marks:Xt,activeMark:qt},rl=0===Ge||null===et||"value"===G&&null===ot,ol=chartTableName({label:he,"aria-label":me,"aria-labelledby":pe});return l(ChartSurface,{...Ne,size:Ce,variant:be,padded:ke,className:we,legendSide:Fe,legend:Ee?e(ChartLegendBar,{series:n,colors:Ye,options:De,visibility:Ke,size:Ce,swatch:ne,dashed:ie?qe:void 0,values:De.showValue&&null!==Gt?n.map((e,t)=>{const l=Xe[t]?.[Gt]?.value;return null==l?void 0:Ue(l)}):void 0}):null,table:rl?null:te?.(We,ol)??e(Q,{id:We,...ol,corner:it?.label,categories:Je,series:n,values:Xe,format:Ue,locale:Se}),children:[l("div",{ref:Ae,role:"img",tabIndex:rl?void 0:0,"aria-labelledby":pe,"aria-label":me??he??Te.chart,"aria-describedby":V(fe,rl?Ie:_e),onPointerMove:e=>{if("none"===Ot)return;const t=((e,t)=>{const l=Ae.current;if(!l)return null;const a=l.getBoundingClientRect(),n=`${a.width} ${a.height} ${$e} ${Pe}`;let i=Be.current;return i.key!==n&&(i={key:n,across:L(l,!0).perPixel,down:L(l,!1).perPixel},Be.current=i),{x:(e-a.left)*i.across,y:(t-a.top)*i.down}})(e.clientX,e.clientY);if(Ut){const e=t?((e,t)=>{if(0===Xt.length)return null;let l=null,a=1/0,n=1/0;return Xt.forEach((i,s)=>{const r=Math.hypot(i.x-e,i.y-t),o=void 0===i.rx?Math.max(0,r-i.r):Math.hypot(Math.max(0,Math.abs(i.x-e)-i.rx),Math.max(0,Math.abs(i.y-t)-(i.ry??i.rx)));o<=ee&&(o<a||o===a&&r<n)&&(a=o,n=r,l=s)}),l})(t.x,t.y):null;Ve(null===e?null:markKey(Xt[e],Ke.keys))}else Le(t?((e,t)=>{if(0===Ge)return null;const l=z?t-It.top:e-It.left;if(l<-Et.step||l>Dt+Et.step)return null;const a=Z?Ge<=1?0:Math.round(l/Dt*(Ge-1)):Math.floor(l/Et.step);return Math.min(Ge-1,Math.max(0,a))})(t.x,t.y):null);var l,a;"item"!==Ot||Ut||Oe(t?(l=t.x,a=t.y,z?l:a):null)},onPointerLeave:clearActive,onKeyDown:"none"===Ot?void 0:e=>{const t=z?"ArrowDown":"ArrowRight",l=z?"ArrowUp":"ArrowLeft";if(e.key===t)step(1);else if(e.key===l)step(-1);else if("Home"===e.key)goTo(0);else if("End"===e.key)goTo(Jt-1);else{if("Escape"!==e.key||null===He&&null===Re)return;clearActive(),e.stopPropagation()}e.preventDefault()},onBlur:clearActive,className:V("relative w-full","rounded-(--plass-radius-xs)","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:outline-offset-2",je&&"overflow-hidden"),style:{height:lt??oe},children:[rl?e("div",{id:Ie,className:V("flex h-full items-center justify-center text-(--plass-muted-fg)",U[Ce]),children:ve??Te.empty}):$e>0&&(null!==lt||bt>0)?l("svg",{width:$e,height:bt||"100%",viewBox:`0 0 ${$e} ${bt}`,"aria-hidden":"true",className:"block overflow-visible",children:[e(ChartAxes,{plot:It,scale:rt,band:Et,horizontal:z,inset:Z,categoryPx:Ft,valuePx:Kt,tickTexts:ht,categoryTexts:St,categoryScale:ct,categoryValuePx:Lt,valueAxis:nt,categoryAxis:it,references:st,fontSize:at,zeroPx:Rt,tickAngle:zt?Nt:0,tickBand:zt?8+$(At,Nt,at):at+6}),null===Gt||Ut||"index"!==Ot||!1===Zt.crosshair?null:(()=>{const t=Ft(Gt);return e("line",z?{x1:It.left,x2:It.left+It.width,y1:It.top+t,y2:It.top+t,stroke:"var(--plass-chart-baseline)",strokeWidth:1}:{x1:It.left+t,x2:It.left+t,y1:It.top,y2:It.top+It.height,stroke:"var(--plass-chart-baseline)",strokeWidth:1})})(),Me(sl)]}):null,null!==Gt&&tl.length>0&&"none"!==Ot?Zt.render?e("div",{className:"pointer-events-none absolute z-10",style:il?{right:`calc(100% - ${al}px + 10px)`,top:nl}:{left:al+10,top:nl},children:Zt.render({index:el?.index??Gt,category:el?.category??ll??Je[Gt],items:el?.renderItems??tl})}):e(ChartTooltipPanel,{heading:el?el.heading:f(ll??Je[Gt],Se),items:tl,x:al,y:nl,flip:il,size:Ce}):null]}),rl?null:l("span",{id:_e,className:X,children:[tt.map((e,n)=>l(a.Fragment,{children:[n>0?", ":null,null===e.said?e.name:l(t,{children:[e.name," ",e.said]})]},n)),st.map((e,t)=>l(a.Fragment,{children:[", ",e.label?`${e.label} ${Ue(e.value)}`:Ue(e.value)]},`reference-${t}`))]}),"none"===Ot?null:e(ChartStatus,{heading:null===Gt?void 0:el?.heading??f(ll??Je[Gt],Se),items:tl})]})}function ChartAxes({plot:a,scale:n,horizontal:i,categoryPx:s,valuePx:r,tickTexts:o,categoryTexts:d,categoryScale:c,categoryValuePx:u,valueAxis:h,categoryAxis:m,references:f,fontSize:x,zeroPx:v,tickAngle:y,tickBand:b}){const k=!1!==h?.grid&&!h?.hidden,M=!m?.hidden&&(m?.grid??null!==c),categoryAlong=e=>c?u(c.ticks[e]):(i?a.top:a.left)+s(e),N=Math.max(...d.map(e=>C(e,x)),1),S=y?P(y,x):N+12,$=A(d.length,i?a.height:a.width,i?1.8*x:S),j=A(n.ticks.length,i?a.width:a.height,i?Math.max(...o.map(e=>C(e,x)),1)+16:2*x),B=d.length>1?Math.abs(categoryAlong(1)-categoryAlong(0)):a.width,T=n.ticks.length>1?Math.abs(r(n.ticks[1])-r(n.ticks[0])):a.height,W=d[d.length-1]??"",_=0!==y||p(d.length,$,B,i?1.8*x:C(W,x)),I=p(n.ticks.length,j,T,i?C(o[o.length-1]??"",x):1.6*x);return l("g",{children:[n.ticks.map((t,s)=>{const d=r(t),c=Math.abs(t)<1e-9;return l("g",{children:[k?e("line",i?{x1:d,x2:d,y1:a.top,y2:a.top+a.height,stroke:c?"var(--plass-chart-baseline)":"var(--plass-chart-grid)",strokeWidth:1}:{x1:a.left,x2:a.left+a.width,y1:d,y2:d,stroke:c?"var(--plass-chart-baseline)":"var(--plass-chart-grid)",strokeWidth:1}):null,h?.hidden||!z(s,n.ticks.length,j,I)?null:e("text",i?{x:d,y:a.top+a.height+x+6,textAnchor:0===s?"start":s===n.ticks.length-1?"end":"middle",fontSize:x,fill:"var(--plass-muted-fg)",className:"tabular-nums",children:o[s]}:{x:a.left-8,y:d,textAnchor:"end",dominantBaseline:"central",fontSize:x,fill:"var(--plass-muted-fg)",className:"tabular-nums",children:o[s]})]},t)}),m?.hidden?null:l(t,{children:[e("line",i?{x1:v,x2:v,y1:a.top,y2:a.top+a.height,stroke:"var(--plass-chart-axis)",strokeWidth:1}:{x1:a.left,x2:a.left+a.width,y1:v,y2:v,stroke:"var(--plass-chart-axis)",strokeWidth:1}),d.map((t,n)=>{const s=categoryAlong(n),r=z(n,d.length,$,_);if(!r&&(i||!M))return null;const o=s,u=a.top+a.height+8+x/2;return i?e("text",{x:a.left-8,y:s,textAnchor:"end",dominantBaseline:"central",fontSize:x,fill:"var(--plass-muted-fg)",className:c?"tabular-nums":void 0,children:t},n):l("g",{children:[M?e("line",{x1:s,x2:s,y1:a.top,y2:a.top+a.height,stroke:"var(--plass-chart-grid)",strokeWidth:1}):null,r?e("text",y?{x:o,y:u,transform:`rotate(${y} ${o} ${u})`,textAnchor:y<0?"end":"start",dominantBaseline:"central",fontSize:x,fill:"var(--plass-muted-fg)",className:c?"tabular-nums":void 0,children:t}:{x:s,y:a.top+a.height+x+6,textAnchor:c?0===n?"start":n===d.length-1?"end":"middle":"middle",fontSize:x,fill:"var(--plass-muted-fg)",className:c?"tabular-nums":void 0,children:t}):null]},n)})]}),f.map((t,n)=>{const s=r(t.value),o=t.color?w(t.color):"var(--plass-muted-fg)",d=!1===t.dashed?void 0:g;return l("g",{children:[e("line",i?{x1:s,x2:s,y1:a.top,y2:a.top+a.height,stroke:o,strokeWidth:1,strokeDasharray:d}:{x1:a.left,x2:a.left+a.width,y1:s,y2:s,stroke:o,strokeWidth:1,strokeDasharray:d}),t.label?e("text",{x:i?s:a.left+a.width,y:i?a.top+x:s-4,textAnchor:i?"middle":"end",fontSize:x,fontWeight:500,fill:o,children:t.label}):null]},n)}),h?.label?e("text",{x:i?a.left+a.width:a.left,y:i?a.top+a.height+b+x+6:a.top-8,textAnchor:i?"end":"start",fontSize:x,fill:"var(--plass-muted-fg)",fontWeight:500,children:h.label}):null,m?.label&&!i?e("text",{x:a.left+a.width,y:a.top+a.height+b+x+6,textAnchor:"end",fontSize:x,fill:"var(--plass-muted-fg)",fontWeight:500,children:m.label}):null]})}export{Q as ChartDataTable,ChartLegendBar,ChartScaleLegend,ChartStatus,ChartSurface,ChartTooltipPanel,chartTableName,entryKeys,givenHeight,useMeasuredSize,useVisibility};

package/dist/internal/commit-change.d.ts

@@ -0,0 +1,38 @@
+/**
+ * When a component that measures its own children has to measure them again.
+ *
+ * A component handed its children as `children` is handed a new reference on
+ * every render a parent does, whether anything in them changed or not, so a
+ * layout effect that lists `children` reads the layout back on every one of
+ * those renders. `PlSegmentedButton` and `PlFloatingBottomNavigation` both did,
+ * and a screen with several of them recalculated the layout between each one's
+ * reads and the next one's writes.
+ *
+ * This runs on every commit as well, but it reads only the DOM tree, never the
+ * layout, and calls back only when the commit changed something the children
+ * can have moved with:
+ *
+ * - one of `deps`, which are the props the component sizes its children by;
+ * - the markup under the element: a child added, removed or moved, text
+ *   edited, a `class`, a `style` or a `dir` changed. A `MutationObserver`
+ *   records those, and its records are taken in the layout effect, before the
+ *   browser delivers them, so they are exactly the ones the commit being
+ *   checked made. A parent rendering again with the same `style` writes
+ *   nothing, since React sets only the declarations whose values changed, and
+ *   the `style` of the element the callback writes its own answer to, such as
+ *   a sliding tile, is the answer landing rather than anything that moved;
+ * - the nearest `dir` above the element, since a document turned over in the
+ *   same commit moves every child without touching the markup under it.
+ *
+ * A change made outside a commit of the component, such as a child that updates
+ * itself or a font that loads, is left to the component's `ResizeObserver`,
+ * which answers it when it changes a size, as it did before.
+ */
+import * as React from 'react';
+/**
+ * Calls `onChange` before the browser paints, on the first commit and on every
+ * later one that changed `deps`, the markup under `ref`, or the direction it
+ * runs in. `output` is the element `onChange` writes to, whose own `style` does
+ * not count.
+ */
+export declare function useCommitChange(ref: React.RefObject<HTMLElement | null>, deps: readonly unknown[], onChange: () => void, output?: React.RefObject<HTMLElement | null>): void;

package/dist/internal/commit-change.js

@@ -0,0 +1 @@
+"use client";import*as e from"react";export function useCommitChange(t,r,n,u){const c=e.useRef(null),s=e.useRef(null);e.useLayoutEffect(()=>{const e=t.current;if(!e||"undefined"==typeof MutationObserver)return;const r=new MutationObserver(()=>{});return r.observe(e,{subtree:!0,childList:!0,characterData:!0,attributeFilter:["class","style","dir"]}),c.current=r,()=>{r.disconnect(),c.current=null}},[t]),e.useLayoutEffect(()=>{const e=t.current;if(!e)return;const i=u?.current,o=(c.current?.takeRecords()??[]).some(e=>!("style"===e.attributeName&&e.target===i)),a=[...r,e.closest("[dir]")?.getAttribute("dir")],l=s.current;!o&&null!==l&&a.length===l.length&&a.every((e,t)=>Object.is(e,l[t]))||(s.current=a,n())})}

package/dist/internal/data-table.d.ts

@@ -34,9 +34,9 @@ export interface PlassSort {
  * **Strings compare with `localeCompare`.** `'a' < 'B'` is false by code point,
  * which puts every capitalised word above every lower-case one and sorts `Ösi`
  * after `Zoe`. A list of names a reader cannot scan is a list that was sorted
- * for the machine.
+ * for the machine. `locale` is the collation, and left out it is the runtime's.
  */
-export declare function compareValues(a: unknown, b: unknown, direction?: 1 | -1): number;
+export declare function compareValues(a: unknown, b: unknown, direction?: 1 | -1, locale?: Intl.LocalesArgument): number;
 /**
  * What pressing a column heading does next.
  *

package/dist/internal/data-table.js

@@ -1 +1 @@
-export function compareValues(e,n,t=1){const o=null==e||""===e,r=null==n||""===n;return o||r?o&&r?0:o?1:-1:function compareKnown(e,n){return"number"==typeof e&&"number"==typeof n?e-n:"boolean"==typeof e&&"boolean"==typeof n?Number(e)-Number(n):e instanceof Date&&n instanceof Date?e.getTime()-n.getTime():String(e).localeCompare(String(n))}(e,n)*t}export function nextSort(e,n){return null===e||e.key!==n?{key:n,direction:"asc"}:"asc"===e.direction?{key:n,direction:"desc"}:null}export function keysBetween(e,n,t){const o=e.indexOf(n),r=e.indexOf(t);return-1===o||-1===r?[]:o<=r?e.slice(o,r+1):e.slice(r,o+1)}export function pageBounds(e,n,t){const o=Math.max(1,Math.ceil(e/t)),r=(Math.min(Math.max(1,Math.trunc(n)),o)-1)*t;return[r,Math.min(r+t,e)]}
+export function compareValues(e,n,t=1,o){const r=null==e||""===e,i=null==n||""===n;return r||i?r&&i?0:r?1:-1:function compareKnown(e,n,t){return"number"==typeof e&&"number"==typeof n?e-n:"boolean"==typeof e&&"boolean"==typeof n?Number(e)-Number(n):e instanceof Date&&n instanceof Date?e.getTime()-n.getTime():String(e).localeCompare(String(n),t)}(e,n,o)*t}export function nextSort(e,n){return null===e||e.key!==n?{key:n,direction:"asc"}:"asc"===e.direction?{key:n,direction:"desc"}:null}export function keysBetween(e,n,t){const o=e.indexOf(n),r=e.indexOf(t);return-1===o||-1===r?[]:o<=r?e.slice(o,r+1):e.slice(r,o+1)}export function pageBounds(e,n,t){const o=Math.max(1,Math.ceil(e/t)),r=(Math.min(Math.max(1,Math.trunc(n)),o)-1)*t;return[r,Math.min(r+t,e)]}

package/dist/internal/date.d.ts

@@ -54,6 +54,15 @@ export declare function startOfYear(date: Date): Date;
 export declare function daysInMonth(year: number, month: number): number;
 /** Today, at midnight. The one place the pickers read the clock for a *date*. */
 export declare function today(): Date;
+/**
+ * Today as the clock reads in `timeZone`, at local midnight — the day it is
+ * there, as the local date everything else here works on. Left out, it is
+ * {@link today}.
+ *
+ * A server render reads the clock in UTC rather than in whatever zone the
+ * machine is set to, so the browser hydrating it can ask for the same day.
+ */
+export declare function todayIn(timeZone: string | undefined): Date;
 export declare function addDays(date: Date, amount: number): Date;
 /**
  * Months, with the day of the month clamped rather than allowed to overflow.

package/dist/internal/date.js

@@ -1 +1 @@
-import{dateFormatter as t}from"./format.js";export const YEAR_PAGE_SIZE=12;export function makeDate(t,e,n){const r=new Date(0);return r.setFullYear(t,e,n),r.setHours(0,0,0,0),r}export function isValidDate(t){return t instanceof Date&&!Number.isNaN(t.getTime())}export function startOfDay(t){const e=new Date(t.getTime());return e.setHours(0,0,0,0),e}export function startOfMonth(t){return makeDate(t.getFullYear(),t.getMonth(),1)}export function startOfYear(t){return makeDate(t.getFullYear(),0,1)}export function daysInMonth(t,e){return makeDate(t,e+1,0).getDate()}export function today(){return startOfDay(new Date)}export function addDays(t,e){const n=new Date(t.getTime());return n.setDate(n.getDate()+e),n}export function addMonths(t,e){const n=new Date(t.getTime()),r=makeDate(t.getFullYear(),t.getMonth()+e,1);return n.setFullYear(r.getFullYear(),r.getMonth(),Math.min(t.getDate(),daysInMonth(r.getFullYear(),r.getMonth()))),n}export function addYears(t,e){return addMonths(t,12*e)}export function compareDay(t,e){return startOfDay(t).getTime()-startOfDay(e).getTime()}export function isSameDay(t,e){return isValidDate(t)&&isValidDate(e)&&0===compareDay(t,e)}export function isSameMonth(t,e){return isValidDate(t)&&isValidDate(e)&&t.getFullYear()===e.getFullYear()&&t.getMonth()===e.getMonth()}export function clampDate(t,e,n){return isValidDate(e)&&t.getTime()<e.getTime()?new Date(e.getTime()):isValidDate(n)&&t.getTime()>n.getTime()?new Date(n.getTime()):t}export function isDayOutside(t,e,n){return!!(isValidDate(e)&&compareDay(t,e)<0)||isValidDate(n)&&compareDay(t,n)>0}export function isMonthOutside(t,e,n){const r=t.getFullYear(),o=t.getMonth();return isDayOutside(makeDate(r,o,daysInMonth(r,o)),e,null)||isDayOutside(makeDate(r,o,1),null,n)}export function isYearOutside(t,e,n){const r=t.getFullYear();return isValidDate(e)&&r<e.getFullYear()||isValidDate(n)&&r>n.getFullYear()}export function secondsOfDay(t){return 3600*t.getHours()+60*t.getMinutes()+t.getSeconds()}export function timeUnitSpan(t,e){const n=secondsOfDay(e);if("hour"===t){const t=3600*Math.floor(n/3600);return[t,t+3599]}if("minute"===t){const t=60*Math.floor(n/60);return[t,t+59]}if("second"===t)return[n,n];const r=e.getHours()<12?0:43200;return[r,r+43200-1]}export function withTime(t,e){const n=new Date(t.getTime());return n.setHours(e.hours??n.getHours(),e.minutes??n.getMinutes(),e.seconds??n.getSeconds(),0),n}export function clampMoment(t,e,n,r){const o=r?1e3:6e4,floor=t=>withTime(t,{seconds:r?t.getSeconds():0});if(isValidDate(e)&&t.getTime()<e.getTime()){const t=floor(e),r=t.getTime()<e.getTime()?new Date(t.getTime()+o):t;return isValidDate(n)&&r.getTime()>n.getTime()?new Date(e.getTime()):r}if(isValidDate(n)&&t.getTime()>n.getTime()){const t=floor(n);return isValidDate(e)&&t.getTime()<e.getTime()?new Date(n.getTime()):t}return t}export function mergeDateAndTime(t,e){return withTime(startOfDay(t),{hours:e.getHours(),minutes:e.getMinutes(),seconds:e.getSeconds()})}export function calendarWeeks(t,e){const n=startOfMonth(t),r=(n.getDay()-e+7)%7,o=addDays(n,-r);return Array.from({length:6},(t,e)=>Array.from({length:7},(t,n)=>addDays(o,7*e+n)))}export function yearPageStart(t){return t-(t%12+12)%12}export function formatDate(e,n,r){return isValidDate(e)?t(n,r).format(e):""}const e=/* @__PURE__ */[...Array.from({length:24},(t,e)=>new Date(2027,e%12,21+e%7,e,58,58)),new Date(2027,0,22,12,58,58)];export function displaySamples(n,r){const o=t(n,r);return[...new Set(e.map(t=>o.format(t)))]}export function withPlaceholder(t,e){return"string"==typeof e&&""!==e?[...t,e]:t}export function toISODate(t){const pad=t=>String(t).padStart(2,"0");return`${String(t.getFullYear()).padStart(4,"0")}-${pad(t.getMonth()+1)}-${pad(t.getDate())}`}export function toISOMonth(t){return`${String(t.getFullYear()).padStart(4,"0")}-${String(t.getMonth()+1).padStart(2,"0")}`}export function toISOYear(t){return String(t.getFullYear()).padStart(4,"0")}export function toISOTime(t,e=!1){const pad=t=>String(t).padStart(2,"0"),n=`${pad(t.getHours())}:${pad(t.getMinutes())}`;return e?`${n}:${pad(t.getSeconds())}`:n}export function toISODateTime(t,e=!1){return`${toISODate(t)}T${toISOTime(t,e)}`}const n=/* @__PURE__ */makeDate(2021,7,1);export function weekdayLabels(e,r,o="short"){const a=t(e,{weekday:o});return Array.from({length:7},(t,e)=>a.format(addDays(n,(r+e)%7)))}export function monthLabels(e,n="short"){const r=t(e,{month:n});return Array.from({length:12},(t,e)=>r.format(makeDate(2021,e,1)))}export function isMonthBeforeYear(e){const r=t(e,{year:"numeric",month:"long"}).formatToParts(n);return r.findIndex(t=>"month"===t.type)<r.findIndex(t=>"year"===t.type)}export function isHour12(e){const n=t(e,{hour:"numeric"}).resolvedOptions();return n.hourCycle?"h11"===n.hourCycle||"h12"===n.hourCycle:!0===n.hour12}export function meridiemLabels(e){const r=t(e,{hour:"numeric",hour12:!0}),read=t=>{const e=r.formatToParts(withTime(n,{hours:t})).find(t=>"dayPeriod"===t.type);return e?.value??(t<12?"AM":"PM")};return[read(9),read(21)]}export function localeWeekStart(t){try{const e=t??(new Intl.DateTimeFormat).resolvedOptions().locale,n=new Intl.Locale(e),r="function"==typeof n.getWeekInfo?n.getWeekInfo():n.weekInfo;if("number"==typeof r?.firstDay)return r.firstDay%7}catch{}return 0}
+import{dateFormatter as t}from"./format.js";export const YEAR_PAGE_SIZE=12;export function makeDate(t,e,n){const r=new Date(0);return r.setFullYear(t,e,n),r.setHours(0,0,0,0),r}export function isValidDate(t){return t instanceof Date&&!Number.isNaN(t.getTime())}export function startOfDay(t){const e=new Date(t.getTime());return e.setHours(0,0,0,0),e}export function startOfMonth(t){return makeDate(t.getFullYear(),t.getMonth(),1)}export function startOfYear(t){return makeDate(t.getFullYear(),0,1)}export function daysInMonth(t,e){return makeDate(t,e+1,0).getDate()}export function today(){return startOfDay(new Date)}const e={year:"numeric",month:"numeric",day:"numeric"};export function todayIn(n){if(void 0===n)return today();const r=t("en-US",{...e,timeZone:n}).formatToParts(new Date),part=t=>Number(r.find(e=>e.type===t)?.value);return makeDate(part("year"),part("month")-1,part("day"))}export function addDays(t,e){const n=new Date(t.getTime());return n.setDate(n.getDate()+e),n}export function addMonths(t,e){const n=new Date(t.getTime()),r=makeDate(t.getFullYear(),t.getMonth()+e,1);return n.setFullYear(r.getFullYear(),r.getMonth(),Math.min(t.getDate(),daysInMonth(r.getFullYear(),r.getMonth()))),n}export function addYears(t,e){return addMonths(t,12*e)}export function compareDay(t,e){return startOfDay(t).getTime()-startOfDay(e).getTime()}export function isSameDay(t,e){return isValidDate(t)&&isValidDate(e)&&0===compareDay(t,e)}export function isSameMonth(t,e){return isValidDate(t)&&isValidDate(e)&&t.getFullYear()===e.getFullYear()&&t.getMonth()===e.getMonth()}export function clampDate(t,e,n){return isValidDate(e)&&t.getTime()<e.getTime()?new Date(e.getTime()):isValidDate(n)&&t.getTime()>n.getTime()?new Date(n.getTime()):t}export function isDayOutside(t,e,n){return!!(isValidDate(e)&&compareDay(t,e)<0)||isValidDate(n)&&compareDay(t,n)>0}export function isMonthOutside(t,e,n){const r=t.getFullYear(),o=t.getMonth();return isDayOutside(makeDate(r,o,daysInMonth(r,o)),e,null)||isDayOutside(makeDate(r,o,1),null,n)}export function isYearOutside(t,e,n){const r=t.getFullYear();return isValidDate(e)&&r<e.getFullYear()||isValidDate(n)&&r>n.getFullYear()}export function secondsOfDay(t){return 3600*t.getHours()+60*t.getMinutes()+t.getSeconds()}export function timeUnitSpan(t,e){const n=secondsOfDay(e);if("hour"===t){const t=3600*Math.floor(n/3600);return[t,t+3599]}if("minute"===t){const t=60*Math.floor(n/60);return[t,t+59]}if("second"===t)return[n,n];const r=e.getHours()<12?0:43200;return[r,r+43200-1]}export function withTime(t,e){const n=new Date(t.getTime());return n.setHours(e.hours??n.getHours(),e.minutes??n.getMinutes(),e.seconds??n.getSeconds(),0),n}export function clampMoment(t,e,n,r){const o=r?1e3:6e4,floor=t=>withTime(t,{seconds:r?t.getSeconds():0});if(isValidDate(e)&&t.getTime()<e.getTime()){const t=floor(e),r=t.getTime()<e.getTime()?new Date(t.getTime()+o):t;return isValidDate(n)&&r.getTime()>n.getTime()?new Date(e.getTime()):r}if(isValidDate(n)&&t.getTime()>n.getTime()){const t=floor(n);return isValidDate(e)&&t.getTime()<e.getTime()?new Date(n.getTime()):t}return t}export function mergeDateAndTime(t,e){return withTime(startOfDay(t),{hours:e.getHours(),minutes:e.getMinutes(),seconds:e.getSeconds()})}export function calendarWeeks(t,e){const n=startOfMonth(t),r=(n.getDay()-e+7)%7,o=addDays(n,-r);return Array.from({length:6},(t,e)=>Array.from({length:7},(t,n)=>addDays(o,7*e+n)))}export function yearPageStart(t){return t-(t%12+12)%12}export function formatDate(e,n,r){return isValidDate(e)?t(n,r).format(e):""}const n=/* @__PURE__ */[...Array.from({length:24},(t,e)=>new Date(2027,e%12,21+e%7,e,58,58)),new Date(2027,0,22,12,58,58)];export function displaySamples(e,r){const o=t(e,r);return[...new Set(n.map(t=>o.format(t)))]}export function withPlaceholder(t,e){return"string"==typeof e&&""!==e?[...t,e]:t}export function toISODate(t){const pad=t=>String(t).padStart(2,"0");return`${String(t.getFullYear()).padStart(4,"0")}-${pad(t.getMonth()+1)}-${pad(t.getDate())}`}export function toISOMonth(t){return`${String(t.getFullYear()).padStart(4,"0")}-${String(t.getMonth()+1).padStart(2,"0")}`}export function toISOYear(t){return String(t.getFullYear()).padStart(4,"0")}export function toISOTime(t,e=!1){const pad=t=>String(t).padStart(2,"0"),n=`${pad(t.getHours())}:${pad(t.getMinutes())}`;return e?`${n}:${pad(t.getSeconds())}`:n}export function toISODateTime(t,e=!1){return`${toISODate(t)}T${toISOTime(t,e)}`}function weekdayOrigin(){return makeDate(2021,7,1)}export function weekdayLabels(e,n,r="short"){const o=t(e,{weekday:r}),a=weekdayOrigin();return Array.from({length:7},(t,e)=>o.format(addDays(a,(n+e)%7)))}export function monthLabels(e,n="short"){const r=t(e,{month:n});return Array.from({length:12},(t,e)=>r.format(makeDate(2021,e,1)))}export function isMonthBeforeYear(e){const n=t(e,{year:"numeric",month:"long"}).formatToParts(weekdayOrigin());return n.findIndex(t=>"month"===t.type)<n.findIndex(t=>"year"===t.type)}export function isHour12(e){const n=t(e,{hour:"numeric"}).resolvedOptions();return n.hourCycle?"h11"===n.hourCycle||"h12"===n.hourCycle:!0===n.hour12}export function meridiemLabels(e){const n=t(e,{hour:"numeric",hour12:!0}),r=weekdayOrigin(),read=t=>{const e=n.formatToParts(withTime(r,{hours:t})).find(t=>"dayPeriod"===t.type);return e?.value??(t<12?"AM":"PM")};return[read(9),read(21)]}const r=new Map;export function localeWeekStart(t){let e=r.get(t);return void 0===e&&(e=function readWeekStart(t){try{const e=t??(new Intl.DateTimeFormat).resolvedOptions().locale,n=new Intl.Locale(e),r="function"==typeof n.getWeekInfo?n.getWeekInfo():n.weekInfo;if("number"==typeof r?.firstDay)return r.firstDay%7}catch{}return 0}(t),r.set(t,e)),e}

package/dist/internal/defaults.d.ts

@@ -53,7 +53,14 @@ export interface PlassDefaults {
      * to cut, so its label stays above the row whatever this says.
      */
     labelPlacement?: PlassFieldLabelPlacement;
-    /** The BCP 47 tag the date and time components format and read against. */
+    /**
+     * The BCP 47 tag the date and time components format and read against.
+     *
+     * Left out, it is the browser's own, which a server cannot ask for: a server
+     * render and its hydration write `en-US`, and the components switch once
+     * hydration is done. A server-rendered page that names it paints the reader's
+     * format from the start.
+     */
     locale?: string;
     /** Which day their weeks start on, as `Date` counts them — Sunday is `0`. */
     weekStartsOn?: PlassWeekday;
@@ -85,3 +92,29 @@ export declare const DefaultsContext: React.Context<PlassDefaults>;
  * compact application.
  */
 export declare function useDefaults(): PlassDefaults;
+/** What a server render and its hydration format in when nobody named a locale. */
+declare const hydrationLocale = "en-US";
+/**
+ * The locale to format in, given the one a component was told.
+ *
+ * `given` comes back as it is. Left out, it is `undefined` — the runtime's own
+ * locale — except in a server render and its hydration, where it is `en-US`.
+ * For the few components that do not read the provider's locale; the rest call
+ * {@link useLocale}.
+ */
+export declare function useRuntimeLocale<T extends Intl.LocalesArgument>(given: T): T | typeof hydrationLocale;
+/**
+ * The locale a component formats in: its own `locale` prop, then the nearest
+ * provider's, then the runtime's, which a server render and its hydration pin
+ * to `en-US`. See {@link useRuntimeLocale}.
+ */
+export declare function useLocale<T extends Intl.LocalesArgument = string | undefined>(own?: T): T | string | undefined;
+/** What a server render and its hydration read the clock in. */
+declare const hydrationTimeZone = "UTC";
+/**
+ * The zone to read the clock in: `undefined` — the runtime's own — except in a
+ * server render and its hydration, where it is `UTC`. `todayIn` in
+ * `internal/date.ts` turns it into a day.
+ */
+export declare function useRuntimeTimeZone(): typeof hydrationTimeZone | undefined;
+export {};

package/dist/internal/defaults.js

@@ -1 +1 @@
-"use client";import*as t from"react";const e=/* @__PURE__ */Object.freeze({});export const DefaultsContext=/* @__PURE__ */t.createContext(e);export function useDefaults(){return t.useContext(DefaultsContext)}
+"use client";import*as e from"react";const n=/* @__PURE__ */Object.freeze({});export const DefaultsContext=/* @__PURE__ */e.createContext(n);export function useDefaults(){return e.useContext(DefaultsContext)}function subscribeToNothing(){return unsubscribeFromNothing}function unsubscribeFromNothing(){}export function useRuntimeLocale(n){return e.useSyncExternalStore(subscribeToNothing,()=>n,()=>n??"en-US")}export function useLocale(n){const t=e.useContext(DefaultsContext).locale;return useRuntimeLocale(n??t)}function runtimeTimeZone(){}function pinnedTimeZone(){return"UTC"}export function useRuntimeTimeZone(){return e.useSyncExternalStore(subscribeToNothing,runtimeTimeZone,pinnedTimeZone)}

package/dist/internal/direction.d.ts

@@ -1,4 +1,10 @@
 /** The two directions a document can run in. */
 export type PlassDirection = 'ltr' | 'rtl';
-/** Which way the document runs, re-rendering when it turns over. */
-export declare function useDocumentDirection(): PlassDirection;
+/**
+ * Which way the document runs, re-rendering when it turns over.
+ *
+ * `active: false` answers `ltr` without reading the document or listening to
+ * it, for a component that needs the direction only in one of its states and
+ * should cost nothing in the others.
+ */
+export declare function useDocumentDirection(active?: boolean): PlassDirection;

package/dist/internal/direction.js

@@ -1 +1 @@
-"use client";import*as e from"react";function read(){return"undefined"==typeof document?"ltr":"rtl"===getComputedStyle(document.documentElement).direction?"rtl":"ltr"}let t=null,n=null;const r=new Set;function snapshot(){return null===t&&(t=read()),t}function onServer(){return"ltr"}function subscribe(e){return r.add(e),n||"undefined"==typeof document||(n=new MutationObserver(()=>{const e=read();e!==t&&(t=e,r.forEach(e=>e()))}),n.observe(document.documentElement,{attributes:!0,attributeFilter:["dir","class","style"]})),()=>{r.delete(e),0===r.size&&(n?.disconnect(),n=null,t=null)}}export function useDocumentDirection(){return e.useSyncExternalStore(subscribe,snapshot,onServer)}
+"use client";import*as e from"react";function read(){return"undefined"==typeof document?"ltr":"rtl"===getComputedStyle(document.documentElement).direction?"rtl":"ltr"}let t=null,n=null;const r=new Set;function snapshot(){return null===t&&(t=read()),t}function onServer(){return"ltr"}function subscribe(e){return r.add(e),n||"undefined"==typeof document||(n=new MutationObserver(()=>{const e=read();e!==t&&(t=e,r.forEach(e=>e()))}),n.observe(document.documentElement,{attributes:!0,attributeFilter:["dir","class","style"]})),()=>{r.delete(e),0===r.size&&(n?.disconnect(),n=null,t=null)}}function idle(){return()=>{}}export function useDocumentDirection(t=!0){return e.useSyncExternalStore(t?subscribe:idle,t?snapshot:onServer,onServer)}

package/dist/internal/form.d.ts

@@ -53,6 +53,49 @@ export declare const FadedContext: React.Context<boolean>;
  * a control in one draws itself exactly as it would with `disabled` of its own.
  */
 export declare function useDisabled(disabled: boolean | undefined): boolean;
+/** The two attributes a caller names a control with. */
+export interface ControlNaming {
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+}
+/**
+ * A caller's `aria-label` and `aria-labelledby`, for the control a field's
+ * other props are carried past.
+ *
+ * A labelled field spreads what it does not know onto the stack around it, and
+ * a `<div>` with no role is named by neither: a select in a toolbar, with no
+ * room for a `label`, had no way to name its trigger.
+ *
+ * Base UI merges a caller's props over its own, and its own `aria-labelledby`
+ * points at the visible label, which would outrank an `aria-label`. So an
+ * `aria-label` given without an `aria-labelledby` comes with that key holding
+ * `undefined`, which takes Base UI's away and leaves the `aria-label` as the
+ * name in the label's place, as an `aria-label` outranks a `<label>` on a
+ * native control. A caller's `aria-labelledby` outranks both. With neither,
+ * neither key is there, and the label goes on naming the control.
+ *
+ * A meter and the three progress indicators take them on their root for the
+ * same reason: Base UI's `Meter.Root` and `Progress.Root` point their own
+ * `aria-labelledby` at the visible label.
+ */
+export declare function controlNaming(label: string | undefined, labelledBy: string | undefined): ControlNaming;
+/**
+ * The `aria-labelledby` that names a control by a caller's `aria-label`, and
+ * the hidden words it points at, for a Base UI part `controlNaming` cannot
+ * reach.
+ *
+ * A checkbox, a switch, a radio, and the group around a slider's thumbs or a
+ * code's slots read `aria-labelledby` themselves and fall back to the visible
+ * label for anything but a reference of the caller's, `undefined` included. So
+ * an `aria-label` given without an `aria-labelledby` is written into a hidden
+ * node as well, and the part is pointed at that, which leaves the `aria-label`
+ * as the name in the label's place. A caller's `aria-labelledby` comes back as
+ * it was, and with neither there is no reference and no node.
+ */
+export declare function useLabelReference(label: string | undefined, labelledBy: string | undefined): {
+    labelledBy: string | undefined;
+    node: React.ReactNode;
+};
 /**
  * Whether `element` is inside a disabled `<fieldset>`, re-rendering when a
  * fieldset around it turns `disabled` on or off.

package/dist/internal/form.js

@@ -1 +1 @@
-import{jsx as e,Fragment as t,jsxs as n}from"react/jsx-runtime";import*as o from"react";import{Field as r}from"@base-ui/react/field";export const FormReportContext=/* @__PURE__ */o.createContext(null);export function useFormReport(e,t,n=!0){const r=o.useContext(FormReportContext),s=o.useRef(t);o.useEffect(()=>{s.current=t}),o.useEffect(()=>{if(!r||!e||!n)return;const entry=()=>s.current();return r.set(e,entry),()=>{r.get(e)===entry&&r.delete(e)}},[r,e,n])}export const FieldsetDisabledContext=/* @__PURE__ */o.createContext(!1);export const FadedContext=/* @__PURE__ */o.createContext(!1);export function useDisabled(e){return o.useContext(FieldsetDisabledContext)||!0===e}function fieldsetsAround(e){const t=[];for(let n=e.parentElement?.closest("fieldset");n;n=n.parentElement?.closest("fieldset"))t.push(n);return t}export function useFieldsetDisabled(e){const t=o.useCallback(t=>{if(!e)return()=>{};const n=new MutationObserver(t);return fieldsetsAround(e).forEach(e=>n.observe(e,{attributes:!0,attributeFilter:["disabled"]})),()=>n.disconnect()},[e]);return o.useSyncExternalStore(t,()=>null!==e&&fieldsetsAround(e).some(t=>t.disabled&&!t.querySelector(":scope > legend")?.contains(e)),()=>!1)}export function leaveFormControl(e){e?.dispatchEvent(new FocusEvent("focusout",{bubbles:!0}))}export const FormControl=/* @__PURE__ */o.forwardRef(function FormControl({name:o,value:s,required:i,disabled:u,standIn:a},l){const d=Array.isArray(s),c=d?s.length>0&&s.every(e=>""!==e):""!==s;return useFormReport(o,()=>[...s],d&&!u),n(t,{children:[e(r.Control,{ref:l,name:o,value:d?c?s.join("\n"):"":s,required:i,disabled:u,tabIndex:-1,"aria-hidden":"true",autoComplete:"off",className:"pointer-events-none absolute size-px overflow-hidden opacity-0 [clip-path:inset(50%)]",onFocus:()=>a()?.focus(),render:d?t=>e("input",{...t,name:void 0}):void 0}),d&&o?s.map((t,n)=>e("input",{type:"hidden",name:o,value:t,disabled:u},n)):null]})});
+import{jsx as e,Fragment as t,jsxs as n}from"react/jsx-runtime";import*as o from"react";import{Field as r}from"@base-ui/react/field";export const FormReportContext=/* @__PURE__ */o.createContext(null);export function useFormReport(e,t,n=!0){const r=o.useContext(FormReportContext),s=o.useRef(t);o.useEffect(()=>{s.current=t}),o.useEffect(()=>{if(!r||!e||!n)return;const entry=()=>s.current();return r.set(e,entry),()=>{r.get(e)===entry&&r.delete(e)}},[r,e,n])}export const FieldsetDisabledContext=/* @__PURE__ */o.createContext(!1);export const FadedContext=/* @__PURE__ */o.createContext(!1);export function useDisabled(e){return o.useContext(FieldsetDisabledContext)||!0===e}export function controlNaming(e,t){return{...void 0===e?null:{"aria-label":e},...void 0!==t||e?{"aria-labelledby":t}:null}}export function useLabelReference(t,n){const r=o.useId();return void 0===n&&t?{labelledBy:r,node:e("span",{id:r,hidden:!0,children:t})}:{labelledBy:n,node:null}}function fieldsetsAround(e){const t=[];for(let n=e.parentElement?.closest("fieldset");n;n=n.parentElement?.closest("fieldset"))t.push(n);return t}export function useFieldsetDisabled(e){const t=o.useCallback(t=>{if(!e)return()=>{};const n=new MutationObserver(t);return fieldsetsAround(e).forEach(e=>n.observe(e,{attributes:!0,attributeFilter:["disabled"]})),()=>n.disconnect()},[e]);return o.useSyncExternalStore(t,()=>null!==e&&fieldsetsAround(e).some(t=>t.disabled&&!t.querySelector(":scope > legend")?.contains(e)),()=>!1)}export function leaveFormControl(e){e?.dispatchEvent(new FocusEvent("focusout",{bubbles:!0}))}export const FormControl=/* @__PURE__ */o.forwardRef(function FormControl({name:o,value:s,required:l,disabled:i,standIn:a},u){const d=Array.isArray(s),c=d?s.length>0&&s.every(e=>""!==e):""!==s;return useFormReport(o,()=>[...s],d&&!i),n(t,{children:[e(r.Control,{ref:u,name:o,value:d?c?s.join("\n"):"":s,required:l,disabled:i,tabIndex:-1,"aria-hidden":"true",autoComplete:"off",className:"pointer-events-none absolute size-px overflow-hidden opacity-0 [clip-path:inset(50%)]",onFocus:()=>a()?.focus(),render:d?t=>e("input",{...t,name:void 0}):void 0}),d&&o?s.map((t,n)=>e("input",{type:"hidden",name:o,value:t,disabled:i},n)):null]})});

package/dist/internal/format.d.ts

@@ -20,7 +20,10 @@
  * object on every render, which is the ordinary way that prop gets written, and
  * keying on identity would miss every time and cache nothing but garbage.
  */
-/** A memoised `Intl.DateTimeFormat`. */
+/**
+ * A memoised `Intl.DateTimeFormat`, built again when the runtime's time zone
+ * has changed since it was.
+ */
 export declare function dateFormatter(locale: string | undefined, options: Intl.DateTimeFormatOptions): Intl.DateTimeFormat;
 /** A memoised `Intl.NumberFormat`. */
 export declare function numberFormatter(locale: string | undefined, options?: Intl.NumberFormatOptions): Intl.NumberFormat;

package/dist/internal/format.js

@@ -1 +1 @@
-function cacheKey(t,e){return`${t??""}\0${e?JSON.stringify(e):""}`}const t=new Map;export function dateFormatter(e,n){const r=cacheKey(e,n);let c=t.get(r);return c||(c=new Intl.DateTimeFormat(e,n),t.set(r,c)),c}const e=new Map;export function numberFormatter(t,n){const r=cacheKey(t,n);let c=e.get(r);return c||(c=new Intl.NumberFormat(t,n),e.set(r,c)),c}
+function cacheKey(e,t){return`${e??""}\0${t?JSON.stringify(t):""}`}const e=new Map,t=/* @__PURE__ */new Date(16094592e5),n=/* @__PURE__ */new Date(16250976e5);let r=Number.NaN,o=Number.NaN;export function dateFormatter(a,c){(function zoneHasMoved(){const e=t.getTimezoneOffset(),a=n.getTimezoneOffset();return(e!==r||a!==o)&&(r=e,o=a,!0)})()&&e.clear();const u=cacheKey(a,c);let m=e.get(u);return m||(m=new Intl.DateTimeFormat(a,c),e.set(u,m)),m}const a=new Map;export function numberFormatter(e,t){const n=cacheKey(e,t);let r=a.get(n);return r||(r=new Intl.NumberFormat(e,t),a.set(n,r)),r}