plass-ui 1.7.0 → 1.8.0

package/dist/internal/animate.d.ts

@@ -131,6 +131,26 @@ export interface AnimationRunOptions {
     paused?: boolean;
     /** An infinite effect stops when the pointer leaves; a finite one finishes. */
     infinite: boolean;
+    /**
+     * Whether the effect runs for ever once it has started: an `'infinite'`
+     * repeat, a marquee, a reel that loops.
+     *
+     * An endless effect **rests while it is off screen** and goes on from the
+     * frame it stopped on when it is back. A browser keeps running an animation
+     * nobody can see, and a few of these redraw on the main thread on every frame
+     * they run, so an endless one left running further up the page costs a reader
+     * something on every frame of the rest of their visit. A finite one is left
+     * alone: it finishes, and an entrance that played off screen has still
+     * delivered its content.
+     */
+    endless?: boolean;
+    /**
+     * Whether the effect moves the element it runs on, so that where the element
+     * is drawn is not where it lives. Whether an endless one is on screen is then
+     * read off its parent, which stays put: read off the element, a slide that
+     * starts outside its mask would rest there, out of sight, for good.
+     */
+    moves?: boolean;
     /**
      * A value that plays the effect again whenever it changes, and never on the
      * first render.
@@ -142,7 +162,30 @@ export interface AnimationRunOptions {
      * count of failed attempts already is this.
      */
     nonce?: unknown;
+    /**
+     * What the effect arrives at: a counter's figure, a scramble's line. A new
+     * one runs the effect again from its start while the trigger has it going,
+     * and never on the first render.
+     *
+     * Unlike `nonce`, it never starts a run the trigger is holding back. A
+     * counter waiting to be scrolled to, or for `play`, whose figure changes is
+     * still waiting: what changed is what it will count to, and counting there
+     * and then is what the trigger was there to stop.
+     */
+    target?: unknown;
 }
+/**
+ * Whether the element in `node`, or its parent with `parent`, is off screen.
+ *
+ * `false` until the observer has said otherwise, which is what the server
+ * renders and what the first frame shows: an effect runs as it always has, and
+ * rests only once something has seen it leave. With no observer to ask, it
+ * never rests.
+ *
+ * Exported for `PlAnimateTyping`'s caret, which blinks for ever after a typing
+ * that finishes, and so rests on its own while the typing does not.
+ */
+export declare function useOffScreen(node: React.RefObject<Element | null>, enabled: boolean, parent?: boolean): boolean;
 export interface AnimationRun {
     /** Goes on the animated element. */
     ref: React.RefCallback<HTMLElement>;
@@ -151,8 +194,14 @@ export interface AnimationRun {
     /** Whether the animation has been let go at all. */
     started: boolean;
     /**
-     * How many times it has been started, counting every hover, every `play` and
-     * every change of `nonce`.
+     * Whether an endless effect is resting because it is off screen, which
+     * `state` already says as `paused`. Typing runs on timers rather than a
+     * keyframe, and stops scheduling them while it is true.
+     */
+    resting: boolean;
+    /**
+     * How many times it has been started, counting every hover, every `play`,
+     * every change of `nonce` and every change of `target` that started it again.
      *
      * `started` stays `true` from the first start on, so a second hover changes
      * nothing an effect could depend on. A keyframe does not need to know, because
@@ -171,7 +220,7 @@ export interface AnimationRun {
      */
     handlers: React.HTMLAttributes<HTMLElement>;
 }
-export declare function useAnimationRun({ trigger, play, once, threshold, paused, infinite, nonce }: AnimationRunOptions): AnimationRun;
+export declare function useAnimationRun({ trigger, play, once, threshold, paused, infinite, endless, moves, nonce, target }: AnimationRunOptions): AnimationRun;
 export interface StaggerPosition extends Required<PlassAnimateStaggerProps> {
     index: number;
     count: number;
@@ -211,7 +260,13 @@ export declare function staggerSlots(slots: AnimationSlotOptions, { index, count
  * `<span>`. It is the only case that gets a wrapper.
  */
 export declare function animateChildren(children: React.ReactNode, className: string, slotsFor: (index: number, count: number) => React.CSSProperties): React.ReactNode[];
-export interface AnimateElementParams extends AnimationSlotOptions, AnimationRunOptions, PlassAnimateStaggerProps {
+/**
+ * `endless` is left out because it is worked out here, from `repeat`, and
+ * `target` because a keyframe has nothing to arrive at but its last frame.
+ * `moves` is only needed for a keyframe of the component's own: the named ones
+ * are already known.
+ */
+export interface AnimateElementParams extends AnimationSlotOptions, Omit<AnimationRunOptions, 'endless' | 'target'>, PlassAnimateStaggerProps {
     /** Which keyframe. `null` for the components that write their own. */
     effect: PlassAnimation | null;
     /** `transform-origin`, for the two effects that turn about a point. */

package/dist/internal/animate.js

@@ -1 +1 @@
-import*as e from"react";import{cx as t}from"./styles.js";export const animationClasses={fade:"plass-anim-fade",grow:"plass-anim-scale",slide:"plass-anim-slide",zoom:"plass-anim-scale",rotate:"plass-anim-rotate",blink:"plass-anim-blink",reveal:"plass-anim-reveal"};export const animBaseClass="plass-anim";export function lengthValue(e){return"number"==typeof e?`${e}px`:e}export function repeatValue(e){return"infinite"===e?"infinite":String(e)}export function isInfinite(e){return"infinite"===e}export function directionValue(e,t){return"out"===e?t?"alternate-reverse":"reverse":t?"alternate":"normal"}export const defaultViewRange="entry 0% cover 45%";export function animationSlots(e){const t={"--p-anim-duration":`${e.duration}ms`,"--p-anim-delay":`${e.delay}ms`,"--p-anim-repeat":repeatValue(e.repeat),"--p-anim-direction":directionValue(e.mode??"in",e.alternate)};return isInfinite(e.repeat)&&(t["--p-anim-still-repeat"]="1"),e.easing&&(t["--p-anim-ease"]=e.easing),"view"===e.timeline&&(t["--p-anim-timeline"]="view()",t["--p-anim-range"]=e.range??defaultViewRange),void 0!==e.opacity&&(t["--p-anim-opacity"]=String(e.opacity)),void 0!==e.scale&&(t["--p-anim-scale"]=String(e.scale)),void 0!==e.x&&(t["--p-anim-x"]=e.x),void 0!==e.y&&(t["--p-anim-y"]=e.y),void 0!==e.angle&&(t["--p-anim-angle"]=e.angle),void 0!==e.angleTo&&(t["--p-anim-angle-to"]=e.angleTo),void 0!==e.clip&&(t["--p-anim-clip"]=e.clip),t}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 slideOffsets(e,t){const n=lengthValue(t),i="number"==typeof t?-t+"px":`calc(-1 * ${n})`;switch(e){case"top":return{x:"0px",y:i};case"bottom":return{x:"0px",y:n};case"left":return{x:i,y:"0px"};default:return{x:n,y:"0px"}}}function viewportRect(){const e=document.documentElement;return new DOMRect(0,0,e.clientWidth,e.clientHeight)}function holds(e,t){return null!==e&&t instanceof Node&&e.contains(t)}const n="data-plass-rewind";export function useAnimationRun({trigger:t,play:i,once:r,threshold:a,paused:o,infinite:s,nonce:l}){const c=e.useRef(null),[u,p]=e.useState("mount"===t),[m,f]=e.useState(0),d=e.useCallback(()=>{p(!0),f(e=>e+1)},[]);e.useLayoutEffect(()=>{const e=c.current;if(!e||0===m)return;const t=[e];for(const n of e.querySelectorAll(".plass-anim, .plass-marquee-track"))n.closest("[data-plass-animation]")===e&&t.push(n);e.setAttribute(n,"");for(const e of t)e.style.animationName="none";e.offsetWidth;for(const e of t)e.style.animationName="";e.removeAttribute(n)},[m]);const g=e.useRef("mount"!==t);e.useEffect(()=>{g.current=!u},[u]),e.useEffect(()=>{if("visible"!==t)return;const e=c.current;if(!e||"undefined"==typeof IntersectionObserver)return void p(!0);const n=[],i=e.parentElement;let o=i?null:viewportRect();const check=()=>{if(!o)return;const t=function visibleShare(e,t){const n=e.width*e.height;if(n<=0)return 0;const i=Math.min(e.right,t.right)-Math.max(e.left,t.left),r=Math.min(e.bottom,t.bottom)-Math.max(e.top,t.top);return Math.max(0,i)*Math.max(0,r)/n}(function restingRect(e,t){if(!t)return e.getBoundingClientRect();const n=e.style.animationName;e.style.animationName="none";const i=e.getBoundingClientRect();return e.style.animationName=n,i}(e,g.current),o);if(t>0&&t>=a){if(d(),r)for(const e of n)e.disconnect()}else r||p(!1)},s=function measureSteps(e){const t=Array.from({length:21},(e,t)=>t/20);return e>0&&e<1?[...t,e]:t}(a);if(i){const e=new IntersectionObserver(([e])=>{o=function clipRect(e){const t=e.boundingClientRect;return t.width*t.height>0?e.intersectionRect:e.rootBounds??viewportRect()}(e),check()},{threshold:s});n.push(e),e.observe(i)}const l=new IntersectionObserver(check,{threshold:s});return n.push(l),l.observe(e),()=>{for(const e of n)e.disconnect()}},[t,r,a,d]);const h=e.useRef(l);e.useEffect(()=>{Object.is(l,h.current)||(h.current=l,d())},[l,d]),e.useEffect(()=>{"manual"===t&&(i?d():p(!1))},[t,i,d]);const y="hover"===t?{onPointerEnter:d,onFocus:e=>{holds(c.current,e.relatedTarget)||d()},onPointerLeave:()=>{s&&p(!1)},onBlur:e=>{s&&!holds(c.current,e.relatedTarget)&&p(!1)}}:{};return{ref:e.useCallback(e=>{c.current=e},[]),state:u&&!o?"running":"paused",started:u,runs:m,handlers:y}}export function staggerSlots(e,{index:t,count:n,stagger:i,durationStep:r,reverse:a}){const o=a?n-1-t:t;return{...e,delay:e.delay+o*i,duration:Math.max(0,e.duration+o*r)}}export function animateChildren(n,i,r){const a=e.Children.toArray(n);return a.map((n,o)=>{const s=r(o,a.length);if(!e.isValidElement(n))return e.createElement("span",{key:o,className:i,style:s},n);const l=n.props;return e.cloneElement(n,{className:t(i,l.className),style:{...s,...l.style}})})}export function useAnimateElement(e){const{effect:t,trigger:n,play:i,once:r,threshold:a,paused:o,infinite:s,nonce:l,stagger:c=0,durationStep:u=0,reverse:p=!1,origin:m,children:f,...d}=e,g=useAnimationRun({trigger:"view"===d.timeline?"mount":n,play:i,once:r,threshold:a,paused:o,infinite:s,nonce:l}),h=t?`plass-anim ${animationClasses[t]}`:"",y=0!==c&&null!==t,v=void 0===m?null:{transformOrigin:m};return{ref:g.ref,className:y?"":h,style:{...v,...y?null:animationSlots(d),"--p-anim-state":g.state},props:{...g.handlers,"data-plass-animation":t??void 0,"data-state":g.state},children:y?animateChildren(f,h,(e,t)=>({...v,...animationSlots(staggerSlots(d,{index:e,count:t,stagger:c,durationStep:u,reverse:p}))})):f}}
+import*as e from"react";import{prefersReducedMotion as t,reducedMotionQuery as n,useMediaQuery as r}from"./media.js";import{cx as o}from"./styles.js";export const animationClasses={fade:"plass-anim-fade",grow:"plass-anim-scale",slide:"plass-anim-slide",zoom:"plass-anim-scale",rotate:"plass-anim-rotate",blink:"plass-anim-blink",reveal:"plass-anim-reveal"};export const animBaseClass="plass-anim";const i=/* @__PURE__ */new Set(["grow","slide","zoom","rotate"]);export function lengthValue(e){return"number"==typeof e?`${e}px`:e}export function repeatValue(e){return"infinite"===e?"infinite":String(e)}export function isInfinite(e){return"infinite"===e}export function directionValue(e,t){return"out"===e?t?"alternate-reverse":"reverse":t?"alternate":"normal"}export const defaultViewRange="entry 0% cover 45%";export function animationSlots(e){const t={"--p-anim-duration":`${e.duration}ms`,"--p-anim-delay":`${e.delay}ms`,"--p-anim-repeat":repeatValue(e.repeat),"--p-anim-direction":directionValue(e.mode??"in",e.alternate)};return isInfinite(e.repeat)&&(t["--p-anim-still-repeat"]="1"),e.easing&&(t["--p-anim-ease"]=e.easing),"view"===e.timeline&&(t["--p-anim-timeline"]="view()",t["--p-anim-range"]=e.range??defaultViewRange),void 0!==e.opacity&&(t["--p-anim-opacity"]=String(e.opacity)),void 0!==e.scale&&(t["--p-anim-scale"]=String(e.scale)),void 0!==e.x&&(t["--p-anim-x"]=e.x),void 0!==e.y&&(t["--p-anim-y"]=e.y),void 0!==e.angle&&(t["--p-anim-angle"]=e.angle),void 0!==e.angleTo&&(t["--p-anim-angle-to"]=e.angleTo),void 0!==e.clip&&(t["--p-anim-clip"]=e.clip),t}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 slideOffsets(e,t){const n=lengthValue(t),r="number"==typeof t?-t+"px":`calc(-1 * ${n})`;switch(e){case"top":return{x:"0px",y:r};case"bottom":return{x:"0px",y:n};case"left":return{x:r,y:"0px"};default:return{x:n,y:"0px"}}}function viewportRect(){const e=document.documentElement;return new DOMRect(0,0,e.clientWidth,e.clientHeight)}const a=["translate","scale","rotate"];function holds(e,t){return null!==e&&t instanceof Node&&e.contains(t)}const s=".plass-anim, .plass-marquee-track";function ownsPart(e,t){return t.closest("[data-plass-animation]")===e}function ownParts(e){const t=[e];for(const n of e.querySelectorAll(s))ownsPart(e,n)&&t.push(n);return t}function ownTarget(e,t){const n=t.target;return t.animationName.startsWith("plass-anim-")&&(n instanceof HTMLElement||n instanceof SVGElement)&&(n===e||n.matches(s)&&ownsPart(e,n))?n:null}const u=new Map;let c=null;function reportAway(e){for(const t of e){const e=t.boundingClientRect,n=!t.isIntersecting&&e.width*e.height>0;for(const e of u.get(t.target)??[])e(n)}}export function useOffScreen(t,n,r=!1){const[o,i]=e.useState(!1);return e.useEffect(()=>{const e=r?t.current?.parentElement:t.current;if(!n||!e||"undefined"==typeof IntersectionObserver)return;const o=function watchAway(e,t){c??=new IntersectionObserver(reportAway);let n=u.get(e);return n?c.unobserve(e):(n=new Set,u.set(e,n)),n.add(t),c.observe(e),()=>{n.delete(t),0===n.size&&(u.delete(e),c?.unobserve(e))}}(e,i);return()=>{o(),i(!1)}},[t,n,r]),n&&o}const l="data-plass-rewind",m="data-plass-landed",f="data-plass-held",p="--p-anim-run-delay";export function useAnimationRun({trigger:o,play:i,once:s,threshold:u,paused:c,infinite:d,endless:g=!1,moves:y=!1,nonce:h,target:v}){const w=e.useRef(null),[{started:b,run:x},E]=e.useState({started:"mount"===o,run:0}),S=e.useCallback(e=>{E(t=>t.started===e?t:{...t,started:e})},[]),P=e.useCallback(()=>{E(e=>({started:!0,run:e.run+1}))},[]),R=e.useCallback(()=>{E(e=>e.started?{started:!0,run:e.run+1}:e)},[]);e.useLayoutEffect(()=>{const e=w.current;if(!e||0===x)return;const t=ownParts(e);e.setAttribute(l,"");for(const e of t)e.removeAttribute(m),e.removeAttribute(f),e.style.removeProperty(p),e.style.animationName="none";e.offsetWidth;for(const e of t)e.style.animationName="";e.removeAttribute(l)},[x]);const A=e.useRef(null),C=e.useRef(d);e.useLayoutEffect(()=>{C.current&&!d&&(A.current=function timelineNow(){return Number(document.timeline.currentTime??performance.now())}()),C.current=d},[d]),e.useLayoutEffect(()=>{const e=w.current;if(!e)return;const hold=t=>{const n=ownTarget(e,t);if(!n||""!==n.style.getPropertyValue(p))return;const r=(n.style.getPropertyValue("--p-anim-delay")||getComputedStyle(n).getPropertyValue("--p-anim-delay")).trim();""!==r&&n.style.setProperty(p,r)},land=n=>{const r=ownTarget(e,n);if(!r||!t())return;const o=getComputedStyle(r);"infinite"===o.getPropertyValue("--p-anim-repeat").trim()||""!==o.getPropertyValue("--p-anim-timeline").trim()||function endedEndless(e,t,n){if(null===n)return!1;const r=e.getAnimations().find(e=>e instanceof CSSAnimation&&e.animationName===t.animationName&&(e.effect?.pseudoElement??"")===(t.pseudoElement||"")),o=r?.startTime;return!(!r?.effect||null==o)&&Number(o)+Number(r.effect.getComputedTiming().endTime??0)<=n}(r,n,A.current)||(n.pseudoElement||r.matches(".plass-marquee-track")?e:r).setAttribute(m,"")};return e.addEventListener("animationstart",hold),e.addEventListener("animationend",land),()=>{e.removeEventListener("animationstart",hold),e.removeEventListener("animationend",land)}},[]);const N=b&&Boolean(c),V=r(N?n:null),O=e.useRef(!1);e.useLayoutEffect(()=>{const e=w.current;if(e)if(N&&V){O.current=!0;for(const t of ownParts(e))t.matches(".plass-anim, .plass-anim-lighting, .plass-marquee")&&""===getComputedStyle(t).getPropertyValue("--p-anim-timeline").trim()&&t.setAttribute(f,"")}else if(!N&&O.current){O.current=!1;for(const t of ownParts(e))t.removeAttribute(f)}},[N,V,x]);const T=e.useRef("mount"!==o);e.useEffect(()=>{T.current=!b},[b]),e.useEffect(()=>{if("visible"!==o)return;const e=w.current;if(!e||"undefined"==typeof IntersectionObserver)return void S(!0);const t=[],n=e.parentElement;let r=n?null:viewportRect(),i=!1;const check=()=>{if(!r)return;const n=function visibleShare(e,t){const n=e.width*e.height;if(n<=0)return 0;const r=Math.min(e.right,t.right)-Math.max(e.left,t.left),o=Math.min(e.bottom,t.bottom)-Math.max(e.top,t.top);return Math.max(0,r)*Math.max(0,o)/n}(function restingRect(e,t){const n=function movedProperties(e){if("function"!=typeof e.getAnimations)return[];const t=new Set;for(const n of e.getAnimations())if(n.effect instanceof KeyframeEffect)for(const e of n.effect.getKeyframes())for(const n of a)n in e&&t.add(n);return[...t]}(e),r=e.style,o=r.animationName,i=n.map(e=>({property:e,value:r.getPropertyValue(e),priority:r.getPropertyPriority(e)}));t&&(r.animationName="none");for(const e of n)r.setProperty(e,"none","important");const s=e.getBoundingClientRect();for(const{property:e,value:t,priority:n}of i)t?r.setProperty(e,t,n):r.removeProperty(e);return t&&(r.animationName=o),s}(e,T.current),r);if(n>0&&n>=u)if(s){P();for(const e of t)e.disconnect()}else i||(i=!0,P());else s||(i=!1,S(!1))},c=function measureSteps(e){const t=Array.from({length:21},(e,t)=>t/20);return e>0&&e<1?[...t,e]:t}(u);if(n){const e=new IntersectionObserver(([e])=>{r=function clipRect(e){const t=e.boundingClientRect;return t.width*t.height>0?e.intersectionRect:e.rootBounds??viewportRect()}(e),check()},{threshold:c});t.push(e),e.observe(n)}const l=new IntersectionObserver(check,{threshold:c});return t.push(l),l.observe(e),()=>{for(const e of t)e.disconnect()}},[o,s,u,P,S]);const L=e.useRef(h);e.useEffect(()=>{Object.is(h,L.current)||(L.current=h,P())},[h,P]),e.useEffect(()=>{"manual"===o&&(i?P():S(!1))},[o,i,P,S]);const M=e.useRef(v);e.useEffect(()=>{Object.is(v,M.current)||(M.current=v,R())},[v,R]);const k="hover"===o?{onPointerEnter:P,onFocus:e=>{holds(w.current,e.relatedTarget)||P()},onPointerLeave:()=>{d&&S(!1)},onBlur:e=>{d&&!holds(w.current,e.relatedTarget)&&S(!1)}}:{},I=useOffScreen(w,g&&b&&!c&&!("visible"===o&&!s),y);return{ref:e.useCallback(e=>{w.current=e},[]),state:!b||c||I?"paused":"running",started:b,resting:I,runs:x,handlers:k}}export function staggerSlots(e,{index:t,count:n,stagger:r,durationStep:o,reverse:i}){const a=i?n-1-t:t;return{...e,delay:e.delay+a*r,duration:Math.max(0,e.duration+a*o)}}export function animateChildren(t,n,r){const i=e.Children.toArray(t);return i.map((t,a)=>{const s=r(a,i.length);if(!e.isValidElement(t))return e.createElement("span",{key:a,className:n,style:s},t);const u=t.props;return e.cloneElement(t,{className:o(n,u.className),style:{...s,...u.style}})})}export function useAnimateElement(e){const{effect:t,trigger:n,play:r,once:o,threshold:a,paused:s,infinite:u,nonce:c,stagger:l=0,durationStep:m=0,reverse:f=!1,origin:p,moves:d,children:g,...y}=e,h=0!==l&&null!==t,v=useAnimationRun({trigger:"view"===y.timeline?"mount":n,play:r,once:o,threshold:a,paused:s,infinite:u,endless:isInfinite(y.repeat)&&"view"!==y.timeline,moves:!h&&(d??(null!==t&&i.has(t))),nonce:c}),w=t?`plass-anim ${animationClasses[t]}`:"",b=void 0===p?null:{transformOrigin:p};return{ref:v.ref,className:h?"":w,style:{...b,...h?null:animationSlots(y),"--p-anim-state":v.state},props:{...v.handlers,"data-plass-animation":t??void 0,"data-state":v.state},children:h?animateChildren(g,w,(e,t)=>({...b,...animationSlots(staggerSlots(y,{index:e,count:t,stagger:l,durationStep:m,reverse:f}))})):g}}

package/dist/internal/bottom-bar.js

@@ -1 +1 @@
-"use client";import*as e from"react";export const bottomBarToken="--plass-bottom-navigation-height";const t=new Set;let o=null;function publish(){const e=document.documentElement;if(0===t.size)return void e.style.removeProperty(bottomBarToken);let o=0;for(const e of t)o=Math.max(o,e.getBoundingClientRect().height);e.style.setProperty(bottomBarToken,`${o}px`)}export function useBottomBarHeight(n,r){e.useLayoutEffect(()=>{const e=n.current;if(r&&e)return t.add(e),"undefined"!=typeof ResizeObserver&&(o??=new ResizeObserver(publish),o.observe(e,{box:"border-box"})),publish(),()=>{t.delete(e),o?.unobserve(e),0===t.size&&(o?.disconnect(),o=null),publish()}},[r,n])}
+"use client";import*as e from"react";import{layoutBox as t}from"./layout-box.js";export const bottomBarToken="--plass-bottom-navigation-height";const o=new Set;let n=null;function publish(){const e=document.documentElement;if(0===o.size)return void e.style.removeProperty(bottomBarToken);let n=0;for(const e of o){const o=e.getBoundingClientRect().height,r=o*t(e,!1).perPixel;n=Math.max(n,Math.abs(r-o)<.01?o:r)}e.style.setProperty(bottomBarToken,`${n}px`)}export function useBottomBarHeight(t,r){e.useLayoutEffect(()=>{const e=t.current;if(r&&e)return o.add(e),"undefined"!=typeof ResizeObserver&&(n??=new ResizeObserver(publish),n.observe(e,{box:"border-box"})),publish(),()=>{o.delete(e),n?.unobserve(e),0===o.size&&(n?.disconnect(),n=null),publish()}},[r,t])}

package/dist/internal/calendar.js

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

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

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

package/dist/internal/chart-frame.js

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

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

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

package/dist/internal/commit-change.js

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