neba 1.17.1 → 1.18.0

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

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

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

@@ -143,6 +143,23 @@ export interface NebaImageProtection {
 }
 /** Where a picture is in its own life. */
 type Phase = 'loading' | 'loaded' | 'failed';
+/**
+ * The one request for the preview's chunk, shared by everything that asks.
+ *
+ * Asked for when a pointer arrives over a picture, when the focus reaches one
+ * or when a finger lands on one, so the download is under way before the press
+ * that opens it; and by `React.lazy` at that press, which is handed the same
+ * promise and waits only for what is left of it. A request that fails is
+ * forgotten, so the next one tries again rather than failing for good.
+ *
+ * An object rather than a function so a test can spy on it. Exported for that,
+ * and deliberately left out of the barrel.
+ */
+export declare const previewChunk: {
+    load(): Promise<{
+        default: typeof import("../dialog/Dialog.js").Dialog;
+    }>;
+};
 export interface ImageProps extends Omit<React.ComponentPropsWithoutRef<'img'>, 'children'> {
     /** Required, and required to be right. See the note on the component. */
     alt: string;
@@ -214,6 +231,11 @@ export interface ImageProps extends Omit<React.ComponentPropsWithoutRef<'img'>,
      *
      * Like the Skeleton, a stand-in fills the box, so it needs one to fill: a
      * `ratio`, or `width` and `height`.
+     *
+     * On a page rendered on a server, the stand-in is drawn under the picture
+     * rather than over it and the picture is never faded in, so the `<img>` shows
+     * as soon as the browser has the file: before hydration, and with JavaScript
+     * off. A picture first mounted in the browser fades in over its stand-in.
      */
     placeholder?: React.ReactNode | false | NebaImagePlaceholderOptions;
     /**
@@ -240,11 +262,9 @@ export interface ImageProps extends Omit<React.ComponentPropsWithoutRef<'img'>,
      * `decoding`, `fetchPriority`. An attribute written out wins over what this
      * implies.
      *
-     * It also draws the picture from the first paint: no fade, and no Skeleton
-     * over it. A server-rendered page shows the `<img>` as soon as the browser
-     * has the file, rather than waiting for hydration to lift a cover and start a
-     * fade, which is exactly what Largest Contentful Paint would otherwise wait
-     * on. A `placeholder` picture still stands beneath it while it arrives.
+     * It also draws the picture with no fade and no Skeleton, even where the
+     * Image is first mounted in the browser rather than rendered on a server. A
+     * `placeholder` picture still stands beneath it while it arrives.
      * @default false
      */
     priority?: boolean;
@@ -254,6 +274,10 @@ export interface ImageProps extends Omit<React.ComponentPropsWithoutRef<'img'>,
      * 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.
+     *
+     * The Dialog is fetched when a pointer, the focus or a finger first reaches
+     * the picture, and mounted by the press that opens it, so neither a server
+     * render nor the first render in the browser waits on it.
      * @default false
      */
     preview?: boolean;
@@ -341,7 +365,8 @@ export interface ImageProps extends Omit<React.ComponentPropsWithoutRef<'img'>,
  *
  * 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.
+ * `preview` is a chunk that is not fetched at all until a reader reaches for a
+ * picture.
  */
 export declare const Image: React.ForwardRefExoticComponent<ImageProps & React.RefAttributes<HTMLImageElement>>;
 export {};

package/dist/components/image/Image.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import*as o from"react";import{AspectRatio as r}from"../aspect-ratio/AspectRatio.js";import{Skeleton as i}from"../skeleton/Skeleton.js";import{useStyleDefaults as a}from"../../internal/defaults.js";import{imageMessages as l,useMessages as s}from"../../internal/i18n.js";import{cx as c,metaTextValues as u,radiusClasses as d,toLength as f,transitionClasses as h}from"../../internal/styles.js";const p={cover:"object-cover",contain:"object-contain",fill:"object-fill",none:"object-none","scale-down":"object-scale-down"},b={none:"none",grayscale:"grayscale(1)",sepia:"sepia(0.72)",invert:"invert(1)",saturate:"saturate(1.5)",mute:"saturate(0.45)",contrast:"contrast(1.25)"},m={"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"},g=Number.parseInt(o.version,10)>=19?"fetchPriority":"fetchpriority",v=o.lazy(()=>import("../dialog/Dialog.js").then(e=>({default:e.Dialog})));function y(e){const t="number"==typeof e?e:""===e.trim()?NaN:Number(e);return Number.isFinite(t)?`${t}px`:String(e)}const x=/^(-?\d*\.?\d+)%$/;function w(e,t,n){const o=function(e){let t=.5,n=.5;for(const[o,r]of e.trim().toLowerCase().split(/\s+/).entries()){const e=x.exec(r);if("left"===r||"right"===r)t="left"===r?0:1;else if("top"===r||"bottom"===r)n="top"===r?0:1;else if(null!==e)0===o?t=Number(e[1])/100:n=Number(e[1])/100;else if("center"!==r)return null}return[t,n]}(e);if(null===o)return e;let[r,i]=o;"horizontal"!==n&&"both"!==n||(r=1-r),"vertical"!==n&&"both"!==n||(i=1-i);for(let e=0;e<t;e+=1)[r,i]=[i,1-r];const a=e=>Math.round(1e4*e)/100+"%";return`${a(r)} ${a(i)}`}function $(e,t,n){const o=e=>0===n?e:`calc(${e} + ${2*n}px)`;return t?{...e,width:o("100cqh"),height:o("100cqw")}:{...e,position:"absolute",top:-n+"px",left:-n+"px",width:o("100%"),height:o("100%"),maxWidth:"none"}}function k(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 N(e){const t=t=>`linear-gradient(to ${t}, transparent, #000 ${e}, #000 calc(100% - ${e}), transparent)`,n=`${t("right")}, ${t("bottom")}`;return{maskImage:n,maskComposite:"intersect",WebkitMaskImage:n,WebkitMaskComposite:"source-in"}}function TiledMark({text:n,color:r,opacity:i,rotate:a,fontSize:l,slot:s}){const u=`neba-mark-${o.useId().replace(/[^\w-]/g,"")}`,d=function(e){let t=0;for(const n of e)t+=/[ᄀ-ᇿ⺀-꓏가-퟿豈-﫿︰-﹏]/.test(n)?1:.6;return{width:Math.max(16,Math.round(16*(t+2.4))),height:52}}(n);return t("svg",{"aria-hidden":"true",className:c("pointer-events-none absolute select-none",s),style:{top:"-40%",left:"-40%",width:"180%",height:"180%",opacity:i,fontSize:l,transform:`rotate(${a}deg)`},children:[e("defs",{children:e("pattern",{id:u,patternUnits:"userSpaceOnUse",width:d.width/16+"em",height:d.height/16+"em",children:e("text",{x:"0",y:"2em",style:{fill:r,fontFamily:"system-ui, sans-serif",stroke:"rgba(0, 0, 0, 0.28)",strokeWidth:"0.0375em",paintOrder:"stroke"},children:n})})}),e("rect",{width:"100%",height:"100%",fill:`url(#${u})`})]})}export const Image=/*@__PURE__*/o.forwardRef(function Image(x,S){const{alt:z,ratio:R="auto",width:C,height:M,fit:_="cover",position:W,letterbox:L="none",rounded:O=!1,placeholder:P,fallback:D,onLoadingStatusChange:T,preview:E=!1,priority:F=!1,filter:I="none",rotate:U=0,flip:q="none",frame:H,watermark:B,protect:A=!1,locale:V,unavailableLabel:G,className:J,classNames:K,style:Q,src:X,onLoad:Y,onError:Z,onContextMenu:ee,onDragStart:te,draggable:ne,...oe}=a(x,["locale"]),re=s(l,V),ie=!1!==P&&function(e){return"object"==typeof e&&null!==e&&!o.isValidElement(e)&&"src"in e}(P)?P:null,ae=function(e){const[t,n]=o.useState(null);return o.useEffect(()=>{if("undefined"==typeof Blob||!(e instanceof Blob))return;const t=URL.createObjectURL(e);return n({blob:e,url:t}),()=>URL.revokeObjectURL(t)},[e]),"string"==typeof e?e:null!==t&&t.blob===e?t.url:void 0}(ie?.src),[le,se]=o.useState("loading"),[ce,ue]=o.useState(!1),[de,fe]=o.useState(null),he=o.useRef(null),pe=o.useRef(T);o.useEffect(()=>{pe.current=T});const be=o.useCallback(e=>{he.current=e,"function"==typeof S?S(e):S&&(S.current=e)},[S]),me=oe.srcSet;o.useEffect(()=>{const e=he.current,t=(X||me)&&e?.complete?e.naturalWidth>0?"loaded":"failed":null;se(t??"loading"),fe("loaded"===t&&e?{width:e.naturalWidth,height:e.naturalHeight}:null),pe.current?.(t??"loading")},[X,me]);const ge=(e,t)=>{se(e),"loaded"===e&&fe({width:t.naturalWidth,height:t.naturalHeight}),T?.(e)},ve=!1===O?"":d[!0===O?"md":O],ye=I in b?b[I]:I,xe=!0===A?{}:!1===A?null:A,we=null!==xe&&!1!==xe.contextMenu,$e=null!==xe&&!1!==xe.drag,ke=null!==xe&&!1!==xe.select,Ne=e=>e.preventDefault(),je=function(e){return Number.isFinite(e)?(Math.round(e/90)%4+4)%4:0}(U),Se=je%2==1,ze=function(e,t){const n=e%2==1,o="horizontal"===t||"both"===t,r="vertical"===t||"both"===t,i=n?r:o,a=n?o:r;return{scale:i||a?`${i?-1:1} ${a?-1:1}`:void 0,rotate:0===e?void 0:90*e+"deg",...n?{position:"absolute",top:"50%",left:"50%",width:"100cqh",height:"100cqw",maxWidth:"none",translate:"-50% -50%"}:null}}(je,q),Re=void 0===W?void 0:w(W,je,q),Ce="blur"===L&&"cover"!==_&&"fill"!==_,Me="none"!==L&&"blur"!==L?L:void 0,_e=xe?{onContextMenu:we?Ne:void 0,onDragStart:$e?Ne:void 0,draggable:!$e&&void 0,className:ke?"select-none":"",style:ke?{WebkitTouchCallout:"none"}:void 0}:null,We=e("img",{ref:be,src:X,alt:z,width:C,height:M,className:c("block size-full",p[_],ve,"[transition:opacity_var(--neba-duration-fill)_var(--neba-ease),filter_var(--neba-duration-fill)_var(--neba-ease),transform_var(--neba-duration-fill)_var(--neba-ease)]",F||"loaded"===le?"opacity-100":"opacity-0",Ce||null!==ie?"relative":"",_e?.className,K?.image),style:{filter:"none"===ye?void 0:ye,objectPosition:Re,...ze,..._e?.style},onLoad:e=>{ge("loaded",e.currentTarget),Y?.(e)},onError:e=>{ge("failed",e.currentTarget),Z?.(e)},onContextMenu:e=>{we&&Ne(e),ee?.(e)},onDragStart:e=>{$e&&Ne(e),te?.(e)},draggable:!$e&&ne,...F?{loading:"eager",[g]:"high"}:null,...oe}),Le=Ce?e("img",{src:X,srcSet:oe.srcSet,sizes:oe.sizes,loading:oe.loading,decoding:oe.decoding,crossOrigin:oe.crossOrigin,referrerPolicy:oe.referrerPolicy,alt:"","aria-hidden":"true",draggable:!1,className:c("pointer-events-none block object-cover select-none","[transition:opacity_var(--neba-duration-fill)_var(--neba-ease)]","loaded"===le?"opacity-100":"opacity-0"),style:{...$(ze,Se,48),objectPosition:Re,filter:("none"===ye?"":`${ye} `)+"blur(24px)"}}):null,Oe=null!==ie&&ie.blur?!0===ie.blur?20:ie.blur:0,Pe=null===ie||"failed"===le||void 0===ae?null:e("img",{src:ae,alt:"","aria-hidden":"true",draggable:!1,className:c("pointer-events-none block select-none",p[_],"loaded"===le?"opacity-0 [transition:opacity_0ms_linear_var(--neba-duration-fill)]":"opacity-100",K?.placeholder),style:{...$(ze,Se,2*Oe),objectPosition:Re,filter:0===Oe?void 0:`blur(${Oe}px)`}}),De="failed"===le?e("span",{className:c("absolute inset-0 flex items-center justify-center","bg-(--neba-disabled-bg) text-(--neba-muted-fg)",ve,K?.fallback),children:D??e("span",{className:"px-2 text-center text-sm","aria-hidden":!!z||void 0,children:z||G||re.unavailable})}):"loading"!==le||!1===P||null!==ie||F?null:e("span",{className:c("absolute inset-0",K?.placeholder),children:P??e(i,{render:e("span",{}),shape:"rect",className:c("block size-full",ve)})}),Te=void 0===B?null:function(t,n){const o="string"==typeof t?{content:t}:t,{content:r,position:i="bottom-end",repeat:a=!1,opacity:l=.35,size:s="xs",color:d="#ffffff"}=o,h="string"==typeof s&&s in u?u[s]:f(s)??u.xs,p=o.rotate??(a&&"string"==typeof r?-24:0);if(a&&"string"==typeof r)return e(TiledMark,{text:r,color:d,opacity:l,rotate:p,fontSize:h,slot:n});return e("span",{"aria-hidden":"true",className:c("pointer-events-none absolute inset-0 flex select-none p-2",m[i],n),children:e("span",{style:{color:d,opacity:l,fontSize:h,lineHeight:1.2,textShadow:"0 1px 2px rgba(0, 0, 0, 0.45)",transform:p?`rotate(${p}deg)`:void 0},children:r})})}(B,K?.watermark),Ee=t("span",{className:"relative block size-full",style:Se||void 0!==Me?{containerType:Se?"size":void 0,background:Me}:void 0,children:[Le,Pe,We,De,Te]}),Fe=function(e,t){const n="number"==typeof e?e:Number(e),o="number"==typeof t?t:Number(t);return Number.isFinite(n)&&Number.isFinite(o)&&n>0&&o>0?{width:n,height:o}:null}(C,M),Ie="auto"===R&&null!==Fe?Fe.width/Fe.height:null,Ue=null===Ie?R:Se?1/Ie:Ie,qe=void 0===M&&void 0!==C?y(C):void 0,He=void 0===C&&void 0!==M?y(M):void 0,Be=void 0!==qe?{width:qe,maxWidth:"100%"}:void 0!==He?{height:He,..."auto"===Ue?null:{width:"auto",maxWidth:"100%"}}:null,Ae=void 0!==qe||void 0!==He&&"auto"!==Ue,Ve="auto"===Ue&&Se&&null!==de&&void 0===He?de.height/de.width:null,Ge=void 0===H?null:function(e,t){const n=!0===t?"md":t;return{shape:"rounded",corner:!1===n?"md":n,..."string"==typeof e?{shape:e}:e}}(H,O),Je=null===Ge?"0px":function(e){return"string"==typeof e&&e in d?`var(--neba-radius-${e})`:f(e)??"0px"}(Ge.corner??"md"),Ke=null===Ge?void 0:f(Ge.mat),Qe=null===Ge?void 0:f(Ge.feather),Xe={...Be,...null===Ge?null:k(Ge.shape,Je),...void 0===Qe?null:N(Qe),...null!==Ge||E?null:Q},Ye="auto"===Ue?e("span",{className:c("relative block overflow-hidden",null===Ge?ve:"",null!==Ge||E?"":J),style:null===Ve?Xe:{aspectRatio:Ve,...Xe},children:Ee}):e(r,{render:e("span",{}),ratio:Ue,className:c("block overflow-hidden",null===Ge?ve:"",null!==Ge||E?"":J),style:Xe,children:Ee}),Ze=null===Ge?void 0:function(e){if(void 0===e.border||!1===e.border)return;const t=!0===e.border?"1px":f(e.border);return`inset 0 0 0 ${t} ${e.borderColor??"var(--neba-line)"}`}(Ge),et=void 0===Ke?Je:`calc(${Je} + ${Ke})`,tt=null===Ge?Ye:t("span",{className:c("relative block",K?.frame,E?"":J),style:{...k(Ge.shape,et),padding:Ke,background:Ge.background??(void 0===Ke?void 0:"var(--neba-surface)"),boxShadow:Ge.elevation?`var(--neba-shadow-${Ge.elevation})`:void 0,width:Ae?"fit-content":void 0,maxWidth:Ae?"100%":void 0,...E?null:Q},children:[Ye,void 0===Ze?null:e("span",{"aria-hidden":"true",className:"pointer-events-none absolute inset-0",style:{...k(Ge.shape,et),boxShadow:Ze}})]});return E?t(n,{children:[e("button",{type:"button","aria-label":z||re.preview,"aria-haspopup":"dialog",className:c("block cursor-zoom-in",h,Ae?"[:where(&)]:w-fit [:where(&)]:max-w-full":"[:where(&)]:w-full","focus-visible:[outline:2px_solid_var(--n-ring,var(--neba-primary-ring))] focus-visible:[outline-offset:2px]",ve,J),style:Q,onClick:()=>ue(!0),children:tt}),e(o.Suspense,{fallback:null,children:e(v,{open:ce,onOpenChange:ue,size:"xl",title:z||re.preview,children:t("span",{className:c("relative mx-auto block",Se?"":"w-fit"),style:Se?j(de??Fe):void 0,children:[e("img",{src:X,srcSet:oe.srcSet,crossOrigin:oe.crossOrigin,referrerPolicy:oe.referrerPolicy,alt:z,className:c(Se?"block object-contain":"mx-auto block max-h-[70vh] w-auto max-w-full",_e?.className),style:{filter:"none"===ye?void 0:ye,...ze,..._e?.style},onContextMenu:_e?.onContextMenu,onDragStart:_e?.onDragStart,draggable:_e?.draggable}),Te]})})})]}):tt});function j(e){if(null===e)return{aspectRatio:"1",width:"min(100%, 70vh)",containerType:"size"};const t=e.height/e.width;return{aspectRatio:`${e.height} / ${e.width}`,width:`min(100%, ${e.height}px, calc(70vh * ${t}))`,containerType:"size"}}
+"use client";import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import*as o from"react";import{AspectRatio as r}from"../aspect-ratio/AspectRatio.js";import{Skeleton as i}from"../skeleton/Skeleton.js";import{useStyleDefaults as a}from"../../internal/defaults.js";import{imageMessages as l,useMessages as s}from"../../internal/i18n.js";import{useHydrated as c}from"../../internal/media.js";import{cx as u,metaTextValues as d,radiusClasses as f,toLength as h,transitionClasses as p}from"../../internal/styles.js";const b={cover:"object-cover",contain:"object-contain",fill:"object-fill",none:"object-none","scale-down":"object-scale-down"},m={none:"none",grayscale:"grayscale(1)",sepia:"sepia(0.72)",invert:"invert(1)",saturate:"saturate(1.5)",mute:"saturate(0.45)",contrast:"contrast(1.25)"},g={"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"},v=Number.parseInt(o.version,10)>=19?"fetchPriority":"fetchpriority";let y;export const previewChunk={load:()=>(y??=import("../dialog/Dialog.js").then(e=>({default:e.Dialog})).catch(e=>{throw y=void 0,e}),y)};const x=o.lazy(()=>previewChunk.load());function w(e){const t="number"==typeof e?e:""===e.trim()?NaN:Number(e);return Number.isFinite(t)?`${t}px`:String(e)}const k=/^(-?\d*\.?\d+)%$/;function $(e,t,n){const o=function(e){let t=.5,n=.5;for(const[o,r]of e.trim().toLowerCase().split(/\s+/).entries()){const e=k.exec(r);if("left"===r||"right"===r)t="left"===r?0:1;else if("top"===r||"bottom"===r)n="top"===r?0:1;else if(null!==e)0===o?t=Number(e[1])/100:n=Number(e[1])/100;else if("center"!==r)return null}return[t,n]}(e);if(null===o)return e;let[r,i]=o;"horizontal"!==n&&"both"!==n||(r=1-r),"vertical"!==n&&"both"!==n||(i=1-i);for(let e=0;e<t;e+=1)[r,i]=[i,1-r];const a=e=>Math.round(1e4*e)/100+"%";return`${a(r)} ${a(i)}`}function N(e,t,n){const o=e=>0===n?e:`calc(${e} + ${2*n}px)`;return t?{...e,width:o("100cqh"),height:o("100cqw")}:{...e,position:"absolute",top:-n+"px",left:-n+"px",width:o("100%"),height:o("100%"),maxWidth:"none"}}function j(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 S(e){const t=t=>`linear-gradient(to ${t}, transparent, #000 ${e}, #000 calc(100% - ${e}), transparent)`,n=`${t("right")}, ${t("bottom")}`;return{maskImage:n,maskComposite:"intersect",WebkitMaskImage:n,WebkitMaskComposite:"source-in"}}function TiledMark({text:n,color:r,opacity:i,rotate:a,fontSize:l,slot:s}){const c=`neba-mark-${o.useId().replace(/[^\w-]/g,"")}`,d=function(e){let t=0;for(const n of e)t+=/[ᄀ-ᇿ⺀-꓏가-퟿豈-﫿︰-﹏]/.test(n)?1:.6;return{width:Math.max(16,Math.round(16*(t+2.4))),height:52}}(n);return t("svg",{"aria-hidden":"true",className:u("pointer-events-none absolute select-none",s),style:{top:"-40%",left:"-40%",width:"180%",height:"180%",opacity:i,fontSize:l,transform:`rotate(${a}deg)`},children:[e("defs",{children:e("pattern",{id:c,patternUnits:"userSpaceOnUse",width:d.width/16+"em",height:d.height/16+"em",children:e("text",{x:"0",y:"2em",style:{fill:r,fontFamily:"system-ui, sans-serif",stroke:"rgba(0, 0, 0, 0.28)",strokeWidth:"0.0375em",paintOrder:"stroke"},children:n})})}),e("rect",{width:"100%",height:"100%",fill:`url(#${c})`})]})}export const Image=/*@__PURE__*/o.forwardRef(function Image(y,k){const{alt:C,ratio:R="auto",width:M,height:_,fit:W="cover",position:P,letterbox:L="none",rounded:O=!1,placeholder:T,fallback:D,onLoadingStatusChange:E,preview:F=!1,priority:I=!1,filter:U="none",rotate:q=0,flip:H="none",frame:B,watermark:A,protect:V=!1,locale:G,unavailableLabel:J,className:K,classNames:Q,style:X,src:Y,srcSet:Z,sizes:ee,loading:te,decoding:ne,fetchPriority:oe,onLoad:re,onError:ie,onContextMenu:ae,onDragStart:le,draggable:se,...ce}=a(y,["locale"]),ue=s(l,G),de=!1!==T&&function(e){return"object"==typeof e&&null!==e&&!o.isValidElement(e)&&"src"in e}(T)?T:null,fe=function(e){const[t,n]=o.useState(null);return o.useEffect(()=>{if("undefined"==typeof Blob||!(e instanceof Blob))return;const t=URL.createObjectURL(e);return n({blob:e,url:t}),()=>URL.revokeObjectURL(t)},[e]),"string"==typeof e?e:null!==t&&t.blob===e?t.url:void 0}(de?.src),[he,pe]=o.useState("loading"),[be,me]=o.useState(!1),[ge,ve]=o.useState(!1),ye=o.useRef(!1),xe=()=>{ye.current||(ye.current=!0,previewChunk.load().catch(()=>{}))},we=c(),[ke]=o.useState(()=>!we),[$e,Ne]=o.useState(null),je=o.useRef(null),Se=o.useRef(E);o.useEffect(()=>{Se.current=E});const ze=o.useCallback(e=>{je.current=e,"function"==typeof k?k(e):k&&(k.current=e)},[k]);o.useEffect(()=>{const e=je.current,t=(Y||Z)&&e?.complete?e.naturalWidth>0?"loaded":"failed":null;pe(t??"loading"),Ne("loaded"===t&&e?{width:e.naturalWidth,height:e.naturalHeight}:null),Se.current?.(t??"loading")},[Y,Z]);const Ce=(e,t)=>{pe(e),"loaded"===e&&Ne({width:t.naturalWidth,height:t.naturalHeight}),E?.(e)},Re=!1===O?"":f[!0===O?"md":O],Me=U in m?m[U]:U,_e=!0===V?{}:!1===V?null:V,We=null!==_e&&!1!==_e.contextMenu,Pe=null!==_e&&!1!==_e.drag,Le=null!==_e&&!1!==_e.select,Oe=e=>e.preventDefault(),Te=function(e){return Number.isFinite(e)?(Math.round(e/90)%4+4)%4:0}(q),De=Te%2==1,Ee=function(e,t){const n=e%2==1,o="horizontal"===t||"both"===t,r="vertical"===t||"both"===t,i=n?r:o,a=n?o:r;return{scale:i||a?`${i?-1:1} ${a?-1:1}`:void 0,rotate:0===e?void 0:90*e+"deg",...n?{position:"absolute",top:"50%",left:"50%",width:"100cqh",height:"100cqw",maxWidth:"none",translate:"-50% -50%"}:null}}(Te,H),Fe=void 0===P?void 0:$(P,Te,H),Ie="blur"===L&&"cover"!==W&&"fill"!==W,Ue="none"!==L&&"blur"!==L?L:void 0,qe=_e?{onContextMenu:We?Oe:void 0,onDragStart:Pe?Oe:void 0,draggable:!Pe&&void 0,className:Le?"select-none":"",style:Le?{WebkitTouchCallout:"none"}:void 0}:null,He=oe??ce.fetchpriority??(I?"high":void 0),Be={loading:te??(I?"eager":void 0),decoding:ne,...void 0===He?null:{[v]:He},sizes:ee,srcSet:Z,src:Y},Ae=e("img",{ref:ze,alt:C,width:M,height:_,className:u("block size-full",b[W],Re,"[transition:opacity_var(--neba-duration-fill)_var(--neba-ease),filter_var(--neba-duration-fill)_var(--neba-ease),transform_var(--neba-duration-fill)_var(--neba-ease)]",I||ke||"loaded"===he?"opacity-100":"opacity-0",Ie||null!==de||ke?"relative":"",qe?.className,Q?.image),style:{filter:"none"===Me?void 0:Me,objectPosition:Fe,...Ee,...qe?.style},onLoad:e=>{Ce("loaded",e.currentTarget),re?.(e)},onError:e=>{Ce("failed",e.currentTarget),ie?.(e)},onContextMenu:e=>{We&&Oe(e),ae?.(e)},onDragStart:e=>{Pe&&Oe(e),le?.(e)},draggable:!Pe&&se,...ce,...Be}),Ve=Ie?e("img",{alt:"","aria-hidden":"true",draggable:!1,className:u("pointer-events-none block object-cover select-none","[transition:opacity_var(--neba-duration-fill)_var(--neba-ease)]",ke||"loaded"===he?"opacity-100":"opacity-0"),style:{...N(Ee,De,48),objectPosition:Fe,filter:("none"===Me?"":`${Me} `)+"blur(24px)"},crossOrigin:ce.crossOrigin,referrerPolicy:ce.referrerPolicy,loading:te,decoding:ne,sizes:ee,srcSet:Z,src:Y}):null,Ge=null!==de&&de.blur?!0===de.blur?20:de.blur:0,Je=null===de||"failed"===he||void 0===fe?null:e("img",{src:fe,alt:"","aria-hidden":"true",draggable:!1,className:u("pointer-events-none block select-none",b[W],"loaded"===he?"opacity-0 [transition:opacity_0ms_linear_var(--neba-duration-fill)]":"opacity-100",Q?.placeholder),style:{...N(Ee,De,2*Ge),objectPosition:Fe,filter:0===Ge?void 0:`blur(${Ge}px)`}}),Ke="failed"===he?e("span",{className:u("absolute inset-0 flex items-center justify-center","bg-(--neba-disabled-bg) text-(--neba-muted-fg)",Re,Q?.fallback),children:D??e("span",{className:"px-2 text-center text-sm","aria-hidden":!!C||void 0,children:C||J||ue.unavailable})}):null,Qe="loading"!==he||!1===T||null!==de||I?null:e("span",{className:u("absolute inset-0",Q?.placeholder),children:T??e(i,{render:e("span",{}),shape:"rect",className:u("block size-full",Re)})}),Xe=void 0===A?null:function(t,n){const o="string"==typeof t?{content:t}:t,{content:r,position:i="bottom-end",repeat:a=!1,opacity:l=.35,size:s="xs",color:c="#ffffff"}=o,f="string"==typeof s&&s in d?d[s]:h(s)??d.xs,p=o.rotate??(a&&"string"==typeof r?-24:0);if(a&&"string"==typeof r)return e(TiledMark,{text:r,color:c,opacity:l,rotate:p,fontSize:f,slot:n});return e("span",{"aria-hidden":"true",className:u("pointer-events-none absolute inset-0 flex select-none p-2",g[i],n),children:e("span",{style:{color:c,opacity:l,fontSize:f,lineHeight:1.2,textShadow:"0 1px 2px rgba(0, 0, 0, 0.45)",transform:p?`rotate(${p}deg)`:void 0},children:r})})}(A,Q?.watermark),Ye=t("span",{className:"relative block size-full",style:De||void 0!==Ue?{containerType:De?"size":void 0,background:Ue}:void 0,children:[Ve,Je,ke?Qe:null,Ae,ke?null:Qe,Ke,Xe]}),Ze=function(e,t){const n="number"==typeof e?e:Number(e),o="number"==typeof t?t:Number(t);return Number.isFinite(n)&&Number.isFinite(o)&&n>0&&o>0?{width:n,height:o}:null}(M,_),et="auto"===R&&null!==Ze?Ze.width/Ze.height:null,tt=null===et?R:De?1/et:et,nt=void 0===_&&void 0!==M?w(M):void 0,ot=void 0===M&&void 0!==_?w(_):void 0,rt=void 0!==nt?{width:nt,maxWidth:"100%"}:void 0!==ot?{height:ot,..."auto"===tt?null:{width:"auto",maxWidth:"100%"}}:null,it=void 0!==nt||void 0!==ot&&"auto"!==tt,at="auto"===tt&&De&&null!==$e&&void 0===ot?$e.height/$e.width:null,lt=void 0===B?null:function(e,t){const n=!0===t?"md":t;return{shape:"rounded",corner:!1===n?"md":n,..."string"==typeof e?{shape:e}:e}}(B,O),st=null===lt?"0px":function(e){return"string"==typeof e&&e in f?`var(--neba-radius-${e})`:h(e)??"0px"}(lt.corner??"md"),ct=null===lt?void 0:h(lt.mat),ut=null===lt?void 0:h(lt.feather),dt={...rt,...null===lt?null:j(lt.shape,st),...void 0===ut?null:S(ut),...null!==lt||F?null:X},ft="auto"===tt?e("span",{className:u("relative block overflow-hidden",null===lt?Re:"",null!==lt||F?"":K),style:null===at?dt:{aspectRatio:at,...dt},children:Ye}):e(r,{render:e("span",{}),ratio:tt,className:u("block overflow-hidden",null===lt?Re:"",null!==lt||F?"":K),style:dt,children:Ye}),ht=null===lt?void 0:function(e){if(void 0===e.border||!1===e.border)return;const t=!0===e.border?"1px":h(e.border);return`inset 0 0 0 ${t} ${e.borderColor??"var(--neba-line)"}`}(lt),pt=void 0===ct?st:`calc(${st} + ${ct})`,bt=null===lt?ft:t("span",{className:u("relative block",Q?.frame,F?"":K),style:{...j(lt.shape,pt),padding:ct,background:lt.background??(void 0===ct?void 0:"var(--neba-surface)"),boxShadow:lt.elevation?`var(--neba-shadow-${lt.elevation})`:void 0,width:it?"fit-content":void 0,maxWidth:it?"100%":void 0,...F?null:X},children:[ft,void 0===ht?null:e("span",{"aria-hidden":"true",className:"pointer-events-none absolute inset-0",style:{...j(lt.shape,pt),boxShadow:ht}})]});return F?t(n,{children:[e("button",{type:"button","aria-label":C||ue.preview,"aria-haspopup":"dialog",className:u("block cursor-zoom-in",p,it?"[:where(&)]:w-fit [:where(&)]:max-w-full":"[:where(&)]:w-full","focus-visible:[outline:2px_solid_var(--n-ring,var(--neba-primary-ring))] focus-visible:[outline-offset:2px]",Re,K),style:X,onPointerEnter:xe,onFocus:xe,onTouchStart:xe,onClick:()=>{ve(!0),me(!0)},children:bt}),ge?e(o.Suspense,{fallback:null,children:e(x,{open:be,onOpenChange:me,size:"xl",title:C||ue.preview,children:t("span",{className:u("relative mx-auto block",De?"":"w-fit"),style:De?z($e??Ze):void 0,children:[e("img",{alt:C,className:u(De?"block object-contain":"mx-auto block max-h-[70vh] w-auto max-w-full",qe?.className),style:{filter:"none"===Me?void 0:Me,...Ee,...qe?.style},onContextMenu:qe?.onContextMenu,onDragStart:qe?.onDragStart,draggable:qe?.draggable,crossOrigin:ce.crossOrigin,referrerPolicy:ce.referrerPolicy,srcSet:Z,src:Y}),Xe]})})}):null]}):bt});function z(e){if(null===e)return{aspectRatio:"1",width:"min(100%, 70vh)",containerType:"size"};const t=e.height/e.width;return{aspectRatio:`${e.height} / ${e.width}`,width:`min(100%, ${e.height}px, calc(70vh * ${t}))`,containerType:"size"}}

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

@@ -53,6 +53,18 @@ export interface MenuProps extends MenuSurfaceProps {
     loopFocus?: boolean;
     /** Unavailable. The trigger stops opening anything. */
     disabled?: boolean;
+    /**
+     * Keeps the popup and its rows in the DOM while the menu is closed, hidden,
+     * rather than building them each time it opens. A submenu inside takes the
+     * same answer.
+     *
+     * For a menu of links that should be in the page a crawler renders. The
+     * popup is portalled, and a portal has nowhere to go until there is a
+     * document, so the rows arrive once the page has hydrated rather than in the
+     * server's HTML.
+     * @default false
+     */
+    keepMounted?: boolean;
     /** The rows. */
     children?: React.ReactNode;
 }
@@ -78,6 +90,11 @@ export interface ContextMenuProps extends MenuSurfaceProps, Omit<React.Component
     /** @default true */
     loopFocus?: boolean;
     disabled?: boolean;
+    /**
+     * Keeps the popup and its rows in the DOM while the menu is closed, hidden.
+     * @default false
+     */
+    keepMounted?: boolean;
 }
 export interface MenuItemProps {
     /** What the row does. Not given, and not a link, the row is a label. */

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

package/dist/components/meter/Meter.js

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

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

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{NumberField as t}from"@base-ui/react/number-field";import{Field as n}from"@base-ui/react/field";import{numberMessages as r,useMessages as i}from"../../internal/i18n.js";import{MinusIcon as s,PlusIcon as o}from"../../internal/icons.js";import{keyHandler as c}from"../../internal/keys.js";import{FieldNotch as d,NotchFrame as m,restEndOf as u}from"../../internal/notch.js";import{controlTextLeadingClasses as p,cx as b,disabledClasses as f,fieldFocusTransitionClasses as h,fieldHeightClasses as g,fieldReadOnlyClasses as x,fieldRestClasses as v,fieldRingClasses as N,fieldSheetClasses as y,fieldSheetDisabledClasses as j,fieldSheetReadOnlyClasses as w,gapClasses as k,hasContent as _,iconClasses as S,metaTextClasses as C,paddingXClasses as V,radiusClasses as z,readOnlyFilterClasses as O,stackGapClasses as $,surfaceSlots as I,transitionClasses as D}from"../../internal/styles.js";import{useStyleDefaults as F}from"../../internal/defaults.js";import{fieldLight as L,fieldSpotlightSlot as R,glowClasses as q}from"../../internal/glow.js";import{useFieldsetDisabled as E}from"../../internal/fieldset.js";const P=["group relative flex w-full items-center","[-webkit-tap-highlight-color:transparent]",D,h,S].join(" "),W=["relative inline-flex size-[1.7em] shrink-0 cursor-pointer items-center justify-center","neba-hit-row","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-on-tint)","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 const NumberField=/*@__PURE__*/l.forwardRef(function NumberField(l,h){const{variant:S="outline",size:D="md",color:B="primary",density:G="default",elevation:K=0,value:A,defaultValue:H,onValueChange:J,onValueCommitted:M,min:Q,max:T,step:U,largeStep:X,smallStep:Y,snapOnStep:Z,wheel:ee=!0,format:ae,locale:le,steppers:te="end",incrementLabel:ne,decrementLabel:re,label:ie,labelPlacement:se="top",description:oe,error:ce,invalid:de,startIcon:me,endIcon:ue,fullWidth:pe=!1,disabled:be,readOnly:fe=!1,required:he=!1,name:ge,placeholder:xe,id:ve,className:Ne,classNames:ye,shortcuts:je,style:we,"aria-label":ke,"aria-labelledby":_e,...Se}=F(l,["size","density","variant","locale","labelPlacement"]),Ce=E(be),Ve=!Ce&&!fe,ze=i(r,"string"==typeof le?le:void 0),Oe=_(ce),$e=de??Oe,Ie=$e?"danger":B,De=V[G][D],Fe={end:`${De} pe-1`,split:"px-1",none:De},Le=e(t.Decrement,{"aria-label":re??ze.decrease,className:b(W,ye?.stepper),children:e(s,{})}),Re=e(t.Increment,{"aria-label":ne??ze.increase,className:b(W,ye?.stepper),children:e(o,{})}),qe="none"!==te&&!fe,Ee="top"!==se&&_(ie),Pe=Ee&&"float"===se&&!_(me)&&!(qe&&"split"===te),We=a(t.Group,{...L(Ve),className:b(P,g[D],p[D],z[D],k[D],qe?Fe[te]:De,Ee?"":N,Ce?(Ee?j:f)[S]:fe?Ee?`${w[S]} ${O}`:x[S]:`${(Ee?y:v)[S]} ${q}`,Ce?"":"cursor-text",ye?.shell),children:[qe&&"split"===te?Le:null,me?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:me}):null,e(t.Input,{ref:h,"aria-label":ke,"aria-labelledby":_e,onKeyDown:c(je),placeholder:Pe?xe||" ":xe,className:["neba-input min-w-0 flex-1 self-stretch bg-transparent [font:inherit] text-inherit","[outline:none]","tabular-nums","split"===te&&qe?"text-center":"","placeholder:text-(--neba-muted-fg)","caret-(--n-accent) selection:bg-(--n-soft-press)","disabled:cursor-not-allowed",Pe?"neba-float-control":"",ye?.control].filter(Boolean).join(" ")}),ue?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:ue}):null,qe&&"end"===te?a("span",{className:"flex shrink-0 items-center gap-0.5",style:{"--n-hit-gap":"0.125rem"},children:[Le,Re]}):null,qe&&"split"===te?Re:null,Ee?e(d,{label:ie,variant:S,disabled:Ce,readOnly:fe,rests:Pe,labelClassName:ye?.label}):null]});return a(n.Root,{disabled:Ce,invalid:$e,className:b("flex-col align-top",$[D],pe?"flex w-full":"inline-flex",Ne??""),style:{...I(Ie,K),...Ve?R:void 0,...we},...Se,children:[ie&&!Ee?e(n.Label,{className:b(C[D],"font-medium",Ce?"text-(--neba-disabled-fg)":"text-(--neba-fg)",ye?.label),children:ie}):null,e(t.Root,{id:ve,name:ge,className:"contents",value:A,defaultValue:H,onValueChange:e=>J?.(e),onValueCommitted:e=>M?.(e),min:Q,max:T,step:U,largeStep:X,smallStep:Y,snapOnStep:Z,allowWheelScrub:ee,format:ae,locale:le,disabled:Ce,readOnly:fe,required:he,children:Ee?e(m,{label:ie,size:D,density:G,variant:S,rests:Pe,restEnd:u(D,[...ue?[1.2]:[],...qe&&"end"===te?[3.55]:[]]),labelClassName:ye?.label,children:We}):We}),oe?e(n.Description,{className:b(C[D],"text-(--neba-muted-fg)",ye?.description),children:oe}):null,e(n.Error,Oe?{match:!0,className:b(C[D],"text-(--n-accent)",ye?.error),children:ce}:{className:b(C[D],"text-(--n-accent)",ye?.error)})]})});
+"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{NumberField as t}from"@base-ui/react/number-field";import{Field as n}from"@base-ui/react/field";import{numberMessages as r,useMessages as i}from"../../internal/i18n.js";import{MinusIcon as s,PlusIcon as o}from"../../internal/icons.js";import{keyHandler as c}from"../../internal/keys.js";import{FieldNotch as d,NotchFrame as m,restEndOf as p}from"../../internal/notch.js";import{controlTextLeadingClasses as u,cx as b,disabledClasses as f,fieldFocusTransitionClasses as h,fieldHeightClasses as g,fieldReadOnlyClasses as x,fieldRestClasses as v,fieldRingClasses as N,fieldSheetClasses as y,fieldSheetDisabledClasses as j,fieldSheetReadOnlyClasses as w,gapClasses as k,hasContent as _,iconClasses as S,metaTextClasses as C,paddingXClasses as V,radiusClasses as z,readOnlyFilterClasses as O,stackGapClasses as $,surfaceSlots as I,transitionClasses as D}from"../../internal/styles.js";import{useStyleDefaults as F}from"../../internal/defaults.js";import{useIntlLocale as L}from"../../internal/media.js";import{fieldLight as R,fieldSpotlightSlot as q,glowClasses as E}from"../../internal/glow.js";import{useFieldsetDisabled as P}from"../../internal/fieldset.js";const W=["group relative flex w-full items-center","[-webkit-tap-highlight-color:transparent]",D,h,S].join(" "),B=["relative inline-flex size-[1.7em] shrink-0 cursor-pointer items-center justify-center","neba-hit-row","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-on-tint)","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 const NumberField=/*@__PURE__*/l.forwardRef(function NumberField(l,h){const{variant:S="outline",size:D="md",color:G="primary",density:K="default",elevation:A=0,value:H,defaultValue:J,onValueChange:M,onValueCommitted:Q,min:T,max:U,step:X,largeStep:Y,smallStep:Z,snapOnStep:ee,wheel:ae=!0,format:le,locale:te,steppers:ne="end",incrementLabel:re,decrementLabel:ie,label:se,labelPlacement:oe="top",description:ce,error:de,invalid:me,startIcon:pe,endIcon:ue,fullWidth:be=!1,disabled:fe,readOnly:he=!1,required:ge=!1,name:xe,placeholder:ve,id:Ne,className:ye,classNames:je,shortcuts:we,style:ke,"aria-label":_e,"aria-labelledby":Se,...Ce}=F(l,["size","density","variant","locale","labelPlacement"]),Ve=P(fe),ze=!Ve&&!he,Oe=i(r,"string"==typeof te?te:void 0),$e=L(void 0),Ie=_(de),De=me??Ie,Fe=De?"danger":G,Le=V[K][D],Re={end:`${Le} pe-1`,split:"px-1",none:Le},qe=e(t.Decrement,{"aria-label":ie??Oe.decrease,className:b(B,je?.stepper),children:e(s,{})}),Ee=e(t.Increment,{"aria-label":re??Oe.increase,className:b(B,je?.stepper),children:e(o,{})}),Pe="none"!==ne&&!he,We="top"!==oe&&_(se),Be=We&&"float"===oe&&!_(pe)&&!(Pe&&"split"===ne),Ge=a(t.Group,{...R(ze),className:b(W,g[D],u[D],z[D],k[D],Pe?Re[ne]:Le,We?"":N,Ve?(We?j:f)[S]:he?We?`${w[S]} ${O}`:x[S]:`${(We?y:v)[S]} ${E}`,Ve?"":"cursor-text",je?.shell),children:[Pe&&"split"===ne?qe:null,pe?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:pe}):null,e(t.Input,{ref:h,"aria-label":_e,"aria-labelledby":Se,onKeyDown:c(we),placeholder:Be?ve||" ":ve,className:["neba-input min-w-0 flex-1 self-stretch bg-transparent [font:inherit] text-inherit","[outline:none]","tabular-nums","split"===ne&&Pe?"text-center":"","placeholder:text-(--neba-muted-fg)","caret-(--n-accent) selection:bg-(--n-soft-press)","disabled:cursor-not-allowed",Be?"neba-float-control":"",je?.control].filter(Boolean).join(" ")}),ue?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:ue}):null,Pe&&"end"===ne?a("span",{className:"flex shrink-0 items-center gap-0.5",style:{"--n-hit-gap":"0.125rem"},children:[qe,Ee]}):null,Pe&&"split"===ne?Ee:null,We?e(d,{label:se,variant:S,disabled:Ve,readOnly:he,rests:Be,labelClassName:je?.label}):null]});return a(n.Root,{disabled:Ve,invalid:De,className:b("flex-col align-top",$[D],be?"flex w-full":"inline-flex",ye??""),style:{...I(Fe,A),...ze?q:void 0,...ke},...Ce,children:[se&&!We?e(n.Label,{className:b(C[D],"font-medium",Ve?"text-(--neba-disabled-fg)":"text-(--neba-fg)",je?.label),children:se}):null,e(t.Root,{id:Ne,name:xe,className:"contents",value:H,defaultValue:J,onValueChange:e=>M?.(e),onValueCommitted:e=>Q?.(e),min:T,max:U,step:X,largeStep:Y,smallStep:Z,snapOnStep:ee,allowWheelScrub:ae,format:le,locale:te??$e,disabled:Ve,readOnly:he,required:ge,children:We?e(m,{label:se,size:D,density:K,variant:S,rests:Be,restEnd:p(D,[...ue?[1.2]:[],...Pe&&"end"===ne?[3.55]:[]]),labelClassName:je?.label,children:Ge}):Ge}),ce?e(n.Description,{className:b(C[D],"text-(--neba-muted-fg)",je?.description),children:ce}):null,e(n.Error,Ie?{match:!0,className:b(C[D],"text-(--n-accent)",je?.error),children:de}:{className:b(C[D],"text-(--n-accent)",je?.error)})]})});

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 a,PageLayoutSlotContext as s}from"../../internal/page-layout.js";import{observeResize as i}from"../../internal/observe.js";import{controlSlots as u,cx as c,hasContent as d,insetRingClasses as f,toLength as p}from"../../internal/styles.js";import{useStyleDefaults as m}from"../../internal/defaults.js";import{ScreenContext as h}from"../../internal/screen.js";const v=["header","footer"];export const PageLayout=/*@__PURE__*/l.forwardRef(function PageLayout(x,y){const{header:b,footer:w,sidebar:g,endSidebar:P,headerSpan:S="full",footerSpan:k="full",scroll:C="page",height:j="viewport",collapseBelow:N="md",sidebarOpen:O,defaultSidebarOpen:$=!1,onSidebarOpenChange:L,endSidebarOpen:R,defaultEndSidebarOpen:z=!1,onEndSidebarOpenChange:E,skipLink:B=!0,skipLabel:H,main:I,mainId:M="main",mainProps:_,locale:T,color:q="primary",className:A,style:D,children:F,...G}=m(x,["locale"]),J=t(n,T),K=l.useContext(h),Q=I??!K,[U,V]=l.useState($),[W,X]=l.useState(z),Y=l.useMemo(()=>({start:O??U,end:R??W}),[O,U,R,W]),Z=l.useCallback((e,o)=>{if("start"===e)return void 0===O&&V(o),void L?.(o);void 0===R&&X(o),E?.(o)},[O,R,L,E]),ee=l.useRef(null),oe=l.useCallback(e=>{ee.current=e,"function"==typeof y?y(e):y&&(y.current=e)},[y]),le=l.useRef({header:null,footer:null}),ne=l.useRef({header:null,footer:null}),te=l.useCallback(()=>{const e=ee.current;if(e)for(const o of v){const l=le.current[o],n="header"===o?S:k;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`,a="sticky"===t||"fixed"===t;e.style.setProperty(`--n-layout-${o}`,a&&"full"===n?r:"0px"),e.style.setProperty(`--n-layout-${o}-inset`,"fixed"===t?r:"0px")}},[S,k]),re=l.useCallback(()=>{for(const e of v){ne.current[e]?.();const o=le.current[e];ne.current[e]=o?i(o,()=>te()):null}te()},[te]);l.useEffect(()=>{const e=ne.current;return re(),()=>{for(const o of v)e[o]?.(),e[o]=null}},[re]);const ae=l.useCallback((e,o)=>{le.current[e]=o,re()},[re]),se=l.useMemo(()=>({present:!0,register:ae,collapseBelow:N,open:Y,setOpen:Z,scroll:C,locale:T}),[ae,N,Y,Z,C,T]),ie="content"===C,ue=p("viewport"===j||"auto"===j?void 0:j),ce=void 0!==ue?"":"auto"===j?ie?"h-full":"min-h-full":ie?"h-dvh":"min-h-dvh",de=d(b)?e(s.Provider,{value:"header",children:b}):null,fe=d(w)?e(s.Provider,{value:"footer",children:w}):null;return e(r.Provider,{value:se,children:o("div",{ref:oe,className:c("relative flex w-full flex-col",ie?"overflow-hidden":"",ce,"full"===S?"[padding-top:var(--n-layout-header-inset,0px)]":"","full"===k?"[padding-bottom:var(--n-layout-footer-inset,0px)]":"",A),style:void 0===ue?D:{...ie?{height:ue}:{minHeight:ue},...D},...G,children:[B&&Q?e("a",{href:`#${M}`,className:c("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:u(q,2,"solid"),children:H??J.skipToContent}):null,"full"===S?de:null,o("div",{className:c("flex w-full flex-1",ie?"min-h-0":""),children:[d(g)?e(a.Provider,{value:"start",children:g}):null,o("div",{className:c("flex min-w-0 flex-1 flex-col",ie?"min-h-0":"","content"===S?"[padding-top:var(--n-layout-header-inset,0px)]":"","content"===k?"[padding-bottom:var(--n-layout-footer-inset,0px)]":""),children:["content"===S?de:null,Q?e("main",{tabIndex:-1,..._,id:M,className:c("min-w-0 flex-1",f,ie?"min-h-0 overflow-y-auto":"",_?.className),children:F}):e("div",{..._,className:c("min-w-0 flex-1",ie?"min-h-0 overflow-y-auto":"",_?.className),children:F}),"content"===k?fe:null]}),d(P)?e(a.Provider,{value:"end",children:P}):null]}),"full"===k?fe:null]})})});
+"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{headerFloor as r,PageLayoutContext as a,SidebarSideContext as i,PageLayoutSlotContext as s}from"../../internal/page-layout.js";import{useLayoutEffectOnClient as u}from"../../internal/layout-effect.js";import{observeResize as d}from"../../internal/observe.js";import{controlSlots as f,cx as c,hasContent as p,insetRingClasses as m,toLength as h}from"../../internal/styles.js";import{DefaultsContext as v,useStyleDefaults as y}from"../../internal/defaults.js";import{ScreenContext as x}from"../../internal/screen.js";const b=["header","footer"];export const PageLayout=/*@__PURE__*/l.forwardRef(function PageLayout(w,g){const{header:P,footer:C,sidebar:S,endSidebar:j,headerSpan:k="full",footerSpan:N="full",scroll:O="page",height:$="viewport",collapseBelow:z="md",sidebarOpen:L,defaultSidebarOpen:R=!1,onSidebarOpenChange:B,endSidebarOpen:E,defaultEndSidebarOpen:H=!1,onEndSidebarOpenChange:I,skipLink:M=!0,skipLabel:_,main:T,mainId:q="main",mainProps:A,locale:D,color:F="primary",className:G,style:J,children:K,...Q}=y(w,["locale"]),U=t(n,D),V=l.useContext(x),W=l.useContext(v),X=T??!V,[Y,Z]=l.useState(R),[ee,oe]=l.useState(H),le=l.useMemo(()=>({start:L??Y,end:E??ee}),[L,Y,E,ee]),ne=l.useCallback((e,o)=>{if("start"===e)return void 0===L&&Z(o),void B?.(o);void 0===E&&oe(o),I?.(o)},[L,E,B,I]),te=l.useRef(null),re=l.useCallback(e=>{te.current=e,"function"==typeof g?g(e):g&&(g.current=e)},[g]),ae=l.useRef({header:null,footer:null}),ie=l.useRef({header:null,footer:null}),se=l.useCallback(()=>{const e=te.current;if(e)for(const o of b){const l=ae.current[o],n="header"===o?k:N;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`,a="sticky"===t||"fixed"===t;e.style.setProperty(`--n-layout-${o}`,a&&"full"===n?r:"0px"),e.style.setProperty(`--n-layout-${o}-inset`,"fixed"===t?r:"0px")}},[k,N]),ue=l.useCallback(()=>{for(const e of b){ie.current[e]?.();const o=ae.current[e];ie.current[e]=o?d(o,()=>se()):null}se()},[se]);u(()=>{const e=ie.current;return ue(),()=>{for(const o of b)e[o]?.(),e[o]=null}},[ue]);const de=l.useCallback((e,o)=>{ae.current[e]=o,ue()},[ue]),fe=l.useMemo(()=>({present:!0,register:de,collapseBelow:z,open:le,setOpen:ne,scroll:O,locale:D}),[de,z,le,ne,O,D]),ce="content"===O,pe=r(P,W?.size),me=h("viewport"===$||"auto"===$?void 0:$),he=void 0!==me?"":"auto"===$?ce?"h-full":"min-h-full":ce?"h-dvh":"min-h-dvh",ve=p(P)?e(s.Provider,{value:"header",children:P}):null,ye=p(C)?e(s.Provider,{value:"footer",children:C}):null;return e(a.Provider,{value:fe,children:o("div",{ref:re,className:c("relative flex w-full flex-col",ce?"overflow-hidden":"",he,"full"===k?"[padding-top:var(--n-layout-header-inset,var(--n-layout-header-floor,0px))]":"","full"===N?"[padding-bottom:var(--n-layout-footer-inset,0px)]":"",G),style:{...void 0===pe?void 0:{"--n-layout-header-floor":pe},...void 0===me?void 0:ce?{height:me}:{minHeight:me},...J},...Q,children:[M&&X?e("a",{href:`#${q}`,className:c("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:f(F,2,"solid"),children:_??U.skipToContent}):null,"full"===k?ve:null,o("div",{className:c("flex w-full flex-1",ce?"min-h-0":""),children:[p(S)?e(i.Provider,{value:"start",children:S}):null,o("div",{className:c("flex min-w-0 flex-1 flex-col",ce?"min-h-0":"","content"===k?"[padding-top:var(--n-layout-header-inset,var(--n-layout-header-floor,0px))]":"","content"===N?"[padding-bottom:var(--n-layout-footer-inset,0px)]":""),children:["content"===k?ve:null,X?e("main",{tabIndex:-1,...A,id:q,className:c("min-w-0 flex-1",m,ce?"min-h-0 overflow-y-auto":"",A?.className),children:K}):e("div",{...A,className:c("min-w-0 flex-1",ce?"min-h-0 overflow-y-auto":"",A?.className),children:K}),"content"===N?ye:null]}),p(j)?e(i.Provider,{value:"end",children:j}):null]}),"full"===N?ye:null]})})});

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

package/dist/components/pie-chart/PieChart.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as t from"react";import{ChartDataTable as n,ChartExport as a,ChartLegendBar as i,ChartStatus as r,ChartSummary as o,ChartSurface as s,ChartTooltipPanel as u,markTransitionClasses as d,summarise as m,useMeasuredWidth as c,useReleaseOutside as h,useVisibility as f,chartHeight as v,useMeasuredHeight as p}from"../../internal/chart-frame.js";import{arcPath as x,categoryAt as g,chartFontSizes as b,compactNumber as y,formatCategory as M,inkOn as N,markGap as j,seriesColor as w,toValue as k,warnPaletteOverflow as E}from"../../internal/chart.js";import{numberFormatter as I}from"../../internal/format.js";import{cx as z,metaTextClasses as P}from"../../internal/styles.js";import{chartMessages as A,emptyMessages as $,useMessages as L}from"../../internal/i18n.js";import{useStyleDefaults as S}from"../../internal/defaults.js";const B={pie:0,donut:.62,semi:.62};export function PieChart(C){const{data:R,categories:D,shape:O="pie",startAngle:_=0,hole:F,gap:H=j,center:K,valueLabels:T="none",height:V,format:W,locale:q,label:G,legend:J,tooltip:Q,empty:U,exportable:X=!1,exportFileName:Y="chart.csv",onExport:Z,size:ee="md",variant:le="text",padded:te=!1,className:ne,...ae}=S(C,["size","variant","locale"]),ie=t.useRef(null),re=c(ie),oe=L($,q),se=L(A,q),ue=t.useId(),de=t.useCallback(e=>W?I(q,W).format(e):y(e,q),[W,q]),me=t.useMemo(()=>R.map(k),[R]),ce=t.useMemo(()=>me.map((e,l)=>({name:M(g(l,D,[me]),q),data:[R[l]],color:e.color})),[me,D,R,q]),he=f(ce);t.useEffect(()=>{E(ce.length)},[ce.length]);const[fe,ve]=t.useState(null);h(ie,null!==fe,()=>ve(null));const pe=t.useId(),xe=ce.map((e,l)=>w(e,l)),ge=me.reduce((e,l,t)=>he.visible[t]&&null!==l.value?e+Math.max(0,l.value):e,0),be="semi"===O,ye=p(ie,"string"==typeof V),Me=v(V,ee,ye),Ne=b[ee],je=!1===J?{interactive:!1}:!0===J||void 0===J?{}:J,we=!1!==J&&ce.length>1,ke=je.side??"bottom",Ee=!1===Q?{mode:"none"}:!0===Q||void 0===Q?{}:Q,Ie="none"===Ee.mode,ze=re/2,Pe=Math.max(0,Math.min(re/2,be?Me:Me/2)-2),Ae=be?Math.min(Me,Me/2+Pe/2):Me/2,$e=Pe*Math.min(.92,Math.max(0,F??B[O])),Le=ge<=0||Pe<=0,Se=Pe>0?Math.min(15,Math.max(0,H)/Pe*(180/Math.PI)):0,Be=be?180:360,Ce=[];let Re=be?-90:_;me.forEach((e,l)=>{if(!he.visible[l]||null===e.value||e.value<=0)return;const t=e.value/ge,n=t*Be;Ce.push({index:l,start:Re,end:Re+n,value:e.value,share:t}),Re+=n});const De=null===fe?[]:[{seriesIndex:fe,name:ce[fe]?.name,color:me[fe]?.color??xe[fe],value:me[fe]?.value??null,formatted:`${de(me[fe]?.value??0)} · ${Math.round(10*(Math.max(0,me[fe]?.value??0)/ge*100+Number.EPSILON))/10}%`,label:me[fe]?.label}];return l(s,{...ae,size:ee,variant:le,padded:te,className:ne,legendSide:ke,legend:we?e(i,{series:ce,colors:xe,options:je,visibility:he,size:ee,values:je.showValue?me.map(e=>null===e.value?void 0:de(e.value)):void 0}):null,table:Le?null:e(n,{id:ue,caption:G,categories:ce.map(e=>e.name??""),series:[{name:G,data:R}],values:[me],format:de,locale:q}),children:[X&&!Le?e(a,{rows:()=>[["",G??se.label],...ce.map((e,l)=>[e.name??"",me[l]?.value??null])],fileName:Y,onExport:Z,label:se.exportCsv}):null,l("div",{ref:ie,role:"img",tabIndex:Le?void 0:0,"aria-label":G??se.label,"aria-describedby":Le?void 0:pe,onPointerLeave:e=>{"touch"!==e.pointerType&&ve(null)},onBlur:()=>ve(null),onKeyDown:e=>{const l=Ce.map(e=>e.index);if("Escape"===e.key){if(null===fe)return;ve(null)}else{if(Ie||0===l.length)return;if("Home"===e.key)ve(l[0]);else if("End"===e.key)ve(l[l.length-1]);else{if("ArrowRight"!==e.key&&"ArrowLeft"!==e.key)return;{const t=null===fe?-1:l.indexOf(fe),n="ArrowRight"===e.key?t+1:t-1;ve(l[(n+l.length)%l.length])}}}e.preventDefault()},className:z("relative w-full rounded-(--neba-radius-xs)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2"),style:{height:"string"==typeof V?V:Me},children:[Le?e("div",{className:z("flex h-full items-center justify-center text-(--neba-muted-fg)",P[ee]),children:U??oe.title}):re>0?l("svg",{width:re,height:Me,viewBox:`0 0 ${re} ${Me}`,"aria-hidden":"true",className:"block",children:[Ce.map(l=>{const t=null!==he.hovered&&he.hovered!==l.index||null!==fe&&fe!==l.index,n=Ce.length>1&&l.end-l.start>2*Se?Se/2:0;return e("path",{d:x(ze,Ae,Pe,$e,l.start+n,l.end-n),fill:me[l.index].color??xe[l.index],opacity:t?.32:1,onPointerEnter:Ie?void 0:()=>ve(l.index),className:d},l.index)}),"all"===T?Ce.map(l=>{const t=((l.start+l.end)/2-90)*(Math.PI/180),n=$e>0?($e+Pe)/2:.68*Pe,a=`${Math.round(100*l.share)}%`;return(l.end-l.start)*(Math.PI/180)*n<2*Ne||Pe-$e<1.6*Ne?null:e("text",{x:ze+n*Math.cos(t),y:Ae+n*Math.sin(t),textAnchor:"middle",dominantBaseline:"central",fontSize:Ne,fontWeight:600,fill:N(me[l.index].color,l.index),className:"tabular-nums",children:a},l.index)}):null]}):null,K&&$e>0?e("div",{className:"pointer-events-none absolute flex flex-col items-center justify-center text-center",style:{left:ze-$e,top:Ae-$e,width:2*$e,height:be?$e:2*$e},children:K}):null,null===fe||Ie?null:Ee.render?e("div",{className:"pointer-events-none absolute top-0 left-1/2 z-10",children:Ee.render({index:fe,category:ce[fe]?.name??fe,items:De})}):e(u,{heading:ce[fe]?.name,items:De,x:ze,y:8,flip:!1,size:ee})]}),Le?null:e(o,{id:pe,template:se.summary,locale:q,...m(me.filter((e,l)=>he.visible[l]).map(e=>[e]),de)}),Ie?null:e(r,{heading:null===fe?void 0:ce[fe]?.name,items:De})]})}
+"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as t from"react";import{ChartDataTable as n,ChartExport as a,ChartLegendBar as i,ChartStatus as r,ChartSummary as o,ChartSurface as s,ChartTooltipPanel as u,markTransitionClasses as d,summarise as m,useMeasuredWidth as c,useReleaseOutside as h,useVisibility as f,chartHeight as p,useMeasuredHeight as v}from"../../internal/chart-frame.js";import{arcPath as x,categoryAt as g,chartFontSizes as b,compactNumber as y,formatCategory as M,inkOn as N,markGap as j,seriesColor as w,toValue as k,warnPaletteOverflow as E}from"../../internal/chart.js";import{numberFormatter as I}from"../../internal/format.js";import{cx as z,metaTextClasses as P}from"../../internal/styles.js";import{chartMessages as A,emptyMessages as $,useMessages as L}from"../../internal/i18n.js";import{useStyleDefaults as S}from"../../internal/defaults.js";import{useIntlLocale as B}from"../../internal/media.js";const C={pie:0,donut:.62,semi:.62};export function PieChart(R){const{data:D,categories:O,shape:_="pie",startAngle:F=0,hole:H,gap:K=j,center:T,valueLabels:V="none",height:W,format:q,locale:G,label:J,legend:Q,tooltip:U,empty:X,exportable:Y=!1,exportFileName:Z="chart.csv",onExport:ee,size:le="md",variant:te="text",padded:ne=!1,className:ae,...ie}=S(R,["size","variant","locale"]),re=t.useRef(null),oe=c(re),se=L($,G),ue=L(A,G),de=B(G),me=t.useId(),ce=t.useCallback(e=>q?I(de,q).format(e):y(e,de),[q,de]),he=t.useMemo(()=>D.map(k),[D]),fe=t.useMemo(()=>he.map((e,l)=>({name:M(g(l,O,[he]),de),data:[D[l]],color:e.color})),[he,O,D,de]),pe=f(fe);t.useEffect(()=>{E(fe.length)},[fe.length]);const[ve,xe]=t.useState(null);h(re,null!==ve,()=>xe(null));const ge=t.useId(),be=fe.map((e,l)=>w(e,l)),ye=he.reduce((e,l,t)=>pe.visible[t]&&null!==l.value?e+Math.max(0,l.value):e,0),Me="semi"===_,Ne=v(re,"string"==typeof W),je=p(W,le,Ne),we=b[le],ke=!1===Q?{interactive:!1}:!0===Q||void 0===Q?{}:Q,Ee=!1!==Q&&fe.length>1,Ie=ke.side??"bottom",ze=!1===U?{mode:"none"}:!0===U||void 0===U?{}:U,Pe="none"===ze.mode,Ae=oe/2,$e=Math.max(0,Math.min(oe/2,Me?je:je/2)-2),Le=Me?Math.min(je,je/2+$e/2):je/2,Se=$e*Math.min(.92,Math.max(0,H??C[_])),Be=ye<=0||$e<=0,Ce=$e>0?Math.min(15,Math.max(0,K)/$e*(180/Math.PI)):0,Re=Me?180:360,De=[];let Oe=Me?-90:F;he.forEach((e,l)=>{if(!pe.visible[l]||null===e.value||e.value<=0)return;const t=e.value/ye,n=t*Re;De.push({index:l,start:Oe,end:Oe+n,value:e.value,share:t}),Oe+=n});const _e=null===ve?[]:[{seriesIndex:ve,name:fe[ve]?.name,color:he[ve]?.color??be[ve],value:he[ve]?.value??null,formatted:`${ce(he[ve]?.value??0)} · ${Math.round(10*(Math.max(0,he[ve]?.value??0)/ye*100+Number.EPSILON))/10}%`,label:he[ve]?.label}];return l(s,{...ie,size:le,variant:te,padded:ne,className:ae,legendSide:Ie,legend:Ee?e(i,{series:fe,colors:be,options:ke,visibility:pe,size:le,values:ke.showValue?he.map(e=>null===e.value?void 0:ce(e.value)):void 0}):null,table:Be?null:e(n,{id:me,caption:J,categories:fe.map(e=>e.name??""),series:[{name:J,data:D}],values:[he],format:ce,locale:de}),children:[Y&&!Be?e(a,{rows:()=>[["",J??ue.label],...fe.map((e,l)=>[e.name??"",he[l]?.value??null])],fileName:Z,onExport:ee,label:ue.exportCsv}):null,l("div",{ref:re,role:"img",tabIndex:Be?void 0:0,"aria-label":J??ue.label,"aria-describedby":Be?void 0:ge,onPointerLeave:e=>{"touch"!==e.pointerType&&xe(null)},onBlur:()=>xe(null),onKeyDown:e=>{const l=De.map(e=>e.index);if("Escape"===e.key){if(null===ve)return;xe(null)}else{if(Pe||0===l.length)return;if("Home"===e.key)xe(l[0]);else if("End"===e.key)xe(l[l.length-1]);else{if("ArrowRight"!==e.key&&"ArrowLeft"!==e.key)return;{const t=null===ve?-1:l.indexOf(ve),n="ArrowRight"===e.key?t+1:t-1;xe(l[(n+l.length)%l.length])}}}e.preventDefault()},className:z("relative w-full rounded-(--neba-radius-xs)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2"),style:{height:"string"==typeof W?W:je},children:[Be?e("div",{className:z("flex h-full items-center justify-center text-(--neba-muted-fg)",P[le]),children:X??se.title}):oe>0?l("svg",{width:oe,height:je,viewBox:`0 0 ${oe} ${je}`,"aria-hidden":"true",className:"block",children:[De.map(l=>{const t=null!==pe.hovered&&pe.hovered!==l.index||null!==ve&&ve!==l.index,n=De.length>1&&l.end-l.start>2*Ce?Ce/2:0;return e("path",{d:x(Ae,Le,$e,Se,l.start+n,l.end-n),fill:he[l.index].color??be[l.index],opacity:t?.32:1,onPointerEnter:Pe?void 0:()=>xe(l.index),className:d},l.index)}),"all"===V?De.map(l=>{const t=((l.start+l.end)/2-90)*(Math.PI/180),n=Se>0?(Se+$e)/2:.68*$e,a=`${Math.round(100*l.share)}%`;return(l.end-l.start)*(Math.PI/180)*n<2*we||$e-Se<1.6*we?null:e("text",{x:Ae+n*Math.cos(t),y:Le+n*Math.sin(t),textAnchor:"middle",dominantBaseline:"central",fontSize:we,fontWeight:600,fill:N(he[l.index].color,l.index),className:"tabular-nums",children:a},l.index)}):null]}):null,T&&Se>0?e("div",{className:"pointer-events-none absolute flex flex-col items-center justify-center text-center",style:{left:Ae-Se,top:Le-Se,width:2*Se,height:Me?Se:2*Se},children:T}):null,null===ve||Pe?null:ze.render?e("div",{className:"pointer-events-none absolute top-0 left-1/2 z-10",children:ze.render({index:ve,category:fe[ve]?.name??ve,items:_e})}):e(u,{heading:fe[ve]?.name,items:_e,x:Ae,y:8,flip:!1,size:le})]}),Be?null:e(o,{id:ge,template:ue.summary,locale:de,...m(he.filter((e,l)=>pe.visible[l]).map(e=>[e]),ce)}),Pe?null:e(r,{heading:null===ve?void 0:fe[ve]?.name,items:_e})]})}

package/dist/components/pill/Pill.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import*as o from"react";import{trackPointer as i}from"../../internal/glow.js";import{observeResize as l}from"../../internal/observe.js";import{controlSlots as s,controlTextClasses as r,cx as a,gapClasses as c,hasContent as m,iconClasses as d,iconSizeClasses as f,insetRingClasses as x,metaTextClasses as p,paddingXClasses as u,pressTransitionClasses as h,sheetBodyClasses as v,surfaceClasses as b,transitionClasses as g}from"../../internal/styles.js";import{inertValue as w}from"../../internal/inert.js";import{useStyleDefaults as y}from"../../internal/defaults.js";const j={solid:[b,"text-(--n-on-solid) bg-(--n-fill)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[b,"border text-(--n-on-tint) bg-(--n-panel)","[border-color:var(--n-line)]","[box-shadow:var(--n-elev),var(--neba-plate-glass)]"].join(" "),text:`${b} text-(--n-on-tint) bg-(--n-soft)`},_={solid:"hover:bg-(--n-fill-hover) active:bg-(--n-fill-active)",outline:"hover:bg-(--n-panel-hover) active:bg-(--n-panel-press)",text:"hover:bg-(--n-soft) active:bg-(--n-soft-hover)"},k={xs:"min-h-5.5",sm:"min-h-6.5",md:"min-h-8",lg:"min-h-10",xl:"min-h-12"},z={xs:"rounded-[0.6875rem]",sm:"rounded-[0.8125rem]",md:"rounded-[1rem]",lg:"rounded-[1.25rem]",xl:"rounded-[1.5rem]"},N={default:{xs:"px-3",sm:"px-4",md:"px-5",lg:"px-6",xl:"px-8"},compact:{xs:"px-1.5",sm:"px-2",md:"px-2.5",lg:"px-3",xl:"px-4"}},$={static:{top:"",bottom:""},sticky:{top:"sticky top-3 z-20",bottom:"sticky bottom-3 z-20"},fixed:{top:"fixed inset-x-0 top-3 z-30 mx-auto w-fit",bottom:"fixed inset-x-0 bottom-3 z-30 mx-auto w-fit"}},I={static:{top:"",bottom:""},sticky:{top:"sticky top-[calc(0.75rem_+_env(safe-area-inset-top))] z-20",bottom:"sticky bottom-[calc(0.75rem_+_env(safe-area-inset-bottom))] z-20"},fixed:{top:"fixed inset-x-0 top-[calc(0.75rem_+_env(safe-area-inset-top))] z-30 mx-auto w-fit",bottom:"fixed inset-x-0 bottom-[calc(0.75rem_+_env(safe-area-inset-bottom))] z-30 mx-auto w-fit"}};export const Pill=/*@__PURE__*/o.forwardRef(function Pill(b,P){const{variant:C="solid",size:H="md",color:R="secondary",density:A="default",elevation:B=2,startIcon:E,endIcon:F,title:L,description:M,details:S,expanded:q=!1,position:D="static",side:G="top",safeArea:J=!0,className:K,style:O,children:Q,onClick:T,...U}=y(b,["size","density","variant"]),V=o.useRef(null),W=o.useId(),[X,Y]=o.useState(null),Z=m(S);o.useLayoutEffect(()=>{const e=V.current;if(e)return Y(e.scrollHeight),l(e,()=>Y(e.scrollHeight))},[Z]);const ee=Boolean(T),te=u[A][H],ne=t(n,{children:[m(E)?e("span",{className:`flex shrink-0 items-center justify-center overflow-hidden rounded-full [&_img]:size-full [&_img]:object-cover ${f[H]}`,children:E}):null,m(L)||m(M)||m(Q)?t("span",{className:["flex min-w-0 flex-1 flex-col items-center justify-center text-center",N[A][H]].join(" "),children:[m(L)?e("span",{className:"max-w-full truncate",children:L}):null,m(M)?e("span",{className:`max-w-full truncate font-normal ${p[H]}`,children:M}):null,Q]}):null]});return t("div",{ref:P,className:a("inline-flex max-w-full flex-col overflow-hidden align-middle",z[H],"font-medium whitespace-nowrap select-none",r[H],j[C],g,h,d,(J?I:$)[D][G],K??""),style:{...s(R,B,C),...O},...U,children:[t("div",{className:["flex shrink-0 items-center py-1",k[H],c[H],ee?"ps-0":te,m(F)?"pe-1":ee?"pe-0":""].join(" "),children:[ee?e("button",{type:"button",className:["relative flex min-w-0 flex-1 cursor-pointer items-center justify-center self-stretch",z[H],c[H],te,x,"neba-glow",_[C],g,h].join(" "),onPointerMove:i(void 0,!0),"aria-expanded":Z?q:void 0,"aria-controls":Z?W:void 0,onClick:T,children:ne}):ne,m(F)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:F}):null]}),Z?e("div",{id:W,className:["overflow-hidden","[transition:height_var(--neba-duration)_var(--neba-ease)]","motion-reduce:[transition-duration:0ms]"].join(" "),style:{height:q?X??"auto":0},inert:w(!q),children:e("div",{ref:V,className:`whitespace-normal ${te} pb-2 ${v[H]}`,children:S})}):null]})});
+"use client";import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import*as o from"react";import{useLayoutEffectOnClient as i}from"../../internal/layout-effect.js";import{trackPointer as l}from"../../internal/glow.js";import{observeResize as s}from"../../internal/observe.js";import{controlSlots as r,controlTextClasses as a,cx as c,gapClasses as m,hasContent as d,iconClasses as f,iconSizeClasses as x,insetRingClasses as p,metaTextClasses as u,paddingXClasses as h,pressTransitionClasses as v,sheetBodyClasses as b,surfaceClasses as g,transitionClasses as w}from"../../internal/styles.js";import{inertValue as j}from"../../internal/inert.js";import{useStyleDefaults as y}from"../../internal/defaults.js";const _={solid:[g,"text-(--n-on-solid) bg-(--n-fill)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[g,"border text-(--n-on-tint) bg-(--n-panel)","[border-color:var(--n-line)]","[box-shadow:var(--n-elev),var(--neba-plate-glass)]"].join(" "),text:`${g} text-(--n-on-tint) bg-(--n-soft)`},k={solid:"hover:bg-(--n-fill-hover) active:bg-(--n-fill-active)",outline:"hover:bg-(--n-panel-hover) active:bg-(--n-panel-press)",text:"hover:bg-(--n-soft) active:bg-(--n-soft-hover)"},z={xs:"min-h-5.5",sm:"min-h-6.5",md:"min-h-8",lg:"min-h-10",xl:"min-h-12"},N={xs:"rounded-[0.6875rem]",sm:"rounded-[0.8125rem]",md:"rounded-[1rem]",lg:"rounded-[1.25rem]",xl:"rounded-[1.5rem]"},$={default:{xs:"px-3",sm:"px-4",md:"px-5",lg:"px-6",xl:"px-8"},compact:{xs:"px-1.5",sm:"px-2",md:"px-2.5",lg:"px-3",xl:"px-4"}},I={static:{top:"",bottom:""},sticky:{top:"sticky top-3 z-20",bottom:"sticky bottom-3 z-20"},fixed:{top:"fixed inset-x-0 top-3 z-30 mx-auto w-fit",bottom:"fixed inset-x-0 bottom-3 z-30 mx-auto w-fit"}},P={static:{top:"",bottom:""},sticky:{top:"sticky top-[calc(0.75rem_+_env(safe-area-inset-top))] z-20",bottom:"sticky bottom-[calc(0.75rem_+_env(safe-area-inset-bottom))] z-20"},fixed:{top:"fixed inset-x-0 top-[calc(0.75rem_+_env(safe-area-inset-top))] z-30 mx-auto w-fit",bottom:"fixed inset-x-0 bottom-[calc(0.75rem_+_env(safe-area-inset-bottom))] z-30 mx-auto w-fit"}};export const Pill=/*@__PURE__*/o.forwardRef(function Pill(g,C){const{variant:H="solid",size:R="md",color:A="secondary",density:B="default",elevation:F=2,startIcon:M,endIcon:S,title:q,description:D,details:E,expanded:G=!1,position:J="static",side:K="top",safeArea:L=!0,className:O,style:Q,children:T,onClick:U,...V}=y(g,["size","density","variant"]),W=o.useRef(null),X=o.useId(),[Y,Z]=o.useState(null),ee=d(E);i(()=>{const e=W.current;if(e)return Z(e.scrollHeight),s(e,()=>Z(e.scrollHeight))},[ee]);const te=Boolean(U),ne=h[B][R],oe=t(n,{children:[d(M)?e("span",{className:`flex shrink-0 items-center justify-center overflow-hidden rounded-full [&_img]:size-full [&_img]:object-cover ${x[R]}`,children:M}):null,d(q)||d(D)||d(T)?t("span",{className:["flex min-w-0 flex-1 flex-col items-center justify-center text-center",$[B][R]].join(" "),children:[d(q)?e("span",{className:"max-w-full truncate",children:q}):null,d(D)?e("span",{className:`max-w-full truncate font-normal ${u[R]}`,children:D}):null,T]}):null]});return t("div",{ref:C,className:c("inline-flex max-w-full flex-col overflow-hidden align-middle",N[R],"font-medium whitespace-nowrap select-none",a[R],_[H],w,v,f,(L?P:I)[J][K],O??""),style:{...r(A,F,H),...Q},...V,children:[t("div",{className:["flex shrink-0 items-center py-1",z[R],m[R],te?"ps-0":ne,d(S)?"pe-1":te?"pe-0":""].join(" "),children:[te?e("button",{type:"button",className:["relative flex min-w-0 flex-1 cursor-pointer items-center justify-center self-stretch",N[R],m[R],ne,p,"neba-glow",k[H],w,v].join(" "),onPointerMove:l(void 0,!0),"aria-expanded":ee?G:void 0,"aria-controls":ee?X:void 0,onClick:U,children:oe}):oe,d(S)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:S}):null]}),ee?e("div",{id:X,className:["overflow-hidden","[transition:height_var(--neba-duration)_var(--neba-ease)]","motion-reduce:[transition-duration:0ms]"].join(" "),style:{height:G?Y??"auto":0},inert:j(!G),children:e("div",{ref:W,className:`whitespace-normal ${ne} pb-2 ${b[R]}`,children:E})}):null]})});

package/dist/components/progress-box/ProgressBox.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{Progress as s}from"@base-ui/react/progress";import{plateGapClasses as r,plateRadiusClasses as t,plateSizeClasses as n,progressAriaText as i,progressFraction as o,progressSlots as m,progressText as c}from"../../internal/progress.js";import{cx as u,metaTextClasses as f,stackGapClasses as d}from"../../internal/styles.js";import{useStyleDefaults as x}from"../../internal/defaults.js";export const ProgressBox=/*@__PURE__*/l.forwardRef(function ProgressBox(l,b){const{size:h="md",color:p="primary",count:g=4,value:v=null,min:y=0,max:j=100,label:w,showValue:N=!1,format:M,locale:V,className:k,style:z,...A}=x(l,["size","locale"]),B=o(v,y,j),P=null===B,R=void 0!==M,T=Number.isFinite(g)?Math.max(1,Math.floor(g)):1;return a(s.Root,{ref:b,value:P?null:v,min:y,max:j,format:M,locale:V,getAriaValueText:i(B,R),className:u("inline-flex flex-col",d[h],k??""),style:{...m(p),...z},...A,children:[w||N?a("div",{className:["flex items-baseline gap-2",w?"justify-between":"justify-end",f[h]].join(" "),children:[w?e(s.Label,{className:"min-w-0 truncate text-(--neba-fg)",children:w}):null,N?e(s.Value,{className:"shrink-0 tabular-nums text-(--neba-muted-fg)",children:e=>c(B,e,R)}):null]}):null,e(s.Track,{className:`flex ${r[h]}`,children:Array.from({length:T},(a,l)=>e("span",{className:u("relative overflow-hidden bg-(--n-soft)","[box-shadow:var(--neba-plate-glass)]",n[h],t[h],P?"neba-plate-wave":""),style:P?{"--n-i":l}:void 0,children:P?null:e("span",{className:"absolute inset-y-0 start-0 bg-(--n-fill) [transition:width_var(--neba-duration-fill)_var(--neba-ease)]",style:{width:`${Math.min(100,Math.max(0,100*(B*T-l)))}%`}})},l))})]})});
+"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{Progress as s}from"@base-ui/react/progress";import{plateGapClasses as r,plateRadiusClasses as t,plateSizeClasses as n,progressAriaText as i,progressFraction as o,progressSlots as m,progressText as c}from"../../internal/progress.js";import{cx as f,metaTextClasses as u,stackGapClasses as d}from"../../internal/styles.js";import{useStyleDefaults as x}from"../../internal/defaults.js";import{useIntlLocale as b}from"../../internal/media.js";export const ProgressBox=/*@__PURE__*/l.forwardRef(function ProgressBox(l,h){const{size:p="md",color:g="primary",count:v=4,value:j=null,min:y=0,max:w=100,label:N,showValue:M=!1,format:V,locale:k,className:z,style:A,...B}=x(l,["size","locale"]),P=b(k),R=o(j,y,w),T=null===R,$=void 0!==V,_=Number.isFinite(v)?Math.max(1,Math.floor(v)):1;return a(s.Root,{ref:h,value:T?null:j,min:y,max:w,format:V,locale:P,getAriaValueText:i(R,$),className:f("inline-flex flex-col",d[p],z??""),style:{...m(g),...A},...B,children:[N||M?a("div",{className:["flex items-baseline gap-2",N?"justify-between":"justify-end",u[p]].join(" "),children:[N?e(s.Label,{className:"min-w-0 truncate text-(--neba-fg)",children:N}):null,M?e(s.Value,{className:"shrink-0 tabular-nums text-(--neba-muted-fg)",children:e=>c(R,e,$)}):null]}):null,e(s.Track,{className:`flex ${r[p]}`,children:Array.from({length:_},(a,l)=>e("span",{className:f("relative overflow-hidden bg-(--n-soft)","[box-shadow:var(--neba-plate-glass)]",n[p],t[p],T?"neba-plate-wave":""),style:T?{"--n-i":l}:void 0,children:T?null:e("span",{className:"absolute inset-y-0 start-0 bg-(--n-fill) [transition:width_var(--neba-duration-fill)_var(--neba-ease)]",style:{width:`${Math.min(100,Math.max(0,100*(R*_-l)))}%`}})},l))})]})});

package/dist/components/progress-circular/ProgressCircular.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as a from"react";import{Progress as s}from"@base-ui/react/progress";import{progressAriaText as t,progressFraction as l,progressSlots as n,progressText as i,ringDiameters as o,ringStrokes as c}from"../../internal/progress.js";import{cx as m,gapClasses as u,metaTextClasses as f}from"../../internal/styles.js";import{useStyleDefaults as h}from"../../internal/defaults.js";export const ProgressCircular=/*@__PURE__*/a.forwardRef(function ProgressCircular(a,d){const{size:x="md",color:k="primary",value:p=null,min:g=0,max:b=100,label:v,showValue:y=!1,format:$,locale:j,thickness:N,className:w,style:M,...P}=h(a,["size","locale"]),V=l(p,g,b),z=null===V,C=void 0!==$,D=o[x],L=D/2,R=Math.min(Math.max(N??c[x],.5),L/2),W=L-R/2,_=2*Math.PI*W,A=z?`${.28*_} ${_}`:`${_}`,B=z?0:_*(1-V);return r(s.Root,{ref:d,value:z?null:p,min:g,max:b,format:$,locale:j,getAriaValueText:t(V,C),className:m("inline-flex items-center",u[x],f[x],w??""),style:{...n(k),...M},...P,children:[r("svg",{className:z?"neba-ring-spin shrink-0":"shrink-0",width:D,height:D,viewBox:`0 0 ${D} ${D}`,fill:"none","aria-hidden":"true",children:[e("circle",{cx:L,cy:L,r:W,stroke:"var(--n-soft)",strokeWidth:R}),e("circle",{cx:L,cy:L,r:W,stroke:"var(--n-accent)",strokeWidth:R,strokeLinecap:"round",strokeDasharray:A,strokeDashoffset:B,transform:`rotate(-90 ${L} ${L})`,className:"[transition:stroke-dashoffset_var(--neba-duration-fill)_var(--neba-ease)]"})]}),v?e(s.Label,{className:"min-w-0 truncate text-(--neba-fg)",children:v}):null,y?e(s.Value,{className:"shrink-0 tabular-nums text-(--neba-muted-fg)",children:e=>i(V,e,C)}):null]})});
+"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as a from"react";import{Progress as s}from"@base-ui/react/progress";import{progressAriaText as t,progressFraction as n,progressSlots as i,progressText as l,ringDiameters as o,ringStrokes as c}from"../../internal/progress.js";import{cx as m,gapClasses as f,metaTextClasses as u}from"../../internal/styles.js";import{useStyleDefaults as h}from"../../internal/defaults.js";import{useIntlLocale as d}from"../../internal/media.js";export const ProgressCircular=/*@__PURE__*/a.forwardRef(function ProgressCircular(a,x){const{size:p="md",color:k="primary",value:g=null,min:b=0,max:v=100,label:j,showValue:y=!1,format:$,locale:N,thickness:w,className:M,style:P,...V}=h(a,["size","locale"]),z=d(N),C=n(g,b,v),D=null===C,L=void 0!==$,R=o[p],W=R/2,_=Math.min(Math.max(w??c[p],.5),W/2),A=W-_/2,B=2*Math.PI*A,I=D?`${.28*B} ${B}`:`${B}`,T=D?0:B*(1-C);return r(s.Root,{ref:x,value:D?null:g,min:b,max:v,format:$,locale:z,getAriaValueText:t(C,L),className:m("inline-flex items-center",f[p],u[p],M??""),style:{...i(k),...P},...V,children:[r("svg",{className:D?"neba-ring-spin shrink-0":"shrink-0",width:R,height:R,viewBox:`0 0 ${R} ${R}`,fill:"none","aria-hidden":"true",children:[e("circle",{cx:W,cy:W,r:A,stroke:"var(--n-soft)",strokeWidth:_}),e("circle",{cx:W,cy:W,r:A,stroke:"var(--n-accent)",strokeWidth:_,strokeLinecap:"round",strokeDasharray:I,strokeDashoffset:T,transform:`rotate(-90 ${W} ${W})`,className:"[transition:stroke-dashoffset_var(--neba-duration-fill)_var(--neba-ease)]"})]}),j?e(s.Label,{className:"min-w-0 truncate text-(--neba-fg)",children:j}):null,y?e(s.Value,{className:"shrink-0 tabular-nums text-(--neba-muted-fg)",children:e=>l(C,e,L)}):null]})});

package/dist/components/progress-linear/ProgressLinear.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as a from"react";import{Progress as r}from"@base-ui/react/progress";import{barThicknessClasses as s,progressAriaText as n,progressFraction as t,progressSlots as i,progressText as o}from"../../internal/progress.js";import{cx as m,metaTextClasses as u,stackGapClasses as c}from"../../internal/styles.js";import{useStyleDefaults as f}from"../../internal/defaults.js";export const ProgressLinear=/*@__PURE__*/a.forwardRef(function ProgressLinear(a,d){const{size:b="md",color:p="primary",value:g=null,min:x=0,max:h=100,label:j,showValue:v=!1,format:w,locale:y,thickness:N,className:k,style:L,...V}=f(a,["size","locale"]),z=t(g,x,h),P=null===z,R=void 0!==w;return l(r.Root,{ref:d,value:P?null:g,min:x,max:h,format:w,locale:y,getAriaValueText:n(z,R),className:m("flex w-full flex-col",c[b],k??""),style:{...i(p),...L},...V,children:[j||v?l("div",{className:["flex items-baseline gap-2",j?"justify-between":"justify-end",u[b]].join(" "),children:[j?e(r.Label,{className:"min-w-0 truncate text-(--neba-fg)",children:j}):null,v?e(r.Value,{className:"shrink-0 tabular-nums text-(--neba-muted-fg)",children:e=>o(z,e,R)}):null]}):null,e(r.Track,{className:`neba-progress-track relative w-full overflow-hidden rounded-full bg-(--n-soft) ${s[b]}`,style:void 0===N?void 0:{height:`${N}px`},children:e(r.Indicator,{className:["neba-progress-indicator absolute rounded-full bg-(--n-fill)",P?"neba-sweep":"top-0 [transition:width_var(--neba-duration-fill)_var(--neba-ease)]"].join(" ")})})]})});
+"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as a from"react";import{Progress as r}from"@base-ui/react/progress";import{barThicknessClasses as s,progressAriaText as n,progressFraction as t,progressSlots as i,progressText as o}from"../../internal/progress.js";import{cx as m,metaTextClasses as u,stackGapClasses as c}from"../../internal/styles.js";import{useStyleDefaults as f}from"../../internal/defaults.js";import{useIntlLocale as d}from"../../internal/media.js";export const ProgressLinear=/*@__PURE__*/a.forwardRef(function ProgressLinear(a,p){const{size:b="md",color:g="primary",value:x=null,min:h=0,max:j=100,label:v,showValue:w=!1,format:y,locale:N,thickness:k,className:L,style:V,...z}=f(a,["size","locale"]),P=d(N),R=t(x,h,j),T=null===R,$=void 0!==y;return l(r.Root,{ref:p,value:T?null:x,min:h,max:j,format:y,locale:P,getAriaValueText:n(R,$),className:m("flex w-full flex-col",c[b],L??""),style:{...i(g),...V},...z,children:[v||w?l("div",{className:["flex items-baseline gap-2",v?"justify-between":"justify-end",u[b]].join(" "),children:[v?e(r.Label,{className:"min-w-0 truncate text-(--neba-fg)",children:v}):null,w?e(r.Value,{className:"shrink-0 tabular-nums text-(--neba-muted-fg)",children:e=>o(R,e,$)}):null]}):null,e(r.Track,{className:`neba-progress-track relative w-full overflow-hidden rounded-full bg-(--n-soft) ${s[b]}`,style:void 0===k?void 0:{height:`${k}px`},children:e(r.Indicator,{className:["neba-progress-indicator absolute rounded-full bg-(--n-fill)",T?"neba-sweep":"top-0 [transition:width_var(--neba-duration-fill)_var(--neba-ease)]"].join(" ")})})]})});