neba 1.6.0 → 1.8.0

package/dist/components/floating-action-button/FloatingActionButton.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { NebaCorner, NebaElevation, NebaPosition, NebaStyleProps } from '../../types';
+import type { NebaCorner, NebaElevation, NebaPosition, NebaStyleProps } from '../../types.js';
 /**
  * Where a floating button sits, with one value the shared vocabulary does not
  * have.

package/dist/components/floating-action-button/FloatingActionButton.js

@@ -1 +1 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as o from"react";import{Button as n}from"../button/Button";import{CloseIcon as s,PlusIcon as a}from"../../internal/icons";import{cx as r,hasContent as i,metaTextClasses as l,radiusClasses as c,surfaceClasses as d}from"../../internal/styles";const f=o.createContext({variant:"solid",size:"md",color:"primary",density:"default",elevation:1,showLabels:!0,reversed:!0,close:()=>{}}),p={xs:"xs",sm:"xs",md:"sm",lg:"md",xl:"lg"},m={static:"",absolute:"absolute z-30",sticky:"sticky z-30",fixed:"fixed z-40"},u={"top-start":"top-(--n-fab-offset) start-(--n-fab-offset)","top-end":"top-(--n-fab-offset) end-(--n-fab-offset)","bottom-start":"bottom-(--n-fab-offset) start-(--n-fab-offset)","bottom-end":"bottom-(--n-fab-offset) end-(--n-fab-offset)"},b=r("pointer-events-none max-w-40 truncate select-none","px-2 py-0.5 text-(--neba-fg) bg-(--n-panel)",d,c.xs,"[box-shadow:var(--neba-shadow-1),var(--neba-plate-glass)]");export const FloatingActionButton=o.forwardRef(function({variant:i="solid",size:l="lg",color:c="primary",density:d="default",elevation:b=2,icon:v,label:x,extended:y=!1,openIcon:h,position:g="fixed",corner:w="bottom-end",offset:z=16,direction:C,open:k,defaultOpen:L=!1,onOpenChange:N,openOnHover:E=!0,closeOnAction:P=!0,showLabels:R=!0,disabled:A=!1,className:I,style:O,children:j,onClick:B,onKeyDown:D,onPointerEnter:F,onPointerLeave:K,...T},W){const H=o.useId(),M=o.useRef(null),S=o.useRef(null),[$,q]=o.useState(L),G=void 0!==k,J=o.Children.toArray(j).length>0,Q=(G?k:$)&&J&&!A,U=o.useCallback(e=>{G||q(e),N?.(e)},[G,N]),V=o.useCallback(()=>U(!1),[U]);o.useEffect(()=>{if(!Q)return;const e=e=>{const t=S.current;t&&e.target instanceof Node&&!t.contains(e.target)&&V()};return document.addEventListener("pointerdown",e),()=>document.removeEventListener("pointerdown",e)},[Q,V]);const X=C??(w.startsWith("bottom")?"top":"bottom"),Y=w.endsWith("end"),Z=o.useMemo(()=>({variant:i,size:p[l],color:c,density:d,elevation:b,showLabels:R,reversed:Y,close:P?V:()=>{}}),[i,l,c,d,b,R,Y,P,V]),_=Q&&!1!==h?h??e(s,{}):v??e(a,{});return t("div",{ref:e=>{S.current=e,"function"==typeof W?W(e):W&&(W.current=e)},className:r("flex w-fit","top"===X?"flex-col-reverse":"flex-col",Y?"items-end":"items-start","xs"===l||"sm"===l?"gap-1.5":"gap-2",m[g],"static"===g?"":u[w],I),style:{"--n-fab-offset":"number"==typeof z?`${z}px`:z,...O},onKeyDown:e=>{"Escape"===e.key&&Q&&(e.stopPropagation(),V(),M.current?.focus()),D?.(e)},onPointerEnter:e=>{E&&J&&!A&&"mouse"===e.pointerType&&U(!0),F?.(e)},onPointerLeave:e=>{E&&"mouse"===e.pointerType&&V(),K?.(e)},...T,children:[e(n,{ref:M,variant:i,size:l,color:c,density:d,elevation:b,disabled:A,"aria-label":x,"aria-expanded":J?Q:void 0,"aria-controls":J&&Q?H:void 0,startIcon:_,style:{borderRadius:"9999px"},onClick:e=>{J&&U(!Q),B?.(e)},children:y?x:void 0}),Q?e("div",{id:H,className:r("flex","top"===X?"flex-col-reverse":"flex-col",Y?"items-end":"items-start","xs"===l||"sm"===l?"gap-1.5":"gap-2"),children:e(f.Provider,{value:Z,children:j})}):null]})});export const FloatingAction=o.forwardRef(function({icon:s,label:a,disabled:c=!1,className:d,onClick:p,...m},u){const v=o.useContext(f);return t("div",{className:r("flex items-center gap-2",v.reversed?"flex-row-reverse":"flex-row",d),children:[e(n,{ref:u,variant:v.variant,size:v.size,color:v.color,density:v.density,elevation:v.elevation,disabled:c,"aria-label":a,startIcon:s,style:{borderRadius:"9999px"},onClick:e=>{p?.(e),v.close()},...m}),v.showLabels&&i(a)?e("span",{"aria-hidden":"true",className:r(b,l[v.size]),children:a}):null]})});
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as o from"react";import{Button as n}from"../button/Button.js";import{CloseIcon as s,PlusIcon as a}from"../../internal/icons.js";import{cx as r,hasContent as i,metaTextClasses as l,radiusClasses as c,surfaceClasses as d}from"../../internal/styles.js";const f=/*@__PURE__*/o.createContext({variant:"solid",size:"md",color:"primary",density:"default",elevation:1,showLabels:!0,reversed:!0,close:()=>{}}),p={xs:"xs",sm:"xs",md:"sm",lg:"md",xl:"lg"},m={static:"",absolute:"absolute z-30",sticky:"sticky z-30",fixed:"fixed z-40"},u={"top-start":"top-(--n-fab-offset) start-(--n-fab-offset)","top-end":"top-(--n-fab-offset) end-(--n-fab-offset)","bottom-start":"bottom-(--n-fab-offset) start-(--n-fab-offset)","bottom-end":"bottom-(--n-fab-offset) end-(--n-fab-offset)"},b=r("pointer-events-none max-w-40 truncate select-none","px-2 py-0.5 text-(--neba-fg) bg-(--n-panel)",d,c.xs,"[box-shadow:var(--neba-shadow-1),var(--neba-plate-glass)]");export const FloatingActionButton=/*@__PURE__*/o.forwardRef(function({variant:i="solid",size:l="lg",color:c="primary",density:d="default",elevation:b=2,icon:v,label:x,extended:y=!1,openIcon:h,position:g="fixed",corner:w="bottom-end",offset:z=16,direction:C,open:k,defaultOpen:L=!1,onOpenChange:N,openOnHover:j=!0,closeOnAction:E=!0,showLabels:P=!0,disabled:R=!1,className:A,style:I,children:O,onClick:B,onKeyDown:D,onPointerEnter:F,onPointerLeave:K,...T},W){const H=o.useId(),M=o.useRef(null),S=o.useRef(null),[$,q]=o.useState(L),G=void 0!==k,J=o.Children.toArray(O).length>0,Q=(G?k:$)&&J&&!R,U=o.useCallback(e=>{G||q(e),N?.(e)},[G,N]),V=o.useCallback(()=>U(!1),[U]);o.useEffect(()=>{if(!Q)return;const e=e=>{const t=S.current;t&&e.target instanceof Node&&!t.contains(e.target)&&V()};return document.addEventListener("pointerdown",e),()=>document.removeEventListener("pointerdown",e)},[Q,V]);const X=C??(w.startsWith("bottom")?"top":"bottom"),Y=w.endsWith("end"),Z=o.useMemo(()=>({variant:i,size:p[l],color:c,density:d,elevation:b,showLabels:P,reversed:Y,close:E?V:()=>{}}),[i,l,c,d,b,P,Y,E,V]),_=Q&&!1!==h?h??e(s,{}):v??e(a,{});return t("div",{ref:e=>{S.current=e,"function"==typeof W?W(e):W&&(W.current=e)},className:r("flex w-fit","top"===X?"flex-col-reverse":"flex-col",Y?"items-end":"items-start","xs"===l||"sm"===l?"gap-1.5":"gap-2",m[g],"static"===g?"":u[w],A),style:{"--n-fab-offset":"number"==typeof z?`${z}px`:z,...I},onKeyDown:e=>{"Escape"===e.key&&Q&&(e.stopPropagation(),V(),M.current?.focus()),D?.(e)},onPointerEnter:e=>{j&&J&&!R&&"mouse"===e.pointerType&&U(!0),F?.(e)},onPointerLeave:e=>{j&&"mouse"===e.pointerType&&V(),K?.(e)},...T,children:[e(n,{ref:M,variant:i,size:l,color:c,density:d,elevation:b,disabled:R,"aria-label":x,"aria-expanded":J?Q:void 0,"aria-controls":J&&Q?H:void 0,startIcon:_,style:{borderRadius:"9999px"},onClick:e=>{J&&U(!Q),B?.(e)},children:y?x:void 0}),Q?e("div",{id:H,className:r("flex","top"===X?"flex-col-reverse":"flex-col",Y?"items-end":"items-start","xs"===l||"sm"===l?"gap-1.5":"gap-2"),children:e(f.Provider,{value:Z,children:O})}):null]})});export const FloatingAction=/*@__PURE__*/o.forwardRef(function({icon:s,label:a,disabled:c=!1,className:d,onClick:p,...m},u){const v=o.useContext(f);return t("div",{className:r("flex items-center gap-2",v.reversed?"flex-row-reverse":"flex-row",d),children:[e(n,{ref:u,variant:v.variant,size:v.size,color:v.color,density:v.density,elevation:v.elevation,disabled:c,"aria-label":a,startIcon:s,style:{borderRadius:"9999px"},onClick:e=>{p?.(e),v.close()},...m}),v.showLabels&&i(a)?e("span",{"aria-hidden":"true",className:r(b,l[v.size]),children:a}):null]})});

package/dist/components/floating-action-button/index.d.ts

@@ -1 +1 @@
-export * from './FloatingActionButton';
+export * from './FloatingActionButton.js';

package/dist/components/floating-action-button/index.js

@@ -1 +1 @@
-export*from"./FloatingActionButton";
+export*from"./FloatingActionButton.js";

package/dist/components/floating-bottom-navigation/FloatingBottomNavigation.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useRender } from '@base-ui/react/use-render';
-import type { BottomNavigationLabels, BottomNavigationValue } from '../../internal/bottom-navigation';
-import type { NebaElevation, NebaPosition, NebaStyleProps } from '../../types';
+import type { BottomNavigationLabels, BottomNavigationValue } from '../../internal/bottom-navigation.js';
+import type { NebaElevation, NebaPosition, NebaStyleProps } from '../../types.js';
 /**
  * Where a floating bar sits, with one value the shared vocabulary does not have.
  *

package/dist/components/floating-bottom-navigation/FloatingBottomNavigation.js

@@ -1 +1 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{useRender as n}from"@base-ui/react/use-render";import{barMinHeightClasses as r,BottomNavigationContext as o}from"../../internal/bottom-navigation";import{cx as s,surfaceClasses as l,surfaceSlots as i,transitionClasses as f}from"../../internal/styles";const u={solid:[l,"text-(--neba-fg) bg-(--n-panel-press)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[l,"border text-(--neba-fg) bg-(--n-panel-hover)","[border-color:var(--n-line)]","[box-shadow:var(--n-elev),var(--neba-plate-glass)]"].join(" "),text:"text-(--neba-fg) bg-transparent"},d={static:"relative mx-auto w-fit",absolute:"absolute inset-x-0 bottom-(--n-nav-offset) z-30 mx-auto w-fit",sticky:"sticky bottom-(--n-nav-offset) z-30 mx-auto w-fit",fixed:"fixed inset-x-0 bottom-(--n-nav-offset) z-40 mx-auto w-fit"},p={default:{xs:"p-1",sm:"p-1",md:"p-1.5",lg:"p-1.5",xl:"p-2"},compact:{xs:"p-0.5",sm:"p-0.5",md:"p-1",lg:"p-1",xl:"p-1"}},c={solid:`${l} bg-(--n-panel-hover) [box-shadow:var(--neba-shadow-1),var(--neba-plate-glass)]`,outline:`${l} bg-(--n-soft-hover) [box-shadow:var(--neba-shadow-1),var(--neba-plate-glass)]`,text:"bg-(--n-soft-hover)"},b={xs:"gap-0.5",sm:"gap-0.5",md:"gap-1",lg:"gap-1",xl:"gap-1.5"};export const FloatingBottomNavigation=a.forwardRef(function({variant:l="outline",size:v="md",color:m="primary",density:x="default",elevation:g=2,value:y,defaultValue:h=null,onValueChange:w,position:$="fixed",offset:z=16,labels:j="selected",safeArea:k=!0,disabled:P=!1,label:A,render:C,className:N,style:R,children:E,...L},S){const[V,W]=a.useState(h),q=void 0!==y,B=q?y:V,F=a.useCallback(e=>{q||W(e),w?.(e)},[q,w]),H=a.useMemo(()=>({value:B??null,change:F,size:v,density:x,labels:j,disabled:P,floating:!0}),[B,F,v,x,j,P]),M=a.useRef(null),O=a.useRef(null),T=a.useCallback(e=>{M.current=e,"function"==typeof S?S(e):S&&(S.current=e)},[S]),D=a.useCallback(e=>{const t=M.current,a=O.current;if(!t||!a)return;const n=t.querySelector("[data-nav-item][aria-current]");if(!n)return;const r=!e||!a.hasAttribute("data-ready");r&&a.removeAttribute("data-ready"),a.style.setProperty("--n-nav-x",`${n.offsetLeft}px`),a.style.setProperty("--n-nav-y",`${n.offsetTop}px`),a.style.setProperty("--n-nav-w",`${n.offsetWidth}px`),a.style.setProperty("--n-nav-h",`${n.offsetHeight}px`),r&&a.offsetWidth,a.setAttribute("data-ready","")},[]);a.useLayoutEffect(()=>{D(!0)},[D,B,l,v,x,j,E]),a.useEffect(()=>{const e=M.current;if(!e)return;const t=new ResizeObserver(()=>D(!1));return t.observe(e),()=>t.disconnect()},[D]);const G="number"==typeof z?`${z}px`:z,I=s("flex max-w-full min-w-0 items-center rounded-full",r[v],p[x][v],b[v],u[l],d[$],f,N);return n({render:C??e("nav",{}),ref:T,props:{"aria-label":A,className:I,style:{...i(m,g),"--n-nav-offset":k?`calc(${G} + env(safe-area-inset-bottom))`:G,...R},children:t(o.Provider,{value:H,children:[null!=B?e("span",{ref:O,"aria-hidden":"true",className:s("pointer-events-none absolute rounded-full","top-(--n-nav-y) left-(--n-nav-x) h-(--n-nav-h) w-(--n-nav-w)",c[l],"[transition-property:left,top,width,height]","[transition-timing-function:var(--neba-ease)]","[transition-duration:0ms] data-[ready]:[transition-duration:var(--neba-duration)]","motion-reduce:[transition-duration:0ms]")}):null,E]}),...L}})});
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{useRender as n}from"@base-ui/react/use-render";import{barMinHeightClasses as r,BottomNavigationContext as o}from"../../internal/bottom-navigation.js";import{cx as s,surfaceClasses as l,surfaceSlots as i,transitionClasses as f}from"../../internal/styles.js";const u={solid:[l,"text-(--neba-fg) bg-(--n-panel-press)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[l,"border text-(--neba-fg) bg-(--n-panel-hover)","[border-color:var(--n-line)]","[box-shadow:var(--n-elev),var(--neba-plate-glass)]"].join(" "),text:"text-(--neba-fg) bg-transparent"},d={static:"relative mx-auto w-fit",absolute:"absolute inset-x-0 bottom-(--n-nav-offset) z-30 mx-auto w-fit",sticky:"sticky bottom-(--n-nav-offset) z-30 mx-auto w-fit",fixed:"fixed inset-x-0 bottom-(--n-nav-offset) z-40 mx-auto w-fit"},p={default:{xs:"p-1",sm:"p-1",md:"p-1.5",lg:"p-1.5",xl:"p-2"},compact:{xs:"p-0.5",sm:"p-0.5",md:"p-1",lg:"p-1",xl:"p-1"}},c={solid:`${l} bg-(--n-panel-hover) [box-shadow:var(--neba-shadow-1),var(--neba-plate-glass)]`,outline:`${l} bg-(--n-soft-hover) [box-shadow:var(--neba-shadow-1),var(--neba-plate-glass)]`,text:"bg-(--n-soft-hover)"},b={xs:"gap-0.5",sm:"gap-0.5",md:"gap-1",lg:"gap-1",xl:"gap-1.5"};export const FloatingBottomNavigation=/*@__PURE__*/a.forwardRef(function({variant:l="outline",size:v="md",color:m="primary",density:x="default",elevation:g=2,value:y,defaultValue:h=null,onValueChange:w,position:$="fixed",offset:j=16,labels:z="selected",safeArea:k=!0,disabled:P=!1,label:A,render:C,className:N,style:R,children:E,...L},S){const[V,W]=a.useState(h),q=void 0!==y,B=q?y:V,F=a.useCallback(e=>{q||W(e),w?.(e)},[q,w]),H=a.useMemo(()=>({value:B??null,change:F,size:v,density:x,labels:z,disabled:P,floating:!0}),[B,F,v,x,z,P]),M=a.useRef(null),O=a.useRef(null),T=a.useCallback(e=>{M.current=e,"function"==typeof S?S(e):S&&(S.current=e)},[S]),D=a.useCallback(e=>{const t=M.current,a=O.current;if(!t||!a)return;const n=t.querySelector("[data-nav-item][aria-current]");if(!n)return;const r=!e||!a.hasAttribute("data-ready");r&&a.removeAttribute("data-ready"),a.style.setProperty("--n-nav-x",`${n.offsetLeft}px`),a.style.setProperty("--n-nav-y",`${n.offsetTop}px`),a.style.setProperty("--n-nav-w",`${n.offsetWidth}px`),a.style.setProperty("--n-nav-h",`${n.offsetHeight}px`),r&&a.offsetWidth,a.setAttribute("data-ready","")},[]);a.useLayoutEffect(()=>{D(!0)},[D,B,l,v,x,z,E]),a.useEffect(()=>{const e=M.current;if(!e)return;const t=new ResizeObserver(()=>D(!1));return t.observe(e),()=>t.disconnect()},[D]);const G="number"==typeof j?`${j}px`:j,I=s("flex max-w-full min-w-0 items-center rounded-full",r[v],p[x][v],b[v],u[l],d[$],f,N);return n({render:C??e("nav",{}),ref:T,props:{"aria-label":A,className:I,style:{...i(m,g),"--n-nav-offset":k?`calc(${G} + env(safe-area-inset-bottom))`:G,...R},children:t(o.Provider,{value:H,children:[null!=B?e("span",{ref:O,"aria-hidden":"true",className:s("pointer-events-none absolute rounded-full","top-(--n-nav-y) left-(--n-nav-x) h-(--n-nav-h) w-(--n-nav-w)",c[l],"[transition-property:left,top,width,height]","[transition-timing-function:var(--neba-ease)]","[transition-duration:0ms] data-[ready]:[transition-duration:var(--neba-duration)]","motion-reduce:[transition-duration:0ms]")}):null,E]}),...L}})});

package/dist/components/floating-bottom-navigation/index.d.ts

@@ -1,2 +1,2 @@
-export { FloatingBottomNavigation } from './FloatingBottomNavigation';
-export type { FloatingBottomNavigationPosition, FloatingBottomNavigationProps } from './FloatingBottomNavigation';
+export { FloatingBottomNavigation } from './FloatingBottomNavigation.js';
+export type { FloatingBottomNavigationPosition, FloatingBottomNavigationProps } from './FloatingBottomNavigation.js';

package/dist/components/floating-bottom-navigation/index.js

@@ -1 +1 @@
-export{FloatingBottomNavigation}from"./FloatingBottomNavigation";
+export{FloatingBottomNavigation}from"./FloatingBottomNavigation.js";

package/dist/components/footer/Footer.d.ts

@@ -0,0 +1,85 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { NebaColor, NebaDensity, NebaElevation, NebaPosition, NebaSize, NebaVariant } from '../../types.js';
+export interface FooterProps extends Omit<React.ComponentPropsWithoutRef<'footer'>, 'color' | 'title'> {
+    /**
+     * How the bar sits in the page's scroll. `static` — the default, and the
+     * opposite of [Header]'s — is what a footer is: the thing at the end of the
+     * document, reached by scrolling to it. `sticky` and `fixed` are for the bar
+     * that has to stay in reach — a form's save row, a cookie notice — and a
+     * [PageLayout] reserves the height a `fixed` one takes out of the flow.
+     * @default 'static'
+     */
+    position?: NebaPosition;
+    /**
+     * Weight of the sheet, said the way a *container* says it: the bar is never
+     * dyed, because what is on it arrives with colours of its own.
+     * @default 'outline'
+     */
+    variant?: NebaVariant;
+    /**
+     * The bar's scale — its gutter and the air above and below its content. As on
+     * Box, `size` here is the size of the *sheet*.
+     * @default 'md'
+     */
+    size?: NebaSize;
+    /** @default 'primary' */
+    color?: NebaColor;
+    /** @default 'default' */
+    density?: NebaDensity;
+    /** Drop shadow depth. `0` (the default) is flat. @default 0 */
+    elevation?: NebaElevation;
+    /**
+     * Draws a hairline along the top edge. On by default: a footer is the one
+     * sheet on the page with content directly above it and nothing below, so the
+     * line is the whole of what says the document ended.
+     * @default true
+     */
+    divider?: boolean;
+    /**
+     * Holds the content to a measure and centres it, while the sheet itself still
+     * spans the window. On the same ladder Container's own `maxWidth` uses.
+     * @default 'none'
+     */
+    maxWidth?: NebaSize | 'none';
+    /** The gutter and the air above and below. @default true */
+    padded?: boolean;
+    /**
+     * The name the bar is announced by. Worth writing when a page has more than
+     * one `<footer>` in it — an article's own and the site's.
+     */
+    label?: string;
+    /**
+     * Renders something other than a `<footer>`. Base UI's own escape hatch, and
+     * rarely what you want: at the top level of a document that tag is the
+     * `contentinfo` landmark, and it is what says "this is the site's own
+     * information" rather than "this is more of the article".
+     */
+    render?: useRender.RenderProp;
+    /**
+     * Everything in it. A footer's content is columns of links, a copyright line,
+     * a logo — all of it the caller's, none of it something a component could
+     * guess at, which is why this one has slots for nothing and space for
+     * anything.
+     */
+    children?: React.ReactNode;
+}
+/**
+ * The sheet at the end of a page.
+ *
+ * A real `<footer>`, which is the whole reason it is a component rather than a
+ * div: at the top level of a document that tag is the `contentinfo` landmark —
+ * the region a screen reader offers as "the site's own information" and a
+ * search engine reads the copyright, the address and the site map out of.
+ *
+ * It has no slots on purpose, which is the difference between it and [Header].
+ * A header's three regions are a fixed arrangement worth writing once; a
+ * footer's content is four columns on one site, one line on the next, and a
+ * component that guessed at the arrangement would be a component every second
+ * site fights. What it decides is the sheet: the surface, the gutter, the
+ * hairline that says the document ended, and whether it stays in reach.
+ *
+ * Inside a [PageLayout] it also registers itself, so a `fixed` footer's height
+ * is reserved rather than sitting on top of the last paragraph.
+ */
+export declare const Footer: React.ForwardRefExoticComponent<FooterProps & React.RefAttributes<HTMLElement>>;

package/dist/components/footer/Footer.js

@@ -0,0 +1 @@
+import{jsx as e}from"react/jsx-runtime";import*as r from"react";import{useRender as t}from"@base-ui/react/use-render";import{boxPaddingXClasses as a,boxPaddingYClasses as o}from"../box/Box.js";import{PageLayoutContext as n}from"../../internal/page-layout.js";import{cx as s,surfaceClasses as i,surfaceSlots as l,transitionClasses as m}from"../../internal/styles.js";const d={solid:[i,"text-(--neba-fg) bg-(--n-panel-press)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[i,"text-(--neba-fg) bg-(--n-panel)","[box-shadow:var(--n-elev),var(--neba-plate-glass)]"].join(" "),text:"text-(--neba-fg) bg-transparent"},x={static:"",sticky:"sticky bottom-0 z-30",fixed:"fixed inset-x-0 bottom-0 z-40"},c={xs:"max-w-[30rem]",sm:"max-w-[40rem]",md:"max-w-[48rem]",lg:"max-w-[64rem]",xl:"max-w-[80rem]"};export const Footer=/*@__PURE__*/r.forwardRef(function({position:i="static",variant:f="outline",size:p="md",color:b="primary",density:u="default",elevation:v=0,divider:w=!0,maxWidth:g="none",padded:y=!0,label:j,render:h,className:k,style:z,children:N,...C},B){const F=r.useContext(n),{register:R}=F,W=r.useCallback(e=>{R("footer",e),"function"==typeof B?B(e):B&&(B.current=e)},[R,B]),q=s("w-full min-w-0",d[f],w?"border-t [border-color:var(--n-line)]":"",x[i],m,k);return t({render:h??e("footer",{}),ref:W,props:{"aria-label":j,className:q,style:{...l(b,v),...z},children:e("div",{className:s("w-full",y?s(a[u][p],o[u][p]):"","none"===g?"":s(c[g],"mx-auto")),children:N}),...C}})});

package/dist/components/footer/index.d.ts

@@ -0,0 +1,2 @@
+export { Footer } from './Footer.js';
+export type { FooterProps } from './Footer.js';

package/dist/components/footer/index.js

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

package/dist/components/grid/Grid.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useRender } from '@base-ui/react/use-render';
-import type { NebaAlignSelf, NebaResponsive } from '../../types';
+import type { NebaAlignSelf, NebaResponsive } from '../../types.js';
 export interface GridProps extends React.ComponentPropsWithoutRef<'div'> {
     /**
      * How many of the container's columns the item takes. Read against the

package/dist/components/grid/Grid.js

@@ -1 +1 @@
-import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{alignSelfClasses as n,offsetValue as o,responsiveSlots as t,spanValue as s}from"../../internal/grid";export const Grid=e.forwardRef(function({span:e,offset:a,alignSelf:i,render:f,className:l,style:c,children:d,...m},p){const u=["neba-grid-item",i?n[i]:"",l??""].filter(Boolean).join(" ");return r({render:f,ref:p,props:{className:u,style:{...t("span",e,s),...t("offset",a,o),...c},children:d,...m}})});
+import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{alignSelfClasses as n,offsetValue as o,responsiveSlots as s,spanValue as t}from"../../internal/grid.js";export const Grid=/*@__PURE__*/e.forwardRef(function({span:e,offset:a,alignSelf:i,render:f,className:l,style:c,children:d,...m},p){const u=["neba-grid-item",i?n[i]:"",l??""].filter(Boolean).join(" ");return r({render:f,ref:p,props:{className:u,style:{...s("span",e,t),...s("offset",a,o),...c},children:d,...m}})});

package/dist/components/grid/index.d.ts

@@ -1,2 +1,2 @@
-export { Grid } from './Grid';
-export type { GridProps } from './Grid';
+export { Grid } from './Grid.js';
+export type { GridProps } from './Grid.js';

package/dist/components/grid/index.js

@@ -1 +1 @@
-export{Grid}from"./Grid";
+export{Grid}from"./Grid.js";

package/dist/components/grid-container/GridContainer.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useRender } from '@base-ui/react/use-render';
-import type { NebaAlignItems, NebaDensity, NebaJustifyContent, NebaResponsive, NebaSize } from '../../types';
+import type { NebaAlignItems, NebaDensity, NebaJustifyContent, NebaResponsive, NebaSize } from '../../types.js';
 export interface GridContainerProps extends React.ComponentPropsWithoutRef<'div'> {
     /**
      * How many columns a row is divided into. Every `span` and every `offset`

package/dist/components/grid-container/GridContainer.js

@@ -1 +1 @@
-import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{alignContentClasses as n,alignItemsClasses as a,columnCount as o,justifyContentClasses as t,responsiveSlots as i,spacingValue as p,withBaseline as s}from"../../internal/grid";import{boxPaddingClasses as l}from"../box/Box";export const GridContainer=e.forwardRef(function({columns:e,spacing:c,rowSpacing:d,columnSpacing:f,justifyContent:m,alignItems:g,alignContent:x,wrap:u=!0,padded:y=!0,size:w="md",density:b="default",render:C,className:h,style:j,children:B,...N},S){const z=["neba-grid flex",u?"flex-wrap":"flex-nowrap","gap-x-(--n-gap-x) gap-y-(--n-gap-y)",y?l[b][w]:"",m?t[m]:"",g?a[g]:"",x?n[x]:"",h??""].filter(Boolean).join(" ");return r({render:C,ref:S,props:{className:z,style:{...i("cols",s(e,12),o),...i("gap-x",s(f??c,2),p),...i("gap-y",s(d??c,2),p),...j},children:B,...N}})});
+import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{alignContentClasses as n,alignItemsClasses as a,columnCount as o,justifyContentClasses as t,responsiveSlots as i,spacingValue as s,withBaseline as p}from"../../internal/grid.js";import{boxPaddingClasses as l}from"../box/Box.js";export const GridContainer=/*@__PURE__*/e.forwardRef(function({columns:e,spacing:c,rowSpacing:d,columnSpacing:f,justifyContent:m,alignItems:g,alignContent:x,wrap:u=!0,padded:y=!0,size:w="md",density:j="default",render:b,className:C,style:h,children:B,...N},S){const z=["neba-grid flex",u?"flex-wrap":"flex-nowrap","gap-x-(--n-gap-x) gap-y-(--n-gap-y)",y?l[j][w]:"",m?t[m]:"",g?a[g]:"",x?n[x]:"",C??""].filter(Boolean).join(" ");return r({render:b,ref:S,props:{className:z,style:{...i("cols",p(e,12),o),...i("gap-x",p(f??c,2),s),...i("gap-y",p(d??c,2),s),...h},children:B,...N}})});

package/dist/components/grid-container/index.d.ts

@@ -1,2 +1,2 @@
-export { GridContainer } from './GridContainer';
-export type { GridContainerProps } from './GridContainer';
+export { GridContainer } from './GridContainer.js';
+export type { GridContainerProps } from './GridContainer.js';

package/dist/components/grid-container/index.js

@@ -1 +1 @@
-export{GridContainer}from"./GridContainer";
+export{GridContainer}from"./GridContainer.js";

package/dist/components/header/Header.d.ts

@@ -0,0 +1,114 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { NebaAlign, NebaColor, NebaDensity, NebaElevation, NebaPosition, NebaSize, NebaVariant } from '../../types.js';
+export interface HeaderProps extends Omit<React.ComponentPropsWithoutRef<'header'>, 'color' | 'title'> {
+    /**
+     * The leading slot: the logo, the product's name, the thing that is the same
+     * on every page. An [AppLogo] is what usually goes here.
+     *
+     * It is a slot rather than the first of `children` because the three regions
+     * of a bar are laid out against each other — the middle can only be centred
+     * in the bar if the two ends are measured — and a caller writing three
+     * wrappers by hand is a caller whose header drifts from the next one.
+     */
+    brand?: React.ReactNode;
+    /**
+     * The trailing slot: the account menu, the theme switch, the call to action.
+     * Laid out end-aligned, so a row of buttons needs no wrapper of its own.
+     */
+    actions?: React.ReactNode;
+    /**
+     * Where the middle slot sits.
+     *
+     * - `start` — packed against the brand, taking whatever is left. The
+     *   arrangement of an application's toolbar, and the default.
+     * - `center` — centred in the bar itself, not in the space left over. The two
+     *   ends are given equal shares for this, so the middle stays on the bar's
+     *   own midline however wide the brand is.
+     * - `end` — packed against the actions.
+     * @default 'start'
+     */
+    align?: NebaAlign;
+    /**
+     * How the bar sits in the page's scroll, spelled the way CSS spells it.
+     * `sticky` — the default — holds it against the top of the window once the
+     * page has scrolled to it, while leaving it in the flow so nothing has to be
+     * padded out of its way. `fixed` takes it out of the flow entirely, which a
+     * [PageLayout] answers by reserving its height. `static` lets it scroll away.
+     * @default 'sticky'
+     */
+    position?: NebaPosition;
+    /**
+     * Weight of the sheet, said the way a *container* says it: the bar is never
+     * dyed, because what is on it arrives with colours of its own.
+     * @default 'outline'
+     */
+    variant?: NebaVariant;
+    /**
+     * The bar's scale — its height floor, its gutter and the air around its
+     * slots. As on Box, `size` here is the size of the *sheet*.
+     * @default 'md'
+     */
+    size?: NebaSize;
+    /** @default 'primary' */
+    color?: NebaColor;
+    /** @default 'default' */
+    density?: NebaDensity;
+    /**
+     * Drop shadow depth. `0` (the default) is flat: a header is attached to the
+     * top of the window rather than floating over the middle of it, and `divider`
+     * is what separates it from the content.
+     * @default 0
+     */
+    elevation?: NebaElevation;
+    /**
+     * Draws a hairline along the bottom edge, against the content the bar is
+     * over. On by default, for BottomNavigation's reason: a bar pinned over a
+     * scrolling page has content passing underneath it at every moment, and a
+     * translucent sheet with nothing marking its edge reads as part of that.
+     * @default true
+     */
+    divider?: boolean;
+    /**
+     * Holds the row of slots to a measure and centres it, while the sheet itself
+     * still spans the window. On the same ladder Container's own `maxWidth` uses,
+     * so a header and the [Container] under it line up on the same edge.
+     * @default 'none'
+     */
+    maxWidth?: NebaSize | 'none';
+    /** The gutter down each side of the row. @default true */
+    padded?: boolean;
+    /**
+     * The name the bar is announced by. Worth writing when a page has more than
+     * one `<header>` in it — an article's own header and the site's — because
+     * "banner" twice tells a reader which is which not at all.
+     */
+    label?: string;
+    /**
+     * Renders something other than a `<header>`. Base UI's own escape hatch, and
+     * rarely what you want: the bar at the top of a page is a banner, and the tag
+     * is what says so to a search engine and to a screen reader's landmark list.
+     */
+    render?: useRender.RenderProp;
+    /** The middle slot. */
+    children?: React.ReactNode;
+}
+/**
+ * The bar across the top of a page.
+ *
+ * A real `<header>`, which is the whole reason it is a component rather than a
+ * row of divs: at the top level of a document that tag is the `banner`
+ * landmark, and it is what a screen reader's landmark list, a reader mode and a
+ * search engine's understanding of the page are all built out of.
+ *
+ * Its three slots are props rather than compound sub-components, for Card's and
+ * Dialog's reason: the arrangement is fixed — brand, middle, actions — and what
+ * a caller wants to decide is what goes in each. That the middle can be centred
+ * on the bar's own midline is only possible because the ends are the
+ * component's to measure.
+ *
+ * Inside a [PageLayout] it also registers itself, so a sidebar that holds its
+ * place knows how far down the window to start. Outside one it is simply a bar,
+ * and everything above still works.
+ */
+export declare const Header: React.ForwardRefExoticComponent<HeaderProps & React.RefAttributes<HTMLElement>>;

package/dist/components/header/Header.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as r from"react";import{useRender as n}from"@base-ui/react/use-render";import{boxPaddingXClasses as t}from"../box/Box.js";import{PageLayoutContext as s}from"../../internal/page-layout.js";import{cx as i,hasContent as l,surfaceClasses as m,surfaceSlots as o,transitionClasses as d}from"../../internal/styles.js";const c={xs:"min-h-10",sm:"min-h-12",md:"min-h-14",lg:"min-h-16",xl:"min-h-20"},x={xs:"gap-1.5",sm:"gap-2",md:"gap-3",lg:"gap-4",xl:"gap-5"},f={xs:"gap-3",sm:"gap-4",md:"gap-6",lg:"gap-8",xl:"gap-10"},p={xs:"max-w-[30rem]",sm:"max-w-[40rem]",md:"max-w-[48rem]",lg:"max-w-[64rem]",xl:"max-w-[80rem]"},u={solid:[m,"text-(--neba-fg) bg-(--n-panel-press)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[m,"text-(--neba-fg) bg-(--n-panel)","[box-shadow:var(--n-elev),var(--neba-plate-glass)]"].join(" "),text:"text-(--neba-fg) bg-transparent"},g={static:"",sticky:"sticky top-0 z-30",fixed:"fixed inset-x-0 top-0 z-40"},h={start:"shrink-0",center:"flex-1 basis-0",end:"shrink-0"},b={start:"flex min-w-0 flex-1 items-center justify-start",center:"flex min-w-0 shrink items-center justify-center",end:"flex min-w-0 flex-1 items-center justify-end"};export const Header=/*@__PURE__*/r.forwardRef(function({brand:m,actions:v,align:w="start",position:y="sticky",variant:j="outline",size:N="md",color:k="primary",density:z="default",elevation:C=0,divider:B=!0,maxWidth:H="none",padded:R=!0,label:W,render:q,className:A,style:D,children:E,...F},G){const I=r.useContext(s),{register:J}=I,K=r.useCallback(e=>{J("header",e),"function"==typeof G?G(e):G&&(G.current=e)},[J,G]),L=i("w-full min-w-0",u[j],B?"border-b [border-color:var(--n-line)]":"",g[y],d,A);return n({render:q??e("header",{}),ref:K,props:{"aria-label":W,className:L,style:{...o(k,C),...D},children:a("div",{className:i("flex w-full items-center",c[N],f[N],R?t[z][N]:"","none"===H?"":i(p[H],"mx-auto")),children:[l(m)?e("div",{className:i("flex min-w-0 items-center",h[w],x[N]),children:m}):"center"===w?e("div",{"aria-hidden":"true",className:h[w]}):null,l(E)?e("div",{className:i(b[w],x[N]),children:E}):null,l(v)?e("div",{className:i("flex min-w-0 items-center justify-end",h[w],x[N]),children:v}):"center"===w?e("div",{"aria-hidden":"true",className:h[w]}):null]}),...F}})});

package/dist/components/header/index.d.ts

@@ -0,0 +1,2 @@
+export { Header } from './Header.js';
+export type { HeaderProps } from './Header.js';

package/dist/components/header/index.js

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

package/dist/components/heatmap-chart/HeatmapChart.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { type ChartScaleKind } from '../../internal/chart';
-import type { NebaChartCategory, NebaChartLegend, NebaChartSeries } from '../../types';
-import type { ChartBaseProps } from '../../internal/chart-frame';
+import { type ChartScaleKind } from '../../internal/chart.js';
+import type { NebaChartCategory, NebaChartLegend, NebaChartSeries } from '../../types.js';
+import type { ChartBaseProps } from '../../internal/chart-frame.js';
 export interface HeatmapChartProps extends Omit<ChartBaseProps, 'legend'> {
     /**
      * The rows. Each series is a row of the grid or a group of the treemap, and

package/dist/components/heatmap-chart/HeatmapChart.js

@@ -1 +1 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as l from"react";import{ChartScaleLegend as n,ChartSurface as i,ChartTooltipPanel as a,useMeasuredWidth as r}from"../../internal/chart-frame";import{categoryAt as o,chartFontSizes as d,compactNumber as h,formatCategory as c,markGap as s,plotHeights as m,rampFill as u,rampInk as x,rampStep as f,rampSteps as g,squarify as p,textWidth as v,toValues as w,truncate as b}from"../../internal/chart";import{numberFormatter as y}from"../../internal/format";import{cx as M,metaTextClasses as k,srOnlyClasses as A}from"../../internal/styles";import{useMessages as N}from"../../internal/i18n";export function HeatmapChart({series:z,categories:E,shape:S="grid",scale:j="sequential",midpoint:B=0,min:C,max:I,valueLabels:_="none",height:D,format:L,locale:P,label:R,legend:q,tooltip:H,empty:K,size:U="md",variant:W="text",padded:F=!1,className:G,...J}){const O=l.useRef(null),Q=r(O),T=N(P),V=l.useId(),[X,Y]=l.useState(null),Z=l.useCallback(e=>L?y(P,L).format(e):h(e,P),[L,P]),ee=l.useMemo(()=>w(z),[z]),te=ee.reduce((e,t)=>Math.max(e,t.length),0),le=l.useMemo(()=>Array.from({length:te},(e,t)=>o(t,E,ee)),[te,E,ee]),ne=l.useMemo(()=>z.map((e,t)=>e.name??`${t+1}`),[z]),ie=l.useMemo(()=>{let e=1/0,t=-1/0,l=!1;for(const n of ee)for(const i of n)null!==i.value&&(l=!0,e=Math.min(e,i.value),t=Math.max(t,i.value));return l?{min:e,max:t}:null},[ee]),ae=C??ie?.min??0,re=I??ie?.max??1,oe=l.useCallback(e=>f(e,ae,re,j,B),[ae,re,j,B]),de="number"==typeof D?D:m[U]??220,he=d[U],ce=!0===q||void 0===q||!1===q?{}:q,se=!1!==q,me=ce.side??"bottom",ue=!1===H?{mode:"none"}:!0===H||void 0===H?{}:H,xe="none"===ue.mode,fe=null===ie||0===te||0===z.length,ge=l.useMemo(()=>{if("treemap"===S||Q<=0)return{texts:[],band:0};const e=Math.min(150,.25*Q),t=ne.map(t=>b(t,e,he));return{texts:t,band:t.reduce((e,t)=>Math.max(e,v(t,he)),0)+10}},[S,ne,Q,he]),pe="treemap"===S?0:he+8,ve={left:ge.band,width:Math.max(0,Q-ge.band),height:Math.max(0,de-pe)},we=l.useMemo(()=>{if(ve.width<=0||ve.height<=0)return[];if("treemap"===S){const e=[];return ee.forEach((t,l)=>t.forEach((t,n)=>{null!==t.value&&e.push({row:l,index:n,cell:t})})),p(e.map(e=>Math.max(0,e.cell.value??0)),ve.width,ve.height).map(t=>({row:e[t.index].row,index:e[t.index].index,cell:e[t.index].cell,x:ve.left+t.x,y:t.y,width:t.width,height:t.height}))}const e=ve.height/Math.max(1,z.length),t=ve.width/Math.max(1,te),l=[];return ee.forEach((n,i)=>n.forEach((n,a)=>{null!==n.value&&l.push({row:i,index:a,cell:n,x:ve.left+a*t,y:i*e,width:t,height:e})})),l},[S,ee,z.length,te,ve.left,ve.width,ve.height]),be=l.useCallback(e=>c(e.cell.x??E?.[e.index]??le[e.index]??e.index,P),[E,le,P]),ye=null===X?null:we.find(e=>e.row===X.row&&e.index===X.index)??null,Me=null===ye?[]:[{seriesIndex:ye.row,color:ye.cell.color??u(oe(ye.cell.value??0),j),value:ye.cell.value,formatted:Z(ye.cell.value??0),label:ye.cell.label}],ke=Array.from({length:g},(e,t)=>u(t,j));return e(i,{...J,size:U,variant:W,padded:F,className:G,legendSide:me,legend:se&&!fe?e(n,{steps:ke,from:Z("diverging"===j?-$(ae,re,B)+B:ae),to:Z("diverging"===j?$(ae,re,B)+B:re),middle:"diverging"===j?Z(B):void 0,align:ce.align??"center",vertical:"left"===me||"right"===me,size:U}):null,table:fe?null:t("table",{id:V,className:A,children:[R?e("caption",{children:R}):null,e("thead",{children:t("tr",{children:[e("th",{scope:"col"}),le.map((t,l)=>e("th",{scope:"col",children:c(t,P)},l))]})}),e("tbody",{children:ee.map((l,n)=>t("tr",{children:[e("th",{scope:"row",children:ne[n]}),le.map((t,n)=>{const i=l[n];return e("td",{children:void 0!==i?.label?i.label:null==i?.value?"":Z(i.value)},n)})]},n))})]}),children:t("div",{ref:O,role:"img",tabIndex:fe?void 0:0,"aria-label":R,"aria-describedby":fe?void 0:V,onPointerLeave:()=>Y(null),onBlur:()=>Y(null),onKeyDown:e=>{if(xe||0===we.length)return;const t=null===X?-1:we.findIndex(e=>e.row===X.row&&e.index===X.index);if("ArrowRight"===e.key||"ArrowDown"===e.key){const e=we[Math.min(we.length-1,t+1)];Y({row:e.row,index:e.index})}else if("ArrowLeft"===e.key||"ArrowUp"===e.key){const e=we[Math.max(0,(-1===t?we.length:t)-1)];Y({row:e.row,index:e.index})}else{if("Escape"!==e.key)return;Y(null)}e.preventDefault()},className:M("relative w-full rounded-(--neba-radius-xs)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2"),style:{height:de},children:[fe?e("div",{className:M("flex h-full items-center justify-center text-(--neba-muted-fg)",k[U]),children:K??T.empty.title}):Q>0?t("svg",{width:Q,height:de,viewBox:`0 0 ${Q} ${de}`,"aria-hidden":"true",className:"block",children:[we.map(l=>{const n=oe(l.cell.value??0),i=X?.row===l.row&&X?.index===l.index,a=Math.max(0,l.width-s),r=Math.max(0,l.height-s);if(a<=0||r<=0)return null;const o=Z(l.cell.value??0),d="treemap"===S?"all"===_?[be(l),o]:[be(l)]:"all"===_?[o]:[],h=d.filter(e=>function(e,t,l,n){return l>=1.8*n&&t>=Math.min(v(e,n),2.5*n)+8}(e,a,r/d.length,he)),c=l.cell.color?"var(--neba-surface)":x(n,j);return t("g",{children:[e("rect",{x:l.x+s/2,y:l.y+s/2,width:a,height:r,rx:Math.min(3,a/2,r/2),fill:l.cell.color??u(n,j),opacity:i?1:.94,onPointerEnter:xe?void 0:()=>Y({row:l.row,index:l.index}),className:"[transition:opacity_var(--neba-duration)_var(--neba-ease)]"}),h.map((t,n)=>e("text",{x:l.x+l.width/2,y:l.y+l.height/2+(n-(h.length-1)/2)*(he+2),textAnchor:"middle",dominantBaseline:"central",fontSize:he,fontWeight:0===n?500:400,fill:c,opacity:0===n?1:.85,pointerEvents:"none",className:0===n&&"treemap"===S?void 0:"tabular-nums",children:b(t,l.width-8,he)},n))]},`${l.row}-${l.index}`)}),"grid"===S?ge.texts.map((t,l)=>e("text",{x:ve.left-8,y:(l+.5)*ve.height/Math.max(1,z.length),textAnchor:"end",dominantBaseline:"central",fontSize:he,fill:"var(--neba-muted-fg)",children:t},`row-${l}`)):null,"grid"===S?le.map((t,l)=>{const n=ve.width/Math.max(1,te),i=c(t,P);return l%Math.max(1,Math.ceil((v(i,he)+8)/Math.max(1,n)))!==0?null:e("text",{x:ve.left+(l+.5)*n,y:ve.height+he,textAnchor:"middle",fontSize:he,fill:"var(--neba-muted-fg)",children:i},`col-${l}`)}):null]}):null,ye&&!xe?ue.render?e("div",{className:"pointer-events-none absolute z-10",style:{left:ye.x+ye.width/2,top:ye.y},children:ue.render({index:ye.index,category:ye.cell.x??le[ye.index]??ye.index,items:Me})}):e(a,{heading:`${ne[ye.row]} · ${be(ye)}`,items:Me,x:ye.x+ye.width/2,y:ye.y,flip:ye.x+ye.width/2>.6*Q,size:U}):null]})})}function $(e,t,l){return Math.max(Math.abs(t-l),Math.abs(l-e))}
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as l from"react";import{ChartScaleLegend as n,ChartSurface as i,ChartTooltipPanel as a,useMeasuredWidth as r}from"../../internal/chart-frame.js";import{categoryAt as o,chartFontSizes as d,compactNumber as h,formatCategory as s,markGap as c,plotHeights as m,rampFill as u,rampInk as x,rampStep as f,rampSteps as g,squarify as p,textWidth as v,toValues as w,truncate as b}from"../../internal/chart.js";import{numberFormatter as y}from"../../internal/format.js";import{cx as M,metaTextClasses as j,srOnlyClasses as k}from"../../internal/styles.js";import{emptyMessages as A,useMessages as N}from"../../internal/i18n.js";export function HeatmapChart({series:z,categories:E,shape:S="grid",scale:B="sequential",midpoint:C=0,min:I,max:_,valueLabels:D="none",height:L,format:P,locale:R,label:q,legend:H,tooltip:K,empty:U,size:W="md",variant:F="text",padded:G=!1,className:J,...O}){const Q=l.useRef(null),T=r(Q),V=N(A,R),X=l.useId(),[Y,Z]=l.useState(null),ee=l.useCallback(e=>P?y(R,P).format(e):h(e,R),[P,R]),te=l.useMemo(()=>w(z),[z]),le=te.reduce((e,t)=>Math.max(e,t.length),0),ne=l.useMemo(()=>Array.from({length:le},(e,t)=>o(t,E,te)),[le,E,te]),ie=l.useMemo(()=>z.map((e,t)=>e.name??`${t+1}`),[z]),ae=l.useMemo(()=>{let e=1/0,t=-1/0,l=!1;for(const n of te)for(const i of n)null!==i.value&&(l=!0,e=Math.min(e,i.value),t=Math.max(t,i.value));return l?{min:e,max:t}:null},[te]),re=I??ae?.min??0,oe=_??ae?.max??1,de=l.useCallback(e=>f(e,re,oe,B,C),[re,oe,B,C]),he="number"==typeof L?L:m[W]??220,se=d[W],ce=!0===H||void 0===H||!1===H?{}:H,me=!1!==H,ue=ce.side??"bottom",xe=!1===K?{mode:"none"}:!0===K||void 0===K?{}:K,fe="none"===xe.mode,ge=null===ae||0===le||0===z.length,pe=l.useMemo(()=>{if("treemap"===S||T<=0)return{texts:[],band:0};const e=Math.min(150,.25*T),t=ie.map(t=>b(t,e,se));return{texts:t,band:t.reduce((e,t)=>Math.max(e,v(t,se)),0)+10}},[S,ie,T,se]),ve="treemap"===S?0:se+8,we={left:pe.band,width:Math.max(0,T-pe.band),height:Math.max(0,he-ve)},be=l.useMemo(()=>{if(we.width<=0||we.height<=0)return[];if("treemap"===S){const e=[];return te.forEach((t,l)=>t.forEach((t,n)=>{null!==t.value&&e.push({row:l,index:n,cell:t})})),p(e.map(e=>Math.max(0,e.cell.value??0)),we.width,we.height).map(t=>({row:e[t.index].row,index:e[t.index].index,cell:e[t.index].cell,x:we.left+t.x,y:t.y,width:t.width,height:t.height}))}const e=we.height/Math.max(1,z.length),t=we.width/Math.max(1,le),l=[];return te.forEach((n,i)=>n.forEach((n,a)=>{null!==n.value&&l.push({row:i,index:a,cell:n,x:we.left+a*t,y:i*e,width:t,height:e})})),l},[S,te,z.length,le,we.left,we.width,we.height]),ye=l.useCallback(e=>s(e.cell.x??E?.[e.index]??ne[e.index]??e.index,R),[E,ne,R]),Me=null===Y?null:be.find(e=>e.row===Y.row&&e.index===Y.index)??null,je=null===Me?[]:[{seriesIndex:Me.row,color:Me.cell.color??u(de(Me.cell.value??0),B),value:Me.cell.value,formatted:ee(Me.cell.value??0),label:Me.cell.label}],ke=Array.from({length:g},(e,t)=>u(t,B));return e(i,{...O,size:W,variant:F,padded:G,className:J,legendSide:ue,legend:me&&!ge?e(n,{steps:ke,from:ee("diverging"===B?-$(re,oe,C)+C:re),to:ee("diverging"===B?$(re,oe,C)+C:oe),middle:"diverging"===B?ee(C):void 0,align:ce.align??"center",vertical:"left"===ue||"right"===ue,size:W}):null,table:ge?null:t("table",{id:X,className:k,children:[q?e("caption",{children:q}):null,e("thead",{children:t("tr",{children:[e("th",{scope:"col"}),ne.map((t,l)=>e("th",{scope:"col",children:s(t,R)},l))]})}),e("tbody",{children:te.map((l,n)=>t("tr",{children:[e("th",{scope:"row",children:ie[n]}),ne.map((t,n)=>{const i=l[n];return e("td",{children:void 0!==i?.label?i.label:null==i?.value?"":ee(i.value)},n)})]},n))})]}),children:t("div",{ref:Q,role:"img",tabIndex:ge?void 0:0,"aria-label":q,"aria-describedby":ge?void 0:X,onPointerLeave:()=>Z(null),onBlur:()=>Z(null),onKeyDown:e=>{if(fe||0===be.length)return;const t=null===Y?-1:be.findIndex(e=>e.row===Y.row&&e.index===Y.index);if("ArrowRight"===e.key||"ArrowDown"===e.key){const e=be[Math.min(be.length-1,t+1)];Z({row:e.row,index:e.index})}else if("ArrowLeft"===e.key||"ArrowUp"===e.key){const e=be[Math.max(0,(-1===t?be.length:t)-1)];Z({row:e.row,index:e.index})}else{if("Escape"!==e.key)return;Z(null)}e.preventDefault()},className:M("relative w-full rounded-(--neba-radius-xs)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2"),style:{height:he},children:[ge?e("div",{className:M("flex h-full items-center justify-center text-(--neba-muted-fg)",j[W]),children:U??V.title}):T>0?t("svg",{width:T,height:he,viewBox:`0 0 ${T} ${he}`,"aria-hidden":"true",className:"block",children:[be.map(l=>{const n=de(l.cell.value??0),i=Y?.row===l.row&&Y?.index===l.index,a=Math.max(0,l.width-c),r=Math.max(0,l.height-c);if(a<=0||r<=0)return null;const o=ee(l.cell.value??0),d="treemap"===S?"all"===D?[ye(l),o]:[ye(l)]:"all"===D?[o]:[],h=d.filter(e=>function(e,t,l,n){return l>=1.8*n&&t>=Math.min(v(e,n),2.5*n)+8}(e,a,r/d.length,se)),s=l.cell.color?"var(--neba-surface)":x(n,B);return t("g",{children:[e("rect",{x:l.x+c/2,y:l.y+c/2,width:a,height:r,rx:Math.min(3,a/2,r/2),fill:l.cell.color??u(n,B),opacity:i?1:.94,onPointerEnter:fe?void 0:()=>Z({row:l.row,index:l.index}),className:"[transition:opacity_var(--neba-duration)_var(--neba-ease)]"}),h.map((t,n)=>e("text",{x:l.x+l.width/2,y:l.y+l.height/2+(n-(h.length-1)/2)*(se+2),textAnchor:"middle",dominantBaseline:"central",fontSize:se,fontWeight:0===n?500:400,fill:s,opacity:0===n?1:.85,pointerEvents:"none",className:0===n&&"treemap"===S?void 0:"tabular-nums",children:b(t,l.width-8,se)},n))]},`${l.row}-${l.index}`)}),"grid"===S?pe.texts.map((t,l)=>e("text",{x:we.left-8,y:(l+.5)*we.height/Math.max(1,z.length),textAnchor:"end",dominantBaseline:"central",fontSize:se,fill:"var(--neba-muted-fg)",children:t},`row-${l}`)):null,"grid"===S?ne.map((t,l)=>{const n=we.width/Math.max(1,le),i=s(t,R);return l%Math.max(1,Math.ceil((v(i,se)+8)/Math.max(1,n)))!==0?null:e("text",{x:we.left+(l+.5)*n,y:we.height+se,textAnchor:"middle",fontSize:se,fill:"var(--neba-muted-fg)",children:i},`col-${l}`)}):null]}):null,Me&&!fe?xe.render?e("div",{className:"pointer-events-none absolute z-10",style:{left:Me.x+Me.width/2,top:Me.y},children:xe.render({index:Me.index,category:Me.cell.x??ne[Me.index]??Me.index,items:je})}):e(a,{heading:`${ie[Me.row]} · ${ye(Me)}`,items:je,x:Me.x+Me.width/2,y:Me.y,flip:Me.x+Me.width/2>.6*T,size:W}):null]})})}function $(e,t,l){return Math.max(Math.abs(t-l),Math.abs(l-e))}

package/dist/components/heatmap-chart/index.d.ts

@@ -1,2 +1,2 @@
-export { HeatmapChart } from './HeatmapChart';
-export type { HeatmapChartProps } from './HeatmapChart';
+export { HeatmapChart } from './HeatmapChart.js';
+export type { HeatmapChartProps } from './HeatmapChart.js';

package/dist/components/heatmap-chart/index.js

@@ -1 +1 @@
-export{HeatmapChart}from"./HeatmapChart";
+export{HeatmapChart}from"./HeatmapChart.js";

package/dist/components/highlight/Highlight.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import type { TypographyWeight } from '../typography/Typography';
-import type { NebaColor, NebaVariant } from '../../types';
+import type { TypographyWeight } from '../typography/Typography.js';
+import type { NebaColor, NebaVariant } from '../../types.js';
 export interface HighlightProps extends Omit<React.ComponentPropsWithoutRef<'span'>, 'color'> {
     /**
      * What to find.

package/dist/components/highlight/Highlight.js

@@ -1 +1 @@
-import{jsx as n}from"react/jsx-runtime";import*as e from"react";import{transitionClasses as t}from"../../internal/styles";const r={solid:"bg-(--n-fill) text-(--n-on-solid)",outline:"border bg-(--n-panel) text-(--n-accent) [border-color:var(--n-line)]",text:"bg-transparent text-(--n-accent)"},o={regular:"font-normal",medium:"font-medium",semibold:"font-semibold",bold:"font-bold"},l=/[\p{L}\p{N}_]/u;function i(n){return n.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")}function a(n,e,t){const r=e>0?n[e-1]:"",o=t<n.length?n[t]:"";return!l.test(r)&&!l.test(o)}function s(n,e,t,r){e.lastIndex=0;const o=[];let l,i=0;for(;null!==(l=e.exec(n));){if(""===l[0]){e.lastIndex+=1;continue}const s=l.index,c=s+l[0].length;t&&!a(n,s,c)||(s>i&&o.push(n.slice(i,s)),o.push(r(l[0],`${s}`)),i=c)}return 0===o.length?n:(i<n.length&&o.push(n.slice(i)),o)}function c(n,t,r,o){if("string"==typeof n)return s(n,t,r,o);if("number"==typeof n)return s(String(n),t,r,o);if(Array.isArray(n))return e.Children.map(n,n=>c(n,t,r,o));if(e.isValidElement(n)){const l=n.props.children;return void 0===l||"function"==typeof l?n:e.cloneElement(n,void 0,c(l,t,r,o))}return n}export const Highlight=e.forwardRef(function({query:l,variant:a="solid",color:s="warning",caseSensitive:u=!1,wholeWord:f=!1,underline:d=!1,weight:m,className:g,style:p,children:h,...b},x){const y=e.useMemo(()=>function(n,e){if(n instanceof RegExp)return new RegExp(n.source,n.global?n.flags:`${n.flags}g`);const t=(Array.isArray(n)?n:[n]).map(n=>n.trim()).filter(Boolean).sort((n,e)=>e.length-n.length);return 0===t.length?null:new RegExp(t.map(i).join("|"),e?"gu":"giu")}(l,u),[l,u]),v=["rounded-[0.25rem] px-0.5 -mx-0.5","box-decoration-clone",r[a],d?"underline decoration-2 underline-offset-2":"",m?o[m]:"",t].filter(Boolean).join(" "),$=y?c(h,y,f,(e,t)=>n("mark",{className:v,children:e},t)):h;return n("span",{ref:x,className:g,style:{"--n-fill":`var(--neba-${s}-fill)`,"--n-on-solid":`var(--neba-${s}-on-solid)`,"--n-accent":`var(--neba-${s}-accent)`,"--n-panel":`var(--neba-${s}-panel)`,"--n-line":`var(--neba-${s}-line)`,...p},...b,children:$})});
+import{jsx as n}from"react/jsx-runtime";import*as e from"react";import{transitionClasses as t}from"../../internal/styles.js";const r={solid:"bg-(--n-fill) text-(--n-on-solid)",outline:"border bg-(--n-panel) text-(--n-accent) [border-color:var(--n-line)]",text:"bg-transparent text-(--n-accent)"},o={regular:"font-normal",medium:"font-medium",semibold:"font-semibold",bold:"font-bold"},l=/[\p{L}\p{N}_]/u;function i(n){return n.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")}function a(n,e,t){const r=e>0?n[e-1]:"",o=t<n.length?n[t]:"";return!l.test(r)&&!l.test(o)}function s(n,e,t,r){e.lastIndex=0;const o=[];let l,i=0;for(;null!==(l=e.exec(n));){if(""===l[0]){e.lastIndex+=1;continue}const s=l.index,c=s+l[0].length;t&&!a(n,s,c)||(s>i&&o.push(n.slice(i,s)),o.push(r(l[0],`${s}`)),i=c)}return 0===o.length?n:(i<n.length&&o.push(n.slice(i)),o)}function c(n,t,r,o){if("string"==typeof n)return s(n,t,r,o);if("number"==typeof n)return s(String(n),t,r,o);if(Array.isArray(n))return e.Children.map(n,n=>c(n,t,r,o));if(e.isValidElement(n)){const l=n.props.children;return void 0===l||"function"==typeof l?n:e.cloneElement(n,void 0,c(l,t,r,o))}return n}export const Highlight=/*@__PURE__*/e.forwardRef(function({query:l,variant:a="solid",color:s="warning",caseSensitive:u=!1,wholeWord:f=!1,underline:d=!1,weight:m,className:g,style:p,children:h,...b},x){const y=e.useMemo(()=>function(n,e){if(n instanceof RegExp)return new RegExp(n.source,n.global?n.flags:`${n.flags}g`);const t=(Array.isArray(n)?n:[n]).map(n=>n.trim()).filter(Boolean).sort((n,e)=>e.length-n.length);return 0===t.length?null:new RegExp(t.map(i).join("|"),e?"gu":"giu")}(l,u),[l,u]),v=["rounded-[0.25rem] px-0.5 -mx-0.5","box-decoration-clone",r[a],d?"underline decoration-2 underline-offset-2":"",m?o[m]:"",t].filter(Boolean).join(" "),$=y?c(h,y,f,(e,t)=>n("mark",{className:v,children:e},t)):h;return n("span",{ref:x,className:g,style:{"--n-fill":`var(--neba-${s}-fill)`,"--n-on-solid":`var(--neba-${s}-on-solid)`,"--n-accent":`var(--neba-${s}-accent)`,"--n-panel":`var(--neba-${s}-panel)`,"--n-line":`var(--neba-${s}-line)`,...p},...b,children:$})});

package/dist/components/highlight/index.d.ts

@@ -1,2 +1,2 @@
-export { Highlight } from './Highlight';
-export type { HighlightProps } from './Highlight';
+export { Highlight } from './Highlight.js';
+export type { HighlightProps } from './Highlight.js';

package/dist/components/highlight/index.js

@@ -1 +1 @@
-export{Highlight}from"./Highlight";
+export{Highlight}from"./Highlight.js";