neba 1.5.0 → 1.7.0

package/dist/components/window-pane/WindowPane.d.ts

@@ -0,0 +1,178 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { NebaWindowControl, NebaWindowOffset, NebaWindowOs } from '../../internal/window.js';
+import type { NebaColor, NebaElevation, NebaSize } from '../../types.js';
+export type { NebaWindowControl, NebaWindowOffset, NebaWindowOs } from '../../internal/window.js';
+/** The three CSS positions a window can be laid out with. */
+export type WindowPanePosition = 'static' | 'absolute' | 'fixed';
+/** What a resize reports: the window's size in pixels. */
+export interface WindowPaneSize {
+    width: number;
+    height: number;
+}
+export interface WindowPaneProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'title' | 'onResize'> {
+    /**
+     * Whose window this is a picture of. Decides where the controls sit, how they
+     * are drawn, how tall the title bar is and how its corners are cut.
+     * @default 'macos'
+     */
+    os?: NebaWindowOs;
+    /** The window's name, in the title bar. Also what names the window itself. */
+    title?: React.ReactNode;
+    /** A glyph beside the title — the app's mark. */
+    icon?: React.ReactNode;
+    /** Anything else the title bar carries, set beside the controls. */
+    actions?: React.ReactNode;
+    /**
+     * Which of the three buttons the title bar has. `true` is all of them,
+     * `false` is none, and an array is exactly the ones named — a window that can
+     * be closed but not minimized is `['close']`.
+     *
+     * The order is the system's rather than the array's: macOS puts close first
+     * and Windows puts it last, and that is not something a caller should have to
+     * remember.
+     * @default true
+     */
+    controls?: boolean | readonly NebaWindowControl[];
+    /**
+     * The scale of the chrome — the title bar's height, its buttons and its type.
+     * It does not touch the content, which is the caller's and is laid out at its
+     * own scale, exactly as it would be on a desktop where the title bar does not
+     * grow with the document.
+     * @default 'md'
+     */
+    size?: NebaSize;
+    /** The colour family the focus rings and an `accent` title bar take. @default 'primary' */
+    color?: NebaColor;
+    /**
+     * Dyes the title bar with the colour family, the way Windows offers to. Off,
+     * the bar is the neutral shade the system draws by default.
+     * @default false
+     */
+    accent?: boolean;
+    /**
+     * How much of what is behind the window shows through its chrome, from `0` to
+     * `1`. It applies to the title bar, the body's own fill and the border —
+     * never to the content on it, which stays exactly as legible as it was.
+     *
+     * Anything above `0` also turns the acrylic on, so the page underneath is
+     * blurred rather than merely visible. `1` is a window that is nothing but its
+     * edge and its chrome.
+     * @default 0
+     */
+    transparency?: number;
+    /**
+     * Whether this is the window in front.
+     *
+     * Left out, the window works it out for itself: it is in front until another
+     * WindowPane on the page is pressed or takes the focus, exactly as windows on
+     * a desktop behave. A click on the page *around* the windows changes nothing
+     * — a paragraph is not a desktop.
+     *
+     * Pass it to drive that yourself, which is what a caller keeping its own
+     * z-order wants.
+     *
+     * What being in front looks like is the system's: coloured traffic lights on
+     * macOS against grey ones, an accent title bar and an accent border on
+     * Windows 10, a tinted header bar on GNOME — and, on all four, a window one
+     * step further off the page than the ones behind it.
+     */
+    active?: boolean;
+    /**
+     * The shadow around the window. `2` here, against the `0` everything else
+     * defaults to, for the reason Pill's is `2`: a window is by definition not
+     * part of the page it is on.
+     * @default 2
+     */
+    elevation?: NebaElevation;
+    /**
+     * How the window is laid out. `static` leaves it in the flow (as a
+     * relatively positioned box, so `offset` can move it without disturbing
+     * anything around it); `absolute` pins it inside the nearest positioned
+     * ancestor, which is what a desktop full of windows wants; `fixed` pins it to
+     * the viewport.
+     * @default 'static'
+     */
+    position?: WindowPanePosition;
+    /** Lets the title bar be dragged. @default false */
+    draggable?: boolean;
+    /** Lets the edges and corners be dragged. @default false */
+    resizable?: boolean;
+    /** The window's width — a number in pixels or any CSS length. */
+    width?: number | string;
+    /** And its height. Left out, the window is as tall as what is in it. */
+    height?: number | string;
+    /** How small it may be dragged, in pixels. @default 180 */
+    minWidth?: number;
+    /** The same downward. Defaults to the title bar's own height. */
+    minHeight?: number;
+    /** How far it has been dragged from where the layout put it. */
+    offset?: NebaWindowOffset;
+    /** Where an uncontrolled window starts. @default { x: 0, y: 0 } */
+    defaultOffset?: NebaWindowOffset;
+    onOffsetChange?: (offset: NebaWindowOffset) => void;
+    /** Fires with the window's size, in pixels, while an edge is dragged. */
+    onResize?: (size: WindowPaneSize) => void;
+    /** Whether the window is on screen at all. Closing it renders nothing. */
+    open?: boolean;
+    /** @default true */
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Whether the window is rolled up to its title bar. This is what minimizing
+     * means for a window that is part of a page rather than of a desktop: there
+     * is no dock for it to go to, so it stays where it is with nothing under the
+     * bar.
+     */
+    minimized?: boolean;
+    /** @default false */
+    defaultMinimized?: boolean;
+    onMinimizedChange?: (minimized: boolean) => void;
+    /**
+     * Whether the window fills whatever is holding it. Its corners go square
+     * while it does, as they do on every system.
+     */
+    maximized?: boolean;
+    /** @default false */
+    defaultMaximized?: boolean;
+    onMaximizedChange?: (maximized: boolean) => void;
+    /** Whether content taller than the window scrolls. @default true */
+    scroll?: boolean;
+    /**
+     * Which language the title bar's buttons name themselves in — a BCP 47 tag
+     * such as `ko`, `pt-BR` or `zh-Hant`. Unsupported tags fall back to English.
+     */
+    locale?: string;
+    /** Overrides the buttons' own names. */
+    minimizeLabel?: string;
+    maximizeLabel?: string;
+    restoreLabel?: string;
+    closeLabel?: string;
+    resizeLabel?: string;
+    /** Renders something other than a `<div>`: `render={<section />}`. */
+    render?: useRender.RenderProp;
+    /** What is in the window. */
+    children?: React.ReactNode;
+}
+/**
+ * A window, drawn the way one of four systems draws it, with anything at all
+ * inside it.
+ *
+ * It is not a real window and does not pretend to be one: there is no desktop,
+ * no z-order and no dock. What it is is a *frame that behaves* — the title bar
+ * drags, the corners resize, the three buttons are real buttons with real names
+ * — so a screenshot of an app, a demo of a feature or a piece of a landing page
+ * can be shown as the thing it will be rather than as a picture of it.
+ *
+ * Nothing here is transformed. A dragged window moves on `left` and `top` and a
+ * resized one changes `width` and `height`, which is what keeps the text inside
+ * it at whole pixels through both gestures — a `translate()` would resample
+ * every glyph in the window for the length of the drag, which is exactly what
+ * the house rule against transforming a surface exists to prevent.
+ *
+ * `minimize` rolls the window up to its title bar rather than sending it
+ * anywhere, because a page has nowhere to send it to. `maximize` fills whatever
+ * is holding the window, which is the container for `position="absolute"` and
+ * the viewport for `fixed`.
+ */
+export declare const WindowPane: React.ForwardRefExoticComponent<WindowPaneProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/window-pane/WindowPane.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import*as i from"react";import{useRender as r}from"@base-ui/react/use-render";import{actionMessages as o,useMessages as s,windowMessages as a}from"../../internal/i18n.js";import{cx as l,hasContent as d,iconClasses as c,surfaceClasses as u}from"../../internal/styles.js";import{WindowControls as m,orderControls as h,windowChrome as g,windowMetrics as w,windowSlots as f}from"../../internal/window.js";function p(e,t,n){const[r,o]=i.useState(t),s=void 0!==e;return[s?e:r,i.useCallback(e=>{s||o(e),n?.(e)},[s,n])]}const b=[{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"}];export const WindowPane=/*@__PURE__*/i.forwardRef(function({os:v="macos",title:x,icon:y,actions:z,controls:E=!0,size:N="md",color:k="primary",accent:C=!1,transparency:L=0,active:M,elevation:S=2,position:P="static",draggable:R=!1,resizable:I=!1,width:j,height:B,minWidth:D=180,minHeight:A,offset:T,defaultOffset:H,onOffsetChange:W,onResize:O,open:X,defaultOpen:$=!0,onOpenChange:F,minimized:Y,defaultMinimized:_=!1,onMinimizedChange:q,maximized:K,defaultMaximized:U=!1,onMaximizedChange:V,scroll:G=!0,locale:J,minimizeLabel:Q,maximizeLabel:Z,restoreLabel:ee,closeLabel:te,resizeLabel:ne,render:ie,className:re,style:oe,children:se,...ae},le){const de=s(a,J),ce=s(o,J),ue=g(v),me=w(v,N),he=i.useId(),[ge,we]=p(X,$,F),[fe,pe]=p(Y,_,q),[be,ve]=p(K,U,V),[xe,ye]=p(T,H??{x:0,y:0},W),[ze,Ee]=i.useState(null),[Ne,ke]=i.useState(!0),Ce=M??Ne,[Le,Me]=i.useState(null),[Se,Pe]=i.useState(null),[Re,Ie]=i.useState(!1),[je,Be]=i.useState(!1),[De,Ae]=i.useState(ge);De!==ge&&(Ae(ge),Be(!ge)),i.useEffect(()=>{if(!je)return;const e=window.setTimeout(()=>Be(!1),260);return()=>window.clearTimeout(e)},[je]);const Te=i.useRef(null),He=i.useCallback(e=>{Te.current=e,"function"==typeof le?le(e):le&&(le.current=e)},[le]);i.useEffect(()=>{if(void 0!==M)return;const e=Te.current;if(!e)return;const t=t=>{const n=t.target;if(!(n instanceof Node))return;if(e.contains(n))return void ke(!0);const i=n instanceof Element?n:n.parentElement;i?.closest(".neba-window")&&ke(!1)};return document.addEventListener("pointerdown",t,!0),document.addEventListener("focusin",t,!0),()=>{document.removeEventListener("pointerdown",t,!0),document.removeEventListener("focusin",t,!0)}},[M]);const We=i.useRef(null);function Oe(e,t){if(0!==e.button)return;We.current?.();const n=e.currentTarget;n.setPointerCapture(e.pointerId),n.dataset.dragging="true",Ie(!0);const i=e.clientX,r=e.clientY,o=document.body.style.getPropertyValue("-webkit-user-select");document.body.style.setProperty("-webkit-user-select","none");const s=e=>{t(e.clientX-i,e.clientY-r)},a=()=>{We.current=null,Ie(!1),n.removeEventListener("pointermove",s),n.removeEventListener("pointerup",a),n.removeEventListener("pointercancel",a),delete n.dataset.dragging,o?document.body.style.setProperty("-webkit-user-select",o):document.body.style.removeProperty("-webkit-user-select")};We.current=a,n.addEventListener("pointermove",s),n.addEventListener("pointerup",a),n.addEventListener("pointercancel",a)}i.useEffect(()=>()=>We.current?.(),[]);const Xe={width:Math.max(0,D),height:Math.max(me.bar,A??me.bar)};function $e(e){Ee(e),O?.(e)}const Fe=h(v,!0===E?["minimize","maximize","close"]:!1===E?[]:E),Ye=Fe.includes("maximize");i.useEffect(()=>{if(fe||null===Se)return;const e=window.setTimeout(()=>Pe(null),400);return()=>window.clearTimeout(e)},[fe,Se]);const _e={minimize:Q??de.minimize,maximize:Z??de.maximize,restore:ee??de.restore,close:te??ce.close},qe=e(m,{os:v,metrics:me,controls:Fe,maximized:be,active:Ce,labels:_e,onCommand:function(e){"close"===e?we(!1):"minimize"===e?function(e){const t=Te.current,n=t?.firstElementChild;if(t&&n instanceof HTMLElement&&Me(n.offsetHeight+(t.offsetHeight-t.clientHeight)),e&&void 0===(ze?.height??B)&&t)return Pe(t.getBoundingClientRect().height),void requestAnimationFrame(()=>pe(!0));pe(e)}(!fe):ve(!be)}}),Ke=d(x)?e("span",{id:he,className:"min-w-0 truncate",children:x}):null,Ue=d(y)?e("span",{className:"flex shrink-0 items-center",children:y}):null,Ve=t("div",{className:l("relative flex shrink-0 items-center select-none",c,R&&!be?"cursor-grab active:cursor-grabbing":""),style:{height:me.bar,textShadow:"var(--n-window-bar-shadow)",fontWeight:me.weight,paddingInlineStart:me.padX,paddingInlineEnd:me.padEnd,gap:Math.round(.7*me.title),fontSize:me.title,backgroundColor:"var(--n-window-bar)",backgroundImage:"var(--n-window-bar-image)",color:"var(--n-window-bar-fg)",borderBlockEnd:ue.rule?"1px solid var(--n-window-line)":void 0},onPointerDown:function(e){if(!R||be)return;const t={...xe};Oe(e,(e,n)=>ye({x:t.x+e,y:t.y+n}))},onDoubleClick:Ye?()=>ve(!be):void 0,children:["start"===ue.controlsSide?qe:null,"center"===ue.titleAlign?e("span",{"aria-hidden":"true",className:"pointer-events-none absolute inset-x-0 flex items-center justify-center",style:{paddingInline:me.controlsWidth(Fe.length)+2*me.padX},children:t("span",{className:"flex min-w-0 items-center",style:{gap:Math.round(.5*me.title)},children:[Ue,Ke]})}):t(n,{children:[Ue,Ke]}),e("span",{className:"flex-1"}),d(z)?e("span",{className:"flex shrink-0 items-center",style:{gap:Math.round(.5*me.title)},onPointerDown:e=>e.stopPropagation(),children:z}):null,"end"===ue.controlsSide?qe:null]}),Ge=be?{left:0,top:0,width:"100%",height:"100%"}:{left:xe.x,top:xe.y,width:ze?.width??j,height:fe?Le??me.bar:ze?.height??B??Se??void 0},Je=r({render:ie,ref:He,props:{role:"group","aria-labelledby":Ke?he:void 0,className:l("neba-window relative flex min-w-0 flex-col overflow-hidden",L>0?u:"",ue.glass&&0===L?"[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]",re),"data-gesture":Re?"":void 0,inert:!ge||void 0,style:{opacity:ge?void 0:0,...f({os:v,color:k,accent:C,transparency:L,active:Ce,elevation:S}),position:"static"===P?"relative":P,...Ge,borderRadius:be?0:`${me.radius}px ${me.radius}px ${me.radiusBottom}px ${me.radiusBottom}px`,borderStyle:"solid",borderWidth:me.frame,borderColor:"var(--n-window-line)",backgroundColor:"var(--n-window-band)",boxShadow:"var(--n-window-shadow), var(--neba-plate-glass)",...oe},children:t(n,{children:[Ve,e("div",{className:l("min-h-0 flex-1",G?"overflow-auto":"overflow-hidden"),style:{backgroundColor:"var(--n-window-body)",marginInline:me.band.side,marginBottom:me.band.bottom,boxShadow:me.band.side>0?"inset 0 0 0 1px rgb(0 0 0 / 0.12)":void 0},inert:fe,children:se}),!I||be||fe?null:b.map(t=>{const n="se"===t.edge;return e("div",{role:n?"button":void 0,tabIndex:n?0:void 0,"aria-label":n?ne??de.resize:void 0,"aria-hidden":n?void 0:"true",className:l("absolute z-10 touch-none",t.className,n?"focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:[outline-offset:-2px]":""),onPointerDown:e=>function(e,t){const n=Te.current;if(!n||be)return;const i=n.getBoundingClientRect(),r={width:i.width,height:i.height,x:xe.x,y:xe.y},o=e.includes("e"),s=e.includes("w"),a=e.includes("n"),l=e.includes("s");Oe(t,(e,t)=>{let{width:n,height:i}=r,{x:d,y:c}=r;o&&(n=Math.max(Xe.width,r.width+e)),l&&(i=Math.max(Xe.height,r.height+t)),s&&(n=Math.max(Xe.width,r.width-e),d=r.x+(r.width-n)),a&&(i=Math.max(Xe.height,r.height-t),c=r.y+(r.height-i)),$e({width:n,height:i}),(s||a)&&ye({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=Te.current;if(!n)return;const i=n.getBoundingClientRect();$e({width:Math.max(Xe.width,i.width+e),height:Math.max(Xe.height,i.height+t)})}(t[0],t[1]))}:void 0},t.edge)})]}),...ae}});return ge||je?Je:null});

package/dist/components/window-pane/index.d.ts

@@ -0,0 +1,2 @@
+export { WindowPane } from './WindowPane.js';
+export type { NebaWindowControl, NebaWindowOffset, NebaWindowOs, WindowPanePosition, WindowPaneProps, WindowPaneSize } from './WindowPane.js';

package/dist/components/window-pane/index.js

@@ -0,0 +1 @@
+export{WindowPane}from"./WindowPane.js";

package/dist/index.d.ts

@@ -1,89 +1,92 @@
-export * from './types';
-export * from './components/accordion';
-export * from './components/alert';
-export * from './components/animate-appear';
-export * from './components/animate-blink';
-export * from './components/animate-fade';
-export * from './components/animate-grow';
-export * from './components/animate-headline';
-export * from './components/animate-lighting';
-export * from './components/animate-marquee';
-export * from './components/animate-rotate';
-export * from './components/animate-slide';
-export * from './components/animate-typing';
-export * from './components/animate-zoom';
-export * from './components/area-chart';
-export * from './components/aspect-ratio';
-export * from './components/avatar';
-export * from './components/badge';
-export * from './components/bar-chart';
-export * from './components/blockquote';
-export * from './components/bottom-navigation';
-export * from './components/box';
-export * from './components/breadcrumb';
-export * from './components/button';
-export * from './components/button-group';
-export * from './components/card';
-export * from './components/carousel';
-export * from './components/chat-bubble';
-export * from './components/checkbox';
-export * from './components/chip';
-export * from './components/collapsible';
-export * from './components/color-picker';
-export * from './components/combobox';
-export * from './components/container';
-export * from './components/data-table';
-export * from './components/date-picker';
-export * from './components/date-range-picker';
-export * from './components/date-time-picker';
-export * from './components/dialog';
-export * from './components/divider';
-export * from './components/drawer';
-export * from './components/empty';
-export * from './components/file-picker';
-export * from './components/grid';
-export * from './components/floating-action-button';
-export * from './components/grid-container';
-export * from './components/heatmap-chart';
-export * from './components/highlight';
-export * from './components/icon';
-export * from './components/icon-button';
-export * from './components/line-chart';
-export * from './components/list';
-export * from './components/menu';
-export * from './components/mockup';
-export * from './components/number-field';
-export * from './components/otp-field';
-export * from './components/overlay';
-export * from './components/pagination';
-export * from './components/panes';
-export * from './components/pie-chart';
-export * from './components/pill';
-export * from './components/popover';
-export * from './components/progress-box';
-export * from './components/progress-circular';
-export * from './components/progress-linear';
-export * from './components/radio-group';
-export * from './components/rating';
-export * from './components/scatter-chart';
-export * from './components/segmented-button';
-export * from './components/select';
-export * from './components/shortcut';
-export * from './components/skeleton';
-export * from './components/slider';
-export * from './components/sparkline';
-export * from './components/spoiler';
-export * from './components/statistic';
-export * from './components/switch';
-export * from './components/table';
-export * from './components/tabs';
-export * from './components/text-field';
-export * from './components/text-link';
-export * from './components/time-picker';
-export * from './components/timeline';
-export * from './components/timeline-chart';
-export * from './components/toast';
-export * from './components/toolbar';
-export * from './components/tooltip';
-export * from './components/tree-view';
-export * from './components/typography';
+export * from './types.js';
+export * from './components/accordion/index.js';
+export * from './components/alert/index.js';
+export * from './components/animate-appear/index.js';
+export * from './components/animate-blink/index.js';
+export * from './components/animate-fade/index.js';
+export * from './components/animate-grow/index.js';
+export * from './components/animate-headline/index.js';
+export * from './components/animate-lighting/index.js';
+export * from './components/animate-marquee/index.js';
+export * from './components/animate-rotate/index.js';
+export * from './components/animate-slide/index.js';
+export * from './components/animate-typing/index.js';
+export * from './components/animate-zoom/index.js';
+export * from './components/area-chart/index.js';
+export * from './components/aspect-ratio/index.js';
+export * from './components/avatar/index.js';
+export * from './components/badge/index.js';
+export * from './components/bar-chart/index.js';
+export * from './components/blockquote/index.js';
+export * from './components/bottom-navigation/index.js';
+export * from './components/box/index.js';
+export * from './components/breadcrumb/index.js';
+export * from './components/button/index.js';
+export * from './components/button-group/index.js';
+export * from './components/card/index.js';
+export * from './components/carousel/index.js';
+export * from './components/chat-bubble/index.js';
+export * from './components/checkbox/index.js';
+export * from './components/chip/index.js';
+export * from './components/collapsible/index.js';
+export * from './components/color-picker/index.js';
+export * from './components/combobox/index.js';
+export * from './components/container/index.js';
+export * from './components/data-table/index.js';
+export * from './components/date-picker/index.js';
+export * from './components/date-range-picker/index.js';
+export * from './components/date-time-picker/index.js';
+export * from './components/dialog/index.js';
+export * from './components/divider/index.js';
+export * from './components/drawer/index.js';
+export * from './components/empty/index.js';
+export * from './components/file-picker/index.js';
+export * from './components/grid/index.js';
+export * from './components/floating-action-button/index.js';
+export * from './components/floating-bottom-navigation/index.js';
+export * from './components/grid-container/index.js';
+export * from './components/heatmap-chart/index.js';
+export * from './components/highlight/index.js';
+export * from './components/icon/index.js';
+export * from './components/icon-button/index.js';
+export * from './components/line-chart/index.js';
+export * from './components/list/index.js';
+export * from './components/menu/index.js';
+export * from './components/mockup/index.js';
+export * from './components/number-field/index.js';
+export * from './components/otp-field/index.js';
+export * from './components/overlay/index.js';
+export * from './components/pagination/index.js';
+export * from './components/panes/index.js';
+export * from './components/pie-chart/index.js';
+export * from './components/pill/index.js';
+export * from './components/popover/index.js';
+export * from './components/progress-box/index.js';
+export * from './components/progress-circular/index.js';
+export * from './components/progress-linear/index.js';
+export * from './components/radio-group/index.js';
+export * from './components/rating/index.js';
+export * from './components/scatter-chart/index.js';
+export * from './components/scroll-zone/index.js';
+export * from './components/segmented-button/index.js';
+export * from './components/select/index.js';
+export * from './components/shortcut/index.js';
+export * from './components/skeleton/index.js';
+export * from './components/slider/index.js';
+export * from './components/sparkline/index.js';
+export * from './components/spoiler/index.js';
+export * from './components/statistic/index.js';
+export * from './components/switch/index.js';
+export * from './components/table/index.js';
+export * from './components/tabs/index.js';
+export * from './components/text-field/index.js';
+export * from './components/text-link/index.js';
+export * from './components/time-picker/index.js';
+export * from './components/timeline/index.js';
+export * from './components/timeline-chart/index.js';
+export * from './components/toast/index.js';
+export * from './components/toolbar/index.js';
+export * from './components/tooltip/index.js';
+export * from './components/tree-view/index.js';
+export * from './components/typography/index.js';
+export * from './components/window-pane/index.js';

package/dist/index.js

@@ -1 +1 @@
-export*from"./types";export*from"./components/accordion";export*from"./components/alert";export*from"./components/animate-appear";export*from"./components/animate-blink";export*from"./components/animate-fade";export*from"./components/animate-grow";export*from"./components/animate-headline";export*from"./components/animate-lighting";export*from"./components/animate-marquee";export*from"./components/animate-rotate";export*from"./components/animate-slide";export*from"./components/animate-typing";export*from"./components/animate-zoom";export*from"./components/area-chart";export*from"./components/aspect-ratio";export*from"./components/avatar";export*from"./components/badge";export*from"./components/bar-chart";export*from"./components/blockquote";export*from"./components/bottom-navigation";export*from"./components/box";export*from"./components/breadcrumb";export*from"./components/button";export*from"./components/button-group";export*from"./components/card";export*from"./components/carousel";export*from"./components/chat-bubble";export*from"./components/checkbox";export*from"./components/chip";export*from"./components/collapsible";export*from"./components/color-picker";export*from"./components/combobox";export*from"./components/container";export*from"./components/data-table";export*from"./components/date-picker";export*from"./components/date-range-picker";export*from"./components/date-time-picker";export*from"./components/dialog";export*from"./components/divider";export*from"./components/drawer";export*from"./components/empty";export*from"./components/file-picker";export*from"./components/grid";export*from"./components/floating-action-button";export*from"./components/grid-container";export*from"./components/heatmap-chart";export*from"./components/highlight";export*from"./components/icon";export*from"./components/icon-button";export*from"./components/line-chart";export*from"./components/list";export*from"./components/menu";export*from"./components/mockup";export*from"./components/number-field";export*from"./components/otp-field";export*from"./components/overlay";export*from"./components/pagination";export*from"./components/panes";export*from"./components/pie-chart";export*from"./components/pill";export*from"./components/popover";export*from"./components/progress-box";export*from"./components/progress-circular";export*from"./components/progress-linear";export*from"./components/radio-group";export*from"./components/rating";export*from"./components/scatter-chart";export*from"./components/segmented-button";export*from"./components/select";export*from"./components/shortcut";export*from"./components/skeleton";export*from"./components/slider";export*from"./components/sparkline";export*from"./components/spoiler";export*from"./components/statistic";export*from"./components/switch";export*from"./components/table";export*from"./components/tabs";export*from"./components/text-field";export*from"./components/text-link";export*from"./components/time-picker";export*from"./components/timeline";export*from"./components/timeline-chart";export*from"./components/toast";export*from"./components/toolbar";export*from"./components/tooltip";export*from"./components/tree-view";export*from"./components/typography";
+export*from"./types.js";export*from"./components/accordion/index.js";export*from"./components/alert/index.js";export*from"./components/animate-appear/index.js";export*from"./components/animate-blink/index.js";export*from"./components/animate-fade/index.js";export*from"./components/animate-grow/index.js";export*from"./components/animate-headline/index.js";export*from"./components/animate-lighting/index.js";export*from"./components/animate-marquee/index.js";export*from"./components/animate-rotate/index.js";export*from"./components/animate-slide/index.js";export*from"./components/animate-typing/index.js";export*from"./components/animate-zoom/index.js";export*from"./components/area-chart/index.js";export*from"./components/aspect-ratio/index.js";export*from"./components/avatar/index.js";export*from"./components/badge/index.js";export*from"./components/bar-chart/index.js";export*from"./components/blockquote/index.js";export*from"./components/bottom-navigation/index.js";export*from"./components/box/index.js";export*from"./components/breadcrumb/index.js";export*from"./components/button/index.js";export*from"./components/button-group/index.js";export*from"./components/card/index.js";export*from"./components/carousel/index.js";export*from"./components/chat-bubble/index.js";export*from"./components/checkbox/index.js";export*from"./components/chip/index.js";export*from"./components/collapsible/index.js";export*from"./components/color-picker/index.js";export*from"./components/combobox/index.js";export*from"./components/container/index.js";export*from"./components/data-table/index.js";export*from"./components/date-picker/index.js";export*from"./components/date-range-picker/index.js";export*from"./components/date-time-picker/index.js";export*from"./components/dialog/index.js";export*from"./components/divider/index.js";export*from"./components/drawer/index.js";export*from"./components/empty/index.js";export*from"./components/file-picker/index.js";export*from"./components/grid/index.js";export*from"./components/floating-action-button/index.js";export*from"./components/floating-bottom-navigation/index.js";export*from"./components/grid-container/index.js";export*from"./components/heatmap-chart/index.js";export*from"./components/highlight/index.js";export*from"./components/icon/index.js";export*from"./components/icon-button/index.js";export*from"./components/line-chart/index.js";export*from"./components/list/index.js";export*from"./components/menu/index.js";export*from"./components/mockup/index.js";export*from"./components/number-field/index.js";export*from"./components/otp-field/index.js";export*from"./components/overlay/index.js";export*from"./components/pagination/index.js";export*from"./components/panes/index.js";export*from"./components/pie-chart/index.js";export*from"./components/pill/index.js";export*from"./components/popover/index.js";export*from"./components/progress-box/index.js";export*from"./components/progress-circular/index.js";export*from"./components/progress-linear/index.js";export*from"./components/radio-group/index.js";export*from"./components/rating/index.js";export*from"./components/scatter-chart/index.js";export*from"./components/scroll-zone/index.js";export*from"./components/segmented-button/index.js";export*from"./components/select/index.js";export*from"./components/shortcut/index.js";export*from"./components/skeleton/index.js";export*from"./components/slider/index.js";export*from"./components/sparkline/index.js";export*from"./components/spoiler/index.js";export*from"./components/statistic/index.js";export*from"./components/switch/index.js";export*from"./components/table/index.js";export*from"./components/tabs/index.js";export*from"./components/text-field/index.js";export*from"./components/text-link/index.js";export*from"./components/time-picker/index.js";export*from"./components/timeline/index.js";export*from"./components/timeline-chart/index.js";export*from"./components/toast/index.js";export*from"./components/toolbar/index.js";export*from"./components/tooltip/index.js";export*from"./components/tree-view/index.js";export*from"./components/typography/index.js";export*from"./components/window-pane/index.js";

package/dist/internal/animate.d.ts

@@ -28,7 +28,7 @@
  * components, and their logic stays in their own files.
  */
 import * as React from 'react';
-import type { NebaAnimateRepeat, NebaAnimateTrigger, NebaAnimation, NebaSide, NebaTransition } from '../types';
+import type { NebaAnimateRepeat, NebaAnimateTrigger, NebaAnimation, NebaSide, NebaTransition } from '../types.js';
 /**
  * Which keyframe an effect runs.
  *

package/dist/internal/bottom-navigation.d.ts

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import type { NebaDensity, NebaSize } from '../types.js';
+/** A destination's value. The same restraint Tabs and SegmentedButton put on theirs. */
+export type BottomNavigationValue = string | number;
+/**
+ * Which labels are drawn.
+ *
+ * - `all` — every destination is named. The only one that works for a reader
+ *   who has not used the app before, and the default on the bar that spans an
+ *   edge of the window.
+ * - `selected` — only the destination that is current. The bar keeps its height
+ *   either way, because the named one is always the tallest; what changes is
+ *   how much of the row is words. The names the other items lose are still in
+ *   the document for a screen reader.
+ * - `none` — glyphs only, with every name read out but never drawn.
+ */
+export type BottomNavigationLabels = 'all' | 'selected' | 'none';
+/**
+ * What an item inherits from the bar around it.
+ *
+ * The same arrangement ButtonGroup, List, Tabs and SegmentedButton use: `size`,
+ * `density` and which destination is current belong to the *set*. A bar whose
+ * third item is a size out is not a bar.
+ *
+ * It lives in `internal/` for the reason `menu.ts` does rather than the reason
+ * `button-group.ts` does: two bars provide it — BottomNavigation and
+ * FloatingBottomNavigation — and one item reads it. Keeping it in either bar's
+ * file would make the other one import its sibling to draw a row of buttons.
+ */
+export interface BottomNavigationContextValue {
+    value: BottomNavigationValue | null;
+    change: (value: BottomNavigationValue) => void;
+    size: NebaSize;
+    density: NebaDensity;
+    labels: BottomNavigationLabels;
+    disabled: boolean;
+    /**
+     * Whether the bar around the item is the floating one.
+     *
+     * It is the shape of the item that differs and not its behaviour: a bar
+     * pinned to an edge divides its whole width between its destinations, while a
+     * lozenge hovering over the page is only as wide as what is in it, so its
+     * items are sized by their content and cut as stadiums rather than as sheets.
+     */
+    floating: boolean;
+}
+export declare const BottomNavigationContext: React.Context<BottomNavigationContextValue>;
+/**
+ * The row's floor, and the one number the two bars have to agree on.
+ *
+ * `md` is 56px, which is the height a bottom navigation has had since the first
+ * one — tall enough for a glyph with a word under it and short enough that it
+ * is not competing with the page it is on. A floating bar is the same object
+ * lifted off the edge, so it is the same height; the ladder around it keeps the
+ * same proportion to the glyph and the name it holds.
+ */
+export declare const barMinHeightClasses: Record<NebaSize, string>;

package/dist/internal/bottom-navigation.js

@@ -0,0 +1 @@
+import*as t from"react";export const BottomNavigationContext=/*@__PURE__*/t.createContext({value:null,change:()=>{},size:"md",density:"default",labels:"all",disabled:!1,floating:!1});export const barMinHeightClasses={xs:"min-h-10",sm:"min-h-12",md:"min-h-14",lg:"min-h-16",xl:"min-h-18"};

package/dist/internal/button-group.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { NebaColor, NebaDensity, NebaElevation, NebaSize, NebaVariant } from '../types';
+import type { NebaColor, NebaDensity, NebaElevation, NebaSize, NebaVariant } from '../types.js';
 /**
  * What a Button inherits from the ButtonGroup around it.
  *

package/dist/internal/button-group.js

@@ -1 +1 @@
-import*as t from"react";export const ButtonGroupContext=t.createContext(null);
+import*as t from"react";export const ButtonGroupContext=/*@__PURE__*/t.createContext(null);

package/dist/internal/calendar.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { type TimeUnit } from './date';
-import type { NebaColor, NebaDensity, NebaSize, NebaWeekday } from '../types';
+import { type TimeUnit } from './date.js';
+import type { NebaColor, NebaDensity, NebaSize, NebaWeekday } from '../types.js';
 /**
  * The calendar grid and the clock columns, written once for the four pickers.
  *

package/dist/internal/calendar.js

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

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

@@ -16,9 +16,9 @@
  * element is, and nothing in here does arithmetic that is not layout.
  */
 import * as React from 'react';
-import { type BoxProps } from '../components/box/Box';
-import { type BandScale, type ChartValue, type PlotBox, type ValueScale } from './chart';
-import type { NebaChartAxis, NebaChartCategory, NebaChartLegend, NebaChartSeries, NebaChartTooltip, NebaSize } from '../types';
+import { type BoxProps } from '../components/box/Box.js';
+import { type BandScale, type ChartValue, type PlotBox, type ValueScale } from './chart.js';
+import type { NebaChartAxis, NebaChartCategory, NebaChartLegend, NebaChartSeries, NebaChartTooltip, NebaSize } from '../types.js';
 /**
  * How wide the chart actually is, in pixels.
  *