neba 1.16.1 → 1.17.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +5 -5
- package/dist/a2ui/adapter-catalog.json +1 -0
- package/dist/a2ui/catalog.json +632 -145
- package/dist/a2ui/components.js +1 -1
- package/dist/a2ui/index.d.ts +22 -10
- package/dist/a2ui/index.js +1 -1
- package/dist/a2ui/schema.d.ts +8 -6
- package/dist/a2ui/schema.js +1 -1
- package/dist/components/accordion/Accordion.js +1 -1
- package/dist/components/agent-steps/AgentSteps.js +1 -1
- package/dist/components/alert/Alert.js +1 -1
- package/dist/components/anchor/Anchor.d.ts +3 -1
- package/dist/components/anchor/Anchor.js +1 -1
- package/dist/components/animate-counter/AnimateCounter.d.ts +11 -4
- package/dist/components/animate-counter/AnimateCounter.js +1 -1
- package/dist/components/animate-scramble/AnimateScramble.d.ts +6 -3
- package/dist/components/animate-scramble/AnimateScramble.js +1 -1
- package/dist/components/animate-split/AnimateSplit.d.ts +6 -3
- package/dist/components/animate-split/AnimateSplit.js +1 -1
- package/dist/components/animate-typing/AnimateTyping.js +1 -1
- package/dist/components/app-logo/AppLogo.js +1 -1
- package/dist/components/approval/Approval.js +1 -1
- package/dist/components/avatar/Avatar.js +1 -1
- package/dist/components/bar-chart/BarChart.js +1 -1
- package/dist/components/bottom-navigation/BottomNavigation.js +1 -1
- package/dist/components/box/Box.js +1 -1
- package/dist/components/breadcrumb/Breadcrumb.d.ts +3 -3
- package/dist/components/breadcrumb/Breadcrumb.js +1 -1
- package/dist/components/card/Card.js +1 -1
- package/dist/components/chat-bubble/ChatBubble.js +1 -1
- package/dist/components/chip/Chip.d.ts +4 -1
- package/dist/components/chip/Chip.js +1 -1
- package/dist/components/code-block/CodeBlock.js +1 -1
- package/dist/components/collapsible/Collapsible.js +1 -1
- package/dist/components/color-picker/ColorPicker.d.ts +13 -3
- package/dist/components/color-picker/ColorPicker.js +1 -1
- package/dist/components/combobox/Combobox.d.ts +9 -2
- package/dist/components/combobox/Combobox.js +1 -1
- package/dist/components/command-palette/CommandPalette.js +1 -1
- package/dist/components/confirm/Confirm.js +1 -1
- package/dist/components/context-window/ContextWindow.d.ts +4 -1
- package/dist/components/context-window/ContextWindow.js +1 -1
- package/dist/components/data-list/DataList.d.ts +3 -2
- package/dist/components/data-list/DataList.js +1 -1
- package/dist/components/data-table/DataTable.d.ts +11 -5
- package/dist/components/data-table/DataTable.js +1 -1
- package/dist/components/date-picker/DatePicker.js +1 -1
- package/dist/components/date-range-picker/DateRangePicker.d.ts +3 -2
- package/dist/components/date-range-picker/DateRangePicker.js +1 -1
- package/dist/components/date-time-picker/DateTimePicker.js +1 -1
- package/dist/components/dialog/Dialog.js +1 -1
- package/dist/components/drawer/Drawer.js +1 -1
- package/dist/components/fieldset/Fieldset.js +1 -1
- package/dist/components/file-picker/FilePicker.d.ts +4 -0
- package/dist/components/file-picker/FilePicker.js +1 -1
- package/dist/components/footer/Footer.d.ts +4 -2
- package/dist/components/form/Form.d.ts +0 -14
- package/dist/components/form/Form.js +1 -1
- package/dist/components/gallery/Gallery.js +1 -1
- package/dist/components/gallery/GalleryViewer.js +1 -1
- package/dist/components/header/Header.d.ts +4 -3
- package/dist/components/heatmap-chart/HeatmapChart.js +1 -1
- package/dist/components/hover-card/HoverCard.d.ts +1 -1
- package/dist/components/how-to-steps/HowToSteps.d.ts +2 -1
- package/dist/components/how-to-steps/HowToSteps.js +1 -1
- package/dist/components/image/Image.d.ts +4 -1
- package/dist/components/image/Image.js +1 -1
- package/dist/components/inline-citation/InlineCitation.d.ts +4 -2
- package/dist/components/inline-citation/InlineCitation.js +1 -1
- package/dist/components/menu/Menu.d.ts +6 -2
- package/dist/components/menu/Menu.js +1 -1
- package/dist/components/mockup/Mockup.js +1 -1
- package/dist/components/navigation-menu/NavigationMenu.d.ts +1 -1
- package/dist/components/navigation-menu/NavigationMenu.js +1 -1
- package/dist/components/number-field/NumberField.d.ts +9 -4
- package/dist/components/number-field/NumberField.js +1 -1
- package/dist/components/overlay/Overlay.d.ts +1 -1
- package/dist/components/page-layout/PageLayout.js +1 -1
- package/dist/components/pagination/Pagination.d.ts +3 -2
- package/dist/components/panes/Panes.js +1 -1
- package/dist/components/pie-chart/PieChart.js +1 -1
- package/dist/components/pill/Pill.js +1 -1
- package/dist/components/popover/Popover.js +1 -1
- package/dist/components/progress-box/ProgressBox.js +1 -1
- package/dist/components/prompt-input/PromptInput.d.ts +5 -3
- package/dist/components/prompt-input/PromptInput.js +1 -1
- package/dist/components/provider/NebaProvider.d.ts +2 -2
- package/dist/components/provider/NebaProvider.js +1 -1
- package/dist/components/radio-group/RadioGroup.js +1 -1
- package/dist/components/rating/Rating.js +1 -1
- package/dist/components/reasoning/Reasoning.d.ts +7 -4
- package/dist/components/reasoning/Reasoning.js +1 -1
- package/dist/components/scatter-chart/ScatterChart.d.ts +7 -1
- package/dist/components/scatter-chart/ScatterChart.js +1 -1
- package/dist/components/scroll-area/ScrollArea.d.ts +12 -0
- package/dist/components/scroll-area/ScrollArea.js +1 -1
- package/dist/components/scroll-zone/ScrollZone.js +1 -1
- package/dist/components/segmented-button/SegmentedButton.js +1 -1
- package/dist/components/select/Select.d.ts +10 -2
- package/dist/components/select/Select.js +1 -1
- package/dist/components/sidebar/Sidebar.js +1 -1
- package/dist/components/sidebar/SidebarTrigger.js +1 -1
- package/dist/components/skeleton/Skeleton.js +1 -1
- package/dist/components/sources/Sources.d.ts +1 -1
- package/dist/components/sources/Sources.js +1 -1
- package/dist/components/stack/Stack.js +1 -1
- package/dist/components/streaming-text/StreamingText.js +1 -1
- package/dist/components/switch/Switch.d.ts +13 -2
- package/dist/components/switch/Switch.js +1 -1
- package/dist/components/switch/index.d.ts +1 -1
- package/dist/components/table/Table.d.ts +4 -2
- package/dist/components/tabs/Tabs.js +1 -1
- package/dist/components/text-field/TextField.d.ts +13 -5
- package/dist/components/text-field/TextField.js +1 -1
- package/dist/components/text-link/TextLink.js +1 -1
- package/dist/components/time-picker/TimePicker.js +1 -1
- package/dist/components/timeline-chart/TimelineChart.d.ts +6 -1
- package/dist/components/timeline-chart/TimelineChart.js +1 -1
- package/dist/components/toggle/Toggle.js +1 -1
- package/dist/components/tool-call/ToolCall.js +1 -1
- package/dist/components/tour/Tour.js +1 -1
- package/dist/components/transfer/Transfer.js +1 -1
- package/dist/components/tree-select/TreeSelect.js +1 -1
- package/dist/components/tree-view/TreeView.js +1 -1
- package/dist/components/typography/Typography.js +1 -1
- package/dist/components/visually-hidden/VisuallyHidden.d.ts +2 -2
- package/dist/components/window-pane/WindowPane.js +1 -1
- package/dist/hooks/useElementSize.d.ts +6 -2
- package/dist/hooks/useElementSize.js +1 -1
- package/dist/hooks/useMediaQuery.d.ts +3 -2
- package/dist/hooks/useOnScreen.d.ts +2 -2
- package/dist/hooks/useShortcut.d.ts +11 -3
- package/dist/hooks/useShortcut.js +1 -1
- package/dist/internal/animate.d.ts +8 -0
- package/dist/internal/animate.js +1 -1
- package/dist/internal/calendar.js +1 -1
- package/dist/internal/chart-brush.d.ts +3 -1
- package/dist/internal/chart-brush.js +1 -1
- package/dist/internal/chart-frame.d.ts +28 -2
- package/dist/internal/chart-frame.js +1 -1
- package/dist/internal/chart-line.js +1 -1
- package/dist/internal/chart.d.ts +21 -0
- package/dist/internal/chart.js +1 -1
- package/dist/internal/defaults.d.ts +8 -4
- package/dist/internal/drag.d.ts +15 -0
- package/dist/internal/drag.js +1 -1
- package/dist/internal/drop.d.ts +12 -8
- package/dist/internal/drop.js +1 -1
- package/dist/internal/highlight.js +1 -1
- package/dist/internal/i18n.d.ts +40 -4
- package/dist/internal/i18n.js +1 -1
- package/dist/internal/icons.d.ts +3 -0
- package/dist/internal/icons.js +1 -1
- package/dist/internal/link.d.ts +27 -0
- package/dist/internal/link.js +1 -1
- package/dist/internal/new-tab.d.ts +19 -0
- package/dist/internal/new-tab.js +1 -0
- package/dist/internal/notch.d.ts +102 -0
- package/dist/internal/notch.js +1 -0
- package/dist/internal/observe.d.ts +3 -4
- package/dist/internal/picker.d.ts +30 -4
- package/dist/internal/picker.js +1 -1
- package/dist/internal/run.d.ts +7 -5
- package/dist/internal/run.js +1 -1
- package/dist/internal/search.d.ts +3 -3
- package/dist/internal/styles.d.ts +56 -0
- package/dist/internal/styles.js +1 -1
- package/dist/locales/ar.js +1 -1
- package/dist/locales/de.js +1 -1
- package/dist/locales/es.js +1 -1
- package/dist/locales/fr.js +1 -1
- package/dist/locales/hi.js +1 -1
- package/dist/locales/id.js +1 -1
- package/dist/locales/it.js +1 -1
- package/dist/locales/ja.js +1 -1
- package/dist/locales/ko.js +1 -1
- package/dist/locales/nl.js +1 -1
- package/dist/locales/pl.js +1 -1
- package/dist/locales/pt.js +1 -1
- package/dist/locales/ru.js +1 -1
- package/dist/locales/th.js +1 -1
- package/dist/locales/tr.js +1 -1
- package/dist/locales/vi.js +1 -1
- package/dist/locales/zh-hans.js +1 -1
- package/dist/locales/zh-hant.js +1 -1
- package/dist/styles.css +1 -1
- package/dist/tailwind.css +287 -3
- package/dist/types.d.ts +18 -0
- package/package.json +23 -17
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import*as i from"react";import{useRender as o}from"@base-ui/react/use-render";import{beginPointerDrag as r}from"../../internal/drag.js";import{actionMessages as
|
|
1
|
+
"use client";import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import*as i from"react";import{useRender as o}from"@base-ui/react/use-render";import{beginPointerDrag as r,drawnScale as s}from"../../internal/drag.js";import{actionMessages as a,useMessages as l,windowMessages as d}from"../../internal/i18n.js";import{cx as c,hasContent as u,iconClasses as h,surfaceClasses as m}from"../../internal/styles.js";import{WindowControls as f,orderControls as g,windowChrome as w,windowMetrics as p,windowSlots as b}from"../../internal/window.js";import{inertValue as x}from"../../internal/inert.js";import{useStyleDefaults as v}from"../../internal/defaults.js";function y(e,t,n){const[o,r]=i.useState(t),s=void 0!==e;return[s?e:o,i.useCallback(e=>{s||r(e),n?.(e)},[s,n])]}const z=[{edge:"n",className:"inset-x-3 top-0 h-1.5 cursor-ns-resize"},{edge:"s",className:"inset-x-3 bottom-0 h-1.5 cursor-ns-resize"},{edge:"w",className:"inset-y-3 left-0 w-1.5 cursor-ew-resize"},{edge:"e",className:"inset-y-3 right-0 w-1.5 cursor-ew-resize"},{edge:"nw",className:"top-0 left-0 size-3 cursor-nwse-resize"},{edge:"ne",className:"top-0 right-0 size-3 cursor-nesw-resize"},{edge:"sw",className:"bottom-0 left-0 size-3 cursor-nesw-resize"},{edge:"se",className:"right-0 bottom-0 size-3 cursor-nwse-resize"}],M=[];export const WindowPane=/*@__PURE__*/i.forwardRef(function WindowPane(E,N){const{os:S="macos",title:H,icon:k,actions:C,controls:L=!0,size:W="md",color:j="primary",accent:I=!1,transparency:P=0,active:D,elevation:T=2,position:A="static",draggable:O=!1,resizable:R=!1,width:B,height:X,minWidth:$=180,minHeight:F,offset:Y,defaultOffset:_,onOffsetChange:q,onResize:K,open:U,defaultOpen:G=!0,onOpenChange:J,minimized:Q,defaultMinimized:V=!1,onMinimizedChange:Z,maximized:ee,defaultMaximized:te=!1,onMaximizedChange:ne,scroll:ie=!0,locale:oe,minimizeLabel:re,maximizeLabel:se,restoreLabel:ae,closeLabel:le,resizeLabel:de,render:ce,className:ue,style:he,children:me,...fe}=v(E,["size","locale"]),ge=l(d,oe),we=i.useId(),pe=l(a,oe),be=w(S),xe=p(S,W),ve=i.useId(),[ye,ze]=y(U,G,J),[Me,Ee]=y(Q,V,Z),[Ne,Se]=y(ee,te,ne),[He,ke]=y(Y,_??{x:0,y:0},q),[Ce,Le]=i.useState(null),[We,je]=i.useState({width:B,height:X});We.width===B&&We.height===X||(je({width:B,height:X}),Le(null));const[Ie,Pe]=i.useState(!0),De=D??Ie,[Te,Ae]=i.useState(null),[Oe,Re]=i.useState(null),[Be,Xe]=i.useState(!1),[$e,Fe]=i.useState(!1),[Ye,_e]=i.useState(ye);Ye!==ye&&(_e(ye),Fe(!ye)),i.useEffect(()=>{if(!$e)return;const e=window.setTimeout(()=>Fe(!1),260);return()=>window.clearTimeout(e)},[$e]);const qe=i.useRef(null),Ke=i.useCallback(e=>{qe.current=e,"function"==typeof N?N(e):N&&(N.current=e)},[N]);i.useEffect(()=>{if(void 0!==D||!ye)return;const e=qe.current;if(!e)return;const t=e=>Pe(e);M.push(t);const n=n=>{const i=n.target;if(!(i instanceof Node))return;if(e.contains(i))return M.splice(M.indexOf(t),1),M.push(t),void Pe(!0);const o=i instanceof Element?i:i.parentElement;o?.closest(".neba-window")&&Pe(!1)};return document.addEventListener("pointerdown",n,!0),document.addEventListener("focusin",n,!0),()=>{document.removeEventListener("pointerdown",n,!0),document.removeEventListener("focusin",n,!0);const e=M.indexOf(t),i=e===M.length-1;M.splice(e,1),i&&M[M.length-1]?.(!0)}},[D,ye]);const Ue=i.useRef(null);function Ge(e,t){if(0!==e.button)return;Ue.current?.();const n=e.currentTarget,i=e.clientX,o=e.clientY,a=qe.current,l=a?s(a):{x:1,y:1};Xe(!0);const d=()=>{Ue.current=null,Xe(!1)},c=r({target:n,pointerId:e.pointerId,onMove:e=>t((e.clientX-i)/l.x,(e.clientY-o)/l.y),onEnd:d});Ue.current=()=>{c(),d()}}i.useEffect(()=>()=>Ue.current?.(),[]);const Je={width:Math.max(0,$),height:Math.max(xe.bar,F??xe.bar)};function Qe(e){Le(e),K?.(e)}const Ve=g(S,!0===L?["minimize","maximize","close"]:!1===L?[]:L),Ze=Ve.includes("maximize");i.useLayoutEffect(()=>{if(!Me||null!==Te)return;const e=qe.current,t=e?.firstElementChild;e&&t instanceof HTMLElement&&Ae(t.offsetHeight+(e.offsetHeight-e.clientHeight))},[Me,Te]),i.useEffect(()=>{if(Me||null===Oe)return;const e=window.setTimeout(()=>Re(null),400);return()=>window.clearTimeout(e)},[Me,Oe]);const et={minimize:re??ge.minimize,maximize:se??ge.maximize,restore:ae??ge.restore,close:le??pe.close},tt=e(f,{os:S,metrics:xe,controls:Ve,maximized:Ne,active:De,labels:et,onCommand:function(e){"close"===e?ze(!1):"minimize"===e?function(e){const t=qe.current,n=t?.firstElementChild;if(t&&n instanceof HTMLElement&&Ae(n.offsetHeight+(t.offsetHeight-t.clientHeight)),e&&void 0===(Ce?.height??X)&&t)return Re(t.offsetHeight),void requestAnimationFrame(()=>Ee(!0));Ee(e)}(!Me):Se(!Ne)}}),nt=u(H)?e("span",{id:ve,className:"min-w-0 truncate",children:H}):null,it=u(k)?e("span",{className:"flex shrink-0 items-center",children:k}):null,ot=t("div",{className:c("relative flex shrink-0 items-center select-none",h,O&&!Ne?"cursor-grab touch-none active:cursor-grabbing":""),style:{height:xe.bar,textShadow:"var(--n-window-bar-shadow)",fontWeight:xe.weight,paddingInlineStart:xe.padX,paddingInlineEnd:xe.padEnd,gap:Math.round(.7*xe.title),fontSize:xe.title,backgroundColor:"var(--n-window-bar)",backgroundImage:"var(--n-window-bar-image)",color:"var(--n-window-bar-fg)",borderBlockEnd:be.rule?"1px solid var(--n-window-line)":void 0},onPointerDown:function(e){if(!O||Ne)return;const t={...He},n=qe.current,i="fixed"===A?{width:document.documentElement.clientWidth,height:document.documentElement.clientHeight}:"absolute"===A&&n?.offsetParent instanceof HTMLElement?{width:n.offsetParent.clientWidth,height:n.offsetParent.clientHeight}:null,o=n?.offsetWidth??0,r=Math.min(o,48);Ge(e,(e,n)=>{const s=t.x+e,a=t.y+n;ke(i?{x:Math.min(Math.max(s,r-o),i.width-r),y:Math.min(Math.max(a,0),Math.max(0,i.height-xe.bar))}:{x:s,y:a})})},onDoubleClick:Ze?()=>Se(!Ne):void 0,children:["start"===be.controlsSide?tt:null,"center"===be.titleAlign?e("span",{"aria-hidden":"true",className:"pointer-events-none absolute inset-x-0 flex items-center justify-center",style:{paddingInline:xe.controlsWidth(Ve.length)+2*xe.padX},children:t("span",{className:"flex min-w-0 items-center",style:{gap:Math.round(.5*xe.title)},children:[it,nt]})}):t(n,{children:[it,nt]}),e("span",{className:"flex-1"}),u(C)?e("span",{className:"flex shrink-0 items-center",style:{gap:Math.round(.5*xe.title)},onPointerDown:e=>e.stopPropagation(),onDoubleClick:e=>e.stopPropagation(),children:C}):null,"end"===be.controlsSide?tt:null]}),rt=Ne?{left:0,top:0,width:"100%",height:"100%"}:{left:He.x,top:He.y,width:Ce?.width??B,height:Me?Te??xe.bar:Ce?.height??X??Oe??void 0},st=o({render:ce,ref:Ke,props:{role:"group","aria-labelledby":nt?ve:void 0,className:c("neba-window relative flex min-w-0 flex-col overflow-hidden",P>0?m:"",be.glass&&0===P?"[backdrop-filter:var(--neba-blur)]":"","[transition-property:left,top,width,height,opacity,box-shadow,background-color,border-color,border-radius]","[transition-duration:var(--neba-duration-window)]","[transition-timing-function:var(--neba-ease)]","motion-reduce:[transition-duration:0ms]","data-[gesture]:[transition-property:none]",ue),"data-gesture":Be?"":void 0,inert:x(!ye),style:{opacity:ye?void 0:0,...b({os:S,color:j,accent:I,transparency:P,active:De,elevation:T}),position:"static"===A?"relative":A,...rt,borderRadius:Ne?0:`${xe.radius}px ${xe.radius}px ${xe.radiusBottom}px ${xe.radiusBottom}px`,borderStyle:"solid",borderWidth:xe.frame,borderColor:"var(--n-window-line)",backgroundColor:"var(--n-window-band)",boxShadow:"var(--n-window-shadow), var(--neba-plate-glass)",...he},children:t(n,{children:[ot,e("div",{className:c("min-h-0 flex-1",ie?"overflow-auto":"overflow-hidden"),style:{backgroundColor:"var(--n-window-body)",marginInline:xe.band.side,marginBottom:xe.band.bottom,boxShadow:xe.band.side>0?"inset 0 0 0 1px rgb(0 0 0 / 0.12)":void 0},inert:x(Me),children:me}),!R||Ne||Me?null:e("span",{id:we,hidden:!0,children:ge.resizeHint}),!R||Ne||Me?null:z.map(t=>{const n="se"===t.edge;return e("div",{role:n?"button":void 0,tabIndex:n?0:void 0,"aria-label":n?de??ge.resize:void 0,"aria-describedby":n?we:void 0,"aria-hidden":n?void 0:"true",className:c("absolute z-10 touch-none",t.className,n?"neba-hit":"",n?"focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:[outline-offset:-2px]":""),onPointerDown:e=>function(e,t){const n=qe.current;if(!n||Ne)return;const i={width:n.offsetWidth,height:n.offsetHeight,x:He.x,y:He.y},o=e.includes("e"),r=e.includes("w"),s=e.includes("n"),a=e.includes("s");Ge(t,(e,t)=>{let{width:n,height:l}=i,{x:d,y:c}=i;o&&(n=Math.max(Je.width,i.width+e)),a&&(l=Math.max(Je.height,i.height+t)),r&&(n=Math.max(Je.width,i.width-e),d=i.x+(i.width-n)),s&&(l=Math.max(Je.height,i.height-t),c=i.y+(i.height-l)),Qe({width:n,height:l}),(r||s)&&ke({x:d,y:c})})}(t.edge,e),onKeyDown:n?e=>{const t={ArrowRight:[16,0],ArrowLeft:[-16,0],ArrowDown:[0,16],ArrowUp:[0,-16]}[e.key];t&&(e.preventDefault(),function(e,t){const n=qe.current;n&&Qe({width:Math.max(Je.width,n.offsetWidth+e),height:Math.max(Je.height,n.offsetHeight+t)})}(t[0],t[1]))}:void 0},t.edge)})]}),...fe}});return ye||$e?st:null});
|
|
@@ -1,5 +1,9 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
/**
|
|
2
|
+
/**
|
|
3
|
+
* A box, in CSS pixels: the element's own layout box, in whole pixels, before any
|
|
4
|
+
* transform on it or above it. `0` × `0` before the first measurement and on a
|
|
5
|
+
* server.
|
|
6
|
+
*/
|
|
3
7
|
export interface ElementSize {
|
|
4
8
|
width: number;
|
|
5
9
|
height: number;
|
|
@@ -7,7 +11,7 @@ export interface ElementSize {
|
|
|
7
11
|
/**
|
|
8
12
|
* One element's size, kept up to date.
|
|
9
13
|
*
|
|
10
|
-
* The same shared `ResizeObserver`
|
|
14
|
+
* The same shared `ResizeObserver` the library's own components measure
|
|
11
15
|
* themselves with — one observer for the whole page rather than one per
|
|
12
16
|
* subscriber, because a dashboard of eight charts inside a PageLayout with a
|
|
13
17
|
* Panes in it was a dozen registrations the browser walked on every layout.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import*as t from"react";import{attachedRef as e,observeResize as i}from"../internal/observe.js";export function useElementSize(){const[n,h]=t.useState(null),[
|
|
1
|
+
"use client";import*as t from"react";import{attachedRef as e,observeResize as i}from"../internal/observe.js";export function useElementSize(){const[n,h]=t.useState(null),[o]=t.useState(()=>e(h)),[r,s]=t.useState({width:0,height:0});return t.useLayoutEffect(()=>{if(!n)return;const t=()=>{const t=function(t){return t instanceof HTMLElement?{width:t.offsetWidth,height:t.offsetHeight}:t.getBoundingClientRect()}(n);s(e=>e.width===t.width&&e.height===t.height?e:{width:t.width,height:t.height})};return t(),i(n,t)},[n]),[o,r]}
|
|
@@ -21,8 +21,9 @@ export declare function useMediaQuery(query: string): boolean;
|
|
|
21
21
|
*
|
|
22
22
|
* `useBreakpoint('md')` is `md:` in a class name, in JavaScript — the widths are
|
|
23
23
|
* one table, so a component that branches here and a utility that branches in
|
|
24
|
-
* CSS change at the same pixel. `xs` is `0rem` and therefore always true
|
|
25
|
-
* is the value with no media query around it
|
|
24
|
+
* CSS change at the same pixel. `xs` is `0rem` and therefore always true once
|
|
25
|
+
* the page has hydrated, which is the value with no media query around it; on a
|
|
26
|
+
* server it is `false`, like every query.
|
|
26
27
|
*/
|
|
27
28
|
export declare function useBreakpoint(breakpoint: NebaBreakpoint): boolean;
|
|
28
29
|
/**
|
|
@@ -13,8 +13,8 @@ export interface OnScreenOptions {
|
|
|
13
13
|
/**
|
|
14
14
|
* Whether an element is on screen.
|
|
15
15
|
*
|
|
16
|
-
* The same shared `IntersectionObserver` the
|
|
17
|
-
*
|
|
16
|
+
* The same shared `IntersectionObserver` the `Animate*` wrappers watch for
|
|
17
|
+
* their own element with — one per threshold for the whole page, because a
|
|
18
18
|
* page of them was one registration each.
|
|
19
19
|
*
|
|
20
20
|
* It answers `true` where there is no `IntersectionObserver` rather than
|
|
@@ -2,8 +2,8 @@ export interface ShortcutOptions {
|
|
|
2
2
|
/** Stop listening without unmounting — a modal is open, a field has focus. @default true */
|
|
3
3
|
enabled?: boolean;
|
|
4
4
|
/**
|
|
5
|
-
* Ignore the key while the reader is typing into an input, a textarea
|
|
6
|
-
* anything `contenteditable`.
|
|
5
|
+
* Ignore the key while the reader is typing into an input, a textarea, a
|
|
6
|
+
* select or anything `contenteditable`.
|
|
7
7
|
*
|
|
8
8
|
* On by default, and it is the reason a bare `/` or `?` can be bound at all:
|
|
9
9
|
* a page-wide single-letter shortcut that fires inside a search box is a
|
|
@@ -17,10 +17,18 @@ export interface ShortcutOptions {
|
|
|
17
17
|
* opinion about, like `Mod+K` or `Mod+S`. @default true
|
|
18
18
|
*/
|
|
19
19
|
preventDefault?: boolean;
|
|
20
|
+
/**
|
|
21
|
+
* Call the handler again for every repeat of a held key. Off by default: a
|
|
22
|
+
* shortcut held down a moment too long opened a panel and then opened it
|
|
23
|
+
* again twenty times a second. The repeats still have their default
|
|
24
|
+
* prevented, or holding `Mod+S` would save once and then open the browser's
|
|
25
|
+
* own dialog. @default false
|
|
26
|
+
*/
|
|
27
|
+
repeat?: boolean;
|
|
20
28
|
}
|
|
21
29
|
/**
|
|
22
30
|
* A key combination bound on the window, spelled the way
|
|
23
|
-
* [Shortcut](../components/shortcut) draws it — `'Mod+K'`, `'Mod+Shift+P'`,
|
|
31
|
+
* [Shortcut](../components/display/shortcut) draws it — `'Mod+K'`, `'Mod+Shift+P'`,
|
|
24
32
|
* `'?'`.
|
|
25
33
|
*
|
|
26
34
|
* This is what `CommandPalette` binds its own opener with, offered because an
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import*as e from"react";import{matchesShortcut as t}from"../internal/keys.js";export function useShortcut(
|
|
1
|
+
"use client";import*as e from"react";import{matchesShortcut as t}from"../internal/keys.js";const n=new WeakSet;export function useShortcut(r,a,o={}){const{enabled:i=!0,ignoreWhileTyping:s=!0,preventDefault:u=!0,repeat:f=!1}=o,c=e.useRef(a);e.useEffect(()=>{c.current=a}),e.useEffect(()=>{if(!1===r||!i)return;const e=e=>{var a;e.defaultPrevented&&!n.has(e)||(s&&(a=e.target,a instanceof HTMLElement&&(a.isContentEditable||"INPUT"===a.tagName||"TEXTAREA"===a.tagName||"SELECT"===a.tagName))||t(e,r)&&(u&&(e.preventDefault(),n.add(e)),e.repeat&&!f||c.current(e)))};return window.addEventListener("keydown",e),()=>window.removeEventListener("keydown",e)},[r,i,s,u,f])}
|
|
@@ -202,6 +202,14 @@ export interface AnimationRun {
|
|
|
202
202
|
state: 'running' | 'paused';
|
|
203
203
|
/** Whether the animation has been let go at all, for `data-state`. */
|
|
204
204
|
started: boolean;
|
|
205
|
+
/**
|
|
206
|
+
* How many times it has been let go. `started` stays `true` from one run to
|
|
207
|
+
* the next — a `play` that counts up, a second hover on a finite effect — so
|
|
208
|
+
* a loop written in JavaScript starts over when this changes rather than
|
|
209
|
+
* when `started` does. The CSS effects need none of it: the rewind below is
|
|
210
|
+
* keyed on the same number.
|
|
211
|
+
*/
|
|
212
|
+
run: number;
|
|
205
213
|
/**
|
|
206
214
|
* Spread onto the element after the caller's props when `trigger` is
|
|
207
215
|
* `hover`, with the caller's handlers already inside; empty otherwise.
|
package/dist/internal/animate.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e}from"react/jsx-runtime";import*as n from"react";import{observeVisibility as t}from"./observe.js";import{cx as a}from"./styles.js";export const animationClasses={fade:"neba-anim-fade",grow:"neba-anim-scale",slide:"neba-anim-slide",zoom:"neba-anim-scale",rotate:"neba-anim-rotate",blink:"neba-anim-blink",reveal:"neba-anim-reveal"};export const animBaseClass="neba-anim";export const childAnimations=":scope > .neba-anim";export const defaultDurations={fade:320,grow:340,slide:380,zoom:340,rotate:460,blink:900,reveal:620};export function revealClip(e){switch(e){case"top":return"inset(0 0 100% 0)";case"bottom":return"inset(100% 0 0 0)";case"right":return"inset(0 0 0 100%)";default:return"inset(0 100% 0 0)"}}export function lengthValue(e){return"number"==typeof e?`${e}px`:e}export function isInfinite(e){return"infinite"===e}export function animationSlots(e){const n={"--n-anim-duration":`${e.duration}ms`,"--n-anim-delay":`${e.delay}ms`,"--n-anim-repeat":(r=e.repeat,"infinite"===r?"infinite":String(r)),"--n-anim-direction":(t=e.mode??"in",a=e.alternate,"out"===t?a?"alternate-reverse":"reverse":a?"alternate":"normal")};var t,a,r;return e.easing&&(n["--n-anim-ease"]=e.easing),void 0!==e.opacity&&(n["--n-anim-opacity"]=String(e.opacity)),void 0!==e.scale&&(n["--n-anim-scale"]=String(e.scale)),void 0!==e.x&&(n["--n-anim-x"]=e.x),void 0!==e.y&&(n["--n-anim-y"]=e.y),void 0!==e.angle&&(n["--n-anim-angle"]=e.angle),void 0!==e.angleTo&&(n["--n-anim-angle-to"]=e.angleTo),void 0!==e.clip&&(n["--n-anim-clip"]=e.clip),"view"===e.timeline&&(n["--n-anim-timeline"]="view()",n["--n-anim-range"]=e.range??"entry 0% cover 45%"),n}export function slideOffsets(e,n){const t=lengthValue(n),a="number"==typeof n?-n+"px":`calc(-1 * ${t})`;switch(e){case"top":return{x:"0px",y:a};case"bottom":return{x:"0px",y:t};case"left":return{x:a,y:"0px"};default:return{x:t,y:"0px"}}}export function staggers({stagger:e,durationStep:n}){return 0!==e||0!==n}export function staggerChildren(t,r,i,{stagger:s,durationStep:o,reverse:l}){const c=n.Children.toArray(t);return c.map((t,u)=>{const m=l?c.length-1-u:u,f=animationSlots({...i,delay:i.delay+m*s,duration:Math.max(0,i.duration+m*o)});if(!n.isValidElement(t))return e("span",{className:r,style:f,children:t},u);const d=t.props;return n.cloneElement(t,{className:a(r,d.className),style:{...f,...d.style}})})}export const MIN_BLINK_DURATION=334;export function transitionProps(e){const n=transitionParts(e);return n?{className:`neba-anim ${animationClasses[n.effect]}`,style:{...animationSlots(n.slots),"--n-anim-state":"running"}}:{className:"",style:{}}}export function transitionParts(e){if(!e)return null;const n="string"==typeof e?{type:e}:e,{type:t}=n,a=n.duration??defaultDurations[t],r={duration:"blink"===t?Math.max(a,334):a,delay:n.delay??0,easing:n.easing,repeat:n.repeat??("blink"===t?"infinite":1),alternate:n.alternate,timeline:n.timeline,range:n.range};if("grow"!==t&&"zoom"!==t||(r.scale=n.scale??("zoom"===t?.4:.8)),"slide"===t){const{x:e,y:t}=slideOffsets(n.from??"bottom",n.distance??"100%");r.x=e,r.y=t}return"rotate"===t&&(r.angle=`${n.angle??-180}deg`),"reveal"===t&&(r.clip=revealClip(n.side??"left")),{effect:t,slots:r}}export{usePrefersReducedMotion}from"./media.js";export function useAnimationRun({trigger:e,play:a,once:r,threshold:i,paused:s,infinite:o,caller:l,parts:c}){const u=n.useRef(null),[m,f]=n.useState("mount"===e),[d,p]=n.useState(0),[g,y]=n.useState(!1),x=n.useCallback(()=>{f(!0),p(e=>e+1)},[]);n.useLayoutEffect(()=>{const e=u.current;if(!e||0===d)return;const n=[e,...c?e.querySelectorAll(c):[]];for(const e of n)e.style.animationName="none";e.offsetWidth;for(const e of n)e.style.animationName=""},[d,c]),n.useEffect(()=>{if("visible"!==e)return;const n=u.current;if(!n)return;let a=null;if(a=t(n,i,e=>{e?(x(),r&&(a?.(),a=null)):r||f(!1)}),a)return()=>a?.();f(!0)},[e,r,i,x]),n.useEffect(()=>{const e=u.current;if(o&&e)return t(e,0,e=>y(!e))??void 0},[o]),n.useEffect(()=>{"manual"===e&&(a?x():f(!1))},[e,a,x]);const v=e=>e.relatedTarget instanceof Node&&e.currentTarget.contains(e.relatedTarget),b="hover"===e?{onPointerEnter:e=>{l?.onPointerEnter?.(e),x()},onFocus:e=>{l?.onFocus?.(e),v(e)||x()},onPointerLeave:e=>{l?.onPointerLeave?.(e),o&&f(!1)},onBlur:e=>{l?.onBlur?.(e),o&&!v(e)&&f(!1)}}:{};return{ref:n.useCallback(e=>{u.current=e},[]),state:!m||s||o&&g?"paused":"running",started:m,handlers:b,offscreen:o&&g}}export function useAnimateElement(e){const{effect:n,trigger:t,play:a,once:r,threshold:i,paused:s,infinite:o,caller:l,children:c,stagger:u=0,durationStep:m=0,reverse:f=!1,effectClass:d,name:p,...g}=e,y=n?animationClasses[n]:d,x=y?`neba-anim ${y}`:"",v=""!==x&&staggers({stagger:u,durationStep:m,reverse:f}),b=useAnimationRun({trigger:t,play:a,once:r,threshold:i,paused:s,infinite:o,caller:l,parts:v?childAnimations:void 0}),h="view"===g.timeline?"running":b.state;return{ref:b.ref,className:v?"":x,style:v?{"--n-anim-state":h}:{...animationSlots(g),"--n-anim-state":h},props:{...b.handlers,"data-neba-animation":p??n??void 0,"data-state":h},children:v?staggerChildren(c,x,g,{stagger:u,durationStep:m,reverse:f}):c}}
|
|
1
|
+
"use client";import{jsx as e}from"react/jsx-runtime";import*as n from"react";import{observeVisibility as t}from"./observe.js";import{cx as a}from"./styles.js";export const animationClasses={fade:"neba-anim-fade",grow:"neba-anim-scale",slide:"neba-anim-slide",zoom:"neba-anim-scale",rotate:"neba-anim-rotate",blink:"neba-anim-blink",reveal:"neba-anim-reveal"};export const animBaseClass="neba-anim";export const childAnimations=":scope > .neba-anim";export const defaultDurations={fade:320,grow:340,slide:380,zoom:340,rotate:460,blink:900,reveal:620};export function revealClip(e){switch(e){case"top":return"inset(0 0 100% 0)";case"bottom":return"inset(100% 0 0 0)";case"right":return"inset(0 0 0 100%)";default:return"inset(0 100% 0 0)"}}export function lengthValue(e){return"number"==typeof e?`${e}px`:e}export function isInfinite(e){return"infinite"===e}export function animationSlots(e){const n={"--n-anim-duration":`${e.duration}ms`,"--n-anim-delay":`${e.delay}ms`,"--n-anim-repeat":(r=e.repeat,"infinite"===r?"infinite":String(r)),"--n-anim-direction":(t=e.mode??"in",a=e.alternate,"out"===t?a?"alternate-reverse":"reverse":a?"alternate":"normal")};var t,a,r;return e.easing&&(n["--n-anim-ease"]=e.easing),void 0!==e.opacity&&(n["--n-anim-opacity"]=String(e.opacity)),void 0!==e.scale&&(n["--n-anim-scale"]=String(e.scale)),void 0!==e.x&&(n["--n-anim-x"]=e.x),void 0!==e.y&&(n["--n-anim-y"]=e.y),void 0!==e.angle&&(n["--n-anim-angle"]=e.angle),void 0!==e.angleTo&&(n["--n-anim-angle-to"]=e.angleTo),void 0!==e.clip&&(n["--n-anim-clip"]=e.clip),"view"===e.timeline&&(n["--n-anim-timeline"]="view()",n["--n-anim-range"]=e.range??"entry 0% cover 45%"),n}export function slideOffsets(e,n){const t=lengthValue(n),a="number"==typeof n?-n+"px":`calc(-1 * ${t})`;switch(e){case"top":return{x:"0px",y:a};case"bottom":return{x:"0px",y:t};case"left":return{x:a,y:"0px"};default:return{x:t,y:"0px"}}}export function staggers({stagger:e,durationStep:n}){return 0!==e||0!==n}export function staggerChildren(t,r,i,{stagger:s,durationStep:o,reverse:l}){const c=n.Children.toArray(t);return c.map((t,u)=>{const m=l?c.length-1-u:u,f=animationSlots({...i,delay:i.delay+m*s,duration:Math.max(0,i.duration+m*o)});if(!n.isValidElement(t))return e("span",{className:r,style:f,children:t},u);const d=t.props;return n.cloneElement(t,{className:a(r,d.className),style:{...f,...d.style}})})}export const MIN_BLINK_DURATION=334;export function transitionProps(e){const n=transitionParts(e);return n?{className:`neba-anim ${animationClasses[n.effect]}`,style:{...animationSlots(n.slots),"--n-anim-state":"running"}}:{className:"",style:{}}}export function transitionParts(e){if(!e)return null;const n="string"==typeof e?{type:e}:e,{type:t}=n,a=n.duration??defaultDurations[t],r={duration:"blink"===t?Math.max(a,334):a,delay:n.delay??0,easing:n.easing,repeat:n.repeat??("blink"===t?"infinite":1),alternate:n.alternate,timeline:n.timeline,range:n.range};if("grow"!==t&&"zoom"!==t||(r.scale=n.scale??("zoom"===t?.4:.8)),"slide"===t){const{x:e,y:t}=slideOffsets(n.from??"bottom",n.distance??"100%");r.x=e,r.y=t}return"rotate"===t&&(r.angle=`${n.angle??-180}deg`),"reveal"===t&&(r.clip=revealClip(n.side??"left")),{effect:t,slots:r}}export{usePrefersReducedMotion}from"./media.js";export function useAnimationRun({trigger:e,play:a,once:r,threshold:i,paused:s,infinite:o,caller:l,parts:c}){const u=n.useRef(null),[m,f]=n.useState("mount"===e),[d,p]=n.useState(0),[g,y]=n.useState(!1),x=n.useCallback(()=>{f(!0),p(e=>e+1)},[]);n.useLayoutEffect(()=>{const e=u.current;if(!e||0===d)return;const n=[e,...c?e.querySelectorAll(c):[]];for(const e of n)e.style.animationName="none";e.offsetWidth;for(const e of n)e.style.animationName=""},[d,c]),n.useEffect(()=>{if("visible"!==e)return;const n=u.current;if(!n)return;let a=null;if(a=t(n,i,e=>{e?(x(),r&&(a?.(),a=null)):r||f(!1)}),a)return()=>a?.();f(!0)},[e,r,i,x]),n.useEffect(()=>{const e=u.current;if(o&&e)return t(e,0,e=>y(!e))??void 0},[o]),n.useEffect(()=>{"manual"===e&&(a?x():f(!1))},[e,a,x]);const v=e=>e.relatedTarget instanceof Node&&e.currentTarget.contains(e.relatedTarget),b="hover"===e?{onPointerEnter:e=>{l?.onPointerEnter?.(e),x()},onFocus:e=>{l?.onFocus?.(e),v(e)||x()},onPointerLeave:e=>{l?.onPointerLeave?.(e),o&&f(!1)},onBlur:e=>{l?.onBlur?.(e),o&&!v(e)&&f(!1)}}:{};return{ref:n.useCallback(e=>{u.current=e},[]),state:!m||s||o&&g?"paused":"running",started:m,run:d,handlers:b,offscreen:o&&g}}export function useAnimateElement(e){const{effect:n,trigger:t,play:a,once:r,threshold:i,paused:s,infinite:o,caller:l,children:c,stagger:u=0,durationStep:m=0,reverse:f=!1,effectClass:d,name:p,...g}=e,y=n?animationClasses[n]:d,x=y?`neba-anim ${y}`:"",v=""!==x&&staggers({stagger:u,durationStep:m,reverse:f}),b=useAnimationRun({trigger:t,play:a,once:r,threshold:i,paused:s,infinite:o,caller:l,parts:v?childAnimations:void 0}),h="view"===g.timeline?"running":b.state;return{ref:b.ref,className:v?"":x,style:v?{"--n-anim-state":h}:{...animationSlots(g),"--n-anim-state":h},props:{...b.handlers,"data-neba-animation":p??n??void 0,"data-state":h},children:v?staggerChildren(c,x,g,{stagger:u,durationStep:m,reverse:f}):c}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import*as r from"react";import{Button as o}from"../components/button/Button.js";import{ChevronIcon as l}from"./icons.js";import{controlHeightClasses as a,controlTextClasses as s,cx as i,gapClasses as c,metaTextClasses as d,pressTransitionClasses as u,srOnlyClasses as m,transitionClasses as h}from"./styles.js";import{addDays as g,addMonths as f,addYears as b,calendarWeeks as p,compareDay as y,isDayOutside as v,isMonthBeforeYear as x,isSameDay as w,isSameMonth as D,isUnitOutside as N,isValidDate as S,makeDate as M,meridiemLabels as C,monthLabels as k,startOfDay as z,startOfMonth as P,today as A,weekdayLabels as j,withTime as Y,YEAR_PAGE_SIZE as B,yearPageStart as E}from"./date.js";import{dateFormatter as F}from"./format.js";import{pickerMessages as T,useMessages as H}from"./i18n.js";import{useHydrated as R}from"./media.js";export function usePickerLabels(e,t){const n=H(T,t);return r.useMemo(()=>e?{...n,...e}:n,[n,e])}const I={xs:"1.375rem",sm:"1.625rem",md:"2rem",lg:"2.5rem",xl:"3rem"},K={xs:"rounded-(--neba-radius-xs)",sm:"rounded-(--neba-radius-xs)",md:"rounded-(--neba-radius-sm)",lg:"rounded-(--neba-radius-md)",xl:"rounded-(--neba-radius-lg)"},G={xs:"rounded-s-(--neba-radius-xs)",sm:"rounded-s-(--neba-radius-xs)",md:"rounded-s-(--neba-radius-sm)",lg:"rounded-s-(--neba-radius-md)",xl:"rounded-s-(--neba-radius-lg)"},O={xs:"rounded-e-(--neba-radius-xs)",sm:"rounded-e-(--neba-radius-xs)",md:"rounded-e-(--neba-radius-sm)",lg:"rounded-e-(--neba-radius-md)",xl:"rounded-e-(--neba-radius-lg)"},U=["relative flex select-none items-center justify-center tabular-nums","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",h,u,"focus-visible:z-10 focus-visible:[outline:2px_solid_var(--n-ring)]","focus-visible:[outline-offset:-2px]"].join(" ");function Cell({children:n,label:r,selected:o,inRange:l=!1,rangeEdge:a=null,current:s=!1,muted:c=!1,disabled:d=!1,focused:u=!1,size:m,className:h,onClick:g,onPointerEnter:f,onKeyDown:b}){return t("button",{type:"button",role:"gridcell","aria-label":r,"aria-selected":o,"aria-current":s?"date":void 0,"aria-disabled":d||void 0,tabIndex:u?0:-1,"data-focus-target":u?"true":void 0,className:i(U,"start"===a?G[m]:"end"===a?O[m]:"middle"===a?"rounded-none":K[m],d?"cursor-not-allowed text-(--neba-disabled-fg)":o?"cursor-pointer bg-(--n-fill) font-semibold text-(--n-on-solid) hover:bg-(--n-fill-hover) active:bg-(--n-fill-active)":l?"cursor-pointer bg-(--n-soft) text-(--neba-fg) hover:bg-(--n-soft-hover) active:bg-(--n-soft-press)":s?"cursor-pointer font-semibold text-(--n-on-tint) hover:bg-(--n-soft) active:bg-(--n-soft-press)":c?"cursor-pointer text-(--neba-muted-fg) hover:bg-(--n-soft) active:bg-(--n-soft-press)":"cursor-pointer text-(--neba-fg) hover:bg-(--n-soft) active:bg-(--n-soft-press)",h),onClick:()=>{d||g()},onPointerEnter:f,onKeyDown:b,children:[n,s?e("span",{"aria-hidden":"true",className:"absolute bottom-[0.18em] size-[0.22em] rounded-full bg-current"}):null]})}function Header({size:r,color:d,view:u,month:h,locale:g,labels:f,showPreviousButton:b,showNextButton:p,captionId:y,onStep:v,onViewChange:w}){const D=k(g,"long")[h.getMonth()],N=String(h.getFullYear()),S=x(g),M=E(h.getFullYear()),C=`${M}–${M+B-1}`,z="day"===u?[f.previousMonth,f.nextMonth]:"month"===u?[f.previousYear,f.nextYear]:[f.previousYears,f.nextYears],P=(t,n)=>n?e(o,{variant:"text",size:r,color:d,density:"compact","aria-label":z[-1===t?0:1],onClick:()=>v(t),startIcon:e("span",{className:i("flex items-center",-1===t?"rotate-90 rtl:-rotate-90":"-rotate-90 rtl:rotate-90"),children:e(l,{})})}):e("span",{"aria-hidden":"true",className:i(a[r],"w-(--n-cell)")}),A=t=>e("span",{className:i("flex items-center text-(--neba-muted-fg)","[transition:rotate_var(--neba-duration)_var(--neba-ease)]",t&&"rotate-180"),children:e(l,{})}),j=e(o,{variant:"text",size:r,color:d,density:"compact","aria-describedby":`${y}-month`,"aria-expanded":"month"===u,onClick:()=>w("month"===u?"day":"month"),endIcon:A("month"===u),children:D},"month"),Y=e(o,{variant:"text",size:r,color:d,density:"compact",className:"tabular-nums","aria-describedby":`${y}-year`,"aria-expanded":"year"===u,onClick:()=>w("year"===u?"day":"year"),endIcon:A("year"===u),children:N},"year");return t("div",{className:"flex items-center justify-between gap-1",children:[e("span",{id:y,className:m,"aria-live":"polite",children:"day"===u?F(g,{year:"numeric",month:"long"}).format(h):"month"===u?N:C}),e("span",{id:`${y}-month`,hidden:!0,children:f.chooseMonth}),e("span",{id:`${y}-year`,hidden:!0,children:f.chooseYear}),P(-1,b),e("div",{className:i("flex min-w-0 flex-1 items-center justify-center",c[r]),children:"year"===u?e("span",{className:i("flex items-center font-medium tabular-nums text-(--neba-fg)",a[r],s[r]),children:C}):"month"===u?Y:t(n,S?{children:[j,Y]}:{children:[Y,j]})}),P(1,p)]})}const q={day:0,month:1,year:2};export function Calendar({size:n,color:o,locale:l,weekStartsOn:a,month:s,onMonthChange:d,selected:u,rangeStart:m=null,rangeEnd:h=null,onSelect:g,granularity:p="day",renderDay:y,onPreviewChange:x,minDate:w,maxDate:N,shouldDisableDate:C,showOutsideDays:k=!0,autoFocus:j=!1,multiselectable:Y=!1,showPreviousButton:E=!0,showNextButton:F=!0,labels:T,className:H}){const R=r.useId(),[K,G]=r.useState(p),O=q[K]<q[p]?p:K,U=r.useMemo(()=>u.filter(S),[u]),[L,$]=r.useState(()=>{const e=U.find(e=>D(e,s));return e?z(e):D(A(),s)?A():P(s)}),_=r.useRef(j),V=r.useRef(null);r.useEffect(()=>{$(e=>D(e,s)?e:P(s))},[s]),r.useLayoutEffect(()=>{_.current&&(_.current=!1,V.current?.querySelector('[data-focus-target="true"]')?.focus({preventScroll:!0}))});const J=r.useCallback(e=>v(e,w,N)||(C?.(e)??!1),[w,N,C]),Q=e=>{_.current=!0,G(e)},W=e=>{_.current=!0,d(e)};return t("div",{ref:V,className:i("flex flex-col",c[n],H),style:{"--n-cell":I[n]},onPointerLeave:()=>x?.(null),children:[e(Header,{size:n,color:o,view:O,month:s,locale:l,labels:T,showPreviousButton:E,showNextButton:F,captionId:R,onStep:e=>{d("day"===O?f(s,e):b(s,"month"===O?e:e*B))},onViewChange:Q}),e("div",{className:"h-[calc(var(--n-cell)*7)] w-[calc(var(--n-cell)*7)]",children:"day"===O?e(DayGrid,{labelledBy:R,multiselectable:Y&&"day"===p,size:n,locale:l,weekStartsOn:a,month:s,chosen:U,rangeStart:m,rangeEnd:h,focusedDate:L,renderDay:y,showOutsideDays:k,isDisabled:J,onSelect:e=>{$(e),g(e)},onPreviewChange:x,onMoveFocus:e=>{_.current=!0,$(e),D(e,s)||d(P(e))}}):"month"===O?e(MonthGrid,{labelledBy:R,multiselectable:Y&&"month"===p,size:n,locale:l,month:s,chosen:U,minDate:w,maxDate:N,shouldDisable:"month"===p?C:void 0,onMoveCursor:W,onPick:e=>{const t=M(s.getFullYear(),e,1);d(t),"month"===p?g(t):($(e=>D(e,t)?e:t),Q("day"))}}):e(YearGrid,{labelledBy:R,multiselectable:Y&&"year"===p,size:n,month:s,chosen:U,minDate:w,maxDate:N,shouldDisable:"year"===p?C:void 0,onMoveCursor:W,onPick:e=>{if("year"===p){const t=M(e,0,1);return d(t),void g(t)}d(M(e,s.getMonth(),1)),Q("month")}})})]})}function L(e){return"rtl"===getComputedStyle(e).direction}function DayGrid({labelledBy:n,multiselectable:r,size:o,locale:l,weekStartsOn:a,month:c,chosen:u,rangeStart:m,rangeEnd:h,focusedDate:b,renderDay:v,showOutsideDays:x,isDisabled:N,onSelect:M,onPreviewChange:C,onMoveFocus:k}){const z=p(c,a),P=j(l,a,"short"),Y=j(l,a,"long"),B=F(l,{dateStyle:"full"}),E=(H=h,S(T=m)&&S(H)?y(T,H)<=0?[T,H]:[H,T]:null);var T,H;const I=R()?A():null;return t("div",{role:"grid","aria-labelledby":n,"aria-multiselectable":r||void 0,className:"flex h-full flex-col",children:[e("div",{role:"row",className:"grid grid-cols-7",children:P.map((t,n)=>e("span",{role:"columnheader","aria-label":Y[n],className:i("flex h-(--n-cell) items-center justify-center font-medium text-(--neba-muted-fg) select-none",d[o]),children:t},n))}),z.map((n,r)=>e("div",{role:"row",className:"grid grid-cols-7",children:n.map(n=>{const r=!D(n,c);if(r&&!x)return e("span",{role:"gridcell","aria-hidden":"true",className:"size-(--n-cell)"},n.getTime());const l=u.some(e=>w(e,n)),d=null!==E&&y(n,E[0])>=0&&y(n,E[1])<=0,m=null!==E&&d&&w(n,E[0]),h=null!==E&&d&&w(n,E[1]);return t(Cell,{size:o,label:B.format(n),selected:l,inRange:d&&!l,rangeEdge:d?m&&h?"both":m?"start":h?"end":"middle":null,current:null!==I&&w(n,I)&&!l,muted:r,disabled:N(n),focused:w(n,b),className:i("size-(--n-cell)",s[o]),onClick:()=>M(n),onPointerEnter:()=>C?.(n),onKeyDown:e=>((e,t)=>{const n=(t.getDay()-a+7)%7,r=L(e.currentTarget)?-1:1,o={ArrowLeft:()=>g(t,-r),ArrowRight:()=>g(t,r),ArrowUp:()=>g(t,-7),ArrowDown:()=>g(t,7),Home:()=>g(t,-n),End:()=>g(t,6-n),PageUp:()=>f(t,e.shiftKey?-12:-1),PageDown:()=>f(t,e.shiftKey?12:1)}[e.key];o&&(e.preventDefault(),k(o()))})(e,n),children:[n.getDate(),v?v(n):null]},n.getTime())})},r))]})}function MonthGrid({labelledBy:t,multiselectable:n,size:r,locale:o,month:l,chosen:a,minDate:c,maxDate:d,shouldDisable:u,onMoveCursor:m,onPick:h}){const g=k(o,"short"),b=F(o,{year:"numeric",month:"long"}),p=l.getFullYear(),y=R()?new Date:null,v=e=>{const t=L(e.currentTarget)?-1:1,n={ArrowLeft:-t,ArrowRight:t,ArrowUp:-3,ArrowDown:3,PageUp:-12,PageDown:12}[e.key];void 0!==n&&(e.preventDefault(),m(f(P(l),n)))};return e("div",{role:"grid","aria-labelledby":t,"aria-multiselectable":n||void 0,className:"flex h-full flex-col justify-evenly",children:[0,1,2,3].map(t=>e("div",{role:"row",className:"grid grid-cols-3 gap-1",children:[0,1,2].map(n=>{const o=3*t+n,m=M(p,o,1);return e(Cell,{size:r,label:b.format(m),selected:a.some(e=>e.getFullYear()===p&&e.getMonth()===o),current:null!==y&&y.getFullYear()===p&&y.getMonth()===o,disabled:N(m,"month",c,d)||(u?.(m)??!1),focused:o===l.getMonth(),className:i("h-(--n-cell) w-full",s[r]),onClick:()=>h(o),onKeyDown:v,children:g[o]},o)})},t))})}function YearGrid({labelledBy:t,multiselectable:n,size:r,month:o,chosen:l,minDate:a,maxDate:c,shouldDisable:d,onMoveCursor:u,onPick:m}){const h=E(o.getFullYear()),g=R()?(new Date).getFullYear():null,f=e=>{const t=L(e.currentTarget)?-1:1,n={ArrowLeft:-t,ArrowRight:t,ArrowUp:-4,ArrowDown:4,PageUp:-B,PageDown:B}[e.key];void 0!==n&&(e.preventDefault(),u(b(P(o),n)))};return e("div",{role:"grid","aria-labelledby":t,"aria-multiselectable":n||void 0,className:"flex h-full flex-col justify-evenly",children:[0,1,2].map(t=>e("div",{role:"row",className:"grid grid-cols-4 gap-1",children:[0,1,2,3].map(n=>{const u=h+4*t+n,b=M(u,0,1);return e(Cell,{size:r,label:String(u),selected:l.some(e=>e.getFullYear()===u),current:u===g,disabled:N(b,"year",a,c)||(d?.(b)??!1),focused:u===o.getFullYear(),className:i("h-(--n-cell) w-full",s[r]),onClick:()=>m(u),onKeyDown:f,children:u},u)})},t))})}function $(e){const t=e.parentElement;if(!t)return;const n=e.getBoundingClientRect(),r=t.getBoundingClientRect(),o=n.top-r.top-t.clientTop+t.scrollTop,l=o+n.height;o<t.scrollTop?t.scrollTop=o:l>t.scrollTop+t.clientHeight&&(t.scrollTop=l-t.clientHeight)}export function TimeGrid({size:n,density:o,locale:l,value:c,referenceDate:d,onChange:u,hour12:h,showSeconds:g,hourStep:f,minuteStep:b,secondStep:p,shouldDisableTime:y,autoFocus:v=!1,labels:x,className:w}){const D=c??d,N=r.useRef(null),[S,M]=r.useMemo(()=>C(l),[l]);r.useEffect(()=>{const e=N.current;if(e?.querySelectorAll('[data-chosen="true"]').forEach($),v){const t=e?.querySelector('[role="listbox"]');(t?.querySelector('[data-chosen="true"]')??t?.querySelector('[role="option"]'))?.focus({preventScroll:!0})}},[v]);const k=r.useMemo(()=>{const e=Math.ceil((h?12:24)/f),t=Array.from({length:e},(e,t)=>t*f);return h?t.map(e=>0===e?12:e):t},[h,f]),z=r.useMemo(()=>Array.from({length:Math.ceil(60/b)},(e,t)=>t*b),[b]),P=r.useMemo(()=>Array.from({length:Math.ceil(60/p)},(e,t)=>t*p),[p]),A=e=>String(e).padStart(2,"0"),j=h?D.getHours()%12||12:D.getHours(),B=e=>{const t=Array.from(e.currentTarget.querySelectorAll('[role="option"]')),n=t.indexOf(e.target);if(n<0)return;const r="ArrowDown"===e.key?n+1:"ArrowUp"===e.key?n-1:"Home"===e.key?0:"End"===e.key?t.length-1:null;if(null===r)return;e.preventDefault();const o=t[Math.min(t.length-1,Math.max(0,r))];o.focus({preventScroll:!0}),$(o)},E=(t,r,o,l,d)=>{const m=Math.max(0,null===c?0:o.findIndex(l));return e("div",{role:"listbox","aria-label":r,onKeyDown:B,className:i("flex flex-col gap-0.5 overflow-y-auto overscroll-contain","h-[calc(var(--n-cell)*7)] w-[calc(var(--n-cell)*2)]","scroll-py-0.5 [scrollbar-width:thin]"),children:o.map((r,o)=>{const g=((e,t)=>Y(D,"hour"===e?{hours:h?t%12+(D.getHours()>=12?12:0):t}:"minute"===e?{minutes:t}:"second"===e?{seconds:t}:{hours:D.getHours()%12+12*t}))(t,r),f=null!==c&&l(r),b=y?.(g,t)??!1;return e("button",{type:"button",role:"option","aria-selected":f,"aria-disabled":b||void 0,"data-chosen":f?"true":void 0,tabIndex:o===m?0:-1,className:i(U,K[n],a[n],s[n],"w-full shrink-0",b?"cursor-not-allowed text-(--neba-disabled-fg)":f?"cursor-pointer bg-(--n-fill) font-semibold text-(--n-on-solid) hover:bg-(--n-fill-hover) active:bg-(--n-fill-active)":"cursor-pointer text-(--neba-fg) hover:bg-(--n-soft) active:bg-(--n-soft-press)"),onClick:()=>{b||u(g)},children:d(r)},r)})},t)};return t("div",{ref:N,className:i("flex","compact"===o?"gap-0.5":"gap-1",w),style:{"--n-cell":I[n]},children:[E("hour",x.hour,k,e=>e===j,e=>h?String(e):A(e)),E("minute",x.minute,z,e=>e===D.getMinutes(),A),g?E("second",x.second,P,e=>e===D.getSeconds(),A):null,h?E("meridiem",x.meridiem,[0,1],e=>(D.getHours()>=12?1:0)===e,e=>0===e?S:M):null,e("span",{className:m,"aria-live":"polite",children:null===c?"":F(l,{hour:"numeric",minute:"2-digit",...g?{second:"2-digit"}:{}}).format(c)})]})}
|
|
1
|
+
"use client";import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import*as r from"react";import{Button as o}from"../components/button/Button.js";import{ChevronIcon as l}from"./icons.js";import{controlHeightClasses as a,controlTextClasses as s,cx as i,gapClasses as c,metaTextClasses as d,pressTransitionClasses as u,srOnlyClasses as m,transitionClasses as h}from"./styles.js";import{addDays as f,addMonths as g,addYears as b,calendarWeeks as p,compareDay as y,isDayOutside as v,isMonthBeforeYear as x,isSameDay as w,isSameMonth as D,isUnitOutside as N,isValidDate as S,makeDate as M,meridiemLabels as C,monthLabels as k,startOfDay as z,startOfMonth as P,today as A,weekdayLabels as j,withTime as Y,YEAR_PAGE_SIZE as E,yearPageStart as B}from"./date.js";import{dateFormatter as F}from"./format.js";import{pickerMessages as T,useMessages as H}from"./i18n.js";import{useHydrated as R}from"./media.js";export function usePickerLabels(e,t){const n=H(T,t);return r.useMemo(()=>e?{...n,...e}:n,[n,e])}const I={xs:"1.375rem",sm:"1.625rem",md:"2rem",lg:"2.5rem",xl:"3rem"},K={xs:"rounded-(--neba-radius-xs)",sm:"rounded-(--neba-radius-xs)",md:"rounded-(--neba-radius-sm)",lg:"rounded-(--neba-radius-md)",xl:"rounded-(--neba-radius-lg)"},G={xs:"rounded-s-(--neba-radius-xs)",sm:"rounded-s-(--neba-radius-xs)",md:"rounded-s-(--neba-radius-sm)",lg:"rounded-s-(--neba-radius-md)",xl:"rounded-s-(--neba-radius-lg)"},O={xs:"rounded-e-(--neba-radius-xs)",sm:"rounded-e-(--neba-radius-xs)",md:"rounded-e-(--neba-radius-sm)",lg:"rounded-e-(--neba-radius-md)",xl:"rounded-e-(--neba-radius-lg)"},U=["neba-calendar-cell relative flex select-none items-center justify-center tabular-nums","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",h,u,"focus-visible:z-10 focus-visible:[outline:2px_solid_var(--n-ring)]","focus-visible:[outline-offset:-2px]"].join(" ");function Cell({children:n,label:r,selected:o,inRange:l=!1,rangeEdge:a=null,current:s=!1,muted:c=!1,disabled:d=!1,focused:u=!1,size:m,className:h,onClick:f,onPointerEnter:g,onKeyDown:b}){return t("button",{type:"button",role:"gridcell","aria-label":r,"aria-selected":o,"aria-current":s?"date":void 0,"aria-disabled":d||void 0,tabIndex:u?0:-1,"data-focus-target":u?"true":void 0,className:i(U,"start"===a?G[m]:"end"===a?O[m]:"middle"===a?"rounded-none":K[m],d?"cursor-not-allowed text-(--neba-disabled-fg)":o?"cursor-pointer bg-(--n-fill) font-semibold text-(--n-on-solid) hover:bg-(--n-fill-hover) active:bg-(--n-fill-active)":l?"cursor-pointer bg-(--n-soft) text-(--neba-fg) hover:bg-(--n-soft-hover) active:bg-(--n-soft-press)":s?"cursor-pointer font-semibold text-(--n-on-tint) hover:bg-(--n-soft) active:bg-(--n-soft-press)":c?"cursor-pointer text-(--neba-muted-fg) hover:bg-(--n-soft) active:bg-(--n-soft-press)":"cursor-pointer text-(--neba-fg) hover:bg-(--n-soft) active:bg-(--n-soft-press)",h),onClick:()=>{d||f()},onPointerEnter:g,onKeyDown:b,children:[n,s?e("span",{"aria-hidden":"true",className:"absolute bottom-[0.18em] size-[0.22em] rounded-full bg-current"}):null]})}function Header({size:r,color:d,view:u,month:h,locale:f,labels:g,showPreviousButton:b,showNextButton:p,captionId:y,onStep:v,onViewChange:w}){const D=k(f,"long")[h.getMonth()],N=String(h.getFullYear()),S=x(f),M=B(h.getFullYear()),C=`${M}–${M+E-1}`,z="day"===u?[g.previousMonth,g.nextMonth]:"month"===u?[g.previousYear,g.nextYear]:[g.previousYears,g.nextYears],P=(t,n)=>n?e(o,{variant:"text",size:r,color:d,density:"compact","aria-label":z[-1===t?0:1],onClick:()=>v(t),startIcon:e("span",{className:i("flex items-center",-1===t?"rotate-90 rtl:-rotate-90":"-rotate-90 rtl:rotate-90"),children:e(l,{})})}):e("span",{"aria-hidden":"true",className:i(a[r],"w-(--n-cell)")}),A=t=>e("span",{className:i("flex items-center text-(--neba-muted-fg)","[transition:rotate_var(--neba-duration)_var(--neba-ease)]",t&&"rotate-180"),children:e(l,{})}),j=e(o,{variant:"text",size:r,color:d,density:"compact","aria-describedby":`${y}-month`,"aria-expanded":"month"===u,onClick:()=>w("month"===u?"day":"month"),endIcon:A("month"===u),children:D},"month"),Y=e(o,{variant:"text",size:r,color:d,density:"compact",className:"tabular-nums","aria-describedby":`${y}-year`,"aria-expanded":"year"===u,onClick:()=>w("year"===u?"day":"year"),endIcon:A("year"===u),children:N},"year");return t("div",{className:"flex items-center justify-between gap-1",children:[e("span",{id:y,className:m,"aria-live":"polite",children:"day"===u?F(f,{year:"numeric",month:"long"}).format(h):"month"===u?N:C}),e("span",{id:`${y}-month`,hidden:!0,children:g.chooseMonth}),e("span",{id:`${y}-year`,hidden:!0,children:g.chooseYear}),P(-1,b),e("div",{className:i("flex min-w-0 flex-1 items-center justify-center",c[r]),children:"year"===u?e("span",{className:i("flex items-center font-medium tabular-nums text-(--neba-fg)",a[r],s[r]),children:C}):"month"===u?Y:t(n,S?{children:[j,Y]}:{children:[Y,j]})}),P(1,p)]})}const q={day:0,month:1,year:2};export function Calendar({size:n,color:o,locale:l,weekStartsOn:a,month:s,onMonthChange:d,selected:u,rangeStart:m=null,rangeEnd:h=null,onSelect:f,granularity:p="day",renderDay:y,onPreviewChange:x,minDate:N,maxDate:C,shouldDisableDate:k,showOutsideDays:j=!0,autoFocus:Y=!1,multiselectable:B=!1,showPreviousButton:F=!0,showNextButton:T=!0,labels:H,className:K}){const G=r.useId(),[O,U]=r.useState(p),L=q[O]<q[p]?p:O,$=r.useMemo(()=>u.filter(S),[u]),_=R(),[V,J]=r.useState(()=>{const e=$.find(e=>D(e,s));return e?z(e):_&&D(A(),s)?A():P(s)}),Q=r.useRef(!_);r.useEffect(()=>{_&&Q.current&&(Q.current=!1,J(e=>w(e,P(s))&&D(A(),s)&&!$.some(e=>D(e,s))?A():e))},[_]);const W=r.useRef(Y),X=r.useRef(null);r.useEffect(()=>{J(e=>D(e,s)?e:P(s))},[s]),r.useLayoutEffect(()=>{W.current&&(W.current=!1,X.current?.querySelector('[data-focus-target="true"]')?.focus({preventScroll:!0}))});const Z=r.useCallback(e=>v(e,N,C)||(k?.(e)??!1),[N,C,k]),ee=e=>{W.current=!0,U(e)},te=e=>{W.current=!0,d(e)};return t("div",{ref:X,className:i("flex flex-col",c[n],K),style:{"--n-cell":I[n]},onPointerLeave:()=>x?.(null),children:[e(Header,{size:n,color:o,view:L,month:s,locale:l,labels:H,showPreviousButton:F,showNextButton:T,captionId:G,onStep:e=>{d("day"===L?g(s,e):b(s,"month"===L?e:e*E))},onViewChange:ee}),e("div",{className:"h-[calc(var(--n-cell)*7)] w-[calc(var(--n-cell)*7)]",children:"day"===L?e(DayGrid,{labelledBy:G,multiselectable:B&&"day"===p,size:n,locale:l,weekStartsOn:a,month:s,chosen:$,rangeStart:m,rangeEnd:h,focusedDate:V,renderDay:y,showOutsideDays:j,isDisabled:Z,onSelect:e=>{J(e),f(e)},onPreviewChange:x,onMoveFocus:e=>{W.current=!0,J(e),D(e,s)||d(P(e))}}):"month"===L?e(MonthGrid,{labelledBy:G,multiselectable:B&&"month"===p,size:n,locale:l,month:s,chosen:$,minDate:N,maxDate:C,shouldDisable:"month"===p?k:void 0,onMoveCursor:te,onPick:e=>{const t=M(s.getFullYear(),e,1);d(t),"month"===p?f(t):(J(e=>D(e,t)?e:t),ee("day"))}}):e(YearGrid,{labelledBy:G,multiselectable:B&&"year"===p,size:n,month:s,chosen:$,minDate:N,maxDate:C,shouldDisable:"year"===p?k:void 0,onMoveCursor:te,onPick:e=>{if("year"===p){const t=M(e,0,1);return d(t),void f(t)}d(M(e,s.getMonth(),1)),ee("month")}})})]})}function L(e){return"rtl"===getComputedStyle(e).direction}function DayGrid({labelledBy:n,multiselectable:r,size:o,locale:l,weekStartsOn:a,month:c,chosen:u,rangeStart:m,rangeEnd:h,focusedDate:b,renderDay:v,showOutsideDays:x,isDisabled:N,onSelect:M,onPreviewChange:C,onMoveFocus:k}){const z=p(c,a),P=j(l,a,"short"),Y=j(l,a,"long"),E=F(l,{dateStyle:"full"}),B=(H=h,S(T=m)&&S(H)?y(T,H)<=0?[T,H]:[H,T]:null);var T,H;const I=R()?A():null;return t("div",{role:"grid","aria-labelledby":n,"aria-multiselectable":r||void 0,className:"flex h-full flex-col",children:[e("div",{role:"row",className:"grid grid-cols-7",children:P.map((t,n)=>e("span",{role:"columnheader","aria-label":Y[n],className:i("flex h-(--n-cell) items-center justify-center font-medium text-(--neba-muted-fg) select-none",d[o]),children:t},n))}),z.map((n,r)=>e("div",{role:"row",className:"grid grid-cols-7",children:n.map(n=>{const r=!D(n,c);if(r&&!x)return e("span",{role:"gridcell","aria-hidden":"true",className:"size-(--n-cell)"},n.getTime());const l=u.some(e=>w(e,n)),d=null!==B&&y(n,B[0])>=0&&y(n,B[1])<=0,m=null!==B&&d&&w(n,B[0]),h=null!==B&&d&&w(n,B[1]);return t(Cell,{size:o,label:E.format(n),selected:l,inRange:d&&!l,rangeEdge:d?m&&h?"both":m?"start":h?"end":"middle":null,current:null!==I&&w(n,I),muted:r,disabled:N(n),focused:w(n,b),className:i("size-(--n-cell)",s[o]),onClick:()=>M(n),onPointerEnter:()=>C?.(n),onKeyDown:e=>((e,t)=>{const n=(t.getDay()-a+7)%7,r=L(e.currentTarget)?-1:1,o={ArrowLeft:()=>f(t,-r),ArrowRight:()=>f(t,r),ArrowUp:()=>f(t,-7),ArrowDown:()=>f(t,7),Home:()=>f(t,-n),End:()=>f(t,6-n),PageUp:()=>g(t,e.shiftKey?-12:-1),PageDown:()=>g(t,e.shiftKey?12:1)}[e.key];o&&(e.preventDefault(),k(o()))})(e,n),children:[n.getDate(),v?v(n):null]},n.getTime())})},r))]})}function MonthGrid({labelledBy:t,multiselectable:n,size:r,locale:o,month:l,chosen:a,minDate:c,maxDate:d,shouldDisable:u,onMoveCursor:m,onPick:h}){const f=k(o,"short"),b=F(o,{year:"numeric",month:"long"}),p=l.getFullYear(),y=R()?new Date:null,v=e=>{const t=L(e.currentTarget)?-1:1,n={ArrowLeft:-t,ArrowRight:t,ArrowUp:-3,ArrowDown:3,PageUp:-12,PageDown:12}[e.key];void 0!==n&&(e.preventDefault(),m(g(P(l),n)))};return e("div",{role:"grid","aria-labelledby":t,"aria-multiselectable":n||void 0,className:"flex h-full flex-col justify-evenly",children:[0,1,2,3].map(t=>e("div",{role:"row",className:"grid grid-cols-3 gap-1",children:[0,1,2].map(n=>{const o=3*t+n,m=M(p,o,1);return e(Cell,{size:r,label:b.format(m),selected:a.some(e=>e.getFullYear()===p&&e.getMonth()===o),current:null!==y&&y.getFullYear()===p&&y.getMonth()===o,disabled:N(m,"month",c,d)||(u?.(m)??!1),focused:o===l.getMonth(),className:i("h-(--n-cell) w-full",s[r]),onClick:()=>h(o),onKeyDown:v,children:f[o]},o)})},t))})}function YearGrid({labelledBy:t,multiselectable:n,size:r,month:o,chosen:l,minDate:a,maxDate:c,shouldDisable:d,onMoveCursor:u,onPick:m}){const h=B(o.getFullYear()),f=R()?(new Date).getFullYear():null,g=e=>{const t=L(e.currentTarget)?-1:1,n={ArrowLeft:-t,ArrowRight:t,ArrowUp:-4,ArrowDown:4,PageUp:-E,PageDown:E}[e.key];void 0!==n&&(e.preventDefault(),u(b(P(o),n)))};return e("div",{role:"grid","aria-labelledby":t,"aria-multiselectable":n||void 0,className:"flex h-full flex-col justify-evenly",children:[0,1,2].map(t=>e("div",{role:"row",className:"grid grid-cols-4 gap-1",children:[0,1,2,3].map(n=>{const u=h+4*t+n,b=M(u,0,1);return e(Cell,{size:r,label:String(u),selected:l.some(e=>e.getFullYear()===u),current:u===f,disabled:N(b,"year",a,c)||(d?.(b)??!1),focused:u===o.getFullYear(),className:i("h-(--n-cell) w-full",s[r]),onClick:()=>m(u),onKeyDown:g,children:u},u)})},t))})}function $(e){const t=e.parentElement;if(!t)return;const n=e.getBoundingClientRect(),r=t.getBoundingClientRect(),o=n.top-r.top-t.clientTop+t.scrollTop,l=o+n.height;o<t.scrollTop?t.scrollTop=o:l>t.scrollTop+t.clientHeight&&(t.scrollTop=l-t.clientHeight)}export function TimeGrid({size:n,density:o,locale:l,value:c,referenceDate:d,onChange:u,hour12:h,showSeconds:f,hourStep:g,minuteStep:b,secondStep:p,shouldDisableTime:y,autoFocus:v=!1,labels:x,className:w}){const D=c??d,N=r.useRef(null),[S,M]=r.useMemo(()=>C(l),[l]);r.useEffect(()=>{const e=N.current;if(e?.querySelectorAll('[data-chosen="true"]').forEach($),v){const t=e?.querySelector('[role="listbox"]');(t?.querySelector('[data-chosen="true"]')??t?.querySelector('[role="option"]'))?.focus({preventScroll:!0})}},[v]);const k=r.useMemo(()=>{const e=Math.ceil((h?12:24)/g),t=Array.from({length:e},(e,t)=>t*g);return h?t.map(e=>0===e?12:e):t},[h,g]),z=r.useMemo(()=>Array.from({length:Math.ceil(60/b)},(e,t)=>t*b),[b]),P=r.useMemo(()=>Array.from({length:Math.ceil(60/p)},(e,t)=>t*p),[p]),A=e=>String(e).padStart(2,"0"),j=h?D.getHours()%12||12:D.getHours(),E=e=>{const t=Array.from(e.currentTarget.querySelectorAll('[role="option"]')),n=t.indexOf(e.target);if(n<0)return;const r="ArrowDown"===e.key?n+1:"ArrowUp"===e.key?n-1:"Home"===e.key?0:"End"===e.key?t.length-1:null;if(null===r)return;e.preventDefault();const o=t[Math.min(t.length-1,Math.max(0,r))];o.focus({preventScroll:!0}),$(o)},B=(t,r,o,l,d)=>{const m=Math.max(0,null===c?0:o.findIndex(l));return e("div",{role:"listbox","aria-label":r,onKeyDown:E,className:i("flex flex-col gap-0.5 overflow-y-auto overscroll-contain","h-[calc(var(--n-cell)*7)] w-[calc(var(--n-cell)*2)]","scroll-py-0.5 [scrollbar-width:thin]"),children:o.map((r,o)=>{const f=((e,t)=>Y(D,"hour"===e?{hours:h?t%12+(D.getHours()>=12?12:0):t}:"minute"===e?{minutes:t}:"second"===e?{seconds:t}:{hours:D.getHours()%12+12*t}))(t,r),g=null!==c&&l(r),b=y?.(f,t)??!1;return e("button",{type:"button",role:"option","aria-selected":g,"aria-disabled":b||void 0,"data-chosen":g?"true":void 0,tabIndex:o===m?0:-1,className:i(U,K[n],a[n],s[n],"w-full shrink-0",b?"cursor-not-allowed text-(--neba-disabled-fg)":g?"cursor-pointer bg-(--n-fill) font-semibold text-(--n-on-solid) hover:bg-(--n-fill-hover) active:bg-(--n-fill-active)":"cursor-pointer text-(--neba-fg) hover:bg-(--n-soft) active:bg-(--n-soft-press)"),onClick:()=>{b||u(f)},children:d(r)},r)})},t)};return t("div",{ref:N,className:i("flex","compact"===o?"gap-0.5":"gap-1",w),style:{"--n-cell":I[n]},children:[B("hour",x.hour,k,e=>e===j,e=>h?String(e):A(e)),B("minute",x.minute,z,e=>e===D.getMinutes(),A),f?B("second",x.second,P,e=>e===D.getSeconds(),A):null,h?B("meridiem",x.meridiem,[0,1],e=>(D.getHours()>=12?1:0)===e,e=>0===e?S:M):null,e("span",{className:m,"aria-live":"polite",children:null===c?"":F(l,{hour:"numeric",minute:"2-digit",...f?{second:"2-digit"}:{}}).format(c)})]})}
|
|
@@ -29,6 +29,8 @@ export interface BrushProps {
|
|
|
29
29
|
start: string;
|
|
30
30
|
end: string;
|
|
31
31
|
};
|
|
32
|
+
/** The chart's own name, which the strip is a group under. */
|
|
33
|
+
label: string;
|
|
32
34
|
/** What the two handles say they are on, read out with their positions. */
|
|
33
35
|
categories: readonly NebaChartCategory[];
|
|
34
36
|
locale?: string;
|
|
@@ -50,4 +52,4 @@ export interface BrushProps {
|
|
|
50
52
|
* reachable by pointer alone, which on the one control that decides what the
|
|
51
53
|
* chart shows is not a control at all.
|
|
52
54
|
*/
|
|
53
|
-
export declare function ChartBrush({ outline, count, range, onRange, color, height, words, categories, locale, width }: BrushProps): React.JSX.Element;
|
|
55
|
+
export declare function ChartBrush({ outline, count, range, onRange, color, height, words, label, categories, locale, width }: BrushProps): React.JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as t,jsxs as e}from"react/jsx-runtime";import*as n from"react";import{formatCategory as r,linePath as
|
|
1
|
+
"use client";import{jsx as t,jsxs as e}from"react/jsx-runtime";import*as n from"react";import{formatCategory as r,linePath as a}from"./chart.js";import{beginPointerDrag as o}from"./drag.js";import{cx as i,hitAreaClasses as s}from"./styles.js";export function ChartBrush({outline:l,count:u,range:c,onRange:h,color:m,height:d,words:f,label:x,categories:g,locale:w,width:M}){const p=n.useRef(null),b=n.useRef(null);n.useEffect(()=>()=>b.current?.(),[]);const y=Math.max(0,u-1),[v,k]=c,D=n.useRef([v,k]);n.useEffect(()=>{D.current=[v,k]});const R=t=>0===y?0:t/y,_=n.useMemo(()=>{let t=1/0,e=-1/0;for(const n of l)null!==n&&(t=Math.min(t,n),e=Math.max(e,n));if(M<=0||t>e)return"";const n=e-t||1,r=Math.max(1,d-4);return a(l.map((e,a)=>null===e?null:{x:R(a)*M,y:2+(1-(e-t)/n)*r}),"linear")},[l,M,d,y]),j=t=>{const e=p.current;if(!e)return 0;const n=e.getBoundingClientRect(),r=0===n.width?0:(t-n.left)/n.width;return Math.min(y,Math.max(0,Math.round(r*y)))},A=(t,e,n)=>{let r;if("start"===t)r=[Math.min(e,k-1),k];else if("end"===t)r=[v,Math.max(e,v+1)];else{const t=k-v,a=Math.min(Math.max(0,e-n),y-t);r=[a,a+t]}const a=Math.min(y,Math.max(0,r[0])),o=Math.min(y,Math.max(a,r[1])),[i,s]=D.current;a===i&&o===s||(D.current=[a,o],h([a,o]))};function E(t,e){const n=j(e.clientX),r="window"===t?n-v:0;e.preventDefault(),b.current?.(),b.current=o({target:e.currentTarget,pointerId:e.pointerId,onMove:e=>A(t,j(e.clientX),r),onEnd:()=>{b.current=null}})}const N=e=>{const n="start"===e?v:k;return t("button",{type:"button",role:"slider","aria-label":"start"===e?f.start:f.end,"aria-valuemin":0,"aria-valuemax":y,"aria-valuenow":n,"aria-valuetext":r(g[n]??n,w),onPointerDown:t=>E(e,t),onKeyDown:t=>function(t,e){const n=Math.max(1,Math.round(u/10)),r="ArrowLeft"===e.key||"ArrowDown"===e.key?-1:"ArrowRight"===e.key||"ArrowUp"===e.key?1:"PageDown"===e.key?-n:"PageUp"===e.key?n:0;if(0!==r)A(t,Math.min(y,Math.max(0,("end"===t?k:v)+r)),0);else if("Home"===e.key)A(t,0,0);else{if("End"!==e.key)return;A(t,y,0)}e.preventDefault()}(e,t),className:i("absolute inset-y-0 w-2 -translate-x-1/2 cursor-ew-resize rounded-full",s,"bg-(--n-accent) [touch-action:none]","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-1"),style:{left:100*R(n)+"%"}})};return e("div",{ref:p,role:"group","aria-label":x,className:"absolute inset-x-0 bottom-0 select-none",style:{height:d},children:[e("svg",{width:"100%",height:d,viewBox:`0 0 ${Math.max(1,M)} ${d}`,preserveAspectRatio:"none","aria-hidden":"true",className:"absolute inset-0 block",children:[t("rect",{x:0,y:0,width:Math.max(1,M),height:d,rx:3,fill:"var(--neba-chart-grid)"}),_?t("path",{d:_,fill:"none",stroke:m,strokeWidth:1,opacity:.6}):null]}),t("div",{onPointerDown:t=>E("window",t),className:i("absolute inset-y-0 cursor-grab rounded-[3px] [touch-action:none]","bg-(--n-soft) [box-shadow:inset_0_0_0_1px_var(--n-accent)]","data-[dragging]:cursor-grabbing"),style:{left:100*R(v)+"%",width:100*(R(k)-R(v))+"%"}}),N("start"),N("end")]})}
|
|
@@ -73,7 +73,7 @@ declare function chartHeight(height: number | string | undefined, size: NebaSize
|
|
|
73
73
|
* the bar, the scatter and the timeline snapped, and a dashboard holding two of
|
|
74
74
|
* each showed both answers at once.
|
|
75
75
|
*/
|
|
76
|
-
export declare const markTransitionClasses:
|
|
76
|
+
export declare const markTransitionClasses = "[transition:opacity_var(--neba-duration)_var(--neba-ease),r_var(--neba-duration)_var(--neba-ease),scale_var(--neba-duration)_var(--neba-ease)]";
|
|
77
77
|
export interface ChartBaseProps extends Omit<BoxProps, 'children' | 'title'> {
|
|
78
78
|
/**
|
|
79
79
|
* How tall the drawing is. A number is pixels; a string is any CSS length.
|
|
@@ -333,12 +333,22 @@ declare function ChartTooltipPanel({ heading, items, x, y, flip, size }: Tooltip
|
|
|
333
333
|
* where a reader who wants the numbers can walk it. `hidden` keeps it out of the
|
|
334
334
|
* reading order: a description is computed from a hidden element all the same.
|
|
335
335
|
*/
|
|
336
|
-
declare function ChartSummary({ id, template, count, min, max, locale }: {
|
|
336
|
+
declare function ChartSummary({ id, template, count, min, max, second, locale }: {
|
|
337
337
|
id: string;
|
|
338
338
|
template: string;
|
|
339
339
|
count: number;
|
|
340
340
|
min: string;
|
|
341
341
|
max: string;
|
|
342
|
+
/**
|
|
343
|
+
* The series on a second value axis, said in a sentence of their own and
|
|
344
|
+
* in that axis' format, since one range across two units is not a range.
|
|
345
|
+
*/
|
|
346
|
+
second?: {
|
|
347
|
+
template: string;
|
|
348
|
+
count: number;
|
|
349
|
+
min: string;
|
|
350
|
+
max: string;
|
|
351
|
+
} | null;
|
|
342
352
|
locale?: string;
|
|
343
353
|
}): React.JSX.Element;
|
|
344
354
|
/** The count and extremes of every non-`null` value in the rows still shown. */
|
|
@@ -509,6 +519,13 @@ export interface CartesianLayout {
|
|
|
509
519
|
zeroPxOf: (series?: number) => number;
|
|
510
520
|
categories: readonly NebaChartCategory[];
|
|
511
521
|
format: (value: number) => string;
|
|
522
|
+
/**
|
|
523
|
+
* How a given series' numbers are written: through `secondaryAxis.tickFormat`
|
|
524
|
+
* when the series is measured on the far edge, and `format` otherwise. A
|
|
525
|
+
* value label reads this rather than `format`, or a rate on the far edge is
|
|
526
|
+
* printed in the first axis' currency.
|
|
527
|
+
*/
|
|
528
|
+
formatFor: (series: number) => (value: number) => string;
|
|
512
529
|
size: NebaSize;
|
|
513
530
|
}
|
|
514
531
|
/** The layout, plus everything the pointer decides. */
|
|
@@ -550,6 +567,15 @@ interface CartesianProps extends CartesianChartProps {
|
|
|
550
567
|
* than building a formatter that a pointer moving over the picture rebuilds.
|
|
551
568
|
*/
|
|
552
569
|
table?: (id: string, format: (value: number) => string) => React.ReactNode;
|
|
570
|
+
/**
|
|
571
|
+
* The rows the export button writes, for the same charts `table` is for.
|
|
572
|
+
*
|
|
573
|
+
* Left out, the file is the frame's grid of categories against series, which
|
|
574
|
+
* is a scatter's points filed against the wrong x and a timeline's rows as
|
|
575
|
+
* the number one. A chart with a table of its own hands its rows over here
|
|
576
|
+
* too, so the file and the table cannot disagree.
|
|
577
|
+
*/
|
|
578
|
+
exportRows?: () => readonly (readonly unknown[])[];
|
|
553
579
|
/**
|
|
554
580
|
* What the plot's one-sentence description counts, for a chart whose drawn
|
|
555
581
|
* values are not its series' values — a timeline's spans. Left out, it is
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,Fragment as t,jsxs as n}from"react/jsx-runtime";import{useStyleDefaults as a}from"./defaults.js";import*as l from"react";import{Box as r}from"../components/box/Box.js";import{bandScale as i,categoryAt as o,categoryCount as s,categoryExtent as c,chartFontSizes as u,compactNumber as d,extentOf as h,fitsLast as m,formatCategory as f,markerRadii as x,plotHeights as g,resolveColor as p,seriesColor as v,showsTick as b,textWidth as y,tickStride as k,toFullShares as M,toValues as w,truncate as C,turnedAxis as S,valueScale as N,warnPaletteOverflow as z}from"./chart.js";import{numberFormatter as A}from"./format.js";import{observeResize as P}from"./observe.js";import{chartMessages as j,emptyMessages as B,fillMessage as T,useMessages as E}from"./i18n.js";import{cx as $,hasContent as F,metaTextClasses as R,srOnlyClasses as W,transitionClasses as _}from"./styles.js";const L="undefined"==typeof document?l.useEffect:l.useLayoutEffect,D=[];function I(e){const[t,n]=l.useState(0);return L(()=>{const t=e.current;if(!t)return;const a=()=>n(t.clientWidth);return a(),P(t,a)},[e]),t}function H(e,t){const[n,a]=l.useState(0);return L(()=>{const n=e.current;if(!t||!n)return;const l=()=>a(n.clientHeight);return l(),P(n,l)},[e,t]),n}function V(e,t,n){return"number"==typeof e?e:void 0===e?g[t]:n}export const markTransitionClasses=["[transition:opacity_var(--neba-duration)_var(--neba-ease),","r_var(--neba-duration)_var(--neba-ease),","scale_var(--neba-duration)_var(--neba-ease)]"].join("");function O(e){const[t,n]=l.useState(()=>new Map),[a,r]=l.useState(null),i=function(e){const t=new Map;return e.map((e,n)=>{if(void 0===e.name)return`index:${n}`;const a=t.get(e.name)??0;return t.set(e.name,a+1),`name:${a}:${e.name}`})}(e),o=l.useRef({series:e,keys:i});l.useEffect(()=>{o.current={series:e,keys:i}});const s=l.useCallback(e=>{const{series:t,keys:a}=o.current,l=a[e];void 0!==l&&n(n=>{const a=new Map(n);return a.set(l,!(n.get(l)??!t[e]?.hidden)),a})},[]);return{visible:e.map((e,n)=>t.get(i[n])??!e.hidden),hovered:a,toggle:s,setHovered:r}}const Z={top:"flex-col-reverse",bottom:"flex-col",left:"flex-row-reverse",right:"flex-row"},X={start:"justify-start",center:"justify-center",end:"justify-end"};function Y(e,t,n){const a=l.useRef(n);l.useEffect(()=>{a.current=n}),l.useEffect(()=>{if(!t)return;const n=t=>{const n=e.current;n&&t.target instanceof Node&&!n.contains(t.target)&&a.current()};return document.addEventListener("pointerdown",n,!0),()=>document.removeEventListener("pointerdown",n,!0)},[e,t])}function ChartLegendBar({series:a,colors:l,options:r,visibility:i,size:o,values:s,swatch:c}){const u=!1!==r.interactive,d="left"===r.side||"right"===r.side;return e("ul",{className:$("flex list-none flex-wrap items-center gap-x-3 gap-y-1 p-0",d?"min-w-0 flex-col items-start":"",X[r.align??"center"],R[o]),children:a.map((a,r)=>{const o=i.visible[r],d=null!==i.hovered&&i.hovered!==r,h=a.name??`${r+1}`,m=l[r],f=n(t,{children:[e("span",c?{"aria-hidden":"true",className:"flex size-2.5 shrink-0 items-center justify-center",children:c(r,m)}:{"aria-hidden":"true",className:`size-2.5 shrink-0 rounded-[0.1875rem] ${_}`,style:{backgroundColor:m}}),e("span",{className:"min-w-0 truncate",children:h}),s?.[r]?e("span",{className:"shrink-0 tabular-nums text-(--neba-muted-fg)",children:s[r]}):null]});return e("li",{className:"min-w-0",children:u?e("button",{type:"button","aria-pressed":o,onClick:()=>i.toggle(r),onPointerEnter:()=>i.setHovered(r),onPointerLeave:()=>i.setHovered(null),onFocus:()=>i.setHovered(r),onBlur:()=>i.setHovered(null),className:$("flex min-w-0 cursor-pointer items-center gap-1.5 rounded-(--neba-radius-xs)","px-1 py-0.5 text-(--neba-fg)","[transition-property:background-color,color,opacity]","[transition-duration:var(--neba-duration)]","[transition-timing-function:var(--neba-ease)]","hover:bg-(--n-soft)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-1",o?d?"opacity-55":"":"opacity-40"),children:f}):e("span",{className:$("flex min-w-0 items-center gap-1.5 px-1 py-0.5 text-(--neba-fg)",o?"":"opacity-40"),children:f})},a.name??r)})})}function ChartScaleLegend({steps:a,from:l,to:r,middle:i,align:o,vertical:s,size:c}){return e("div",{className:$("flex",s?"":X[o]),children:n("div",{className:$("grid grid-cols-[auto_auto_auto] items-center gap-x-2",R[c]),children:[e("span",{className:"shrink-0 tabular-nums text-(--neba-muted-fg)",children:l}),e("span",{"aria-hidden":"true",className:$("flex h-2.5 overflow-hidden rounded-[0.1875rem]",s?"w-20":"w-24"),children:a.map(t=>e("span",{className:"h-full flex-1",style:{backgroundColor:t}},t))}),e("span",{className:"shrink-0 tabular-nums text-(--neba-muted-fg)",children:r}),i?n(t,{children:[e("span",{}),e("span",{className:"text-center tabular-nums text-(--neba-muted-fg)",children:i}),e("span",{})]}):null]})})}function ChartTooltipPanel({heading:t,items:a,x:l,y:r,flip:i,size:o}){return n("div",{"data-neba-tooltip":"",className:$("pointer-events-none absolute z-10 max-w-56 min-w-24","rounded-(--neba-radius-sm) border p-2","[background-image:var(--neba-grain),var(--neba-sheen)]","[background-blend-mode:overlay,normal] [backdrop-filter:var(--neba-blur)]","bg-(--neba-panel-press) [border-color:var(--n-line)]","[box-shadow:var(--neba-shadow-2),var(--neba-plate-glass)]",R[o]),style:i?{right:`calc(100% - ${l}px + 10px)`,top:r}:{left:l+10,top:r},children:[e("div",{className:"mb-1 font-medium text-(--neba-fg)",children:t}),e("ul",{className:"flex list-none flex-col gap-0.5 p-0",children:a.map(t=>n("li",{className:"flex items-center gap-1.5",children:[e("span",{"aria-hidden":"true",className:"size-2 shrink-0 rounded-[0.125rem]",style:{backgroundColor:t.color}}),t.name?e("span",{className:"min-w-0 flex-1 truncate text-(--neba-muted-fg)",children:t.name}):null,e("span",{className:"ms-auto shrink-0 font-medium tabular-nums text-(--neba-fg)",children:t.label??t.formatted})]},t.seriesIndex))})]})}function ChartSummary({id:t,template:n,count:a,min:l,max:r,locale:i}){return e("span",{id:t,hidden:!0,children:T(n,{count:A(i,{}).format(a),min:l,max:r})})}function q(e,t){let n=0,a=1/0,l=-1/0;for(const t of e)for(const e of t)null===e.value||Number.isNaN(e.value)||(n+=1,a=Math.min(a,e.value),l=Math.max(l,e.value));return 0===n?{count:n,min:"",max:""}:{count:n,min:t(a),max:t(l)}}function ChartStatus({heading:a,items:r}){return e("span",{role:"status","aria-live":"polite",className:W,children:0===r.length?null:n(t,{children:[F(a)?n(t,{children:[a,", "]}):null,r.map((e,t)=>n(l.Fragment,{children:[t>0?", ":null,e.name?`${e.name}: `:null,e.label??e.formatted]},e.seriesIndex))]})})}const J=/*@__PURE__*/l.memo(function ChartDataTable({id:t,caption:a,corner:l,categories:r,series:i,values:o,format:s,formatFor:c,locale:u}){return n("table",{id:t,className:W,children:[a?e("caption",{children:a}):null,e("thead",{children:n("tr",{children:[e("th",{scope:"col",children:l??""}),i.map((t,n)=>e("th",{scope:"col",children:t.name??n+1},t.name??n))]})}),e("tbody",{children:r.map((t,a)=>n("tr",{children:[e("th",{scope:"row",children:f(t,u)}),i.map((t,n)=>{const l=o[n]?.[a];return e("td",void 0!==l?.label?{children:l.label}:{children:null==l?.value?"":(c?.(n)??s)(l.value)},t.name??n)})]},a))})]})}),K=l.lazy(()=>import("./chart-brush.js").then(e=>({default:e.ChartBrush})));function ChartExport({rows:t,fileName:n,onExport:a,label:l}){return e("button",{type:"button","aria-label":l,title:l,onClick:async()=>{const{toCsv:e,downloadText:l}=await(import("./csv.js")),r=e(t());a?a(r):l(r,n,"text/csv;charset=utf-8")},className:$("absolute end-0 top-0 z-10 inline-flex size-6 cursor-pointer items-center justify-center","rounded-(--neba-radius-xs) text-(--neba-muted-fg)","hover:bg-(--n-soft) hover:text-(--neba-fg)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-1",_),children:e("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",className:"size-3.5",children:e("path",{d:"M12 3v12m0 0 4-4m-4 4-4-4M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2"})})})}function ChartSurface({legend:t,legendSide:a,children:l,table:i,className:o,...s}){return n(r,{...s,className:$("relative flex gap-3",Z[a],o??void 0),children:[e("div",{className:"relative min-w-0 flex-1",children:l}),t,i]})}function ChartReferences({references:t,plot:a,horizontal:l,valuePx:r,categoryPx:i,categoryScale:o,categoryValuePx:s,fontSize:c}){return e("g",{children:t.map((t,u)=>{const d="value"===(t.axis??"value"),h=e=>d?r(e):o?s(e):(l?a.top:a.left)+i(e),m=d?!l:l,f=h(t.value),x=void 0===t.to?null:h(t.to),g=null===x?f:Math.min(f,x),v=null===x?f:Math.max(f,x),b=t.color?p(t.color):"var(--neba-muted-fg)",y=t.solid?void 0:"4 4",k=t.label?e("text",{x:m?a.left+a.width-4:g+4,y:m?g-5:a.top+c,textAnchor:m?"end":"start",fontSize:c,fontWeight:500,fill:b,children:t.label}):null;return n("g",{children:[null===x?null:e("rect",{x:m?a.left:g,y:m?g:a.top,width:m?a.width:Math.max(0,v-g),height:m?Math.max(0,v-g):a.height,fill:`color-mix(in oklab, ${b} 12%, transparent)`}),(null===x?[f]:[g,v]).map((t,n)=>e("line",{x1:m?a.left:t,x2:m?a.left+a.width:t,y1:m?t:a.top,y2:m?t:a.top+a.height,stroke:b,strokeWidth:1,strokeDasharray:y},n)),k]},u)})})}export function CartesianChart(r){const{series:m,categories:g,xAxis:p,yAxis:b,secondaryAxis:k,brush:P,references:T,horizontal:F=!1,stacked:_=!1,stackedFull:L=!1,includeZero:Z=!0,bandRatio:X=1,inset:U=!1,headroom:G=0,markInset:Q=0,xScale:ee="band",marks:te,markRadius:ne=24,table:ae,summary:le,swatch:re,scale:ie,markTooltip:oe,height:se,format:ce,locale:ue,label:de,legend:he,tooltip:me,empty:fe,exportable:xe=!1,exportFileName:ge="chart.csv",onExport:pe,size:ve="md",variant:be="text",padded:ye=!1,className:ke,children:Me,...we}=a(r,["size","variant","locale"]),Ce=l.useRef(null),Se=I(Ce),Ne=E(B,ue),ze=E(j,ue),Ae=l.useId(),Pe=l.useId(),je=O(m);l.useEffect(()=>{z(m.length)},[m.length]);const Be=s(m),Te=!0===P?{}:!1===P||void 0===P?null:P,[Ee,$e]=l.useState(null),Fe=Te?Te.range??Ee??Te.defaultRange??[0,Math.max(0,Be-1)]:[0,Math.max(0,Be-1)],Re=Math.min(Math.max(0,Math.round(Fe[0])),Math.max(0,Be-1)),We=Math.min(Math.max(Re,Math.round(Fe[1])),Math.max(0,Be-1)),_e=null!==Te&&(Re>0||We<Be-1),Le=l.useMemo(()=>_e?m.map(e=>({...e,data:e.data.slice(Re,We+1)})):m,[m,_e,Re,We]),De=l.useMemo(()=>_e&&g?g.slice(Re,We+1):g,[g,_e,Re,We]),[Ie,He]=l.useState(null),[Ve,Oe]=l.useState(null),[Ze,Xe]=l.useState(null),Ye=ce?JSON.stringify(ce):"",qe=l.useCallback(e=>ce?A(ue,ce).format(e):d(e,ue),[Ye,ue]),Je=l.useMemo(()=>w(Le),[Le]),Ke=je.visible.map(Number).join(""),Ue=l.useMemo(()=>L?M(Je,je.visible,qe):Je,[Je,L,Ke,qe]),Ge=l.useMemo(()=>Le.map((e,t)=>v(e,t)),[Le]),Qe=s(Le),et=l.useMemo(()=>Array.from({length:Qe},(e,t)=>o(t,De,Ue)),[Qe,De,Ue]),tt=l.useMemo(()=>_e?w(m):Ue,[_e,m,Ue]),nt=l.useMemo(()=>_e?Array.from({length:Be},(e,t)=>o(t,g,tt)):et,[_e,Be,g,tt,et]),at=Boolean(k)&&!_&&!L,lt=l.useCallback(e=>at&&"secondary"===Le[e]?.axis,[at,Le]),rt=Ue.filter((e,t)=>je.visible[t]),it=Ue.filter((e,t)=>je.visible[t]&&!lt(t)),ot=Ue.filter((e,t)=>je.visible[t]&<(t)),st=l.useMemo(()=>{const e=h(it,_),t=(T??[]).filter(e=>"value"===(e.axis??"value"));if(0===t.length)return e;const n=t.flatMap(e=>void 0===e.to?[e.value]:[e.value,e.to]);return{min:Math.min(e?.min??1/0,...n),max:Math.max(e?.max??-1/0,...n)}},[it,_,T]),ct=l.useMemo(()=>at?h(ot,!1):null,[at,ot]),ut=le??q(rt,qe),dt=V(se,ve,H(Ce,"string"==typeof se)),ht=u[ve],mt=b,ft=p,xt=ie??N(st,{min:mt?.min,max:mt?.max,tickCount:mt?.tickCount,includeZero:Z}),gt=null===ct?null:N(ct,{min:k?.min,max:k?.max,tickCount:k?.tickCount??xt.ticks.length,includeZero:Z}),pt="value"===ee?c(rt,De):null,vt="value"===ee?N(pt,{min:ft?.min,max:ft?.max,tickCount:ft?.tickCount,includeZero:!1}):null,bt=xt.ticks.map((e,t)=>mt?.tickFormat?String(mt.tickFormat(e,t)):qe(e)),yt=ft?.tickFormat,kt=l.useMemo(()=>vt?vt.ticks.map((e,t)=>yt?String(yt(e,t)):d(e,ue)):et.map((e,t)=>yt?String(yt(e,t)):f(e,ue)),[vt?vt.ticks.join(" "):et,yt,ue]),Mt=bt.reduce((e,t)=>Math.max(e,y(t,ht)),0),wt=(gt?.ticks??[]).map((e,t)=>k?.tickFormat?String(k.tickFormat(e,t)):qe(e)),Ct=wt.reduce((e,t)=>Math.max(e,y(t,ht)),0),St=ht+6,Nt=gt&&!k?.hidden?k?.thickness??(F?ht+12:Ct+10)+(k?.label?St:0):0,zt=F?ft:mt,At=Boolean(zt?.label)&&!zt?.hidden,Pt=F||ft?.hidden?0:ft?.tickAngle,jt=l.useMemo(()=>S(Pt,ht),[Pt,ht]),Bt=0!==jt.angle,Tt=mt?.hidden?0:Mt+10,Et=(Se-(F?0:Tt)-16)/Math.max(1,Qe),$t=Math.min(140,.4*dt),Ft=!vt&&(F||Bt||Et-6>=2.4*ht),Rt=F?150:Bt?jt.cut($t):Et-6,Wt=l.useMemo(()=>Ft?kt.map(e=>C(e,Rt,ht)):kt,[kt,Ft,Rt,ht]),_t=l.useMemo(()=>Wt.reduce((e,t)=>Math.max(e,y(t,ht)),0),[Wt,ht]),Lt=F?ft?.hidden?0:_t+10:Tt,Dt=jt.depth(_t),It=Te?(Te.height??32)+10:0,Ht=(F?mt?.hidden?0:ht+12+(mt?.label?St:0):ft?.hidden?0:Dt+12+(ft?.label?St:0))+It,Vt=(F?ft:mt)?.thickness??Lt,Ot=(F?mt:ft)?.thickness??Ht,Zt=(F||vt?12:Bt?jt.angle>0?jt.overhang(_t)+8:8:Math.max(8,Wt.length?jt.overhang(_t):8))+Q+(F?0:Nt),Xt=x[ve]+4+G+Q+(At?St+2:0)+(xe?20:0)+(F?Nt:0),Yt=dt,qt={left:Vt+Q,top:Xt,width:Math.max(0,Se-Vt-Q-Zt),height:Math.max(0,Yt-Xt-Ot-Q)},Jt=F?qt.height:qt.width,Kt=i(U?Math.max(1,Qe-1):Qe,Jt,X),Ut=l.useCallback(e=>U?Qe<=1?Jt/2:Jt*e/(Qe-1):Kt.centre(e),[U,Qe,Jt,Kt]),Gt=l.useCallback((e,t)=>{return n=void 0!==t&<(t)&>?gt:xt,F?qt.left+n.fraction(e)*qt.width:qt.top+(1-n.fraction(e))*qt.height;var n},[F,qt.left,qt.top,qt.width,qt.height,xt,gt,lt]),Qt=l.useCallback((e,t,n)=>F?{x:Gt(t,n),y:qt.top+Ut(e)}:{x:qt.left+Ut(e),y:Gt(t,n)},[F,Gt,Ut,qt.left,qt.top]),en=l.useCallback(e=>F?qt.top+(1-(vt?.fraction(e)??0))*qt.height:qt.left+(vt?.fraction(e)??0)*qt.width,[F,qt.left,qt.top,qt.width,qt.height,vt]),tn=l.useCallback(e=>{const t=void 0!==e&<(e)&>?gt:xt;return Gt(Math.min(Math.max(0,t.min),t.max),e)},[Gt,xt,gt,lt]),nn=tn(),an=l.useCallback(e=>lt(e)&&k?.tickFormat?e=>String(k.tickFormat(e,0)):qe,[lt,k,qe]),ln={plot:qt,values:Ue,visible:je.visible,colors:Ge,scale:xt,secondScale:gt,onSecond:lt,band:Kt,horizontal:F,valuePx:Gt,categoryPx:Ut,point:Qt,categoryScale:vt,categoryValuePx:en,zeroPx:nn,zeroPxOf:tn,categories:et,format:qe,size:ve},rn=te?te(ln):D,on=(T??[]).filter(e=>Boolean(e.label)),sn=e=>{const t=t=>"value"===(e.axis??"value")?qe(t):f(vt?t:et[t]??t,ue);return void 0===e.to?t(e.value):`${t(e.value)}–${t(e.to)}`},cn=!1===me?{mode:"none"}:!0===me||void 0===me?{}:me,un=cn.mode??(te?"item":"index"),dn=null===Ve?null:rn[Ve]??null,hn=te?dn?dn.index:null:Ie,mn=te?rn.length:Qe,fn=()=>{He(null),Oe(null),Xe(null)};Y(Ce,null!==hn,fn);const xn=e=>{if("none"!==un){if(te){const t=((e,t)=>{const n=Ce.current;if(!n||0===rn.length)return null;const a=n.getBoundingClientRect(),l=e-a.left,r=t-a.top;let i=null,o=1/0,s=1/0;return rn.forEach((e,t)=>{const n=e.x-l,a=e.y-r,c=Math.sqrt(n*n+a*a);let u;if(void 0===e.rx)u=Math.max(0,c-e.r);else{const t=Math.max(0,Math.abs(n)-e.rx),l=Math.max(0,Math.abs(a)-(e.ry??e.rx));u=Math.sqrt(t*t+l*l)}u<=ne&&(u<o||u===o&&c<s)&&(o=u,s=c,i=t)}),i})(e.clientX,e.clientY);t!==Ve&&Oe(t)}else{const t=((e,t)=>{const n=Ce.current;if(!n||0===Qe)return null;const a=n.getBoundingClientRect(),l=F?t-a.top-qt.top:e-a.left-qt.left;if(l<-Kt.step||l>Jt+Kt.step)return null;const r=U?Qe<=1?0:Math.round(l/Jt*(Qe-1)):Math.floor(l/Kt.step);return Math.min(Qe-1,Math.max(0,r))})(e.clientX,e.clientY);t!==Ie&&He(t)}"item"!==un||te||Xe(((e,t)=>{const n=Ce.current;if(!n)return null;const a=n.getBoundingClientRect();return F?e-a.left:t-a.top})(e.clientX,e.clientY))}},gn=e=>{const t=null===e?null:Math.min(mn-1,Math.max(0,e));te?Oe(t):He(t)},pn=e=>{Xe(null);gn(((te?Ve:Ie)??(e>0?-1:mn))+e)},vn=null===hn?[]:Le.flatMap((e,t)=>{if(!je.visible[t]||dn&&dn.series!==t)return[];const n=Ue[t]?.[hn];return n&&null!==n.value?[{seriesIndex:t,name:e.name,color:n.color??Ge[t],value:n.value,formatted:an(t)(n.value),label:n.label}]:[]}),bn=dn&&oe?oe(dn):null,yn=bn?bn.items:"item"===un&&vn.length>1&&null!==Ze?[vn.reduce((e,t)=>Math.abs(Gt(t.value??0)-Ze)<Math.abs(Gt(e.value??0)-Ze)?t:e)]:vn,kn=dn?Ue[dn.series]?.[dn.index]?.x??De?.[dn.index]??dn.index:void 0,Mn=e=>"number"==typeof e&&vt?A(ue,{}).format(e):f(e,ue),wn=dn?dn.x:F?Gt(yn[0]?.value??0):qt.left+Ut(hn??0),Cn=dn?dn.y:F?qt.top+Ut(hn??0):qt.top,Sn=dn?(dn.x-qt.left)/Math.max(1,qt.width)>.6:(F?xt.fraction(yn[0]?.value??0):Ut(hn??0)/Math.max(1,Jt))>.6,Nn=!1===he?{interactive:!1}:!0===he||void 0===he?{}:he,zn=!0===he||!1!==he&&Le.length>1,An=Nn.side??"bottom",Pn={...ln,hovered:je.hovered,activeIndex:hn,marks:rn,activeMark:dn},jn=0===Qe||null===st||"value"===ee&&null===pt;return n(ChartSurface,{...we,size:ve,variant:be,padded:ye,className:ke,legendSide:An,legend:zn?e(ChartLegendBar,{series:Le,colors:Ge,options:Nn,visibility:je,size:ve,swatch:re,values:Nn.showValue&&null!==hn?Le.map((e,t)=>{const n=Ue[t]?.[hn]?.value;return null==n?void 0:an(t)(n)}):void 0}):null,table:jn?null:n(t,{children:[ae?.(Ae,qe)??e(J,{id:Ae,caption:de,corner:ft?.label,categories:nt,series:Le,values:tt,format:qe,formatFor:at?an:void 0,locale:ue}),on.length>0?e("ul",{className:W,children:on.map((e,t)=>n("li",{children:[e.label,": ",sn(e)]},t))}):null]}),children:[xe&&!jn?e(ChartExport,{rows:()=>[[ft?.label??"",...Le.map((e,t)=>e.name??`${t+1}`)],...nt.map((e,t)=>[e,...tt.map(e=>e[t]?.value??null)])],fileName:ge,onExport:pe,label:ze.exportCsv}):null,n("div",{ref:Ce,role:"img",tabIndex:jn?void 0:0,"aria-label":de??ze.label,"aria-describedby":jn?void 0:Pe,onPointerMove:xn,onPointerDown:e=>{"touch"===e.pointerType&&xn(e)},onPointerLeave:e=>{"touch"!==e.pointerType&&fn()},onKeyDown:"none"===un?void 0:e=>{const t=F?"ArrowDown":"ArrowRight",n=F?"ArrowUp":"ArrowLeft";if(e.key===t)pn(1);else if(e.key===n)pn(-1);else if("Home"===e.key)gn(0);else if("End"===e.key)gn(mn-1);else{if("Escape"!==e.key)return;fn()}e.preventDefault()},onBlur:fn,className:$("relative w-full","rounded-(--neba-radius-xs)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2"),style:{height:"string"==typeof se?se:dt},children:[jn?e("div",{className:$("flex h-full items-center justify-center text-(--neba-muted-fg)",R[ve]),children:fe??Ne.title}):Se>0?n("svg",{width:Se,height:Yt||"100%",viewBox:`0 0 ${Se} ${Yt}`,"aria-hidden":"true",className:"block overflow-visible",children:[e(ChartAxes,{plot:qt,scale:xt,band:Kt,horizontal:F,inset:U,categoryPx:Ut,valuePx:Gt,tickTexts:bt,widestTick:Mt,categoryTexts:Wt,widestCategory:_t,categoryScale:vt,categoryValuePx:en,valueAxis:mt,categoryAxis:ft,secondScale:gt,secondTickTexts:wt,secondaryAxis:k,fontSize:ht,turn:jt,labelDepth:Dt,zeroPx:nn}),T&&T.length>0?e(ChartReferences,{references:T,plot:qt,horizontal:F,valuePx:Gt,categoryPx:Ut,categoryScale:vt,categoryValuePx:en,fontSize:ht}):null,null===hn||te||"index"!==un||!1===cn.crosshair?null:(()=>{const t=Ut(hn);return e("line",F?{x1:qt.left,x2:qt.left+qt.width,y1:qt.top+t,y2:qt.top+t,stroke:"var(--neba-chart-baseline)",strokeWidth:1}:{x1:qt.left+t,x2:qt.left+t,y1:qt.top,y2:qt.top+qt.height,stroke:"var(--neba-chart-baseline)",strokeWidth:1})})(),Me(Pn)]}):null,null!==hn&&yn.length>0&&"none"!==un?cn.render?e("div",{className:"pointer-events-none absolute z-10",style:Sn?{right:`calc(100% - ${wn}px + 10px)`,top:Cn}:{left:wn+10,top:Cn},children:cn.render({index:hn,category:kn??et[hn],items:yn})}):e(ChartTooltipPanel,{heading:bn?bn.heading:Mn(kn??et[hn]),items:yn,x:wn,y:Cn,flip:Sn,size:ve}):null]}),Te&&!jn?e(l.Suspense,{fallback:null,children:e(K,{outline:(tt[je.visible.indexOf(!0)]??tt[0]??[]).map(e=>e.value),count:Be,range:[Re,We],onRange:e=>{$e(e),Te.onRangeChange?.(e)},color:Ge[Math.max(0,je.visible.indexOf(!0))]??Ge[0],height:Te.height??32,words:{start:ze.start,end:ze.end},categories:nt,locale:ue,width:Se})}):null,jn?null:e(ChartSummary,{id:Pe,template:ze.summary,locale:ue,...ut}),"none"===un?null:e(ChartStatus,{heading:null===hn?void 0:bn?.heading??Mn(kn??et[hn]),items:yn})]})}function ChartAxes({plot:a,scale:l,horizontal:r,categoryPx:i,valuePx:o,tickTexts:s,widestTick:c,categoryTexts:u,widestCategory:d,categoryScale:h,categoryValuePx:f,valueAxis:x,categoryAxis:g,secondScale:p,secondTickTexts:v,secondaryAxis:M,fontSize:w,turn:C,labelDepth:S,zeroPx:N}){const z=!1!==x?.grid&&!x?.hidden,A=r?g:x,P=r?x:g,j=!g?.hidden&&(g?.grid??null!==h),B=e=>h?f(h.ticks[e]):(r?a.top:a.left)+i(e),T=0!==C.angle,E=C.room(d),$=k(u.length,r?a.height:a.width,r?1.8*w:E),F=k(l.ticks.length,r?a.width:a.height,r?Math.max(c,1)+16:2*w),R=u.length>1?Math.abs(B(1)-B(0)):a.width,W=l.ticks.length>1?Math.abs(o(l.ticks[1])-o(l.ticks[0])):a.height,_=m(u.length,$,R,r?1.8*w:T?E:y(u[u.length-1]??"",w)),L=a.top+a.height+C.offset,D=m(l.ticks.length,F,W,r?y(s[s.length-1]??"",w):1.6*w);return n("g",{children:[l.ticks.map((t,i)=>{const c=o(t),u=Math.abs(t)<1e-9;return n("g",{children:[z?e("line",r?{x1:c,x2:c,y1:a.top,y2:a.top+a.height,stroke:u?"var(--neba-chart-baseline)":"var(--neba-chart-grid)",strokeWidth:1}:{x1:a.left,x2:a.left+a.width,y1:c,y2:c,stroke:u?"var(--neba-chart-baseline)":"var(--neba-chart-grid)",strokeWidth:1}):null,x?.hidden||!b(i,l.ticks.length,F,D)?null:e("text",r?{x:c,y:a.top+a.height+w+6,textAnchor:0===i?"start":i===l.ticks.length-1?"end":"middle",fontSize:w,fill:"var(--neba-muted-fg)",className:"tabular-nums",children:s[i]}:{x:a.left-8,y:c,textAnchor:"end",dominantBaseline:"central",fontSize:w,fill:"var(--neba-muted-fg)",className:"tabular-nums",children:s[i]})]},t)}),g?.hidden?null:n(t,{children:[e("line",r?{x1:N,x2:N,y1:a.top,y2:a.top+a.height,stroke:"var(--neba-chart-axis)",strokeWidth:1}:{x1:a.left,x2:a.left+a.width,y1:N,y2:N,stroke:"var(--neba-chart-axis)",strokeWidth:1}),u.map((t,l)=>{const i=B(l),o=b(l,u.length,$,_);return r?o?e("text",{x:a.left-8,y:i,textAnchor:"end",dominantBaseline:"central",fontSize:w,fill:"var(--neba-muted-fg)",className:h?"tabular-nums":void 0,children:t},l):null:n("g",{children:[j?e("line",{x1:i,x2:i,y1:a.top,y2:a.top+a.height,stroke:"var(--neba-chart-grid)",strokeWidth:1}):null,o?e("text",{x:i,y:L,textAnchor:T?C.anchor:h?0===l?"start":l===u.length-1?"end":"middle":"middle",transform:T?`rotate(${C.angle} ${i} ${L})`:void 0,dominantBaseline:T?"central":void 0,fontSize:w,fill:"var(--neba-muted-fg)",className:h?"tabular-nums":void 0,children:t}):null]},l)})]}),p&&!M?.hidden?p.ticks.map((t,n)=>{const l=r?a.left+p.fraction(t)*a.width:a.top+(1-p.fraction(t))*a.height;return b(n,p.ticks.length,F,D)?e("text",r?{x:l,y:a.top-8,textAnchor:0===n?"start":n===p.ticks.length-1?"end":"middle",fontSize:w,fill:"var(--neba-muted-fg)",className:"tabular-nums",children:v[n]}:{x:a.left+a.width+8,y:l,textAnchor:"start",dominantBaseline:"central",fontSize:w,fill:"var(--neba-muted-fg)",className:"tabular-nums",children:v[n]},t):null}):null,p&&M?.label&&!M.hidden?e("text",{x:a.left+a.width,y:w+2,textAnchor:"end",fontSize:w,fill:"var(--neba-muted-fg)",fontWeight:500,children:M.label}):null,A?.label&&!A.hidden?e("text",{x:a.left,y:w+2,textAnchor:"start",fontSize:w,fill:"var(--neba-muted-fg)",fontWeight:500,children:A.label}):null,P?.label&&!P.hidden?e("text",{x:a.left+a.width,y:a.top+a.height+S+w+12,textAnchor:"end",fontSize:w,fill:"var(--neba-muted-fg)",fontWeight:500,children:P.label}):null]})}export{J as ChartDataTable,ChartExport,ChartLegendBar,ChartScaleLegend,ChartStatus,ChartSummary,ChartSurface,ChartTooltipPanel,q as summarise,V as chartHeight,H as useMeasuredHeight,I as useMeasuredWidth,Y as useReleaseOutside,O as useVisibility};
|
|
1
|
+
"use client";import{jsx as e,Fragment as t,jsxs as n}from"react/jsx-runtime";import{useStyleDefaults as a}from"./defaults.js";import*as l from"react";import{Box as r}from"../components/box/Box.js";import{alignedScale as i,bandScale as o,categoryAt as s,categoryCount as c,categoryExtent as u,chartFontSizes as d,compactNumber as h,extentOf as m,fitsLast as f,formatCategory as x,markerRadii as g,plotHeights as p,resolveColor as v,seriesColor as b,showsTick as y,textWidth as k,tickStride as M,toFullShares as w,toValues as C,truncate as S,turnedAxis as N,valueScale as z,warnPaletteOverflow as A}from"./chart.js";import{numberFormatter as P}from"./format.js";import{observeResize as B}from"./observe.js";import{chartMessages as j,emptyMessages as T,fillMessage as E,useMessages as $}from"./i18n.js";import{cx as F,hasContent as R,metaTextClasses as I,srOnlyClasses as W,transitionClasses as _}from"./styles.js";const L="undefined"==typeof document?l.useEffect:l.useLayoutEffect,D=[];function H(e){const[t,n]=l.useState(0);return L(()=>{const t=e.current;if(!t)return;const a=()=>n(t.clientWidth);return a(),B(t,a)},[e]),t}function O(e,t){const[n,a]=l.useState(0);return L(()=>{const n=e.current;if(!t||!n)return;const l=()=>a(n.clientHeight);return l(),B(n,l)},[e,t]),n}function V(e,t,n){return"number"==typeof e?e:void 0===e?p[t]:n}export const markTransitionClasses="[transition:opacity_var(--neba-duration)_var(--neba-ease),r_var(--neba-duration)_var(--neba-ease),scale_var(--neba-duration)_var(--neba-ease)]";function Z(e){const[t,n]=l.useState(()=>new Map),[a,r]=l.useState(null),i=function(e){const t=new Map;return e.map((e,n)=>{if(void 0===e.name)return`index:${n}`;const a=t.get(e.name)??0;return t.set(e.name,a+1),`name:${a}:${e.name}`})}(e),o=l.useRef({series:e,keys:i});l.useEffect(()=>{o.current={series:e,keys:i}});const s=l.useCallback(e=>{const{series:t,keys:a}=o.current,l=a[e];void 0!==l&&n(n=>{const a=new Map(n);return a.set(l,!(n.get(l)??!t[e]?.hidden)),a})},[]);return{visible:e.map((e,n)=>t.get(i[n])??!e.hidden),hovered:a,toggle:s,setHovered:r}}const X={top:"flex-col-reverse",bottom:"flex-col",left:"flex-row-reverse",right:"flex-row"},Y={start:"justify-start",center:"justify-center",end:"justify-end"};function q(e,t,n){const a=l.useRef(n);l.useEffect(()=>{a.current=n}),l.useEffect(()=>{if(!t)return;const n=t=>{const n=e.current;n&&t.target instanceof Node&&!n.contains(t.target)&&a.current()};return document.addEventListener("pointerdown",n,!0),()=>document.removeEventListener("pointerdown",n,!0)},[e,t])}function ChartLegendBar({series:a,colors:l,options:r,visibility:i,size:o,values:s,swatch:c}){const u=!1!==r.interactive,d="left"===r.side||"right"===r.side;return e("ul",{className:F("flex list-none flex-wrap items-center gap-x-3 gap-y-1 p-0",d?"min-w-0 flex-col items-start":"",Y[r.align??"center"],I[o]),children:a.map((a,r)=>{const o=i.visible[r],d=null!==i.hovered&&i.hovered!==r,h=a.name??`${r+1}`,m=l[r],f=n(t,{children:[e("span",c?{"aria-hidden":"true",className:"flex size-2.5 shrink-0 items-center justify-center",children:c(r,m)}:{"aria-hidden":"true",className:`size-2.5 shrink-0 rounded-[0.1875rem] ${_}`,style:{backgroundColor:m}}),e("span",{className:"min-w-0 truncate",children:h}),s?.[r]?e("span",{className:"shrink-0 tabular-nums text-(--neba-muted-fg)",children:s[r]}):null]});return e("li",{className:"min-w-0",children:u?e("button",{type:"button","aria-pressed":o,onClick:()=>i.toggle(r),onPointerEnter:()=>i.setHovered(r),onPointerLeave:()=>i.setHovered(null),onFocus:()=>i.setHovered(r),onBlur:()=>i.setHovered(null),className:F("flex min-w-0 cursor-pointer items-center gap-1.5 rounded-(--neba-radius-xs)","px-1 py-0.5 text-(--neba-fg)","[transition-property:background-color,color,opacity]","[transition-duration:var(--neba-duration)]","[transition-timing-function:var(--neba-ease)]","hover:bg-(--n-soft)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-1",o?d?"opacity-55":"":"opacity-40"),children:f}):e("span",{className:F("flex min-w-0 items-center gap-1.5 px-1 py-0.5 text-(--neba-fg)",o?"":"opacity-40"),children:f})},a.name??r)})})}function ChartScaleLegend({steps:a,from:l,to:r,middle:i,align:o,vertical:s,size:c}){return e("div",{className:F("flex",s?"":Y[o]),children:n("div",{className:F("grid grid-cols-[auto_auto_auto] items-center gap-x-2",I[c]),children:[e("span",{className:"shrink-0 tabular-nums text-(--neba-muted-fg)",children:l}),e("span",{"aria-hidden":"true",className:F("flex h-2.5 overflow-hidden rounded-[0.1875rem]",s?"w-20":"w-24"),children:a.map(t=>e("span",{className:"h-full flex-1",style:{backgroundColor:t}},t))}),e("span",{className:"shrink-0 tabular-nums text-(--neba-muted-fg)",children:r}),i?n(t,{children:[e("span",{}),e("span",{className:"text-center tabular-nums text-(--neba-muted-fg)",children:i}),e("span",{})]}):null]})})}function ChartTooltipPanel({heading:t,items:a,x:l,y:r,flip:i,size:o}){return n("div",{"data-neba-tooltip":"",className:F("pointer-events-none absolute z-10 max-w-56 min-w-24","rounded-(--neba-radius-sm) border p-2","[background-image:var(--neba-grain),var(--neba-sheen)]","[background-blend-mode:overlay,normal] [backdrop-filter:var(--neba-blur)]","bg-(--neba-panel-press) [border-color:var(--n-line)]","[box-shadow:var(--neba-shadow-2),var(--neba-plate-glass)]",I[o]),style:i?{right:`calc(100% - ${l}px + 10px)`,top:r}:{left:l+10,top:r},children:[e("div",{className:"mb-1 font-medium text-(--neba-fg)",children:t}),e("ul",{className:"flex list-none flex-col gap-0.5 p-0",children:a.map(t=>n("li",{className:"flex items-center gap-1.5",children:[e("span",{"aria-hidden":"true",className:"size-2 shrink-0 rounded-[0.125rem]",style:{backgroundColor:t.color}}),t.name?e("span",{className:"min-w-0 flex-1 truncate text-(--neba-muted-fg)",children:t.name}):null,e("span",{className:"ms-auto shrink-0 font-medium tabular-nums text-(--neba-fg)",children:t.label??t.formatted})]},t.seriesIndex))})]})}function ChartSummary({id:e,template:t,count:a,min:l,max:r,second:i,locale:o}){const s=P(o,{});return n("span",{id:e,hidden:!0,children:[E(t,{count:s.format(a),min:l,max:r}),i&&i.count>0?` ${E(i.template,{count:s.format(i.count),min:i.min,max:i.max})}`:null]})}function J(e,t){let n=0,a=1/0,l=-1/0;for(const t of e)for(const e of t)null===e.value||Number.isNaN(e.value)||(n+=1,a=Math.min(a,e.value),l=Math.max(l,e.value));return 0===n?{count:n,min:"",max:""}:{count:n,min:t(a),max:t(l)}}function ChartStatus({heading:a,items:r}){return e("span",{role:"status","aria-live":"polite",className:W,children:0===r.length?null:n(t,{children:[R(a)?n(t,{children:[a,", "]}):null,r.map((e,t)=>n(l.Fragment,{children:[t>0?", ":null,e.name?`${e.name}: `:null,e.label??e.formatted]},e.seriesIndex))]})})}const K=/*@__PURE__*/l.memo(function ChartDataTable({id:t,caption:a,corner:l,categories:r,series:i,values:o,format:s,formatFor:c,locale:u}){return n("table",{id:t,className:W,children:[a?e("caption",{children:a}):null,e("thead",{children:n("tr",{children:[e("th",{scope:"col",children:l??""}),i.map((t,n)=>e("th",{scope:"col",children:t.name??n+1},t.name??n))]})}),e("tbody",{children:r.map((t,a)=>n("tr",{children:[e("th",{scope:"row",children:x(t,u)}),i.map((t,n)=>{const l=o[n]?.[a];return e("td",void 0!==l?.label?{children:l.label}:{children:null==l?.value?"":(c?.(n)??s)(l.value)},t.name??n)})]},a))})]})}),U=l.lazy(()=>import("./chart-brush.js").then(e=>({default:e.ChartBrush})));function ChartExport({rows:t,fileName:n,onExport:a,label:l}){return e("button",{type:"button","aria-label":l,title:l,onClick:async()=>{const{toCsv:e,downloadText:l}=await(import("./csv.js")),r=e(t());a?a(r):l(r,n,"text/csv;charset=utf-8")},className:F("absolute end-0 top-0 z-10 inline-flex size-6 cursor-pointer items-center justify-center","rounded-(--neba-radius-xs) text-(--neba-muted-fg)","hover:bg-(--n-soft) hover:text-(--neba-fg)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-1",_),children:e("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",className:"size-3.5",children:e("path",{d:"M12 3v12m0 0 4-4m-4 4-4-4M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2"})})})}function ChartSurface({legend:t,legendSide:a,children:l,table:i,className:o,...s}){return n(r,{...s,className:F("relative flex gap-3",X[a],o??void 0),children:[e("div",{className:"relative min-w-0 flex-1",children:l}),t,i]})}function ChartReferences({references:t,plot:a,horizontal:l,valuePx:r,categoryPx:i,categoryScale:o,categoryValuePx:s,categoryBounds:c,categoryOffset:u,fontSize:d}){const[h,m]=c;return e("g",{children:t.map((t,c)=>{const f="value"===(t.axis??"value"),x=e=>f?e:Math.min(m,Math.max(h,e));if(!f&&Math.max(t.value,t.to??t.value)<h)return null;if(!f&&Math.min(t.value,t.to??t.value)>m)return null;const g=e=>f?r(e):o?s(e):(l?a.top:a.left)+i(e-u),p=f?!l:l,b=g(x(t.value)),y=void 0===t.to?null:g(x(t.to)),k=(void 0===t.to?[t.value]:[t.value,t.to]).filter(e=>f||e>=h&&e<=m).map(g),M=null===y?b:Math.min(b,y),w=null===y?b:Math.max(b,y),C=t.color?v(t.color):"var(--neba-muted-fg)",S=t.solid?void 0:"4 4",N=t.label?e("text",{x:p?a.left+a.width-4:M+4,y:p?M-5:a.top+d,textAnchor:p?"end":"start",fontSize:d,fontWeight:500,fill:C,children:t.label}):null;return n("g",{children:[null===y?null:e("rect",{x:p?a.left:M,y:p?M:a.top,width:p?a.width:Math.max(0,w-M),height:p?Math.max(0,w-M):a.height,fill:`color-mix(in oklab, ${C} 12%, transparent)`}),k.map((t,n)=>e("line",{x1:p?a.left:t,x2:p?a.left+a.width:t,y1:p?t:a.top,y2:p?t:a.top+a.height,stroke:C,strokeWidth:1,strokeDasharray:S},n)),N]},c)})})}export function CartesianChart(r){const{series:f,categories:p,xAxis:v,yAxis:y,secondaryAxis:M,brush:B,references:E,horizontal:R=!1,stacked:_=!1,stackedFull:L=!1,includeZero:X=!0,bandRatio:Y=1,inset:G=!1,headroom:Q=0,markInset:ee=0,xScale:te="band",marks:ne,markRadius:ae=24,table:le,exportRows:re,summary:ie,swatch:oe,scale:se,markTooltip:ce,height:ue,format:de,locale:he,label:me,legend:fe,tooltip:xe,empty:ge,exportable:pe=!1,exportFileName:ve="chart.csv",onExport:be,size:ye="md",variant:ke="text",padded:Me=!1,className:we,children:Ce,...Se}=a(r,["size","variant","locale"]),Ne=l.useRef(null),ze=H(Ne),Ae=$(T,he),Pe=$(j,he),Be=l.useId(),je=l.useId(),Te=Z(f);l.useEffect(()=>{A(f.length)},[f.length]);const Ee=c(f),$e=!0===B?{}:!1===B||void 0===B?null:B,[Fe,Re]=l.useState(null),Ie=$e?$e.range??Fe??$e.defaultRange??[0,Math.max(0,Ee-1)]:[0,Math.max(0,Ee-1)],We=Math.min(Math.max(0,Math.round(Ie[0])),Math.max(0,Ee-1)),_e=Math.min(Math.max(We,Math.round(Ie[1])),Math.max(0,Ee-1)),Le=null!==$e&&(We>0||_e<Ee-1),De=l.useMemo(()=>Le?f.map(e=>({...e,data:e.data.slice(We,_e+1)})):f,[f,Le,We,_e]),He=l.useMemo(()=>Le&&p?p.slice(We,_e+1):p,[p,Le,We,_e]),[Oe,Ve]=l.useState(null),[Ze,Xe]=l.useState(null),[Ye,qe]=l.useState(null),Je=de?JSON.stringify(de):"",Ke=l.useCallback(e=>de?P(he,de).format(e):h(e,he),[Je,he]),Ue=l.useMemo(()=>C(De),[De]),Ge=Te.visible.map(Number).join(""),Qe=l.useMemo(()=>L?w(Ue,Te.visible,Ke):Ue,[Ue,L,Ge,Ke]),et=l.useMemo(()=>De.map((e,t)=>b(e,t)),[De]),tt=c(De),nt=l.useMemo(()=>Array.from({length:tt},(e,t)=>s(t,He,Qe)),[tt,He,Qe]),at=Le||L,lt=l.useMemo(()=>at?C(f):null,[at,f]),rt=lt??Qe,it=l.useMemo(()=>Le&<?Array.from({length:Ee},(e,t)=>s(t,p,lt)):null,[Le,Ee,p,lt])??nt,ot=Math.max(0,Te.visible.indexOf(!0)),st=null!==$e,ct=l.useMemo(()=>st?(rt[ot]??[]).map(e=>e.value):[],[st,rt,ot]),ut=Boolean(M)&&!_&&!L,dt=f.map(e=>"secondary"===e.axis?"1":"0").join(""),ht=l.useCallback(e=>ut&&"1"===dt[e],[ut,dt]),mt=Qe.filter((e,t)=>Te.visible[t]),ft=l.useMemo(()=>{const e=m(Qe.filter((e,t)=>Te.visible[t]&&!ht(t)),_),t=(E??[]).filter(e=>"value"===(e.axis??"value"));if(0===t.length)return e;const n=t.flatMap(e=>void 0===e.to?[e.value]:[e.value,e.to]);return{min:Math.min(e?.min??1/0,...n),max:Math.max(e?.max??-1/0,...n)}},[Qe,Ge,ht,_,E]),xt=l.useMemo(()=>ut?m(Qe.filter((e,t)=>Te.visible[t]&&ht(t)),!1):null,[ut,Qe,Ge,ht]),gt=M?.tickFormat,pt=ie??J(ut?Qe.filter((e,t)=>Te.visible[t]&&!ht(t)):mt,Ke),vt=void 0===ie&&ut?J(Qe.filter((e,t)=>Te.visible[t]&&ht(t)),gt?e=>String(gt(e,0)):Ke):null,bt=V(ue,ye,O(Ne,"string"==typeof ue)),yt=d[ye],kt=y,Mt=v,wt=se??z(ft,{min:kt?.min,max:kt?.max,tickCount:kt?.tickCount,includeZero:X}),Ct=null===xt?null:void 0===M?.tickCount?i(xt,wt.ticks.length-1,{min:M?.min,max:M?.max,includeZero:X}):z(xt,{min:M?.min,max:M?.max,tickCount:M.tickCount,includeZero:X}),St="value"===te?u(mt,He):null,Nt="value"===te?z(St,{min:Mt?.min,max:Mt?.max,tickCount:Mt?.tickCount,includeZero:!1}):null,zt=wt.ticks.map((e,t)=>kt?.tickFormat?String(kt.tickFormat(e,t)):Ke(e)),At=Mt?.tickFormat,Pt=l.useMemo(()=>Nt?Nt.ticks.map((e,t)=>At?String(At(e,t)):h(e,he)):nt.map((e,t)=>At?String(At(e,t)):x(e,he)),[Nt?Nt.ticks.join(" "):nt,At,he]),Bt=zt.reduce((e,t)=>Math.max(e,k(t,yt)),0),jt=(Ct?.ticks??[]).map((e,t)=>M?.tickFormat?String(M.tickFormat(e,t)):Ke(e)),Tt=jt.reduce((e,t)=>Math.max(e,k(t,yt)),0),Et=yt+6,$t=Ct&&!M?.hidden?M?.thickness??(R?yt+12:Tt+10):0,Ft=R?Mt:kt,Rt=Boolean(Ft?.label)&&!Ft?.hidden,It=Boolean(Ct&&M?.label&&!M.hidden),Wt=R||Mt?.hidden?0:Mt?.tickAngle,_t=l.useMemo(()=>N(Wt,yt),[Wt,yt]),Lt=0!==_t.angle,Dt=kt?.hidden?0:Bt+10,Ht=(ze-(R?0:Dt)-16)/Math.max(1,tt),Ot=Math.min(140,.4*bt),Vt=!Nt&&(R||Lt||Ht-6>=2.4*yt),Zt=R?150:Lt?_t.cut(Ot):Ht-6,Xt=l.useMemo(()=>Vt?Pt.map(e=>S(e,Zt,yt)):Pt,[Pt,Vt,Zt,yt]),Yt=l.useMemo(()=>Xt.reduce((e,t)=>Math.max(e,k(t,yt)),0),[Xt,yt]),qt=R?Mt?.hidden?0:Yt+10:Dt,Jt=_t.depth(Yt),Kt=$e?($e.height??32)+10:0,Ut=R?kt?.hidden?0:yt+12+(kt?.label?Et:0):Mt?.hidden?0:Jt+12+(Mt?.label?Et:0),Gt=(R?Mt:kt)?.thickness??qt,Qt=((R?kt:Mt)?.thickness??Ut)+Kt,en=(R||Nt?12:Lt?_t.angle>0?_t.overhang(Yt)+8:8:Math.max(8,Xt.length?_t.overhang(Yt):8))+ee+(R?0:$t),tn=g[ye]+4+Q+ee+(Rt||It?Et+2:0)+(pe?20:0)+(R?$t:0),nn=bt,an={left:Gt+ee,top:tn,width:Math.max(0,ze-Gt-ee-en),height:Math.max(0,nn-tn-Qt-ee)},ln=R?an.height:an.width,rn=o(G?Math.max(1,tt-1):tt,ln,Y),on=l.useCallback(e=>G?tt<=1?ln/2:ln*e/(tt-1):rn.centre(e),[G,tt,ln,rn]),sn=l.useCallback((e,t)=>{return n=void 0!==t&&ht(t)&&Ct?Ct:wt,R?an.left+n.fraction(e)*an.width:an.top+(1-n.fraction(e))*an.height;var n},[R,an.left,an.top,an.width,an.height,wt,Ct,ht]),cn=l.useCallback((e,t,n)=>R?{x:sn(t,n),y:an.top+on(e)}:{x:an.left+on(e),y:sn(t,n)},[R,sn,on,an.left,an.top]),un=l.useCallback(e=>R?an.top+(1-(Nt?.fraction(e)??0))*an.height:an.left+(Nt?.fraction(e)??0)*an.width,[R,an.left,an.top,an.width,an.height,Nt]),dn=l.useCallback(e=>{const t=void 0!==e&&ht(e)&&Ct?Ct:wt;return sn(Math.min(Math.max(0,t.min),t.max),e)},[sn,wt,Ct,ht]),hn=dn(),mn=M?.tickFormat,fn=l.useCallback(e=>ht(e)&&mn?e=>String(mn(e,0)):Ke,[ht,mn,Ke]),xn={plot:an,values:Qe,visible:Te.visible,colors:et,scale:wt,secondScale:Ct,onSecond:ht,band:rn,horizontal:R,valuePx:sn,categoryPx:on,point:cn,categoryScale:Nt,categoryValuePx:un,zeroPx:hn,zeroPxOf:dn,categories:nt,format:Ke,formatFor:fn,size:ye},gn=ne?ne(xn):D,pn=(E??[]).filter(e=>Boolean(e.label)),vn=e=>{const t=t=>"value"===(e.axis??"value")?Ke(t):x(Nt?t:it[t]??t,he);return void 0===e.to?t(e.value):`${t(e.value)}–${t(e.to)}`},bn=!1===xe?{mode:"none"}:!0===xe||void 0===xe?{}:xe,yn=bn.mode??(ne?"item":"index"),kn=null===Ze?null:gn[Ze]??null,Mn=ne?kn?kn.index:null:Oe,wn=ne?gn.length:tt,Cn=()=>{Ve(null),Xe(null),qe(null)};q(Ne,null!==Mn,Cn);const Sn=e=>{if("none"!==yn){if(ne){const t=((e,t)=>{const n=Ne.current;if(!n||0===gn.length)return null;const a=n.getBoundingClientRect(),l=e-a.left,r=t-a.top;let i=null,o=1/0,s=1/0;return gn.forEach((e,t)=>{const n=e.x-l,a=e.y-r,c=Math.sqrt(n*n+a*a);let u;if(void 0===e.rx)u=Math.max(0,c-e.r);else{const t=Math.max(0,Math.abs(n)-e.rx),l=Math.max(0,Math.abs(a)-(e.ry??e.rx));u=Math.sqrt(t*t+l*l)}u<=ae&&(u<o||u===o&&c<s)&&(o=u,s=c,i=t)}),i})(e.clientX,e.clientY);t!==Ze&&Xe(t)}else{const t=((e,t)=>{const n=Ne.current;if(!n||0===tt)return null;const a=n.getBoundingClientRect(),l=R?t-a.top-an.top:e-a.left-an.left;if(l<-rn.step||l>ln+rn.step)return null;const r=G?tt<=1?0:Math.round(l/ln*(tt-1)):Math.floor(l/rn.step);return Math.min(tt-1,Math.max(0,r))})(e.clientX,e.clientY);t!==Oe&&Ve(t)}"item"!==yn||ne||qe(((e,t)=>{const n=Ne.current;if(!n)return null;const a=n.getBoundingClientRect();return R?e-a.left:t-a.top})(e.clientX,e.clientY))}},Nn=e=>{const t=null===e?null:Math.min(wn-1,Math.max(0,e));ne?Xe(t):Ve(t)},zn=e=>{qe(null);Nn(((ne?Ze:Oe)??(e>0?-1:wn))+e)},An=null===Mn?[]:De.flatMap((e,t)=>{if(!Te.visible[t]||kn&&kn.series!==t)return[];const n=Qe[t]?.[Mn];return n&&null!==n.value?[{seriesIndex:t,name:e.name,color:n.color??et[t],value:n.value,formatted:fn(t)(n.value),label:n.label}]:[]}),Pn=kn&&ce?ce(kn):null,Bn=new Map;let jn=0,Tn=0;for(const e of An){const t=e.value??0,n=_?t<0?Tn:jn:t,a=_?n+t:t;_&&t<0?Tn=a:_&&(jn=a),Bn.set(e.seriesIndex,[sn(n,e.seriesIndex),sn(a,e.seriesIndex)])}const En=(e,t)=>{const[n,a]=Bn.get(e.seriesIndex)??[t,t];return Math.max(0,Math.min(n,a)-t,t-Math.max(n,a))},$n=Pn?Pn.items:"item"===yn&&An.length>1&&null!==Ye?[An.reduce((e,t)=>En(t,Ye)<En(e,Ye)?t:e)]:An,Fn=kn?Qe[kn.series]?.[kn.index]?.x??He?.[kn.index]??kn.index:void 0,Rn=e=>"number"==typeof e&&Nt?P(he,{}).format(e):x(e,he),In=kn?kn.x:R?Bn.get($n[0]?.seriesIndex??-1)?.[1]??sn($n[0]?.value??0,$n[0]?.seriesIndex):an.left+on(Mn??0),Wn=kn?kn.y:R?an.top+on(Mn??0):an.top,_n=kn?(kn.x-an.left)/Math.max(1,an.width)>.6:(R?(In-an.left)/Math.max(1,an.width):on(Mn??0)/Math.max(1,ln))>.6,Ln=!1===fe?{interactive:!1}:!0===fe||void 0===fe?{}:fe,Dn=!0===fe||!1!==fe&&De.length>1,Hn=Ln.side??"bottom",On={...xn,hovered:Te.hovered,activeIndex:Mn,marks:gn,activeMark:kn},Vn=0===tt||null===ft||"value"===te&&null===St,Zn=Le&&Vn&&rt.some((e,t)=>Te.visible[t]&&e.some(e=>null!==e.value)),Xn=Vn&&!Zn;return n(ChartSurface,{...Se,size:ye,variant:ke,padded:Me,className:we,legendSide:Hn,legend:Dn?e(ChartLegendBar,{series:De,colors:et,options:Ln,visibility:Te,size:ye,swatch:oe,values:Ln.showValue&&null!==Mn?De.map((e,t)=>{const n=Qe[t]?.[Mn]?.value;return null==n?void 0:fn(t)(n)}):void 0}):null,table:Xn?null:n(t,{children:[le?.(Be,Ke)??e(K,{id:Be,caption:me,corner:Mt?.label,categories:it,series:f,values:rt,format:Ke,formatFor:ut?fn:void 0,locale:he}),pn.length>0?e("ul",{className:W,children:pn.map((e,t)=>n("li",{children:[e.label,": ",vn(e)]},t))}):null]}),children:[pe&&!Xn?e(ChartExport,{rows:re??(()=>[["string"==typeof Mt?.label?Mt.label:"",...De.map((e,t)=>e.name??`${t+1}`)],...it.map((e,t)=>[e,...rt.map(e=>e[t]?.value??null)])]),fileName:ve,onExport:be,label:Pe.exportCsv}):null,n("div",{ref:Ne,role:"img",tabIndex:Vn?void 0:0,"aria-label":me??Pe.label,"aria-describedby":Vn?void 0:je,onPointerMove:Sn,onPointerDown:e=>{"touch"===e.pointerType&&Sn(e)},onPointerLeave:e=>{"touch"!==e.pointerType&&Cn()},onKeyDown:"none"===yn?void 0:e=>{const t=R?"ArrowDown":"ArrowRight",n=R?"ArrowUp":"ArrowLeft";if(e.key===t)zn(1);else if(e.key===n)zn(-1);else if("Home"===e.key)Nn(0);else if("End"===e.key)Nn(wn-1);else{if("Escape"!==e.key)return;Cn()}e.preventDefault()},onBlur:Cn,className:F("relative w-full","rounded-(--neba-radius-xs)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2"),style:{height:"string"==typeof ue?ue:bt},children:[Vn?e("div",{className:F("flex h-full items-center justify-center text-(--neba-muted-fg)",I[ye]),style:Zn?{paddingBottom:Kt}:void 0,children:ge??Ae.title}):ze>0?n("svg",{width:ze,height:nn||"100%",viewBox:`0 0 ${ze} ${nn}`,"aria-hidden":"true",className:"block overflow-visible",children:[e(ChartAxes,{plot:an,scale:wt,band:rn,horizontal:R,inset:G,categoryPx:on,valuePx:sn,tickTexts:zt,widestTick:Bt,categoryTexts:Xt,widestCategory:Yt,categoryScale:Nt,categoryValuePx:un,valueAxis:kt,categoryAxis:Mt,secondScale:Ct,secondTickTexts:jt,secondaryAxis:M,fontSize:yt,turn:_t,labelDepth:Jt,zeroPx:hn}),E&&E.length>0?e(ChartReferences,{references:E,plot:an,horizontal:R,valuePx:sn,categoryPx:on,categoryScale:Nt,categoryValuePx:un,categoryBounds:Nt?[Nt.min,Nt.max]:G?[We,We+tt-1]:[We-.5,We+tt-.5],categoryOffset:We,fontSize:yt}):null,null===Mn||ne||"index"!==yn||!1===bn.crosshair?null:(()=>{const t=on(Mn);return e("line",R?{x1:an.left,x2:an.left+an.width,y1:an.top+t,y2:an.top+t,stroke:"var(--neba-chart-baseline)",strokeWidth:1}:{x1:an.left+t,x2:an.left+t,y1:an.top,y2:an.top+an.height,stroke:"var(--neba-chart-baseline)",strokeWidth:1})})(),Ce(On)]}):null,null!==Mn&&$n.length>0&&"none"!==yn?bn.render?e("div",{className:"pointer-events-none absolute z-10",style:_n?{right:`calc(100% - ${In}px + 10px)`,top:Wn}:{left:In+10,top:Wn},children:bn.render({index:Mn,category:Fn??nt[Mn],items:$n})}):e(ChartTooltipPanel,{heading:Pn?Pn.heading:Rn(Fn??nt[Mn]),items:$n,x:In,y:Wn,flip:_n,size:ye}):null]}),$e&&!Xn?e(l.Suspense,{fallback:null,children:e(U,{outline:ct,count:Ee,range:[We,_e],onRange:e=>{Re(e),$e.onRangeChange?.(e)},color:et[Math.max(0,Te.visible.indexOf(!0))]??et[0],height:$e.height??32,words:{start:Pe.start,end:Pe.end},label:me??Pe.label,categories:it,locale:he,width:ze})}):null,Vn?null:e(ChartSummary,{id:je,template:Pe.summary,locale:he,...pt,second:vt?{template:Pe.summarySecondary,...vt}:null}),"none"===yn?null:e(ChartStatus,{heading:null===Mn?void 0:Pn?.heading??Rn(Fn??nt[Mn]),items:$n})]})}function ChartAxes({plot:a,scale:l,horizontal:r,categoryPx:i,valuePx:o,tickTexts:s,widestTick:c,categoryTexts:u,widestCategory:d,categoryScale:h,categoryValuePx:m,valueAxis:x,categoryAxis:g,secondScale:p,secondTickTexts:v,secondaryAxis:b,fontSize:w,turn:C,labelDepth:S,zeroPx:N}){const z=!1!==x?.grid&&!x?.hidden,A=r?g:x,P=r?x:g,B=!g?.hidden&&(g?.grid??null!==h),j=e=>h?m(h.ticks[e]):(r?a.top:a.left)+i(e),T=0!==C.angle,E=C.room(d),$=M(u.length,r?a.height:a.width,r?1.8*w:E),F=M(l.ticks.length,r?a.width:a.height,r?Math.max(c,1)+16:2*w),R=u.length>1?Math.abs(j(1)-j(0)):a.width,I=l.ticks.length>1?Math.abs(o(l.ticks[1])-o(l.ticks[0])):a.height,W=f(u.length,$,R,r?1.8*w:T?E:k(u[u.length-1]??"",w)),_=a.top+a.height+C.offset,L=f(l.ticks.length,F,I,r?k(s[s.length-1]??"",w):1.6*w);return n("g",{children:[l.ticks.map((t,i)=>{const c=o(t),u=Math.abs(t)<1e-9;return n("g",{children:[z?e("line",r?{x1:c,x2:c,y1:a.top,y2:a.top+a.height,stroke:u?"var(--neba-chart-baseline)":"var(--neba-chart-grid)",strokeWidth:1}:{x1:a.left,x2:a.left+a.width,y1:c,y2:c,stroke:u?"var(--neba-chart-baseline)":"var(--neba-chart-grid)",strokeWidth:1}):null,x?.hidden||!y(i,l.ticks.length,F,L)?null:e("text",r?{x:c,y:a.top+a.height+w+6,textAnchor:0===i?"start":i===l.ticks.length-1?"end":"middle",fontSize:w,fill:"var(--neba-muted-fg)",className:"tabular-nums",children:s[i]}:{x:a.left-8,y:c,textAnchor:"end",dominantBaseline:"central",fontSize:w,fill:"var(--neba-muted-fg)",className:"tabular-nums",children:s[i]})]},t)}),g?.hidden?null:n(t,{children:[e("line",r?{x1:N,x2:N,y1:a.top,y2:a.top+a.height,stroke:"var(--neba-chart-axis)",strokeWidth:1}:{x1:a.left,x2:a.left+a.width,y1:N,y2:N,stroke:"var(--neba-chart-axis)",strokeWidth:1}),u.map((t,l)=>{const i=j(l),o=y(l,u.length,$,W);return r?o?e("text",{x:a.left-8,y:i,textAnchor:"end",dominantBaseline:"central",fontSize:w,fill:"var(--neba-muted-fg)",className:h?"tabular-nums":void 0,children:t},l):null:n("g",{children:[B?e("line",{x1:i,x2:i,y1:a.top,y2:a.top+a.height,stroke:"var(--neba-chart-grid)",strokeWidth:1}):null,o?e("text",{x:i,y:_,textAnchor:T?C.anchor:h?0===l?"start":l===u.length-1?"end":"middle":"middle",transform:T?`rotate(${C.angle} ${i} ${_})`:void 0,dominantBaseline:T?"central":void 0,fontSize:w,fill:"var(--neba-muted-fg)",className:h?"tabular-nums":void 0,children:t}):null]},l)})]}),p&&!b?.hidden?p.ticks.map((t,n)=>{const l=r?a.left+p.fraction(t)*a.width:a.top+(1-p.fraction(t))*a.height;return y(n,p.ticks.length,F,L)?e("text",r?{x:l,y:a.top-8,textAnchor:0===n?"start":n===p.ticks.length-1?"end":"middle",fontSize:w,fill:"var(--neba-muted-fg)",className:"tabular-nums",children:v[n]}:{x:a.left+a.width+8,y:l,textAnchor:"start",dominantBaseline:"central",fontSize:w,fill:"var(--neba-muted-fg)",className:"tabular-nums",children:v[n]},t):null}):null,p&&b?.label&&!b.hidden?e("text",{x:a.left+a.width,y:w+2,textAnchor:"end",fontSize:w,fill:"var(--neba-muted-fg)",fontWeight:500,children:b.label}):null,A?.label&&!A.hidden?e("text",{x:a.left,y:w+2,textAnchor:"start",fontSize:w,fill:"var(--neba-muted-fg)",fontWeight:500,children:A.label}):null,P?.label&&!P.hidden?e("text",{x:a.left+a.width,y:a.top+a.height+S+w+12,textAnchor:"end",fontSize:w,fill:"var(--neba-muted-fg)",fontWeight:500,children:P.label}):null]})}export{K as ChartDataTable,ChartExport,ChartLegendBar,ChartScaleLegend,ChartStatus,ChartSummary,ChartSurface,ChartTooltipPanel,J as summarise,V as chartHeight,O as useMeasuredHeight,H as useMeasuredWidth,q as useReleaseOutside,Z as useVisibility};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as l,jsxs as e}from"react/jsx-runtime";import{areaPath as r,chartFontSizes as t,labelInk as o,labelledPoints as n,linePath as a,lineWidths as i,markerRadii as s,markGap as u}from"./chart.js";import{markTransitionClasses as c}from"./chart-frame.js";export function LineSeries({context:f,curve:p,filled:d,stacked:m,markers:x,valueLabels:h,connectNulls:k,gradient:v,idPrefix:$}){const{values:b,visible:y,colors:g,hovered:j,activeIndex:C,plot:L,point:N,zeroPxOf:W,size:z,
|
|
1
|
+
import{jsx as l,jsxs as e}from"react/jsx-runtime";import{areaPath as r,chartFontSizes as t,labelInk as o,labelledPoints as n,linePath as a,lineWidths as i,markerRadii as s,markGap as u}from"./chart.js";import{markTransitionClasses as c}from"./chart-frame.js";export function LineSeries({context:f,curve:p,filled:d,stacked:m,markers:x,valueLabels:h,connectNulls:k,gradient:v,idPrefix:$}){const{values:b,visible:y,colors:g,hovered:j,activeIndex:C,plot:L,point:N,zeroPxOf:W,size:z,formatFor:B}=f,O=i[z],S=s[z],w=y.indexOf(!0),E=[],G=[],P=[];return b.forEach((l,e)=>{const r=l.map((l,e)=>(l.value??0)<0?P[e]??0:G[e]??0);E.push(r),m&&y[e]&&l.forEach((l,e)=>{const r=l.value??0;r<0?P[e]=(P[e]??0)+r:G[e]=(G[e]??0)+r})}),e("g",{children:[e("defs",{children:[v?g.map((r,t)=>e("linearGradient",{id:`${$}-stroke-${t}`,gradientUnits:"userSpaceOnUse",x1:L.left,y1:0,x2:L.left+L.width,y2:0,children:[l("stop",{offset:"0%",stopColor:`color-mix(in oklab, ${r} 45%, transparent)`}),l("stop",{offset:"100%",stopColor:r})]},`stroke-${t}`)):null,d&&!m?g.map((r,t)=>e("linearGradient",{id:`${$}-fill-${t}`,x1:"0",y1:"0",x2:"0",y2:"1",children:[l("stop",{offset:"0%",stopColor:`color-mix(in oklab, ${r} 28%, transparent)`}),l("stop",{offset:"100%",stopColor:`color-mix(in oklab, ${r} 2%, transparent)`})]},`fill-${t}`)):null]}),b.map((i,s)=>{if(!y[s])return null;const f=g[s],b=null!==j&&j!==s,G=i.map((l,e)=>{if(null===l.value)return null;const r=m?E[s][e]+l.value:l.value;return N(e,r,s)}),P=k?G.filter(Boolean):G,U=W(s),A=i.map((l,e)=>null===l.value?null:m?N(e,E[s][e],s):{x:N(e,l.value,s).x,y:U}),F=d&&m,I=n(i,h);return e("g",{opacity:b?.28:1,className:c,children:[d?l("path",{d:r(P,k?A.filter(Boolean):A,p),fill:m?`color-mix(in oklab, ${f} 70%, transparent)`:`url(#${$}-fill-${s})`,stroke:"none"}):null,F&&s!==w?l("path",{d:a(k?A.filter(Boolean):A,p),fill:"none",stroke:"var(--neba-chart-gap)",strokeWidth:u}):null,F?null:l("path",{d:a(P,p),fill:"none",stroke:v?`url(#${$}-stroke-${s})`:f,strokeWidth:O,strokeLinecap:"round",strokeLinejoin:"round"}),G.map((e,r)=>{if(!e)return null;return"all"===x||"auto"===x&&i.length<=14||r===C?l("circle",{cx:e.x,cy:e.y,r:r===C?S+1:S,fill:i[r].color??f,stroke:"var(--neba-chart-gap)",strokeWidth:u,className:c},r):null}),"none"===h?null:G.map((e,r)=>{const n=i[r].value;return e&&null!==n&&I(r)?l("text",{x:e.x,y:e.y-S-5,textAnchor:e.x>L.left+L.width-24?"end":e.x<L.left+24?"start":"middle",fontSize:t[z],fontWeight:500,fill:o(i[r].color??f),className:"tabular-nums",children:i[r].label??B(s)(n)},`label-${r}`):null})]},s)})]})}
|
package/dist/internal/chart.d.ts
CHANGED
|
@@ -279,6 +279,27 @@ export declare function valueScale(extent: {
|
|
|
279
279
|
/** Keeps zero in range. Off for a line chart told an explicit `min`. */
|
|
280
280
|
includeZero?: boolean;
|
|
281
281
|
}): ValueScale;
|
|
282
|
+
/**
|
|
283
|
+
* A second value axis' scale, cut into exactly as many intervals as the first
|
|
284
|
+
* axis has, so that each of its ticks sits on one of the first axis' gridlines.
|
|
285
|
+
*
|
|
286
|
+
* Asking `valueScale` for the same tick count is not enough: the count is a
|
|
287
|
+
* wish that clean numbers overrule, so a revenue axis of seven intervals beside
|
|
288
|
+
* a rate axis of five drew two sets of lines crossing each other, and the far
|
|
289
|
+
* edge's labels, thinned at the first axis' stride, stood beside nothing. Here
|
|
290
|
+
* the count is the fixed thing and the step gives: the smallest 1-2-5 step
|
|
291
|
+
* whose run of intervals, started on a multiple of itself, still covers the
|
|
292
|
+
* data. Both ends pinned leaves nothing to round, and the step is the range
|
|
293
|
+
* divided by the count, whatever number that is.
|
|
294
|
+
*/
|
|
295
|
+
export declare function alignedScale(extent: {
|
|
296
|
+
min: number;
|
|
297
|
+
max: number;
|
|
298
|
+
} | null, intervals: number, options?: {
|
|
299
|
+
min?: number;
|
|
300
|
+
max?: number;
|
|
301
|
+
includeZero?: boolean;
|
|
302
|
+
}): ValueScale;
|
|
282
303
|
/** The units a time axis is allowed to step in. */
|
|
283
304
|
export type TimeUnit = 'second' | 'minute' | 'hour' | 'day' | 'week' | 'month' | 'quarter' | 'year';
|
|
284
305
|
/** A value scale whose numbers are instants, and the unit its ticks step in. */
|