neba 1.11.0 → 1.12.0

package/dist/index.js

@@ -1 +1 @@
-export*from"./types.js";export*from"./hooks/index.js";export*from"./components/accordion/index.js";export*from"./components/alert/index.js";export*from"./components/anchor/index.js";export*from"./components/animate-appear/index.js";export*from"./components/app-logo/index.js";export*from"./components/animate-blink/index.js";export*from"./components/animate-fade/index.js";export*from"./components/animate-grow/index.js";export*from"./components/animate-headline/index.js";export*from"./components/animate-lighting/index.js";export*from"./components/animate-marquee/index.js";export*from"./components/animate-rotate/index.js";export*from"./components/animate-slide/index.js";export*from"./components/animate-typing/index.js";export*from"./components/animate-zoom/index.js";export*from"./components/area-chart/index.js";export*from"./components/aspect-ratio/index.js";export*from"./components/avatar/index.js";export*from"./components/avatar-group/index.js";export*from"./components/badge/index.js";export*from"./components/bar-chart/index.js";export*from"./components/blockquote/index.js";export*from"./components/bottom-navigation/index.js";export*from"./components/box/index.js";export*from"./components/breadcrumb/index.js";export*from"./components/button/index.js";export*from"./components/button-group/index.js";export*from"./components/calendar/index.js";export*from"./components/card/index.js";export*from"./components/carousel/index.js";export*from"./components/chat-bubble/index.js";export*from"./components/checkbox/index.js";export*from"./components/chip/index.js";export*from"./components/code-block/index.js";export*from"./components/collapsible/index.js";export*from"./components/color-picker/index.js";export*from"./components/combobox/index.js";export*from"./components/command-palette/index.js";export*from"./components/confirm/index.js";export*from"./components/container/index.js";export*from"./components/data-list/index.js";export*from"./components/data-table/index.js";export*from"./components/date-picker/index.js";export*from"./components/date-range-picker/index.js";export*from"./components/date-time-picker/index.js";export*from"./components/dialog/index.js";export*from"./components/divider/index.js";export*from"./components/drawer/index.js";export*from"./components/empty/index.js";export*from"./components/fieldset/index.js";export*from"./components/file-picker/index.js";export*from"./components/form/index.js";export*from"./components/gauge-chart/index.js";export*from"./components/grid/index.js";export*from"./components/floating-action-button/index.js";export*from"./components/floating-bottom-navigation/index.js";export*from"./components/footer/index.js";export*from"./components/grid-container/index.js";export*from"./components/header/index.js";export*from"./components/heatmap-chart/index.js";export*from"./components/highlight/index.js";export*from"./components/hover-card/index.js";export*from"./components/how-to-steps/index.js";export*from"./components/icon/index.js";export*from"./components/icon-button/index.js";export*from"./components/image/index.js";export*from"./components/line-chart/index.js";export*from"./components/list/index.js";export*from"./components/menu/index.js";export*from"./components/menubar/index.js";export*from"./components/meter/index.js";export*from"./components/mockup/index.js";export*from"./components/navigation-menu/index.js";export*from"./components/number-field/index.js";export*from"./components/otp-field/index.js";export*from"./components/overlay/index.js";export*from"./components/page-layout/index.js";export*from"./components/pagination/index.js";export*from"./components/panes/index.js";export*from"./components/pie-chart/index.js";export*from"./components/pill/index.js";export*from"./components/popconfirm/index.js";export*from"./components/popover/index.js";export*from"./components/portal/index.js";export*from"./components/progress-box/index.js";export*from"./components/progress-circular/index.js";export*from"./components/progress-linear/index.js";export*from"./components/provider/index.js";export*from"./components/radio-group/index.js";export*from"./components/rating/index.js";export*from"./components/scatter-chart/index.js";export*from"./components/scroll-area/index.js";export*from"./components/scroll-zone/index.js";export*from"./components/segmented-button/index.js";export*from"./components/select/index.js";export*from"./components/shortcut/index.js";export*from"./components/sidebar/index.js";export*from"./components/skeleton/index.js";export*from"./components/slider/index.js";export*from"./components/sparkline/index.js";export*from"./components/spoiler/index.js";export*from"./components/statistic/index.js";export*from"./components/switch/index.js";export*from"./components/table/index.js";export*from"./components/tabs/index.js";export*from"./components/text-field/index.js";export*from"./components/text-link/index.js";export*from"./components/time-picker/index.js";export*from"./components/timeline/index.js";export*from"./components/timeline-chart/index.js";export*from"./components/toast/index.js";export*from"./components/toggle/index.js";export*from"./components/toggle-group/index.js";export*from"./components/toolbar/index.js";export*from"./components/tooltip/index.js";export*from"./components/tour/index.js";export*from"./components/transfer/index.js";export*from"./components/tree-select/index.js";export*from"./components/tree-view/index.js";export*from"./components/typography/index.js";export*from"./components/visually-hidden/index.js";export*from"./components/window-pane/index.js";
+export*from"./types.js";export*from"./hooks/index.js";export*from"./components/accordion/index.js";export*from"./components/alert/index.js";export*from"./components/anchor/index.js";export*from"./components/animate-appear/index.js";export*from"./components/app-logo/index.js";export*from"./components/animate-blink/index.js";export*from"./components/animate-counter/index.js";export*from"./components/animate-fade/index.js";export*from"./components/animate-float/index.js";export*from"./components/animate-grow/index.js";export*from"./components/animate-headline/index.js";export*from"./components/animate-lighting/index.js";export*from"./components/animate-marquee/index.js";export*from"./components/animate-reveal/index.js";export*from"./components/animate-rotate/index.js";export*from"./components/animate-scramble/index.js";export*from"./components/animate-shake/index.js";export*from"./components/animate-split/index.js";export*from"./components/animate-slide/index.js";export*from"./components/animate-typing/index.js";export*from"./components/animate-zoom/index.js";export*from"./components/area-chart/index.js";export*from"./components/aspect-ratio/index.js";export*from"./components/avatar/index.js";export*from"./components/badge/index.js";export*from"./components/bar-chart/index.js";export*from"./components/blockquote/index.js";export*from"./components/bottom-navigation/index.js";export*from"./components/box/index.js";export*from"./components/breadcrumb/index.js";export*from"./components/button/index.js";export*from"./components/button-group/index.js";export*from"./components/calendar/index.js";export*from"./components/card/index.js";export*from"./components/carousel/index.js";export*from"./components/chat-bubble/index.js";export*from"./components/checkbox/index.js";export*from"./components/chip/index.js";export*from"./components/code-block/index.js";export*from"./components/collapsible/index.js";export*from"./components/color-picker/index.js";export*from"./components/combobox/index.js";export*from"./components/command-palette/index.js";export*from"./components/confirm/index.js";export*from"./components/container/index.js";export*from"./components/data-list/index.js";export*from"./components/data-table/index.js";export*from"./components/date-picker/index.js";export*from"./components/date-range-picker/index.js";export*from"./components/date-time-picker/index.js";export*from"./components/dialog/index.js";export*from"./components/divider/index.js";export*from"./components/drawer/index.js";export*from"./components/empty/index.js";export*from"./components/fieldset/index.js";export*from"./components/file-picker/index.js";export*from"./components/flex/index.js";export*from"./components/form/index.js";export*from"./components/gallery/index.js";export*from"./components/gauge-chart/index.js";export*from"./components/grid/index.js";export*from"./components/floating-action-button/index.js";export*from"./components/floating-bottom-navigation/index.js";export*from"./components/footer/index.js";export*from"./components/grid-container/index.js";export*from"./components/header/index.js";export*from"./components/heatmap-chart/index.js";export*from"./components/highlight/index.js";export*from"./components/hover-card/index.js";export*from"./components/how-to-steps/index.js";export*from"./components/icon/index.js";export*from"./components/icon-button/index.js";export*from"./components/image/index.js";export*from"./components/line-chart/index.js";export*from"./components/list/index.js";export*from"./components/menu/index.js";export*from"./components/menubar/index.js";export*from"./components/meter/index.js";export*from"./components/mockup/index.js";export*from"./components/navigation-menu/index.js";export*from"./components/number-field/index.js";export*from"./components/otp-field/index.js";export*from"./components/overlay/index.js";export*from"./components/page-layout/index.js";export*from"./components/pagination/index.js";export*from"./components/panes/index.js";export*from"./components/pie-chart/index.js";export*from"./components/pill/index.js";export*from"./components/popconfirm/index.js";export*from"./components/popover/index.js";export*from"./components/portal/index.js";export*from"./components/progress-box/index.js";export*from"./components/progress-circular/index.js";export*from"./components/progress-linear/index.js";export*from"./components/provider/index.js";export*from"./components/radio-group/index.js";export*from"./components/rating/index.js";export*from"./components/scatter-chart/index.js";export*from"./components/scroll-area/index.js";export*from"./components/scroll-zone/index.js";export*from"./components/segmented-button/index.js";export*from"./components/select/index.js";export*from"./components/shortcut/index.js";export*from"./components/show/index.js";export*from"./components/sidebar/index.js";export*from"./components/skeleton/index.js";export*from"./components/slider/index.js";export*from"./components/sparkline/index.js";export*from"./components/spoiler/index.js";export*from"./components/stack/index.js";export*from"./components/statistic/index.js";export*from"./components/switch/index.js";export*from"./components/table/index.js";export*from"./components/tabs/index.js";export*from"./components/text-field/index.js";export*from"./components/text-link/index.js";export*from"./components/time-picker/index.js";export*from"./components/timeline/index.js";export*from"./components/timeline-chart/index.js";export*from"./components/toast/index.js";export*from"./components/toggle/index.js";export*from"./components/toggle-group/index.js";export*from"./components/toolbar/index.js";export*from"./components/tooltip/index.js";export*from"./components/tour/index.js";export*from"./components/transfer/index.js";export*from"./components/tree-select/index.js";export*from"./components/tree-view/index.js";export*from"./components/typography/index.js";export*from"./components/visually-hidden/index.js";export*from"./components/window-pane/index.js";

package/dist/internal/animate.d.ts

@@ -28,7 +28,7 @@
  * components, and their logic stays in their own files.
  */
 import * as React from 'react';
-import type { NebaAnimateRepeat, NebaAnimateTrigger, NebaAnimation, NebaSide, NebaTransition } from '../types.js';
+import type { NebaAnimateRepeat, NebaAnimateTimeline, NebaAnimateTrigger, NebaAnimation, NebaSide, NebaTransition } from '../types.js';
 /**
  * Which keyframe an effect runs.
  *
@@ -49,6 +49,8 @@ export declare const animBaseClass = "neba-anim";
  * an arrival, so its number is a period.
  */
 export declare const defaultDurations: Record<NebaAnimation, number>;
+/** Where a `reveal` is clipped to before its edge travels across. */
+export declare function revealClip(side: NebaSide): string;
 /** A number is pixels; a string is already a CSS length. */
 export declare function lengthValue(value: number | string): string;
 export declare function isInfinite(repeat: NebaAnimateRepeat | undefined): boolean;
@@ -66,6 +68,11 @@ export interface AnimationSlotOptions {
     y?: string;
     angle?: string;
     angleTo?: string;
+    clip?: string;
+    /** `view` points the effect at a scroll timeline instead of the clock. */
+    timeline?: NebaAnimateTimeline;
+    /** The `animation-range` a `view` timeline is mapped over. */
+    range?: string;
 }
 /**
  * The `--n-anim-*` slots, as an inline style object.
@@ -86,6 +93,30 @@ export declare function slideOffsets(from: NebaSide, distance: number | string):
     x: string;
     y: string;
 };
+export interface StaggerOptions {
+    /** Milliseconds of delay added per child. */
+    stagger: number;
+    /** Milliseconds of duration added per child. Negative speeds them up. */
+    durationStep: number;
+    /** Runs the list last-to-first. Only the order reverses. */
+    reverse: boolean;
+}
+/** Whether these options ask for anything the root cannot do on its own. */
+export declare function staggers({ stagger, durationStep }: StaggerOptions): boolean;
+/**
+ * The same effect on each child, held back by its position.
+ *
+ * The animation is written onto the children **themselves** rather than onto
+ * wrappers around them. A row of `<li>`s stays a row of `<li>`s, a grid's cells
+ * stay its direct children, and nothing about the layout changes because the
+ * list is being animated. Only a bare string has no element to write onto, so
+ * that one gets a `<span>`.
+ *
+ * The step is per *child*, which means what is passed matters: eight children
+ * are eight steps, and one child holding eight things is one step. That is also
+ * how to opt part of a list out — group it.
+ */
+export declare function staggerChildren(children: React.ReactNode, effectClass: string, slots: AnimationSlotOptions, { stagger, durationStep, reverse }: StaggerOptions): React.ReactNode[];
 /**
  * What a component's `transition` prop turns into: one class pair and a handful
  * of custom properties, merged into whatever the component was already writing.
@@ -99,6 +130,19 @@ export declare function transitionProps(transition: NebaTransition | undefined):
     className: string;
     style: React.CSSProperties;
 };
+/**
+ * The same reading, one step before it becomes a class and a style object.
+ *
+ * A component that draws its children into boxes of its own — Stack — needs the
+ * *options* rather than the finished style, because it has a step per child to
+ * add to the delay before the slots are filled. Splitting it here is what keeps
+ * one table: `transition="fade"` on a Card and on a Stack item are the same
+ * fade, read by the same code.
+ */
+export declare function transitionParts(transition: NebaTransition | undefined): {
+    effect: NebaAnimation;
+    slots: AnimationSlotOptions;
+} | null;
 /**
  * Whether the reader has asked for less motion — the hook the three effects
  * with motion written in JavaScript read. It lives in `media.ts` beside the
@@ -146,8 +190,25 @@ export interface AnimationRun {
  */
 export declare function useAnimationRun({ trigger, play, once, threshold, paused, infinite }: AnimationRunOptions): AnimationRun;
 export interface AnimateElementParams extends AnimationSlotOptions, AnimationRunOptions {
-    /** Which keyframe. `null` for the components that write their own. */
+    /** Which keyframe, out of the shared table. `null` to bring your own. */
     effect: NebaAnimation | null;
+    /**
+     * A keyframe class of this component's own, for an effect that is not in the
+     * `transition` vocabulary — `AnimateFloat` and `AnimateShake`. Everything else
+     * about them is the same machinery, `stagger` included, which is the whole
+     * reason this is a parameter rather than a second hook.
+     */
+    effectClass?: string;
+    /** What `data-neba-animation` says. Defaults to `effect`. */
+    name?: string;
+    /**
+     * What is inside. Only read to hand each child an effect of its own — pass it
+     * and render `children` back, or leave it out and render your own.
+     */
+    children?: React.ReactNode;
+    stagger?: number;
+    durationStep?: number;
+    reverse?: boolean;
 }
 export interface AnimateElement {
     ref: React.RefCallback<HTMLElement>;
@@ -155,6 +216,8 @@ export interface AnimateElement {
     style: React.CSSProperties;
     /** The hover handlers and the two data attributes, ready to be spread. */
     props: React.HTMLAttributes<HTMLElement> & Record<string, unknown>;
+    /** The children as given, or one animation each once a step is asked for. */
+    children: React.ReactNode;
 }
 /**
  * Everything an `Animate*` root needs, in one call.

package/dist/internal/animate.js

@@ -1 +1 @@
-"use client";import*as e from"react";import{observeVisibility as n}from"./observe.js";export const animationClasses={fade:"neba-anim-fade",grow:"neba-anim-scale",slide:"neba-anim-slide",zoom:"neba-anim-scale",rotate:"neba-anim-rotate",blink:"neba-anim-blink"};export const animBaseClass="neba-anim";export const defaultDurations={fade:320,grow:340,slide:380,zoom:340,rotate:460,blink:900};export function lengthValue(e){return"number"==typeof e?`${e}px`:e}export function isInfinite(e){return"infinite"===e}export function animationSlots(e){const n={"--n-anim-duration":`${e.duration}ms`,"--n-anim-delay":`${e.delay}ms`,"--n-anim-repeat":(i=e.repeat,"infinite"===i?"infinite":String(i)),"--n-anim-direction":(t=e.mode??"in",a=e.alternate,"out"===t?a?"alternate-reverse":"reverse":a?"alternate":"normal")};var t,a,i;return e.easing&&(n["--n-anim-ease"]=e.easing),void 0!==e.opacity&&(n["--n-anim-opacity"]=String(e.opacity)),void 0!==e.scale&&(n["--n-anim-scale"]=String(e.scale)),void 0!==e.x&&(n["--n-anim-x"]=e.x),void 0!==e.y&&(n["--n-anim-y"]=e.y),void 0!==e.angle&&(n["--n-anim-angle"]=e.angle),void 0!==e.angleTo&&(n["--n-anim-angle-to"]=e.angleTo),n}export function slideOffsets(e,n){const t=lengthValue(n),a="number"==typeof n?-n+"px":`calc(-1 * ${t})`;switch(e){case"top":return{x:"0px",y:a};case"bottom":return{x:"0px",y:t};case"left":return{x:a,y:"0px"};default:return{x:t,y:"0px"}}}export function transitionProps(e){if(!e)return{className:"",style:{}};const n="string"==typeof e?{type:e}:e,{type:t}=n,a={duration:n.duration??defaultDurations[t],delay:n.delay??0,easing:n.easing,repeat:n.repeat??("blink"===t?"infinite":1),alternate:n.alternate};if("grow"!==t&&"zoom"!==t||(a.scale=n.scale??("zoom"===t?.4:.8)),"slide"===t){const{x:e,y:t}=slideOffsets(n.from??"bottom",n.distance??"100%");a.x=e,a.y=t}return"rotate"===t&&(a.angle=`${n.angle??-180}deg`),{className:`neba-anim ${animationClasses[t]}`,style:animationSlots(a)}}export{usePrefersReducedMotion}from"./media.js";export function useAnimationRun({trigger:t,play:a,once:i,threshold:o,paused:r,infinite:s}){const l=e.useRef(null),[u,m]=e.useState("mount"===t),[c,f]=e.useState(0),d=e.useCallback(()=>{m(!0),f(e=>e+1)},[]);e.useLayoutEffect(()=>{const e=l.current;if(!e||0===c)return;const n=[e,...e.querySelectorAll(".neba-anim, .neba-marquee-track")];for(const e of n)e.style.animationName="none";e.offsetWidth;for(const e of n)e.style.animationName=""},[c]),e.useEffect(()=>{if("visible"!==t)return;const e=l.current;if(!e)return;let a=null;if(a=n(e,o,e=>{e?(d(),i&&(a?.(),a=null)):i||m(!1)}),a)return()=>a?.();m(!0)},[t,i,o,d]),e.useEffect(()=>{"manual"===t&&(a?d():m(!1))},[t,a,d]);const p="hover"===t?{onPointerEnter:d,onFocus:d,onPointerLeave:()=>{s&&m(!1)},onBlur:()=>{s&&m(!1)}}:{};return{ref:e.useCallback(e=>{l.current=e},[]),state:u&&!r?"running":"paused",started:u,handlers:p}}export function useAnimateElement(e){const{effect:n,trigger:t,play:a,once:i,threshold:o,paused:r,infinite:s,...l}=e,u=useAnimationRun({trigger:t,play:a,once:i,threshold:o,paused:r,infinite:s});return{ref:u.ref,className:n?`neba-anim ${animationClasses[n]}`:"",style:{...animationSlots(l),"--n-anim-state":u.state},props:{...u.handlers,"data-neba-animation":n??void 0,"data-state":u.state}}}
+"use client";import{jsx as e}from"react/jsx-runtime";import*as n from"react";import{observeVisibility as t}from"./observe.js";import{cx as a}from"./styles.js";export const animationClasses={fade:"neba-anim-fade",grow:"neba-anim-scale",slide:"neba-anim-slide",zoom:"neba-anim-scale",rotate:"neba-anim-rotate",blink:"neba-anim-blink",reveal:"neba-anim-reveal"};export const animBaseClass="neba-anim";export const defaultDurations={fade:320,grow:340,slide:380,zoom:340,rotate:460,blink:900,reveal:620};export function revealClip(e){switch(e){case"top":return"inset(0 0 100% 0)";case"bottom":return"inset(100% 0 0 0)";case"right":return"inset(0 0 0 100%)";default:return"inset(0 100% 0 0)"}}export function lengthValue(e){return"number"==typeof e?`${e}px`:e}export function isInfinite(e){return"infinite"===e}export function animationSlots(e){const n={"--n-anim-duration":`${e.duration}ms`,"--n-anim-delay":`${e.delay}ms`,"--n-anim-repeat":(r=e.repeat,"infinite"===r?"infinite":String(r)),"--n-anim-direction":(t=e.mode??"in",a=e.alternate,"out"===t?a?"alternate-reverse":"reverse":a?"alternate":"normal")};var t,a,r;return e.easing&&(n["--n-anim-ease"]=e.easing),void 0!==e.opacity&&(n["--n-anim-opacity"]=String(e.opacity)),void 0!==e.scale&&(n["--n-anim-scale"]=String(e.scale)),void 0!==e.x&&(n["--n-anim-x"]=e.x),void 0!==e.y&&(n["--n-anim-y"]=e.y),void 0!==e.angle&&(n["--n-anim-angle"]=e.angle),void 0!==e.angleTo&&(n["--n-anim-angle-to"]=e.angleTo),void 0!==e.clip&&(n["--n-anim-clip"]=e.clip),"view"===e.timeline&&(n["--n-anim-timeline"]="view()",n["--n-anim-range"]=e.range??"entry 0% cover 45%"),n}export function slideOffsets(e,n){const t=lengthValue(n),a="number"==typeof n?-n+"px":`calc(-1 * ${t})`;switch(e){case"top":return{x:"0px",y:a};case"bottom":return{x:"0px",y:t};case"left":return{x:a,y:"0px"};default:return{x:t,y:"0px"}}}export function staggers({stagger:e,durationStep:n}){return 0!==e||0!==n}export function staggerChildren(t,r,i,{stagger:s,durationStep:o,reverse:l}){const u=n.Children.toArray(t);return u.map((t,c)=>{const m=l?u.length-1-c:c,f=animationSlots({...i,delay:i.delay+m*s,duration:Math.max(0,i.duration+m*o)});if(!n.isValidElement(t))return e("span",{className:r,style:f,children:t},c);const d=t.props;return n.cloneElement(t,{className:a(r,d.className),style:{...f,...d.style}})})}export function transitionProps(e){const n=transitionParts(e);return n?{className:`neba-anim ${animationClasses[n.effect]}`,style:animationSlots(n.slots)}:{className:"",style:{}}}export function transitionParts(e){if(!e)return null;const n="string"==typeof e?{type:e}:e,{type:t}=n,a={duration:n.duration??defaultDurations[t],delay:n.delay??0,easing:n.easing,repeat:n.repeat??("blink"===t?"infinite":1),alternate:n.alternate,timeline:n.timeline,range:n.range};if("grow"!==t&&"zoom"!==t||(a.scale=n.scale??("zoom"===t?.4:.8)),"slide"===t){const{x:e,y:t}=slideOffsets(n.from??"bottom",n.distance??"100%");a.x=e,a.y=t}return"rotate"===t&&(a.angle=`${n.angle??-180}deg`),"reveal"===t&&(a.clip=revealClip(n.side??"left")),{effect:t,slots:a}}export{usePrefersReducedMotion}from"./media.js";export function useAnimationRun({trigger:e,play:a,once:r,threshold:i,paused:s,infinite:o}){const l=n.useRef(null),[u,c]=n.useState("mount"===e),[m,f]=n.useState(0),d=n.useCallback(()=>{c(!0),f(e=>e+1)},[]);n.useLayoutEffect(()=>{const e=l.current;if(!e||0===m)return;const n=[e,...e.querySelectorAll(".neba-anim, .neba-marquee-track")];for(const e of n)e.style.animationName="none";e.offsetWidth;for(const e of n)e.style.animationName=""},[m]),n.useEffect(()=>{if("visible"!==e)return;const n=l.current;if(!n)return;let a=null;if(a=t(n,i,e=>{e?(d(),r&&(a?.(),a=null)):r||c(!1)}),a)return()=>a?.();c(!0)},[e,r,i,d]),n.useEffect(()=>{"manual"===e&&(a?d():c(!1))},[e,a,d]);const p="hover"===e?{onPointerEnter:d,onFocus:d,onPointerLeave:()=>{o&&c(!1)},onBlur:()=>{o&&c(!1)}}:{};return{ref:n.useCallback(e=>{l.current=e},[]),state:u&&!s?"running":"paused",started:u,handlers:p}}export function useAnimateElement(e){const{effect:n,trigger:t,play:a,once:r,threshold:i,paused:s,infinite:o,children:l,stagger:u=0,durationStep:c=0,reverse:m=!1,effectClass:f,name:d,...p}=e,g=useAnimationRun({trigger:t,play:a,once:r,threshold:i,paused:s,infinite:o}),y=n?animationClasses[n]:f,x=y?`neba-anim ${y}`:"",v=""!==x&&staggers({stagger:u,durationStep:c,reverse:m}),b="view"===p.timeline?"running":g.state;return{ref:g.ref,className:v?"":x,style:v?{"--n-anim-state":b}:{...animationSlots(p),"--n-anim-state":b},props:{...g.handlers,"data-neba-animation":d??n??void 0,"data-state":b},children:v?staggerChildren(l,x,p,{stagger:u,durationStep:c,reverse:m}):l}}

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

@@ -46,6 +46,38 @@ declare function useMeasuredWidth(ref: React.RefObject<HTMLElement | null>): num
  * would be two edges where the design language wants one. `variant="outline"`
  * is there for the chart that stands on the page by itself.
  */
+/**
+ * How a mark answers the pointer: the three properties one is allowed to change
+ * when the reader points at it, and how long each takes.
+ *
+ * One declaration and one class on every mark, rather than one per property.
+ * `transition` is a shorthand, so two of them on the same element are decided by
+ * their order in the generated stylesheet rather than by intent — a scatter mark
+ * carrying a fade *and* a grow written separately keeps whichever Tailwind
+ * happened to emit last, which is the kind of bug that looks like the browser's
+ * fault. A property an element never changes costs it nothing.
+ *
+ * **`opacity`** is two states that are the same sentence at two scales. A whole
+ * *series* drops to 0.28 when the legend is pointed at one of the others; a
+ * single *datum* sits at 0.92 until the crosshair reaches it. Both mean "this is
+ * the one you asked about". It is also the one place a chart may say something
+ * with opacity at all: nothing here is a control, and "not the one you are
+ * pointing at" is not a state a colour family can carry without recolouring the
+ * data.
+ *
+ * **`r`** and **`scale`** are the same pixel of growth reached two ways, because
+ * the two shapes that grow are drawn differently. A line's marker is a
+ * `<circle>`, whose radius is the geometry property `r` — a number, which
+ * travels. A scatter's mark is an arbitrary `<path>`, whose size lives inside
+ * `d`, which does not; that one grows on the independent `scale` property about
+ * the point it is pinned to, so a triangle grows where it stands rather than
+ * drifting toward the middle of its own bounding box.
+ *
+ * Only the pie and the heatmap ever moved on any of this. The line, the area,
+ * the bar, the scatter and the timeline snapped, and a dashboard holding two of
+ * each showed both answers at once.
+ */
+export declare const markTransitionClasses: string;
 export interface ChartBaseProps extends Omit<BoxProps, 'children' | 'title'> {
     /**
      * How tall the drawing is. A number is pixels; a string is any CSS length.

package/dist/internal/chart-frame.js

@@ -1 +1 @@
-"use client";import{jsx as e,Fragment as t,jsxs as n}from"react/jsx-runtime";import*as l from"react";import{Box as a}from"../components/box/Box.js";import{bandScale as i,categoryAt as r,categoryCount as s,categoryExtent as o,chartFontSizes as c,compactNumber as d,extentOf as u,fitsLast as h,formatCategory as m,markerRadii as f,plotHeights as x,seriesColor as g,showsTick as p,textWidth as b,tickStride as v,toValues as y,truncate as k,valueScale as w}from"./chart.js";import{numberFormatter as M}from"./format.js";import{observeResize as N}from"./observe.js";import{chartMessages as z,emptyMessages as S,useMessages as C}from"./i18n.js";import{cx as A,hasContent as P,metaTextClasses as j,srOnlyClasses as W,transitionClasses as B}from"./styles.js";const F="undefined"==typeof document?l.useEffect:l.useLayoutEffect,E=[];function I(e){const[t,n]=l.useState(0);return F(()=>{const t=e.current;if(!t)return;const l=()=>n(t.clientWidth);return l(),N(t,l)},[e]),t}function R(e){const[t,n]=l.useState(()=>{const t=new Set;return e.forEach((e,n)=>{e.hidden&&t.add(n)}),t}),[a,i]=l.useState(null),r=l.useCallback(e=>{n(t=>{const n=new Set(t);return n.has(e)?n.delete(e):n.add(e),n})},[]);return{visible:e.map((e,n)=>!t.has(n)),hovered:a,toggle:r,setHovered:i}}const H={top:"flex-col-reverse",bottom:"flex-col",left:"flex-row-reverse",right:"flex-row"},$={start:"justify-start",center:"justify-center",end:"justify-end"};function _({series:l,colors:a,options:i,visibility:r,size:s,values:o,swatch:c}){const d=!1!==i.interactive,u="left"===i.side||"right"===i.side;return e("ul",{className:A("flex list-none flex-wrap items-center gap-x-3 gap-y-1 p-0",u?"min-w-0 flex-col items-start":"",$[i.align??"center"],j[s]),children:l.map((l,i)=>{const s=r.visible[i],u=null!==r.hovered&&r.hovered!==i,h=l.name??`${i+1}`,m=s?a[i]:"var(--neba-disabled-fg)",f=n(t,{children:[e("span",c?{"aria-hidden":"true",className:"flex size-2.5 shrink-0 items-center justify-center",children:c(i,m)}:{"aria-hidden":"true",className:"size-2.5 shrink-0 rounded-[0.1875rem]",style:{backgroundColor:m}}),e("span",{className:"min-w-0 truncate",children:h}),o?.[i]?e("span",{className:"shrink-0 tabular-nums text-(--neba-muted-fg)",children:o[i]}):null]});return e("li",{className:"min-w-0",children:d?e("button",{type:"button","aria-pressed":s,onClick:()=>r.toggle(i),onPointerEnter:()=>r.setHovered(i),onPointerLeave:()=>r.setHovered(null),onFocus:()=>r.setHovered(i),onBlur:()=>r.setHovered(null),className:A("flex min-w-0 cursor-pointer items-center gap-1.5 rounded-(--neba-radius-xs)","px-1 py-0.5 text-(--neba-fg)",B,"hover:bg-(--n-soft)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-1",s?"":"text-(--neba-disabled-fg)",u?"opacity-55":""),children:f}):e("span",{className:A("flex min-w-0 items-center gap-1.5 px-1 py-0.5 text-(--neba-fg)",s?"":"text-(--neba-disabled-fg)"),children:f})},l.name??i)})})}function T({steps:l,from:a,to:i,middle:r,align:s,vertical:o,size:c}){return e("div",{className:A("flex",o?"":$[s]),children:n("div",{className:A("grid grid-cols-[auto_auto_auto] items-center gap-x-2",j[c]),children:[e("span",{className:"shrink-0 tabular-nums text-(--neba-muted-fg)",children:a}),e("span",{"aria-hidden":"true",className:A("flex h-2.5 overflow-hidden rounded-[0.1875rem]",o?"w-20":"w-24"),children:l.map(t=>e("span",{className:"h-full flex-1",style:{backgroundColor:t}},t))}),e("span",{className:"shrink-0 tabular-nums text-(--neba-muted-fg)",children:i}),r?n(t,{children:[e("span",{}),e("span",{className:"text-center tabular-nums text-(--neba-muted-fg)",children:r}),e("span",{})]}):null]})})}function L({heading:t,items:l,x:a,y:i,flip:r,size:s}){return n("div",{"data-neba-tooltip":"",className:A("pointer-events-none absolute z-10 max-w-56 min-w-24","rounded-(--neba-radius-sm) border p-2","[background-image:var(--neba-grain),var(--neba-sheen)]","[background-blend-mode:overlay,normal] [backdrop-filter:var(--neba-blur)]","bg-(--neba-panel-press) [border-color:var(--n-line)]","[box-shadow:var(--neba-shadow-2),var(--neba-plate-glass)]",j[s]),style:r?{right:`calc(100% - ${a}px + 10px)`,top:i}:{left:a+10,top:i},children:[e("div",{className:"mb-1 font-medium text-(--neba-fg)",children:t}),e("ul",{className:"flex list-none flex-col gap-0.5 p-0",children:l.map(t=>n("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-(--neba-muted-fg)",children:t.name}):null,e("span",{className:"ms-auto shrink-0 font-medium tabular-nums text-(--neba-fg)",children:t.label??t.formatted})]},t.seriesIndex))})]})}function V({heading:a,items:i}){return e("span",{role:"status","aria-live":"polite",className:W,children:0===i.length?null:n(t,{children:[P(a)?n(t,{children:[a,", "]}):null,i.map((e,t)=>n(l.Fragment,{children:[t>0?", ":null,e.name?`${e.name}: `:null,e.label??e.formatted]},e.seriesIndex))]})})}function D({id:t,caption:l,corner:a,categories:i,series:r,values:s,format:o,locale:c}){return n("table",{id:t,className:W,children:[l?e("caption",{children:l}):null,e("thead",{children:n("tr",{children:[e("th",{scope:"col",children:a??""}),r.map((t,n)=>e("th",{scope:"col",children:t.name??n+1},t.name??n))]})}),e("tbody",{children:i.map((t,l)=>n("tr",{children:[e("th",{scope:"row",children:m(t,c)}),r.map((t,n)=>{const a=s[n]?.[l];return e("td",void 0!==a?.label?{children:a.label}:{children:null==a?.value?"":o(a.value)},t.name??n)})]},l))})]})}function X({legend:t,legendSide:l,children:i,table:r,className:s,...o}){return n(a,{...o,className:A("relative flex gap-3",H[l],s??void 0),children:[e("div",{className:"relative min-w-0 flex-1",children:i}),t,r]})}export function CartesianChart({series:t,categories:a,xAxis:h,yAxis:p,horizontal:v=!1,stacked:N=!1,includeZero:P=!0,bandRatio:W=1,inset:B=!1,headroom:F=0,markInset:H=0,xScale:$="band",marks:T,markRadius:Z=24,table:K,swatch:U,scale:q,markTooltip:G,height:J,format:O,locale:Q,label:ee,legend:te,tooltip:ne,empty:le,size:ae="md",variant:ie="text",padded:re=!1,className:se,children:oe,...ce}){const de=l.useRef(null),ue=I(de),he=C(S,Q),me=C(z,Q),fe=l.useId(),xe=R(t),[ge,pe]=l.useState(null),[be,ve]=l.useState(null),[ye,ke]=l.useState(null),we=l.useCallback(e=>O?M(Q,O).format(e):d(e,Q),[O,Q]),Me=l.useMemo(()=>y(t),[t]),Ne=l.useMemo(()=>t.map((e,t)=>g(e,t)),[t]),ze=s(t),Se=l.useMemo(()=>Array.from({length:ze},(e,t)=>r(t,a,Me)),[ze,a,Me]),Ce=Me.filter((e,t)=>xe.visible[t]),Ae=u(Ce,N),Pe="number"==typeof J?J:void 0===J?x[ae]:null,je=c[ae],We=p,Be=h,Fe=q??w(Ae,{min:We?.min,max:We?.max,tickCount:We?.tickCount,includeZero:P}),Ee="value"===$?o(Ce,a):null,Ie="value"===$?w(Ee,{min:Be?.min,max:Be?.max,tickCount:Be?.tickCount,includeZero:!1}):null,Re=Fe.ticks.map((e,t)=>We?.tickFormat?String(We.tickFormat(e,t)):we(e)),He=Ie?Ie.ticks.map((e,t)=>Be?.tickFormat?String(Be.tickFormat(e,t)):d(e,Q)):Se.map((e,t)=>Be?.tickFormat?String(Be.tickFormat(e,t)):m(e,Q)),$e=Re.reduce((e,t)=>Math.max(e,b(t,je)),0),_e=je+6,Te=We?.hidden?0:$e+10+(We?.label?_e:0),Le=(ue-(v?0:Te)-16)/Math.max(1,ze),Ve=Ie?He:v||Le-6>=2.4*je?He.map(e=>k(e,v?150:Le-6,je)):He,De=Ve.reduce((e,t)=>Math.max(e,b(t,je)),0),Xe=v?Be?.hidden?0:De+10+(Be?.label?_e:0):Te,Ye=v?We?.hidden?0:je+12+(We?.label?_e:0):Be?.hidden?0:je+12+(Be?.label?_e:0),Ze=(v?Be:We)?.thickness??Xe,Ke=(v?We:Be)?.thickness??Ye,Ue=(v||Ie?12:Math.max(8,Ve.length?De/2:8))+H,qe=f[ae]+4+F+H,Ge=Pe??0,Je={left:Ze+H,top:qe,width:Math.max(0,ue-Ze-H-Ue),height:Math.max(0,Ge-qe-Ke-H)},Oe=v?Je.height:Je.width,Qe=i(B?Math.max(1,ze-1):ze,Oe,W),et=l.useCallback(e=>B?ze<=1?Oe/2:Oe*e/(ze-1):Qe.centre(e),[B,ze,Oe,Qe]),tt=l.useCallback(e=>v?Je.left+Fe.fraction(e)*Je.width:Je.top+(1-Fe.fraction(e))*Je.height,[v,Je.left,Je.top,Je.width,Je.height,Fe]),nt=l.useCallback((e,t)=>v?{x:tt(t),y:Je.top+et(e)}:{x:Je.left+et(e),y:tt(t)},[v,tt,et,Je.left,Je.top]),lt=l.useCallback(e=>v?Je.top+(1-(Ie?.fraction(e)??0))*Je.height:Je.left+(Ie?.fraction(e)??0)*Je.width,[v,Je.left,Je.top,Je.width,Je.height,Ie]),at=tt(Math.min(Math.max(0,Fe.min),Fe.max)),it={plot:Je,values:Me,visible:xe.visible,colors:Ne,scale:Fe,band:Qe,horizontal:v,valuePx:tt,categoryPx:et,point:nt,categoryScale:Ie,categoryValuePx:lt,zeroPx:at,categories:Se,format:we,size:ae},rt=T?T(it):E,st=!1===ne?{mode:"none"}:!0===ne||void 0===ne?{}:ne,ot=st.mode??(T?"item":"index"),ct=null===be?null:rt[be]??null,dt=T?ct?ct.index:null:ge,ut=T?rt.length:ze,ht=()=>{pe(null),ve(null),ke(null)},mt=e=>{const t=null===e?null:Math.min(ut-1,Math.max(0,e));T?ve(t):pe(t)},ft=e=>{ke(null);mt(((T?be:ge)??(e>0?-1:ut))+e)},xt=null===dt?[]:t.flatMap((e,t)=>{if(!xe.visible[t]||ct&&ct.series!==t)return[];const n=Me[t]?.[dt];return n&&null!==n.value?[{seriesIndex:t,name:e.name,color:n.color??Ne[t],value:n.value,formatted:we(n.value),label:n.label}]:[]}),gt=ct&&G?G(ct):null,pt=gt?gt.items:"item"===ot&&xt.length>1&&null!==ye?[xt.reduce((e,t)=>Math.abs(tt(t.value??0)-ye)<Math.abs(tt(e.value??0)-ye)?t:e)]:xt,bt=ct?Me[ct.series]?.[ct.index]?.x??a?.[ct.index]??ct.index:void 0,vt=ct?ct.x:v?tt(pt[0]?.value??0):Je.left+et(dt??0),yt=ct?ct.y:v?Je.top+et(dt??0):Je.top,kt=ct?(ct.x-Je.left)/Math.max(1,Je.width)>.6:(v?Fe.fraction(pt[0]?.value??0):et(dt??0)/Math.max(1,Oe))>.6,wt=!1===te?{interactive:!1}:!0===te||void 0===te?{}:te,Mt=!0===te||!1!==te&&t.length>1,Nt=wt.side??"bottom",zt={...it,hovered:xe.hovered,activeIndex:dt,marks:rt,activeMark:ct},St=0===ze||null===Ae||"value"===$&&null===Ee;return n(X,{...ce,size:ae,variant:ie,padded:re,className:se,legendSide:Nt,legend:Mt?e(_,{series:t,colors:Ne,options:wt,visibility:xe,size:ae,swatch:U,values:wt.showValue&&null!==dt?t.map((e,t)=>{const n=Me[t]?.[dt]?.value;return null==n?void 0:we(n)}):void 0}):null,table:St?null:K?.(fe)??e(D,{id:fe,caption:ee,corner:Be?.label,categories:Se,series:t,values:Me,format:we,locale:Q}),children:[n("div",{ref:de,role:"img",tabIndex:St?void 0:0,"aria-label":ee??me.label,"aria-describedby":St?void 0:fe,onPointerMove:e=>{"none"!==ot&&(T?ve(((e,t)=>{const n=de.current;if(!n||0===rt.length)return null;const l=n.getBoundingClientRect(),a=e-l.left,i=t-l.top;let r=null,s=1/0,o=1/0;return rt.forEach((e,t)=>{const n=Math.hypot(e.x-a,e.y-i),l=void 0===e.rx?Math.max(0,n-e.r):Math.hypot(Math.max(0,Math.abs(e.x-a)-e.rx),Math.max(0,Math.abs(e.y-i)-(e.ry??e.rx)));l<=Z&&(l<s||l===s&&n<o)&&(s=l,o=n,r=t)}),r})(e.clientX,e.clientY)):pe(((e,t)=>{const n=de.current;if(!n||0===ze)return null;const l=n.getBoundingClientRect(),a=v?t-l.top-Je.top:e-l.left-Je.left;if(a<-Qe.step||a>Oe+Qe.step)return null;const i=B?ze<=1?0:Math.round(a/Oe*(ze-1)):Math.floor(a/Qe.step);return Math.min(ze-1,Math.max(0,i))})(e.clientX,e.clientY)),"item"===ot&&ke(((e,t)=>{const n=de.current;if(!n)return null;const l=n.getBoundingClientRect();return v?e-l.left:t-l.top})(e.clientX,e.clientY)))},onPointerLeave:ht,onKeyDown:"none"===ot?void 0:e=>{const t=v?"ArrowDown":"ArrowRight",n=v?"ArrowUp":"ArrowLeft";if(e.key===t)ft(1);else if(e.key===n)ft(-1);else if("Home"===e.key)mt(0);else if("End"===e.key)mt(ut-1);else{if("Escape"!==e.key)return;ht()}e.preventDefault()},onBlur:ht,className:A("relative w-full","rounded-(--neba-radius-xs)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2"),style:{height:Pe??J},children:[St?e("div",{className:A("flex h-full items-center justify-center text-(--neba-muted-fg)",j[ae]),children:le??he.title}):ue>0?n("svg",{width:ue,height:Ge||"100%",viewBox:`0 0 ${ue} ${Ge}`,"aria-hidden":"true",className:"block overflow-visible",children:[e(Y,{plot:Je,scale:Fe,band:Qe,horizontal:v,inset:B,categoryPx:et,valuePx:tt,tickTexts:Re,categoryTexts:Ve,categoryScale:Ie,categoryValuePx:lt,valueAxis:We,categoryAxis:Be,fontSize:je,zeroPx:at}),null===dt||T||"index"!==ot||!1===st.crosshair?null:(()=>{const t=et(dt);return e("line",v?{x1:Je.left,x2:Je.left+Je.width,y1:Je.top+t,y2:Je.top+t,stroke:"var(--neba-chart-baseline)",strokeWidth:1}:{x1:Je.left+t,x2:Je.left+t,y1:Je.top,y2:Je.top+Je.height,stroke:"var(--neba-chart-baseline)",strokeWidth:1})})(),oe(zt)]}):null,null!==dt&&pt.length>0&&"none"!==ot?st.render?e("div",{className:"pointer-events-none absolute z-10",style:kt?{right:`calc(100% - ${vt}px + 10px)`,top:yt}:{left:vt+10,top:yt},children:st.render({index:dt,category:bt??Se[dt],items:pt})}):e(L,{heading:gt?gt.heading:m(bt??Se[dt],Q),items:pt,x:vt,y:yt,flip:kt,size:ae}):null]}),"none"===ot?null:e(V,{heading:null===dt?void 0:gt?.heading??m(bt??Se[dt],Q),items:pt})]})}function Y({plot:l,scale:a,horizontal:i,categoryPx:r,valuePx:s,tickTexts:o,categoryTexts:c,categoryScale:d,categoryValuePx:u,valueAxis:m,categoryAxis:f,fontSize:x,zeroPx:g}){const y=!1!==m?.grid&&!m?.hidden,k=!f?.hidden&&(f?.grid??null!==d),w=e=>d?u(d.ticks[e]):(i?l.top:l.left)+r(e),M=v(c.length,i?l.height:l.width,i?1.8*x:Math.max(...c.map(e=>b(e,x)),1)+12),N=v(a.ticks.length,i?l.width:l.height,i?Math.max(...o.map(e=>b(e,x)),1)+16:2*x),z=c.length>1?Math.abs(w(1)-w(0)):l.width,S=a.ticks.length>1?Math.abs(s(a.ticks[1])-s(a.ticks[0])):l.height,C=h(c.length,M,z,i?1.8*x:b(c[c.length-1]??"",x)),A=h(a.ticks.length,N,S,i?b(o[o.length-1]??"",x):1.6*x);return n("g",{children:[a.ticks.map((t,r)=>{const c=s(t),d=Math.abs(t)<1e-9;return n("g",{children:[y?e("line",i?{x1:c,x2:c,y1:l.top,y2:l.top+l.height,stroke:d?"var(--neba-chart-baseline)":"var(--neba-chart-grid)",strokeWidth:1}:{x1:l.left,x2:l.left+l.width,y1:c,y2:c,stroke:d?"var(--neba-chart-baseline)":"var(--neba-chart-grid)",strokeWidth:1}):null,m?.hidden||!p(r,a.ticks.length,N,A)?null:e("text",i?{x:c,y:l.top+l.height+x+6,textAnchor:0===r?"start":r===a.ticks.length-1?"end":"middle",fontSize:x,fill:"var(--neba-muted-fg)",className:"tabular-nums",children:o[r]}:{x:l.left-8,y:c,textAnchor:"end",dominantBaseline:"central",fontSize:x,fill:"var(--neba-muted-fg)",className:"tabular-nums",children:o[r]})]},t)}),f?.hidden?null:n(t,{children:[e("line",i?{x1:g,x2:g,y1:l.top,y2:l.top+l.height,stroke:"var(--neba-chart-axis)",strokeWidth:1}:{x1:l.left,x2:l.left+l.width,y1:g,y2:g,stroke:"var(--neba-chart-axis)",strokeWidth:1}),c.map((t,a)=>{const r=w(a),s=p(a,c.length,M,C);return i?s?e("text",{x:l.left-8,y:r,textAnchor:"end",dominantBaseline:"central",fontSize:x,fill:"var(--neba-muted-fg)",className:d?"tabular-nums":void 0,children:t},a):null:n("g",{children:[k?e("line",{x1:r,x2:r,y1:l.top,y2:l.top+l.height,stroke:"var(--neba-chart-grid)",strokeWidth:1}):null,s?e("text",{x:r,y:l.top+l.height+x+6,textAnchor:d?0===a?"start":a===c.length-1?"end":"middle":"middle",fontSize:x,fill:"var(--neba-muted-fg)",className:d?"tabular-nums":void 0,children:t}):null]},a)})]}),m?.label?e("text",{x:i?l.left+l.width:l.left,y:i?l.top+l.height+2*x+12:l.top-8,textAnchor:i?"end":"start",fontSize:x,fill:"var(--neba-muted-fg)",fontWeight:500,children:m.label}):null,f?.label&&!i?e("text",{x:l.left+l.width,y:l.top+l.height+2*x+12,textAnchor:"end",fontSize:x,fill:"var(--neba-muted-fg)",fontWeight:500,children:f.label}):null]})}export{D as ChartDataTable,_ as ChartLegendBar,T as ChartScaleLegend,V as ChartStatus,X as ChartSurface,L as ChartTooltipPanel,I as useMeasuredWidth,R as useVisibility};
+"use client";import{jsx as e,Fragment as t,jsxs as n}from"react/jsx-runtime";import*as a from"react";import{Box as l}from"../components/box/Box.js";import{bandScale as i,categoryAt as r,categoryCount as s,categoryExtent as o,chartFontSizes as c,compactNumber as d,extentOf as u,fitsLast as h,formatCategory as m,markerRadii as f,plotHeights as x,seriesColor as p,showsTick as g,textWidth as b,tickStride as v,toValues as y,truncate as k,valueScale as w}from"./chart.js";import{numberFormatter as M}from"./format.js";import{observeResize as N}from"./observe.js";import{chartMessages as z,emptyMessages as S,useMessages as C}from"./i18n.js";import{cx as A,hasContent as P,metaTextClasses as j,srOnlyClasses as _,transitionClasses as W}from"./styles.js";const B="undefined"==typeof document?a.useEffect:a.useLayoutEffect,F=[];function E(e){const[t,n]=a.useState(0);return B(()=>{const t=e.current;if(!t)return;const a=()=>n(t.clientWidth);return a(),N(t,a)},[e]),t}export const markTransitionClasses=["[transition:opacity_var(--neba-duration)_var(--neba-ease),","r_var(--neba-duration)_var(--neba-ease),","scale_var(--neba-duration)_var(--neba-ease)]"].join("");function I(e){const[t,n]=a.useState(()=>{const t=new Set;return e.forEach((e,n)=>{e.hidden&&t.add(n)}),t}),[l,i]=a.useState(null),r=a.useCallback(e=>{n(t=>{const n=new Set(t);return n.has(e)?n.delete(e):n.add(e),n})},[]);return{visible:e.map((e,n)=>!t.has(n)),hovered:l,toggle:r,setHovered:i}}const R={top:"flex-col-reverse",bottom:"flex-col",left:"flex-row-reverse",right:"flex-row"},$={start:"justify-start",center:"justify-center",end:"justify-end"};function H({series:a,colors:l,options:i,visibility:r,size:s,values:o,swatch:c}){const d=!1!==i.interactive,u="left"===i.side||"right"===i.side;return e("ul",{className:A("flex list-none flex-wrap items-center gap-x-3 gap-y-1 p-0",u?"min-w-0 flex-col items-start":"",$[i.align??"center"],j[s]),children:a.map((a,i)=>{const s=r.visible[i],u=null!==r.hovered&&r.hovered!==i,h=a.name??`${i+1}`,m=s?l[i]:"var(--neba-disabled-fg)",f=n(t,{children:[e("span",c?{"aria-hidden":"true",className:"flex size-2.5 shrink-0 items-center justify-center",children:c(i,m)}:{"aria-hidden":"true",className:`size-2.5 shrink-0 rounded-[0.1875rem] ${W}`,style:{backgroundColor:m}}),e("span",{className:"min-w-0 truncate",children:h}),o?.[i]?e("span",{className:"shrink-0 tabular-nums text-(--neba-muted-fg)",children:o[i]}):null]});return e("li",{className:"min-w-0",children:d?e("button",{type:"button","aria-pressed":s,onClick:()=>r.toggle(i),onPointerEnter:()=>r.setHovered(i),onPointerLeave:()=>r.setHovered(null),onFocus:()=>r.setHovered(i),onBlur:()=>r.setHovered(null),className:A("flex min-w-0 cursor-pointer items-center gap-1.5 rounded-(--neba-radius-xs)","px-1 py-0.5 text-(--neba-fg)","[transition-property:background-color,color,opacity]","[transition-duration:var(--neba-duration)]","[transition-timing-function:var(--neba-ease)]","hover:bg-(--n-soft)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-1",s?"":"text-(--neba-disabled-fg)",u?"opacity-55":""),children:f}):e("span",{className:A("flex min-w-0 items-center gap-1.5 px-1 py-0.5 text-(--neba-fg)",s?"":"text-(--neba-disabled-fg)"),children:f})},a.name??i)})})}function T({steps:a,from:l,to:i,middle:r,align:s,vertical:o,size:c}){return e("div",{className:A("flex",o?"":$[s]),children:n("div",{className:A("grid grid-cols-[auto_auto_auto] items-center gap-x-2",j[c]),children:[e("span",{className:"shrink-0 tabular-nums text-(--neba-muted-fg)",children:l}),e("span",{"aria-hidden":"true",className:A("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-(--neba-muted-fg)",children:i}),r?n(t,{children:[e("span",{}),e("span",{className:"text-center tabular-nums text-(--neba-muted-fg)",children:r}),e("span",{})]}):null]})})}function L({heading:t,items:a,x:l,y:i,flip:r,size:s}){return n("div",{"data-neba-tooltip":"",className:A("pointer-events-none absolute z-10 max-w-56 min-w-24","rounded-(--neba-radius-sm) border p-2","[background-image:var(--neba-grain),var(--neba-sheen)]","[background-blend-mode:overlay,normal] [backdrop-filter:var(--neba-blur)]","bg-(--neba-panel-press) [border-color:var(--n-line)]","[box-shadow:var(--neba-shadow-2),var(--neba-plate-glass)]",j[s]),style:r?{right:`calc(100% - ${l}px + 10px)`,top:i}:{left:l+10,top:i},children:[e("div",{className:"mb-1 font-medium text-(--neba-fg)",children:t}),e("ul",{className:"flex list-none flex-col gap-0.5 p-0",children:a.map(t=>n("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-(--neba-muted-fg)",children:t.name}):null,e("span",{className:"ms-auto shrink-0 font-medium tabular-nums text-(--neba-fg)",children:t.label??t.formatted})]},t.seriesIndex))})]})}function V({heading:l,items:i}){return e("span",{role:"status","aria-live":"polite",className:_,children:0===i.length?null:n(t,{children:[P(l)?n(t,{children:[l,", "]}):null,i.map((e,t)=>n(a.Fragment,{children:[t>0?", ":null,e.name?`${e.name}: `:null,e.label??e.formatted]},e.seriesIndex))]})})}function D({id:t,caption:a,corner:l,categories:i,series:r,values:s,format:o,locale:c}){return n("table",{id:t,className:_,children:[a?e("caption",{children:a}):null,e("thead",{children:n("tr",{children:[e("th",{scope:"col",children:l??""}),r.map((t,n)=>e("th",{scope:"col",children:t.name??n+1},t.name??n))]})}),e("tbody",{children:i.map((t,a)=>n("tr",{children:[e("th",{scope:"row",children:m(t,c)}),r.map((t,n)=>{const l=s[n]?.[a];return e("td",void 0!==l?.label?{children:l.label}:{children:null==l?.value?"":o(l.value)},t.name??n)})]},a))})]})}function X({legend:t,legendSide:a,children:i,table:r,className:s,...o}){return n(l,{...o,className:A("relative flex gap-3",R[a],s??void 0),children:[e("div",{className:"relative min-w-0 flex-1",children:i}),t,r]})}export function CartesianChart({series:t,categories:l,xAxis:h,yAxis:g,horizontal:v=!1,stacked:N=!1,includeZero:P=!0,bandRatio:_=1,inset:W=!1,headroom:B=0,markInset:R=0,xScale:$="band",marks:T,markRadius:Z=24,table:K,swatch:U,scale:q,markTooltip:G,height:J,format:O,locale:Q,label:ee,legend:te,tooltip:ne,empty:ae,size:le="md",variant:ie="text",padded:re=!1,className:se,children:oe,...ce}){const de=a.useRef(null),ue=E(de),he=C(S,Q),me=C(z,Q),fe=a.useId(),xe=I(t),[pe,ge]=a.useState(null),[be,ve]=a.useState(null),[ye,ke]=a.useState(null),we=a.useCallback(e=>O?M(Q,O).format(e):d(e,Q),[O,Q]),Me=a.useMemo(()=>y(t),[t]),Ne=a.useMemo(()=>t.map((e,t)=>p(e,t)),[t]),ze=s(t),Se=a.useMemo(()=>Array.from({length:ze},(e,t)=>r(t,l,Me)),[ze,l,Me]),Ce=Me.filter((e,t)=>xe.visible[t]),Ae=u(Ce,N),Pe="number"==typeof J?J:void 0===J?x[le]:null,je=c[le],_e=g,We=h,Be=q??w(Ae,{min:_e?.min,max:_e?.max,tickCount:_e?.tickCount,includeZero:P}),Fe="value"===$?o(Ce,l):null,Ee="value"===$?w(Fe,{min:We?.min,max:We?.max,tickCount:We?.tickCount,includeZero:!1}):null,Ie=Be.ticks.map((e,t)=>_e?.tickFormat?String(_e.tickFormat(e,t)):we(e)),Re=Ee?Ee.ticks.map((e,t)=>We?.tickFormat?String(We.tickFormat(e,t)):d(e,Q)):Se.map((e,t)=>We?.tickFormat?String(We.tickFormat(e,t)):m(e,Q)),$e=Ie.reduce((e,t)=>Math.max(e,b(t,je)),0),He=je+6,Te=_e?.hidden?0:$e+10+(_e?.label?He:0),Le=(ue-(v?0:Te)-16)/Math.max(1,ze),Ve=Ee?Re:v||Le-6>=2.4*je?Re.map(e=>k(e,v?150:Le-6,je)):Re,De=Ve.reduce((e,t)=>Math.max(e,b(t,je)),0),Xe=v?We?.hidden?0:De+10+(We?.label?He:0):Te,Ye=v?_e?.hidden?0:je+12+(_e?.label?He:0):We?.hidden?0:je+12+(We?.label?He:0),Ze=(v?We:_e)?.thickness??Xe,Ke=(v?_e:We)?.thickness??Ye,Ue=(v||Ee?12:Math.max(8,Ve.length?De/2:8))+R,qe=f[le]+4+B+R,Ge=Pe??0,Je={left:Ze+R,top:qe,width:Math.max(0,ue-Ze-R-Ue),height:Math.max(0,Ge-qe-Ke-R)},Oe=v?Je.height:Je.width,Qe=i(W?Math.max(1,ze-1):ze,Oe,_),et=a.useCallback(e=>W?ze<=1?Oe/2:Oe*e/(ze-1):Qe.centre(e),[W,ze,Oe,Qe]),tt=a.useCallback(e=>v?Je.left+Be.fraction(e)*Je.width:Je.top+(1-Be.fraction(e))*Je.height,[v,Je.left,Je.top,Je.width,Je.height,Be]),nt=a.useCallback((e,t)=>v?{x:tt(t),y:Je.top+et(e)}:{x:Je.left+et(e),y:tt(t)},[v,tt,et,Je.left,Je.top]),at=a.useCallback(e=>v?Je.top+(1-(Ee?.fraction(e)??0))*Je.height:Je.left+(Ee?.fraction(e)??0)*Je.width,[v,Je.left,Je.top,Je.width,Je.height,Ee]),lt=tt(Math.min(Math.max(0,Be.min),Be.max)),it={plot:Je,values:Me,visible:xe.visible,colors:Ne,scale:Be,band:Qe,horizontal:v,valuePx:tt,categoryPx:et,point:nt,categoryScale:Ee,categoryValuePx:at,zeroPx:lt,categories:Se,format:we,size:le},rt=T?T(it):F,st=!1===ne?{mode:"none"}:!0===ne||void 0===ne?{}:ne,ot=st.mode??(T?"item":"index"),ct=null===be?null:rt[be]??null,dt=T?ct?ct.index:null:pe,ut=T?rt.length:ze,ht=()=>{ge(null),ve(null),ke(null)},mt=e=>{const t=null===e?null:Math.min(ut-1,Math.max(0,e));T?ve(t):ge(t)},ft=e=>{ke(null);mt(((T?be:pe)??(e>0?-1:ut))+e)},xt=null===dt?[]:t.flatMap((e,t)=>{if(!xe.visible[t]||ct&&ct.series!==t)return[];const n=Me[t]?.[dt];return n&&null!==n.value?[{seriesIndex:t,name:e.name,color:n.color??Ne[t],value:n.value,formatted:we(n.value),label:n.label}]:[]}),pt=ct&&G?G(ct):null,gt=pt?pt.items:"item"===ot&&xt.length>1&&null!==ye?[xt.reduce((e,t)=>Math.abs(tt(t.value??0)-ye)<Math.abs(tt(e.value??0)-ye)?t:e)]:xt,bt=ct?Me[ct.series]?.[ct.index]?.x??l?.[ct.index]??ct.index:void 0,vt=ct?ct.x:v?tt(gt[0]?.value??0):Je.left+et(dt??0),yt=ct?ct.y:v?Je.top+et(dt??0):Je.top,kt=ct?(ct.x-Je.left)/Math.max(1,Je.width)>.6:(v?Be.fraction(gt[0]?.value??0):et(dt??0)/Math.max(1,Oe))>.6,wt=!1===te?{interactive:!1}:!0===te||void 0===te?{}:te,Mt=!0===te||!1!==te&&t.length>1,Nt=wt.side??"bottom",zt={...it,hovered:xe.hovered,activeIndex:dt,marks:rt,activeMark:ct},St=0===ze||null===Ae||"value"===$&&null===Fe;return n(X,{...ce,size:le,variant:ie,padded:re,className:se,legendSide:Nt,legend:Mt?e(H,{series:t,colors:Ne,options:wt,visibility:xe,size:le,swatch:U,values:wt.showValue&&null!==dt?t.map((e,t)=>{const n=Me[t]?.[dt]?.value;return null==n?void 0:we(n)}):void 0}):null,table:St?null:K?.(fe)??e(D,{id:fe,caption:ee,corner:We?.label,categories:Se,series:t,values:Me,format:we,locale:Q}),children:[n("div",{ref:de,role:"img",tabIndex:St?void 0:0,"aria-label":ee??me.label,"aria-describedby":St?void 0:fe,onPointerMove:e=>{"none"!==ot&&(T?ve(((e,t)=>{const n=de.current;if(!n||0===rt.length)return null;const a=n.getBoundingClientRect(),l=e-a.left,i=t-a.top;let r=null,s=1/0,o=1/0;return rt.forEach((e,t)=>{const n=Math.hypot(e.x-l,e.y-i),a=void 0===e.rx?Math.max(0,n-e.r):Math.hypot(Math.max(0,Math.abs(e.x-l)-e.rx),Math.max(0,Math.abs(e.y-i)-(e.ry??e.rx)));a<=Z&&(a<s||a===s&&n<o)&&(s=a,o=n,r=t)}),r})(e.clientX,e.clientY)):ge(((e,t)=>{const n=de.current;if(!n||0===ze)return null;const a=n.getBoundingClientRect(),l=v?t-a.top-Je.top:e-a.left-Je.left;if(l<-Qe.step||l>Oe+Qe.step)return null;const i=W?ze<=1?0:Math.round(l/Oe*(ze-1)):Math.floor(l/Qe.step);return Math.min(ze-1,Math.max(0,i))})(e.clientX,e.clientY)),"item"===ot&&ke(((e,t)=>{const n=de.current;if(!n)return null;const a=n.getBoundingClientRect();return v?e-a.left:t-a.top})(e.clientX,e.clientY)))},onPointerLeave:ht,onKeyDown:"none"===ot?void 0:e=>{const t=v?"ArrowDown":"ArrowRight",n=v?"ArrowUp":"ArrowLeft";if(e.key===t)ft(1);else if(e.key===n)ft(-1);else if("Home"===e.key)mt(0);else if("End"===e.key)mt(ut-1);else{if("Escape"!==e.key)return;ht()}e.preventDefault()},onBlur:ht,className:A("relative w-full","rounded-(--neba-radius-xs)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2"),style:{height:Pe??J},children:[St?e("div",{className:A("flex h-full items-center justify-center text-(--neba-muted-fg)",j[le]),children:ae??he.title}):ue>0?n("svg",{width:ue,height:Ge||"100%",viewBox:`0 0 ${ue} ${Ge}`,"aria-hidden":"true",className:"block overflow-visible",children:[e(Y,{plot:Je,scale:Be,band:Qe,horizontal:v,inset:W,categoryPx:et,valuePx:tt,tickTexts:Ie,categoryTexts:Ve,categoryScale:Ee,categoryValuePx:at,valueAxis:_e,categoryAxis:We,fontSize:je,zeroPx:lt}),null===dt||T||"index"!==ot||!1===st.crosshair?null:(()=>{const t=et(dt);return e("line",v?{x1:Je.left,x2:Je.left+Je.width,y1:Je.top+t,y2:Je.top+t,stroke:"var(--neba-chart-baseline)",strokeWidth:1}:{x1:Je.left+t,x2:Je.left+t,y1:Je.top,y2:Je.top+Je.height,stroke:"var(--neba-chart-baseline)",strokeWidth:1})})(),oe(zt)]}):null,null!==dt&&gt.length>0&&"none"!==ot?st.render?e("div",{className:"pointer-events-none absolute z-10",style:kt?{right:`calc(100% - ${vt}px + 10px)`,top:yt}:{left:vt+10,top:yt},children:st.render({index:dt,category:bt??Se[dt],items:gt})}):e(L,{heading:pt?pt.heading:m(bt??Se[dt],Q),items:gt,x:vt,y:yt,flip:kt,size:le}):null]}),"none"===ot?null:e(V,{heading:null===dt?void 0:pt?.heading??m(bt??Se[dt],Q),items:gt})]})}function Y({plot:a,scale:l,horizontal:i,categoryPx:r,valuePx:s,tickTexts:o,categoryTexts:c,categoryScale:d,categoryValuePx:u,valueAxis:m,categoryAxis:f,fontSize:x,zeroPx:p}){const y=!1!==m?.grid&&!m?.hidden,k=!f?.hidden&&(f?.grid??null!==d),w=e=>d?u(d.ticks[e]):(i?a.top:a.left)+r(e),M=v(c.length,i?a.height:a.width,i?1.8*x:Math.max(...c.map(e=>b(e,x)),1)+12),N=v(l.ticks.length,i?a.width:a.height,i?Math.max(...o.map(e=>b(e,x)),1)+16:2*x),z=c.length>1?Math.abs(w(1)-w(0)):a.width,S=l.ticks.length>1?Math.abs(s(l.ticks[1])-s(l.ticks[0])):a.height,C=h(c.length,M,z,i?1.8*x:b(c[c.length-1]??"",x)),A=h(l.ticks.length,N,S,i?b(o[o.length-1]??"",x):1.6*x);return n("g",{children:[l.ticks.map((t,r)=>{const c=s(t),d=Math.abs(t)<1e-9;return n("g",{children:[y?e("line",i?{x1:c,x2:c,y1:a.top,y2:a.top+a.height,stroke:d?"var(--neba-chart-baseline)":"var(--neba-chart-grid)",strokeWidth:1}:{x1:a.left,x2:a.left+a.width,y1:c,y2:c,stroke:d?"var(--neba-chart-baseline)":"var(--neba-chart-grid)",strokeWidth:1}):null,m?.hidden||!g(r,l.ticks.length,N,A)?null:e("text",i?{x:c,y:a.top+a.height+x+6,textAnchor:0===r?"start":r===l.ticks.length-1?"end":"middle",fontSize:x,fill:"var(--neba-muted-fg)",className:"tabular-nums",children:o[r]}:{x:a.left-8,y:c,textAnchor:"end",dominantBaseline:"central",fontSize:x,fill:"var(--neba-muted-fg)",className:"tabular-nums",children:o[r]})]},t)}),f?.hidden?null:n(t,{children:[e("line",i?{x1:p,x2:p,y1:a.top,y2:a.top+a.height,stroke:"var(--neba-chart-axis)",strokeWidth:1}:{x1:a.left,x2:a.left+a.width,y1:p,y2:p,stroke:"var(--neba-chart-axis)",strokeWidth:1}),c.map((t,l)=>{const r=w(l),s=g(l,c.length,M,C);return i?s?e("text",{x:a.left-8,y:r,textAnchor:"end",dominantBaseline:"central",fontSize:x,fill:"var(--neba-muted-fg)",className:d?"tabular-nums":void 0,children:t},l):null:n("g",{children:[k?e("line",{x1:r,x2:r,y1:a.top,y2:a.top+a.height,stroke:"var(--neba-chart-grid)",strokeWidth:1}):null,s?e("text",{x:r,y:a.top+a.height+x+6,textAnchor:d?0===l?"start":l===c.length-1?"end":"middle":"middle",fontSize:x,fill:"var(--neba-muted-fg)",className:d?"tabular-nums":void 0,children:t}):null]},l)})]}),m?.label?e("text",{x:i?a.left+a.width:a.left,y:i?a.top+a.height+2*x+12:a.top-8,textAnchor:i?"end":"start",fontSize:x,fill:"var(--neba-muted-fg)",fontWeight:500,children:m.label}):null,f?.label&&!i?e("text",{x:a.left+a.width,y:a.top+a.height+2*x+12,textAnchor:"end",fontSize:x,fill:"var(--neba-muted-fg)",fontWeight:500,children:f.label}):null]})}export{D as ChartDataTable,H as ChartLegendBar,T as ChartScaleLegend,V as ChartStatus,X as ChartSurface,L as ChartTooltipPanel,E as useMeasuredWidth,I as useVisibility};

package/dist/internal/chart-line.js

@@ -1 +1 @@
-import{jsx as l,jsxs as e}from"react/jsx-runtime";import{areaPath as t,chartFontSizes as r,linePath as n,lineWidths as o,markerRadii as a,markGap as i}from"./chart.js";export function LineSeries({context:s,curve:u,filled:f,stacked:c,markers:p,valueLabels:d,connectNulls:x,gradient:h,idPrefix:m}){const{values:v,visible:k,colors:$,hovered:b,activeIndex:y,plot:g,point:j,zeroPx:C,size:L,format:W}=s,z=o[L],B=a[L],E=k.indexOf(!0),G=[],M=[];return v.forEach((l,e)=>{const t=l.map((l,e)=>M[e]??0);G.push(t),c&&k[e]&&l.forEach((l,e)=>{M[e]=(M[e]??0)+(l.value??0)})}),e("g",{children:[e("defs",{children:[h?$.map((t,r)=>e("linearGradient",{id:`${m}-stroke-${r}`,x1:"0",y1:"0",x2:"1",y2:"0",children:[l("stop",{offset:"0%",stopColor:`color-mix(in oklab, ${t} 45%, transparent)`}),l("stop",{offset:"100%",stopColor:t})]},`stroke-${r}`)):null,f&&!c?$.map((t,r)=>e("linearGradient",{id:`${m}-fill-${r}`,x1:"0",y1:"0",x2:"0",y2:"1",children:[l("stop",{offset:"0%",stopColor:`color-mix(in oklab, ${t} 28%, transparent)`}),l("stop",{offset:"100%",stopColor:`color-mix(in oklab, ${t} 2%, transparent)`})]},`fill-${r}`)):null]}),v.map((o,a)=>{if(!k[a])return null;const s=$[a],v=null!==b&&b!==a,M=o.map((l,e)=>{if(null===l.value)return null;const t=c?G[a][e]+l.value:l.value;return j(e,t)}),N=x?M.filter(Boolean):M,P=o.map((l,e)=>null===l.value?null:c?j(e,G[a][e]):{x:j(e,l.value).x,y:C}),S=f&&c,w=function(l,e){if("all"===e)return()=>!0;if("last"===e){let e=-1;for(let t=l.length-1;t>=0;t--)if(null!==l[t].value){e=t;break}return l=>l===e}let t=1/0,r=-1/0;for(const e of l)null!==e.value&&(t=Math.min(t,e.value),r=Math.max(r,e.value));return e=>{const n=l[e].value;return null!==n&&(n===t||n===r)}}(o,d);return e("g",{opacity:v?.28:1,children:[f?l("path",{d:t(N,x?P.filter(Boolean):P,u),fill:c?`color-mix(in oklab, ${s} 70%, transparent)`:`url(#${m}-fill-${a})`,stroke:"none"}):null,S&&a!==E?l("path",{d:n(x?P.filter(Boolean):P,u),fill:"none",stroke:"var(--neba-chart-gap)",strokeWidth:i}):null,S?null:l("path",{d:n(N,u),fill:"none",stroke:h?`url(#${m}-stroke-${a})`:s,strokeWidth:z,strokeLinecap:"round",strokeLinejoin:"round"}),M.map((e,t)=>{if(!e)return null;return"all"===p||"auto"===p&&o.length<=14||t===y?l("circle",{cx:e.x,cy:e.y,r:t===y?B+1:B,fill:o[t].color??s,stroke:"var(--neba-chart-gap)",strokeWidth:i},t):null}),"none"===d?null:M.map((e,t)=>{const n=o[t].value;return e&&null!==n&&w(t)?l("text",{x:e.x,y:e.y-B-5,textAnchor:e.x>g.left+g.width-24?"end":e.x<g.left+24?"start":"middle",fontSize:r[L],fontWeight:500,fill:"var(--neba-fg)",className:"tabular-nums",children:o[t].label??W(n)},`label-${t}`):null})]},a)})]})}
+import{jsx as l,jsxs as e}from"react/jsx-runtime";import{areaPath as r,chartFontSizes as t,linePath as n,lineWidths as o,markerRadii as a,markGap as i}from"./chart.js";import{markTransitionClasses as s}from"./chart-frame.js";export function LineSeries({context:u,curve:f,filled:c,stacked:p,markers:d,valueLabels:m,connectNulls:x,gradient:h,idPrefix:v}){const{values:k,visible:$,colors:b,hovered:y,activeIndex:g,plot:j,point:C,zeroPx:L,size:N,format:W}=u,z=o[N],B=a[N],E=$.indexOf(!0),G=[],M=[];return k.forEach((l,e)=>{const r=l.map((l,e)=>M[e]??0);G.push(r),p&&$[e]&&l.forEach((l,e)=>{M[e]=(M[e]??0)+(l.value??0)})}),e("g",{children:[e("defs",{children:[h?b.map((r,t)=>e("linearGradient",{id:`${v}-stroke-${t}`,x1:"0",y1:"0",x2:"1",y2:"0",children:[l("stop",{offset:"0%",stopColor:`color-mix(in oklab, ${r} 45%, transparent)`}),l("stop",{offset:"100%",stopColor:r})]},`stroke-${t}`)):null,c&&!p?b.map((r,t)=>e("linearGradient",{id:`${v}-fill-${t}`,x1:"0",y1:"0",x2:"0",y2:"1",children:[l("stop",{offset:"0%",stopColor:`color-mix(in oklab, ${r} 28%, transparent)`}),l("stop",{offset:"100%",stopColor:`color-mix(in oklab, ${r} 2%, transparent)`})]},`fill-${t}`)):null]}),k.map((o,a)=>{if(!$[a])return null;const u=b[a],k=null!==y&&y!==a,M=o.map((l,e)=>{if(null===l.value)return null;const r=p?G[a][e]+l.value:l.value;return C(e,r)}),P=x?M.filter(Boolean):M,S=o.map((l,e)=>null===l.value?null:p?C(e,G[a][e]):{x:C(e,l.value).x,y:L}),w=c&&p,A=function(l,e){if("all"===e)return()=>!0;if("last"===e){let e=-1;for(let r=l.length-1;r>=0;r--)if(null!==l[r].value){e=r;break}return l=>l===e}let r=1/0,t=-1/0;for(const e of l)null!==e.value&&(r=Math.min(r,e.value),t=Math.max(t,e.value));return e=>{const n=l[e].value;return null!==n&&(n===r||n===t)}}(o,m);return e("g",{opacity:k?.28:1,className:s,children:[c?l("path",{d:r(P,x?S.filter(Boolean):S,f),fill:p?`color-mix(in oklab, ${u} 70%, transparent)`:`url(#${v}-fill-${a})`,stroke:"none"}):null,w&&a!==E?l("path",{d:n(x?S.filter(Boolean):S,f),fill:"none",stroke:"var(--neba-chart-gap)",strokeWidth:i}):null,w?null:l("path",{d:n(P,f),fill:"none",stroke:h?`url(#${v}-stroke-${a})`:u,strokeWidth:z,strokeLinecap:"round",strokeLinejoin:"round"}),M.map((e,r)=>{if(!e)return null;return"all"===d||"auto"===d&&o.length<=14||r===g?l("circle",{cx:e.x,cy:e.y,r:r===g?B+1:B,fill:o[r].color??u,stroke:"var(--neba-chart-gap)",strokeWidth:i,className:s},r):null}),"none"===m?null:M.map((e,r)=>{const n=o[r].value;return e&&null!==n&&A(r)?l("text",{x:e.x,y:e.y-B-5,textAnchor:e.x>j.left+j.width-24?"end":e.x<j.left+24?"start":"middle",fontSize:t[N],fontWeight:500,fill:"var(--neba-fg)",className:"tabular-nums",children:o[r].label??W(n)},`label-${r}`):null})]},a)})]})}

package/dist/internal/chart.d.ts

@@ -384,6 +384,22 @@ export declare const markShapes: readonly MarkShape[];
  * the hover treatment are then unarguably the same on all five.
  */
 export declare function markPath(shape: MarkShape, cx: number, cy: number, r: number): string;
+/**
+ * The centre line of that slice, as an *open* path.
+ *
+ * `arcPath` below draws the slice itself, which is a closed shape — and a shape
+ * whose `d` has to be rewritten every time the value moves. `d` is not a
+ * property CSS can travel along, so a dial drawn that way jumps to each new
+ * reading. Stroked instead, the same ring is one line with a width, and how much
+ * of it is drawn is `stroke-dashoffset`, which is a number and does travel.
+ *
+ * It is what ProgressCircular already does, bent to an arbitrary span — which is
+ * the point: a gauge is a Meter bent into an arc, and the four indicators in
+ * this library have to agree about what a value changing looks like.
+ *
+ * Angles are degrees clockwise from twelve o'clock, as below.
+ */
+export declare function ringPath(cx: number, cy: number, radius: number, from: number, to: number): string;
 /**
  * A slice of a ring, as a path.
  *

package/dist/internal/chart.js

@@ -1 +1 @@
-import{dateFormatter as t,numberFormatter as e}from"./format.js";export const plotHeights={xs:120,sm:160,md:220,lg:280,xl:360};export const sparklineHeights={xs:16,sm:20,md:28,lg:40,xl:56};export const lineWidths={xs:1.5,sm:1.75,md:2,lg:2.25,xl:2.5};export const markerRadii={xs:3,sm:3.5,md:4,lg:4.5,xl:5};export const chartFontSizes={xs:10,sm:11,md:12,lg:13,xl:14};export const barMaxThickness={xs:14,sm:18,md:24,lg:30,xl:36};export const barBandRatio={default:.62,compact:.82};export const markGap=2;export const barRadius=4;export const chartPalette=["var(--neba-chart-1)","var(--neba-chart-2)","var(--neba-chart-3)","var(--neba-chart-4)","var(--neba-chart-5)","var(--neba-chart-6)","var(--neba-chart-7)","var(--neba-chart-8)"];const n=new Set(["primary","secondary","success","warning","danger","info"]);export function resolveColor(t){return n.has(t)?`var(--neba-${t}-accent)`:t}export function seriesColor(t,e,n=chartPalette){return resolveColor(t?.color?t.color:n[e%n.length]??chartPalette[0])}export function toValue(t){return null==t?{value:null}:"number"==typeof t?{value:Number.isFinite(t)?t:null}:(t=>"object"==typeof t&&null!==t)(t)?{value:null!==t.y&&Number.isFinite(t.y)?t.y:null,x:t.x,z:t.z,color:t.color?resolveColor(t.color):void 0,label:t.label}:{value:null}}export function toValues(t){return t.map(t=>t.data.map(toValue))}export function toNumber(t){return t instanceof Date?Number.isFinite(t.getTime())?t.getTime():null:"number"==typeof t&&Number.isFinite(t)?t:null}export function pointX(t,e,n){return toNumber(t.x??n?.[e]??e)}export function categoryExtent(t,e){let n=1/0,r=-1/0,o=!1;return t.forEach(t=>{t.forEach((t,a)=>{if(null===t.value)return;const i=pointX(t,a,e);null!==i&&(o=!0,n=Math.min(n,i),r=Math.max(r,i))})}),o?{min:n,max:r}:null}export function bubbleRadius(t,e,n,r){return e>0&&Number.isFinite(t)&&!(t<=0)?Math.max(r,Math.sqrt(Math.min(t,e)/e)*n):0===t?0:r}export function categoryCount(t){return t.reduce((t,e)=>Math.max(t,e.data.length),0)}export function categoryAt(t,e,n){if(e&&t<e.length)return e[t];for(const e of n){const n=e[t]?.x;if(void 0!==n)return n}return t}export function extentOf(t,e){let n=1/0,r=-1/0,o=!1;if(e){const e=t.reduce((t,e)=>Math.max(t,e.length),0);for(let a=0;a<e;a++){let e=0,i=0;for(const n of t){const t=n[a]?.value;null!=t&&(o=!0,t>=0?e+=t:i+=t)}n=Math.min(n,i),r=Math.max(r,e)}}else for(const e of t)for(const{value:t}of e)null!==t&&(o=!0,n=Math.min(n,t),r=Math.max(r,t));return o?{min:n,max:r}:null}function r(t){const e=10**Math.floor(Math.log10(t)),n=t/e;return n<=1?e:n<=2?2*e:n<=5?5*e:10*e}export function valueScale(t,e={}){const{tickCount:n=5,includeZero:o=!0}=e;let a=e.min??(t?t.min:0),i=e.max??(t?t.max:1);if(o&&void 0===e.min&&(a=Math.min(a,0)),o&&void 0===e.max&&(i=Math.max(i,0)),i===a){const t=Math.abs(i)>0?.5*Math.abs(i):1;a-=t,i+=t}const u=void 0!==e.min&&void 0!==e.max?function(t,e){const n=10**Math.floor(Math.log10(t/Math.max(1,e)));let o=r(t/Math.max(1,e)),a=1/0;for(const r of[.1,1,10])for(const i of[1,2,2.5,5]){const u=i*r*n,s=t/u,c=Math.round(s);if(c<1||Math.abs(s-c)>1e-9)continue;const l=Math.abs(c-e);l<a&&(a=l,o=u)}return o}(i-a,n):r((i-a)/Math.max(1,n)),s=void 0!==e.min?a:Math.floor(a/u)*u,c=void 0!==e.max?i:Math.ceil(i/u)*u,l=c-s||1,h=[];for(let t=s;t<=c+1e-9*u;t+=u)h.push(Number(t.toFixed(12)));return{min:s,max:c,ticks:h,fraction:t=>(t-s)/l}}const o=1e3,a=6e4,i=36e5,u=24*i,s=[{unit:"second",count:1,size:o},{unit:"second",count:5,size:5e3},{unit:"second",count:15,size:15e3},{unit:"second",count:30,size:3e4},{unit:"minute",count:1,size:a},{unit:"minute",count:5,size:3e5},{unit:"minute",count:15,size:9e5},{unit:"minute",count:30,size:18e5},{unit:"hour",count:1,size:i},{unit:"hour",count:3,size:3*i},{unit:"hour",count:6,size:6*i},{unit:"hour",count:12,size:12*i},{unit:"day",count:1,size:u},{unit:"day",count:2,size:2*u},{unit:"week",count:1,size:7*u},{unit:"week",count:2,size:14*u},{unit:"month",count:1,size:30*u},{unit:"quarter",count:1,size:91*u},{unit:"month",count:6,size:182*u},{unit:"year",count:1,size:365*u}];function c(t,e,n){const r=new Date(t);if("year"===e)r.setFullYear(r.getFullYear()+n);else if("quarter"===e)r.setMonth(r.getMonth()+3*n);else if("month"===e)r.setMonth(r.getMonth()+n);else if("week"===e)r.setDate(r.getDate()+7*n);else if("day"===e)r.setDate(r.getDate()+n);else{if("hour"!==e)return t+n*("minute"===e?a:o);r.setHours(r.getHours()+n)}return r.getTime()}const l={second:"minute",minute:"hour",hour:"day",day:"month",week:"week",month:"year",quarter:"year",year:"year"};function h(t,e,n){let r=function(t,e){const n=new Date(t);if("year"===e)return new Date(n.getFullYear(),0,1).getTime();if("quarter"===e)return new Date(n.getFullYear(),3*Math.floor(n.getMonth()/3),1).getTime();if("month"===e)return new Date(n.getFullYear(),n.getMonth(),1).getTime();if("week"===e){const t=new Date(n.getFullYear(),n.getMonth(),n.getDate());return t.setDate(t.getDate()-t.getDay()),t.getTime()}return"day"===e?new Date(n.getFullYear(),n.getMonth(),n.getDate()).getTime():"hour"===e?new Date(n.getFullYear(),n.getMonth(),n.getDate(),n.getHours()).getTime():"minute"===e?Math.floor(t/a)*a:Math.floor(t/o)*o}(t,l[e]);if("year"===e&&n>1){const t=new Date(r).getFullYear();r=new Date(t-(t%n+n)%n,0,1).getTime()}for(let o=0;o<500;o++){const o=c(r,e,n);if(o>t)return r;r=o}return r}export function timeScale(t,e={}){const{tickCount:n=6}=e;let o=e.min??t?.min??Date.parse("2000-01-01T00:00:00"),a=e.max??t?.max??o+u;a<=o&&(o-=u/2,a+=u/2);const i=a-o;let l=s[0],m=1/0;for(const t of s){const e=Math.abs(i/t.size-n);e<m&&(m=e,l=t)}const f=l.unit,$="year"===f?Math.max(1,Math.round(r(i/n/(365*u)))):l.count,x=e.min??h(o,f,$),p=[];let M=x;for(let t=0;t<500&&(p.push(M),!(M>a));t++)M=c(M,f,$);const g=e.max??p[p.length-1],d=g-x||1;return{min:x,max:g,ticks:p.filter(t=>t>=x&&t<=g),unit:f,step:$,fraction:t=>(t-x)/d}}function m(t,e){if("second"===t)return{hour:"2-digit",minute:"2-digit",second:"2-digit",hourCycle:"h23"};if("minute"===t||"hour"===t)return{hour:"2-digit",minute:"2-digit",hourCycle:"h23"};if("year"===t)return{year:"numeric"};const n="month"===t||"quarter"===t?{month:"short"}:{month:"short",day:"numeric"};return e?{...n,year:"numeric"}:n}export function formatTimeValue(e,n,r){return t(r,m(n,!0)).format(new Date(e))}export function formatTimeTicks(e,n,r){const o=new Set(e.map(t=>new Date(t).getFullYear())).size>1;return e.map((e,a)=>t(r,m(n,o||0===a)).format(new Date(e)))}export function tickStride(t,e,n){if(t<=1||e<=0)return 1;const r=Math.max(1,Math.floor(e/Math.max(1,n)));return Math.max(1,Math.ceil(t/r))}export function showsTick(t,e,n,r){return t%n===0||r&&t===e-1}export function fitsLast(t,e,n,r){const o=(t-1)%e;return o>0&&o*n>=r+8}export function textWidth(t,e){let n=0;for(const e of t)n+=/[ᄀ-ᇿ⺀-꓏가-퟿豈-﫿︰-﹏]/.test(e)?1:.6;return n*e}export function truncate(t,e,n){if(e<=0||textWidth(t,n)<=e)return t;const r=e-textWidth("…",n);let o="",a=0;for(const e of t){const t=a+textWidth(e,n);if(t>r)break;a=t,o+=e}return o.length>0?`${o.trimEnd()}…`:"…"}export function bandScale(t,e,n){const r=t>0?e/t:e;return{step:r,band:r*n,centre:t=>r*(t+.5)}}export function linePath(t,e){const n=[];let r=[];const o=()=>{if(0!==r.length){if(1===r.length)n.push(`M${r[0].x} ${r[0].y}h0`);else if("step"===e){n.push(`M${r[0].x} ${r[0].y}`);for(let t=1;t<r.length;t++){const e=(r[t-1].x+r[t].x)/2;n.push(`H${e}V${r[t].y}H${r[t].x}`)}}else if("smooth"===e)n.push(`M${r[0].x} ${r[0].y}`),n.push(function(t){const e=t.length,n=[];for(let r=0;r<e-1;r++){const e=t[r+1].x-t[r].x;n.push(0===e?0:(t[r+1].y-t[r].y)/e)}const r=[n[0]??0];for(let t=1;t<e-1;t++){const e=n[t-1],o=n[t];r.push(e*o<=0?0:2*e*o/(e+o))}r.push(n[e-2]??0);const o=[];for(let n=0;n<e-1;n++){const e=(t[n+1].x-t[n].x)/3;o.push(`C${t[n].x+e} ${t[n].y+r[n]*e} ${t[n+1].x-e} ${t[n+1].y-r[n+1]*e} ${t[n+1].x} ${t[n+1].y}`)}return o.join("")}(r));else{n.push(`M${r[0].x} ${r[0].y}`);for(let t=1;t<r.length;t++)n.push(`L${r[t].x} ${r[t].y}`)}r=[]}};for(const e of t)null===e?o():r.push(e);return o(),n.join("")}export function areaPath(t,e,n){const r=[];let o=0;const a=a=>{const i=t.slice(o,a).filter(Boolean);if(0===i.length)return;const u="number"==typeof e?i.map(t=>({x:t.x,y:e})).reverse():e.slice(o,a).filter(Boolean).reverse();if(0===u.length)return;const s=linePath(i,n),c=linePath(u,n).replace(/^M/,"L");r.push(`${s}${c}Z`)};for(let e=0;e<t.length;e++)null===t[e]&&(a(e),o=e+1);return a(t.length),r.join("")}export function barPath(t,e,n,r,o,a){const i=Math.max(0,Math.min(o,n/2,r/2));if(0===i||n<=0||r<=0)return`M${t} ${e}h${n}v${r}h${-n}Z`;const u=(t,e)=>`a${i} ${i} 0 0 1 ${t} ${e}`;return"up"===a?`M${t} ${e+r}V${e+i}${u(i,-i)}H${t+n-i}${u(i,i)}V${e+r}Z`:"down"===a?`M${t} ${e}H${t+n}V${e+r-i}${u(-i,i)}H${t+i}${u(-i,-i)}Z`:"right"===a?`M${t} ${e}H${t+n-i}${u(i,i)}V${e+r-i}${u(-i,i)}H${t}Z`:`M${t+n} ${e+r}H${t+i}${u(-i,-i)}V${e+i}${u(i,-i)}H${t+n}Z`}export const markShapes=["circle","square","triangle","diamond","cross"];const f={circle:1,square:.8862,triangle:1.5551,diamond:1.2533,cross:1.189};export function markPath(t,e,n,r){const o=Math.max(0,r)*f[t];if(0===o)return"";if("circle"===t)return`M${e-o} ${n}a${o} ${o} 0 1 0 ${2*o} 0a${o} ${o} 0 1 0 ${2*-o} 0Z`;if("square"===t)return`M${e-o} ${n-o}h${2*o}v${2*o}h${2*-o}Z`;if("diamond"===t)return`M${e} ${n-o}L${e+o} ${n}L${e} ${n+o}L${e-o} ${n}Z`;if("triangle"===t){return`M${[0,120,240].map(t=>{const r=(t-90)*Math.PI/180;return`${e+o*Math.cos(r)} ${n+o*Math.sin(r)}`}).join("L")}Z`}const a=o/3;return`M${e-a} ${n-o}h${2*a}v${o-a}h${o-a}v${2*a}h${-(o-a)}v${o-a}h${2*-a}v${-(o-a)}h${-(o-a)}v${2*-a}h${o-a}Z`}export function arcPath(t,e,n,r,o,a){const i=(n,r)=>{const o=(r-90)*Math.PI/180;return`${t+n*Math.cos(o)} ${e+n*Math.sin(o)}`};if(Math.abs(a-o)>=360){const t=o+180;return r>0?`M${i(n,o)}A${n} ${n} 0 1 1 ${i(n,t)}A${n} ${n} 0 1 1 ${i(n,o)}ZM${i(r,o)}A${r} ${r} 0 1 0 ${i(r,t)}A${r} ${r} 0 1 0 ${i(r,o)}Z`:`M${i(n,o)}A${n} ${n} 0 1 1 ${i(n,t)}A${n} ${n} 0 1 1 ${i(n,o)}Z`}const u=Math.abs(a-o)>180?1:0;return r<=0?`M${t} ${e}L${i(n,o)}A${n} ${n} 0 ${u} 1 ${i(n,a)}Z`:`M${i(n,o)}A${n} ${n} 0 ${u} 1 ${i(n,a)}L${i(r,a)}A${r} ${r} 0 ${u} 0 ${i(r,o)}Z`}export const rampSteps=5;export function rampStep(t,e,n,r,o=0){if("diverging"===r){const r=Math.max(Math.abs(n-o),Math.abs(o-e));if(!(r>0))return 2;const a=(t-o)/r;return Math.min(4,Math.max(0,2+Math.round(2*a)))}const a=n-e;return a>0?Math.min(4,Math.max(0,Math.floor((t-e)/a*5))):4}export function rampFill(t,e){return`var(--neba-chart-${"diverging"===e?"div":"seq"}-${t+1})`}export function rampInk(t,e){return`var(--neba-chart-${"diverging"===e?"div":"seq"}-on-${t+1})`}export function squarify(t,e,n){const r=t.reduce((t,e)=>t+Math.max(0,e),0);if(!(r>0)||e<=0||n<=0)return[];const o=e*n/r,a=t.map((t,e)=>({index:e,area:Math.max(0,t)*o})).filter(t=>t.area>0).sort((t,e)=>e.area-t.area),i=[];let u=0,s=0,c=e,l=n,h=[];const m=t=>{const e=Math.min(c,l),n=t.reduce((t,e)=>t+e.area,0);if(!(n>0&&e>0))return 1/0;const r=t[0].area,o=t[t.length-1].area;return Math.max(e*e*r/(n*n),n*n/(e*e*o))},f=()=>{const t=h.reduce((t,e)=>t+e.area,0),e=Math.min(c,l),n=e>0?t/e:0,r=c>=l;let o=0;for(const t of h){const e=n>0?t.area/n:0;i.push(r?{index:t.index,x:u,y:s+o,width:n,height:e}:{index:t.index,x:u+o,y:s,width:e,height:n}),o+=e}r?(u+=n,c-=n):(s+=n,l-=n),h=[]};for(const t of a)0===h.length||m([...h,t])<=m(h)||f(),h.push(t);return h.length>0&&f(),i}const $={month:"short",day:"numeric"},x={notation:"compact",maximumFractionDigits:1},p={maximumFractionDigits:2};export function formatCategory(e,n){return e instanceof Date?t(n,$).format(e):String(e)}export function compactNumber(t,n){return Math.abs(t)>=1e4?e(n,x).format(t):e(n,p).format(t)}
+import{dateFormatter as t,numberFormatter as e}from"./format.js";export const plotHeights={xs:120,sm:160,md:220,lg:280,xl:360};export const sparklineHeights={xs:16,sm:20,md:28,lg:40,xl:56};export const lineWidths={xs:1.5,sm:1.75,md:2,lg:2.25,xl:2.5};export const markerRadii={xs:3,sm:3.5,md:4,lg:4.5,xl:5};export const chartFontSizes={xs:10,sm:11,md:12,lg:13,xl:14};export const barMaxThickness={xs:14,sm:18,md:24,lg:30,xl:36};export const barBandRatio={default:.62,compact:.82};export const markGap=2;export const barRadius=4;export const chartPalette=["var(--neba-chart-1)","var(--neba-chart-2)","var(--neba-chart-3)","var(--neba-chart-4)","var(--neba-chart-5)","var(--neba-chart-6)","var(--neba-chart-7)","var(--neba-chart-8)"];const n=new Set(["primary","secondary","success","warning","danger","info"]);export function resolveColor(t){return n.has(t)?`var(--neba-${t}-accent)`:t}export function seriesColor(t,e,n=chartPalette){return resolveColor(t?.color?t.color:n[e%n.length]??chartPalette[0])}export function toValue(t){return null==t?{value:null}:"number"==typeof t?{value:Number.isFinite(t)?t:null}:(t=>"object"==typeof t&&null!==t)(t)?{value:null!==t.y&&Number.isFinite(t.y)?t.y:null,x:t.x,z:t.z,color:t.color?resolveColor(t.color):void 0,label:t.label}:{value:null}}export function toValues(t){return t.map(t=>t.data.map(toValue))}export function toNumber(t){return t instanceof Date?Number.isFinite(t.getTime())?t.getTime():null:"number"==typeof t&&Number.isFinite(t)?t:null}export function pointX(t,e,n){return toNumber(t.x??n?.[e]??e)}export function categoryExtent(t,e){let n=1/0,r=-1/0,o=!1;return t.forEach(t=>{t.forEach((t,a)=>{if(null===t.value)return;const i=pointX(t,a,e);null!==i&&(o=!0,n=Math.min(n,i),r=Math.max(r,i))})}),o?{min:n,max:r}:null}export function bubbleRadius(t,e,n,r){return e>0&&Number.isFinite(t)&&!(t<=0)?Math.max(r,Math.sqrt(Math.min(t,e)/e)*n):0===t?0:r}export function categoryCount(t){return t.reduce((t,e)=>Math.max(t,e.data.length),0)}export function categoryAt(t,e,n){if(e&&t<e.length)return e[t];for(const e of n){const n=e[t]?.x;if(void 0!==n)return n}return t}export function extentOf(t,e){let n=1/0,r=-1/0,o=!1;if(e){const e=t.reduce((t,e)=>Math.max(t,e.length),0);for(let a=0;a<e;a++){let e=0,i=0;for(const n of t){const t=n[a]?.value;null!=t&&(o=!0,t>=0?e+=t:i+=t)}n=Math.min(n,i),r=Math.max(r,e)}}else for(const e of t)for(const{value:t}of e)null!==t&&(o=!0,n=Math.min(n,t),r=Math.max(r,t));return o?{min:n,max:r}:null}function r(t){const e=10**Math.floor(Math.log10(t)),n=t/e;return n<=1?e:n<=2?2*e:n<=5?5*e:10*e}export function valueScale(t,e={}){const{tickCount:n=5,includeZero:o=!0}=e;let a=e.min??(t?t.min:0),i=e.max??(t?t.max:1);if(o&&void 0===e.min&&(a=Math.min(a,0)),o&&void 0===e.max&&(i=Math.max(i,0)),i===a){const t=Math.abs(i)>0?.5*Math.abs(i):1;a-=t,i+=t}const u=void 0!==e.min&&void 0!==e.max?function(t,e){const n=10**Math.floor(Math.log10(t/Math.max(1,e)));let o=r(t/Math.max(1,e)),a=1/0;for(const r of[.1,1,10])for(const i of[1,2,2.5,5]){const u=i*r*n,s=t/u,c=Math.round(s);if(c<1||Math.abs(s-c)>1e-9)continue;const h=Math.abs(c-e);h<a&&(a=h,o=u)}return o}(i-a,n):r((i-a)/Math.max(1,n)),s=void 0!==e.min?a:Math.floor(a/u)*u,c=void 0!==e.max?i:Math.ceil(i/u)*u,h=c-s||1,l=[];for(let t=s;t<=c+1e-9*u;t+=u)l.push(Number(t.toFixed(12)));return{min:s,max:c,ticks:l,fraction:t=>(t-s)/h}}const o=1e3,a=6e4,i=36e5,u=24*i,s=[{unit:"second",count:1,size:o},{unit:"second",count:5,size:5e3},{unit:"second",count:15,size:15e3},{unit:"second",count:30,size:3e4},{unit:"minute",count:1,size:a},{unit:"minute",count:5,size:3e5},{unit:"minute",count:15,size:9e5},{unit:"minute",count:30,size:18e5},{unit:"hour",count:1,size:i},{unit:"hour",count:3,size:3*i},{unit:"hour",count:6,size:6*i},{unit:"hour",count:12,size:12*i},{unit:"day",count:1,size:u},{unit:"day",count:2,size:2*u},{unit:"week",count:1,size:7*u},{unit:"week",count:2,size:14*u},{unit:"month",count:1,size:30*u},{unit:"quarter",count:1,size:91*u},{unit:"month",count:6,size:182*u},{unit:"year",count:1,size:365*u}];function c(t,e,n){const r=new Date(t);if("year"===e)r.setFullYear(r.getFullYear()+n);else if("quarter"===e)r.setMonth(r.getMonth()+3*n);else if("month"===e)r.setMonth(r.getMonth()+n);else if("week"===e)r.setDate(r.getDate()+7*n);else if("day"===e)r.setDate(r.getDate()+n);else{if("hour"!==e)return t+n*("minute"===e?a:o);r.setHours(r.getHours()+n)}return r.getTime()}const h={second:"minute",minute:"hour",hour:"day",day:"month",week:"week",month:"year",quarter:"year",year:"year"};function l(t,e,n){let r=function(t,e){const n=new Date(t);if("year"===e)return new Date(n.getFullYear(),0,1).getTime();if("quarter"===e)return new Date(n.getFullYear(),3*Math.floor(n.getMonth()/3),1).getTime();if("month"===e)return new Date(n.getFullYear(),n.getMonth(),1).getTime();if("week"===e){const t=new Date(n.getFullYear(),n.getMonth(),n.getDate());return t.setDate(t.getDate()-t.getDay()),t.getTime()}return"day"===e?new Date(n.getFullYear(),n.getMonth(),n.getDate()).getTime():"hour"===e?new Date(n.getFullYear(),n.getMonth(),n.getDate(),n.getHours()).getTime():"minute"===e?Math.floor(t/a)*a:Math.floor(t/o)*o}(t,h[e]);if("year"===e&&n>1){const t=new Date(r).getFullYear();r=new Date(t-(t%n+n)%n,0,1).getTime()}for(let o=0;o<500;o++){const o=c(r,e,n);if(o>t)return r;r=o}return r}export function timeScale(t,e={}){const{tickCount:n=6}=e;let o=e.min??t?.min??Date.parse("2000-01-01T00:00:00"),a=e.max??t?.max??o+u;a<=o&&(o-=u/2,a+=u/2);const i=a-o;let h=s[0],m=1/0;for(const t of s){const e=Math.abs(i/t.size-n);e<m&&(m=e,h=t)}const $=h.unit,f="year"===$?Math.max(1,Math.round(r(i/n/(365*u)))):h.count,x=e.min??l(o,$,f),M=[];let p=x;for(let t=0;t<500&&(M.push(p),!(p>a));t++)p=c(p,$,f);const g=e.max??M[M.length-1],d=g-x||1;return{min:x,max:g,ticks:M.filter(t=>t>=x&&t<=g),unit:$,step:f,fraction:t=>(t-x)/d}}function m(t,e){if("second"===t)return{hour:"2-digit",minute:"2-digit",second:"2-digit",hourCycle:"h23"};if("minute"===t||"hour"===t)return{hour:"2-digit",minute:"2-digit",hourCycle:"h23"};if("year"===t)return{year:"numeric"};const n="month"===t||"quarter"===t?{month:"short"}:{month:"short",day:"numeric"};return e?{...n,year:"numeric"}:n}export function formatTimeValue(e,n,r){return t(r,m(n,!0)).format(new Date(e))}export function formatTimeTicks(e,n,r){const o=new Set(e.map(t=>new Date(t).getFullYear())).size>1;return e.map((e,a)=>t(r,m(n,o||0===a)).format(new Date(e)))}export function tickStride(t,e,n){if(t<=1||e<=0)return 1;const r=Math.max(1,Math.floor(e/Math.max(1,n)));return Math.max(1,Math.ceil(t/r))}export function showsTick(t,e,n,r){return t%n===0||r&&t===e-1}export function fitsLast(t,e,n,r){const o=(t-1)%e;return o>0&&o*n>=r+8}export function textWidth(t,e){let n=0;for(const e of t)n+=/[ᄀ-ᇿ⺀-꓏가-퟿豈-﫿︰-﹏]/.test(e)?1:.6;return n*e}export function truncate(t,e,n){if(e<=0||textWidth(t,n)<=e)return t;const r=e-textWidth("…",n);let o="",a=0;for(const e of t){const t=a+textWidth(e,n);if(t>r)break;a=t,o+=e}return o.length>0?`${o.trimEnd()}…`:"…"}export function bandScale(t,e,n){const r=t>0?e/t:e;return{step:r,band:r*n,centre:t=>r*(t+.5)}}export function linePath(t,e){const n=[];let r=[];const o=()=>{if(0!==r.length){if(1===r.length)n.push(`M${r[0].x} ${r[0].y}h0`);else if("step"===e){n.push(`M${r[0].x} ${r[0].y}`);for(let t=1;t<r.length;t++){const e=(r[t-1].x+r[t].x)/2;n.push(`H${e}V${r[t].y}H${r[t].x}`)}}else if("smooth"===e)n.push(`M${r[0].x} ${r[0].y}`),n.push(function(t){const e=t.length,n=[];for(let r=0;r<e-1;r++){const e=t[r+1].x-t[r].x;n.push(0===e?0:(t[r+1].y-t[r].y)/e)}const r=[n[0]??0];for(let t=1;t<e-1;t++){const e=n[t-1],o=n[t];r.push(e*o<=0?0:2*e*o/(e+o))}r.push(n[e-2]??0);const o=[];for(let n=0;n<e-1;n++){const e=(t[n+1].x-t[n].x)/3;o.push(`C${t[n].x+e} ${t[n].y+r[n]*e} ${t[n+1].x-e} ${t[n+1].y-r[n+1]*e} ${t[n+1].x} ${t[n+1].y}`)}return o.join("")}(r));else{n.push(`M${r[0].x} ${r[0].y}`);for(let t=1;t<r.length;t++)n.push(`L${r[t].x} ${r[t].y}`)}r=[]}};for(const e of t)null===e?o():r.push(e);return o(),n.join("")}export function areaPath(t,e,n){const r=[];let o=0;const a=a=>{const i=t.slice(o,a).filter(Boolean);if(0===i.length)return;const u="number"==typeof e?i.map(t=>({x:t.x,y:e})).reverse():e.slice(o,a).filter(Boolean).reverse();if(0===u.length)return;const s=linePath(i,n),c=linePath(u,n).replace(/^M/,"L");r.push(`${s}${c}Z`)};for(let e=0;e<t.length;e++)null===t[e]&&(a(e),o=e+1);return a(t.length),r.join("")}export function barPath(t,e,n,r,o,a){const i=Math.max(0,Math.min(o,n/2,r/2));if(0===i||n<=0||r<=0)return`M${t} ${e}h${n}v${r}h${-n}Z`;const u=(t,e)=>`a${i} ${i} 0 0 1 ${t} ${e}`;return"up"===a?`M${t} ${e+r}V${e+i}${u(i,-i)}H${t+n-i}${u(i,i)}V${e+r}Z`:"down"===a?`M${t} ${e}H${t+n}V${e+r-i}${u(-i,i)}H${t+i}${u(-i,-i)}Z`:"right"===a?`M${t} ${e}H${t+n-i}${u(i,i)}V${e+r-i}${u(-i,i)}H${t}Z`:`M${t+n} ${e+r}H${t+i}${u(-i,-i)}V${e+i}${u(i,-i)}H${t+n}Z`}export const markShapes=["circle","square","triangle","diamond","cross"];const $={circle:1,square:.8862,triangle:1.5551,diamond:1.2533,cross:1.189};export function markPath(t,e,n,r){const o=Math.max(0,r)*$[t];if(0===o)return"";if("circle"===t)return`M${e-o} ${n}a${o} ${o} 0 1 0 ${2*o} 0a${o} ${o} 0 1 0 ${2*-o} 0Z`;if("square"===t)return`M${e-o} ${n-o}h${2*o}v${2*o}h${2*-o}Z`;if("diamond"===t)return`M${e} ${n-o}L${e+o} ${n}L${e} ${n+o}L${e-o} ${n}Z`;if("triangle"===t){return`M${[0,120,240].map(t=>{const r=(t-90)*Math.PI/180;return`${e+o*Math.cos(r)} ${n+o*Math.sin(r)}`}).join("L")}Z`}const a=o/3;return`M${e-a} ${n-o}h${2*a}v${o-a}h${o-a}v${2*a}h${-(o-a)}v${o-a}h${2*-a}v${-(o-a)}h${-(o-a)}v${2*-a}h${o-a}Z`}export function ringPath(t,e,n,r,o){const a=r=>{const o=(r-90)*Math.PI/180;return`${t+n*Math.cos(o)} ${e+n*Math.sin(o)}`};if(Math.abs(o-r)>=360){const t=r+180;return`M${a(r)}A${n} ${n} 0 1 1 ${a(t)}A${n} ${n} 0 1 1 ${a(r)}`}const i=Math.abs(o-r)>180?1:0;return`M${a(r)}A${n} ${n} 0 ${i} 1 ${a(o)}`}export function arcPath(t,e,n,r,o,a){const i=(n,r)=>{const o=(r-90)*Math.PI/180;return`${t+n*Math.cos(o)} ${e+n*Math.sin(o)}`};if(Math.abs(a-o)>=360){const t=o+180;return r>0?`M${i(n,o)}A${n} ${n} 0 1 1 ${i(n,t)}A${n} ${n} 0 1 1 ${i(n,o)}ZM${i(r,o)}A${r} ${r} 0 1 0 ${i(r,t)}A${r} ${r} 0 1 0 ${i(r,o)}Z`:`M${i(n,o)}A${n} ${n} 0 1 1 ${i(n,t)}A${n} ${n} 0 1 1 ${i(n,o)}Z`}const u=Math.abs(a-o)>180?1:0;return r<=0?`M${t} ${e}L${i(n,o)}A${n} ${n} 0 ${u} 1 ${i(n,a)}Z`:`M${i(n,o)}A${n} ${n} 0 ${u} 1 ${i(n,a)}L${i(r,a)}A${r} ${r} 0 ${u} 0 ${i(r,o)}Z`}export const rampSteps=5;export function rampStep(t,e,n,r,o=0){if("diverging"===r){const r=Math.max(Math.abs(n-o),Math.abs(o-e));if(!(r>0))return 2;const a=(t-o)/r;return Math.min(4,Math.max(0,2+Math.round(2*a)))}const a=n-e;return a>0?Math.min(4,Math.max(0,Math.floor((t-e)/a*5))):4}export function rampFill(t,e){return`var(--neba-chart-${"diverging"===e?"div":"seq"}-${t+1})`}export function rampInk(t,e){return`var(--neba-chart-${"diverging"===e?"div":"seq"}-on-${t+1})`}export function squarify(t,e,n){const r=t.reduce((t,e)=>t+Math.max(0,e),0);if(!(r>0)||e<=0||n<=0)return[];const o=e*n/r,a=t.map((t,e)=>({index:e,area:Math.max(0,t)*o})).filter(t=>t.area>0).sort((t,e)=>e.area-t.area),i=[];let u=0,s=0,c=e,h=n,l=[];const m=t=>{const e=Math.min(c,h),n=t.reduce((t,e)=>t+e.area,0);if(!(n>0&&e>0))return 1/0;const r=t[0].area,o=t[t.length-1].area;return Math.max(e*e*r/(n*n),n*n/(e*e*o))},$=()=>{const t=l.reduce((t,e)=>t+e.area,0),e=Math.min(c,h),n=e>0?t/e:0,r=c>=h;let o=0;for(const t of l){const e=n>0?t.area/n:0;i.push(r?{index:t.index,x:u,y:s+o,width:n,height:e}:{index:t.index,x:u+o,y:s,width:e,height:n}),o+=e}r?(u+=n,c-=n):(s+=n,h-=n),l=[]};for(const t of a)0===l.length||m([...l,t])<=m(l)||$(),l.push(t);return l.length>0&&$(),i}const f={month:"short",day:"numeric"},x={notation:"compact",maximumFractionDigits:1},M={maximumFractionDigits:2};export function formatCategory(e,n){return e instanceof Date?t(n,f).format(e):String(e)}export function compactNumber(t,n){return Math.abs(t)>=1e4?e(n,x).format(t):e(n,M).format(t)}

package/dist/internal/grid.d.ts

@@ -1,43 +1,29 @@
 /**
- * The arithmetic and the vocabulary the three layout components share.
+ * The arithmetic and the vocabulary the layout components share.
  *
  * Like `internal/styles.ts` this is the library talking to itself, and it lives
  * here rather than in either component's folder for the same reason
  * `internal/button-group.ts` does: `GridContainer` and `Grid` are one system in
- * two elements, and neither should have to import the other.
+ * two elements, and neither should have to import the other. `Flex` reads the
+ * alignment tables and the gutter arithmetic below and nothing else, which is
+ * the whole of what it has in common with a grid.
  *
  * What is *not* here is the layout itself. A column width is
  * `(100% + gap) * span / columns - gap`, it has to change at four breakpoints,
  * and it is the width of an element whose column count is declared on its
  * parent — none of which Tailwind can spell, because Tailwind only ever sees
  * class names written out literally and `columns` is a number a caller picks.
- * So the widths are real CSS in `styles.css`, driven by the `--n-*` slots this
- * file generates. That is the same split the rest of the library makes: per-
- * instance values go in inline custom properties, never in class names.
- */
-import type * as React from 'react';
-import type { NebaAlignItems, NebaAlignSelf, NebaBreakpoint, NebaJustifyContent, NebaResponsive } from '../types.js';
-/** Smallest first, which is also the order the media queries have to be in. */
-export declare const breakpoints: readonly NebaBreakpoint[];
-/**
- * Turns a responsive value into the `--n-{name}-{breakpoint}` slots the CSS
- * reads, emitting only the breakpoints the caller actually named.
- *
- * The gaps are filled in by CSS rather than here: each breakpoint's rule falls
- * back through the ones below it, so `{ md: 6 }` needs one slot and not five.
- * That keeps the inline style on a grid item down to what was asked for.
- */
-export declare function responsiveSlots<T>(name: string, value: NebaResponsive<T> | undefined, toCss: (value: T) => string): React.CSSProperties;
-/**
- * Fills in the `xs` entry of a partial map with the prop's own default.
+ * So the widths are real CSS in `styles.css`, driven by the `--n-*` slots
+ * `internal/responsive.ts` generates. That is the same split the rest of the
+ * library makes: per-instance values go in inline custom properties, never in
+ * class names.
  *
- * Without this, `spacing={{ md: 4 }}` would be a grid with no gutter at all
- * below 48rem — the CSS fallback rather than the documented default of 2 — and
- * a caller who narrowed one breakpoint would silently lose every other one. A
- * map says "from here up, use this instead"; it does not say "and nothing
- * below".
+ * What is also not here any more is that generator. `responsiveSlots` and
+ * `withBaseline` were written for the grid and are not about grids, so they sit
+ * in `responsive.ts` where a Container and a Flex can reach them without
+ * importing column arithmetic they will never run.
  */
-export declare function withBaseline<T>(value: NebaResponsive<T> | undefined, baseline: T): NebaResponsive<T>;
+import type { NebaAlignItems, NebaAlignSelf, NebaJustifyContent } from '../types.js';
 /**
  * A count of columns, as a plain number for `calc()` to divide by.
  *

package/dist/internal/grid.js

@@ -1 +1 @@
-export const breakpoints=["xs","sm","md","lg","xl"];export function responsiveSlots(t,e,n){const s=function(t){return null==t?{}:"object"==typeof t?t:{xs:t}}(e),o={};for(const e of breakpoints){const r=s[e];void 0!==r&&(o[`--n-${t}-${e}`]=n(r))}return o}export function withBaseline(t,e){return null==t?e:"object"==typeof t?{xs:e,...t}:t}export function columnCount(t){return String(Math.max(1,Math.round(t)))}export function columnUnits(t,e){return String(Math.max(e,Math.round(t)))}export const spanValue=t=>columnUnits(t,1);export const offsetValue=t=>columnUnits(t,0);export function spacingValue(t){const e=.25*Math.max(0,t);return`${Number(e.toFixed(5))}rem`}export const justifyContentClasses={start:"justify-start",center:"justify-center",end:"justify-end","space-between":"justify-between","space-around":"justify-around","space-evenly":"justify-evenly",stretch:"justify-stretch"};export const alignItemsClasses={start:"items-start",center:"items-center",end:"items-end",stretch:"items-stretch",baseline:"items-baseline"};export const alignContentClasses={start:"content-start",center:"content-center",end:"content-end","space-between":"content-between","space-around":"content-around","space-evenly":"content-evenly",stretch:"content-stretch"};export const alignSelfClasses={auto:"self-auto",start:"self-start",center:"self-center",end:"self-end",stretch:"self-stretch",baseline:"self-baseline"};
+export function columnCount(t){return String(Math.max(1,Math.round(t)))}export function columnUnits(t,e){return String(Math.max(e,Math.round(t)))}export const spanValue=t=>columnUnits(t,1);export const offsetValue=t=>columnUnits(t,0);export function spacingValue(t){const e=.25*Math.max(0,t);return`${Number(e.toFixed(5))}rem`}export const justifyContentClasses={start:"justify-start",center:"justify-center",end:"justify-end","space-between":"justify-between","space-around":"justify-around","space-evenly":"justify-evenly",stretch:"justify-stretch"};export const alignItemsClasses={start:"items-start",center:"items-center",end:"items-end",stretch:"items-stretch",baseline:"items-baseline"};export const alignContentClasses={start:"content-start",center:"content-center",end:"content-end","space-between":"content-between","space-around":"content-around","space-evenly":"content-evenly",stretch:"content-stretch"};export const alignSelfClasses={auto:"self-auto",start:"self-start",center:"self-center",end:"self-end",stretch:"self-stretch",baseline:"self-baseline"};

package/dist/internal/i18n.d.ts

@@ -288,6 +288,24 @@ export interface CarouselMessages {
 }
 /** The `carousel` namespace, as Carousel read it. */
 export declare const carouselMessages: MessageTable<CarouselMessages>;
+/**
+ * The gallery, and the viewer a tile opens into.
+ *
+ * A Carousel's words are next to these and are deliberately not reused: a
+ * carousel moves between *slides* and this moves between pictures, and a
+ * screen reader saying "next slide" over a wall of photographs is describing
+ * something the reader is not looking at.
+ */
+export interface GalleryMessages {
+    /** Names the list, when the caller did not. */
+    label: string;
+    /** One tile's position. `{index}` and `{total}` are replaced with the numbers. */
+    item: string;
+    previous: string;
+    next: string;
+}
+/** The `gallery` namespace, as Gallery and its viewer read it. */
+export declare const galleryMessages: MessageTable<GalleryMessages>;
 /**
  * The charts.
  *
@@ -543,6 +561,8 @@ export interface NebaLocale {
     pagination?: Partial<PaginationMessages>;
     /** Carousel. */
     carousel?: Partial<CarouselMessages>;
+    /** Gallery. */
+    gallery?: Partial<GalleryMessages>;
     /** Chart. */
     chart?: Partial<ChartMessages>;
     /** Scroll. */

package/dist/internal/i18n.js

@@ -1 +1 @@
-import*as e from"react";export function fill(e,s){return e.replace(/\{(\w+)\}/g,(e,o)=>s[o]??e)}export const actionMessages={"":{close:"Close",dismiss:"Dismiss",clear:"Clear",remove:"Remove"}};export const confirmMessages={"":{confirm:"Confirm",cancel:"Cancel"}};export const linkMessages={"":{newTab:"(opens in a new tab)"}};export const spoilerMessages={"":{reveal:"Reveal",hide:"Hide",notice:"This may contain spoilers"}};export const chatMessages={"":{sending:"Sending",sent:"Sent",delivered:"Delivered",read:"Read",failed:"Not sent",typing:"Typing…"}};export const emptyMessages={"":{title:"Nothing here"}};export const tableMessages={"":{search:"Search",selectAll:"Select all rows",selectRow:"Select row",rowsPerPage:"Rows per page",range:"{start}–{end} of {total}",selected:"{count} selected",empty:"No data",exportCsv:"Export CSV"}};export const colorMessages={"":{area:"Saturation and brightness",hue:"Hue",alpha:"Opacity",value:"Colour value",swatches:"Preset colours",clear:"Clear",empty:"Choose a colour"}};export const ratingMessages={"":{label:"Rating",value:"{value} out of {max}",empty:"No rating"}};export const numberMessages={"":{increase:"Increase",decrease:"Decrease"}};export const paginationMessages={"":{label:"Pagination",page:"Page {page}",status:"Page {page} of {total}",previous:"Previous page",next:"Next page",first:"First page",last:"Last page"}};export const carouselMessages={"":{label:"Carousel",slide:"Slide {index} of {total}",previous:"Previous slide",next:"Next slide"}};export const chartMessages={"":{label:"Chart"}};export const scrollMessages={"":{label:"Scrollable content",previous:"Scroll back",next:"Scroll forward"}};export const breadcrumbMessages={"":{label:"Breadcrumb",expand:"Show hidden steps"}};export const commandMessages={"":{label:"Command palette",search:"Type a command or search…",empty:"No commands found"}};export const transferMessages={"":{source:"Available",target:"Selected",toTarget:"Move to selected",toSource:"Move to available",search:"Search",selectAll:"Select all",empty:"Nothing here"}};export const anchorMessages={"":{label:"On this page"}};export const comboboxMessages={"":{empty:"No matches",remove:"Remove {label}"}};export const overlayMessages={"":{label:"Overlay"}};export const windowMessages={"":{minimize:"Minimize",maximize:"Maximize",restore:"Restore",resize:"Resize window"}};export const layoutMessages={"":{skipToContent:"Skip to content",sidebar:"Sidebar",openSidebar:"Open sidebar",closeSidebar:"Close sidebar",resizeSidebar:"Resize sidebar"}};export const codeMessages={"":{code:"Code",copy:"Copy",copied:"Copied",copyFailed:"Could not copy",raw:"Raw",prompt:"Prompt"}};export const stepsMessages={"":{previous:"Previous",next:"Next",done:"Done",skip:"Skip",restart:"Start over",completed:"All steps complete",steps:"Steps",position:"{index} of {total}",step:"Step {index}: {title}"}};const s={zh:"zh-hans","zh-cn":"zh-hans","zh-my":"zh-hans","zh-sg":"zh-hans","zh-hk":"zh-hant","zh-mo":"zh-hant","zh-tw":"zh-hant"};const o=new WeakMap;export function resolveMessages(e,t){const a=e[""],r=t?.trim()??"";if(!r)return a;let n=o.get(e);n||(n=new Map,o.set(e,n));const c=n.get(r);if(c)return c;const l=function(e){const s=e.toLowerCase().split(/[-_]/).filter(Boolean),o=s[0];if(!o)return[];const t=s.slice(1),a=t.find(e=>/^[a-z]{4}$/.test(e)),r=t.find(e=>/^([a-z]{2}|\d{3})$/.test(e));return[a?`${o}-${a}`:"",r?`${o}-${r}`:"",o].filter(Boolean)}(r).map(o=>{const t=s[o];return e[o]??(t?e[t]:void 0)}).find(Boolean),i=l?{...a,...l}:a;return n.set(r,i),i}export function useMessages(s,o){return e.useMemo(()=>resolveMessages(s,o),[s,o])}export function fillMessage(e,s){return e.replace(/\{(\w+)\}/g,(e,o)=>s[o]??e)}const t={action:actionMessages,confirm:confirmMessages,link:linkMessages,spoiler:spoilerMessages,chat:chatMessages,empty:emptyMessages,table:tableMessages,color:colorMessages,rating:ratingMessages,number:numberMessages,pagination:paginationMessages,carousel:carouselMessages,chart:chartMessages,scroll:scrollMessages,breadcrumb:breadcrumbMessages,anchor:anchorMessages,transfer:transferMessages,command:commandMessages,combobox:comboboxMessages,overlay:overlayMessages,window:windowMessages,layout:layoutMessages,code:codeMessages,steps:stepsMessages};export function registerMessages(e,s){const a=e.trim().toLowerCase();for(const[e,r]of Object.entries(s)){const s=t[e];s&&r&&(s[a]=r,o.delete(s))}}
+import*as e from"react";export function fill(e,s){return e.replace(/\{(\w+)\}/g,(e,o)=>s[o]??e)}export const actionMessages={"":{close:"Close",dismiss:"Dismiss",clear:"Clear",remove:"Remove"}};export const confirmMessages={"":{confirm:"Confirm",cancel:"Cancel"}};export const linkMessages={"":{newTab:"(opens in a new tab)"}};export const spoilerMessages={"":{reveal:"Reveal",hide:"Hide",notice:"This may contain spoilers"}};export const chatMessages={"":{sending:"Sending",sent:"Sent",delivered:"Delivered",read:"Read",failed:"Not sent",typing:"Typing…"}};export const emptyMessages={"":{title:"Nothing here"}};export const tableMessages={"":{search:"Search",selectAll:"Select all rows",selectRow:"Select row",rowsPerPage:"Rows per page",range:"{start}–{end} of {total}",selected:"{count} selected",empty:"No data",exportCsv:"Export CSV"}};export const colorMessages={"":{area:"Saturation and brightness",hue:"Hue",alpha:"Opacity",value:"Colour value",swatches:"Preset colours",clear:"Clear",empty:"Choose a colour"}};export const ratingMessages={"":{label:"Rating",value:"{value} out of {max}",empty:"No rating"}};export const numberMessages={"":{increase:"Increase",decrease:"Decrease"}};export const paginationMessages={"":{label:"Pagination",page:"Page {page}",status:"Page {page} of {total}",previous:"Previous page",next:"Next page",first:"First page",last:"Last page"}};export const carouselMessages={"":{label:"Carousel",slide:"Slide {index} of {total}",previous:"Previous slide",next:"Next slide"}};export const galleryMessages={"":{label:"Gallery",item:"Image {index} of {total}",previous:"Previous image",next:"Next image"}};export const chartMessages={"":{label:"Chart"}};export const scrollMessages={"":{label:"Scrollable content",previous:"Scroll back",next:"Scroll forward"}};export const breadcrumbMessages={"":{label:"Breadcrumb",expand:"Show hidden steps"}};export const commandMessages={"":{label:"Command palette",search:"Type a command or search…",empty:"No commands found"}};export const transferMessages={"":{source:"Available",target:"Selected",toTarget:"Move to selected",toSource:"Move to available",search:"Search",selectAll:"Select all",empty:"Nothing here"}};export const anchorMessages={"":{label:"On this page"}};export const comboboxMessages={"":{empty:"No matches",remove:"Remove {label}"}};export const overlayMessages={"":{label:"Overlay"}};export const windowMessages={"":{minimize:"Minimize",maximize:"Maximize",restore:"Restore",resize:"Resize window"}};export const layoutMessages={"":{skipToContent:"Skip to content",sidebar:"Sidebar",openSidebar:"Open sidebar",closeSidebar:"Close sidebar",resizeSidebar:"Resize sidebar"}};export const codeMessages={"":{code:"Code",copy:"Copy",copied:"Copied",copyFailed:"Could not copy",raw:"Raw",prompt:"Prompt"}};export const stepsMessages={"":{previous:"Previous",next:"Next",done:"Done",skip:"Skip",restart:"Start over",completed:"All steps complete",steps:"Steps",position:"{index} of {total}",step:"Step {index}: {title}"}};const s={zh:"zh-hans","zh-cn":"zh-hans","zh-my":"zh-hans","zh-sg":"zh-hans","zh-hk":"zh-hant","zh-mo":"zh-hant","zh-tw":"zh-hant"};const o=new WeakMap;export function resolveMessages(e,t){const a=e[""],r=t?.trim()??"";if(!r)return a;let n=o.get(e);n||(n=new Map,o.set(e,n));const l=n.get(r);if(l)return l;const c=function(e){const s=e.toLowerCase().split(/[-_]/).filter(Boolean),o=s[0];if(!o)return[];const t=s.slice(1),a=t.find(e=>/^[a-z]{4}$/.test(e)),r=t.find(e=>/^([a-z]{2}|\d{3})$/.test(e));return[a?`${o}-${a}`:"",r?`${o}-${r}`:"",o].filter(Boolean)}(r).map(o=>{const t=s[o];return e[o]??(t?e[t]:void 0)}).find(Boolean),i=c?{...a,...c}:a;return n.set(r,i),i}export function useMessages(s,o){return e.useMemo(()=>resolveMessages(s,o),[s,o])}export function fillMessage(e,s){return e.replace(/\{(\w+)\}/g,(e,o)=>s[o]??e)}const t={action:actionMessages,confirm:confirmMessages,link:linkMessages,spoiler:spoilerMessages,chat:chatMessages,empty:emptyMessages,table:tableMessages,color:colorMessages,rating:ratingMessages,number:numberMessages,pagination:paginationMessages,carousel:carouselMessages,gallery:galleryMessages,chart:chartMessages,scroll:scrollMessages,breadcrumb:breadcrumbMessages,anchor:anchorMessages,transfer:transferMessages,command:commandMessages,combobox:comboboxMessages,overlay:overlayMessages,window:windowMessages,layout:layoutMessages,code:codeMessages,steps:stepsMessages};export function registerMessages(e,s){const a=e.trim().toLowerCase();for(const[e,r]of Object.entries(s)){const s=t[e];s&&r&&(s[a]=r,o.delete(s))}}

package/dist/internal/media.d.ts

@@ -8,12 +8,19 @@ export declare function noMatchOnServer(): boolean;
 /**
  * The five widths, written once and read in both directions.
  *
- * They are Tailwind's own defaults, which is what makes a Neba layout and a
- * `md:` utility change at the same moment — and they are here rather than in
+ * They are Tailwind's defaults, which is what makes a Neba layout and a `md:`
+ * utility change at the same moment — and they are here rather than in
  * `page-layout.ts`, where they used to be, because a layout asks "is the window
  * *narrower* than this" and a caller asks "is it *at least* this". Two
  * questions, one table: a second copy would be a second chance for the two to
  * disagree about what `md` is.
+ *
+ * This copy is the fallback rather than the source. `styles.css` publishes the
+ * same four widths as `--neba-breakpoint-*`, filled in from Tailwind's own
+ * theme at build time, and `readBreakpoints` below prefers those — so a
+ * consumer who moves `--breakpoint-md` moves the CSS and this together instead
+ * of leaving the two to disagree silently. What is written here is what a
+ * server, and a page whose stylesheet has not arrived, has to answer with.
  */
 export declare const breakpointWidths: Record<NebaBreakpoint, string>;
 /** Narrower than this breakpoint. `xs` has nothing below it, so it is `null`. */

package/dist/internal/media.js

@@ -1 +1 @@
-"use client";import*as e from"react";const r=new Map;function t(e){if(r.has(e))return r.get(e)??null;const t="undefined"!=typeof window&&window.matchMedia?window.matchMedia(e):null;return r.set(e,t),t}export function subscribeToQuery(e,r){const n=t(e);return n?(n.addEventListener("change",r),()=>n.removeEventListener("change",r)):()=>{}}export function queryMatches(e){return t(e)?.matches??!1}export function noMatchOnServer(){return!1}export const breakpointWidths={xs:"0rem",sm:"40rem",md:"48rem",lg:"64rem",xl:"80rem"};export function widthBelow(e){return"xs"===e?null:`(width < ${breakpointWidths[e]})`}export function widthAtLeast(e){return`(width >= ${breakpointWidths[e]})`}export function useMediaQuery(r){const t=e.useCallback(e=>r?subscribeToQuery(r,e):()=>{},[r]),n=e.useCallback(()=>!!r&&queryMatches(r),[r]);return e.useSyncExternalStore(t,n,noMatchOnServer)}export const reducedMotionQuery="(prefers-reduced-motion: reduce)";const n=e=>subscribeToQuery(reducedMotionQuery,e),o=()=>queryMatches(reducedMotionQuery);export function usePrefersReducedMotion(){return e.useSyncExternalStore(n,o,noMatchOnServer)}
+"use client";import*as e from"react";const t=new Map;function n(e){if(t.has(e))return t.get(e)??null;const n="undefined"!=typeof window&&window.matchMedia?window.matchMedia(e):null;return t.set(e,n),n}export function subscribeToQuery(e,t){const r=n(e);return r?(r.addEventListener("change",t),()=>r.removeEventListener("change",t)):()=>{}}export function queryMatches(e){return n(e)?.matches??!1}export function noMatchOnServer(){return!1}export const breakpointWidths={xs:"0rem",sm:"40rem",md:"48rem",lg:"64rem",xl:"80rem"};let r=null;function o(){if(r)return r;if("undefined"==typeof window||!window.getComputedStyle)return breakpointWidths;const e=getComputedStyle(document.documentElement),t={...breakpointWidths};for(const n of["sm","md","lg","xl"]){const r=e.getPropertyValue(`--neba-breakpoint-${n}`).trim();r&&(t[n]=r)}return r=t,t}export function widthBelow(e){return"xs"===e?null:`(width < ${o()[e]})`}export function widthAtLeast(e){return`(width >= ${o()[e]})`}export function useMediaQuery(t){const n=e.useCallback(e=>t?subscribeToQuery(t,e):()=>{},[t]),r=e.useCallback(()=>!!t&&queryMatches(t),[t]);return e.useSyncExternalStore(n,r,noMatchOnServer)}export const reducedMotionQuery="(prefers-reduced-motion: reduce)";const u=e=>subscribeToQuery(reducedMotionQuery,e),c=()=>queryMatches(reducedMotionQuery);export function usePrefersReducedMotion(){return e.useSyncExternalStore(u,c,noMatchOnServer)}