neba 1.10.0 → 1.12.0

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

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

package/dist/hooks/index.d.ts

@@ -0,0 +1,10 @@
+export { useDisclosure } from './useDisclosure.js';
+export type { Disclosure } from './useDisclosure.js';
+export { useElementSize } from './useElementSize.js';
+export type { ElementSize } from './useElementSize.js';
+export { useBreakpoint, useBreakpointValue, useCurrentBreakpoint, useMediaQuery } from './useMediaQuery.js';
+export { useOnScreen } from './useOnScreen.js';
+export type { OnScreenOptions } from './useOnScreen.js';
+export { useShortcut } from './useShortcut.js';
+export type { ShortcutOptions } from './useShortcut.js';
+export { usePrefersReducedMotion } from '../internal/media.js';

package/dist/hooks/index.js

@@ -0,0 +1 @@
+export{useDisclosure}from"./useDisclosure.js";export{useElementSize}from"./useElementSize.js";export{useBreakpoint,useBreakpointValue,useCurrentBreakpoint,useMediaQuery}from"./useMediaQuery.js";export{useOnScreen}from"./useOnScreen.js";export{useShortcut}from"./useShortcut.js";export{usePrefersReducedMotion}from"../internal/media.js";

package/dist/hooks/useDisclosure.d.ts

@@ -0,0 +1,21 @@
+/** What `useDisclosure` hands back: the state, and the three ways to change it. */
+export interface Disclosure {
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    onOpen: () => void;
+    onClose: () => void;
+    onToggle: () => void;
+}
+/**
+ * The caller's half of the `open` / `onOpenChange` pair every overlay in the
+ * library offers.
+ *
+ * A Dialog, a Drawer, a Popover, a Tour, a Menu, a CommandPalette and all four
+ * pickers take the same three props, so the state beside them is the same six
+ * lines every time — and the sixth is the one that gets written wrong: a
+ * `setOpen(!open)` closed over a stale render rather than an updater.
+ *
+ * Every function it returns is stable for the life of the component, so passing
+ * `onClose` straight to a memoised child does not re-render it on every open.
+ */
+export declare function useDisclosure(defaultOpen?: boolean): Disclosure;

package/dist/hooks/useDisclosure.js

@@ -0,0 +1 @@
+"use client";import*as e from"react";export function useDisclosure(o=!1){const[s,n]=e.useState(o),l=e.useCallback(()=>n(!0),[]),t=e.useCallback(()=>n(!1),[]),u=e.useCallback(()=>n(e=>!e),[]);return e.useMemo(()=>({open:s,setOpen:n,onOpen:l,onClose:t,onToggle:u}),[s,l,t,u])}

package/dist/hooks/useElementSize.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+/** A box, in CSS pixels. `0` × `0` before the first measurement and on a server. */
+export interface ElementSize {
+    width: number;
+    height: number;
+}
+/**
+ * One element's size, kept up to date.
+ *
+ * The same shared `ResizeObserver` eleven components in the library measure
+ * themselves with — one observer for the whole page rather than one per
+ * subscriber, because a dashboard of eight charts inside a PageLayout with a
+ * Panes in it was a dozen registrations the browser walked on every layout.
+ *
+ * The ref goes on the element to watch. It measures once as soon as that
+ * element is there rather than waiting to be told, because a `ResizeObserver`
+ * that is missing — an old browser, a server — never says anything at all, and
+ * a component sized `0 × 0` forever is worse than one measured once.
+ */
+export declare function useElementSize<E extends Element = HTMLElement>(): [
+    React.RefObject<E | null>,
+    ElementSize
+];

package/dist/hooks/useElementSize.js

@@ -0,0 +1 @@
+"use client";import*as t from"react";import{observeResize as e}from"../internal/observe.js";export function useElementSize(){const i=t.useRef(null),[n,r]=t.useState({width:0,height:0});return t.useLayoutEffect(()=>{const t=i.current;if(!t)return;const n=()=>{const e=t.getBoundingClientRect();r(t=>t.width===e.width&&t.height===e.height?t:{width:e.width,height:e.height})};return n(),e(t,n)},[]),[i,n]}

package/dist/hooks/useMediaQuery.d.ts

@@ -0,0 +1,61 @@
+import type { NebaBreakpoint, NebaResponsive } from '../types.js';
+/**
+ * One media query, as a boolean this component re-renders on.
+ *
+ * The same store the library's own layout runs on, which is the reason it is
+ * offered rather than left to be written again: a `MediaQueryList` is live, so
+ * there is exactly one per query string for the whole page no matter how many
+ * components ask. Written the obvious way — `window.matchMedia` inside a
+ * `getSnapshot` — every subscriber builds a fresh one on every render *and*
+ * every commit, and a PageLayout with a Header, a Footer and two Sidebars in it
+ * asks the same question five times per render.
+ *
+ * It answers `false` on a server, where there is no window and no honest answer.
+ * A layout that must not flash is a layout stated in CSS; this is for the
+ * decisions CSS cannot make — which component to render at all.
+ */
+export declare function useMediaQuery(query: string): boolean;
+/**
+ * The same question in the units the rest of the library uses: is the window at
+ * least this wide?
+ *
+ * `useBreakpoint('md')` is `md:` in a class name, in JavaScript — the widths are
+ * one table, so a component that branches here and a utility that branches in
+ * CSS change at the same pixel. `xs` is `0rem` and therefore always true, which
+ * is the value with no media query around it.
+ */
+export declare function useBreakpoint(breakpoint: NebaBreakpoint): boolean;
+/**
+ * Which breakpoint the window is currently in — the widest whose floor it has
+ * reached.
+ *
+ * Four subscriptions and not five: `xs` is a floor of zero, so it is where the
+ * window is when none of the others match, and there is no query to ask. They
+ * are four separate calls rather than a loop because they are hooks; the count
+ * is fixed, which is what makes that legal, and each one costs nothing extra —
+ * a `MediaQueryList` is shared per query string for the whole page.
+ *
+ * `xs` on a server, which is the same answer the stylesheet gives before any
+ * media query has had a chance to apply.
+ */
+export declare function useCurrentBreakpoint(): NebaBreakpoint;
+/**
+ * A responsive prop's own shape, resolved in JavaScript.
+ *
+ * `useBreakpointValue({ xs: 1, md: 3 })` is `1` under 48rem and `3` from there
+ * up, reading the map exactly as the CSS cascade behind `span` and `spacing`
+ * reads it: every entry is a floor, so the nearest one at or below the current
+ * width wins. That sameness is the point — a component's responsive props and
+ * the numbers a caller works out for themselves should not need two mental
+ * models, or two ideas of what `{ md: 6 }` says about a phone.
+ *
+ * A bare value is returned unchanged, and `undefined` means the map has not
+ * said anything yet at this width: `{ lg: 4 }` on a phone is the caller
+ * declining to have an opinion there, not a failure. Pair it with `??` for a
+ * default.
+ *
+ * It re-renders on a resize, which the CSS form does not — so reach for it when
+ * the value is one JavaScript has to see (how many items to fetch, what to pass
+ * a chart), and leave layout to the props that resolve in the stylesheet.
+ */
+export declare function useBreakpointValue<T>(value: NebaResponsive<T> | undefined): T | undefined;

package/dist/hooks/useMediaQuery.js

@@ -0,0 +1 @@
+"use client";import{useMediaQuery as e,widthAtLeast as r}from"../internal/media.js";import{valueAt as n}from"../internal/responsive.js";export function useMediaQuery(r){return e(r)}export function useBreakpoint(n){return e(r(n))}export function useCurrentBreakpoint(){const n=e(r("sm")),t=e(r("md")),u=e(r("lg"));return e(r("xl"))?"xl":u?"lg":t?"md":n?"sm":"xs"}export function useBreakpointValue(e){return n(e,useCurrentBreakpoint())}

package/dist/hooks/useOnScreen.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+export interface OnScreenOptions {
+    /** How much of the element has to be showing. @default 0 */
+    threshold?: number;
+    /**
+     * Stop watching once it has been seen. The right default for the thing this
+     * is usually for — mounting something, starting something, loading
+     * something — where the answer only has to arrive once.
+     * @default true
+     */
+    once?: boolean;
+}
+/**
+ * Whether an element is on screen.
+ *
+ * The same shared `IntersectionObserver` the eleven `Animate*` wrappers watch
+ * for their own element with — one per threshold for the whole page, because a
+ * page of them was one registration each.
+ *
+ * It answers `true` where there is no `IntersectionObserver` rather than
+ * `false`, and that is the load-bearing part: a caller cannot know without one,
+ * and the right fallback is to show the thing rather than to hide it forever.
+ */
+export declare function useOnScreen<E extends Element = HTMLElement>(options?: OnScreenOptions): [React.RefObject<E | null>, boolean];

package/dist/hooks/useOnScreen.js

@@ -0,0 +1 @@
+"use client";import*as e from"react";import{observeVisibility as r}from"../internal/observe.js";export function useOnScreen(t={}){const{threshold:n=0,once:o=!0}=t,s=e.useRef(null),[u,c]=e.useState(!1);return e.useEffect(()=>{const e=s.current;if(!e)return;const t=r(e,n,e=>{c(e),e&&o&&t?.()});if(t)return t;c(!0)},[n,o]),[s,u]}

package/dist/hooks/useShortcut.d.ts

@@ -0,0 +1,34 @@
+export interface ShortcutOptions {
+    /** Stop listening without unmounting — a modal is open, a field has focus. @default true */
+    enabled?: boolean;
+    /**
+     * Ignore the key while the reader is typing into an input, a textarea or
+     * anything `contenteditable`.
+     *
+     * On by default, and it is the reason a bare `/` or `?` can be bound at all:
+     * a page-wide single-letter shortcut that fires inside a search box is a
+     * shortcut that eats what somebody was writing. A combination with a modifier
+     * is usually meant to work everywhere, so turn this off for those.
+     * @default true
+     */
+    ignoreWhileTyping?: boolean;
+    /**
+     * Call `preventDefault` when it matches — for a key the browser also has an
+     * opinion about, like `Mod+K` or `Mod+S`. @default true
+     */
+    preventDefault?: boolean;
+}
+/**
+ * A key combination bound on the window, spelled the way
+ * [Shortcut](../components/shortcut) draws it — `'Mod+K'`, `'Mod+Shift+P'`,
+ * `'?'`.
+ *
+ * This is what `CommandPalette` binds its own opener with, offered because an
+ * application has more shortcuts than the library does and every one of them
+ * should be spelled the way its key cap is. `Mod` is Command on a Mac and
+ * Control everywhere else; the modifiers are matched exactly.
+ *
+ * The handler is held in a ref, so a listener is bound once per combination
+ * rather than re-bound on every render that closes over new state.
+ */
+export declare function useShortcut(shortcut: string | false, handler: (event: KeyboardEvent) => void, options?: ShortcutOptions): void;

package/dist/hooks/useShortcut.js

@@ -0,0 +1 @@
+"use client";import*as e from"react";import{matchesShortcut as t}from"../internal/keys.js";export function useShortcut(n,r,a={}){const{enabled:o=!0,ignoreWhileTyping:i=!0,preventDefault:s=!0}=a,u=e.useRef(r);e.useEffect(()=>{u.current=r}),e.useEffect(()=>{if(!1===n||!o)return;const e=e=>{var r;i&&(r=e.target,r instanceof HTMLElement&&(r.isContentEditable||"INPUT"===r.tagName||"TEXTAREA"===r.tagName||"SELECT"===r.tagName))||t(e,n)&&(s&&e.preventDefault(),u.current(e))};return window.addEventListener("keydown",e),()=>window.removeEventListener("keydown",e)},[n,o,i,s])}

package/dist/index.d.ts

@@ -1,23 +1,29 @@
 export * from './types.js';
+export * from './hooks/index.js';
 export * from './components/accordion/index.js';
 export * from './components/alert/index.js';
 export * from './components/anchor/index.js';
 export * from './components/animate-appear/index.js';
 export * from './components/app-logo/index.js';
 export * from './components/animate-blink/index.js';
+export * from './components/animate-counter/index.js';
 export * from './components/animate-fade/index.js';
+export * from './components/animate-float/index.js';
 export * from './components/animate-grow/index.js';
 export * from './components/animate-headline/index.js';
 export * from './components/animate-lighting/index.js';
 export * from './components/animate-marquee/index.js';
+export * from './components/animate-reveal/index.js';
 export * from './components/animate-rotate/index.js';
+export * from './components/animate-scramble/index.js';
+export * from './components/animate-shake/index.js';
+export * from './components/animate-split/index.js';
 export * from './components/animate-slide/index.js';
 export * from './components/animate-typing/index.js';
 export * from './components/animate-zoom/index.js';
 export * from './components/area-chart/index.js';
 export * from './components/aspect-ratio/index.js';
 export * from './components/avatar/index.js';
-export * from './components/avatar-group/index.js';
 export * from './components/badge/index.js';
 export * from './components/bar-chart/index.js';
 export * from './components/blockquote/index.js';
@@ -26,6 +32,7 @@ export * from './components/box/index.js';
 export * from './components/breadcrumb/index.js';
 export * from './components/button/index.js';
 export * from './components/button-group/index.js';
+export * from './components/calendar/index.js';
 export * from './components/card/index.js';
 export * from './components/carousel/index.js';
 export * from './components/chat-bubble/index.js';
@@ -36,6 +43,7 @@ export * from './components/collapsible/index.js';
 export * from './components/color-picker/index.js';
 export * from './components/combobox/index.js';
 export * from './components/command-palette/index.js';
+export * from './components/confirm/index.js';
 export * from './components/container/index.js';
 export * from './components/data-list/index.js';
 export * from './components/data-table/index.js';
@@ -48,7 +56,9 @@ export * from './components/drawer/index.js';
 export * from './components/empty/index.js';
 export * from './components/fieldset/index.js';
 export * from './components/file-picker/index.js';
+export * from './components/flex/index.js';
 export * from './components/form/index.js';
+export * from './components/gallery/index.js';
 export * from './components/gauge-chart/index.js';
 export * from './components/grid/index.js';
 export * from './components/floating-action-button/index.js';
@@ -62,6 +72,7 @@ export * from './components/hover-card/index.js';
 export * from './components/how-to-steps/index.js';
 export * from './components/icon/index.js';
 export * from './components/icon-button/index.js';
+export * from './components/image/index.js';
 export * from './components/line-chart/index.js';
 export * from './components/list/index.js';
 export * from './components/menu/index.js';
@@ -77,10 +88,13 @@ export * from './components/pagination/index.js';
 export * from './components/panes/index.js';
 export * from './components/pie-chart/index.js';
 export * from './components/pill/index.js';
+export * from './components/popconfirm/index.js';
 export * from './components/popover/index.js';
+export * from './components/portal/index.js';
 export * from './components/progress-box/index.js';
 export * from './components/progress-circular/index.js';
 export * from './components/progress-linear/index.js';
+export * from './components/provider/index.js';
 export * from './components/radio-group/index.js';
 export * from './components/rating/index.js';
 export * from './components/scatter-chart/index.js';
@@ -89,11 +103,13 @@ export * from './components/scroll-zone/index.js';
 export * from './components/segmented-button/index.js';
 export * from './components/select/index.js';
 export * from './components/shortcut/index.js';
+export * from './components/show/index.js';
 export * from './components/sidebar/index.js';
 export * from './components/skeleton/index.js';
 export * from './components/slider/index.js';
 export * from './components/sparkline/index.js';
 export * from './components/spoiler/index.js';
+export * from './components/stack/index.js';
 export * from './components/statistic/index.js';
 export * from './components/switch/index.js';
 export * from './components/table/index.js';
@@ -110,6 +126,8 @@ export * from './components/toolbar/index.js';
 export * from './components/tooltip/index.js';
 export * from './components/tour/index.js';
 export * from './components/transfer/index.js';
+export * from './components/tree-select/index.js';
 export * from './components/tree-view/index.js';
 export * from './components/typography/index.js';
+export * from './components/visually-hidden/index.js';
 export * from './components/window-pane/index.js';

package/dist/index.js

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

package/dist/internal/animate.d.ts

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

package/dist/internal/animate.js

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

package/dist/internal/calendar.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { type TimeUnit } from './date.js';
-import type { NebaColor, NebaDensity, NebaSize, NebaWeekday } from '../types.js';
+import type { NebaColor, NebaDateGranularity, NebaDensity, NebaSize, NebaWeekday } from '../types.js';
 /**
  * The calendar grid and the clock columns, written once for the four pickers.
  *
@@ -20,9 +20,9 @@ import type { NebaColor, NebaDensity, NebaSize, NebaWeekday } from '../types.js'
 /**
  * Every string a picker says that is not a date.
  *
- * One object rather than eighteen props. These are a set: a caller who has to
+ * One object rather than twenty props. These are a set: a caller who has to
  * translate "Previous month" has to translate "Next month" in the same breath,
- * and a component with eighteen `*Label` props is a component whose signature is
+ * and a component with twenty `*Label` props is a component whose signature is
  * mostly apology. The dates themselves are never in here — those come from
  * `Intl`, which already knows what July is called in more languages than this
  * file ever will.
@@ -40,8 +40,14 @@ export interface PickerLabels {
     /** The two header buttons that open the month grid and the year grid. */
     chooseMonth: string;
     chooseYear: string;
-    /** The footer's actions. */
+    /**
+     * The footer's actions. Three shortcuts rather than one because the button
+     * jumps to the current *unit*, and a month picker whose footer says "Today"
+     * is offering a day it has no way to accept.
+     */
     today: string;
+    thisMonth: string;
+    thisYear: string;
     now: string;
     clear: string;
     done: string;
@@ -71,6 +77,12 @@ export interface CalendarProps {
     rangeStart?: Date | null;
     rangeEnd?: Date | null;
     onSelect: (date: Date) => void;
+    /**
+     * Which grid the reader is allowed to stop on, and therefore what `onSelect`
+     * hands back: a day, the 1st of a month, or the 1st of January.
+     * @default 'day'
+     */
+    granularity?: NebaDateGranularity;
     /** The day under the pointer, for a range that is only half chosen. */
     onPreviewChange?: (date: Date | null) => void;
     minDate?: Date | null;
@@ -88,6 +100,14 @@ export interface CalendarProps {
      * @default true
      */
     showOutsideDays?: boolean;
+    /**
+     * What a day cell draws under its number — a dot, a count, a bar.
+     *
+     * A hook rather than a slot: the caller is the only one who knows what a day
+     * *has* on it, and the alternative is an `events` prop that would make this
+     * file responsible for a data shape it has no opinion about.
+     */
+    renderDay?: (date: Date) => React.ReactNode;
     /** Takes the focus on mount — the popup has just opened. */
     autoFocus?: boolean;
     showPreviousButton?: boolean;
@@ -104,13 +124,19 @@ export interface CalendarProps {
  * two stretch four rows and three rows across that same height — so switching
  * view never resizes the popup under the pointer that opened it.
  *
+ * `granularity` says which of the three the reader may stop on. At `day` the
+ * other two are only a way of reaching it; at `month` or `year` the grid that
+ * names that unit is where the calendar opens and where a click becomes an
+ * answer. Climbing is unaffected — a month picker still reaches 2019 through
+ * the year grid — so the coarser settings take a view away and add none.
+ *
  * Arrow keys move by one cell, `PageUp`/`PageDown` by a month (a year with
  * Shift), `Home`/`End` to the ends of the week, and running off an edge steps
  * the calendar rather than stopping. One roving tab stop, so `Tab` leaves the
  * grid instead of walking forty-two cells — the pattern the ARIA date-picker
  * practice describes, and the reason none of the cells is a `disabled` button.
  */
-export declare function Calendar({ size, color, locale, weekStartsOn, month, onMonthChange, selected, rangeStart, rangeEnd, onSelect, onPreviewChange, minDate, maxDate, shouldDisableDate, showOutsideDays, autoFocus, showPreviousButton, showNextButton, labels, className }: CalendarProps): React.JSX.Element;
+export declare function Calendar({ size, color, locale, weekStartsOn, month, onMonthChange, selected, rangeStart, rangeEnd, onSelect, granularity, renderDay, onPreviewChange, minDate, maxDate, shouldDisableDate, showOutsideDays, autoFocus, showPreviousButton, showNextButton, labels, className }: CalendarProps): React.JSX.Element;
 export type { TimeUnit };
 export interface TimeGridProps {
     size: NebaSize;