neba 1.8.0 → 1.9.0

package/dist/components/hover-card/HoverCard.d.ts

@@ -0,0 +1,78 @@
+import * as React from 'react';
+import type { NebaAlign, NebaSide, NebaStyleProps } from '../../types.js';
+/**
+ * The same three axes a [Popover](./popover) takes, and for the same reasons:
+ * no `variant`, because a surface that had to be hovered has already asserted
+ * itself, and no `elevation`, because a card floating over the page is the
+ * whole idea and a prop that could sit it flat would undo it.
+ */
+export interface HoverCardProps extends Pick<NebaStyleProps, 'size' | 'color' | 'density'>, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'title' | 'children'> {
+    /**
+     * What the card hangs off. Exactly one element, which must accept a ref and
+     * spread props — every Neba component does.
+     *
+     * Usually a [TextLink](../display/text-link) or an
+     * [Avatar](../display/avatar): the two things a reader wants to know more
+     * about without leaving the sentence they are in.
+     */
+    trigger: React.ReactElement;
+    /** The heading, rendered as the element that names the card. */
+    title?: React.ReactNode;
+    /** A line under the title. */
+    description?: React.ReactNode;
+    /** The body. */
+    children?: React.ReactNode;
+    /**
+     * Which edge of the trigger it appears on. Flips when there is no room.
+     * @default 'bottom'
+     */
+    side?: NebaSide;
+    /** Where it sits along that edge. @default 'center' */
+    align?: NebaAlign;
+    /** Distance from the trigger, in pixels. @default 6 */
+    sideOffset?: number;
+    /** Shift along that edge, in pixels. @default 0 */
+    alignOffset?: number;
+    /**
+     * Draws the wedge pointing at the trigger. Off by default, exactly as on
+     * Popover: this surface is translucent over a blurred backdrop, and a wedge
+     * sticking out past the card's own box cannot carry that backdrop with it.
+     * @default false
+     */
+    arrow?: boolean;
+    /** Whether the card is open. Use with `onOpenChange` for a controlled one. */
+    open?: boolean;
+    /** Whether it starts open, for an uncontrolled one. */
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * How long the pointer has to rest on the trigger before the card opens, in
+     * milliseconds. The default is long enough that crossing a paragraph of links
+     * does not open four of them.
+     */
+    delay?: number;
+    /**
+     * How long the card stays after the pointer has left, in milliseconds. This
+     * is what makes the gap between the trigger and the card crossable.
+     */
+    closeDelay?: number;
+    /** A hard cap on the card's width, overriding the one `size` implies. */
+    width?: number | string;
+}
+/**
+ * A card that opens when the pointer rests on something, and holds a preview of
+ * what is on the other side of it.
+ *
+ * It sits between the library's other two popups, and the distance is short in
+ * both directions. A [Tooltip](../feedback/tooltip) is a label — one line, no
+ * interaction, and the pointer never reaches it. A [Popover](./popover) is a
+ * panel that was *asked for* by a press, so it can hold a form. This one is
+ * uninvited like a tooltip and reachable like a popover: the pointer can cross
+ * into it, and a link inside it can be followed.
+ *
+ * Because it is uninvited, it is never the only way to something. Whatever is in
+ * here has to exist on the page the trigger leads to as well — a keyboard
+ * without hover, a touchscreen with no pointer at all, and a screen reader all
+ * arrive by that route instead.
+ */
+export declare function HoverCard({ size, color, density, trigger, title, description, children, side, align, sideOffset, alignOffset, arrow, open, defaultOpen, onOpenChange, delay, closeDelay, width, className, style, ...props }: HoverCardProps): React.JSX.Element;

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

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

package/dist/components/hover-card/index.d.ts

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

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

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

package/dist/components/how-to-steps/HowToSteps.d.ts

@@ -34,6 +34,17 @@ export interface HowToStepsProps extends Omit<React.ComponentPropsWithoutRef<'di
     steps: HowToStep[];
     /** The guide's own heading, over both columns. */
     title?: React.ReactNode;
+    /**
+     * Which heading level `title` is written at, and the step's title one below
+     * it.
+     *
+     * A heading level is a claim about the *page*, not about the component: a
+     * guide under an `<h1>` is an `<h2>` and the same guide inside a section is an
+     * `<h4>`, and a component that decides for itself breaks the outline of every
+     * page it does not happen to suit.
+     * @default 3
+     */
+    headingLevel?: 2 | 3 | 4 | 5;
     /** Which step is showing. Pass it to drive the guide yourself. */
     step?: number;
     /** Where an uncontrolled guide starts. @default 0 */
@@ -139,29 +150,4 @@ export interface HowToStepsProps extends Omit<React.ComponentPropsWithoutRef<'di
     doneLabel?: string;
     restartLabel?: string;
 }
-/**
- * A guide the reader walks through: numbered steps down one side, one step's
- * instructions at a time beside them, and a way forward under those.
- *
- * It is [Timeline]'s interactive sibling, and the two are deliberately not one
- * component. A Timeline *reports* — this happened, then this did, and here is
- * where things have got to — and nothing in it is pressed. A HowToSteps *asks*:
- * the reader is meant to do the thing on the screen and then say they have,
- * which needs a current step, a way to change it, and an end.
- *
- * Two things about how it is built are load-bearing rather than incidental.
- *
- * **Every step's body is rendered into the same grid cell**, with the ones not
- * showing left in the document, `invisible` and `inert`. The panel is therefore
- * as tall as the tallest step at every moment, so moving between a one-line
- * step and a five-line one does not resize the card the guide sits in — which,
- * on a page the reader has already scrolled, moves everything under it. The
- * finished panel is in that cell too, for the same reason.
- *
- * **The list is a list of buttons and not a tablist.** A stepper looks like
- * tabs and is not one: the panels are ordered, the reader is expected to arrive
- * at them in that order, and `aria-current="step"` is the attribute that says
- * so. A tablist's roving focus would tell a screen reader that these are
- * interchangeable views of one thing.
- */
 export declare const HowToSteps: React.ForwardRefExoticComponent<HowToStepsProps & React.RefAttributes<HTMLDivElement>>;

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

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

package/dist/components/icon/Icon.js

@@ -1 +1 @@
-import{jsx as e}from"react/jsx-runtime";import*as t from"react";import{transitionProps as i}from"../../internal/animate.js";import{iconSizeClasses as n}from"../../internal/styles.js";const r={xs:"text-[0.875rem]",sm:"text-[1rem]",md:"text-[1.25rem]",lg:"text-[1.5rem]",xl:"text-[1.75rem]"};export const Icon=/*@__PURE__*/t.forwardRef(function({icon:t,size:s="md",color:l="inherit",label:a,transition:o,className:m,style:c,...f},x){const d=i(o),g=["inline-flex shrink-0 items-center justify-center align-middle",n[s],"[&>svg]:block [&>svg]:size-full [&>img]:block [&>img]:size-full",`leading-none ${r[s]}`,"inherit"===l?"":"text-(--n-accent)",d.className,m??""].filter(Boolean).join(" ");return e("span",{ref:x,className:g,style:"inherit"===l?{...d.style,...c}:{"--n-accent":`var(--neba-${l}-accent)`,...d.style,...c},role:a?"img":void 0,"aria-label":a,"aria-hidden":!a||void 0,...f,children:t})});
+"use client";import{jsx as e}from"react/jsx-runtime";import*as t from"react";import{transitionProps as i}from"../../internal/animate.js";import{cx as n,iconSizeClasses as r}from"../../internal/styles.js";const s={xs:"text-[0.875rem]",sm:"text-[1rem]",md:"text-[1.25rem]",lg:"text-[1.5rem]",xl:"text-[1.75rem]"};export const Icon=/*@__PURE__*/t.forwardRef(function({icon:t,size:l="md",color:a="inherit",label:m,transition:o,className:c,style:f,...x},d){const g=i(o),u=n("inline-flex shrink-0 items-center justify-center align-middle",r[l],"[&>svg]:block [&>svg]:size-full [&>img]:block [&>img]:size-full",`leading-none ${s[l]}`,"inherit"===a?"":"text-(--n-accent)",g.className,c??"");return e("span",{ref:d,className:u,style:"inherit"===a?{...g.style,...f}:{"--n-accent":`var(--neba-${a}-accent)`,...g.style,...f},role:m?"img":void 0,"aria-label":m,"aria-hidden":!m||void 0,...x,children:t})});

package/dist/components/icon-button/IconButton.js

@@ -1 +1 @@
-import{jsx as t}from"react/jsx-runtime";import*as r from"react";import{Button as o}from"../button/Button.js";export const IconButton=/*@__PURE__*/r.forwardRef(function({icon:r,label:e,style:a,...n},s){return t(o,{ref:s,"aria-label":e,startIcon:r,style:{borderRadius:"9999px",...a},...n})});
+"use client";import{jsx as t}from"react/jsx-runtime";import*as r from"react";import{Button as o}from"../button/Button.js";export const IconButton=/*@__PURE__*/r.forwardRef(function({icon:r,label:e,style:n,...a},s){return t(o,{ref:s,"aria-label":e,startIcon:r,style:{borderRadius:"9999px",...n},...a})});

package/dist/components/line-chart/LineChart.js

@@ -1 +1 @@
-import{jsx as e}from"react/jsx-runtime";import*as r from"react";import{CartesianChart as t}from"../../internal/chart-frame.js";import{LineSeries as n}from"../../internal/chart-line.js";export function LineChart({curve:a="linear",markers:o="auto",gradient:c=!1,connectNulls:i=!1,valueLabels:s="none",stacked:l=!1,...m}){const u=r.useId().replace(/:/g,"");return e(t,{...m,stacked:l,inset:!0,includeZero:!1,headroom:"none"===s?0:10,children:r=>e(n,{context:r,curve:a,filled:!1,stacked:l,markers:o,valueLabels:s,connectNulls:i,gradient:c,idPrefix:u})})}
+"use client";import{jsx as e}from"react/jsx-runtime";import*as r from"react";import{CartesianChart as t}from"../../internal/chart-frame.js";import{LineSeries as n}from"../../internal/chart-line.js";export function LineChart({curve:a="linear",markers:c="auto",gradient:i=!1,connectNulls:o=!1,valueLabels:s="none",stacked:l=!1,...m}){const u=r.useId().replace(/:/g,"");return e(t,{...m,stacked:l,inset:!0,includeZero:!1,headroom:"none"===s?0:10,children:r=>e(n,{context:r,curve:a,filled:!1,stacked:l,markers:c,valueLabels:s,connectNulls:o,gradient:i,idPrefix:u})})}

package/dist/components/list/List.js

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

package/dist/components/menu/Menu.d.ts

@@ -32,6 +32,11 @@ export interface MenuProps extends MenuSurfaceProps {
     sideOffset?: number;
     /**
      * Whether the page behind is taken away while the menu is open.
+     *
+     * Left undefined rather than defaulted here on purpose: Base UI's own default
+     * is the same `true`, and it warns when the prop is set on a menu that turns
+     * out to be nested — which is every menu on a [Menubar](./menubar) and every
+     * submenu. Not passing it is how the default stays a default.
      * @default true
      */
     modal?: boolean;
@@ -71,8 +76,15 @@ export interface MenuItemProps {
     onClick?: (event: React.MouseEvent<HTMLElement>) => void;
     /** Renders the row as a real `<a>`. A menu of links has to be links. */
     href?: string;
-    /** Where the link opens — `_blank` and the rest. Ignored without `href`. */
+    /**
+     * Where the link opens — `_blank` and the rest. Ignored without `href`.
+     *
+     * Anything other than this tab also gets `rel="noopener noreferrer"`, merged
+     * with whatever `rel` was asked for, exactly as on [TextLink].
+     */
     target?: string;
+    /** The link's `rel`. The two tokens a new tab needs are added to it. */
+    rel?: string;
     /** Content before the label — an icon, a swatch, a check. */
     startIcon?: React.ReactNode;
     /** Content after the label, before any `shortcut`. */
@@ -123,7 +135,7 @@ export interface MenuGroupProps {
     children?: React.ReactNode;
     className?: string;
 }
-export interface MenuCheckboxItemProps extends Omit<MenuItemProps, 'href' | 'target' | 'startIcon' | 'onClick'> {
+export interface MenuCheckboxItemProps extends Omit<MenuItemProps, 'href' | 'target' | 'rel' | 'startIcon' | 'onClick'> {
     checked?: boolean;
     defaultChecked?: boolean;
     onCheckedChange?: (checked: boolean) => void;
@@ -143,7 +155,7 @@ export interface MenuRadioGroupProps {
     children?: React.ReactNode;
     className?: string;
 }
-export interface MenuRadioItemProps extends Omit<MenuItemProps, 'href' | 'target' | 'startIcon' | 'onClick'> {
+export interface MenuRadioItemProps extends Omit<MenuItemProps, 'href' | 'target' | 'rel' | 'startIcon' | 'onClick'> {
     /** What this row sets the group to. */
     value: string | number;
     /** @default false */
@@ -158,7 +170,7 @@ export type MenuSeparatorProps = React.ComponentPropsWithoutRef<'div'>;
  * links that are not links cannot be opened in a new tab, cannot be copied, and
  * tells a screen reader the wrong thing about every one of them.
  */
-export declare function MenuItem({ onClick, href, target, startIcon, endIcon, shortcut, description, color, closeOnClick, disabled, label, children, className, style }: MenuItemProps): React.JSX.Element;
+export declare function MenuItem({ onClick, href, target, rel, startIcon, endIcon, shortcut, description, color, closeOnClick, disabled, label, children, className, style }: MenuItemProps): React.JSX.Element;
 /** A row that ticks. The tick lands in the same slot a `startIcon` would. */
 export declare function MenuCheckboxItem({ checked, defaultChecked, onCheckedChange, endIcon, shortcut, description, color, closeOnClick, disabled, label, children, className, style }: MenuCheckboxItemProps): React.JSX.Element;
 /** One choice out of a set. Wraps the rows that make up the set. */

package/dist/components/menu/Menu.js

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

package/dist/components/menubar/Menubar.d.ts

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import type { NebaOrientation, NebaStyleProps } from '../../types.js';
+export interface MenubarProps extends Pick<NebaStyleProps, 'size' | 'color' | 'density'>, Omit<React.ComponentPropsWithoutRef<'div'>, 'color'> {
+    /**
+     * Which way the bar runs. `vertical` is the shape a side rail of menus takes;
+     * the arrow keys follow it either way.
+     * @default 'horizontal'
+     */
+    orientation?: NebaOrientation;
+    /**
+     * Whether an open menu takes the page away. On — the default, and Base UI's —
+     * an open menu is what the pointer is talking to.
+     * @default true
+     */
+    modal?: boolean;
+    /** Whether the arrow keys wrap around at the ends of the bar. @default true */
+    loopFocus?: boolean;
+    /** Disables every menu on the bar at once. */
+    disabled?: boolean;
+    /** The menus. */
+    children?: React.ReactNode;
+}
+export interface MenubarMenuProps {
+    /** The word on the bar. */
+    label: React.ReactNode;
+    /** Content before the label. Sized in `em`, so it tracks it. */
+    startIcon?: React.ReactNode;
+    /** Unavailable. The word stays on the bar and opens nothing. */
+    disabled?: boolean;
+    /** The rows, written exactly as they are inside a [Menu](./menu). */
+    children?: React.ReactNode;
+}
+/**
+ * One menu on the bar: the word, and the rows behind it.
+ *
+ * It has no `size`, `color` or `density` of its own — all three belong to the
+ * bar, which is the only place they can be set once and hold for every menu on
+ * it. The rows inside are the same `MenuItem`, `MenuSeparator`, `MenuGroup` and
+ * `MenuSubmenu` a [Menu](./menu) takes, because it is the same menu.
+ */
+export declare function MenubarMenu({ label, startIcon, disabled, children }: MenubarMenuProps): React.JSX.Element;
+/**
+ * The strip of words at the top of an application — File, Edit, View — each of
+ * which opens a menu.
+ *
+ * What makes it a bar rather than a row of separate menus is what happens once
+ * one is open: moving along the strip walks through the others instead of
+ * closing the one you left, and the arrow keys move between the menus as well as
+ * inside them. Base UI owns all of that, along with the `menubar` role.
+ *
+ * It draws no surface of its own. A menu bar sits *on* something — a
+ * [Toolbar](../surfaces/toolbar), a [WindowPane](../surfaces/window-pane)'s
+ * title bar, a [Header](../layout/header) — and a sheet under a strip that is
+ * already on a sheet is two sheets.
+ */
+export declare const Menubar: React.ForwardRefExoticComponent<MenubarProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/menubar/Menubar.js

@@ -0,0 +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})})});

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

@@ -0,0 +1,2 @@
+export { Menubar, MenubarMenu } from './Menubar.js';
+export type { MenubarMenuProps, MenubarProps } from './Menubar.js';

package/dist/components/menubar/index.js

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

package/dist/components/meter/Meter.d.ts

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import type { NebaColor, NebaSize, NebaThreshold } from '../../types.js';
+export interface MeterProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'children'> {
+    /**
+     * How much there is. Required, and that is the whole difference from a
+     * [ProgressLinear](./progress-linear): a meter reports a quantity that is
+     * already known, so there is no indeterminate case to have a default for.
+     */
+    value: number;
+    /** @default 0 */
+    min?: number;
+    /** @default 100 */
+    max?: number;
+    /** A name for what is being measured. Read out with the value. */
+    label?: React.ReactNode;
+    /**
+     * Shows the value as text beside the bar. A percentage of the range unless
+     * `format` says otherwise.
+     * @default false
+     */
+    showValue?: boolean;
+    /**
+     * How to write the value — `Intl.NumberFormat` options, so bytes, currencies
+     * and plain counts all work. A meter usually has real units, which is when
+     * this matters more than it does on a progress bar.
+     */
+    format?: Intl.NumberFormatOptions;
+    /**
+     * Where the bar changes colour, smallest `from` first. The family of the last
+     * threshold the value has reached wins; below all of them `color` stands.
+     */
+    thresholds?: readonly NebaThreshold[];
+    /** Thickness of the groove. Nothing else on a bar has a size. @default 'md' */
+    size?: NebaSize;
+    /** The family the bar carries before any threshold is reached. @default 'primary' */
+    color?: NebaColor;
+}
+/**
+ * How much of something there is, on a scale that is known in advance — disk
+ * used, seats taken, quota spent, a password's strength.
+ *
+ * It looks exactly like a [ProgressLinear](./progress-linear) and is not one.
+ * A progress bar is about *time*: something is happening and this is how far it
+ * has got, so it may have no value at all and it is expected to move on its own.
+ * A meter is about *quantity*: the number is already known, it does not move
+ * unless the thing it measures does, and it is meaningful to say the reading is
+ * bad — which is what `thresholds` is for.
+ *
+ * Base UI's Meter owns the semantics: `role="meter"`, the value and range
+ * attributes, and formatting the number for `aria-valuetext`.
+ */
+export declare const Meter: React.ForwardRefExoticComponent<MeterProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/meter/Meter.js

@@ -0,0 +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)]"})})]})});

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

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

package/dist/components/meter/index.js

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

package/dist/components/mockup/Mockup.js

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