neba 1.10.0 → 1.12.0

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

@@ -0,0 +1,190 @@
+import * as React from 'react';
+import type { NebaAspectFit } from '../aspect-ratio/AspectRatio.js';
+import type { NebaCorner, NebaElevation, NebaSize, NebaSlots } from '../../types.js';
+/** The parts an Image draws behind its root. */
+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. */
+    alt: string;
+    /**
+     * The proportion to hold while the file is still arriving.
+     *
+     * This is the whole reason to use this over an `<img>`: a picture with no
+     * reserved box is a picture that pushes the page down when it lands, which is
+     * the single largest source of layout shift on most sites. `'auto'` opts out
+     * and lets the file decide, which is right only when the space around it can
+     * absorb the jump.
+     * @default 'auto'
+     */
+    ratio?: number | string | 'auto';
+    /** How the picture fills that box. @default 'cover' */
+    fit?: NebaAspectFit;
+    /** Rounds the corners at this step of the radius ladder. `false` for square. */
+    rounded?: NebaSize | boolean;
+    /**
+     * What stands in while the file is arriving. A Skeleton of the right shape by
+     * default, `false` for nothing at all.
+     */
+    placeholder?: React.ReactNode | false;
+    /**
+     * What is drawn instead when the file does not arrive.
+     *
+     * Something rather than nothing by default: a broken image icon is the
+     * browser telling the reader that the *page* is broken, and a box that says
+     * what was meant to be there is a better answer than a blank space.
+     */
+    fallback?: React.ReactNode;
+    /** Called when the file fails. Useful for swapping a `src` you control. */
+    onLoadingStatusChange?: (status: Phase) => void;
+    /**
+     * Opens the full picture in a Dialog when it is clicked.
+     *
+     * The picture becomes a button when this is on, so it is reachable by
+     * keyboard — an image you can only enlarge with a pointer is an image half
+     * the readers cannot enlarge.
+     * @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>;
+}
+/**
+ * A picture that holds its space, says when it is loading and says when it
+ * failed.
+ *
+ * An `<img>` does none of those three, and each is a real defect rather than a
+ * nicety: an unsized picture shoves the page down when it lands, a slow one
+ * leaves a hole with no explanation, and a broken one draws the browser's own
+ * torn-page glyph, which tells a reader the site is broken rather than that one
+ * file is missing.
+ *
+ * `alt` is required by the type, which is deliberate and is the one place this
+ * component is stricter than the tag it wraps. A missing `alt` and an empty one
+ * 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 {};

package/dist/components/image/Image.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,jsxs as t,Fragment as a}from"react/jsx-runtime";import*as n from"react";import{AspectRatio as o}from"../aspect-ratio/AspectRatio.js";import{Skeleton as r}from"../skeleton/Skeleton.js";import{cx as l,metaTextValues as s,radiusClasses as i,toLength as c}from"../../internal/styles.js";const u={cover:"object-cover",contain:"object-contain",fill:"object-fill",none:"object-none"},d={none:"none",grayscale:"grayscale(1)",sepia:"sepia(0.72)",invert:"invert(1)",saturate:"saturate(1.5)",mute:"saturate(0.45)",contrast:"contrast(1.25)"},f={"top-start":"items-start justify-start","top-end":"items-start justify-end","bottom-start":"items-end justify-start","bottom-end":"items-end justify-end",center:"items-center justify-center"},m=n.lazy(()=>import("../dialog/Dialog.js").then(e=>({default:e.Dialog})));function p(e,t){switch(e){case"rect":return{borderRadius:"0px"};case"circle":return{borderRadius:"50%"};case"arch":return{borderRadius:`50% 50% ${t} ${t} / 55% 55% ${t} ${t}`};case"cut":return{clipPath:`polygon(${t} 0, calc(100% - ${t}) 0, 100% ${t}, 100% calc(100% - ${t}), calc(100% - ${t}) 100%, ${t} 100%, 0 calc(100% - ${t}), 0 ${t})`};default:return{borderRadius:t}}}function g(e){const t=t=>`linear-gradient(to ${t}, transparent, #000 ${e}, #000 calc(100% - ${e}), transparent)`,a=`${t("right")}, ${t("bottom")}`;return{maskImage:a,maskComposite:"intersect",WebkitMaskImage:a,WebkitMaskComposite:"source-in"}}export const Image=/*@__PURE__*/n.forwardRef(function({alt:b,ratio:h="auto",fit:v="cover",rounded:x=!1,placeholder:y,fallback:$,onLoadingStatusChange:k,preview:w=!1,filter:N="none",frame:j,watermark:S,protect:C=!1,className:z,classNames:M,style:R,src:D,...I},_){const[W,E]=n.useState("loading"),[L,A]=n.useState(!1),F=n.useRef(null),H=n.useRef(k);H.current=k;const O=n.useCallback(e=>{F.current=e,"function"==typeof _?_(e):_&&(_.current=e)},[_]);n.useEffect(()=>{const e=F.current,t=D&&e?.complete?e.naturalWidth>0?"loaded":"failed":null;E(t??"loading"),t&&H.current?.(t)},[D]);const P=e=>{E(e),k?.(e)},T=!1===x?"":i[!0===x?"md":x],U=N in d?d[N]:N,q=!0===C?{}:!1===C?null:C,B=null!==q&&!1!==q.contextMenu,G=null!==q&&!1!==q.drag,J=null!==q&&!1!==q.select,K=e=>e.preventDefault(),Q=q?{onContextMenu:B?K:void 0,onDragStart:G?K:void 0,draggable:!G&&void 0,className:J?"select-none":"",style:J?{WebkitTouchCallout:"none"}:void 0}:null,V=e("img",{ref:O,src:D,alt:b,className:l("block size-full",u[v],T,"[transition:opacity_var(--neba-duration-fill)_var(--neba-ease),filter_var(--neba-duration-fill)_var(--neba-ease)]","loaded"===W?"opacity-100":"opacity-0",Q?.className,M?.image),style:{filter:"none"===U?void 0:U,...Q?.style},onLoad:()=>P("loaded"),onError:()=>P("failed"),onContextMenu:Q?.onContextMenu,onDragStart:Q?.onDragStart,draggable:Q?.draggable,...I}),X="failed"===W?e("span",{className:l("absolute inset-0 flex items-center justify-center","bg-(--neba-disabled-bg) text-(--neba-muted-fg)",T,M?.fallback),children:$??e("span",{className:"px-2 text-center text-sm",children:b||"Image unavailable"})}):"loading"===W&&!1!==y?e("span",{className:l("absolute inset-0",M?.placeholder),children:y??e(r,{shape:"rect",className:l("size-full",T)})}):null,Y=void 0===S?null:function(t,a){const n="string"==typeof t?{content:t}:t,{content:o,position:r="bottom-end",repeat:i=!1,opacity:u=.35,size:d="xs",color:m="#ffffff"}=n,p="string"==typeof d&&d in s?s[d]:c(d)??s.xs,g=n.rotate??(i&&"string"==typeof o?-24:0);if(i&&"string"==typeof o){const t=function(e,t){let a=0;for(const t of e)a+=/[ᄀ-ᇿ⺀-꓏가-퟿豈-﫿︰-﹏]/.test(t)?1:.6;const n=Math.max(16,Math.round(16*(a+2.4))),o=e.replace(/[&<>]/g,e=>"&"===e?"&amp;":"<"===e?"&lt;":"&gt;");return{uri:`data:image/svg+xml,${encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" width="${n}" height="52"><text x="0" y="32" font-family="system-ui, sans-serif" font-size="16" fill="${t}" stroke="rgba(0,0,0,0.28)" stroke-width="0.6" paint-order="stroke">${o}</text></svg>`)}`,width:n,height:52}}(o,m);return e("span",{"aria-hidden":"true",className:l("pointer-events-none absolute select-none",a),style:{inset:"-40%",opacity:u,transform:`rotate(${g}deg)`,backgroundImage:`url("${t.uri}")`,backgroundSize:`calc(${p} * ${t.width/16}) calc(${p} * ${t.height/16})`}})}return e("span",{"aria-hidden":"true",className:l("pointer-events-none absolute inset-0 flex select-none p-2",f[r],a),children:e("span",{style:{color:m,opacity:u,fontSize:p,lineHeight:1.2,textShadow:"0 1px 2px rgba(0, 0, 0, 0.45)",transform:g?`rotate(${g}deg)`:void 0},children:o})})}(S,M?.watermark),Z=t("span",{className:"relative block size-full",children:[V,X,Y]}),ee=void 0===j?null:function(e,t){const a=!0===t?"md":t;return{shape:"rounded",corner:!1===a?"md":a,..."string"==typeof e?{shape:e}:e}}(j,x),te=null===ee?"0px":function(e){return"string"==typeof e&&e in i?`var(--neba-radius-${e})`:c(e)??"0px"}(ee.corner??"md"),ae=null===ee?void 0:c(ee.mat),ne=null===ee?void 0:c(ee.feather),oe={...null===ee?null:p(ee.shape,te),...void 0===ne?null:g(ne),...null===ee?R:null},re="auto"===h?e("span",{className:l("relative block overflow-hidden",null===ee?T:"",null===ee?z:""),style:oe,children:Z}):e(o,{ratio:h,className:l("overflow-hidden",null===ee?T:"",null===ee?z:""),style:oe,children:Z}),le=null===ee?void 0:function(e){if(void 0===e.border||!1===e.border)return;const t=!0===e.border?"1px":c(e.border);return`inset 0 0 0 ${t} ${e.borderColor??"var(--neba-line)"}`}(ee),se=void 0===ae?te:`calc(${te} + ${ae})`,ie=null===ee?re:t("span",{className:l("relative block",M?.frame,z),style:{...p(ee.shape,se),padding:ae,background:ee.background??(void 0===ae?void 0:"var(--neba-surface)"),boxShadow:ee.elevation?`var(--neba-shadow-${ee.elevation})`:void 0,...R},children:[re,void 0===le?null:e("span",{"aria-hidden":"true",className:"pointer-events-none absolute inset-0",style:{...p(ee.shape,se),boxShadow:le}})]});return w?t(a,{children:[e("button",{type:"button","aria-label":b,className:l("block w-full cursor-zoom-in [outline:none]","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:[outline-offset:2px]",T),onClick:()=>A(!0),children:ie}),e(n.Suspense,{fallback:null,children:e(m,{open:L,onOpenChange:A,size:"xl",title:b,children:t("span",{className:"relative mx-auto block w-fit",children:[e("img",{src:D,alt:b,className:l("mx-auto block max-h-[70vh] w-auto max-w-full",Q?.className),style:{filter:"none"===U?void 0:U,...Q?.style},onContextMenu:Q?.onContextMenu,onDragStart:Q?.onDragStart,draggable:Q?.draggable}),Y]})})})]}):ie});

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

@@ -0,0 +1,2 @@
+export { Image } from './Image.js';
+export type { ImageProps, ImageSlot, NebaImageFilter, NebaImageFrame, NebaImageFrameOptions, NebaImageFrameShape, NebaImageProtection, NebaImageWatermark, NebaImageWatermarkOptions } from './Image.js';

package/dist/components/image/index.js

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

package/dist/components/list/List.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as r,Fragment as s}from"react/jsx-runtime";import*as n from"react";import{useRender as t}from"@base-ui/react/use-render";import{boxPaddingXClasses as l}from"../box/Box.js";import{cx as a,focusRingClasses as i,gapClasses as o,hasContent as d,iconClasses as c,metaTextClasses as m,radiusClasses as f,sheetBodyClasses as x,surfaceClasses as p,surfaceSlots as u,transitionClasses as h}from"../../internal/styles.js";const b=/*@__PURE__*/n.createContext({size:"md",density:"default",dividers:!1}),v={solid:[p,"text-(--neba-fg) bg-(--n-panel-hover)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[p,"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"},g={default:{xs:"py-1",sm:"py-1.5",md:"py-2",lg:"py-2.5",xl:"py-3"},compact:{xs:"py-0.5",sm:"py-0.5",md:"py-1",lg:"py-1.5",xl:"py-2"}},y={xs:f.xs,sm:f.xs,md:f.sm,lg:f.sm,xl:f.md};export const List=/*@__PURE__*/n.forwardRef(function({variant:r="outline",size:s="md",color:l="primary",density:i="default",elevation:o=0,dividers:d=!1,render:c,className:m,style:x,children:p,...g},y){const N=n.useMemo(()=>({size:s,density:i,dividers:d}),[s,i,d]),w=a("flex flex-col",f[s],v[r],h,d?"overflow-hidden [&>li+li]:border-t [&>li+li]:[border-color:var(--n-line)]":"p-1",m??""),j=t({render:c,ref:y,props:{role:"list",className:w,style:{...u(l,o),...x},children:p,...g}});return e(b.Provider,{value:N,children:j})});export const ListItem=/*@__PURE__*/n.forwardRef(function({startIcon:t,endIcon:f,description:p,action:u,href:v,selected:N=!1,disabled:w=!1,className:j,children:k,onClick:C,...z},I){const{size:$,density:B,dividers:L}=n.useContext(b),R=Boolean(C||v)&&!w,F=l[B][$],M=g[B][$],P=a("flex min-w-0 flex-1 items-center text-start",F,M,o[$],x[$],h,c,L?"":y[$],w?"cursor-not-allowed text-(--neba-disabled-fg)":N?"bg-(--n-soft-press) font-medium text-(--n-accent)":"",R?`cursor-pointer ${i}`:"",R&&!N?"hover:bg-(--n-soft)":"",R&&N?"hover:bg-(--n-soft-press)":""),q=r(s,{children:[d(t)?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:t}):null,r("span",{className:"flex min-w-0 flex-1 flex-col",children:[d(k)?e("span",{className:"truncate",children:k}):null,d(p)?e("span",{className:`truncate text-(--neba-muted-fg) ${m[$]}`,children:p}):null]}),d(f)?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:f}):null]});return r("li",{ref:I,className:a("flex w-full items-center",j??""),...z,children:[R&&v?e("a",{href:v,className:P,"aria-current":N?"page":void 0,onClick:C,children:q}):R?e("button",{type:"button",className:P,"aria-current":!!N||void 0,onClick:C,children:q}):e("div",{className:P,"aria-disabled":w||void 0,children:q}),d(u)?e("div",{className:`flex shrink-0 items-center ${F}`,children:u}):null]})});
+"use client";import{jsx as e,jsxs as r,Fragment as s}from"react/jsx-runtime";import*as n from"react";import{useRender as t}from"@base-ui/react/use-render";import{boxPaddingXClasses as l}from"../box/Box.js";import{cx as a,focusRingClasses as i,gapClasses as o,hasContent as d,iconClasses as c,metaTextClasses as m,radiusClasses as f,sheetBodyClasses as x,surfaceClasses as p,surfaceSlots as u,transitionClasses as h}from"../../internal/styles.js";import{useStyleDefaults as b}from"../../internal/defaults.js";const v=/*@__PURE__*/n.createContext({size:"md",density:"default",dividers:!1}),y={solid:[p,"text-(--neba-fg) bg-(--n-panel-hover)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[p,"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"},g={default:{xs:"py-1",sm:"py-1.5",md:"py-2",lg:"py-2.5",xl:"py-3"},compact:{xs:"py-0.5",sm:"py-0.5",md:"py-1",lg:"py-1.5",xl:"py-2"}},N={xs:f.xs,sm:f.xs,md:f.sm,lg:f.sm,xl:f.md};export const List=/*@__PURE__*/n.forwardRef(function(r,s){const{variant:l="outline",size:i="md",color:o="primary",density:d="default",elevation:c=0,dividers:m=!1,render:x,className:p,style:g,children:N,...w}=b(r,["size","density","variant"]),j=n.useMemo(()=>({size:i,density:d,dividers:m}),[i,d,m]),k=a("flex flex-col",f[i],y[l],h,m?"overflow-hidden [&>li+li]:border-t [&>li+li]:[border-color:var(--n-line)]":"p-1",p??""),z=t({render:x,ref:s,props:{role:"list",className:k,style:{...u(o,c),...g},children:N,...w}});return e(v.Provider,{value:j,children:z})});export const ListItem=/*@__PURE__*/n.forwardRef(function({startIcon:t,endIcon:f,description:p,action:u,href:b,selected:y=!1,disabled:w=!1,className:j,children:k,onClick:z,...C},I){const{size:$,density:B,dividers:L}=n.useContext(v),R=Boolean(z||b)&&!w,F=l[B][$],M=g[B][$],P=a("flex min-w-0 flex-1 items-center text-start",F,M,o[$],x[$],h,c,L?"":N[$],w?"cursor-not-allowed text-(--neba-disabled-fg)":y?"bg-(--n-soft-press) font-medium text-(--n-accent)":"",R?`cursor-pointer ${i}`:"",R&&!y?"hover:bg-(--n-soft)":"",R&&y?"hover:bg-(--n-soft-press)":""),q=r(s,{children:[d(t)?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:t}):null,r("span",{className:"flex min-w-0 flex-1 flex-col",children:[d(k)?e("span",{className:"truncate",children:k}):null,d(p)?e("span",{className:`truncate text-(--neba-muted-fg) ${m[$]}`,children:p}):null]}),d(f)?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:f}):null]});return r("li",{ref:I,className:a("flex w-full items-center",j??""),...C,children:[R&&b?e("a",{href:b,className:P,"aria-current":y?"page":void 0,onClick:z,children:q}):R?e("button",{type:"button",className:P,"aria-current":!!y||void 0,onClick:z,children:q}):e("div",{className:P,"aria-disabled":w||void 0,children:q}),d(u)?e("div",{className:`flex shrink-0 items-center ${F}`,children:u}):null]})});

package/dist/components/menu/Menu.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as n,Fragment as t}from"react/jsx-runtime";import*as a from"react";import{Menu as l}from"@base-ui/react/menu";import{ContextMenu as s}from"@base-ui/react/context-menu";import{MenuContext as i}from"../../internal/menu.js";import{CheckIcon as o,ChevronIcon as r,DotIcon as c}from"../../internal/icons.js";import{safeRel as d}from"../../internal/link.js";import{controlTextLeadingClasses as u,cx as m,gapClasses as p,hasContent as h,iconClasses as x,metaTextClasses as f,radiusClasses as b,surfaceClasses as g,surfaceSlots as y,transitionClasses as N}from"../../internal/styles.js";const C=[g,"max-h-[min(24rem,var(--available-height))] min-w-40 overflow-y-auto overscroll-contain","border bg-(--n-panel-press) p-1","[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={default:{xs:"px-1.5 py-0.5",sm:"px-2 py-1",md:"px-2.5 py-1.5",lg:"px-3 py-2",xl:"px-3.5 py-2.5"},compact:{xs:"px-1 py-0.5",sm:"px-1.5 py-0.5",md:"px-2 py-1",lg:"px-2.5 py-1",xl:"px-3 py-1.5"}},k={xs:b.xs,sm:b.xs,md:b.sm,lg:b.sm,xl:b.md};function O(e,n,t,a){return m("relative flex w-full cursor-pointer items-center select-none",t?"text-(--n-accent)":"text-(--neba-fg)",v[n][e],k[e],p[e],u[e],N,x,"data-[highlighted]:bg-(--n-soft-hover)","data-[popup-open]:bg-(--n-soft)","data-[disabled]:cursor-not-allowed data-[disabled]:text-(--neba-disabled-fg)","[outline:none]",a??"")}const z="flex h-[1lh] w-[1.2em] shrink-0 items-center justify-center";function I({children:t,description:a,size:l}){return h(a)?n("span",{className:"flex min-w-0 flex-1 flex-col text-start",children:[e("span",{className:"truncate",children:t}),e("span",{className:`truncate text-(--neba-muted-fg) ${f[l]}`,children:a})]}):e("span",{className:"min-w-0 flex-1 truncate text-start",children:t})}export function MenuItem({onClick:s,href:o,target:r,rel:c,startIcon:u,endIcon:m,shortcut:p,description:x,color:b,closeOnClick:g=!0,disabled:N=!1,label:C,children:v,className:k,style:M}){const j=a.useContext(i),{size:$,density:w}=j,P=n(t,{children:[h(u)?e("span",{className:`${z} text-(--neba-muted-fg)`,children:u}):null,e(I,{description:x,size:$,children:v}),h(m)?e("span",{className:`${z} text-(--neba-muted-fg)`,children:m}):null,h(p)?e("span",{className:`ms-2 shrink-0 text-(--neba-muted-fg) tabular-nums ${f[$]}`,children:p}):null]}),R=b?y(b,0):void 0,F=R||M?{...R,...M}:void 0;return void 0!==o?e(l.LinkItem,{href:o,target:r,rel:d(r,c),label:C,closeOnClick:g,onClick:s,className:O($,w,Boolean(b),k),style:F,children:P}):e(l.Item,{disabled:N,label:C,closeOnClick:g,onClick:s,className:O($,w,Boolean(b),k),style:F,children:P})}export function MenuCheckboxItem({checked:t,defaultChecked:s,onCheckedChange:r,endIcon:c,shortcut:d,description:u,color:m,closeOnClick:p=!1,disabled:x=!1,label:b,children:g,className:N,style:C}){const{size:v,density:k}=a.useContext(i),M=m?y(m,0):void 0;return n(l.CheckboxItem,{checked:t,defaultChecked:s,onCheckedChange:e=>r?.(e),disabled:x,label:b,closeOnClick:p,className:O(v,k,Boolean(m),N),style:M||C?{...M,...C}:void 0,children:[e("span",{className:`${z} text-(--n-accent)`,children:e(l.CheckboxItemIndicator,{className:"flex items-center justify-center",children:e(o,{})})}),e(I,{description:u,size:v,children:g}),h(c)?e("span",{className:`${z} text-(--neba-muted-fg)`,children:c}):null,h(d)?e("span",{className:`ms-2 shrink-0 text-(--neba-muted-fg) tabular-nums ${f[v]}`,children:d}):null]})}export function MenuRadioGroup({value:n,defaultValue:t,onValueChange:a,disabled:s=!1,children:i,className:o}){return e(l.RadioGroup,{value:n,defaultValue:t,onValueChange:e=>a?.(e),disabled:s,className:o,children:i})}export function MenuRadioItem({value:t,endIcon:s,shortcut:o,description:r,color:d,closeOnClick:u=!1,disabled:m=!1,label:p,children:x,className:b,style:g}){const{size:N,density:C}=a.useContext(i),v=d?y(d,0):void 0;return n(l.RadioItem,{value:t,disabled:m,label:p,closeOnClick:u,className:O(N,C,Boolean(d),b),style:v||g?{...v,...g}:void 0,children:[e("span",{className:`${z} text-(--n-accent)`,children:e(l.RadioItemIndicator,{className:"flex items-center justify-center",children:e(c,{})})}),e(I,{description:r,size:N,children:x}),h(s)?e("span",{className:`${z} text-(--neba-muted-fg)`,children:s}):null,h(o)?e("span",{className:`ms-2 shrink-0 text-(--neba-muted-fg) tabular-nums ${f[N]}`,children:o}):null]})}export function MenuGroup({label:t,children:s,className:o}){const{size:r,density:c}=a.useContext(i);return n(l.Group,{className:o,children:[h(t)?e(l.GroupLabel,{className:[v[c][r],f[r],"font-semibold tracking-wide text-(--neba-muted-fg) uppercase"].join(" "),children:t}):null,s]})}export function MenuSeparator({className:n,...t}){return e(l.Separator,{className:m("-mx-1 my-1 h-px bg-(--n-line)",n??""),...t})}export function MenuSubmenu({label:t,startIcon:s,disabled:o=!1,side:c="right",sideOffset:d=4,children:p,className:x,style:f}){const g=a.useContext(i),{size:N,density:v,color:k}=g;return n(l.SubmenuRoot,{children:[n(l.SubmenuTrigger,{disabled:o,className:O(N,v,!1),children:[h(s)?e("span",{className:`${z} text-(--neba-muted-fg)`,children:s}):null,e("span",{className:"min-w-0 flex-1 truncate text-start",children:t}),e("span",{className:`${z} text-(--neba-muted-fg) -rotate-90`,children:e(r,{})})]}),e(l.Portal,{children:e(l.Positioner,{className:"neba-portal z-50 [outline:none]",side:c,sideOffset:d,align:"start",children:e(l.Popup,{className:m(C,b[N],u[N],x??""),style:{...y(k,3),...f},children:p})})})]})}export function Menu({size:t="md",color:s="primary",density:o="default",trigger:r,open:c,defaultOpen:d,onOpenChange:p,side:h="bottom",align:x="start",sideOffset:f=6,modal:g,openOnHover:N=!1,loopFocus:v=!0,disabled:k=!1,className:O,style:z,children:I}){const M=a.useMemo(()=>({size:t,color:s,density:o}),[t,s,o]);return e(i.Provider,{value:M,children:n(l.Root,{open:c,defaultOpen:d,onOpenChange:e=>p?.(e),modal:g,loopFocus:v,disabled:k,children:[r?e(l.Trigger,{render:r,openOnHover:N,disabled:k}):null,e(l.Portal,{children:e(l.Positioner,{className:"neba-portal z-50 [outline:none]",side:h,align:x,sideOffset:f,children:e(l.Popup,{className:m(C,b[t],u[t],O??""),style:{...y(s,3),...z},children:I})})})]})})}export function ContextMenu({size:t="md",color:l="primary",density:o="default",content:r,children:c,open:d,defaultOpen:p,onOpenChange:h,loopFocus:x=!0,disabled:f=!1,className:g,style:N}){const v=a.useMemo(()=>({size:t,color:l,density:o}),[t,l,o]);return e(i.Provider,{value:v,children:n(s.Root,{open:d,defaultOpen:p,onOpenChange:e=>h?.(e),loopFocus:x,disabled:f,children:[e(s.Trigger,{children:c}),e(s.Portal,{children:e(s.Positioner,{className:"neba-portal z-50 [outline:none]",children:e(s.Popup,{className:m(C,b[t],u[t],g??""),style:{...y(l,3),...N},children:r})})})]})})}
+"use client";import{jsx as e,jsxs as n,Fragment as l}from"react/jsx-runtime";import*as t from"react";import{Menu as s}from"@base-ui/react/menu";import{ContextMenu as a}from"@base-ui/react/context-menu";import{MenuContext as o}from"../../internal/menu.js";import{CheckIcon as r,ChevronIcon as i,DotIcon as c}from"../../internal/icons.js";import{safeRel as d}from"../../internal/link.js";import{controlTextLeadingClasses as u,cx as m,gapClasses as p,hasContent as h,iconClasses as x,metaTextClasses as f,popupFadeClasses as b,radiusClasses as g,surfaceClasses as N,surfaceSlots as y,transitionClasses as C}from"../../internal/styles.js";const k=[N,"max-h-[min(24rem,var(--available-height))] min-w-40 overflow-y-auto overscroll-contain","border bg-(--n-panel-press) p-1","[border-color:var(--n-line)]","[box-shadow:var(--neba-shadow-3),var(--neba-plate-glass)]","[outline:none]",b].join(" "),v={default:{xs:"px-1.5 py-0.5",sm:"px-2 py-1",md:"px-2.5 py-1.5",lg:"px-3 py-2",xl:"px-3.5 py-2.5"},compact:{xs:"px-1 py-0.5",sm:"px-1.5 py-0.5",md:"px-2 py-1",lg:"px-2.5 py-1",xl:"px-3 py-1.5"}},O={xs:g.xs,sm:g.xs,md:g.sm,lg:g.sm,xl:g.md};function z(e,n,l,t){return m("relative flex w-full cursor-pointer items-center select-none",l?"text-(--n-accent)":"text-(--neba-fg)",v[n][e],O[e],p[e],u[e],C,x,"data-[highlighted]:bg-(--n-soft-hover)","data-[popup-open]:bg-(--n-soft)","data-[disabled]:cursor-not-allowed data-[disabled]:text-(--neba-disabled-fg)","[outline:none]",t??"")}const I="flex h-[1lh] w-[1.2em] shrink-0 items-center justify-center";function M({children:l,description:t,size:s}){return h(t)?n("span",{className:"flex min-w-0 flex-1 flex-col text-start",children:[e("span",{className:"truncate",children:l}),e("span",{className:`truncate text-(--neba-muted-fg) ${f[s]}`,children:t})]}):e("span",{className:"min-w-0 flex-1 truncate text-start",children:l})}export function MenuItem({onClick:a,href:r,target:i,rel:c,startIcon:u,endIcon:m,shortcut:p,description:x,color:b,closeOnClick:g=!0,disabled:N=!1,label:C,children:k,className:v,style:O}){const j=t.useContext(o),{size:$,density:w}=j,P=n(l,{children:[h(u)?e("span",{className:`${I} text-(--neba-muted-fg)`,children:u}):null,e(M,{description:x,size:$,children:k}),h(m)?e("span",{className:`${I} text-(--neba-muted-fg)`,children:m}):null,h(p)?e("span",{className:`ms-2 shrink-0 text-(--neba-muted-fg) tabular-nums ${f[$]}`,children:p}):null]}),R=b?y(b,0):void 0,F=R||O?{...R,...O}:void 0;return void 0!==r?e(s.LinkItem,{href:r,target:i,rel:d(i,c),label:C,closeOnClick:g,onClick:a,className:z($,w,Boolean(b),v),style:F,children:P}):e(s.Item,{disabled:N,label:C,closeOnClick:g,onClick:a,className:z($,w,Boolean(b),v),style:F,children:P})}export function MenuCheckboxItem({checked:l,defaultChecked:a,onCheckedChange:i,endIcon:c,shortcut:d,description:u,color:m,closeOnClick:p=!1,disabled:x=!1,label:b,children:g,className:N,style:C}){const{size:k,density:v}=t.useContext(o),O=m?y(m,0):void 0;return n(s.CheckboxItem,{checked:l,defaultChecked:a,onCheckedChange:e=>i?.(e),disabled:x,label:b,closeOnClick:p,className:z(k,v,Boolean(m),N),style:O||C?{...O,...C}:void 0,children:[e("span",{className:`${I} text-(--n-accent)`,children:e(s.CheckboxItemIndicator,{className:"flex items-center justify-center",children:e(r,{})})}),e(M,{description:u,size:k,children:g}),h(c)?e("span",{className:`${I} text-(--neba-muted-fg)`,children:c}):null,h(d)?e("span",{className:`ms-2 shrink-0 text-(--neba-muted-fg) tabular-nums ${f[k]}`,children:d}):null]})}export function MenuRadioGroup({value:n,defaultValue:l,onValueChange:t,disabled:a=!1,children:o,className:r}){return e(s.RadioGroup,{value:n,defaultValue:l,onValueChange:e=>t?.(e),disabled:a,className:r,children:o})}export function MenuRadioItem({value:l,endIcon:a,shortcut:r,description:i,color:d,closeOnClick:u=!1,disabled:m=!1,label:p,children:x,className:b,style:g}){const{size:N,density:C}=t.useContext(o),k=d?y(d,0):void 0;return n(s.RadioItem,{value:l,disabled:m,label:p,closeOnClick:u,className:z(N,C,Boolean(d),b),style:k||g?{...k,...g}:void 0,children:[e("span",{className:`${I} text-(--n-accent)`,children:e(s.RadioItemIndicator,{className:"flex items-center justify-center",children:e(c,{})})}),e(M,{description:i,size:N,children:x}),h(a)?e("span",{className:`${I} text-(--neba-muted-fg)`,children:a}):null,h(r)?e("span",{className:`ms-2 shrink-0 text-(--neba-muted-fg) tabular-nums ${f[N]}`,children:r}):null]})}export function MenuGroup({label:l,children:a,className:r}){const{size:i,density:c}=t.useContext(o);return n(s.Group,{className:r,children:[h(l)?e(s.GroupLabel,{className:[v[c][i],f[i],"font-semibold tracking-wide text-(--neba-muted-fg) uppercase"].join(" "),children:l}):null,a]})}export function MenuSeparator({className:n,...l}){return e(s.Separator,{className:m("-mx-1 my-1 h-px bg-(--n-line)",n??""),...l})}export function MenuSubmenu({label:l,startIcon:a,disabled:r=!1,side:c="right",sideOffset:d=4,children:p,className:x,style:f}){const b=t.useContext(o),{size:N,density:C,color:v}=b;return n(s.SubmenuRoot,{children:[n(s.SubmenuTrigger,{disabled:r,className:z(N,C,!1),children:[h(a)?e("span",{className:`${I} text-(--neba-muted-fg)`,children:a}):null,e("span",{className:"min-w-0 flex-1 truncate text-start",children:l}),e("span",{className:`${I} text-(--neba-muted-fg) -rotate-90`,children:e(i,{})})]}),e(s.Portal,{children:e(s.Positioner,{className:"neba-portal z-50 [outline:none]",side:c,sideOffset:d,align:"start",children:e(s.Popup,{className:m(k,g[N],u[N],x??""),style:{...y(v,3),...f},children:p})})})]})}export function Menu({size:l="md",color:a="primary",density:r="default",trigger:i,open:c,defaultOpen:d,onOpenChange:p,side:h="bottom",align:x="start",sideOffset:f=6,modal:b,openOnHover:N=!1,loopFocus:C=!0,disabled:v=!1,className:O,style:z,children:I}){const M=t.useMemo(()=>({size:l,color:a,density:r}),[l,a,r]);return e(o.Provider,{value:M,children:n(s.Root,{open:c,defaultOpen:d,onOpenChange:e=>p?.(e),modal:b,loopFocus:C,disabled:v,children:[i?e(s.Trigger,{render:i,openOnHover:N,disabled:v}):null,e(s.Portal,{children:e(s.Positioner,{className:"neba-portal z-50 [outline:none]",side:h,align:x,sideOffset:f,children:e(s.Popup,{className:m(k,g[l],u[l],O??""),style:{...y(a,3),...z},children:I})})})]})})}export function ContextMenu({size:l="md",color:s="primary",density:r="default",content:i,children:c,open:d,defaultOpen:p,onOpenChange:h,loopFocus:x=!0,disabled:f=!1,className:b,style:N}){const C=t.useMemo(()=>({size:l,color:s,density:r}),[l,s,r]);return e(o.Provider,{value:C,children:n(a.Root,{open:d,defaultOpen:p,onOpenChange:e=>h?.(e),loopFocus:x,disabled:f,children:[e(a.Trigger,{children:c}),e(a.Portal,{children:e(a.Positioner,{className:"neba-portal z-50 [outline:none]",children:e(a.Popup,{className:m(k,g[l],u[l],b??""),style:{...y(s,3),...N},children:i})})})]})})}

package/dist/components/menubar/Menubar.js

@@ -1 +1 @@
-"use client";import{jsxs as e,jsx as n}from"react/jsx-runtime";import*as t from"react";import{Menubar as o}from"@base-ui/react/menubar";import{Menu as r}from"../menu/Menu.js";import{MenuContext as s}from"../../internal/menu.js";import{controlTextClasses as a,cx as i,gapClasses as l,hasContent as c,iconClasses as d,paddingXClasses as u,radiusClasses as f,transitionClasses as m}from"../../internal/styles.js";const p={xs:"h-4.5",sm:"h-5.5",md:"h-6.5",lg:"h-8",xl:"h-10"},b=["inline-flex shrink-0 cursor-pointer select-none items-center justify-center","whitespace-nowrap font-medium leading-none","text-(--neba-fg) bg-transparent","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",m,d,"hover:bg-(--n-soft)","data-[popup-open]:bg-(--n-soft-hover) data-[popup-open]:text-(--n-accent)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:[outline-offset:-2px]","disabled:cursor-not-allowed disabled:text-(--neba-disabled-fg) disabled:hover:bg-transparent"].join(" ");export function MenubarMenu({label:o,startIcon:i,disabled:d=!1,children:m}){const{size:h,color:x,density:v}=t.useContext(s);return n(r,{size:h,color:x,density:v,disabled:d,openOnHover:!0,sideOffset:4,trigger:e("button",{type:"button",disabled:d,className:[b,p[h],a[h],l[h],u["default"===v?"compact":v][h],f[h]].join(" "),children:[c(i)?i:null,o]}),children:m})}export const Menubar=/*@__PURE__*/t.forwardRef(function({size:e="md",color:r="primary",density:a="default",orientation:c="horizontal",modal:d=!0,loopFocus:u=!0,disabled:f=!1,className:m,style:p,children:b,...h},x){const v=t.useMemo(()=>({size:e,color:r,density:a}),[e,r,a]);return n(s.Provider,{value:v,children:n(o,{ref:x,orientation:c,modal:d,loopFocus:u,disabled:f,className:i("flex items-center","vertical"===c?"flex-col items-stretch":"flex-row",l[e],m??""),style:{"--n-soft":`var(--neba-${r}-soft)`,"--n-soft-hover":`var(--neba-${r}-soft-hover)`,"--n-accent":`var(--neba-${r}-accent)`,"--n-ring":`var(--neba-${r}-ring)`,...p},...h,children:b})})});
+"use client";import{jsxs as e,jsx as t}from"react/jsx-runtime";import*as n from"react";import{Menubar as o}from"@base-ui/react/menubar";import{Menu as r}from"../menu/Menu.js";import{MenuContext as s}from"../../internal/menu.js";import{controlTextClasses as i,cx as a,gapClasses as l,hasContent as c,iconClasses as d,paddingXClasses as u,radiusClasses as f,transitionClasses as m}from"../../internal/styles.js";import{useStyleDefaults as p}from"../../internal/defaults.js";const b={xs:"h-4.5",sm:"h-5.5",md:"h-6.5",lg:"h-8",xl:"h-10"},h=["inline-flex shrink-0 cursor-pointer select-none items-center justify-center","whitespace-nowrap font-medium leading-none","text-(--neba-fg) bg-transparent","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",m,d,"hover:bg-(--n-soft)","data-[popup-open]:bg-(--n-soft-hover) data-[popup-open]:text-(--n-accent)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:[outline-offset:-2px]","disabled:cursor-not-allowed disabled:text-(--neba-disabled-fg) disabled:hover:bg-transparent"].join(" ");export function MenubarMenu({label:o,startIcon:a,disabled:d=!1,children:m}){const{size:p,color:x,density:v}=n.useContext(s);return t(r,{size:p,color:x,density:v,disabled:d,openOnHover:!0,sideOffset:4,trigger:e("button",{type:"button",disabled:d,className:[h,b[p],i[p],l[p],u["default"===v?"compact":v][p],f[p]].join(" "),children:[c(a)?a:null,o]}),children:m})}export const Menubar=/*@__PURE__*/n.forwardRef(function(e,r){const{size:i="md",color:c="primary",density:d="default",orientation:u="horizontal",modal:f=!0,loopFocus:m=!0,disabled:b=!1,className:h,style:x,children:v,...g}=p(e,["size","density"]),y=n.useMemo(()=>({size:i,color:c,density:d}),[i,c,d]);return t(s.Provider,{value:y,children:t(o,{ref:r,orientation:u,modal:f,loopFocus:m,disabled:b,className:a("flex items-center","vertical"===u?"flex-col items-stretch":"flex-row",l[i],h??""),style:{"--n-soft":`var(--neba-${c}-soft)`,"--n-soft-hover":`var(--neba-${c}-soft-hover)`,"--n-accent":`var(--neba-${c}-accent)`,"--n-ring":`var(--neba-${c}-ring)`,...x},...g,children:v})})});

package/dist/components/meter/Meter.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as a from"react";import{Meter as l}from"@base-ui/react/meter";import{barThicknessClasses as t,progressFraction as n,progressSlots as s}from"../../internal/progress.js";import{cx as o,metaTextClasses as i,stackGapClasses as m}from"../../internal/styles.js";export const Meter=/*@__PURE__*/a.forwardRef(function({value:a,min:u=0,max:f=100,label:c,showValue:d=!1,format:b,thresholds:h,size:x="md",color:p="primary",className:v,style:g,...j},w){const N=n(a,u,f),y=function(e,r,a){if(!a||0===a.length)return r;let l=r;for(const r of a)e>=r.from&&(l=r.color);return l}(a,p,h),_=void 0!==b;return r(l.Root,{ref:w,value:a,min:u,max:f,format:b,className:o("flex w-full flex-col",m[x],v??""),style:{...s(y),...g},...j,children:[c||d?r("div",{className:["flex items-baseline gap-2",c?"justify-between":"justify-end",i[x]].join(" "),children:[c?e(l.Label,{className:"min-w-0 truncate text-(--neba-fg)",children:c}):null,d?e(l.Value,{className:"shrink-0 tabular-nums text-(--neba-muted-fg)",children:e=>_?e:`${Math.round(100*(N??0))}%`}):null]}):null,e(l.Track,{className:`relative w-full overflow-hidden rounded-full bg-(--n-soft) ${t[x]}`,children:e(l.Indicator,{className:"absolute top-0 rounded-full bg-(--n-fill) [transition:width_var(--neba-duration-fill)_var(--neba-ease),background-color_var(--neba-duration)_var(--neba-ease)]"})})]})});
+"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as a from"react";import{Meter as l}from"@base-ui/react/meter";import{barThicknessClasses as t,progressFraction as n,progressSlots as s}from"../../internal/progress.js";import{cx as o,metaTextClasses as i,stackGapClasses as m}from"../../internal/styles.js";import{useStyleDefaults as f}from"../../internal/defaults.js";export const Meter=/*@__PURE__*/a.forwardRef(function(a,u){const{value:c,min:d=0,max:b=100,label:h,showValue:p=!1,format:x,thresholds:v,size:j="md",color:g="primary",className:w,style:N,...y}=f(a,["size"]),_=n(c,d,b),k=function(e,r,a){if(!a||0===a.length)return r;let l=r;for(const r of a)e>=r.from&&(l=r.color);return l}(c,g,v),M=void 0!==x;return r(l.Root,{ref:u,value:c,min:d,max:b,format:x,className:o("flex w-full flex-col",m[j],w??""),style:{...s(k),...N},...y,children:[h||p?r("div",{className:["flex items-baseline gap-2",h?"justify-between":"justify-end",i[j]].join(" "),children:[h?e(l.Label,{className:"min-w-0 truncate text-(--neba-fg)",children:h}):null,p?e(l.Value,{className:"shrink-0 tabular-nums text-(--neba-muted-fg)",children:e=>M?e:`${Math.round(100*(_??0))}%`}):null]}):null,e(l.Track,{className:`relative w-full overflow-hidden rounded-full bg-(--n-soft) ${t[j]}`,children:e(l.Indicator,{className:"absolute top-0 rounded-full bg-(--n-fill) [transition:width_var(--neba-duration-fill)_var(--neba-ease),background-color_var(--neba-duration)_var(--neba-ease)]"})})]})});

package/dist/components/mockup/Mockup.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t,Fragment as i}from"react/jsx-runtime";import*as r from"react";import{useRender as a}from"@base-ui/react/use-render";import{transitionProps as n}from"../../internal/animate.js";import{MockupCutout as o,defaultNotch as s,elevationFilters as h,finishSlots as d,mockupChrome as l,mockupMetrics as c,resolveOs as u,shellClasses as m}from"../../internal/mockup.js";import{observeResize as p}from"../../internal/observe.js";import{cx as f,surfaceSlots as g}from"../../internal/styles.js";const b="undefined"==typeof document?r.useEffect:r.useLayoutEffect;export const Mockup=/*@__PURE__*/r.forwardRef(function({device:v,os:w,hardware:y="monitor",size:x="md",resolution:k,orientation:N="portrait",bezel:R="standard",finish:$="graphite",notch:z,systemUi:M=!0,scroll:j=!1,wallpaper:W,time:H="9:41",width:B,height:C,color:E="primary",elevation:L=0,transition:P,render:S,className:F,style:I,children:T,...U},q){const A=u(v,w),D=z??s(v,A),G="desktop"!==v&&"landscape"===N,J=c({device:v,size:x,resolution:k,orientation:N,bezel:R,hardware:y}),{screen:K,frame:O,body:Q,stand:V,base:X}=J,Y=r.useRef(null),[Z,_]=r.useState(null);b(()=>{const e=Y.current;if(!e)return;const t=()=>{const t=e.getBoundingClientRect();if(t.width<=0||t.height<=0)return;const i=Math.min(t.width/O.width,t.height/O.height);_(e=>null!==e&&Math.abs(e-i)<1e-4?e:i)};return t(),p(e,t)},[O.width,O.height]);const ee=r.useCallback(e=>{Y.current=e,"function"==typeof q?q(e):q&&(q.current=e)},[q]),te=M?l({os:A,notch:D,landscape:G,time:H}):{},ie=n(P),re="none"===R,ae=t("div",{className:"neba-mockup-screen relative flex flex-col overflow-hidden",style:{width:K.width,height:K.height,borderRadius:J.screenRadius,background:W??"var(--neba-surface)",boxShadow:re?void 0:"inset 0 0 0 1px var(--n-shell-shade)"},children:[te.top?.node,t("div",{className:"flex min-h-0 flex-1",children:[te.start?.node,e("div",{className:"min-w-0 flex-1 "+(j?"overflow-auto":"overflow-hidden"),style:{containerType:"size",containerName:"neba-screen"},children:T})]}),te.bottom?.node,e(o,{notch:D,screen:K,landscape:G})]}),ne=f("neba-mockup relative block",ie.className,F??"");return a({render:S,ref:ee,props:{className:ne,style:{...g(E,L),...d[$],...ie.style,width:B??(void 0===C?"100%":"auto"),height:C??"auto",aspectRatio:`${O.width} / ${O.height}`,filter:h[L],...I},children:t("div",{className:"absolute top-1/2 left-1/2 flex flex-col items-center",style:{width:O.width,height:O.height,transform:`translate(-50%, -50%) scale(${Z??1})`,visibility:null===Z?"hidden":void 0},children:[e("div",{className:re?"":m,style:{width:Q.width,height:Q.height,borderRadius:J.frameRadius,paddingBlock:`${J.bezel.top}px ${J.bezel.bottom}px`,paddingInline:J.bezel.x},children:ae}),V?t(i,{children:[e("div",{"aria-hidden":"true",style:{width:V.neckWidth,height:V.neckHeight,background:"var(--n-shell-shade)",clipPath:"polygon(16% 0, 84% 0, 100% 100%, 0 100%)"}}),e("div",{"aria-hidden":"true",className:m,style:{width:V.footWidth,height:V.footHeight,borderRadius:V.footHeight/2}})]}):null,X?e("div",{"aria-hidden":"true",className:`relative ${m}`,style:{width:X.width,height:X.height,borderRadius:`0 0 ${Math.round(.55*X.height)}px ${Math.round(.55*X.height)}px`,clipPath:"polygon(0 0, 100% 0, 98.5% 100%, 1.5% 100%)"},children:e("div",{className:"absolute top-0 left-1/2",style:{width:X.lipWidth,height:Math.round(.34*X.height),marginLeft:-X.lipWidth/2,borderRadius:`0 0 ${Math.round(.2*X.height)}px ${Math.round(.2*X.height)}px`,background:"var(--n-shell-shade)"}})}):null]}),...U}})});
+"use client";import{jsx as e,jsxs as t,Fragment as i}from"react/jsx-runtime";import*as r from"react";import{useRender as a}from"@base-ui/react/use-render";import{transitionProps as n}from"../../internal/animate.js";import{MockupCutout as o,defaultNotch as s,elevationFilters as h,finishSlots as d,mockupChrome as l,mockupMetrics as c,resolveOs as u,shellClasses as m}from"../../internal/mockup.js";import{observeResize as p}from"../../internal/observe.js";import{cx as f,surfaceSlots as g}from"../../internal/styles.js";import{useStyleDefaults as b}from"../../internal/defaults.js";const v="undefined"==typeof document?r.useEffect:r.useLayoutEffect;export const Mockup=/*@__PURE__*/r.forwardRef(function(w,y){const{device:x,os:k,hardware:N="monitor",size:R="md",resolution:$,orientation:z="portrait",bezel:j="standard",finish:M="graphite",notch:W,systemUi:H=!0,scroll:B=!1,wallpaper:C,time:E="9:41",width:L,height:P,color:S="primary",elevation:F=0,transition:I,render:T,className:U,style:q,children:A,...D}=b(w,["size"]),G=u(x,k),J=W??s(x,G),K="desktop"!==x&&"landscape"===z,O=c({device:x,size:R,resolution:$,orientation:z,bezel:j,hardware:N}),{screen:Q,frame:V,body:X,stand:Y,base:Z}=O,_=r.useRef(null),[ee,te]=r.useState(null);v(()=>{const e=_.current;if(!e)return;const t=()=>{const t=e.getBoundingClientRect();if(t.width<=0||t.height<=0)return;const i=Math.min(t.width/V.width,t.height/V.height);te(e=>null!==e&&Math.abs(e-i)<1e-4?e:i)};return t(),p(e,t)},[V.width,V.height]);const ie=r.useCallback(e=>{_.current=e,"function"==typeof y?y(e):y&&(y.current=e)},[y]),re=H?l({os:G,notch:J,landscape:K,time:E}):{},ae=n(I),ne="none"===j,oe=t("div",{className:"neba-mockup-screen relative flex flex-col overflow-hidden",style:{width:Q.width,height:Q.height,borderRadius:O.screenRadius,background:C??"var(--neba-surface)",boxShadow:ne?void 0:"inset 0 0 0 1px var(--n-shell-shade)"},children:[re.top?.node,t("div",{className:"flex min-h-0 flex-1",children:[re.start?.node,e("div",{className:"min-w-0 flex-1 "+(B?"overflow-auto":"overflow-hidden"),style:{containerType:"size",containerName:"neba-screen"},children:A})]}),re.bottom?.node,e(o,{notch:J,screen:Q,landscape:K})]}),se=f("neba-mockup relative block",ae.className,U??"");return a({render:T,ref:ie,props:{className:se,style:{...g(S,F),...d[M],...ae.style,width:L??(void 0===P?"100%":"auto"),height:P??"auto",aspectRatio:`${V.width} / ${V.height}`,filter:h[F],...q},children:t("div",{className:"absolute top-1/2 left-1/2 flex flex-col items-center",style:{width:V.width,height:V.height,transform:`translate(-50%, -50%) scale(${ee??1})`,visibility:null===ee?"hidden":void 0},children:[e("div",{className:ne?"":m,style:{width:X.width,height:X.height,borderRadius:O.frameRadius,paddingBlock:`${O.bezel.top}px ${O.bezel.bottom}px`,paddingInline:O.bezel.x},children:oe}),Y?t(i,{children:[e("div",{"aria-hidden":"true",style:{width:Y.neckWidth,height:Y.neckHeight,background:"var(--n-shell-shade)",clipPath:"polygon(16% 0, 84% 0, 100% 100%, 0 100%)"}}),e("div",{"aria-hidden":"true",className:m,style:{width:Y.footWidth,height:Y.footHeight,borderRadius:Y.footHeight/2}})]}):null,Z?e("div",{"aria-hidden":"true",className:`relative ${m}`,style:{width:Z.width,height:Z.height,borderRadius:`0 0 ${Math.round(.55*Z.height)}px ${Math.round(.55*Z.height)}px`,clipPath:"polygon(0 0, 100% 0, 98.5% 100%, 1.5% 100%)"},children:e("div",{className:"absolute top-0 left-1/2",style:{width:Z.lipWidth,height:Math.round(.34*Z.height),marginLeft:-Z.lipWidth/2,borderRadius:`0 0 ${Math.round(.2*Z.height)}px ${Math.round(.2*Z.height)}px`,background:"var(--n-shell-shade)"}})}):null]}),...D}})});

package/dist/components/navigation-menu/NavigationMenu.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as n,Fragment as a}from"react/jsx-runtime";import*as t from"react";import{NavigationMenu as i}from"@base-ui/react/navigation-menu";import{ChevronIcon as r}from"../../internal/icons.js";import{safeRel as o}from"../../internal/link.js";import{controlHeightClasses as s,controlTextClasses as l,controlTextLeadingClasses as d,cx as c,gapClasses as u,hasContent as f,iconClasses as p,metaTextClasses as m,paddingXClasses as h,radiusClasses as b,surfaceClasses as v,surfaceSlots as g,transitionClasses as x}from"../../internal/styles.js";const y=/*@__PURE__*/t.createContext({size:"md",density:"default"}),N=["inline-flex shrink-0 cursor-pointer select-none items-center justify-center","whitespace-nowrap font-medium leading-none no-underline","text-(--neba-fg) bg-transparent","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",x,p,"hover:bg-(--n-soft)","data-[popup-open]:bg-(--n-soft-hover) data-[popup-open]:text-(--n-accent)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2","data-[disabled]:cursor-not-allowed data-[disabled]:text-(--neba-disabled-fg)","data-[disabled]:hover:bg-transparent"].join(" "),w=[v,"relative 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] overflow-hidden","[transition:opacity_var(--neba-duration)_var(--neba-ease),width_var(--neba-duration)_var(--neba-ease),height_var(--neba-duration)_var(--neba-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),j=["flex min-w-0 cursor-pointer items-start no-underline","text-(--neba-fg) bg-transparent",x,p,"hover:bg-(--n-soft)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:[outline-offset:-2px]"].join(" "),_={xs:"p-1",sm:"p-1.5",md:"p-2",lg:"p-2.5",xl:"p-3"};export const NavigationMenuLink=/*@__PURE__*/t.forwardRef(function({href:a,title:r,description:o,startIcon:s,className:l,children:p,...v},g){const{size:x,density:N}=t.useContext(y);return n(i.Link,{ref:g,href:a,className:c(j,b[x],u[x],h[N??"default"][x],"py-2",l??""),...v,children:[f(s)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:s}):null,n("span",{className:"flex min-w-0 flex-col gap-0.5",children:[e("span",{className:`font-medium ${d[x]}`,children:r}),f(o)?e("span",{className:`text-(--neba-muted-fg) ${m[x]}`,children:o}):null,p]})]})});export function NavigationMenuItem({label:d,href:c,target:p,rel:m,startIcon:v,value:g,disabled:x=!1,columns:w=1,children:j}){const{size:k,density:z}=t.useContext(y),C=void 0!==c&&!f(j),$=[N,s[k],l[k],u[k],h[z??"default"][k],b[k]].join(" ");return e(i.Item,{value:g,children:C?n(i.Link,{href:c,target:p,rel:o(p,m),className:$,children:[f(v)?v:null,d]}):n(a,{children:[n(i.Trigger,{disabled:x,className:$,children:[f(v)?v:null,d,e(i.Icon,{className:"flex items-center [transition:rotate_var(--neba-duration)_var(--neba-ease)] data-[popup-open]:rotate-180",children:e(r,{})})]}),e(i.Content,{className:`grid gap-1 ${_[k]}`,style:w>1?{gridTemplateColumns:`repeat(${w}, minmax(0, 1fr))`}:void 0,children:j})]})})}export const NavigationMenu=/*@__PURE__*/t.forwardRef(function({size:a="md",color:r="primary",density:o="default",orientation:s="horizontal",value:l,defaultValue:d,onValueChange:c,delay:f,closeDelay:p,sideOffset:m=8,className:h,style:v,children:x,...N},j){const _=t.useMemo(()=>({size:a,density:o}),[a,o]);return e(y.Provider,{value:_,children:n(i.Root,{ref:j,orientation:s,value:l,defaultValue:d,onValueChange:e=>c?.(e),delay:f,closeDelay:p,className:h,style:{...g(r,3),"--n-soft-hover":`var(--neba-${r}-soft-hover)`,...v},...N,children:[e(i.List,{className:["flex items-center","vertical"===s?"flex-col items-stretch":"flex-row",u[a]].join(" "),children:x}),e(i.Portal,{children:e(i.Positioner,{className:"neba-portal z-50 [outline:none]",sideOffset:m,collisionPadding:12,children:e(i.Popup,{className:`${w} ${b[a]}`,children:e(i.Viewport,{})})})})]})})});
+"use client";import{jsx as e,jsxs as n,Fragment as a}from"react/jsx-runtime";import*as t from"react";import{NavigationMenu as i}from"@base-ui/react/navigation-menu";import{ChevronIcon as r}from"../../internal/icons.js";import{safeRel as o}from"../../internal/link.js";import{controlHeightClasses as s,controlTextClasses as l,controlTextLeadingClasses as d,cx as c,gapClasses as u,hasContent as f,iconClasses as p,metaTextClasses as m,paddingXClasses as h,popupFadeStateClasses as b,radiusClasses as v,surfaceClasses as g,surfaceSlots as x,transitionClasses as N}from"../../internal/styles.js";const y=/*@__PURE__*/t.createContext({size:"md",density:"default"}),w=["inline-flex shrink-0 cursor-pointer select-none items-center justify-center","whitespace-nowrap font-medium leading-none no-underline","text-(--neba-fg) bg-transparent","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",N,p,"hover:bg-(--n-soft)","data-[popup-open]:bg-(--n-soft-hover) data-[popup-open]:text-(--n-accent)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2","data-[disabled]:cursor-not-allowed data-[disabled]:text-(--neba-disabled-fg)","data-[disabled]:hover:bg-transparent"].join(" "),j=[g,"relative 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] overflow-hidden","[transition:opacity_var(--neba-duration)_var(--neba-ease),width_var(--neba-duration)_var(--neba-ease),height_var(--neba-duration)_var(--neba-ease)]",b].join(" "),_=["flex min-w-0 cursor-pointer items-start no-underline","text-(--neba-fg) bg-transparent",N,p,"hover:bg-(--n-soft)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:[outline-offset:-2px]"].join(" "),k={xs:"p-1",sm:"p-1.5",md:"p-2",lg:"p-2.5",xl:"p-3"};export const NavigationMenuLink=/*@__PURE__*/t.forwardRef(function({href:a,title:r,description:o,startIcon:s,className:l,children:p,...b},g){const{size:x,density:N}=t.useContext(y);return n(i.Link,{ref:g,href:a,className:c(_,v[x],u[x],h[N??"default"][x],"py-2",l??""),...b,children:[f(s)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:s}):null,n("span",{className:"flex min-w-0 flex-col gap-0.5",children:[e("span",{className:`font-medium ${d[x]}`,children:r}),f(o)?e("span",{className:`text-(--neba-muted-fg) ${m[x]}`,children:o}):null,p]})]})});export function NavigationMenuItem({label:d,href:c,target:p,rel:m,startIcon:b,value:g,disabled:x=!1,columns:N=1,children:j}){const{size:_,density:z}=t.useContext(y),C=void 0!==c&&!f(j),$=[w,s[_],l[_],u[_],h[z??"default"][_],v[_]].join(" ");return e(i.Item,{value:g,children:C?n(i.Link,{href:c,target:p,rel:o(p,m),className:$,children:[f(b)?b:null,d]}):n(a,{children:[n(i.Trigger,{disabled:x,className:$,children:[f(b)?b:null,d,e(i.Icon,{className:"flex items-center [transition:rotate_var(--neba-duration)_var(--neba-ease)] data-[popup-open]:rotate-180",children:e(r,{})})]}),e(i.Content,{className:`grid gap-1 ${k[_]}`,style:N>1?{gridTemplateColumns:`repeat(${N}, minmax(0, 1fr))`}:void 0,children:j})]})})}export const NavigationMenu=/*@__PURE__*/t.forwardRef(function({size:a="md",color:r="primary",density:o="default",orientation:s="horizontal",value:l,defaultValue:d,onValueChange:c,delay:f,closeDelay:p,sideOffset:m=8,className:h,style:b,children:g,...N},w){const _=t.useMemo(()=>({size:a,density:o}),[a,o]);return e(y.Provider,{value:_,children:n(i.Root,{ref:w,orientation:s,value:l,defaultValue:d,onValueChange:e=>c?.(e),delay:f,closeDelay:p,className:h,style:{...x(r,3),"--n-soft-hover":`var(--neba-${r}-soft-hover)`,...b},...N,children:[e(i.List,{className:["flex items-center","vertical"===s?"flex-col items-stretch":"flex-row",u[a]].join(" "),children:g}),e(i.Portal,{children:e(i.Positioner,{className:"neba-portal z-50 [outline:none]",sideOffset:m,collisionPadding:12,children:e(i.Popup,{className:`${j} ${v[a]}`,children:e(i.Viewport,{})})})})]})})});

package/dist/components/number-field/NumberField.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { NebaElevation, NebaFieldSlot, NebaSlots, NebaStyleProps } from '../../types.js';
+import type { NebaElevation, NebaFieldSlot, NebaShortcuts, NebaSlots, NebaStyleProps } from '../../types.js';
 /**
  * Where the two steppers sit.
  *
@@ -114,6 +114,16 @@ export interface NumberFieldProps extends NebaStyleProps, Omit<React.ComponentPr
      * `<input>` itself is `classNames.control`.
      */
     classNames?: NebaSlots<NumberFieldSlot>;
+    /**
+     * Key combinations to act on, spelled the way
+     * [Shortcut](../display/shortcut) draws them — `{ Enter: commit }`.
+     *
+     * Bound to the `<input>` rather than to the root, which is the difference
+     * that makes it worth having here: a plain `onKeyDown` lands on the column
+     * the label and the messages are in, so `event.currentTarget` is not the
+     * field and the arrow keys the steppers use never reach it as themselves.
+     */
+    shortcuts?: NebaShortcuts<HTMLInputElement>;
 }
 /**
  * A field that only holds a number.
@@ -129,4 +139,4 @@ export interface NumberFieldProps extends NebaStyleProps, Omit<React.ComponentPr
  * clamping, the press-and-hold repeat on the steppers, and the hidden input
  * that submits with a form.
  */
-export declare function NumberField({ variant, size, color, density, elevation, value, defaultValue, onValueChange, onValueCommitted, min, max, step, largeStep, smallStep, snapOnStep, allowWheelScrub, format, locale, steppers, incrementLabel, decrementLabel, label, description, error, invalid, startIcon, endIcon, fullWidth, disabled, readOnly, required, name, placeholder, id, className, classNames, style, ...props }: NumberFieldProps): React.JSX.Element;
+export declare function NumberField(rawProps: NumberFieldProps): React.JSX.Element;

package/dist/components/number-field/NumberField.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as n}from"react/jsx-runtime";import{NumberField as t}from"@base-ui/react/number-field";import{Field as a}from"@base-ui/react/field";import{numberMessages as l,useMessages as r}from"../../internal/i18n.js";import{MinusIcon as i,PlusIcon as s}from"../../internal/icons.js";import{controlHeightClasses as o,controlTextLeadingClasses as c,cx as d,disabledClasses as m,fieldReadOnlyClasses as u,fieldRestClasses as p,focusWithinRingClasses as f,gapClasses as b,hasContent as h,iconClasses as x,metaTextClasses as g,paddingXClasses as v,radiusClasses as N,stackGapClasses as j,surfaceSlots as w,transitionClasses as y}from"../../internal/styles.js";const k=["group relative flex w-full cursor-text items-center","[-webkit-tap-highlight-color:transparent]",y,"focus-within:[transition-duration:0ms]",f,x].join(" "),S=["inline-flex size-[1.7em] shrink-0 cursor-pointer items-center justify-center","rounded-(--neba-radius-xs) text-(--neba-muted-fg) select-none","[&_svg]:size-[0.9em] [&_svg]:shrink-0","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]","[transition:background-color_var(--neba-duration)_var(--neba-ease),color_var(--neba-duration)_var(--neba-ease)]","active:[transition-duration:0ms]","hover:bg-(--n-soft) hover:text-(--n-accent)","active:bg-(--n-soft-press)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-1","disabled:cursor-not-allowed disabled:bg-transparent disabled:text-(--neba-disabled-fg)"].join(" ");export function NumberField({variant:f="outline",size:x="md",color:y="primary",density:_="default",elevation:V=0,value:C,defaultValue:I,onValueChange:O,onValueCommitted:z,min:L,max:W,step:q,largeStep:D,smallStep:F,snapOnStep:R,allowWheelScrub:B=!1,format:E,locale:G,steppers:$="end",incrementLabel:A,decrementLabel:H,label:J,description:K,error:M,invalid:P,startIcon:Q,endIcon:T,fullWidth:U=!1,disabled:X=!1,readOnly:Y=!1,required:Z=!1,name:ee,placeholder:ne,id:te,className:ae,classNames:le,style:re,...ie}){const se=r(l,"string"==typeof G?G:void 0),oe=h(M),ce=P??oe,de=ce?"danger":y,me=v[_][x],ue={end:`${me} pe-1`,split:"px-1",none:me},pe=e(t.Decrement,{"aria-label":H??se.decrease,className:d(S,le?.stepper),children:e(i,{})}),fe=e(t.Increment,{"aria-label":A??se.increase,className:d(S,le?.stepper),children:e(s,{})}),be="none"!==$&&!Y;return n(a.Root,{disabled:X,invalid:ce,className:d("flex-col align-top",j[x],U?"flex w-full":"inline-flex",ae??""),style:{...w(de,V),...re},...ie,children:[J?e(a.Label,{className:d(g[x],"font-medium",X?"text-(--neba-disabled-fg)":"text-(--neba-fg)",le?.label),children:J}):null,e(t.Root,{id:te,name:ee,className:"contents",value:C,defaultValue:I,onValueChange:e=>O?.(e),onValueCommitted:e=>z?.(e),min:L,max:W,step:q,largeStep:D,smallStep:F,snapOnStep:R,allowWheelScrub:B,format:E,locale:G,disabled:X,readOnly:Y,required:Z,children:n(t.Group,{className:d(k,o[x],c[x],N[x],b[x],be?ue[$]:me,X?m[f]:Y?u[f]:p[f],le?.shell),children:[be&&"split"===$?pe:null,Q?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:Q}):null,e(t.Input,{placeholder:ne,className:["min-w-0 flex-1 self-stretch bg-transparent [font:inherit] text-inherit","[outline:none]","tabular-nums","split"===$&&be?"text-center":"","placeholder:text-(--neba-muted-fg)","caret-(--n-accent) selection:bg-(--n-soft-press)","disabled:cursor-not-allowed",le?.control].filter(Boolean).join(" ")}),T?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:T}):null,be&&"end"===$?n("span",{className:"flex shrink-0 items-center gap-0.5",children:[pe,fe]}):null,be&&"split"===$?fe:null]})}),K?e(a.Description,{className:d(g[x],"text-(--neba-muted-fg)",le?.description),children:K}):null,e(a.Error,oe?{match:!0,className:d(g[x],"text-(--n-accent)",le?.error),children:M}:{className:d(g[x],"text-(--n-accent)",le?.error)})]})}
+"use client";import{jsx as e,jsxs as n}from"react/jsx-runtime";import{NumberField as t}from"@base-ui/react/number-field";import{Field as a}from"@base-ui/react/field";import{numberMessages as l,useMessages as r}from"../../internal/i18n.js";import{MinusIcon as s,PlusIcon as i}from"../../internal/icons.js";import{keyHandler as o}from"../../internal/keys.js";import{controlHeightClasses as c,controlTextLeadingClasses as d,cx as m,disabledClasses as u,fieldReadOnlyClasses as p,fieldRestClasses as f,focusWithinRingClasses as b,gapClasses as h,hasContent as x,iconClasses as g,metaTextClasses as v,paddingXClasses as N,radiusClasses as j,stackGapClasses as y,surfaceSlots as w,transitionClasses as k}from"../../internal/styles.js";import{useStyleDefaults as S}from"../../internal/defaults.js";const _=["group relative flex w-full cursor-text items-center","[-webkit-tap-highlight-color:transparent]",k,"focus-within:[transition-duration:0ms]",b,g].join(" "),V=["inline-flex size-[1.7em] shrink-0 cursor-pointer items-center justify-center","rounded-(--neba-radius-xs) text-(--neba-muted-fg) select-none","[&_svg]:size-[0.9em] [&_svg]:shrink-0","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]","[transition:background-color_var(--neba-duration)_var(--neba-ease),color_var(--neba-duration)_var(--neba-ease)]","active:[transition-duration:0ms]","hover:bg-(--n-soft) hover:text-(--n-accent)","active:bg-(--n-soft-press)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-1","disabled:cursor-not-allowed disabled:bg-transparent disabled:text-(--neba-disabled-fg)"].join(" ");export function NumberField(b){const{variant:g="outline",size:k="md",color:z="primary",density:C="default",elevation:I=0,value:O,defaultValue:D,onValueChange:L,onValueCommitted:W,min:q,max:F,step:R,largeStep:B,smallStep:E,snapOnStep:G,allowWheelScrub:K=!1,format:$,locale:A,steppers:H="end",incrementLabel:J,decrementLabel:M,label:P,description:Q,error:T,invalid:U,startIcon:X,endIcon:Y,fullWidth:Z=!1,disabled:ee=!1,readOnly:ne=!1,required:te=!1,name:ae,placeholder:le,id:re,className:se,classNames:ie,shortcuts:oe,style:ce,...de}=S(b,["size","density","variant","locale"]),me=r(l,"string"==typeof A?A:void 0),ue=x(T),pe=U??ue,fe=pe?"danger":z,be=N[C][k],he={end:`${be} pe-1`,split:"px-1",none:be},xe=e(t.Decrement,{"aria-label":M??me.decrease,className:m(V,ie?.stepper),children:e(s,{})}),ge=e(t.Increment,{"aria-label":J??me.increase,className:m(V,ie?.stepper),children:e(i,{})}),ve="none"!==H&&!ne;return n(a.Root,{disabled:ee,invalid:pe,className:m("flex-col align-top",y[k],Z?"flex w-full":"inline-flex",se??""),style:{...w(fe,I),...ce},...de,children:[P?e(a.Label,{className:m(v[k],"font-medium",ee?"text-(--neba-disabled-fg)":"text-(--neba-fg)",ie?.label),children:P}):null,e(t.Root,{id:re,name:ae,className:"contents",value:O,defaultValue:D,onValueChange:e=>L?.(e),onValueCommitted:e=>W?.(e),min:q,max:F,step:R,largeStep:B,smallStep:E,snapOnStep:G,allowWheelScrub:K,format:$,locale:A,disabled:ee,readOnly:ne,required:te,children:n(t.Group,{className:m(_,c[k],d[k],j[k],h[k],ve?he[H]:be,ee?u[g]:ne?p[g]:f[g],ie?.shell),children:[ve&&"split"===H?xe:null,X?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:X}):null,e(t.Input,{onKeyDown:o(oe),placeholder:le,className:["min-w-0 flex-1 self-stretch bg-transparent [font:inherit] text-inherit","[outline:none]","tabular-nums","split"===H&&ve?"text-center":"","placeholder:text-(--neba-muted-fg)","caret-(--n-accent) selection:bg-(--n-soft-press)","disabled:cursor-not-allowed",ie?.control].filter(Boolean).join(" ")}),Y?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:Y}):null,ve&&"end"===H?n("span",{className:"flex shrink-0 items-center gap-0.5",children:[xe,ge]}):null,ve&&"split"===H?ge:null]})}),Q?e(a.Description,{className:m(v[k],"text-(--neba-muted-fg)",ie?.description),children:Q}):null,e(a.Error,ue?{match:!0,className:m(v[k],"text-(--n-accent)",ie?.error),children:T}:{className:m(v[k],"text-(--n-accent)",ie?.error)})]})}

package/dist/components/otp-field/OtpField.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as t from"react";import{Field as n}from"@base-ui/react/field";import{OTPField as l}from"@base-ui/react/otp-field";import{cx as r,disabledClasses as s,fieldReadOnlyClasses as i,fieldRestClasses as o,metaTextClasses as m,stackGapClasses as d,surfaceSlots as u,transitionClasses as c}from"../../internal/styles.js";const p={xs:"h-7 w-6",sm:"h-8 w-7",md:"h-10 w-8",lg:"h-12 w-10",xl:"h-14 w-12"},f={xs:"rounded-[0.3125rem]",sm:"rounded-[0.375rem]",md:"rounded-[0.4375rem]",lg:"rounded-[0.5625rem]",xl:"rounded-[0.6875rem]"},x={xs:"text-[0.8125rem]",sm:"text-[0.9375rem]",md:"text-[1.0625rem]",lg:"text-[1.25rem]",xl:"text-[1.5rem]"},g={default:{xs:"gap-1",sm:"gap-1",md:"gap-1.5",lg:"gap-2",xl:"gap-2.5"},compact:{xs:"gap-0.5",sm:"gap-0.5",md:"gap-1",lg:"gap-1",xl:"gap-1.5"}},h={numeric:"numeric",alpha:"alpha",alphanumeric:"alphanumeric",any:"none"};export const OtpField=/*@__PURE__*/t.forwardRef(function({variant:b="outline",size:y="md",color:v="primary",density:N="default",elevation:V=0,length:w=6,charset:j="numeric",mask:C=!1,groupSize:F,separator:M="–",value:I,defaultValue:O,onValueChange:R,onComplete:S,onValueInvalid:k,autoSubmit:q=!1,label:z,description:_,error:A,invalid:D,name:E,required:L=!1,disabled:T=!1,readOnly:B=!1,autoFocus:G=!1,className:H,style:J,...K},P){const Q=Math.min(12,Math.max(2,Math.round(w))),U=null!=A&&!1!==A&&""!==A,W=D??U,X=W?"danger":v,Y=r("text-center font-medium [font-family:inherit]",p[y],x[y],f[y],c,"caret-(--n-accent) selection:bg-(--n-soft-press)","focus:[outline:2px_solid_var(--n-ring)] focus:outline-offset-1","focus:[transition-duration:0ms]",T?s[b]:B?i[b]:o[b]),Z=F&&F>0?Math.round(F):0;return a(n.Root,{disabled:T,invalid:W,className:r("inline-flex flex-col align-top",d[y],H),style:{...u(X,V),...J},children:[z?e(n.Label,{className:r(m[y],"font-medium",T?"text-(--neba-disabled-fg)":"text-(--neba-fg)"),children:z}):null,e(l.Root,{ref:P,length:Q,validationType:h[j],mask:C,name:E,required:L,disabled:T,readOnly:B,autoSubmit:q,value:I,defaultValue:O,onValueChange:e=>R?.(e),onValueComplete:e=>S?.(e),onValueInvalid:e=>k?.(e),className:r("flex items-center",g[N][y]),...K,children:Array.from({length:Q},(n,s)=>a(t.Fragment,{children:[Z>0&&s>0&&s%Z===0?e("span",{"aria-hidden":"true",className:r("select-none px-0.5 text-(--neba-muted-fg)",x[y]),children:M}):null,e(l.Input,{className:Y,autoFocus:G&&0===s})]},s))}),_?e(n.Description,{className:r(m[y],"text-(--neba-muted-fg)"),children:_}):null,e(n.Error,U?{match:!0,className:r(m[y],"text-(--n-accent)"),children:A}:{className:r(m[y],"text-(--n-accent)")})]})});
+"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as t from"react";import{Field as n}from"@base-ui/react/field";import{OTPField as l}from"@base-ui/react/otp-field";import{cx as r,disabledClasses as i,fieldReadOnlyClasses as s,fieldRestClasses as o,metaTextClasses as m,stackGapClasses as d,surfaceSlots as u,transitionClasses as c}from"../../internal/styles.js";import{useStyleDefaults as p}from"../../internal/defaults.js";const f={xs:"h-7 w-6",sm:"h-8 w-7",md:"h-10 w-8",lg:"h-12 w-10",xl:"h-14 w-12"},x={xs:"rounded-[0.3125rem]",sm:"rounded-[0.375rem]",md:"rounded-[0.4375rem]",lg:"rounded-[0.5625rem]",xl:"rounded-[0.6875rem]"},g={xs:"text-[0.8125rem]",sm:"text-[0.9375rem]",md:"text-[1.0625rem]",lg:"text-[1.25rem]",xl:"text-[1.5rem]"},h={default:{xs:"gap-1",sm:"gap-1",md:"gap-1.5",lg:"gap-2",xl:"gap-2.5"},compact:{xs:"gap-0.5",sm:"gap-0.5",md:"gap-1",lg:"gap-1",xl:"gap-1.5"}},b={numeric:"numeric",alpha:"alpha",alphanumeric:"alphanumeric",any:"none"};export const OtpField=/*@__PURE__*/t.forwardRef(function(y,v){const{variant:N="outline",size:V="md",color:w="primary",density:j="default",elevation:C=0,length:F=6,charset:M="numeric",mask:z=!1,groupSize:I,separator:O="–",value:R,defaultValue:S,onValueChange:k,onComplete:q,onValueInvalid:_,autoSubmit:A=!1,label:D,description:E,error:L,invalid:T,name:B,required:G=!1,disabled:H=!1,readOnly:J=!1,autoFocus:K=!1,className:P,style:Q,...U}=p(y,["size","density","variant"]),W=Math.min(12,Math.max(2,Math.round(F))),X=null!=L&&!1!==L&&""!==L,Y=T??X,Z=Y?"danger":w,$=r("text-center font-medium [font-family:inherit]",f[V],g[V],x[V],c,"caret-(--n-accent) selection:bg-(--n-soft-press)","focus:[outline:2px_solid_var(--n-ring)] focus:outline-offset-1","focus:[transition-duration:0ms]",H?i[N]:J?s[N]:o[N]),ee=I&&I>0?Math.round(I):0;return a(n.Root,{disabled:H,invalid:Y,className:r("inline-flex flex-col align-top",d[V],P),style:{...u(Z,C),...Q},children:[D?e(n.Label,{className:r(m[V],"font-medium",H?"text-(--neba-disabled-fg)":"text-(--neba-fg)"),children:D}):null,e(l.Root,{ref:v,length:W,validationType:b[M],mask:z,name:B,required:G,disabled:H,readOnly:J,autoSubmit:A,value:R,defaultValue:S,onValueChange:e=>k?.(e),onValueComplete:e=>q?.(e),onValueInvalid:e=>_?.(e),className:r("flex items-center",h[j][V]),...U,children:Array.from({length:W},(n,i)=>a(t.Fragment,{children:[ee>0&&i>0&&i%ee===0?e("span",{"aria-hidden":"true",className:r("select-none px-0.5 text-(--neba-muted-fg)",g[V]),children:O}):null,e(l.Input,{className:$,autoFocus:K&&0===i})]},i))}),E?e(n.Description,{className:r(m[V],"text-(--neba-muted-fg)"),children:E}):null,e(n.Error,X?{match:!0,className:r(m[V],"text-(--n-accent)"),children:L}:{className:r(m[V],"text-(--n-accent)")})]})});

package/dist/components/overlay/Overlay.d.ts

@@ -87,4 +87,4 @@ export interface OverlayProps extends Omit<React.ComponentPropsWithoutRef<'div'>
  * held inside, the page behind going inert, and focus returning to wherever it
  * came from when the overlay closes.
  */
-export declare function Overlay({ open, defaultOpen, onOpenChange, tone, dismissible, modal, align, size, color, locale, label, className, style, children, ...props }: OverlayProps): React.JSX.Element;
+export declare function Overlay(rawProps: OverlayProps): React.JSX.Element;

package/dist/components/overlay/Overlay.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import{Dialog as r}from"@base-ui/react/dialog";import{overlayMessages as n,useMessages as t}from"../../internal/i18n.js";import{cx as l,surfaceSlots as i}from"../../internal/styles.js";const s={scrim:"bg-(--neba-scrim) [backdrop-filter:blur(2px)]",blur:"[background-color:color-mix(in_oklab,var(--neba-scrim)_55%,transparent)] [backdrop-filter:blur(14px)_saturate(1.4)]",solid:"bg-(--neba-surface)",clear:""},o={start:"items-start",center:"items-center",end:"items-end"},c={xs:"p-3",sm:"p-4",md:"p-6",lg:"p-8",xl:"p-10"},m=["[transition:opacity_var(--neba-duration)_var(--neba-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" ");export function Overlay({open:p,defaultOpen:d,onOpenChange:b,tone:u="scrim",dismissible:f=!1,modal:x=!0,align:y="center",size:g="md",color:j="primary",locale:h,label:k,className:O,style:_,children:v,...N}){const z=t(n,h);return e(r.Root,{open:p,defaultOpen:d,modal:x,disablePointerDismissal:!f,onOpenChange:(e,a)=>{f||e||"escape-key"!==a.reason?b?.(e):a.cancel()},children:a(r.Portal,{children:[e(r.Backdrop,{className:`neba-portal fixed inset-0 z-50 ${m} ${s[u]}`}),e(r.Viewport,{className:["neba-portal fixed inset-0 z-50 flex justify-center",o[y],c[g]].join(" "),children:e(r.Popup,{"aria-label":k??z.label,className:l("flex max-h-full max-w-full flex-col items-center justify-center","[outline:none]",m,O??""),style:{...i(j,0),..._},...N,children:v})})]})})}
+"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import{Dialog as l}from"@base-ui/react/dialog";import{overlayMessages as r,useMessages as s}from"../../internal/i18n.js";import{cx as n,popupFadeClasses as t,surfaceSlots as i}from"../../internal/styles.js";import{useStyleDefaults as o}from"../../internal/defaults.js";const c={scrim:"bg-(--neba-scrim) [backdrop-filter:blur(2px)]",blur:"[background-color:color-mix(in_oklab,var(--neba-scrim)_55%,transparent)] [backdrop-filter:blur(14px)_saturate(1.4)]",solid:"bg-(--neba-surface)",clear:""},m={start:"items-start",center:"items-center",end:"items-end"},p={xs:"p-3",sm:"p-4",md:"p-6",lg:"p-8",xl:"p-10"};export function Overlay(d){const{open:f,defaultOpen:b,onOpenChange:u,tone:x="scrim",dismissible:g=!1,modal:j=!0,align:h="center",size:y="md",color:k="primary",locale:O,label:z,className:N,style:P,children:_,...v}=o(d,["size","locale"]),w=s(r,O);return e(l.Root,{open:f,defaultOpen:b,modal:j,disablePointerDismissal:!g,onOpenChange:(e,a)=>{g||e||"escape-key"!==a.reason?u?.(e):a.cancel()},children:a(l.Portal,{children:[e(l.Backdrop,{className:`neba-portal fixed inset-0 z-50 ${t} ${c[x]}`}),e(l.Viewport,{className:["neba-portal fixed inset-0 z-50 flex justify-center",m[h],p[y]].join(" "),children:e(l.Popup,{"aria-label":z??w.label,className:n("flex max-h-full max-w-full flex-col items-center justify-center","[outline:none]",t,N??""),style:{...i(k,0),...P},...v,children:_})})]})})}

package/dist/components/page-layout/PageLayout.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as o}from"react/jsx-runtime";import*as l from"react";import{layoutMessages as n,useMessages as t}from"../../internal/i18n.js";import{PageLayoutContext as r,SidebarSideContext as s}from"../../internal/page-layout.js";import{observeResize as a}from"../../internal/observe.js";import{controlSlots as i,cx as u,hasContent as c,toLength as f}from"../../internal/styles.js";const d=["header","footer"];export const PageLayout=/*@__PURE__*/l.forwardRef(function({header:p,footer:h,sidebar:m,endSidebar:v,headerSpan:x="full",footerSpan:y="full",scroll:b="page",height:g="viewport",collapseBelow:w="md",sidebarOpen:S,defaultSidebarOpen:k=!1,onSidebarOpenChange:C,endSidebarOpen:P,defaultEndSidebarOpen:j=!1,onEndSidebarOpenChange:N,skipLink:O=!0,skipLabel:$,mainId:R="main",mainProps:z,locale:E,color:L="primary",className:B,style:H,children:M,..._},I){const T=t(n,E),[q,A]=l.useState(k),[D,F]=l.useState(j),G=l.useMemo(()=>({start:S??q,end:P??D}),[S,q,P,D]),J=l.useCallback((e,o)=>{if("start"===e)return void 0===S&&A(o),void C?.(o);void 0===P&&F(o),N?.(o)},[S,P,C,N]),K=l.useRef(null),Q=l.useCallback(e=>{K.current=e,"function"==typeof I?I(e):I&&(I.current=e)},[I]),U=l.useRef({header:null,footer:null}),V=l.useRef({header:null,footer:null}),W=l.useCallback(()=>{const e=K.current;if(e)for(const o of d){const l=U.current[o],n="header"===o?x:y;if(!l){e.style.setProperty(`--n-layout-${o}`,"0px"),e.style.setProperty(`--n-layout-${o}-inset`,"0px");continue}const t=getComputedStyle(l).position,r=`${l.offsetHeight}px`,s="sticky"===t||"fixed"===t;e.style.setProperty(`--n-layout-${o}`,s&&"full"===n?r:"0px"),e.style.setProperty(`--n-layout-${o}-inset`,"fixed"===t?r:"0px")}},[x,y]),X=l.useCallback(()=>{for(const e of d){V.current[e]?.();const o=U.current[e];V.current[e]=o?a(o,()=>W()):null}W()},[W]);l.useEffect(()=>{const e=V.current;return X(),()=>{for(const o of d)e[o]?.(),e[o]=null}},[X]);const Y=l.useCallback((e,o)=>{U.current[e]=o,X()},[X]),Z=l.useMemo(()=>({present:!0,register:Y,collapseBelow:w,open:G,setOpen:J,scroll:b,locale:E}),[Y,w,G,J,b,E]),ee="content"===b,oe=f("viewport"===g||"auto"===g?void 0:g),le=void 0!==oe?"":"auto"===g?ee?"h-full":"min-h-full":ee?"h-dvh":"min-h-dvh",ne=c(p)?p:null,te=c(h)?h:null;return e(r.Provider,{value:Z,children:o("div",{ref:Q,className:u("relative flex w-full flex-col",ee?"overflow-hidden":"",le,"full"===x?"[padding-top:var(--n-layout-header-inset,0px)]":"","full"===y?"[padding-bottom:var(--n-layout-footer-inset,0px)]":"",B),style:void 0===oe?H:{...ee?{height:oe}:{minHeight:oe},...H},..._,children:[O?e("a",{href:`#${R}`,className:u("absolute start-3 top-3 z-50 size-px overflow-hidden whitespace-nowrap","[clip-path:inset(50%)] focus:size-auto focus:overflow-visible focus:[clip-path:none]","focus:rounded-(--neba-radius-md) focus:bg-(--n-fill) focus:px-4 focus:py-2","focus:font-medium focus:text-(--n-on-solid) focus:no-underline","focus:[box-shadow:var(--neba-shadow-2),var(--neba-plate-solid)]","focus:[outline:2px_solid_var(--n-ring)] focus:outline-offset-2"),style:i(L,2,"solid"),children:$??T.skipToContent}):null,"full"===x?ne:null,o("div",{className:u("flex w-full flex-1",ee?"min-h-0":""),children:[c(m)?e(s.Provider,{value:"start",children:m}):null,o("div",{className:u("flex min-w-0 flex-1 flex-col",ee?"min-h-0":"","content"===x?"[padding-top:var(--n-layout-header-inset,0px)]":"","content"===y?"[padding-bottom:var(--n-layout-footer-inset,0px)]":""),children:["content"===x?ne:null,e("main",{...z,id:R,className:u("min-w-0 flex-1",ee?"min-h-0 overflow-y-auto":"",z?.className),children:M}),"content"===y?te:null]}),c(v)?e(s.Provider,{value:"end",children:v}):null]}),"full"===y?te:null]})})});
+"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as o from"react";import{layoutMessages as n,useMessages as t}from"../../internal/i18n.js";import{PageLayoutContext as r,SidebarSideContext as a}from"../../internal/page-layout.js";import{observeResize as s}from"../../internal/observe.js";import{controlSlots as i,cx as u,hasContent as f,toLength as c}from"../../internal/styles.js";import{useStyleDefaults as d}from"../../internal/defaults.js";const p=["header","footer"];export const PageLayout=/*@__PURE__*/o.forwardRef(function(m,h){const{header:v,footer:x,sidebar:y,endSidebar:b,headerSpan:g="full",footerSpan:w="full",scroll:S="page",height:k="viewport",collapseBelow:C="md",sidebarOpen:P,defaultSidebarOpen:j=!1,onSidebarOpenChange:N,endSidebarOpen:O,defaultEndSidebarOpen:$=!1,onEndSidebarOpenChange:R,skipLink:z=!0,skipLabel:E,mainId:L="main",mainProps:B,locale:H,color:M="primary",className:_,style:I,children:T,...q}=d(m,["locale"]),A=t(n,H),[D,F]=o.useState(j),[G,J]=o.useState($),K=o.useMemo(()=>({start:P??D,end:O??G}),[P,D,O,G]),Q=o.useCallback((e,l)=>{if("start"===e)return void 0===P&&F(l),void N?.(l);void 0===O&&J(l),R?.(l)},[P,O,N,R]),U=o.useRef(null),V=o.useCallback(e=>{U.current=e,"function"==typeof h?h(e):h&&(h.current=e)},[h]),W=o.useRef({header:null,footer:null}),X=o.useRef({header:null,footer:null}),Y=o.useCallback(()=>{const e=U.current;if(e)for(const l of p){const o=W.current[l],n="header"===l?g:w;if(!o){e.style.setProperty(`--n-layout-${l}`,"0px"),e.style.setProperty(`--n-layout-${l}-inset`,"0px");continue}const t=getComputedStyle(o).position,r=`${o.offsetHeight}px`,a="sticky"===t||"fixed"===t;e.style.setProperty(`--n-layout-${l}`,a&&"full"===n?r:"0px"),e.style.setProperty(`--n-layout-${l}-inset`,"fixed"===t?r:"0px")}},[g,w]),Z=o.useCallback(()=>{for(const e of p){X.current[e]?.();const l=W.current[e];X.current[e]=l?s(l,()=>Y()):null}Y()},[Y]);o.useEffect(()=>{const e=X.current;return Z(),()=>{for(const l of p)e[l]?.(),e[l]=null}},[Z]);const ee=o.useCallback((e,l)=>{W.current[e]=l,Z()},[Z]),le=o.useMemo(()=>({present:!0,register:ee,collapseBelow:C,open:K,setOpen:Q,scroll:S,locale:H}),[ee,C,K,Q,S,H]),oe="content"===S,ne=c("viewport"===k||"auto"===k?void 0:k),te=void 0!==ne?"":"auto"===k?oe?"h-full":"min-h-full":oe?"h-dvh":"min-h-dvh",re=f(v)?v:null,ae=f(x)?x:null;return e(r.Provider,{value:le,children:l("div",{ref:V,className:u("relative flex w-full flex-col",oe?"overflow-hidden":"",te,"full"===g?"[padding-top:var(--n-layout-header-inset,0px)]":"","full"===w?"[padding-bottom:var(--n-layout-footer-inset,0px)]":"",_),style:void 0===ne?I:{...oe?{height:ne}:{minHeight:ne},...I},...q,children:[z?e("a",{href:`#${L}`,className:u("absolute start-3 top-3 z-50 size-px overflow-hidden whitespace-nowrap","[clip-path:inset(50%)] focus:size-auto focus:overflow-visible focus:[clip-path:none]","focus:rounded-(--neba-radius-md) focus:bg-(--n-fill) focus:px-4 focus:py-2","focus:font-medium focus:text-(--n-on-solid) focus:no-underline","focus:[box-shadow:var(--neba-shadow-2),var(--neba-plate-solid)]","focus:[outline:2px_solid_var(--n-ring)] focus:outline-offset-2"),style:i(M,2,"solid"),children:E??A.skipToContent}):null,"full"===g?re:null,l("div",{className:u("flex w-full flex-1",oe?"min-h-0":""),children:[f(y)?e(a.Provider,{value:"start",children:y}):null,l("div",{className:u("flex min-w-0 flex-1 flex-col",oe?"min-h-0":"","content"===g?"[padding-top:var(--n-layout-header-inset,0px)]":"","content"===w?"[padding-bottom:var(--n-layout-footer-inset,0px)]":""),children:["content"===g?re:null,e("main",{...B,id:L,className:u("min-w-0 flex-1",oe?"min-h-0 overflow-y-auto":"",B?.className),children:T}),"content"===w?ae:null]}),f(b)?e(a.Provider,{value:"end",children:b}):null]}),"full"===w?ae:null]})})});

package/dist/components/pagination/Pagination.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{Button as n}from"../button/Button.js";import{fillMessage as r,paginationMessages as l,useMessages as i}from"../../internal/i18n.js";import{ChevronIcon as s}from"../../internal/icons.js";import{controlTextClasses as o,cx as m,gapClasses as c,srOnlyClasses as u}from"../../internal/styles.js";function d(e,t){return Array.from({length:Math.max(0,t-e+1)},(t,a)=>e+a)}function h(){return e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:e("path",{d:"m7.5 4.5 3.5 3.5-3.5 3.5M3.5 4.5 7 8l-3.5 3.5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})}const f={xs:"h-5.5 min-w-5.5",sm:"h-6.5 min-w-6.5",md:"h-8 min-w-8",lg:"h-10 min-w-10",xl:"h-12 min-w-12"};export const Pagination=/*@__PURE__*/a.forwardRef(function({variant:p="text",size:x="md",color:g="primary",density:b="compact",elevation:v=0,count:y,page:M,defaultPage:j=1,onPageChange:w,siblingCount:N=1,boundaryCount:L=1,showEdges:k=!1,showArrows:C=!0,disabled:K=!1,getPageHref:P,locale:S,label:z,pageLabel:$,previousLabel:A,nextLabel:B,firstLabel:D,lastLabel:E,className:H,children:I,...R},W){const q=i(l,S),F=$??(e=>r(q.page,{page:String(e)})),[G,J]=a.useState(j),O=Math.min(Math.max(M??G,1),Math.max(y,1));if(y<2)return null;const Q=function(e,t,a,n){const r=d(1,Math.min(n,e)),l=d(Math.max(e-n+1,n+1),e),i=Math.max(Math.min(t-a,e-n-2*a-1),n+2),s=Math.min(Math.max(t+a,n+2*a+2),l.length>0?l[0]-2:e-1);return[...r,...i>n+2?["start-ellipsis"]:n+1<e-n?[n+1]:[],...d(i,s),...s<e-n-1?["end-ellipsis"]:e-n>n?[e-n]:[],...l]}(y,O,N,L),T=O<=1,U=O>=y,V=(t,a,n)=>P&&!a?{render:e("a",{href:P(t),rel:n})}:null,X=(e,t)=>{e.metaKey||e.ctrlKey||e.shiftKey||e.altKey||P&&!w||(e.preventDefault(),(e=>{const t=Math.min(Math.max(e,1),y);t!==O&&(void 0===M&&J(t),w?.(t))})(t))},Y=(t,a,r,l,i,s,o)=>e("li",{className:"flex",children:e(n,{variant:p,size:x,color:g,density:b,elevation:v,disabled:K||l,"aria-label":a,startIcon:e("span",{className:`flex items-center ${i}`,children:s}),onClick:e=>X(e,r),...V(r,K||l,o)})},t);return t("nav",{ref:W,"aria-label":z??q.label,className:m("flex items-center",H??""),...R,children:[t("ul",{role:"list",className:`m-0 flex list-none items-center p-0 ${c[x]}`,children:[k?Y("first",D??q.first,1,T,"rotate-180 rtl:rotate-0",e(h,{})):null,C?Y("previous",A??q.previous,O-1,T,"rotate-90 rtl:-rotate-90",e(s,{}),"prev"):null,Q.map((t,a)=>e("li","number"==typeof t?{className:"flex",children:e(n,{variant:t===O?"solid":p,size:x,color:g,density:b,elevation:v,disabled:K,"aria-label":F(t),"aria-current":t===O?"page":void 0,className:"tabular-nums",onClick:e=>X(e,t),...V(t,K||t===O),children:t})}:{"aria-hidden":"true",className:["flex select-none items-center justify-center","text-(--neba-muted-fg)",o[x],f[x]].join(" "),children:"…"},`slot-${a}`)),C?Y("next",B??q.next,O+1,U,"-rotate-90 rtl:rotate-90",e(s,{}),"next"):null,k?Y("last",E??q.last,y,U,"rtl:rotate-180",e(h,{})):null]}),e("span",{className:u,"aria-live":"polite",children:r(q.status,{page:String(O),total:String(y)})}),I]})});
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{Button as n}from"../button/Button.js";import{fillMessage as r,paginationMessages as l,useMessages as i}from"../../internal/i18n.js";import{ChevronIcon as s}from"../../internal/icons.js";import{controlTextClasses as o,cx as m,gapClasses as c,srOnlyClasses as u}from"../../internal/styles.js";import{useStyleDefaults as d}from"../../internal/defaults.js";function h(e,t){return Array.from({length:Math.max(0,t-e+1)},(t,a)=>e+a)}function f(){return e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:e("path",{d:"m7.5 4.5 3.5 3.5-3.5 3.5M3.5 4.5 7 8l-3.5 3.5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})}const p={xs:"h-5.5 min-w-5.5",sm:"h-6.5 min-w-6.5",md:"h-8 min-w-8",lg:"h-10 min-w-10",xl:"h-12 min-w-12"};export const Pagination=/*@__PURE__*/a.forwardRef(function(x,g){const{variant:b="text",size:v="md",color:y="primary",density:M="compact",elevation:j=0,count:w,page:N,defaultPage:L=1,onPageChange:k,siblingCount:C=1,boundaryCount:z=1,showEdges:K=!1,showArrows:P=!0,disabled:S=!1,getPageHref:$,locale:A,label:B,pageLabel:D,previousLabel:E,nextLabel:H,firstLabel:I,lastLabel:R,className:W,children:q,...F}=d(x,["size","density","variant","locale"]),G=i(l,A),J=D??(e=>r(G.page,{page:String(e)})),[O,Q]=a.useState(L),T=Math.min(Math.max(N??O,1),Math.max(w,1));if(w<2)return null;const U=function(e,t,a,n){const r=h(1,Math.min(n,e)),l=h(Math.max(e-n+1,n+1),e),i=Math.max(Math.min(t-a,e-n-2*a-1),n+2),s=Math.min(Math.max(t+a,n+2*a+2),l.length>0?l[0]-2:e-1);return[...r,...i>n+2?["start-ellipsis"]:n+1<e-n?[n+1]:[],...h(i,s),...s<e-n-1?["end-ellipsis"]:e-n>n?[e-n]:[],...l]}(w,T,C,z),V=T<=1,X=T>=w,Y=(t,a,n)=>$&&!a?{render:e("a",{href:$(t),rel:n})}:null,Z=(e,t)=>{e.metaKey||e.ctrlKey||e.shiftKey||e.altKey||$&&!k||(e.preventDefault(),(e=>{const t=Math.min(Math.max(e,1),w);t!==T&&(void 0===N&&Q(t),k?.(t))})(t))},_=(t,a,r,l,i,s,o)=>e("li",{className:"flex",children:e(n,{variant:b,size:v,color:y,density:M,elevation:j,disabled:S||l,"aria-label":a,startIcon:e("span",{className:`flex items-center ${i}`,children:s}),onClick:e=>Z(e,r),...Y(r,S||l,o)})},t);return t("nav",{ref:g,"aria-label":B??G.label,className:m("flex items-center",W??""),...F,children:[t("ul",{role:"list",className:`m-0 flex list-none items-center p-0 ${c[v]}`,children:[K?_("first",I??G.first,1,V,"rotate-180 rtl:rotate-0",e(f,{})):null,P?_("previous",E??G.previous,T-1,V,"rotate-90 rtl:-rotate-90",e(s,{}),"prev"):null,U.map((t,a)=>e("li","number"==typeof t?{className:"flex",children:e(n,{variant:t===T?"solid":b,size:v,color:y,density:M,elevation:j,disabled:S,"aria-label":J(t),"aria-current":t===T?"page":void 0,className:"tabular-nums",onClick:e=>Z(e,t),...Y(t,S||t===T),children:t})}:{"aria-hidden":"true",className:["flex select-none items-center justify-center","text-(--neba-muted-fg)",o[v],p[v]].join(" "),children:"…"},`slot-${a}`)),P?_("next",H??G.next,T+1,X,"-rotate-90 rtl:rotate-90",e(s,{}),"next"):null,K?_("last",R??G.last,w,X,"rtl:rotate-180",e(f,{})):null]}),e("span",{className:u,"aria-live":"polite",children:r(G.status,{page:String(T),total:String(w)})}),q]})});

package/dist/components/panes/Panes.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as t from"react";import{beginPointerDrag as r}from"../../internal/drag.js";import{observeResize as i}from"../../internal/observe.js";import{cx as o,toPixels as a,transitionClasses as l}from"../../internal/styles.js";const s=/*@__PURE__*/t.createContext({basis:null}),c={xs:"basis-1",sm:"basis-1.5",md:"basis-2",lg:"basis-2.5",xl:"basis-3"},u={xs:4,sm:6,md:8,lg:10,xl:12};function f(e,n,t){if(null!=e)return"number"==typeof e?n*e/100:a(e,{percentOf:n,relativeTo:t})}export const Panes=/*@__PURE__*/t.forwardRef(function({orientation:a="horizontal",resizable:m=!0,color:d="primary",size:h="md",onResize:g,onResizeEnd:p,className:x,style:v,children:b,...w},z){const y=t.Children.toArray(b).filter(t.isValidElement),R=y.length,M=t.useRef(null),S=t.useCallback(e=>{M.current=e,"function"==typeof z?z(e):z&&(z.current=e)},[z]),j=t.useRef([]);j.current=y.map(e=>e.props);const[C,k]=t.useState(null),N=C&&C.length===R?C:null,$=t.useRef(null);$.current=N;const A="horizontal"===a,E=u[h]*Math.max(0,R-1);function D(e){const n=M.current,t=$.current;if(!m||!n||!t||void 0===t[e+1])return null;const r=n.getBoundingClientRect(),i=(A?r.width:r.height)-E;if(i<=0)return null;const o=j.current[e],a=j.current[e+1],l=t[e]*i,s=l+t[e+1]*i,c=Math.max(f(o?.minSize,i,n)??0,s-(f(a?.maxSize,i,n)??s)),u=Math.min(f(o?.maxSize,i,n)??s,s-(f(a?.minSize,i,n)??0));return u<c?null:{root:n,current:t,extent:i,start:l,pair:s,resize(n){const r=Math.min(u,Math.max(c,l+n)),o=[...t];return o[e]=r/i,o[e+1]=(s-r)/i,k(o),g?.(o.map(e=>100*e)),o}}}t.useEffect(()=>{const e=M.current;if(!e)return;const n=()=>{const n=e.getBoundingClientRect(),t=(A?n.width:n.height)-E;t<=0||k(n=>n&&n.length===R?n:function(e,n,t){const r=e.map(e=>f(e.defaultSize,n,t)),i=r.reduce((e,n)=>e+(n??0),0),o=r.filter(e=>void 0===e).length,a=o>0?Math.max(0,n-i)/o:0,l=r.map(e=>Math.max(0,e??a)),s=l.reduce((e,n)=>e+n,0);return s<=0?l.map(()=>1/Math.max(1,l.length)):l.map(e=>e/s)}(j.current,t,e))};return n(),i(e,n)},[R,A,E]);const P=t.useRef(null);t.useEffect(()=>()=>P.current?.(),[]);const I=o("group/handle relative z-1 flex shrink-0 grow-0 items-center justify-center",c[h],l,"[outline:none] focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-0",m?o(A?"cursor-col-resize":"cursor-row-resize","hover:bg-(--n-soft) data-[dragging]:bg-(--n-soft)"):"");return e("div",{ref:S,className:o("flex h-full w-full",A?"flex-row":"flex-col","min-h-0 min-w-0",x),style:{"--n-accent":`var(--neba-${d}-accent)`,"--n-soft":`var(--neba-${d}-soft)`,"--n-ring":`var(--neba-${d}-ring)`,...v},...w,children:y.map((i,a)=>n(t.Fragment,{children:[a>0?e("div",{role:"separator","aria-orientation":A?"vertical":"horizontal","aria-valuenow":N?Math.round(100*N[a-1]):void 0,"aria-valuemin":0,"aria-valuemax":100,"aria-disabled":!m||void 0,tabIndex:m?0:-1,className:I,onPointerDown:e=>{0===e.button&&function(e,n){const t=D(e);if(!t)return;const i=n.currentTarget,o=A?n.clientX:n.clientY,a=A&&"rtl"===getComputedStyle(t.root).direction?-1:1;let l=t.current;P.current=r({target:i,pointerId:n.pointerId,onMove:e=>{const n=A?e.clientX:e.clientY;l=t.resize((n-o)*a)},onEnd:()=>{P.current=null,p?.(l.map(e=>100*e))}})}(a-1,e)},onKeyDown:e=>{const n=A?"ArrowLeft":"ArrowUp",t=A?"ArrowRight":"ArrowDown";e.key!==n&&e.key!==t||(e.preventDefault(),function(e,n){const t=D(e);if(!t)return;const r=t.resize(n);p?.(r.map(e=>100*e))}(a-1,e.key===t?16:-16))},children:e("span",{"aria-hidden":"true",className:o("pointer-events-none bg-(--neba-border)",l,A?"h-full w-px":"h-px w-full",m?"group-hover/handle:bg-(--n-accent) group-focus-visible/handle:bg-(--n-accent) group-data-[dragging]/handle:bg-(--n-accent)":"")})}):null,e(s.Provider,{value:{basis:N?`calc((100% - ${E}px) * ${N[a].toFixed(6)})`:null},children:i})]},i.key??a))})});export const Pane=/*@__PURE__*/t.forwardRef(function({defaultSize:n,minSize:r,maxSize:i,className:a,style:l,children:c,...u},f){const{basis:m}=t.useContext(s);return e("div",{ref:f,className:o("relative min-h-0 min-w-0 overflow-auto",a),style:{flex:m?`0 0 ${m}`:"1 1 0%",...l},...u,children:c})});
+"use client";import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as t from"react";import{beginPointerDrag as r}from"../../internal/drag.js";import{observeResize as i}from"../../internal/observe.js";import{cx as o,toPixels as a,transitionClasses as l}from"../../internal/styles.js";import{useStyleDefaults as s}from"../../internal/defaults.js";const c=/*@__PURE__*/t.createContext({basis:null}),u={xs:"basis-1",sm:"basis-1.5",md:"basis-2",lg:"basis-2.5",xl:"basis-3"},f={xs:4,sm:6,md:8,lg:10,xl:12};function m(e,n,t){if(null!=e)return"number"==typeof e?n*e/100:a(e,{percentOf:n,relativeTo:t})}export const Panes=/*@__PURE__*/t.forwardRef(function(a,d){const{orientation:h="horizontal",resizable:p=!0,color:g="primary",size:x="md",onResize:v,onResizeEnd:b,className:z,style:w,children:y,...R}=s(a,["size"]),M=t.Children.toArray(y).filter(t.isValidElement),S=M.length,j=t.useRef(null),C=t.useCallback(e=>{j.current=e,"function"==typeof d?d(e):d&&(d.current=e)},[d]),k=t.useRef([]);k.current=M.map(e=>e.props);const[N,$]=t.useState(null),A=N&&N.length===S?N:null,E=t.useRef(null);E.current=A;const D="horizontal"===h,P=f[x]*Math.max(0,S-1);function I(e){const n=j.current,t=E.current;if(!p||!n||!t||void 0===t[e+1])return null;const r=n.getBoundingClientRect(),i=(D?r.width:r.height)-P;if(i<=0)return null;const o=k.current[e],a=k.current[e+1],l=t[e]*i,s=l+t[e+1]*i,c=Math.max(m(o?.minSize,i,n)??0,s-(m(a?.maxSize,i,n)??s)),u=Math.min(m(o?.maxSize,i,n)??s,s-(m(a?.minSize,i,n)??0));return u<c?null:{root:n,current:t,extent:i,start:l,pair:s,resize(n){const r=Math.min(u,Math.max(c,l+n)),o=[...t];return o[e]=r/i,o[e+1]=(s-r)/i,$(o),v?.(o.map(e=>100*e)),o}}}t.useEffect(()=>{const e=j.current;if(!e)return;const n=()=>{const n=e.getBoundingClientRect(),t=(D?n.width:n.height)-P;t<=0||$(n=>n&&n.length===S?n:function(e,n,t){const r=e.map(e=>m(e.defaultSize,n,t)),i=r.reduce((e,n)=>e+(n??0),0),o=r.filter(e=>void 0===e).length,a=o>0?Math.max(0,n-i)/o:0,l=r.map(e=>Math.max(0,e??a)),s=l.reduce((e,n)=>e+n,0);return s<=0?l.map(()=>1/Math.max(1,l.length)):l.map(e=>e/s)}(k.current,t,e))};return n(),i(e,n)},[S,D,P]);const B=t.useRef(null);t.useEffect(()=>()=>B.current?.(),[]);const F=o("group/handle relative z-1 flex shrink-0 grow-0 items-center justify-center",u[x],l,"[outline:none] focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-0",p?o(D?"cursor-col-resize":"cursor-row-resize","hover:bg-(--n-soft) data-[dragging]:bg-(--n-soft)"):"");return e("div",{ref:C,className:o("flex h-full w-full",D?"flex-row":"flex-col","min-h-0 min-w-0",z),style:{"--n-accent":`var(--neba-${g}-accent)`,"--n-soft":`var(--neba-${g}-soft)`,"--n-ring":`var(--neba-${g}-ring)`,...w},...R,children:M.map((i,a)=>n(t.Fragment,{children:[a>0?e("div",{role:"separator","aria-orientation":D?"vertical":"horizontal","aria-valuenow":A?Math.round(100*A[a-1]):void 0,"aria-valuemin":0,"aria-valuemax":100,"aria-disabled":!p||void 0,tabIndex:p?0:-1,className:F,onPointerDown:e=>{0===e.button&&function(e,n){const t=I(e);if(!t)return;const i=n.currentTarget,o=D?n.clientX:n.clientY,a=D&&"rtl"===getComputedStyle(t.root).direction?-1:1;let l=t.current;B.current=r({target:i,pointerId:n.pointerId,onMove:e=>{const n=D?e.clientX:e.clientY;l=t.resize((n-o)*a)},onEnd:()=>{B.current=null,b?.(l.map(e=>100*e))}})}(a-1,e)},onKeyDown:e=>{const n=D?"ArrowLeft":"ArrowUp",t=D?"ArrowRight":"ArrowDown";e.key!==n&&e.key!==t||(e.preventDefault(),function(e,n){const t=I(e);if(!t)return;const r=t.resize(n);b?.(r.map(e=>100*e))}(a-1,e.key===t?16:-16))},children:e("span",{"aria-hidden":"true",className:o("pointer-events-none bg-(--neba-border)",l,D?"h-full w-px":"h-px w-full",p?"group-hover/handle:bg-(--n-accent) group-focus-visible/handle:bg-(--n-accent) group-data-[dragging]/handle:bg-(--n-accent)":"")})}):null,e(c.Provider,{value:{basis:A?`calc((100% - ${P}px) * ${A[a].toFixed(6)})`:null},children:i})]},i.key??a))})});export const Pane=/*@__PURE__*/t.forwardRef(function({defaultSize:n,minSize:r,maxSize:i,className:a,style:l,children:s,...u},f){const{basis:m}=t.useContext(c);return e("div",{ref:f,className:o("relative min-h-0 min-w-0 overflow-auto",a),style:{flex:m?`0 0 ${m}`:"1 1 0%",...l},...u,children:s})});

package/dist/components/pie-chart/PieChart.d.ts

@@ -55,4 +55,4 @@ export interface PieChartProps extends ChartBaseProps {
  * A slice's colour follows the slice and not its size, so a chart that is
  * refiltered or resorted keeps every category the colour it had.
  */
-export declare function PieChart({ data, categories, shape, startAngle, center, valueLabels, height, format, locale, label, legend, tooltip, empty, size, variant, padded, className, ...box }: PieChartProps): React.JSX.Element;
+export declare function PieChart(rawProps: PieChartProps): React.JSX.Element;