neba 1.13.0 → 1.16.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-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";
+export*from"./types.js";export*from"./hooks/index.js";export*from"./components/accordion/index.js";export*from"./components/agent-steps/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/approval/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/context-window/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/inline-citation/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/prompt-input/index.js";export*from"./components/provider/index.js";export*from"./components/radio-group/index.js";export*from"./components/reasoning/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/sources/index.js";export*from"./components/stack/index.js";export*from"./components/statistic/index.js";export*from"./components/streaming-text/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/tool-call/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

@@ -3,7 +3,7 @@
  * with it.
  *
  * It lives in `internal/` for the reason `button-group.ts` and `menu.ts` do:
- * eleven components need it and none of them should have to import another. The
+ * seventeen components need it and none of them should have to import another. The
  * `transition` prop needs the same table from the other side — a Card and an
  * `AnimateFade` must produce the same fade, or the library has two fades.
  *
@@ -18,7 +18,7 @@
  *
  * Because the from-state is the *keyframe* rather than a second class, running
  * an effect backwards is `animation-direction: reverse` and nothing else. That
- * is what makes `mode="out"` free on all six.
+ * is what makes `mode="out"` free on every one of them.
  *
  * ## What is deliberately not here
  *
@@ -40,6 +40,11 @@ import type { NebaAnimateRepeat, NebaAnimateTimeline, NebaAnimateTrigger, NebaAn
 export declare const animationClasses: Record<NebaAnimation, string>;
 /** The class that reads the slots. Always paired with one of the above. */
 export declare const animBaseClass = "neba-anim";
+/**
+ * The parts a replay rewinds when the effect was handed to each child rather
+ * than run on the root, read from the root. See `AnimationRunOptions.parts`.
+ */
+export declare const childAnimations = ":scope > .neba-anim";
 /**
  * How long each effect takes when nobody said.
  *
@@ -117,6 +122,15 @@ export declare function staggers({ stagger, durationStep }: StaggerOptions): boo
  * 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[];
+/**
+ * The shortest a blink may run, in milliseconds.
+ *
+ * One blink is one flash, full to faint and back, and more than three flashes
+ * in a second is what WCAG 2.3.1 rules out, because that is the rate at which a
+ * flash can bring on a seizure. A shorter `duration` is raised to this rather
+ * than refused, wherever a blink is asked for.
+ */
+export declare const MIN_BLINK_DURATION = 334;
 /**
  * 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.
@@ -130,6 +144,11 @@ export declare function transitionProps(transition: NebaTransition | undefined):
     className: string;
     style: React.CSSProperties;
 };
+/** An effect, and the slots it reads. */
+export interface TransitionParts {
+    effect: NebaAnimation;
+    slots: AnimationSlotOptions;
+}
 /**
  * The same reading, one step before it becomes a class and a style object.
  *
@@ -138,27 +157,44 @@ export declare function transitionProps(transition: NebaTransition | undefined):
  * 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.
+ *
+ * Given an effect it always has an answer, and the overload says so: AnimateSplit
+ * names one every time, and a `null` it could never receive was two branches of
+ * code that never ran.
  */
-export declare function transitionParts(transition: NebaTransition | undefined): {
-    effect: NebaAnimation;
-    slots: AnimationSlotOptions;
-} | null;
+export declare function transitionParts(transition: NebaTransition): TransitionParts;
+export declare function transitionParts(transition: NebaTransition | undefined): TransitionParts | null;
 /**
- * Whether the reader has asked for less motion — the hook the three effects
+ * Whether the reader has asked for less motion — the hook the four effects
  * with motion written in JavaScript read. It lives in `media.ts` beside the
  * query it asks, so a Carousel and a ScrollZone can ask the same question
- * without pulling the eleven effects below in with the answer.
+ * without pulling the table of effects below in with the answer.
  */
 export { usePrefersReducedMotion } from './media.js';
 export interface AnimationRunOptions {
     trigger: NebaAnimateTrigger;
-    play?: boolean;
+    play?: boolean | number;
     once: boolean;
     threshold: number;
     paused?: boolean;
     /** An infinite effect stops when the pointer leaves; a finite one finishes. */
     infinite: boolean;
+    /**
+     * The descendants a replay rewinds along with the root, as a selector read
+     * from it: `childAnimations` for an effect handed to each child. Only the
+     * component's own parts, so an animation of somebody else's inside it is
+     * left where it is.
+     */
+    parts?: string;
+    /**
+     * The caller's own props, read for the four events a `hover` trigger listens
+     * to. Their handlers run beside the trigger's: spread in one order the
+     * trigger threw them away, and spread in the other they took the trigger off.
+     */
+    caller?: TriggerHandlers;
 }
+/** The events a `hover` trigger listens to. */
+type TriggerHandlers = Pick<React.HTMLAttributes<HTMLElement>, 'onPointerEnter' | 'onPointerLeave' | 'onFocus' | 'onBlur'>;
 export interface AnimationRun {
     /** Goes on the animated element. */
     ref: React.RefCallback<HTMLElement>;
@@ -166,8 +202,17 @@ export interface AnimationRun {
     state: 'running' | 'paused';
     /** Whether the animation has been let go at all, for `data-state`. */
     started: boolean;
-    /** Spread onto the element when `trigger` is `hover`; empty otherwise. */
-    handlers: React.HTMLAttributes<HTMLElement>;
+    /**
+     * Spread onto the element after the caller's props when `trigger` is
+     * `hover`, with the caller's handlers already inside; empty otherwise.
+     */
+    handlers: TriggerHandlers;
+    /**
+     * An endless effect that is off the screen, and held where it is until it
+     * comes back. Already folded into `state`; a loop written in JavaScript reads
+     * it beside `paused`.
+     */
+    offscreen: boolean;
 }
 /**
  * Starts, restarts and holds an animation.
@@ -188,7 +233,7 @@ export interface AnimationRun {
  * style to settle, and putting it back is the one move that rewinds the element
  * and leaves everything inside it alone.
  */
-export declare function useAnimationRun({ trigger, play, once, threshold, paused, infinite }: AnimationRunOptions): AnimationRun;
+export declare function useAnimationRun({ trigger, play, once, threshold, paused, infinite, caller, parts }: AnimationRunOptions): AnimationRun;
 export interface AnimateElementParams extends AnimationSlotOptions, AnimationRunOptions {
     /** Which keyframe, out of the shared table. `null` to bring your own. */
     effect: NebaAnimation | null;
@@ -222,11 +267,13 @@ export interface AnimateElement {
 /**
  * Everything an `Animate*` root needs, in one call.
  *
- * The six effect components differ only in their defaults and in which slots
+ * The ten effect components differ only in their defaults and in which slots
  * they fill, so this is where the identical two-thirds of each of them lives.
- * The four that have to understand their children — Typing, Marquee, Headline,
- * Appear — call `useAnimationRun` directly and put the classes where their own
- * structure needs them, which is why `effect` is allowed to be `null`.
+ * The seven that have to understand their children or their text — Typing,
+ * Marquee, Headline, Appear, Split, Scramble and Counter — call
+ * `useAnimationRun` directly and put the classes where their own structure
+ * needs them. `effect` may be `null` for the one effect component, Lighting,
+ * whose keyframe runs on a pseudo-element rather than on its root.
  *
  * `data-neba-animation` and `data-state` are here rather than in each component
  * because they are the same two facts every time, and because a test that has

package/dist/internal/animate.js

@@ -1 +1 @@
-"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}}
+"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 childAnimations=":scope > .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 c=n.Children.toArray(t);return c.map((t,u)=>{const m=l?c.length-1-u:u,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},u);const d=t.props;return n.cloneElement(t,{className:a(r,d.className),style:{...f,...d.style}})})}export const MIN_BLINK_DURATION=334;export function transitionProps(e){const n=transitionParts(e);return n?{className:`neba-anim ${animationClasses[n.effect]}`,style:{...animationSlots(n.slots),"--n-anim-state":"running"}}:{className:"",style:{}}}export function transitionParts(e){if(!e)return null;const n="string"==typeof e?{type:e}:e,{type:t}=n,a=n.duration??defaultDurations[t],r={duration:"blink"===t?Math.max(a,334):a,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||(r.scale=n.scale??("zoom"===t?.4:.8)),"slide"===t){const{x:e,y:t}=slideOffsets(n.from??"bottom",n.distance??"100%");r.x=e,r.y=t}return"rotate"===t&&(r.angle=`${n.angle??-180}deg`),"reveal"===t&&(r.clip=revealClip(n.side??"left")),{effect:t,slots:r}}export{usePrefersReducedMotion}from"./media.js";export function useAnimationRun({trigger:e,play:a,once:r,threshold:i,paused:s,infinite:o,caller:l,parts:c}){const u=n.useRef(null),[m,f]=n.useState("mount"===e),[d,p]=n.useState(0),[g,y]=n.useState(!1),x=n.useCallback(()=>{f(!0),p(e=>e+1)},[]);n.useLayoutEffect(()=>{const e=u.current;if(!e||0===d)return;const n=[e,...c?e.querySelectorAll(c):[]];for(const e of n)e.style.animationName="none";e.offsetWidth;for(const e of n)e.style.animationName=""},[d,c]),n.useEffect(()=>{if("visible"!==e)return;const n=u.current;if(!n)return;let a=null;if(a=t(n,i,e=>{e?(x(),r&&(a?.(),a=null)):r||f(!1)}),a)return()=>a?.();f(!0)},[e,r,i,x]),n.useEffect(()=>{const e=u.current;if(o&&e)return t(e,0,e=>y(!e))??void 0},[o]),n.useEffect(()=>{"manual"===e&&(a?x():f(!1))},[e,a,x]);const v=e=>e.relatedTarget instanceof Node&&e.currentTarget.contains(e.relatedTarget),b="hover"===e?{onPointerEnter:e=>{l?.onPointerEnter?.(e),x()},onFocus:e=>{l?.onFocus?.(e),v(e)||x()},onPointerLeave:e=>{l?.onPointerLeave?.(e),o&&f(!1)},onBlur:e=>{l?.onBlur?.(e),o&&!v(e)&&f(!1)}}:{};return{ref:n.useCallback(e=>{u.current=e},[]),state:!m||s||o&&g?"paused":"running",started:m,handlers:b,offscreen:o&&g}}export function useAnimateElement(e){const{effect:n,trigger:t,play:a,once:r,threshold:i,paused:s,infinite:o,caller:l,children:c,stagger:u=0,durationStep:m=0,reverse:f=!1,effectClass:d,name:p,...g}=e,y=n?animationClasses[n]:d,x=y?`neba-anim ${y}`:"",v=""!==x&&staggers({stagger:u,durationStep:m,reverse:f}),b=useAnimationRun({trigger:t,play:a,once:r,threshold:i,paused:s,infinite:o,caller:l,parts:v?childAnimations:void 0}),h="view"===g.timeline?"running":b.state;return{ref:b.ref,className:v?"":x,style:v?{"--n-anim-state":h}:{...animationSlots(g),"--n-anim-state":h},props:{...b.handlers,"data-neba-animation":p??n??void 0,"data-state":h},children:v?staggerChildren(c,x,g,{stagger:u,durationStep:m,reverse:f}):c}}

package/dist/internal/calendar.d.ts

@@ -83,6 +83,11 @@ export interface CalendarProps {
     renderDay?: (date: Date) => React.ReactNode;
     /** Takes the focus on mount — the popup has just opened. */
     autoFocus?: boolean;
+    /**
+     * More than one cell can be selected at once — a `multiple` calendar or a
+     * range — which a screen reader is told on the grid a pick is made in.
+     */
+    multiselectable?: boolean;
     showPreviousButton?: boolean;
     showNextButton?: boolean;
     labels: PickerLabels;
@@ -109,7 +114,7 @@ export interface CalendarProps {
  * grid instead of walking forty-two cells — the pattern the ARIA date-picker
  * practice describes, and the reason none of the cells is a `disabled` button.
  */
-export declare function Calendar({ size, color, locale, weekStartsOn, month, onMonthChange, selected, rangeStart, rangeEnd, onSelect, granularity, renderDay, onPreviewChange, minDate, maxDate, shouldDisableDate, showOutsideDays, autoFocus, showPreviousButton, showNextButton, labels, className }: CalendarProps): React.JSX.Element;
+export declare function Calendar({ size, color, locale, weekStartsOn, month, onMonthChange, selected, rangeStart, rangeEnd, onSelect, granularity, renderDay, onPreviewChange, minDate, maxDate, shouldDisableDate, showOutsideDays, autoFocus, multiselectable, showPreviousButton, showNextButton, labels, className }: CalendarProps): React.JSX.Element;
 export type { TimeUnit };
 export interface TimeGridProps {
     size: NebaSize;

package/dist/internal/calendar.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as n,Fragment as t}from"react/jsx-runtime";import*as o from"react";import{Button as r}from"../components/button/Button.js";import{ChevronIcon as l}from"./icons.js";import{controlHeightClasses as a,controlTextClasses as s,cx as i,gapClasses as c,metaTextClasses as u,pressTransitionClasses as d,srOnlyClasses as m,transitionClasses as h}from"./styles.js";import{addDays as g,addMonths as f,addYears as b,calendarWeeks as p,compareDay as v,isDayOutside as x,isMonthBeforeYear as y,isSameDay as w,isSameMonth as D,isUnitOutside as N,isValidDate as S,makeDate as M,meridiemLabels as C,monthLabels as k,startOfDay as z,startOfMonth as P,today as j,weekdayLabels as A,withTime as F,YEAR_PAGE_SIZE as Y,yearPageStart as E}from"./date.js";import{dateFormatter as R}from"./format.js";import{pickerMessages as T,useMessages as B}from"./i18n.js";export function usePickerLabels(e,n){const t=B(T,n);return o.useMemo(()=>e?{...t,...e}:t,[t,e])}const H={xs:"1.375rem",sm:"1.625rem",md:"2rem",lg:"2.5rem",xl:"3rem"},K={xs:"rounded-(--neba-radius-xs)",sm:"rounded-(--neba-radius-xs)",md:"rounded-(--neba-radius-sm)",lg:"rounded-(--neba-radius-md)",xl:"rounded-(--neba-radius-lg)"},L={xs:"rounded-s-(--neba-radius-xs)",sm:"rounded-s-(--neba-radius-xs)",md:"rounded-s-(--neba-radius-sm)",lg:"rounded-s-(--neba-radius-md)",xl:"rounded-s-(--neba-radius-lg)"},O={xs:"rounded-e-(--neba-radius-xs)",sm:"rounded-e-(--neba-radius-xs)",md:"rounded-e-(--neba-radius-sm)",lg:"rounded-e-(--neba-radius-md)",xl:"rounded-e-(--neba-radius-lg)"},U=["relative flex select-none items-center justify-center tabular-nums","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",h,d,"focus-visible:z-10 focus-visible:[outline:2px_solid_var(--n-ring)]","focus-visible:[outline-offset:-2px]"].join(" ");function q({children:t,label:o,selected:r,inRange:l=!1,rangeEdge:a=null,current:s=!1,muted:c=!1,disabled:u=!1,focused:d=!1,size:m,className:h,onClick:g,onPointerEnter:f,onKeyDown:b}){return n("button",{type:"button",role:"gridcell","aria-label":o,"aria-selected":r,"aria-current":s?"date":void 0,"aria-disabled":u||void 0,tabIndex:d?0:-1,"data-focus-target":d?"true":void 0,className:i(U,"start"===a?L[m]:"end"===a?O[m]:"middle"===a?"rounded-none":K[m],u?"cursor-not-allowed text-(--neba-disabled-fg)":r?"cursor-pointer bg-(--n-fill) font-semibold text-(--n-on-solid) hover:bg-(--n-fill-hover) active:bg-(--n-fill-active)":l?"cursor-pointer bg-(--n-soft) text-(--neba-fg) hover:bg-(--n-soft-hover) active:bg-(--n-soft-press)":s?"cursor-pointer font-semibold text-(--n-accent) hover:bg-(--n-soft) active:bg-(--n-soft-press)":c?"cursor-pointer text-(--neba-muted-fg) hover:bg-(--n-soft) active:bg-(--n-soft-press)":"cursor-pointer text-(--neba-fg) hover:bg-(--n-soft) active:bg-(--n-soft-press)",h),onClick:()=>{u||g()},onPointerEnter:f,onKeyDown:b,children:[t,s?e("span",{"aria-hidden":"true",className:"absolute bottom-[0.18em] size-[0.22em] rounded-full bg-current"}):null]})}function I({size:o,color:u,view:d,month:m,locale:h,labels:g,showPreviousButton:f,showNextButton:b,onStep:p,onViewChange:v}){const x=k(h,"long")[m.getMonth()],w=String(m.getFullYear()),D=y(h),N="day"===d?[g.previousMonth,g.nextMonth]:"month"===d?[g.previousYear,g.nextYear]:[g.previousYears,g.nextYears],S=(n,t)=>t?e(r,{variant:"text",size:o,color:u,density:"compact","aria-label":N[-1===n?0:1],onClick:()=>p(n),startIcon:e("span",{className:i("flex items-center",-1===n?"rotate-90 rtl:-rotate-90":"-rotate-90 rtl:rotate-90"),children:e(l,{})})}):e("span",{"aria-hidden":"true",className:i(a[o],"w-(--n-cell)")}),M=n=>e("span",{className:i("flex items-center text-(--neba-muted-fg)","[transition:rotate_var(--neba-duration)_var(--neba-ease)]",n&&"rotate-180"),children:e(l,{})}),C=e(r,{variant:"text",size:o,color:u,density:"compact","aria-label":g.chooseMonth,"aria-expanded":"month"===d,onClick:()=>v("month"===d?"day":"month"),endIcon:M("month"===d),children:x},"month"),z=e(r,{variant:"text",size:o,color:u,density:"compact",className:"tabular-nums","aria-label":g.chooseYear,"aria-expanded":"year"===d,onClick:()=>v("year"===d?"day":"year"),endIcon:M("year"===d),children:w},"year"),P=E(m.getFullYear());return n("div",{className:"flex items-center justify-between gap-1",children:[S(-1,f),e("div",{className:i("flex min-w-0 flex-1 items-center justify-center",c[o]),children:"year"===d?e("span",{className:i("flex items-center font-medium tabular-nums text-(--neba-fg)",a[o],s[o]),children:`${P}–${P+Y-1}`}):"month"===d?z:n(t,D?{children:[C,z]}:{children:[z,C]})}),S(1,b)]})}const $={day:0,month:1,year:2};export function Calendar({size:t,color:r,locale:l,weekStartsOn:a,month:s,onMonthChange:u,selected:d,rangeStart:m=null,rangeEnd:h=null,onSelect:g,granularity:p="day",renderDay:v,onPreviewChange:y,minDate:w,maxDate:N,shouldDisableDate:C,showOutsideDays:k=!0,autoFocus:A=!1,showPreviousButton:F=!0,showNextButton:E=!0,labels:R,className:T}){const[B,K]=o.useState(p),L=$[B]<$[p]?p:B,O=o.useMemo(()=>d.filter(S),[d]),[U,q]=o.useState(()=>{const e=O.find(e=>D(e,s));return e?z(e):D(j(),s)?j():P(s)}),J=o.useRef(A),Q=o.useRef(null);o.useEffect(()=>{q(e=>D(e,s)?e:P(s))},[s]),o.useLayoutEffect(()=>{J.current&&(J.current=!1,Q.current?.querySelector('[data-focus-target="true"]')?.focus({preventScroll:!0}))});const W=o.useCallback(e=>x(e,w,N)||(C?.(e)??!1),[w,N,C]),X=e=>{J.current=!0,K(e)},Z=e=>{J.current=!0,u(e)};return n("div",{ref:Q,className:i("flex flex-col",c[t],T),style:{"--n-cell":H[t]},onPointerLeave:()=>y?.(null),children:[e(I,{size:t,color:r,view:L,month:s,locale:l,labels:R,showPreviousButton:F,showNextButton:E,onStep:e=>{u("day"===L?f(s,e):b(s,"month"===L?e:e*Y))},onViewChange:X}),e("div",{className:"h-[calc(var(--n-cell)*7)] w-[calc(var(--n-cell)*7)]",children:"day"===L?e(_,{size:t,locale:l,weekStartsOn:a,month:s,chosen:O,rangeStart:m,rangeEnd:h,focusedDate:U,renderDay:v,showOutsideDays:k,isDisabled:W,onSelect:e=>{q(e),g(e)},onPreviewChange:y,onMoveFocus:e=>{J.current=!0,q(e),D(e,s)||u(P(e))}}):"month"===L?e(V,{size:t,locale:l,month:s,chosen:O,minDate:w,maxDate:N,shouldDisable:"month"===p?C:void 0,onMoveCursor:Z,onPick:e=>{const n=M(s.getFullYear(),e,1);u(n),"month"===p?g(n):X("day")}}):e(G,{size:t,month:s,chosen:O,minDate:w,maxDate:N,shouldDisable:"year"===p?C:void 0,onMoveCursor:Z,onPick:e=>{if("year"===p){const n=M(e,0,1);return u(n),void g(n)}u(M(e,s.getMonth(),1)),X("month")}})})]})}function _({size:t,locale:o,weekStartsOn:r,month:l,chosen:a,rangeStart:c,rangeEnd:d,focusedDate:m,renderDay:h,showOutsideDays:b,isDisabled:x,onSelect:y,onPreviewChange:N,onMoveFocus:M}){const C=p(l,r),k=A(o,r,"short"),z=A(o,r,"long"),P=R(o,{dateStyle:"full"}),F=(E=d,S(Y=c)&&S(E)?v(Y,E)<=0?[Y,E]:[E,Y]:null);var Y,E;const T=j();return n("div",{role:"grid",className:"flex h-full flex-col",children:[e("div",{role:"row",className:"grid grid-cols-7",children:k.map((n,o)=>e("span",{role:"columnheader","aria-label":z[o],className:i("flex h-(--n-cell) items-center justify-center font-medium text-(--neba-muted-fg) select-none",u[t]),children:n},o))}),C.map((o,c)=>e("div",{role:"row",className:"grid grid-cols-7",children:o.map(o=>{const c=!D(o,l);if(c&&!b)return e("span",{role:"gridcell","aria-hidden":"true",className:"size-(--n-cell)"},o.getTime());const u=a.some(e=>w(e,o)),d=null!==F&&v(o,F[0])>=0&&v(o,F[1])<=0,p=null!==F&&d&&w(o,F[0]),S=null!==F&&d&&w(o,F[1]);return n(q,{size:t,label:P.format(o),selected:u,inRange:d&&!u,rangeEdge:d?p&&S?"both":p?"start":S?"end":"middle":null,current:w(o,T)&&!u,muted:c,disabled:x(o),focused:w(o,m),className:i("size-(--n-cell)",s[t]),onClick:()=>y(o),onPointerEnter:()=>N?.(o),onKeyDown:e=>((e,n)=>{const t=(n.getDay()-r+7)%7,o={ArrowLeft:()=>g(n,-1),ArrowRight:()=>g(n,1),ArrowUp:()=>g(n,-7),ArrowDown:()=>g(n,7),Home:()=>g(n,-t),End:()=>g(n,6-t),PageUp:()=>f(n,e.shiftKey?-12:-1),PageDown:()=>f(n,e.shiftKey?12:1)}[e.key];o&&(e.preventDefault(),M(o()))})(e,o),children:[o.getDate(),h?h(o):null]},o.getTime())})},c))]})}function V({size:n,locale:t,month:o,chosen:r,minDate:l,maxDate:a,shouldDisable:c,onMoveCursor:u,onPick:d}){const m=k(t,"short"),h=k(t,"long"),g=o.getFullYear(),b=new Date,p=e=>{const n={ArrowLeft:-1,ArrowRight:1,ArrowUp:-3,ArrowDown:3,PageUp:-12,PageDown:12}[e.key];void 0!==n&&(e.preventDefault(),u(f(P(o),n)))};return e("div",{role:"grid",className:"flex h-full flex-col justify-evenly",children:[0,1,2,3].map(t=>e("div",{role:"row",className:"grid grid-cols-3 gap-1",children:[0,1,2].map(u=>{const f=3*t+u,v=M(g,f,1);return e(q,{size:n,label:`${h[f]} ${g}`,selected:r.some(e=>e.getFullYear()===g&&e.getMonth()===f),current:b.getFullYear()===g&&b.getMonth()===f,disabled:N(v,"month",l,a)||(c?.(v)??!1),focused:f===o.getMonth(),className:i("h-(--n-cell) w-full",s[n]),onClick:()=>d(f),onKeyDown:p,children:m[f]},f)})},t))})}function G({size:n,month:t,chosen:o,minDate:r,maxDate:l,shouldDisable:a,onMoveCursor:c,onPick:u}){const d=E(t.getFullYear()),m=(new Date).getFullYear(),h=e=>{const n={ArrowLeft:-1,ArrowRight:1,ArrowUp:-4,ArrowDown:4,PageUp:-Y,PageDown:Y}[e.key];void 0!==n&&(e.preventDefault(),c(b(P(t),n)))};return e("div",{role:"grid",className:"flex h-full flex-col justify-evenly",children:[0,1,2].map(c=>e("div",{role:"row",className:"grid grid-cols-4 gap-1",children:[0,1,2,3].map(g=>{const f=d+4*c+g,b=M(f,0,1);return e(q,{size:n,label:String(f),selected:o.some(e=>e.getFullYear()===f),current:f===m,disabled:N(b,"year",r,l)||(a?.(b)??!1),focused:f===t.getFullYear(),className:i("h-(--n-cell) w-full",s[n]),onClick:()=>u(f),onKeyDown:h,children:f},f)})},c))})}function J(e){const n=e.parentElement;if(!n)return;const t=e.getBoundingClientRect(),o=n.getBoundingClientRect(),r=t.top-o.top-n.clientTop+n.scrollTop,l=r+t.height;r<n.scrollTop?n.scrollTop=r:l>n.scrollTop+n.clientHeight&&(n.scrollTop=l-n.clientHeight)}export function TimeGrid({size:t,density:r,locale:l,value:c,referenceDate:u,onChange:d,hour12:h,showSeconds:g,hourStep:f,minuteStep:b,secondStep:p,shouldDisableTime:v,autoFocus:x=!1,labels:y,className:w}){const D=c??u,N=o.useRef(null),[S,M]=o.useMemo(()=>C(l),[l]);o.useEffect(()=>{const e=N.current;if(e?.querySelectorAll('[data-chosen="true"]').forEach(J),x){const n=e?.querySelector('[role="listbox"]');(n?.querySelector('[data-chosen="true"]')??n?.querySelector('[role="option"]'))?.focus({preventScroll:!0})}},[x]);const k=o.useMemo(()=>{const e=Math.ceil((h?12:24)/f),n=Array.from({length:e},(e,n)=>n*f);return h?n.map(e=>0===e?12:e):n},[h,f]),z=o.useMemo(()=>Array.from({length:Math.ceil(60/b)},(e,n)=>n*b),[b]),P=o.useMemo(()=>Array.from({length:Math.ceil(60/p)},(e,n)=>n*p),[p]),j=e=>String(e).padStart(2,"0"),A=h?D.getHours()%12||12:D.getHours(),Y=(n,o,r,l,u)=>e("div",{role:"listbox","aria-label":o,className:i("flex flex-col gap-0.5 overflow-y-auto overscroll-contain","h-[calc(var(--n-cell)*7)] w-[calc(var(--n-cell)*2)]","scroll-py-0.5 [scrollbar-width:thin]"),children:r.map(o=>{const r=((e,n)=>F(D,"hour"===e?{hours:h?n%12+(D.getHours()>=12?12:0):n}:"minute"===e?{minutes:n}:"second"===e?{seconds:n}:{hours:D.getHours()%12+12*n}))(n,o),m=null!==c&&l(o),g=v?.(r,n)??!1;return e("button",{type:"button",role:"option","aria-selected":m,"aria-disabled":g||void 0,"data-chosen":m?"true":void 0,className:i(U,K[t],a[t],s[t],"w-full shrink-0",g?"cursor-not-allowed text-(--neba-disabled-fg)":m?"cursor-pointer bg-(--n-fill) font-semibold text-(--n-on-solid) hover:bg-(--n-fill-hover) active:bg-(--n-fill-active)":"cursor-pointer text-(--neba-fg) hover:bg-(--n-soft) active:bg-(--n-soft-press)"),onClick:()=>{g||d(r)},children:u(o)},o)})},n);return n("div",{ref:N,className:i("flex","compact"===r?"gap-0.5":"gap-1",w),style:{"--n-cell":H[t]},children:[Y("hour",y.hour,k,e=>e===A,e=>h?String(e):j(e)),Y("minute",y.minute,z,e=>e===D.getMinutes(),j),g?Y("second",y.second,P,e=>e===D.getSeconds(),j):null,h?Y("meridiem",y.meridiem,[0,1],e=>(D.getHours()>=12?1:0)===e,e=>0===e?S:M):null,e("span",{className:m,"aria-live":"polite",children:null===c?"":R(l,{hour:"numeric",minute:"2-digit",...g?{second:"2-digit"}:{}}).format(c)})]})}
+"use client";import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import*as r from"react";import{Button as o}from"../components/button/Button.js";import{ChevronIcon as l}from"./icons.js";import{controlHeightClasses as a,controlTextClasses as s,cx as i,gapClasses as c,metaTextClasses as d,pressTransitionClasses as u,srOnlyClasses as m,transitionClasses as h}from"./styles.js";import{addDays as g,addMonths as f,addYears as b,calendarWeeks as p,compareDay as y,isDayOutside as v,isMonthBeforeYear as x,isSameDay as w,isSameMonth as D,isUnitOutside as N,isValidDate as S,makeDate as M,meridiemLabels as C,monthLabels as k,startOfDay as z,startOfMonth as P,today as A,weekdayLabels as j,withTime as Y,YEAR_PAGE_SIZE as B,yearPageStart as E}from"./date.js";import{dateFormatter as F}from"./format.js";import{pickerMessages as T,useMessages as H}from"./i18n.js";import{useHydrated as R}from"./media.js";export function usePickerLabels(e,t){const n=H(T,t);return r.useMemo(()=>e?{...n,...e}:n,[n,e])}const I={xs:"1.375rem",sm:"1.625rem",md:"2rem",lg:"2.5rem",xl:"3rem"},K={xs:"rounded-(--neba-radius-xs)",sm:"rounded-(--neba-radius-xs)",md:"rounded-(--neba-radius-sm)",lg:"rounded-(--neba-radius-md)",xl:"rounded-(--neba-radius-lg)"},G={xs:"rounded-s-(--neba-radius-xs)",sm:"rounded-s-(--neba-radius-xs)",md:"rounded-s-(--neba-radius-sm)",lg:"rounded-s-(--neba-radius-md)",xl:"rounded-s-(--neba-radius-lg)"},O={xs:"rounded-e-(--neba-radius-xs)",sm:"rounded-e-(--neba-radius-xs)",md:"rounded-e-(--neba-radius-sm)",lg:"rounded-e-(--neba-radius-md)",xl:"rounded-e-(--neba-radius-lg)"},U=["relative flex select-none items-center justify-center tabular-nums","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",h,u,"focus-visible:z-10 focus-visible:[outline:2px_solid_var(--n-ring)]","focus-visible:[outline-offset:-2px]"].join(" ");function Cell({children:n,label:r,selected:o,inRange:l=!1,rangeEdge:a=null,current:s=!1,muted:c=!1,disabled:d=!1,focused:u=!1,size:m,className:h,onClick:g,onPointerEnter:f,onKeyDown:b}){return t("button",{type:"button",role:"gridcell","aria-label":r,"aria-selected":o,"aria-current":s?"date":void 0,"aria-disabled":d||void 0,tabIndex:u?0:-1,"data-focus-target":u?"true":void 0,className:i(U,"start"===a?G[m]:"end"===a?O[m]:"middle"===a?"rounded-none":K[m],d?"cursor-not-allowed text-(--neba-disabled-fg)":o?"cursor-pointer bg-(--n-fill) font-semibold text-(--n-on-solid) hover:bg-(--n-fill-hover) active:bg-(--n-fill-active)":l?"cursor-pointer bg-(--n-soft) text-(--neba-fg) hover:bg-(--n-soft-hover) active:bg-(--n-soft-press)":s?"cursor-pointer font-semibold text-(--n-on-tint) hover:bg-(--n-soft) active:bg-(--n-soft-press)":c?"cursor-pointer text-(--neba-muted-fg) hover:bg-(--n-soft) active:bg-(--n-soft-press)":"cursor-pointer text-(--neba-fg) hover:bg-(--n-soft) active:bg-(--n-soft-press)",h),onClick:()=>{d||g()},onPointerEnter:f,onKeyDown:b,children:[n,s?e("span",{"aria-hidden":"true",className:"absolute bottom-[0.18em] size-[0.22em] rounded-full bg-current"}):null]})}function Header({size:r,color:d,view:u,month:h,locale:g,labels:f,showPreviousButton:b,showNextButton:p,captionId:y,onStep:v,onViewChange:w}){const D=k(g,"long")[h.getMonth()],N=String(h.getFullYear()),S=x(g),M=E(h.getFullYear()),C=`${M}–${M+B-1}`,z="day"===u?[f.previousMonth,f.nextMonth]:"month"===u?[f.previousYear,f.nextYear]:[f.previousYears,f.nextYears],P=(t,n)=>n?e(o,{variant:"text",size:r,color:d,density:"compact","aria-label":z[-1===t?0:1],onClick:()=>v(t),startIcon:e("span",{className:i("flex items-center",-1===t?"rotate-90 rtl:-rotate-90":"-rotate-90 rtl:rotate-90"),children:e(l,{})})}):e("span",{"aria-hidden":"true",className:i(a[r],"w-(--n-cell)")}),A=t=>e("span",{className:i("flex items-center text-(--neba-muted-fg)","[transition:rotate_var(--neba-duration)_var(--neba-ease)]",t&&"rotate-180"),children:e(l,{})}),j=e(o,{variant:"text",size:r,color:d,density:"compact","aria-describedby":`${y}-month`,"aria-expanded":"month"===u,onClick:()=>w("month"===u?"day":"month"),endIcon:A("month"===u),children:D},"month"),Y=e(o,{variant:"text",size:r,color:d,density:"compact",className:"tabular-nums","aria-describedby":`${y}-year`,"aria-expanded":"year"===u,onClick:()=>w("year"===u?"day":"year"),endIcon:A("year"===u),children:N},"year");return t("div",{className:"flex items-center justify-between gap-1",children:[e("span",{id:y,className:m,"aria-live":"polite",children:"day"===u?F(g,{year:"numeric",month:"long"}).format(h):"month"===u?N:C}),e("span",{id:`${y}-month`,hidden:!0,children:f.chooseMonth}),e("span",{id:`${y}-year`,hidden:!0,children:f.chooseYear}),P(-1,b),e("div",{className:i("flex min-w-0 flex-1 items-center justify-center",c[r]),children:"year"===u?e("span",{className:i("flex items-center font-medium tabular-nums text-(--neba-fg)",a[r],s[r]),children:C}):"month"===u?Y:t(n,S?{children:[j,Y]}:{children:[Y,j]})}),P(1,p)]})}const q={day:0,month:1,year:2};export function Calendar({size:n,color:o,locale:l,weekStartsOn:a,month:s,onMonthChange:d,selected:u,rangeStart:m=null,rangeEnd:h=null,onSelect:g,granularity:p="day",renderDay:y,onPreviewChange:x,minDate:w,maxDate:N,shouldDisableDate:C,showOutsideDays:k=!0,autoFocus:j=!1,multiselectable:Y=!1,showPreviousButton:E=!0,showNextButton:F=!0,labels:T,className:H}){const R=r.useId(),[K,G]=r.useState(p),O=q[K]<q[p]?p:K,U=r.useMemo(()=>u.filter(S),[u]),[L,$]=r.useState(()=>{const e=U.find(e=>D(e,s));return e?z(e):D(A(),s)?A():P(s)}),_=r.useRef(j),V=r.useRef(null);r.useEffect(()=>{$(e=>D(e,s)?e:P(s))},[s]),r.useLayoutEffect(()=>{_.current&&(_.current=!1,V.current?.querySelector('[data-focus-target="true"]')?.focus({preventScroll:!0}))});const J=r.useCallback(e=>v(e,w,N)||(C?.(e)??!1),[w,N,C]),Q=e=>{_.current=!0,G(e)},W=e=>{_.current=!0,d(e)};return t("div",{ref:V,className:i("flex flex-col",c[n],H),style:{"--n-cell":I[n]},onPointerLeave:()=>x?.(null),children:[e(Header,{size:n,color:o,view:O,month:s,locale:l,labels:T,showPreviousButton:E,showNextButton:F,captionId:R,onStep:e=>{d("day"===O?f(s,e):b(s,"month"===O?e:e*B))},onViewChange:Q}),e("div",{className:"h-[calc(var(--n-cell)*7)] w-[calc(var(--n-cell)*7)]",children:"day"===O?e(DayGrid,{labelledBy:R,multiselectable:Y&&"day"===p,size:n,locale:l,weekStartsOn:a,month:s,chosen:U,rangeStart:m,rangeEnd:h,focusedDate:L,renderDay:y,showOutsideDays:k,isDisabled:J,onSelect:e=>{$(e),g(e)},onPreviewChange:x,onMoveFocus:e=>{_.current=!0,$(e),D(e,s)||d(P(e))}}):"month"===O?e(MonthGrid,{labelledBy:R,multiselectable:Y&&"month"===p,size:n,locale:l,month:s,chosen:U,minDate:w,maxDate:N,shouldDisable:"month"===p?C:void 0,onMoveCursor:W,onPick:e=>{const t=M(s.getFullYear(),e,1);d(t),"month"===p?g(t):($(e=>D(e,t)?e:t),Q("day"))}}):e(YearGrid,{labelledBy:R,multiselectable:Y&&"year"===p,size:n,month:s,chosen:U,minDate:w,maxDate:N,shouldDisable:"year"===p?C:void 0,onMoveCursor:W,onPick:e=>{if("year"===p){const t=M(e,0,1);return d(t),void g(t)}d(M(e,s.getMonth(),1)),Q("month")}})})]})}function L(e){return"rtl"===getComputedStyle(e).direction}function DayGrid({labelledBy:n,multiselectable:r,size:o,locale:l,weekStartsOn:a,month:c,chosen:u,rangeStart:m,rangeEnd:h,focusedDate:b,renderDay:v,showOutsideDays:x,isDisabled:N,onSelect:M,onPreviewChange:C,onMoveFocus:k}){const z=p(c,a),P=j(l,a,"short"),Y=j(l,a,"long"),B=F(l,{dateStyle:"full"}),E=(H=h,S(T=m)&&S(H)?y(T,H)<=0?[T,H]:[H,T]:null);var T,H;const I=R()?A():null;return t("div",{role:"grid","aria-labelledby":n,"aria-multiselectable":r||void 0,className:"flex h-full flex-col",children:[e("div",{role:"row",className:"grid grid-cols-7",children:P.map((t,n)=>e("span",{role:"columnheader","aria-label":Y[n],className:i("flex h-(--n-cell) items-center justify-center font-medium text-(--neba-muted-fg) select-none",d[o]),children:t},n))}),z.map((n,r)=>e("div",{role:"row",className:"grid grid-cols-7",children:n.map(n=>{const r=!D(n,c);if(r&&!x)return e("span",{role:"gridcell","aria-hidden":"true",className:"size-(--n-cell)"},n.getTime());const l=u.some(e=>w(e,n)),d=null!==E&&y(n,E[0])>=0&&y(n,E[1])<=0,m=null!==E&&d&&w(n,E[0]),h=null!==E&&d&&w(n,E[1]);return t(Cell,{size:o,label:B.format(n),selected:l,inRange:d&&!l,rangeEdge:d?m&&h?"both":m?"start":h?"end":"middle":null,current:null!==I&&w(n,I)&&!l,muted:r,disabled:N(n),focused:w(n,b),className:i("size-(--n-cell)",s[o]),onClick:()=>M(n),onPointerEnter:()=>C?.(n),onKeyDown:e=>((e,t)=>{const n=(t.getDay()-a+7)%7,r=L(e.currentTarget)?-1:1,o={ArrowLeft:()=>g(t,-r),ArrowRight:()=>g(t,r),ArrowUp:()=>g(t,-7),ArrowDown:()=>g(t,7),Home:()=>g(t,-n),End:()=>g(t,6-n),PageUp:()=>f(t,e.shiftKey?-12:-1),PageDown:()=>f(t,e.shiftKey?12:1)}[e.key];o&&(e.preventDefault(),k(o()))})(e,n),children:[n.getDate(),v?v(n):null]},n.getTime())})},r))]})}function MonthGrid({labelledBy:t,multiselectable:n,size:r,locale:o,month:l,chosen:a,minDate:c,maxDate:d,shouldDisable:u,onMoveCursor:m,onPick:h}){const g=k(o,"short"),b=F(o,{year:"numeric",month:"long"}),p=l.getFullYear(),y=R()?new Date:null,v=e=>{const t=L(e.currentTarget)?-1:1,n={ArrowLeft:-t,ArrowRight:t,ArrowUp:-3,ArrowDown:3,PageUp:-12,PageDown:12}[e.key];void 0!==n&&(e.preventDefault(),m(f(P(l),n)))};return e("div",{role:"grid","aria-labelledby":t,"aria-multiselectable":n||void 0,className:"flex h-full flex-col justify-evenly",children:[0,1,2,3].map(t=>e("div",{role:"row",className:"grid grid-cols-3 gap-1",children:[0,1,2].map(n=>{const o=3*t+n,m=M(p,o,1);return e(Cell,{size:r,label:b.format(m),selected:a.some(e=>e.getFullYear()===p&&e.getMonth()===o),current:null!==y&&y.getFullYear()===p&&y.getMonth()===o,disabled:N(m,"month",c,d)||(u?.(m)??!1),focused:o===l.getMonth(),className:i("h-(--n-cell) w-full",s[r]),onClick:()=>h(o),onKeyDown:v,children:g[o]},o)})},t))})}function YearGrid({labelledBy:t,multiselectable:n,size:r,month:o,chosen:l,minDate:a,maxDate:c,shouldDisable:d,onMoveCursor:u,onPick:m}){const h=E(o.getFullYear()),g=R()?(new Date).getFullYear():null,f=e=>{const t=L(e.currentTarget)?-1:1,n={ArrowLeft:-t,ArrowRight:t,ArrowUp:-4,ArrowDown:4,PageUp:-B,PageDown:B}[e.key];void 0!==n&&(e.preventDefault(),u(b(P(o),n)))};return e("div",{role:"grid","aria-labelledby":t,"aria-multiselectable":n||void 0,className:"flex h-full flex-col justify-evenly",children:[0,1,2].map(t=>e("div",{role:"row",className:"grid grid-cols-4 gap-1",children:[0,1,2,3].map(n=>{const u=h+4*t+n,b=M(u,0,1);return e(Cell,{size:r,label:String(u),selected:l.some(e=>e.getFullYear()===u),current:u===g,disabled:N(b,"year",a,c)||(d?.(b)??!1),focused:u===o.getFullYear(),className:i("h-(--n-cell) w-full",s[r]),onClick:()=>m(u),onKeyDown:f,children:u},u)})},t))})}function $(e){const t=e.parentElement;if(!t)return;const n=e.getBoundingClientRect(),r=t.getBoundingClientRect(),o=n.top-r.top-t.clientTop+t.scrollTop,l=o+n.height;o<t.scrollTop?t.scrollTop=o:l>t.scrollTop+t.clientHeight&&(t.scrollTop=l-t.clientHeight)}export function TimeGrid({size:n,density:o,locale:l,value:c,referenceDate:d,onChange:u,hour12:h,showSeconds:g,hourStep:f,minuteStep:b,secondStep:p,shouldDisableTime:y,autoFocus:v=!1,labels:x,className:w}){const D=c??d,N=r.useRef(null),[S,M]=r.useMemo(()=>C(l),[l]);r.useEffect(()=>{const e=N.current;if(e?.querySelectorAll('[data-chosen="true"]').forEach($),v){const t=e?.querySelector('[role="listbox"]');(t?.querySelector('[data-chosen="true"]')??t?.querySelector('[role="option"]'))?.focus({preventScroll:!0})}},[v]);const k=r.useMemo(()=>{const e=Math.ceil((h?12:24)/f),t=Array.from({length:e},(e,t)=>t*f);return h?t.map(e=>0===e?12:e):t},[h,f]),z=r.useMemo(()=>Array.from({length:Math.ceil(60/b)},(e,t)=>t*b),[b]),P=r.useMemo(()=>Array.from({length:Math.ceil(60/p)},(e,t)=>t*p),[p]),A=e=>String(e).padStart(2,"0"),j=h?D.getHours()%12||12:D.getHours(),B=e=>{const t=Array.from(e.currentTarget.querySelectorAll('[role="option"]')),n=t.indexOf(e.target);if(n<0)return;const r="ArrowDown"===e.key?n+1:"ArrowUp"===e.key?n-1:"Home"===e.key?0:"End"===e.key?t.length-1:null;if(null===r)return;e.preventDefault();const o=t[Math.min(t.length-1,Math.max(0,r))];o.focus({preventScroll:!0}),$(o)},E=(t,r,o,l,d)=>{const m=Math.max(0,null===c?0:o.findIndex(l));return e("div",{role:"listbox","aria-label":r,onKeyDown:B,className:i("flex flex-col gap-0.5 overflow-y-auto overscroll-contain","h-[calc(var(--n-cell)*7)] w-[calc(var(--n-cell)*2)]","scroll-py-0.5 [scrollbar-width:thin]"),children:o.map((r,o)=>{const g=((e,t)=>Y(D,"hour"===e?{hours:h?t%12+(D.getHours()>=12?12:0):t}:"minute"===e?{minutes:t}:"second"===e?{seconds:t}:{hours:D.getHours()%12+12*t}))(t,r),f=null!==c&&l(r),b=y?.(g,t)??!1;return e("button",{type:"button",role:"option","aria-selected":f,"aria-disabled":b||void 0,"data-chosen":f?"true":void 0,tabIndex:o===m?0:-1,className:i(U,K[n],a[n],s[n],"w-full shrink-0",b?"cursor-not-allowed text-(--neba-disabled-fg)":f?"cursor-pointer bg-(--n-fill) font-semibold text-(--n-on-solid) hover:bg-(--n-fill-hover) active:bg-(--n-fill-active)":"cursor-pointer text-(--neba-fg) hover:bg-(--n-soft) active:bg-(--n-soft-press)"),onClick:()=>{b||u(g)},children:d(r)},r)})},t)};return t("div",{ref:N,className:i("flex","compact"===o?"gap-0.5":"gap-1",w),style:{"--n-cell":I[n]},children:[E("hour",x.hour,k,e=>e===j,e=>h?String(e):A(e)),E("minute",x.minute,z,e=>e===D.getMinutes(),A),g?E("second",x.second,P,e=>e===D.getSeconds(),A):null,h?E("meridiem",x.meridiem,[0,1],e=>(D.getHours()>=12?1:0)===e,e=>0===e?S:M):null,e("span",{className:m,"aria-live":"polite",children:null===c?"":F(l,{hour:"numeric",minute:"2-digit",...g?{second:"2-digit"}:{}}).format(c)})]})}

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

@@ -0,0 +1,53 @@
+/**
+ * The strip under a plot, and the window on it.
+ *
+ * Its own module rather than a piece of `chart-frame.tsx`, and that is the
+ * whole reason it is here: the frame is imported by every cartesian chart, so
+ * anything inside it is a cost a page pays whether it draws the thing or not.
+ * `React.lazy` puts this behind a chunk of its own — the same arrangement
+ * `Image` makes for the dialog its `preview` opens — so a chart with no window
+ * downloads none of it, and one with a window fetches it while the plot is
+ * already narrowed and drawn.
+ *
+ * It is handed its `width` rather than measuring itself, and that is worth two
+ * things: one `ResizeObserver` registration instead of two, and no import back
+ * into the frame — which would be a cycle with the `import()` that reaches
+ * this file.
+ */
+import * as React from 'react';
+import type { NebaChartCategory } from '../types.js';
+export interface BrushProps {
+    /** The whole of the first drawn series, for the shape under the window. */
+    outline: readonly (number | null)[];
+    /** How many categories there are altogether. */
+    count: number;
+    range: readonly [number, number];
+    onRange: (range: [number, number]) => void;
+    color: string;
+    height: number;
+    words: {
+        start: string;
+        end: string;
+    };
+    /** What the two handles say they are on, read out with their positions. */
+    categories: readonly NebaChartCategory[];
+    locale?: string;
+    /** The chart's own measured width — the strip spans the same box. */
+    width: number;
+}
+/**
+ * The strip under the plot, and the window on it.
+ *
+ * A chart of two thousand points has no points on it — every column is a
+ * fraction of a pixel and the shape is a smear — so the plot draws a window of
+ * them and this draws all of them, small, with the window marked on it. That
+ * pairing is the whole idea: a window with no overview beside it is a reader
+ * who cannot tell where in the year they are.
+ *
+ * It is HTML rather than part of the SVG, and that is what makes the two
+ * handles real `role="slider"` buttons: focusable, arrow-keyed, and announcing
+ * the category they sit on. A pair of `<rect>`s inside the picture would be
+ * reachable by pointer alone, which on the one control that decides what the
+ * chart shows is not a control at all.
+ */
+export declare function ChartBrush({ outline, count, range, onRange, color, height, words, categories, locale, width }: BrushProps): React.JSX.Element;

package/dist/internal/chart-brush.js

@@ -0,0 +1 @@
+"use client";import{jsx as t,jsxs as e}from"react/jsx-runtime";import*as n from"react";import{formatCategory as r,linePath as o}from"./chart.js";import{beginPointerDrag as a}from"./drag.js";import{cx as i}from"./styles.js";export function ChartBrush({outline:s,count:l,range:u,onRange:c,color:h,height:d,words:f,categories:m,locale:g,width:w}){const x=n.useRef(null),p=n.useRef(null);n.useEffect(()=>()=>p.current?.(),[]);const v=Math.max(0,l-1),[b,y]=u,M=t=>0===v?0:t/v,k=n.useMemo(()=>{const t=s.filter(t=>null!==t);if(w<=0||0===t.length)return"";const e=Math.min(...t),n=Math.max(...t)-e||1,r=Math.max(1,d-4);return o(s.map((t,o)=>null===t?null:{x:M(o)*w,y:2+(1-(t-e)/n)*r}),"linear")},[s,w,d,v]),_=t=>{const e=x.current;if(!e)return 0;const n=e.getBoundingClientRect(),r=0===n.width?0:(t-n.left)/n.width;return Math.min(v,Math.max(0,Math.round(r*v)))},j=(t,e,n)=>{if("start"===t)return void c([Math.min(e,y-1),y]);if("end"===t)return void c([b,Math.max(e,b+1)]);const r=y-b,o=Math.min(Math.max(0,e-n),v-r);c([o,o+r])};function D(t,e){const n=_(e.clientX),r="window"===t?n-b:0;e.preventDefault(),p.current?.(),p.current=a({target:e.currentTarget,pointerId:e.pointerId,onMove:e=>j(t,_(e.clientX),r),onEnd:()=>{p.current=null}})}const R=e=>{const n="start"===e?b:y;return t("button",{type:"button",role:"slider","aria-label":"start"===e?f.start:f.end,"aria-valuemin":0,"aria-valuemax":v,"aria-valuenow":n,"aria-valuetext":r(m[n]??n,g),onPointerDown:t=>D(e,t),onKeyDown:t=>function(t,e){const n="ArrowLeft"===e.key||"ArrowDown"===e.key?-1:"ArrowRight"===e.key||"ArrowUp"===e.key?1:0;if(0!==n)j(t,("end"===t?y:b)+n,0);else if("Home"===e.key)j(t,0,0);else{if("End"!==e.key)return;j(t,v,0)}e.preventDefault()}(e,t),className:i("absolute inset-y-0 w-2 -translate-x-1/2 cursor-ew-resize rounded-full","bg-(--n-accent) [touch-action:none]","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-1"),style:{left:100*M(n)+"%"}})};return e("div",{ref:x,className:"absolute inset-x-0 bottom-0 select-none",style:{height:d},children:[e("svg",{width:"100%",height:d,viewBox:`0 0 ${Math.max(1,w)} ${d}`,preserveAspectRatio:"none","aria-hidden":"true",className:"absolute inset-0 block",children:[t("rect",{x:0,y:0,width:Math.max(1,w),height:d,rx:3,fill:"var(--neba-chart-grid)"}),k?t("path",{d:k,fill:"none",stroke:h,strokeWidth:1,opacity:.6}):null]}),t("div",{onPointerDown:t=>D("window",t),className:i("absolute inset-y-0 cursor-grab rounded-[3px] [touch-action:none]","bg-(--n-soft) [box-shadow:inset_0_0_0_1px_var(--n-accent)]","data-[dragging]:cursor-grabbing"),style:{left:100*M(b)+"%",width:100*(M(y)-M(b))+"%"}}),R("start"),R("end")]})}