neba 1.11.0 → 1.12.0

package/dist/components/gallery/Gallery.d.ts

@@ -0,0 +1,150 @@
+import * as React from 'react';
+import type { NebaImageFilter, NebaImageFrame, NebaImageProtection, NebaImageWatermark } from '../image/Image.js';
+import type { NebaResponsive, NebaSize, NebaSlots } from '../../types.js';
+/** The parts a Gallery draws behind its root. */
+export type GallerySlot = 'item' | 'image' | 'caption' | 'title' | 'description';
+/**
+ * How the tiles are arranged.
+ *
+ * Four, and they answer four different questions rather than being four looks.
+ * `grid` is a contact sheet: every tile the same shape, whatever shape the
+ * files are. `masonry` keeps each picture's own proportion and stacks the
+ * columns. `justified` keeps the proportions *and* fills every row to the edge,
+ * scaling each row to a common height — the arrangement a photograph library
+ * uses, and the only one where no tile is cropped and no space is left over.
+ * `quilted` is a grid whose tiles may take more than one cell, for a set where
+ * some pictures matter more than others.
+ */
+export type NebaGalleryLayout = 'grid' | 'masonry' | 'justified' | 'quilted';
+/** What a tile does when the pointer is on it. */
+export type NebaGalleryHover = 'none' | 'lift' | 'dim' | 'zoom';
+/** Where a tile's words go. */
+export type NebaGalleryCaption = 'none' | 'below' | 'overlay' | 'hover';
+export interface NebaGalleryItem {
+    /** Where the picture is. */
+    src: string;
+    /**
+     * What the picture says. Required for the reason
+     * [Image](../display/image) requires it.
+     */
+    alt: string;
+    /** A stable identity. Defaults to `src`. */
+    id?: string;
+    /** The first line of the caption. */
+    title?: React.ReactNode;
+    /** The second, one step down the scale and muted. */
+    description?: React.ReactNode;
+    /**
+     * A larger file for the viewer, when the tile is a thumbnail. Falls back to
+     * `src`, so a set that has only one size of each picture needs nothing here.
+     */
+    full?: string;
+    /**
+     * The picture's own proportion, as a number or a CSS ratio.
+     *
+     * `masonry` and `justified` are laid out from this, and both are laid out
+     * *before* anything has loaded — which is the whole reason it is data rather
+     * than a measurement. A set without it falls back to the Gallery's own
+     * `ratio`, and comes out as a grid of squares in a masonry's clothing.
+     */
+    ratio?: number | string;
+    /** How many columns the tile takes in `quilted`. @default 1 */
+    cols?: number;
+    /** How many rows the tile takes in `quilted`. @default 1 */
+    rows?: number;
+}
+export interface GalleryProps extends Omit<React.ComponentPropsWithoutRef<'ul'>, 'children' | 'onSelect'> {
+    /** The pictures, in the order they are drawn. */
+    items: readonly NebaGalleryItem[];
+    /** How the tiles are arranged. @default 'grid' */
+    layout?: NebaGalleryLayout;
+    /**
+     * How many tiles across, per breakpoint. Read by `grid`, `masonry` and
+     * `quilted`; `justified` decides for itself, row by row.
+     * @default { xs: 2, sm: 3, lg: 4 }
+     */
+    columns?: NebaResponsive<number>;
+    /**
+     * The space between tiles — a step of the spacing ladder, a number in pixels,
+     * or a CSS length.
+     * @default 'md'
+     */
+    gap?: NebaSize | number | string;
+    /**
+     * The shape of a tile in `grid`, and what an item with no `ratio` of its own
+     * falls back to everywhere else.
+     * @default 1
+     */
+    ratio?: number | string;
+    /**
+     * How tall a row aims to be in `justified`, and how tall one cell is in
+     * `quilted`. Rows come out near it rather than on it, because the last thing
+     * a justified row does is scale to the width it actually has.
+     * @default 220
+     */
+    rowHeight?: number;
+    /** Rounds the tiles. @default 'md' */
+    rounded?: NebaSize | boolean;
+    /**
+     * Where a tile's `title` and `description` go. `below` puts them under the
+     * picture, `overlay` writes them across the foot of it, and `hover` is
+     * `overlay` that arrives with the pointer.
+     * @default 'none'
+     */
+    caption?: NebaGalleryCaption;
+    /**
+     * What a tile does under the pointer.
+     *
+     * `lift` and `dim` are depth and colour, which is how everything else in the
+     * library answers a pointer. `zoom` is the one that scales, and it is the
+     * exception the design language names: what moves is a photograph inside a
+     * frame that stays exactly where it was, with no text on it to resample.
+     * @default 'lift'
+     */
+    hover?: NebaGalleryHover;
+    /**
+     * Opens the picture full size when a tile is clicked, with the rest of the
+     * set an arrow key away.
+     *
+     * The viewer is fetched on demand, so a Gallery that does not offer one does
+     * not carry it.
+     * @default false
+     */
+    preview?: boolean;
+    /** Called when a tile is chosen, whether or not there is a viewer. */
+    onItemSelect?: (item: NebaGalleryItem, index: number) => void;
+    /** Passed to every tile's picture. */
+    filter?: NebaImageFilter | (string & {});
+    /** Passed to every tile's picture. */
+    frame?: NebaImageFrame;
+    /** Passed to every tile's picture, and to the viewer. */
+    watermark?: NebaImageWatermark;
+    /** Passed to every tile's picture, and to the viewer. @default false */
+    protect?: boolean | NebaImageProtection;
+    /** The list's accessible name. Defaults to the `locale`'s word for it. */
+    label?: string;
+    /**
+     * Which language the viewer's buttons are named in — a BCP 47 tag such as
+     * `ko`, `pt-BR` or `zh-Hant`. Unsupported tags fall back to English.
+     */
+    locale?: string;
+    /** What is drawn when `items` is empty. Nothing at all by default. */
+    empty?: React.ReactNode;
+    /** Class names for the parts behind the root. */
+    classNames?: NebaSlots<GallerySlot>;
+}
+/**
+ * A set of pictures, arranged.
+ *
+ * The four layouts are the component: everything else — the captions, the
+ * pointer treatment, the viewer — is the same in all of them, and choosing
+ * between a contact sheet, a masonry, a justified library and a quilt is one
+ * prop rather than four components.
+ *
+ * None of them measures anything. A tile's shape comes from the item's own
+ * `ratio`, which means the whole arrangement is right in the first frame the
+ * browser paints and does not move again as the files arrive — the same bargain
+ * `Image`'s `ratio` makes, one level up, and the reason a gallery of forty
+ * photographs does not reflow forty times.
+ */
+export declare const Gallery: React.ForwardRefExoticComponent<GalleryProps & React.RefAttributes<HTMLUListElement>>;

package/dist/components/gallery/Gallery.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,jsxs as t,Fragment as r}from"react/jsx-runtime";import*as i from"react";import{Image as l}from"../image/Image.js";import{responsiveSlots as a,withBaseline as n}from"../../internal/responsive.js";import{useBreakpointValue as o}from"../../hooks/useMediaQuery.js";import{fill as s,galleryMessages as m,useMessages as u}from"../../internal/i18n.js";import{cx as c,hasContent as d,metaTextClasses as f,radiusClasses as p,sheetTitleClasses as g,toLength as h}from"../../internal/styles.js";import{useStyleDefaults as x}from"../../internal/defaults.js";const b=i.lazy(()=>import("./GalleryViewer.js").then(e=>({default:e.GalleryViewer}))),v={xs:2,sm:3,lg:4},y={xs:"0.25rem",sm:"0.375rem",md:"0.5rem",lg:"0.75rem",xl:"1rem"};function w(e,t){if(void 0===e)return t;if("number"==typeof e)return e>0?e:t;const[r,i]=e.split("/"),l=void 0===i?Number(r):Number(r)/Number(i);return Number.isFinite(l)&&l>0?l:t}const N={none:"",lift:"group-hover/tile:[box-shadow:var(--neba-shadow-2)] group-focus-visible/tile:[box-shadow:var(--neba-shadow-2)]",dim:"",zoom:""},j={none:"",lift:"",dim:"group-hover/tile:[filter:brightness(0.82)] group-focus-visible/tile:[filter:brightness(0.82)]",zoom:"group-hover/tile:[transform:scale(1.06)] group-focus-visible/tile:[transform:scale(1.06)]"};export const Gallery=/*@__PURE__*/i.forwardRef(function(_,k){const{items:M,layout:q="grid",columns:z,gap:S="md",ratio:$=1,rowHeight:A=220,rounded:C="md",caption:G="none",hover:F="lift",preview:I=!1,onItemSelect:R,filter:V,frame:B,watermark:E,protect:H=!1,label:Q,locale:T,empty:W,className:D,classNames:J,style:K,...L}=x(_,["locale"]),O=u(m,T),[P,U]=i.useState(null),X=n(z??v,2),Y=Math.max(1,o(X)??2),Z="string"==typeof S&&S in y?y[S]:h(S)??y.md,ee=!1===C?"":p[!0===C?"md":C],te=w($,1),re=(i,a,n)=>{const o=d(i.title)||d(i.description),m="none"!==G&&o,u="overlay"===G||"hover"===G,p=e(l,{src:i.src,alt:i.alt,ratio:"grid"===q?$:"quilted"===q?"auto":i.ratio??$,fit:"cover",rounded:!1,filter:V,frame:B,watermark:E,protect:H,className:c("size-full",J?.image),classNames:{image:c("[transition:opacity_var(--neba-duration-fill)_var(--neba-ease),filter_var(--neba-duration-fill)_var(--neba-ease),transform_var(--neba-duration-fill)_var(--neba-ease)]","motion-reduce:[transition-duration:0ms]",j[F])}}),h=m?t("div",{className:c("min-w-0",u?c("pointer-events-none absolute inset-x-0 bottom-0 flex flex-col gap-0.5 p-2.5 text-white","[background:linear-gradient(to_top,color-mix(in_oklab,#000_72%,transparent),transparent)]","hover"===G?"opacity-0 group-hover/tile:opacity-100 group-focus-visible/tile:opacity-100 [transition:opacity_var(--neba-duration-fill)_var(--neba-ease)]":""):"flex flex-col gap-0.5 pt-1.5",J?.caption),children:[d(i.title)?e("span",{className:c("truncate font-medium",g.sm,u?"":"text-(--neba-fg)",J?.title),children:i.title}):null,d(i.description)?e("span",{className:c("truncate",f.md,u?"text-white/80":"text-(--neba-muted-fg)",J?.description),children:i.description}):null]}):null,x=t("span",{className:c("relative block overflow-hidden",ee,"quilted"===q||"justified"===q?"size-full":"","[transition:box-shadow_var(--neba-duration)_var(--neba-ease)]",N[F]),children:[p,u?h:null]}),b=u||!m?x:t(r,{children:[x,h]});return e("li",{className:c("group/tile relative m-0 min-w-0 list-none","justified"===q?"flex flex-col":"",J?.item),style:n,children:I||R?e("button",{type:"button","aria-label":`${i.alt} — ${s(O.item,{index:String(a+1),total:String(M.length)})}`,className:c("block w-full text-start [outline:none]",I?"cursor-zoom-in":"cursor-pointer","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:[outline-offset:2px]",ee,"justified"===q?"flex-1":""),onClick:()=>(e=>{R?.(M[e],e),I&&U(e)})(a),children:b}):b},i.id??i.src)},ie=c("neba-gallery m-0 list-none p-0","justified"===q?"neba-gallery-justified flex flex-wrap":"","masonry"===q?"flex items-start":"","grid"===q||"quilted"===q?"grid":"",D??""),le={gap:Z,...a("cols",X,e=>String(Math.max(1,Math.round(e)))),..."grid"===q||"quilted"===q?{gridTemplateColumns:"repeat(var(--n-cols), minmax(0, 1fr))"}:null,..."quilted"===q?{gridAutoRows:`${A}px`,gridAutoFlow:"dense"}:null,...K};let ae;if("masonry"===q){ae=function(e,t){const r=Array.from({length:t},()=>[]),i=new Array(t).fill(0);return e.forEach((e,l)=>{let a=0;for(let e=1;e<t;e+=1)i[e]<i[a]&&(a=e);r[a].push(l),i[a]+=1/e}),r}(M.map(e=>w(e.ratio,te)),Y).map((t,r)=>e("li",{className:"m-0 flex min-w-0 flex-1 list-none flex-col",style:{gap:Z},children:e("ul",{className:"m-0 flex list-none flex-col p-0",style:{gap:Z},children:t.map(e=>re(M[e],e,{}))})},r))}else ae="justified"===q?M.map((e,t)=>{const r=w(e.ratio,te);return re(e,t,{flexGrow:r,flexBasis:r*A+"px",maxWidth:"100%"})}):M.map((e,t)=>re(e,t,"quilted"===q?{gridColumn:`span ${Math.max(1,Math.round(e.cols??1))}`,gridRow:`span ${Math.max(1,Math.round(e.rows??1))}`}:{}));return 0===M.length&&d(W)?e(r,{children:W}):t(r,{children:[e("ul",{ref:k,role:"list","aria-label":Q??O.label,className:ie,style:le,...L,children:ae}),I?e(i.Suspense,{fallback:null,children:e(b,{items:M,index:P,onIndexChange:U,locale:T,watermark:E,protect:H,messages:O})}):null]})});

package/dist/components/gallery/GalleryViewer.d.ts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import type { GalleryMessages } from '../../internal/i18n.js';
+import type { NebaImageProtection, NebaImageWatermark } from '../image/Image.js';
+import type { NebaGalleryItem } from './Gallery.js';
+export interface GalleryViewerProps {
+    items: readonly NebaGalleryItem[];
+    /** Which picture is open, or `null` for none. */
+    index: number | null;
+    onIndexChange: (index: number | null) => void;
+    locale?: string;
+    watermark?: NebaImageWatermark;
+    protect?: boolean | NebaImageProtection;
+    /** Resolved by the Gallery, so the viewer resolves nothing a second time. */
+    messages: GalleryMessages;
+}
+/**
+ * One picture from a Gallery, full size, with the rest of the set an arrow key
+ * away.
+ *
+ * A file of its own rather than a branch inside `Gallery`, and that is the
+ * whole point of it: this is the only thing in the component that needs a
+ * Dialog, and a Dialog is more than the gallery that opens it. Reached through
+ * `React.lazy`, a wall of thumbnails costs nothing for a viewer nobody opened.
+ *
+ * The picture is not a Carousel. A carousel is a set somebody is being shown in
+ * order, and this is one picture with a way to the next — so there is no
+ * autoplay, no wrap, and the arrows stop at the ends rather than looping back
+ * to a photograph the reader has already seen.
+ */
+export declare function GalleryViewer({ items, index, onIndexChange, locale, watermark, protect, messages }: GalleryViewerProps): React.JSX.Element;

package/dist/components/gallery/GalleryViewer.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import{Dialog as l}from"../dialog/Dialog.js";import{IconButton as n}from"../icon-button/IconButton.js";import{Image as a}from"../image/Image.js";import{ChevronIcon as i}from"../../internal/icons.js";import{fill as r}from"../../internal/i18n.js";import{cx as o,metaTextClasses as s}from"../../internal/styles.js";export function GalleryViewer({items:c,index:m,onIndexChange:d,locale:u,watermark:p,protect:f,messages:x}){const h=null!==m,g=null===m?void 0:c[m],v=null===m||m<=0,j=null===m||m>=c.length-1,y=e=>{e>=0&&e<c.length&&d(e)};return e(l,{open:h,onOpenChange:e=>{e||d(null)},size:"xl",locale:u,title:g?.title??g?.alt??"",description:g?.description,onKeyDown:e=>{null===m||e.metaKey||e.ctrlKey||e.altKey||("ArrowRight"===e.key?(e.preventDefault(),y(m+1)):"ArrowLeft"===e.key&&(e.preventDefault(),y(m-1)))},children:t("div",{className:"flex flex-col gap-3",children:[t("div",{className:"relative flex items-center justify-center",children:[g?e(a,{src:g.full??g.src,alt:g.alt,ratio:"auto",fit:"contain",rounded:"md",watermark:p,protect:f,className:"max-h-[70vh] w-auto",classNames:{image:"max-h-[70vh] w-auto object-contain"}},g.id??g.src):null,c.length>1?t("div",{className:"pointer-events-none absolute inset-x-0 flex items-center justify-between px-1",children:[e(n,{variant:"solid",elevation:1,label:x.previous,disabled:v,className:"pointer-events-auto",icon:e("span",{className:"flex items-center rotate-90 rtl:-rotate-90",children:e(i,{})}),onClick:()=>y((m??0)-1)}),e(n,{variant:"solid",elevation:1,label:x.next,disabled:j,className:"pointer-events-auto",icon:e("span",{className:"flex items-center -rotate-90 rtl:rotate-90",children:e(i,{})}),onClick:()=>y((m??0)+1)})]}):null]}),c.length>1?e("p",{className:o("m-0 text-center text-(--neba-muted-fg)",s.md),"aria-live":"polite",children:r(x.item,{index:String((m??0)+1),total:String(c.length)})}):null]})})}

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

@@ -0,0 +1,2 @@
+export { Gallery } from './Gallery.js';
+export type { GalleryProps, GallerySlot, NebaGalleryCaption, NebaGalleryHover, NebaGalleryItem, NebaGalleryLayout } from './Gallery.js';

package/dist/components/gallery/index.js

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

package/dist/components/gauge-chart/GaugeChart.js

@@ -1 +1 @@
-"use client";import{jsx as t,jsxs as e,Fragment as a}from"react/jsx-runtime";import*as n from"react";import{ChartSurface as l,useMeasuredWidth as r}from"../../internal/chart-frame.js";import{arcPath as i,chartFontSizes as s,compactNumber as o,plotHeights as m}from"../../internal/chart.js";import{numberFormatter as c}from"../../internal/format.js";import{emptyMessages as h,useMessages as d}from"../../internal/i18n.js";import{cx as f,metaTextClasses as u}from"../../internal/styles.js";import{useStyleDefaults as p}from"../../internal/defaults.js";function x(t,e,a,n){const l=(n-90)*Math.PI/180;return[t+a*Math.cos(l),e+a*Math.sin(l)]}export function GaugeChart(v){const{value:b,min:g=0,max:M=100,sweep:y=180,thickness:N=.22,thresholds:j,ticks:k=!1,showRange:$=!0,center:w,caption:z,height:I,format:P,locale:S,label:A,empty:C,size:R="md",variant:B="text",color:F="primary",padded:G=!1,className:L,...W}=p(v,["size","variant","locale"]),Y=n.useRef(null),q=r(Y),D=d(h,S),E=n.useCallback(t=>P?c(S,P).format(t):o(t,S),[P,S]),H=Math.max(1,Math.min(360,y)),J=H/2,K=-J,O=J,Q=M-g,T=null===b||Number.isNaN(b)||0===Q?null:Math.min(1,Math.max(0,(b-g)/Q)),U=null===b?F:function(t,e,a){if(!a||0===a.length)return e;let n=e;for(const e of a)t>=e.from&&(n=e.color);return n}(b,F,j),V="number"==typeof I?I:m[R],X=s[R],Z=H>=360?1:Math.max(0,-Math.cos(J*Math.PI/180)),_=H>=180?1:Math.sin(J*Math.PI/180),tt=X*($?1.6:.6),et=Math.max(0,Math.min((q-2*tt)/(2*_),(V-tt*(Z>0?2:1))/(1+Z))),at=et*(1-Math.min(.9,Math.max(.05,N))),nt=q/2,lt=tt+et,rt=et<=0||0===Q,it=null===T?K:K+H*T,st=lt-et+et*(1+Z)/2,ot=!1===k?0:Math.max(2,Math.floor(k));return t(l,{...W,variant:B,color:F,size:R,padded:G,legendSide:"bottom",className:L,legend:null,table:null,children:t("div",{ref:Y,className:"relative w-full",style:{height:V},role:void 0===A?void 0:"img","aria-label":void 0===A?void 0:null===b?A:`${A}: ${E(b)} / ${E(M)}`,children:rt?t("div",{className:f("flex h-full items-center justify-center text-(--neba-muted-fg)",u[R]),children:C??D.title}):q>0?e(a,{children:[e("svg",{width:q,height:V,viewBox:`0 0 ${q} ${V}`,"aria-hidden":"true",className:"block",children:[t("path",{d:i(nt,lt,et,at,K,O),fill:`var(--neba-${F}-soft)`}),null!==T&&T>0?t("path",{d:i(nt,lt,et,at,K,it),fill:`var(--neba-${U}-fill)`,style:{transition:"fill var(--neba-duration) var(--neba-ease)"}}):null,ot>0?Array.from({length:ot},(e,a)=>{const n=K+H*a/(ot-1),[l,r]=x(nt,lt,et+.25*X,n),[i,s]=x(nt,lt,et+.6*X,n);return t("line",{x1:l,y1:r,x2:i,y2:s,stroke:"var(--neba-chart-grid)",strokeWidth:1,strokeLinecap:"round"},a)}):null,$?[[g,K,"start"],[M,O,"end"]].map(([e,a,n])=>{const[l,r]=x(nt,lt,(et+at)/2,a);return t("text",{x:l+(H>=300?0:"start"===n?.6*-X:.6*X),y:r+X*(H>=300?1.4:.35),textAnchor:H>=300?"middle":"start"===n?"end":"start",fontSize:X,fill:"var(--neba-muted-fg)",children:E(e)},n)}):null]}),e("div",{className:"pointer-events-none absolute inset-x-0 flex flex-col items-center gap-0.5",style:{top:st,transform:"translateY(-50%)"},children:[t("span",{className:"font-semibold tabular-nums text-(--neba-fg)",style:{fontSize:2*X},children:w??(null===b?"—":E(b))}),z?t("span",{className:f("text-(--neba-muted-fg)",u[R]),children:z}):null]})]}):null})})}
+"use client";import{jsx as t,jsxs as a,Fragment as e}from"react/jsx-runtime";import*as n from"react";import{ChartSurface as r,useMeasuredWidth as l}from"../../internal/chart-frame.js";import{arcPath as s,chartFontSizes as i,compactNumber as o,plotHeights as h,ringPath as m,textWidth as c,truncate as f}from"../../internal/chart.js";import{numberFormatter as d}from"../../internal/format.js";import{emptyMessages as u,useMessages as x}from"../../internal/i18n.js";import{cx as M,hasContent as p,metaTextClasses as b}from"../../internal/styles.js";import{useStyleDefaults as v}from"../../internal/defaults.js";function g(t,a,e,n){const r=(n-90)*Math.PI/180;return[t+e*Math.cos(r),a+e*Math.sin(r)]}export function GaugeChart(y){const{value:k,min:N=0,max:j=100,sweep:$=180,thickness:w=.22,thresholds:z,ticks:S=!1,showRange:W=!0,center:q,caption:A,height:C,format:D,locale:I,label:L,empty:P,size:R="md",variant:B="text",color:F="primary",padded:G=!1,className:Y,...E}=v(y,["size","variant","locale"]),H=n.useRef(null),J=l(H),K=x(u,I),O=n.useCallback(t=>D?d(I,D).format(t):o(t,I),[D,I]),Q=Math.max(1,Math.min(360,$)),T=Q/2,U=-T,V=T,X=j-N,Z=null===k||Number.isNaN(k)||0===X?null:Math.min(1,Math.max(0,(k-N)/X)),_=null===k?F:function(t,a,e){if(!e||0===e.length)return a;let n=a;for(const a of e)t>=a.from&&(n=a.color);return n}(k,F,z),tt="number"==typeof C?C:h[R],at=i[R],et=Math.min(.9,Math.max(.05,w)),nt=T*Math.PI/180,rt=Q>=360?1:Math.max(0,-Math.cos(nt)),lt=Q>=180?1:Math.sin(nt),st=Math.sin(nt),it=-Math.cos(nt),ot=W&&Q<330?[N,j].map(t=>f(O(t),Math.max(0,.28*J),at)):[],ht=ot.reduce((t,a)=>Math.max(t,c(a,at)),0),mt=.35*at,ct=!1===S?0:.85*at,ft=it<=.25,dt=ft?0:.5*at,ut=ft?at:at*(.35+.55*it),xt=ot.length>0?it*dt+ut+.25*at:0,Mt=Math.max(mt,ct),pt=Math.max(mt,ct),bt=Math.max(mt,ct,xt),vt=[(J/2-Mt)/Math.max(.05,lt),(tt-pt-bt)/(1+rt)];if(ht>0&&st>.05){const t=ft?ht/2:ht;vt.push(Math.max(0,J/2-mt-t)/st-dt)}const gt=Math.max(0,Math.min(...vt)),yt=gt*(1-et),kt=J/2,Nt=pt+gt*(1+rt)+bt,jt=pt+gt+Math.max(0,(tt-Nt)/2),$t=gt<=0||0===X,wt=p(A)?1.85*at:0,zt=jt-yt*(1-Math.min(1,rt))/2,St=Math.min(yt,Math.abs(jt-zt)),Wt=Math.min(yt,Math.abs(jt-zt-wt/2)),qt=2*Math.sqrt(Math.max(0,yt*yt-Wt*Wt)),At=q??(null===k?"—":O(k)),Ct="string"==typeof At?c(At,1):0,Dt=Ct>0?Math.max(at,Math.min(2*at,function(t,a,e,n,r){const l=t*t/(4*r*r)+n*n,s=2*a*n,i=a*a-e*e;return l<=0||i>=0?0:(Math.sqrt(s*s-4*l*i)-s)/(2*l)}(Ct,St,yt,.42,.86))):2*at,It=!1===S?0:Math.max(2,Math.floor(S));return t(r,{...E,variant:B,color:F,size:R,padded:G,legendSide:"bottom",className:Y,legend:null,table:null,children:t("div",{ref:H,className:"relative w-full",style:{height:tt},role:void 0===L?void 0:"img","aria-label":void 0===L?void 0:null===k?L:`${L}: ${O(k)} / ${O(j)}`,children:$t?t("div",{className:M("flex h-full items-center justify-center text-(--neba-muted-fg)",b[R]),children:P??K.title}):J>0?a(e,{children:[a("svg",{width:J,height:tt,viewBox:`0 0 ${J} ${tt}`,"aria-hidden":"true",className:"block",children:[t("path",{d:s(kt,jt,gt,yt,U,V),fill:`var(--neba-${F}-soft)`}),null!==Z?t("path",{d:m(kt,jt,(gt+yt)/2,U,V),fill:"none",stroke:`var(--neba-${_}-fill)`,strokeWidth:gt-yt,pathLength:"1",strokeDasharray:"1",strokeDashoffset:1-Z,style:{transition:"stroke-dashoffset var(--neba-duration-fill) var(--neba-ease), stroke var(--neba-duration) var(--neba-ease)"}}):null,It>0?Array.from({length:It},(a,e)=>{const n=U+Q*e/(It-1),[r,l]=g(kt,jt,gt+.25*at,n),[s,i]=g(kt,jt,gt+.6*at,n);return t("line",{x1:r,y1:l,x2:s,y2:i,stroke:"var(--neba-chart-grid)",strokeWidth:1,strokeLinecap:"round"},e)}):null,ot.length>0?[[ot[0],U,"start"],[ot[1],V,"end"]].map(([a,e,n])=>{const[r,l]=g(kt,jt,gt+dt,e);return t("text",{x:r,y:l+ut,textAnchor:ft?"middle":"start"===n?"end":"start",fontSize:at,fill:"var(--neba-muted-fg)",children:a},n)}):null]}),a("div",{className:"pointer-events-none absolute inset-x-0 mx-auto flex flex-col items-center gap-0.5 text-center",style:{top:zt+wt/2,maxWidth:qt,transform:"translateY(-50%)"},children:[t("span",{className:"font-semibold tabular-nums text-(--neba-fg)",style:{fontSize:Dt},children:At}),A?t("span",{className:M("text-(--neba-muted-fg)",b[R]),children:A}):null]})]}):null})})}

package/dist/components/grid/Grid.js

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

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

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

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

@@ -1,6 +1,6 @@
 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';
+import type { NebaAlign, NebaColor, NebaDensity, NebaElevation, NebaMeasure, NebaPosition, NebaResponsive, 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
@@ -71,11 +71,12 @@ export interface HeaderProps extends Omit<React.ComponentPropsWithoutRef<'header
     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.
+     * still spans the window. The same ladder — and the same lengths, and the
+     * same per-breakpoint map — Container's own `maxWidth` takes, so a header and
+     * the Container under it line up on the same edge.
      * @default 'none'
      */
-    maxWidth?: NebaSize | 'none';
+    maxWidth?: NebaResponsive<NebaMeasure>;
     /** The gutter down each side of the row. @default true */
     padded?: boolean;
     /**

package/dist/components/header/Header.js

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

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

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

package/dist/components/hover-card/HoverCard.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import{PreviewCard as t}from"@base-ui/react/preview-card";import{boxPaddingXClasses as l,boxPaddingYClasses as i}from"../box/Box.js";import{cx as n,hasContent as s,metaTextClasses as r,radiusClasses as o,sheetBodyClasses as d,sheetHeaderGapClasses as m,sheetSectionGapClasses as c,sheetTitleClasses as p,surfaceClasses as f,surfaceSlots as x,toLength as h}from"../../internal/styles.js";import{useStyleDefaults as g}from"../../internal/defaults.js";const u={xs:"max-w-64",sm:"max-w-72",md:"max-w-84",lg:"max-w-md",xl:"max-w-xl"},b=[f,"relative flex flex-col","border text-(--neba-fg) bg-(--n-panel-press)","[border-color:var(--n-line)]","[box-shadow:var(--neba-shadow-3),var(--neba-plate-glass)]","[outline:none]","[transition:opacity_var(--neba-duration)_var(--neba-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),v={xs:8,sm:9,md:10,lg:11,xl:12};export function HoverCard(f){const{size:w="md",color:y="primary",density:N="default",trigger:j,title:O,description:k,children:z,side:C="bottom",align:P="center",sideOffset:$=6,alignOffset:B=0,arrow:D=!1,open:M,defaultOpen:W,onOpenChange:_,delay:A,closeDelay:E,width:H,className:L,style:R,...T}=g(f,["size","density"]),q=l[N][w],F=i[N][w],G=v[w],I=s(O)||s(k),J=h(H);return a(t.Root,{open:M,defaultOpen:W,onOpenChange:e=>_?.(e),children:[e(t.Trigger,{render:j,delay:A,closeDelay:E}),e(t.Portal,{children:e(t.Positioner,{className:"neba-portal z-50 [outline:none]",side:C,align:P,sideOffset:$,alignOffset:B,children:a(t.Popup,{className:n(b,o[w],d[w],c[w],q,F,void 0===J?u[w]:"",L??""),style:{...x(y,3),...void 0===J?null:{maxWidth:J},...R},...T,children:[D?e(t.Arrow,{className:["data-[side=top]:bottom-[-1px]","data-[side=bottom]:top-[-1px] data-[side=bottom]:rotate-180","data-[side=left]:right-[-1px] data-[side=left]:-rotate-90","data-[side=right]:left-[-1px] data-[side=right]:rotate-90"].join(" "),children:a("svg",{width:G,height:G/2,viewBox:"0 0 10 5","aria-hidden":"true",className:"block",children:[e("path",{d:"M0 0h10L5 5z",fill:"var(--n-panel-press)"}),e("path",{d:"M0 0 5 5 10 0",fill:"none",stroke:"var(--n-line)",strokeWidth:"1",vectorEffect:"non-scaling-stroke"})]})}):null,I?a("div",{className:`flex min-w-0 flex-col ${m[w]}`,children:[s(O)?e("div",{className:`m-0 font-semibold ${p[w]}`,children:O}):null,s(k)?e("div",{className:`m-0 text-(--neba-muted-fg) ${r[w]}`,children:k}):null]}):null,s(z)?e("div",{className:"min-w-0",children:z}):null]})})})]})}
+"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import{PreviewCard as t}from"@base-ui/react/preview-card";import{boxPaddingXClasses as l,boxPaddingYClasses as i}from"../box/Box.js";import{cx as n,hasContent as s,metaTextClasses as r,popupFadeClasses as o,radiusClasses as d,sheetBodyClasses as m,sheetHeaderGapClasses as c,sheetSectionGapClasses as f,sheetTitleClasses as p,surfaceClasses as x,surfaceSlots as h,toLength as g}from"../../internal/styles.js";import{useStyleDefaults as u}from"../../internal/defaults.js";const b={xs:"max-w-64",sm:"max-w-72",md:"max-w-84",lg:"max-w-md",xl:"max-w-xl"},v=[x,"relative flex flex-col","border text-(--neba-fg) bg-(--n-panel-press)","[border-color:var(--n-line)]","[box-shadow:var(--neba-shadow-3),var(--neba-plate-glass)]","[outline:none]",o].join(" "),w={xs:8,sm:9,md:10,lg:11,xl:12};export function HoverCard(o){const{size:x="md",color:y="primary",density:N="default",trigger:j,title:O,description:k,children:z,side:C="bottom",align:P="center",sideOffset:$=6,alignOffset:B=0,arrow:D=!1,open:M,defaultOpen:W,onOpenChange:A,delay:E,closeDelay:H,width:L,className:R,style:T,...q}=u(o,["size","density"]),F=l[N][x],G=i[N][x],I=w[x],J=s(O)||s(k),K=g(L);return a(t.Root,{open:M,defaultOpen:W,onOpenChange:e=>A?.(e),children:[e(t.Trigger,{render:j,delay:E,closeDelay:H}),e(t.Portal,{children:e(t.Positioner,{className:"neba-portal z-50 [outline:none]",side:C,align:P,sideOffset:$,alignOffset:B,children:a(t.Popup,{className:n(v,d[x],m[x],f[x],F,G,void 0===K?b[x]:"",R??""),style:{...h(y,3),...void 0===K?null:{maxWidth:K},...T},...q,children:[D?e(t.Arrow,{className:["data-[side=top]:bottom-[-1px]","data-[side=bottom]:top-[-1px] data-[side=bottom]:rotate-180","data-[side=left]:right-[-1px] data-[side=left]:-rotate-90","data-[side=right]:left-[-1px] data-[side=right]:rotate-90"].join(" "),children:a("svg",{width:I,height:I/2,viewBox:"0 0 10 5","aria-hidden":"true",className:"block",children:[e("path",{d:"M0 0h10L5 5z",fill:"var(--n-panel-press)"}),e("path",{d:"M0 0 5 5 10 0",fill:"none",stroke:"var(--n-line)",strokeWidth:"1",vectorEffect:"non-scaling-stroke"})]})}):null,J?a("div",{className:`flex min-w-0 flex-col ${c[x]}`,children:[s(O)?e("div",{className:`m-0 font-semibold ${p[x]}`,children:O}):null,s(k)?e("div",{className:`m-0 text-(--neba-muted-fg) ${r[x]}`,children:k}):null]}):null,s(z)?e("div",{className:"min-w-0",children:z}):null]})})})]})}

package/dist/components/how-to-steps/HowToSteps.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import*as l from"react";import{Button as a}from"../button/Button.js";import{boxPaddingClasses as r}from"../box/Box.js";import{CheckIcon as i,ChevronIcon as o,RestartIcon as s,SuccessIcon as c}from"../../internal/icons.js";import{fill as m,stepsMessages as d,useMessages as p}from"../../internal/i18n.js";import{transitionProps as f}from"../../internal/animate.js";import{cx as x,hasContent as u,iconClasses as b,metaTextClasses as h,radiusClasses as v,sheetBodyClasses as g,sheetSectionGapClasses as N,sheetTitleClasses as w,srOnlyClasses as y,surfaceClasses as k,surfaceSlots as j,toLength as C,transitionClasses as z}from"../../internal/styles.js";import{useStyleDefaults as S}from"../../internal/defaults.js";const L={xs:{box:"1.25rem",text:"text-[0.625rem]"},sm:{box:"1.5rem",text:"text-[0.6875rem]"},md:{box:"1.75rem",text:"text-[0.75rem]"},lg:{box:"2rem",text:"text-[0.8125rem]"},xl:{box:"2.25rem",text:"text-[0.875rem]"}},I={default:{xs:"gap-0.5",sm:"gap-1",md:"gap-1",lg:"gap-1.5",xl:"gap-2"},compact:{xs:"gap-0",sm:"gap-0",md:"gap-0.5",lg:"gap-0.5",xl:"gap-1"}},M={solid:[k,"text-(--neba-fg) bg-(--n-panel-hover)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[k,"border text-(--neba-fg) bg-(--n-panel)","[border-color:var(--n-line)]","[box-shadow:var(--n-elev),var(--neba-plate-glass)]"].join(" "),text:"text-(--neba-fg) bg-transparent"};function R(e){return"string"==typeof e?e:""}function B({level:e,...t}){return l.createElement(`h${Math.min(6,Math.max(1,e))}`,t)}export const HowToSteps=/*@__PURE__*/l.forwardRef(function(k,_){const{steps:H,title:T,headingLevel:$=3,step:E,defaultStep:A=0,onStepChange:F,completed:W,defaultCompleted:q=!1,onCompletedChange:D,orientation:G="vertical",maxHeight:J,railWidth:K="15rem",navigation:O=!0,divider:P=!0,transition:Q="fade",completion:U=!0,completedContent:V,variant:X="outline",size:Y="md",color:Z="primary",density:ee="default",elevation:te=0,locale:ne,previousLabel:le,nextLabel:ae,doneLabel:re,restartLabel:ie,className:oe,style:se,...ce}=S(k,["size","density","variant","locale"]),me=p(d,ne),de=l.useId(),[pe,fe]=l.useState(A),[xe,ue]=l.useState(q),be=void 0!==E,he=void 0!==W,ve=H.length,ge=Math.min(Math.max(be?E:pe,0),Math.max(ve-1,0)),Ne=U&&(he?W:xe),we=void 0!==J,ye="vertical"===G,ke=l.useRef(null),je=l.useRef(null);if(l.useEffect(()=>{const e=ke.current,t=je.current;if(!e||!t)return;const n=e.getBoundingClientRect(),l=t.getBoundingClientRect();ye?l.top<n.top?e.scrollTop-=n.top-l.top:l.bottom>n.bottom&&(e.scrollTop+=l.bottom-n.bottom):l.left<n.left?e.scrollLeft-=n.left-l.left:l.right>n.right&&(e.scrollLeft+=l.right-n.right)},[ge,ye]),0===ve)return null;const Ce=(e,t=!1)=>{he||ue(t),Ne!==t&&D?.(t),t||(be||fe(e),e!==ge&&F?.(e))},ze=0===ge,Se=ge===ve-1,Le="none"===Q?null:f(Q),Ie=t=>{const n=Ne||t<ge,l=!Ne&&t===ge;return e("span",{"aria-hidden":"true",className:x("z-1 flex shrink-0 items-center justify-center rounded-full border font-medium","size-(--n-step-mark) [&_svg]:size-[1.15em]",L[Y].text,z,n?"bg-(--n-fill) text-(--n-on-solid) [border-color:transparent]":l?"bg-(--neba-surface) text-(--n-accent) [border-color:var(--n-accent)]":"bg-(--neba-surface) text-(--neba-muted-fg) [border-color:var(--n-line)]"),children:n?e(i,{}):t+1})},Me=e("ol",{ref:ke,"aria-label":me.steps,className:x("m-0 flex list-none p-0",ye?"flex-col":"flex-row",I[ee][Y],we&&ye?"min-h-0 overflow-y-auto overscroll-contain":"",ye?"":"overflow-x-auto overscroll-contain"),children:H.map((n,l)=>{const a=Ne||l<ge,r=!Ne&&l===ge;return t("li",{ref:r?je:void 0,className:x("relative",ye?"":"min-w-0 flex-1"),children:[l<ve-1?e("span",{"aria-hidden":"true",className:x("absolute",z,a?"bg-(--n-fill)":"bg-(--n-line)",ye?["w-px","[inset-inline-start:calc(0.25rem+var(--n-step-mark)/2)]","[top:calc(0.25rem+var(--n-step-mark))]","[height:calc(100%-var(--n-step-mark))]"].join(" "):["h-px","[inset-inline-start:calc(50%+var(--n-step-mark)/2)]","[top:calc(0.25rem+var(--n-step-mark)/2)]","[width:calc(100%-var(--n-step-mark))]"].join(" "))}):null,t("button",{type:"button",onClick:()=>Ce(l),"aria-current":r?"step":void 0,className:x("flex w-full cursor-pointer items-center p-1 text-start",ye?"gap-3":"flex-col gap-1.5 text-center",v.sm,"hover:bg-(--n-soft)",z,"focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-1"),children:[Ie(l),e("span",{className:x("min-w-0",ye?"truncate":"",h[Y],r?"font-medium text-(--neba-fg)":"text-(--neba-muted-fg)"),children:n.title}),e("span",{className:y,children:m(me.step,{index:String(l+1),title:R(n.title)})})]})]},l)})}),Re=t("div",{className:x("grid flex-1 grid-cols-1",we?"min-h-0":""),children:[H.map((n,l)=>{const a=Ne||l!==ge;return t("div",{"aria-hidden":a,inert:a||void 0,className:x("col-start-1 row-start-1 min-w-0",we?"overflow-y-auto overscroll-contain":"",a?"invisible":Le?.className??""),style:a?void 0:Le?.style,children:[t("div",{className:"mb-3 flex items-baseline gap-3",children:[u(n.icon)?e("span",{"aria-hidden":"true",className:x("flex h-[1lh] shrink-0 items-center text-(--n-accent)",w[Y],b),children:n.icon}):null,e(B,{level:$+1,className:x("m-0 min-w-0 flex-1 font-medium",w[Y]),children:n.title}),e("span",{className:x("shrink-0 text-(--neba-muted-fg) tabular-nums",h[Y]),children:m(me.position,{index:String(l+1),total:String(ve)})})]}),n.image?e("img",{src:n.image,alt:n.imageAlt??R(n.title),loading:"lazy",decoding:"async",className:x("mb-3 max-h-72 w-full object-contain",v[Y])}):null,u(n.content)?e("div",{className:x("min-w-0",g[Y]),children:n.content}):null]},l)}),U?t("div",{"aria-hidden":!Ne,inert:!Ne||void 0,className:x("col-start-1 row-start-1 flex min-w-0 flex-col items-center justify-center gap-2 py-4 text-center",Ne?Le?.className??"":"invisible"),style:Ne?Le?.style:void 0,children:[e("span",{"aria-hidden":"true",className:"text-(--n-accent) [&_svg]:size-9",children:e(c,{})}),e("p",{className:x("m-0 font-medium",g[Y]),children:V??me.completed})]}):null]});return t("div",{ref:_,"aria-labelledby":u(T)?de:void 0,className:x("flex min-w-0 flex-col",v[Y],r[ee][Y],N[Y],M[X],z,oe),style:{...j(Z,te),"--n-fill":`var(--neba-${Z}-fill)`,"--n-on-solid":`var(--neba-${Z}-on-solid)`,"--n-step-mark":L[Y].box,"--n-step-rail":C(K),...we?{maxHeight:C(J)}:null,...se},...ce,children:[u(T)?e(B,{level:$,id:de,className:x("m-0 shrink-0 font-medium",w[Y]),children:T}):null,t("div",{className:x("flex min-w-0 flex-1 flex-col",we?"min-h-0":"",ye?"gap-4 sm:flex-row sm:gap-5":"gap-4"),children:[e("div",{className:x("flex min-w-0 flex-col",we?"min-h-0":"",ye?"sm:w-(--n-step-rail) sm:shrink-0":"",P?ye?"border-b pb-4 sm:border-b-0 sm:border-e sm:pb-0 sm:pe-5":"border-b pb-4":"",P?"[border-color:var(--n-line)]":""),children:Me}),t("div",{className:x("flex min-w-0 flex-1 flex-col",we?"min-h-0":"",N[Y]),children:[Re,O?e("div",{className:"flex shrink-0 flex-wrap items-center justify-end gap-2",children:Ne?e(a,{size:Y,variant:"outline",color:Z,startIcon:e(s,{}),onClick:()=>Ce(0),children:ie??me.restart}):t(n,{children:[e(a,{size:Y,variant:"outline",color:Z,disabled:ze,startIcon:e("span",{className:"rotate-90 rtl:-rotate-90",children:e(o,{})}),onClick:()=>Ce(ge-1),children:le??me.previous}),e(a,Se&&U?{size:Y,variant:"solid",color:Z,startIcon:e(i,{}),onClick:()=>Ce(ge,!0),children:re??me.done}:{size:Y,variant:"solid",color:Z,disabled:Se,endIcon:e("span",{className:"-rotate-90 rtl:rotate-90",children:e(o,{})}),onClick:()=>Ce(ge+1),children:ae??me.next})]})}):null]})]})]})});
+"use client";import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import*as l from"react";import{Button as a}from"../button/Button.js";import{boxPaddingClasses as r}from"../box/Box.js";import{CheckIcon as i,ChevronIcon as o,RestartIcon as s,SuccessIcon as c}from"../../internal/icons.js";import{fill as m,stepsMessages as d,useMessages as p}from"../../internal/i18n.js";import{transitionProps as f}from"../../internal/animate.js";import{cx as x,hasContent as u,iconClasses as b,metaTextClasses as h,radiusClasses as v,sheetBodyClasses as g,sheetSectionGapClasses as N,sheetTitleClasses as w,surfaceClasses as y,surfaceSlots as k,toLength as j,transitionClasses as C}from"../../internal/styles.js";import{useStyleDefaults as z}from"../../internal/defaults.js";const S={xs:{box:"1.25rem",text:"text-[0.625rem]"},sm:{box:"1.5rem",text:"text-[0.6875rem]"},md:{box:"1.75rem",text:"text-[0.75rem]"},lg:{box:"2rem",text:"text-[0.8125rem]"},xl:{box:"2.25rem",text:"text-[0.875rem]"}},L={default:{xs:"gap-0.5",sm:"gap-1",md:"gap-1",lg:"gap-1.5",xl:"gap-2"},compact:{xs:"gap-0",sm:"gap-0",md:"gap-0.5",lg:"gap-0.5",xl:"gap-1"}},I={solid:[y,"text-(--neba-fg) bg-(--n-panel-hover)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[y,"border text-(--neba-fg) bg-(--n-panel)","[border-color:var(--n-line)]","[box-shadow:var(--n-elev),var(--neba-plate-glass)]"].join(" "),text:"text-(--neba-fg) bg-transparent"};function M(e){return"string"==typeof e?e:""}function R({level:e,...t}){return l.createElement(`h${Math.min(6,Math.max(1,e))}`,t)}export const HowToSteps=/*@__PURE__*/l.forwardRef(function(y,B){const{steps:_,title:H,headingLevel:T=3,step:$,defaultStep:E=0,onStepChange:A,completed:F,defaultCompleted:W=!1,onCompletedChange:q,orientation:D="vertical",maxHeight:G,railWidth:J="15rem",navigation:K=!0,divider:O=!0,transition:P="fade",completion:Q=!0,completedContent:U,variant:V="outline",size:X="md",color:Y="primary",density:Z="default",elevation:ee=0,locale:te,previousLabel:ne,nextLabel:le,doneLabel:ae,restartLabel:re,className:ie,style:oe,...se}=z(y,["size","density","variant","locale"]),ce=p(d,te),me=l.useId(),[de,pe]=l.useState(E),[fe,xe]=l.useState(W),ue=void 0!==$,be=void 0!==F,he=_.length,ve=Math.min(Math.max(ue?$:de,0),Math.max(he-1,0)),ge=Q&&(be?F:fe),Ne=void 0!==G,we="vertical"===D,ye=l.useRef(null),ke=l.useRef(null);if(l.useEffect(()=>{const e=ye.current,t=ke.current;if(!e||!t)return;const n=e.getBoundingClientRect(),l=t.getBoundingClientRect();we?l.top<n.top?e.scrollTop-=n.top-l.top:l.bottom>n.bottom&&(e.scrollTop+=l.bottom-n.bottom):l.left<n.left?e.scrollLeft-=n.left-l.left:l.right>n.right&&(e.scrollLeft+=l.right-n.right)},[ve,we]),0===he)return null;const je=(e,t=!1)=>{be||xe(t),ge!==t&&q?.(t),t||(ue||pe(e),e!==ve&&A?.(e))},Ce=0===ve,ze=ve===he-1,Se="none"===P?null:f(P),Le=t=>{const n=ge||t<ve,l=!ge&&t===ve;return e("span",{"aria-hidden":"true",className:x("z-1 flex shrink-0 items-center justify-center rounded-full border font-medium","size-(--n-step-mark) [&_svg]:size-[1.15em]",S[X].text,C,n?"bg-(--n-fill) text-(--n-on-solid) [border-color:transparent]":l?"bg-(--neba-surface) text-(--n-accent) [border-color:var(--n-accent)]":"bg-(--neba-surface) text-(--neba-muted-fg) [border-color:var(--n-line)]"),children:n?e(i,{}):t+1})},Ie=e("ol",{ref:ye,"aria-label":ce.steps,className:x("m-0 flex list-none p-0",we?"flex-col":"flex-row",L[Z][X],Ne&&we?"min-h-0 overflow-y-auto overscroll-contain":"",we?"":"overflow-x-auto overscroll-contain"),children:_.map((n,l)=>{const a=ge||l<ve,r=!ge&&l===ve,i=M(n.title);return t("li",{ref:r?ke:void 0,className:x("relative",we?"":"min-w-0 flex-1"),children:[l<he-1?e("span",{"aria-hidden":"true",className:x("absolute",C,a?"bg-(--n-fill)":"bg-(--n-line)",we?["w-px","[inset-inline-start:calc(0.25rem+var(--n-step-mark)/2)]","[top:calc(0.25rem+var(--n-step-mark))]","[height:calc(100%-var(--n-step-mark))]"].join(" "):["h-px","[inset-inline-start:calc(50%+var(--n-step-mark)/2)]","[top:calc(0.25rem+var(--n-step-mark)/2)]","[width:calc(100%-var(--n-step-mark))]"].join(" "))}):null,t("button",{type:"button",onClick:()=>je(l),"aria-current":r?"step":void 0,"aria-label":i?m(ce.step,{index:String(l+1),title:i}):void 0,className:x("flex w-full cursor-pointer items-center p-1 text-start",we?"gap-3":"flex-col gap-1.5 text-center",v.sm,"hover:bg-(--n-soft)",C,"focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-1"),children:[Le(l),e("span",{className:x("min-w-0",we?"truncate":"",h[X],r?"font-medium text-(--neba-fg)":"text-(--neba-muted-fg)"),children:n.title})]})]},l)})}),Me=t("div",{className:x("grid flex-1 grid-cols-1",Ne?"min-h-0":""),children:[_.map((n,l)=>{const a=ge||l!==ve;return t("div",{"aria-hidden":a,inert:a||void 0,className:x("col-start-1 row-start-1 min-w-0",Ne?"overflow-y-auto overscroll-contain":"",a?"invisible":Se?.className??""),style:a?void 0:Se?.style,children:[t("div",{className:"mb-3 flex items-baseline gap-3",children:[u(n.icon)?e("span",{"aria-hidden":"true",className:x("flex h-[1lh] shrink-0 items-center text-(--n-accent)",w[X],b),children:n.icon}):null,e(R,{level:T+1,className:x("m-0 min-w-0 flex-1 font-medium",w[X]),children:n.title}),e("span",{className:x("shrink-0 text-(--neba-muted-fg) tabular-nums",h[X]),children:m(ce.position,{index:String(l+1),total:String(he)})})]}),n.image?e("img",{src:n.image,alt:n.imageAlt??M(n.title),loading:"lazy",decoding:"async",className:x("mb-3 max-h-72 w-full object-contain",v[X])}):null,u(n.content)?e("div",{className:x("min-w-0",g[X]),children:n.content}):null]},l)}),Q?t("div",{"aria-hidden":!ge,inert:!ge||void 0,className:x("col-start-1 row-start-1 flex min-w-0 flex-col items-center justify-center gap-2 py-4 text-center",ge?Se?.className??"":"invisible"),style:ge?Se?.style:void 0,children:[e("span",{"aria-hidden":"true",className:"text-(--n-accent) [&_svg]:size-9",children:e(c,{})}),e("p",{className:x("m-0 font-medium",g[X]),children:U??ce.completed})]}):null]});return t("div",{ref:B,"aria-labelledby":u(H)?me:void 0,className:x("flex min-w-0 flex-col",v[X],r[Z][X],N[X],I[V],C,ie),style:{...k(Y,ee),"--n-fill":`var(--neba-${Y}-fill)`,"--n-on-solid":`var(--neba-${Y}-on-solid)`,"--n-step-mark":S[X].box,"--n-step-rail":j(J),...Ne?{maxHeight:j(G)}:null,...oe},...se,children:[u(H)?e(R,{level:T,id:me,className:x("m-0 shrink-0 font-medium",w[X]),children:H}):null,t("div",{className:x("flex min-w-0 flex-1 flex-col",Ne?"min-h-0":"",we?"gap-4 sm:flex-row sm:gap-5":"gap-4"),children:[e("div",{className:x("flex min-w-0 flex-col",Ne?"min-h-0":"",we?"sm:w-(--n-step-rail) sm:shrink-0":"",O?we?"border-b pb-4 sm:border-b-0 sm:border-e sm:pb-0 sm:pe-5":"border-b pb-4":"",O?"[border-color:var(--n-line)]":""),children:Ie}),t("div",{className:x("flex min-w-0 flex-1 flex-col",Ne?"min-h-0":"",N[X]),children:[Me,K?e("div",{className:"flex shrink-0 flex-wrap items-center justify-end gap-2",children:ge?e(a,{size:X,variant:"outline",color:Y,startIcon:e(s,{}),onClick:()=>je(0),children:re??ce.restart}):t(n,{children:[e(a,{size:X,variant:"outline",color:Y,disabled:Ce,startIcon:e("span",{className:"rotate-90 rtl:-rotate-90",children:e(o,{})}),onClick:()=>je(ve-1),children:ne??ce.previous}),e(a,ze&&Q?{size:X,variant:"solid",color:Y,startIcon:e(i,{}),onClick:()=>je(ve,!0),children:ae??ce.done}:{size:X,variant:"solid",color:Y,disabled:ze,endIcon:e("span",{className:"-rotate-90 rtl:rotate-90",children:e(o,{})}),onClick:()=>je(ve+1),children:le??ce.next})]})}):null]})]})]})});

package/dist/components/image/Image.d.ts

@@ -1,9 +1,94 @@
 import * as React from 'react';
 import type { NebaAspectFit } from '../aspect-ratio/AspectRatio.js';
-import type { NebaSize, NebaSlots } from '../../types.js';
+import type { NebaCorner, NebaElevation, NebaSize, NebaSlots } from '../../types.js';
 /** The parts an Image draws behind its root. */
-export type ImageSlot = 'image' | 'placeholder' | 'fallback';
-/** Where the picture is in its own life. */
+export type ImageSlot = 'image' | 'placeholder' | 'fallback' | 'frame' | 'watermark';
+/**
+ * How the picture is coloured.
+ *
+ * Seven names and an escape hatch: anything else a caller wants is a CSS
+ * `filter` chain, and passing one through is better than growing this list
+ * until it is a photo editor. `filter="hue-rotate(40deg) contrast(1.1)"` is a
+ * valid value.
+ */
+export type NebaImageFilter = 'none' | 'grayscale' | 'sepia' | 'invert' | 'saturate' | 'mute' | 'contrast';
+/** The silhouette a frame cuts the picture to. */
+export type NebaImageFrameShape = 'rect' | 'rounded' | 'circle' | 'cut' | 'arch';
+export interface NebaImageFrameOptions {
+    /** @default 'rounded' */
+    shape?: NebaImageFrameShape;
+    /**
+     * How big the corner treatment is — a step of the radius ladder, a number in
+     * pixels, or a CSS length. Defaults to whatever `rounded` says, and to `md`
+     * when `rounded` says nothing.
+     */
+    corner?: NebaSize | number | string;
+    /**
+     * A line around the picture. `true` is a hairline; a number is its width in
+     * pixels.
+     *
+     * Drawn as an inset shadow rather than as a `border`, which is not a detail a
+     * caller can ignore: it is what lets the line follow a cut corner or a
+     * circle, and what keeps it out of the layout so the picture is the size it
+     * was going to be either way.
+     */
+    border?: boolean | number | string;
+    /** What colour that line is. Defaults to the house hairline. */
+    borderColor?: string;
+    /**
+     * The mount: space between the line and the picture, in pixels or as a CSS
+     * length. This is the one part of a frame that does take room.
+     */
+    mat?: number | string;
+    /** What fills the mount. Defaults to the page's own surface. */
+    background?: string;
+    /** Drop shadow depth, on the house ladder. @default 0 */
+    elevation?: NebaElevation;
+    /**
+     * Fades the picture's edge out over this distance instead of cutting it. A
+     * number in pixels, or a CSS length — `'8%'` reads well on any size of
+     * picture.
+     */
+    feather?: number | string;
+}
+/**
+ * A frame is either the silhouette on its own — `frame="circle"` — or the whole
+ * arrangement written out. The same shape `transition` takes, for the same
+ * reason: one word covers most of it, and the rest is not worth a second prop.
+ */
+export type NebaImageFrame = NebaImageFrameShape | NebaImageFrameOptions;
+export interface NebaImageWatermarkOptions {
+    /** The mark: a line of text, or a node for a logo. */
+    content: React.ReactNode;
+    /** Where a single mark sits. @default 'bottom-end' */
+    position?: NebaCorner | 'center';
+    /**
+     * Tiles the mark across the whole picture instead of placing one, which is
+     * the arrangement that actually deters a screenshot. Text only — a node
+     * cannot be drawn into the tile, and is placed once instead.
+     * @default false
+     */
+    repeat?: boolean;
+    /** How strongly the mark shows, from 0 to 1. @default 0.35 */
+    opacity?: number;
+    /** Turns the mark, in degrees. @default 0, or -24 when tiled */
+    rotate?: number;
+    /** Type size — a step of the meta ladder, a number in pixels, or a length. */
+    size?: NebaSize | number | string;
+    /** Ink. Defaults to white, which is what reads over a photograph. */
+    color?: string;
+}
+/** A line of text, or the mark written out. */
+export type NebaImageWatermark = string | NebaImageWatermarkOptions;
+export interface NebaImageProtection {
+    /** Suppresses the right-click menu over the picture. @default true */
+    contextMenu?: boolean;
+    /** Stops the picture being dragged out into another window. @default true */
+    drag?: boolean;
+    /** Takes the picture out of a selection, and off an iOS long press. @default true */
+    select?: boolean;
+}
+/** Where a picture is in its own life. */
 type Phase = 'loading' | 'loaded' | 'failed';
 export interface ImageProps extends Omit<React.ComponentPropsWithoutRef<'img'>, 'width' | 'height' | 'children'> {
     /** Required, and required to be right. See the note on the component. */
@@ -47,6 +132,37 @@ export interface ImageProps extends Omit<React.ComponentPropsWithoutRef<'img'>,
      * @default false
      */
     preview?: boolean;
+    /**
+     * How the picture is coloured: a named filter, or a CSS `filter` chain of
+     * your own. It travels, so a `className` that changes it on hover is a
+     * treatment that fades in rather than snapping.
+     * @default 'none'
+     */
+    filter?: NebaImageFilter | (string & {});
+    /**
+     * How the picture is mounted: the silhouette it is cut to, and the line, the
+     * mount, the shadow and the softened edge around it.
+     */
+    frame?: NebaImageFrame;
+    /**
+     * A mark drawn over the picture — a credit line, a licence, the word DRAFT.
+     *
+     * A deterrent and not a lock. It is on top of the picture rather than in it,
+     * so anybody who opens the network tab has the file exactly as it was served;
+     * what a mark stops is the copy that gets made without thinking about it.
+     */
+    watermark?: NebaImageWatermark;
+    /**
+     * Turns off the ways a picture is casually taken: the right-click menu, the
+     * drag that drops a copy into another window, the iOS long press, and the
+     * selection a Ctrl-A sweeps up.
+     *
+     * The same deterrent, and the same caveat: the file is still one request
+     * away, and a reader who wants it will have it. Turning this on to protect a
+     * secret is turning it on for the wrong reason.
+     * @default false
+     */
+    protect?: boolean | NebaImageProtection;
     /** Class names for the parts behind the root. */
     classNames?: NebaSlots<ImageSlot>;
 }
@@ -65,6 +181,10 @@ export interface ImageProps extends Omit<React.ComponentPropsWithoutRef<'img'>,
  * mean different things — "nobody wrote this" and "this picture says nothing a
  * reader needs" — and only the second is ever correct. Being made to type
  * `alt=""` is being made to say which one you meant.
+ *
+ * Everything past that is opt-in and costs nothing until it is asked for:
+ * `filter` is one declaration, `frame` is one element, `watermark` is one, and
+ * `preview` is a chunk that is not fetched at all unless it is on.
  */
 export declare const Image: React.ForwardRefExoticComponent<ImageProps & React.RefAttributes<HTMLImageElement>>;
 export {};