@womp/kookie-ui 0.22.1 → 0.24.0

package/dist/cjs/components/virtual-menu.d.ts

@@ -98,10 +98,6 @@ interface VirtualMenuProps<T> {
     /** Accessible label for the menu */
     'aria-label'?: string;
 }
-declare function VirtualMenuRoot<T>({ items, itemLabel, renderItem: RenderItem, size: sizeProp, estimatedItemSize: estimatedItemSizeProp, overscan, onSelect, className, style, 'aria-label': ariaLabel, }: VirtualMenuProps<T>): React.JSX.Element;
-declare namespace VirtualMenuRoot {
-    var displayName: string;
-}
 interface VirtualMenuItemProps extends React.ComponentPropsWithoutRef<'div'> {
     children: React.ReactNode;
     /** Data attribute for highlight styling */
@@ -109,7 +105,9 @@ interface VirtualMenuItemProps extends React.ComponentPropsWithoutRef<'div'> {
     /** Data attribute for event delegation */
     'data-index'?: number;
 }
-declare const VirtualMenu: typeof VirtualMenuRoot & {
+declare const VirtualMenu: (<T>(props: VirtualMenuProps<T> & React.RefAttributes<HTMLDivElement>) => React.ReactElement) & {
+    displayName?: string;
+} & {
     Item: React.NamedExoticComponent<VirtualMenuItemProps & React.RefAttributes<HTMLDivElement>>;
 };
 export { VirtualMenu };

package/dist/cjs/components/virtual-menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"virtual-menu.d.ts","sourceRoot":"","sources":["../../../src/components/virtual-menu.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAE5D;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAMH,mDAAmD;AACnD,UAAU,0BAA0B,CAAC,CAAC;IACpC,oBAAoB;IACpB,IAAI,EAAE,CAAC,CAAC;IACR,+BAA+B;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,iDAAiD;IACjD,aAAa,EAAE,OAAO,CAAC;IACvB,kCAAkC;IAClC,EAAE,EAAE,MAAM,CAAC;IACX,2CAA2C;IAC3C,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC;IAC3B,qCAAqC;IACrC,QAAQ,EAAE,MAAM,CAAC;IACjB,qCAAqC;IACrC,kBAAkB,EAAE,IAAI,GAAG,SAAS,CAAC;IACrC,0CAA0C;IAC1C,YAAY,EAAE,MAAM,CAAC;IACrB,0BAA0B;IAC1B,YAAY,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACzD,0BAA0B;IAC1B,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,oBAAoB;IACpB,OAAO,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACpD,kDAAkD;IAClD,SAAS,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CAC1D;AAED,UAAU,gBAAgB,CAAC,CAAC;IAC1B,+BAA+B;IAC/B,KAAK,EAAE,CAAC,EAAE,CAAC;IACX;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IACrD;;;;;;;;OAQG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,0BAA0B,CAAC,CAAC,CAAC,CAAC,CAAC;IAChE;;;;;OAKG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC,CAAC;IACzD,qDAAqD;IACrD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,wCAAwC;IACxC,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wBAAwB;IACxB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,oCAAoC;IACpC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAqED,iBAAS,eAAe,CAAC,CAAC,EAAE,EAC1B,KAAK,EACL,SAAS,EACT,UAAU,EAAE,UAAU,EACtB,IAAI,EAAE,QAAQ,EACd,iBAAiB,EAAE,qBAAqB,EACxC,QAAY,EACZ,QAAQ,EACR,SAAS,EACT,KAAK,EACL,YAAY,EAAE,SAAS,GACxB,EAAE,gBAAgB,CAAC,CAAC,CAAC,qBA6OrB;kBAxPQ,eAAe;;;AAgQxB,UAAU,oBAAqB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC;IAC1E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,2CAA2C;IAC3C,kBAAkB,CAAC,EAAE,IAAI,GAAG,SAAS,CAAC;IACtC,0CAA0C;IAC1C,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAqCD,QAAA,MAAM,WAAW;;CAEf,CAAC;AAEH,OAAO,EAAE,WAAW,EAAE,CAAC;AACvB,YAAY,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,0BAA0B,EAAE,CAAC"}
+{"version":3,"file":"virtual-menu.d.ts","sourceRoot":"","sources":["../../../src/components/virtual-menu.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAE5D;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAMH,mDAAmD;AACnD,UAAU,0BAA0B,CAAC,CAAC;IACpC,oBAAoB;IACpB,IAAI,EAAE,CAAC,CAAC;IACR,+BAA+B;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,iDAAiD;IACjD,aAAa,EAAE,OAAO,CAAC;IACvB,kCAAkC;IAClC,EAAE,EAAE,MAAM,CAAC;IACX,2CAA2C;IAC3C,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC;IAC3B,qCAAqC;IACrC,QAAQ,EAAE,MAAM,CAAC;IACjB,qCAAqC;IACrC,kBAAkB,EAAE,IAAI,GAAG,SAAS,CAAC;IACrC,0CAA0C;IAC1C,YAAY,EAAE,MAAM,CAAC;IACrB,0BAA0B;IAC1B,YAAY,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACzD,0BAA0B;IAC1B,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,oBAAoB;IACpB,OAAO,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACpD,kDAAkD;IAClD,SAAS,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CAC1D;AAED,UAAU,gBAAgB,CAAC,CAAC;IAC1B,+BAA+B;IAC/B,KAAK,EAAE,CAAC,EAAE,CAAC;IACX;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IACrD;;;;;;;;OAQG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,0BAA0B,CAAC,CAAC,CAAC,CAAC,CAAC;IAChE;;;;;OAKG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC,CAAC;IACzD,qDAAqD;IACrD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,wCAAwC;IACxC,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wBAAwB;IACxB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,oCAAoC;IACpC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AA8YD,UAAU,oBAAqB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC;IAC1E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,2CAA2C;IAC3C,kBAAkB,CAAC,EAAE,IAAI,GAAG,SAAS,CAAC;IACtC,0CAA0C;IAC1C,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAqCD,QAAA,MAAM,WAAW,IApDmD,CAAC,SAC5D,gBAAgB,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC,KAC7D,KAAK,CAAC,YAAY;kBAAoB,MAAM;;;CAoD/C,CAAC;AAEH,OAAO,EAAE,WAAW,EAAE,CAAC;AACvB,YAAY,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,0BAA0B,EAAE,CAAC"}

package/dist/cjs/components/virtual-menu.js

@@ -1,2 +1,2 @@
-"use strict";"use client";var Z=Object.create;var v=Object.defineProperty;var ee=Object.getOwnPropertyDescriptor;var te=Object.getOwnPropertyNames;var ne=Object.getPrototypeOf,re=Object.prototype.hasOwnProperty;var ie=(e,t)=>{for(var a in t)v(e,a,{get:t[a],enumerable:!0})},P=(e,t,a,u)=>{if(t&&typeof t=="object"||typeof t=="function")for(let c of te(t))!re.call(e,c)&&c!==a&&v(e,c,{get:()=>t[c],enumerable:!(u=ee(t,c))||u.enumerable});return e};var H=(e,t,a)=>(a=e!=null?Z(ne(e)):{},P(t||!e||!e.__esModule?v(a,"default",{value:e,enumerable:!0}):a,e)),ae=e=>P(v({},"__esModule",{value:!0}),e);var de={};ie(de,{VirtualMenu:()=>le});module.exports=ae(de);var n=H(require("react")),y=H(require("classnames")),w=require("@tanstack/react-virtual");var l=H(require("react"));var oe=l.createContext({isInsideMenu:!1}),se={1:24,2:30,3:34,4:38};function C(e){return se[e]}function L(){return l.useContext(oe)}var ue=n.memo(function({label:t,isHighlighted:a,id:u,style:c,tabIndex:S,"data-highlighted":h,"data-index":k,onMouseEnter:g,onMouseLeave:T,onClick:M,onKeyDown:R}){return n.createElement("div",{id:u,role:"menuitem",className:(0,y.default)("kui-reset","kui-BaseMenuItem","kui-VirtualMenuItem"),style:c,tabIndex:S,"data-highlighted":h,"data-index":k,onMouseEnter:g,onMouseLeave:T,onClick:M,onKeyDown:R},t)},(e,t)=>!(e.label!==t.label||e["data-highlighted"]!==t["data-highlighted"]||e.style.height!==t.style.height||e.style.transform!==t.style.transform||e.tabIndex!==t.tabIndex||e.id!==t.id));function K({items:e,itemLabel:t,renderItem:a,size:u,estimatedItemSize:c,overscan:S=5,onSelect:h,className:k,style:g,"aria-label":T}){let M=n.useId(),R=n.useRef(null),[E,d]=n.useState(-1),{isInsideMenu:j,size:A,itemHeight:B}=L(),I=c??(u?C(u):B??C(A??"2"));if(!t&&!a)throw new Error("VirtualMenu requires either itemLabel or renderItem prop");let _=n.useMemo(()=>t?typeof t=="function"?t:r=>r[t]:null,[t]),m=n.useMemo(()=>e.length===0||E<0?-1:Math.min(E,e.length-1),[E,e.length]),q=n.useMemo(()=>typeof I=="function"?I:()=>I,[I]),p=(0,w.useVirtualizer)({count:e.length,getScrollElement:()=>R.current,estimateSize:q,overscan:S}),O=p.getVirtualItems(),b=n.useRef(e),x=n.useRef(h);b.current=e,x.current=h;let f=n.useRef(p.scrollToIndex);f.current=p.scrollToIndex;let z=n.useRef(m);z.current=m;let U=n.useCallback(r=>{let s=r.currentTarget.dataset.index;s!=null&&d(Number(s))},[]),W=n.useCallback(r=>{let s=r.currentTarget.dataset.index;if(s!=null){let i=Number(s),o=b.current;i>=0&&i<o.length&&x.current?.(o[i],i)}},[]),Y=n.useCallback(()=>{},[]),F=n.useCallback(r=>{if(r.key==="Enter"||r.key===" "){r.preventDefault();let s=r.currentTarget.dataset.index;if(s!=null){let i=Number(s),o=b.current;i>=0&&i<o.length&&x.current?.(o[i],i)}}},[]),G=n.useCallback(r=>{let s=b.current,i=z.current;switch(r.key){case"ArrowDown":{r.preventDefault();let o=i<s.length-1?i+1:0;d(o),f.current(o,{align:"auto"});break}case"ArrowUp":{r.preventDefault();let o=i>0?i-1:s.length-1;d(o),f.current(o,{align:"auto"});break}case"Home":{r.preventDefault(),d(0),f.current(0,{align:"start"});break}case"End":{r.preventDefault();let o=s.length-1;d(o),f.current(o,{align:"end"});break}case"Enter":case" ":{r.preventDefault(),i>=0&&i<s.length&&x.current?.(s[i],i);break}case"Tab":{r.preventDefault();break}case"Escape":{r.currentTarget.blur();break}}},[]),V=n.useCallback(r=>`${M}-item-${r}`,[M]),J=n.useMemo(()=>({overflow:"auto",position:"relative",...g}),[g]),N=p.getTotalSize(),Q=n.useMemo(()=>({height:`${N}px`,width:"100%",position:"relative"}),[N]);return n.createElement("div",{ref:R,role:j?"group":"menu","aria-label":T,"aria-activedescendant":m>=0?V(m):void 0,tabIndex:0,onKeyDown:G,className:(0,y.default)("kui-VirtualMenuRoot",k),style:J},n.createElement("div",{className:"kui-VirtualMenuViewport",style:Q},O.map(r=>{let s=e[r.index],i=r.index,o=m===i,X={height:r.size,transform:`translateY(${r.start}px)`},D={id:V(i),isHighlighted:o,style:X,tabIndex:o?0:-1,"data-highlighted":o?!0:void 0,"data-index":i,onMouseEnter:U,onMouseLeave:Y,onClick:W,onKeyDown:F};return a?n.createElement(a,{key:r.key,item:s,index:i,...D}):n.createElement(ue,{key:r.key,label:_(s),...D})})))}K.displayName="VirtualMenu";var $=n.forwardRef(({className:e,children:t,...a},u)=>n.createElement("div",{ref:u,role:"menuitem",className:(0,y.default)("kui-reset","kui-BaseMenuItem","kui-VirtualMenuItem",e),...a},t));$.displayName="VirtualMenu.Item";var ce=n.memo($,(e,t)=>{let a=e.style,u=t.style;return!(a?.height!==u?.height||a?.transform!==u?.transform||e["data-highlighted"]!==t["data-highlighted"]||e.tabIndex!==t.tabIndex||e.id!==t.id||e.className!==t.className||e.children!==t.children)}),le=Object.assign(K,{Item:ce});
+"use strict";"use client";var se=Object.create;var T=Object.defineProperty;var ce=Object.getOwnPropertyDescriptor;var le=Object.getOwnPropertyNames;var de=Object.getPrototypeOf,me=Object.prototype.hasOwnProperty;var fe=(n,r)=>{for(var a in r)T(n,a,{get:r[a],enumerable:!0})},A=(n,r,a,u)=>{if(r&&typeof r=="object"||typeof r=="function")for(let c of le(r))!me.call(n,c)&&c!==a&&T(n,c,{get:()=>r[c],enumerable:!(u=ce(r,c))||u.enumerable});return n};var z=(n,r,a)=>(a=n!=null?se(de(n)):{},A(r||!n||!n.__esModule?T(a,"default",{value:n,enumerable:!0}):a,n)),he=n=>A(T({},"__esModule",{value:!0}),n);var xe={};fe(xe,{VirtualMenu:()=>be});module.exports=he(xe);var t=z(require("react")),k=z(require("classnames")),_=require("@tanstack/react-virtual");var d=z(require("react"));var Me=d.createContext({isInsideMenu:!1}),ge={1:24,2:30,3:34,4:38};function L(n){return ge[n]}function B(){return d.useContext(Me)}var $=d.createContext(void 0),Ee=$.Provider;function O(){return d.useContext($)}var Re=t.memo(function({label:r,isHighlighted:a,id:u,style:c,tabIndex:f,"data-highlighted":l,"data-index":h,onMouseEnter:x,onMouseLeave:C,onClick:m,onKeyDown:y}){return t.createElement("div",{id:u,role:"menuitem",className:(0,k.default)("kui-reset","kui-BaseMenuItem","kui-VirtualMenuItem"),style:c,tabIndex:f,"data-highlighted":l,"data-index":h,onMouseEnter:x,onMouseLeave:C,onClick:m,onKeyDown:y},r)},(n,r)=>!(n.label!==r.label||n["data-highlighted"]!==r["data-highlighted"]||n.style.height!==r.style.height||n.style.transform!==r.style.transform||n.tabIndex!==r.tabIndex||n.id!==r.id));function pe(n,r,a){let[u,c]=t.useState(void 0);return t.useLayoutEffect(()=>{let f=n.current;if(!r||!f)return;let l=document.createElement("div");l.className="kui-reset kui-BaseMenuItem kui-VirtualMenuItem",l.setAttribute("aria-hidden","true"),l.style.visibility="hidden",l.textContent="\xA0",f.appendChild(l);let h=l.getBoundingClientRect().height;l.remove(),c(h>0?h:void 0)},[n,r,a]),r?u:void 0}function Ie({items:n,itemLabel:r,renderItem:a,size:u,estimatedItemSize:c,overscan:f=5,onSelect:l,className:h,style:x,"aria-label":C},m){let y=t.useId(),E=t.useRef(null),[H,M]=t.useState(-1),{isInsideMenu:g,size:D,itemHeight:W}=B(),N=O(),Y=t.useCallback(e=>{E.current=e,typeof m=="function"?m(e):m&&(m.current=e)},[m]),G=pe(E,g&&u==null&&c==null,D),I=c??(u?L(u):G??W??L(D??"2"));if(!r&&!a)throw new Error("VirtualMenu requires either itemLabel or renderItem prop");let J=t.useMemo(()=>r?typeof r=="function"?r:e=>e[r]:null,[r]),v=t.useMemo(()=>n.length===0||H<0?-1:Math.min(H,n.length-1),[H,n.length]),Q=t.useMemo(()=>typeof I=="function"?I:()=>I,[I]),R=(0,_.useVirtualizer)({count:n.length,getScrollElement:()=>E.current,estimateSize:Q,overscan:f}),X=R.getVirtualItems();t.useLayoutEffect(()=>{R.measure()},[R,I]),t.useEffect(()=>{let e=E.current;if(!g||!e)return;let i=e.closest("[data-radix-menu-content]");if(!i)return;let s=o=>{o.target===i&&e.focus({preventScroll:!0})};return i.addEventListener("focusin",s),document.activeElement===i&&e.focus({preventScroll:!0}),()=>i.removeEventListener("focusin",s)},[g]);let S=t.useRef(n),P=t.useRef(l),w=t.useRef(N);S.current=n,P.current=l,w.current=N;let p=t.useCallback(e=>{let i=S.current;e<0||e>=i.length||(P.current?.(i[e],e),w.current?.())},[]),b=t.useRef(R.scrollToIndex);b.current=R.scrollToIndex;let V=t.useRef(v);V.current=v;let Z=t.useCallback(e=>{let i=e.currentTarget.dataset.index;i!=null&&M(Number(i))},[]),ee=t.useCallback(e=>{let i=e.currentTarget.dataset.index;i!=null&&p(Number(i))},[p]),te=t.useCallback(()=>{},[]),ne=t.useCallback(e=>{if(e.key==="Enter"||e.key===" "){e.preventDefault(),e.stopPropagation();let i=e.currentTarget.dataset.index;i!=null&&p(Number(i))}},[p]),re=t.useCallback(e=>{let i=S.current,s=V.current;switch(e.key){case"ArrowDown":{e.preventDefault();let o=s<i.length-1?s+1:0;M(o),b.current(o,{align:"auto"});break}case"ArrowUp":{e.preventDefault();let o=s>0?s-1:i.length-1;M(o),b.current(o,{align:"auto"});break}case"Home":{e.preventDefault(),M(0),b.current(0,{align:"start"});break}case"End":{e.preventDefault();let o=i.length-1;M(o),b.current(o,{align:"end"});break}case"Enter":case" ":{e.preventDefault(),p(s);break}case"Tab":{e.preventDefault();break}case"Escape":{g||e.currentTarget.blur();break}}},[p,g]),ie=t.useCallback(e=>{e.target===e.currentTarget&&V.current<0&&S.current.length>0&&M(0)},[]),K=t.useCallback(e=>`${y}-item-${e}`,[y]),ae=t.useMemo(()=>({overflow:"auto",position:"relative",...x}),[x]),F=R.getTotalSize(),ue=t.useMemo(()=>({height:`${F}px`,width:"100%",position:"relative"}),[F]);return t.createElement("div",{ref:Y,role:g?"group":"menu","aria-label":C,"aria-activedescendant":v>=0?K(v):void 0,tabIndex:0,onKeyDown:re,onFocus:ie,className:(0,k.default)("kui-VirtualMenuRoot",h),style:ae},t.createElement("div",{className:"kui-VirtualMenuViewport",style:ue},X.map(e=>{let i=n[e.index],s=e.index,o=v===s,oe={height:e.size,transform:`translateY(${e.start}px)`},j={id:K(s),isHighlighted:o,style:oe,tabIndex:o?0:-1,"data-highlighted":o?!0:void 0,"data-index":s,onMouseEnter:Z,onMouseLeave:te,onClick:ee,onKeyDown:ne};return a?t.createElement(a,{key:e.key,item:i,index:s,...j}):t.createElement(Re,{key:e.key,label:J(i),...j})})))}var q=t.forwardRef(Ie);q.displayName="VirtualMenu";var U=t.forwardRef(({className:n,children:r,...a},u)=>t.createElement("div",{ref:u,role:"menuitem",className:(0,k.default)("kui-reset","kui-BaseMenuItem","kui-VirtualMenuItem",n),...a},r));U.displayName="VirtualMenu.Item";var ve=t.memo(U,(n,r)=>{let a=n.style,u=r.style;return!(a?.height!==u?.height||a?.transform!==u?.transform||n["data-highlighted"]!==r["data-highlighted"]||n.tabIndex!==r.tabIndex||n.id!==r.id||n.className!==r.className||n.children!==r.children)}),be=Object.assign(q,{Item:ve});
 //# sourceMappingURL=virtual-menu.js.map

package/dist/cjs/components/virtual-menu.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/virtual-menu.tsx", "../../../src/components/_internal/menu-context.tsx"],
-  "sourcesContent": ["'use client';\n\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport { useVirtualizer } from '@tanstack/react-virtual';\nimport { useMenuContext, getMenuItemHeight } from './_internal/menu-context.js';\n\nimport type { MenuSize } from './_internal/menu-context.js';\n\n/**\n * VirtualMenu - A virtualized menu component for rendering large lists efficiently.\n *\n * Uses TanStack Virtual to render only visible items.\n * Works inside any container (DropdownMenu.Content, Popover.Content, etc.)\n *\n * @example\n * // Simple usage with itemLabel\n * <VirtualMenu\n *   items={items}\n *   itemLabel={(item) => item.name}\n *   onSelect={handleSelect}\n * />\n *\n * @example\n * // Custom rendering with renderItem\n * const UserItem = React.memo(({ item, ...props }) => (\n *   <VirtualMenu.Item {...props}>\n *     <Avatar src={item.avatar} />\n *     {item.name}\n *   </VirtualMenu.Item>\n * ));\n *\n * <VirtualMenu items={users} renderItem={UserItem} onSelect={handleSelect} />\n */\n\n// ============================================================================\n// Types\n// ============================================================================\n\n/** Props passed to custom renderItem components */\ninterface VirtualMenuRenderItemProps<T> {\n  /** The item data */\n  item: T;\n  /** Index in the items array */\n  index: number;\n  /** Whether this item is currently highlighted */\n  isHighlighted: boolean;\n  /** Unique ID for accessibility */\n  id: string;\n  /** Positioning styles - must be applied */\n  style: React.CSSProperties;\n  /** Tab index for focus management */\n  tabIndex: number;\n  /** Data attribute for CSS styling */\n  'data-highlighted': true | undefined;\n  /** Data attribute for event delegation */\n  'data-index': number;\n  /** Mouse enter handler */\n  onMouseEnter: (e: React.MouseEvent<HTMLElement>) => void;\n  /** Mouse leave handler */\n  onMouseLeave: () => void;\n  /** Click handler */\n  onClick: (e: React.MouseEvent<HTMLElement>) => void;\n  /** Keyboard handler for Enter/Space activation */\n  onKeyDown: (e: React.KeyboardEvent<HTMLElement>) => void;\n}\n\ninterface VirtualMenuProps<T> {\n  /** Array of items to render */\n  items: T[];\n  /**\n   * Simple label accessor for basic text items.\n   * Can be a property key or a function.\n   * @example\n   * itemLabel=\"name\"\n   * itemLabel={(item) => item.name}\n   */\n  itemLabel?: keyof T | ((item: T) => React.ReactNode);\n  /**\n   * Custom component for rendering items.\n   * Must be memoized (React.memo) for optimal performance.\n   * @example\n   * const MyItem = React.memo(({ item, ...props }) => (\n   *   <VirtualMenu.Item {...props}>{item.name}</VirtualMenu.Item>\n   * ));\n   * <VirtualMenu items={items} renderItem={MyItem} />\n   */\n  renderItem?: React.ComponentType<VirtualMenuRenderItemProps<T>>;\n  /**\n   * Menu size - controls item height.\n   * Automatically inherited from parent DropdownMenu.Content/ContextMenu.Content.\n   * Only set manually when using VirtualMenu outside of a menu context.\n   * @default '2' (or inherited from context)\n   */\n  size?: MenuSize;\n  /**\n   * Estimated height of each item in pixels.\n   * Can be a number (same for all) or a function (per-item).\n   * Usually not needed - height is automatically derived from size prop/context.\n   * Use this only for custom item heights (e.g., variable height items).\n   */\n  estimatedItemSize?: number | ((index: number) => number);\n  /** Number of items to render outside visible area */\n  overscan?: number;\n  /** Callback when an item is selected */\n  onSelect?: (item: T, index: number) => void;\n  /** Additional class name */\n  className?: string;\n  /** Additional styles */\n  style?: React.CSSProperties;\n  /** Accessible label for the menu */\n  'aria-label'?: string;\n}\n\n// ============================================================================\n// Internal Memoized Item Component\n// ============================================================================\n\ninterface SimpleItemProps {\n  label: React.ReactNode;\n  isHighlighted: boolean;\n  id: string;\n  style: React.CSSProperties;\n  tabIndex: number;\n  'data-highlighted': true | undefined;\n  'data-index': number;\n  onMouseEnter: (e: React.MouseEvent<HTMLElement>) => void;\n  onMouseLeave: () => void;\n  onClick: (e: React.MouseEvent<HTMLElement>) => void;\n  onKeyDown: (e: React.KeyboardEvent<HTMLElement>) => void;\n}\n\nconst SimpleItem = React.memo(\n  function SimpleItem({\n    label,\n    isHighlighted: _isHighlighted,\n    id,\n    style,\n    tabIndex,\n    'data-highlighted': dataHighlighted,\n    'data-index': dataIndex,\n    onMouseEnter,\n    onMouseLeave,\n    onClick,\n    onKeyDown,\n  }: SimpleItemProps) {\n    return (\n      <div\n        id={id}\n        role=\"menuitem\"\n        className={classNames('kui-reset', 'kui-BaseMenuItem', 'kui-VirtualMenuItem')}\n        style={style}\n        tabIndex={tabIndex}\n        data-highlighted={dataHighlighted}\n        data-index={dataIndex}\n        onMouseEnter={onMouseEnter}\n        onMouseLeave={onMouseLeave}\n        onClick={onClick}\n        onKeyDown={onKeyDown}\n      >\n        {label}\n      </div>\n    );\n  },\n  (prev, next) => {\n    // Custom comparison - only re-render if these change\n    if (prev.label !== next.label) return false;\n    if (prev['data-highlighted'] !== next['data-highlighted']) return false;\n    if (prev.style.height !== next.style.height) return false;\n    if (prev.style.transform !== next.style.transform) return false;\n    if (prev.tabIndex !== next.tabIndex) return false;\n    if (prev.id !== next.id) return false;\n    // Event handlers are stable, skip comparison\n    return true;\n  },\n);\n\n// ============================================================================\n// VirtualMenu Component\n// ============================================================================\n\nfunction VirtualMenuRoot<T>({\n  items,\n  itemLabel,\n  renderItem: RenderItem,\n  size: sizeProp,\n  estimatedItemSize: estimatedItemSizeProp,\n  overscan = 5,\n  onSelect,\n  className,\n  style,\n  'aria-label': ariaLabel,\n}: VirtualMenuProps<T>) {\n  const menuId = React.useId();\n  const parentRef = React.useRef<HTMLDivElement>(null);\n  const [highlightedIndex, setHighlightedIndex] = React.useState<number>(-1);\n  const { isInsideMenu, size: contextSize, itemHeight: contextItemHeight } = useMenuContext();\n\n  // Resolve item height: explicit prop > own size > parent menu > default size '2'.\n  // Heights follow the theme scaling, like the --base-menu-item-height token.\n  const estimatedItemSize =\n    estimatedItemSizeProp ??\n    (sizeProp\n      ? getMenuItemHeight(sizeProp)\n      : (contextItemHeight ?? getMenuItemHeight(contextSize ?? '2')));\n\n  // Validate props\n  if (!itemLabel && !RenderItem) {\n    throw new Error('VirtualMenu requires either itemLabel or renderItem prop');\n  }\n\n  // Normalize itemLabel to a function\n  const getLabel = React.useMemo(() => {\n    if (!itemLabel) return null;\n    if (typeof itemLabel === 'function') return itemLabel;\n    return (item: T) => item[itemLabel] as React.ReactNode;\n  }, [itemLabel]);\n\n  // Derive safe highlighted index\n  const safeHighlightedIndex = React.useMemo(() => {\n    if (items.length === 0) return -1;\n    if (highlightedIndex < 0) return -1;\n    return Math.min(highlightedIndex, items.length - 1);\n  }, [highlightedIndex, items.length]);\n\n  // Normalize estimatedItemSize to a function\n  const getItemSize = React.useMemo(\n    () =>\n      typeof estimatedItemSize === 'function'\n        ? estimatedItemSize\n        : () => estimatedItemSize,\n    [estimatedItemSize],\n  );\n\n  const virtualizer = useVirtualizer({\n    count: items.length,\n    getScrollElement: () => parentRef.current,\n    estimateSize: getItemSize,\n    overscan,\n  });\n\n  const virtualItems = virtualizer.getVirtualItems();\n\n  // Refs for stable handler references\n  const itemsRef = React.useRef(items);\n  const onSelectRef = React.useRef(onSelect);\n  itemsRef.current = items;\n  onSelectRef.current = onSelect;\n\n  const scrollToIndexRef = React.useRef(virtualizer.scrollToIndex);\n  scrollToIndexRef.current = virtualizer.scrollToIndex;\n\n  const highlightedIndexRef = React.useRef(safeHighlightedIndex);\n  highlightedIndexRef.current = safeHighlightedIndex;\n\n  // Stable event handlers\n  const handleItemMouseEnter = React.useCallback((e: React.MouseEvent<HTMLElement>) => {\n    const index = e.currentTarget.dataset.index;\n    if (index != null) {\n      setHighlightedIndex(Number(index));\n    }\n  }, []);\n\n  const handleItemClick = React.useCallback((e: React.MouseEvent<HTMLElement>) => {\n    const index = e.currentTarget.dataset.index;\n    if (index != null) {\n      const idx = Number(index);\n      const currentItems = itemsRef.current;\n      if (idx >= 0 && idx < currentItems.length) {\n        onSelectRef.current?.(currentItems[idx], idx);\n      }\n    }\n  }, []);\n\n  const noop = React.useCallback(() => {}, []);\n\n  // Item-level keyboard handler for Enter/Space activation (satisfies a11y lint rule)\n  const handleItemKeyDown = React.useCallback((e: React.KeyboardEvent<HTMLElement>) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      const index = e.currentTarget.dataset.index;\n      if (index != null) {\n        const idx = Number(index);\n        const currentItems = itemsRef.current;\n        if (idx >= 0 && idx < currentItems.length) {\n          onSelectRef.current?.(currentItems[idx], idx);\n        }\n      }\n    }\n  }, []);\n\n  // Keyboard navigation\n  const handleKeyDown = React.useCallback((e: React.KeyboardEvent) => {\n    const currentItems = itemsRef.current;\n    const currentHighlightedIndex = highlightedIndexRef.current;\n\n    switch (e.key) {\n      case 'ArrowDown': {\n        e.preventDefault();\n        const nextIndex =\n          currentHighlightedIndex < currentItems.length - 1 ? currentHighlightedIndex + 1 : 0;\n        setHighlightedIndex(nextIndex);\n        scrollToIndexRef.current(nextIndex, { align: 'auto' });\n        break;\n      }\n      case 'ArrowUp': {\n        e.preventDefault();\n        const prevIndex =\n          currentHighlightedIndex > 0 ? currentHighlightedIndex - 1 : currentItems.length - 1;\n        setHighlightedIndex(prevIndex);\n        scrollToIndexRef.current(prevIndex, { align: 'auto' });\n        break;\n      }\n      case 'Home': {\n        e.preventDefault();\n        setHighlightedIndex(0);\n        scrollToIndexRef.current(0, { align: 'start' });\n        break;\n      }\n      case 'End': {\n        e.preventDefault();\n        const lastIndex = currentItems.length - 1;\n        setHighlightedIndex(lastIndex);\n        scrollToIndexRef.current(lastIndex, { align: 'end' });\n        break;\n      }\n      case 'Enter':\n      case ' ': {\n        e.preventDefault();\n        if (currentHighlightedIndex >= 0 && currentHighlightedIndex < currentItems.length) {\n          onSelectRef.current?.(currentItems[currentHighlightedIndex], currentHighlightedIndex);\n        }\n        break;\n      }\n      case 'Tab': {\n        e.preventDefault();\n        break;\n      }\n      case 'Escape': {\n        (e.currentTarget as HTMLElement).blur();\n        break;\n      }\n    }\n  }, []);\n\n  // Item ID generator\n  const getItemId = React.useCallback(\n    (index: number) => `${menuId}-item-${index}`,\n    [menuId],\n  );\n\n  // Memoize styles\n  const rootStyle = React.useMemo(\n    () => ({\n      overflow: 'auto' as const,\n      position: 'relative' as const,\n      ...style,\n    }),\n    [style],\n  );\n\n  const totalSize = virtualizer.getTotalSize();\n  const viewportStyle = React.useMemo(\n    () => ({\n      height: `${totalSize}px`,\n      width: '100%' as const,\n      position: 'relative' as const,\n    }),\n    [totalSize],\n  );\n\n  return (\n    <div\n      ref={parentRef}\n      role={isInsideMenu ? 'group' : 'menu'}\n      aria-label={ariaLabel}\n      aria-activedescendant={safeHighlightedIndex >= 0 ? getItemId(safeHighlightedIndex) : undefined}\n      tabIndex={0}\n      onKeyDown={handleKeyDown}\n      className={classNames('kui-VirtualMenuRoot', className)}\n      style={rootStyle}\n    >\n      <div className=\"kui-VirtualMenuViewport\" style={viewportStyle}>\n        {virtualItems.map((virtualRow) => {\n          const item = items[virtualRow.index];\n          const index = virtualRow.index;\n          const isHighlighted = safeHighlightedIndex === index;\n\n          const itemStyle: React.CSSProperties = {\n            height: virtualRow.size,\n            transform: `translateY(${virtualRow.start}px)`,\n          };\n\n          const commonProps = {\n            id: getItemId(index),\n            isHighlighted,\n            style: itemStyle,\n            tabIndex: isHighlighted ? 0 : -1,\n            'data-highlighted': isHighlighted ? true as const : undefined,\n            'data-index': index,\n            onMouseEnter: handleItemMouseEnter,\n            onMouseLeave: noop,\n            onClick: handleItemClick,\n            onKeyDown: handleItemKeyDown,\n          };\n\n          // Use renderItem if provided, otherwise use SimpleItem with itemLabel\n          if (RenderItem) {\n            return (\n              <RenderItem\n                key={virtualRow.key}\n                item={item}\n                index={index}\n                {...commonProps}\n              />\n            );\n          }\n\n          return (\n            <SimpleItem\n              key={virtualRow.key}\n              label={getLabel!(item)}\n              {...commonProps}\n            />\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n\nVirtualMenuRoot.displayName = 'VirtualMenu';\n\n// ============================================================================\n// VirtualMenu.Item Component (for custom renderItem usage)\n// ============================================================================\n\ninterface VirtualMenuItemProps extends React.ComponentPropsWithoutRef<'div'> {\n  children: React.ReactNode;\n  /** Data attribute for highlight styling */\n  'data-highlighted'?: true | undefined;\n  /** Data attribute for event delegation */\n  'data-index'?: number;\n}\n\nconst VirtualMenuItemInner = React.forwardRef<HTMLDivElement, VirtualMenuItemProps>(\n  ({ className, children, ...props }, forwardedRef) => {\n    return (\n      <div\n        ref={forwardedRef}\n        role=\"menuitem\"\n        className={classNames('kui-reset', 'kui-BaseMenuItem', 'kui-VirtualMenuItem', className)}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\nVirtualMenuItemInner.displayName = 'VirtualMenu.Item';\n\n// Memoized with custom comparison\nconst VirtualMenuItem = React.memo(VirtualMenuItemInner, (prevProps, nextProps) => {\n  const prevStyle = prevProps.style as React.CSSProperties | undefined;\n  const nextStyle = nextProps.style as React.CSSProperties | undefined;\n  if (prevStyle?.height !== nextStyle?.height) return false;\n  if (prevStyle?.transform !== nextStyle?.transform) return false;\n  if (prevProps['data-highlighted'] !== nextProps['data-highlighted']) return false;\n  if (prevProps.tabIndex !== nextProps.tabIndex) return false;\n  if (prevProps.id !== nextProps.id) return false;\n  if (prevProps.className !== nextProps.className) return false;\n  if (prevProps.children !== nextProps.children) return false;\n  return true;\n});\n\n// ============================================================================\n// Exports\n// ============================================================================\n\nconst VirtualMenu = Object.assign(VirtualMenuRoot, {\n  Item: VirtualMenuItem,\n});\n\nexport { VirtualMenu };\nexport type { VirtualMenuProps, VirtualMenuItemProps, VirtualMenuRenderItemProps };\n", "'use client';\n\nimport * as React from 'react';\n\nimport { useResolvedResponsiveValue } from './base-menu.utils.js';\n\nimport type { Responsive } from '../../props/prop-def.js';\n\n/**\n * Context to detect if a component is rendered inside a menu (DropdownMenu, ContextMenu, etc.)\n * Used by VirtualMenu to adjust its behavior:\n * - Skip role=\"menu\" when inside a parent menu (parent owns the role)\n * - Delegate certain keyboard handling to parent\n * - Use the correct item height based on menu size\n */\n\nexport type MenuSize = '1' | '2' | '3' | '4';\n\ninterface MenuContextValue {\n  /** Whether we're inside a menu that owns the menu role */\n  isInsideMenu: boolean;\n  /** Menu size for the current breakpoint */\n  size?: MenuSize;\n  /** Item height in px for the current size and theme scaling */\n  itemHeight?: number;\n}\n\nconst MenuContext = React.createContext<MenuContextValue>({ isInsideMenu: false });\n\ninterface MenuProviderProps {\n  children: React.ReactNode;\n  /** Menu size passed from parent (DropdownMenu.Content, ContextMenu.Content, etc.) */\n  size?: Responsive<MenuSize>;\n}\n\n/**\n * Menu row height in pixels per size: the line height plus --row-inset-N above and below\n * (base-menu.css), never under the 24px target floor.\n */\nexport const menuSizeToItemHeight: Record<MenuSize, number> = {\n  '1': 24,\n  '2': 30,\n  '3': 34,\n  '4': 38,\n};\n\nexport function getMenuItemHeight(size: MenuSize): number {\n  return menuSizeToItemHeight[size];\n}\n\nexport function MenuProvider({ children, size }: MenuProviderProps) {\n  const resolvedSize = useResolvedResponsiveValue<MenuSize | undefined>(size, undefined);\n  const itemHeight = resolvedSize ? getMenuItemHeight(resolvedSize) : undefined;\n  const value = React.useMemo(\n    () => ({ isInsideMenu: true, size: resolvedSize, itemHeight }),\n    [resolvedSize, itemHeight],\n  );\n  return <MenuContext.Provider value={value}>{children}</MenuContext.Provider>;\n}\n\nexport function useMenuContext() {\n  return React.useContext(MenuContext);\n}\n"],
-  "mappings": "ilBAAA,IAAAA,GAAA,GAAAC,GAAAD,GAAA,iBAAAE,KAAA,eAAAC,GAAAH,IAEA,IAAAI,EAAuB,oBACvBC,EAAuB,yBACvBC,EAA+B,mCCF/B,IAAAC,EAAuB,oBAyBvB,IAAMC,GAAoB,gBAAgC,CAAE,aAAc,EAAM,CAAC,EAYpEC,GAAiD,CAC5D,EAAK,GACL,EAAK,GACL,EAAK,GACL,EAAK,EACP,EAEO,SAASC,EAAkBC,EAAwB,CACxD,OAAOF,GAAqBE,CAAI,CAClC,CAYO,SAASC,GAAiB,CAC/B,OAAa,aAAWC,EAAW,CACrC,CDsEA,IAAMC,GAAmB,OACvB,SAAoB,CAClB,MAAAC,EACA,cAAeC,EACf,GAAAC,EACA,MAAAC,EACA,SAAAC,EACA,mBAAoBC,EACpB,aAAcC,EACd,aAAAC,EACA,aAAAC,EACA,QAAAC,EACA,UAAAC,CACF,EAAoB,CAClB,OACE,gBAAC,OACC,GAAIR,EACJ,KAAK,WACL,aAAW,EAAAS,SAAW,YAAa,mBAAoB,qBAAqB,EAC5E,MAAOR,EACP,SAAUC,EACV,mBAAkBC,EAClB,aAAYC,EACZ,aAAcC,EACd,aAAcC,EACd,QAASC,EACT,UAAWC,GAEVV,CACH,CAEJ,EACA,CAACY,EAAMC,IAED,EAAAD,EAAK,QAAUC,EAAK,OACpBD,EAAK,kBAAkB,IAAMC,EAAK,kBAAkB,GACpDD,EAAK,MAAM,SAAWC,EAAK,MAAM,QACjCD,EAAK,MAAM,YAAcC,EAAK,MAAM,WACpCD,EAAK,WAAaC,EAAK,UACvBD,EAAK,KAAOC,EAAK,GAIzB,EAMA,SAASC,EAAmB,CAC1B,MAAAC,EACA,UAAAC,EACA,WAAYC,EACZ,KAAMC,EACN,kBAAmBC,EACnB,SAAAC,EAAW,EACX,SAAAC,EACA,UAAAC,EACA,MAAAnB,EACA,aAAcoB,CAChB,EAAwB,CACtB,IAAMC,EAAe,QAAM,EACrBC,EAAkB,SAAuB,IAAI,EAC7C,CAACC,EAAkBC,CAAmB,EAAU,WAAiB,EAAE,EACnE,CAAE,aAAAC,EAAc,KAAMC,EAAa,WAAYC,CAAkB,EAAIC,EAAe,EAIpFC,EACJb,IACCD,EACGe,EAAkBf,CAAQ,EACzBY,GAAqBG,EAAkBJ,GAAe,GAAG,GAGhE,GAAI,CAACb,GAAa,CAACC,EACjB,MAAM,IAAI,MAAM,0DAA0D,EAI5E,IAAMiB,EAAiB,UAAQ,IACxBlB,EACD,OAAOA,GAAc,WAAmBA,EACpCmB,GAAYA,EAAKnB,CAAS,EAFX,KAGtB,CAACA,CAAS,CAAC,EAGRoB,EAA6B,UAAQ,IACrCrB,EAAM,SAAW,GACjBW,EAAmB,EAAU,GAC1B,KAAK,IAAIA,EAAkBX,EAAM,OAAS,CAAC,EACjD,CAACW,EAAkBX,EAAM,MAAM,CAAC,EAG7BsB,EAAoB,UACxB,IACE,OAAOL,GAAsB,WACzBA,EACA,IAAMA,EACZ,CAACA,CAAiB,CACpB,EAEMM,KAAc,kBAAe,CACjC,MAAOvB,EAAM,OACb,iBAAkB,IAAMU,EAAU,QAClC,aAAcY,EACd,SAAAjB,CACF,CAAC,EAEKmB,EAAeD,EAAY,gBAAgB,EAG3CE,EAAiB,SAAOzB,CAAK,EAC7B0B,EAAoB,SAAOpB,CAAQ,EACzCmB,EAAS,QAAUzB,EACnB0B,EAAY,QAAUpB,EAEtB,IAAMqB,EAAyB,SAAOJ,EAAY,aAAa,EAC/DI,EAAiB,QAAUJ,EAAY,cAEvC,IAAMK,EAA4B,SAAOP,CAAoB,EAC7DO,EAAoB,QAAUP,EAG9B,IAAMQ,EAA6B,cAAaC,GAAqC,CACnF,IAAMC,EAAQD,EAAE,cAAc,QAAQ,MAClCC,GAAS,MACXnB,EAAoB,OAAOmB,CAAK,CAAC,CAErC,EAAG,CAAC,CAAC,EAECC,EAAwB,cAAaF,GAAqC,CAC9E,IAAMC,EAAQD,EAAE,cAAc,QAAQ,MACtC,GAAIC,GAAS,KAAM,CACjB,IAAME,EAAM,OAAOF,CAAK,EAClBG,EAAeT,EAAS,QAC1BQ,GAAO,GAAKA,EAAMC,EAAa,QACjCR,EAAY,UAAUQ,EAAaD,CAAG,EAAGA,CAAG,CAEhD,CACF,EAAG,CAAC,CAAC,EAECE,EAAa,cAAY,IAAM,CAAC,EAAG,CAAC,CAAC,EAGrCC,EAA0B,cAAaN,GAAwC,CACnF,GAAIA,EAAE,MAAQ,SAAWA,EAAE,MAAQ,IAAK,CACtCA,EAAE,eAAe,EACjB,IAAMC,EAAQD,EAAE,cAAc,QAAQ,MACtC,GAAIC,GAAS,KAAM,CACjB,IAAME,EAAM,OAAOF,CAAK,EAClBG,EAAeT,EAAS,QAC1BQ,GAAO,GAAKA,EAAMC,EAAa,QACjCR,EAAY,UAAUQ,EAAaD,CAAG,EAAGA,CAAG,CAEhD,CACF,CACF,EAAG,CAAC,CAAC,EAGCI,EAAsB,cAAaP,GAA2B,CAClE,IAAMI,EAAeT,EAAS,QACxBa,EAA0BV,EAAoB,QAEpD,OAAQE,EAAE,IAAK,CACb,IAAK,YAAa,CAChBA,EAAE,eAAe,EACjB,IAAMS,EACJD,EAA0BJ,EAAa,OAAS,EAAII,EAA0B,EAAI,EACpF1B,EAAoB2B,CAAS,EAC7BZ,EAAiB,QAAQY,EAAW,CAAE,MAAO,MAAO,CAAC,EACrD,KACF,CACA,IAAK,UAAW,CACdT,EAAE,eAAe,EACjB,IAAMU,EACJF,EAA0B,EAAIA,EAA0B,EAAIJ,EAAa,OAAS,EACpFtB,EAAoB4B,CAAS,EAC7Bb,EAAiB,QAAQa,EAAW,CAAE,MAAO,MAAO,CAAC,EACrD,KACF,CACA,IAAK,OAAQ,CACXV,EAAE,eAAe,EACjBlB,EAAoB,CAAC,EACrBe,EAAiB,QAAQ,EAAG,CAAE,MAAO,OAAQ,CAAC,EAC9C,KACF,CACA,IAAK,MAAO,CACVG,EAAE,eAAe,EACjB,IAAMW,EAAYP,EAAa,OAAS,EACxCtB,EAAoB6B,CAAS,EAC7Bd,EAAiB,QAAQc,EAAW,CAAE,MAAO,KAAM,CAAC,EACpD,KACF,CACA,IAAK,QACL,IAAK,IAAK,CACRX,EAAE,eAAe,EACbQ,GAA2B,GAAKA,EAA0BJ,EAAa,QACzER,EAAY,UAAUQ,EAAaI,CAAuB,EAAGA,CAAuB,EAEtF,KACF,CACA,IAAK,MAAO,CACVR,EAAE,eAAe,EACjB,KACF,CACA,IAAK,SAAU,CACZA,EAAE,cAA8B,KAAK,EACtC,KACF,CACF,CACF,EAAG,CAAC,CAAC,EAGCY,EAAkB,cACrBX,GAAkB,GAAGtB,CAAM,SAASsB,CAAK,GAC1C,CAACtB,CAAM,CACT,EAGMkC,EAAkB,UACtB,KAAO,CACL,SAAU,OACV,SAAU,WACV,GAAGvD,CACL,GACA,CAACA,CAAK,CACR,EAEMwD,EAAYrB,EAAY,aAAa,EACrCsB,EAAsB,UAC1B,KAAO,CACL,OAAQ,GAAGD,CAAS,KACpB,MAAO,OACP,SAAU,UACZ,GACA,CAACA,CAAS,CACZ,EAEA,OACE,gBAAC,OACC,IAAKlC,EACL,KAAMG,EAAe,QAAU,OAC/B,aAAYL,EACZ,wBAAuBa,GAAwB,EAAIqB,EAAUrB,CAAoB,EAAI,OACrF,SAAU,EACV,UAAWgB,EACX,aAAW,EAAAzC,SAAW,sBAAuBW,CAAS,EACtD,MAAOoC,GAEP,gBAAC,OAAI,UAAU,0BAA0B,MAAOE,GAC7CrB,EAAa,IAAKsB,GAAe,CAChC,IAAM1B,EAAOpB,EAAM8C,EAAW,KAAK,EAC7Bf,EAAQe,EAAW,MACnBC,EAAgB1B,IAAyBU,EAEzCiB,EAAiC,CACrC,OAAQF,EAAW,KACnB,UAAW,cAAcA,EAAW,KAAK,KAC3C,EAEMG,EAAc,CAClB,GAAIP,EAAUX,CAAK,EACnB,cAAAgB,EACA,MAAOC,EACP,SAAUD,EAAgB,EAAI,GAC9B,mBAAoBA,EAAgB,GAAgB,OACpD,aAAchB,EACd,aAAcF,EACd,aAAcM,EACd,QAASH,EACT,UAAWI,CACb,EAGA,OAAIlC,EAEA,gBAACA,EAAA,CACC,IAAK4C,EAAW,IAChB,KAAM1B,EACN,MAAOW,EACN,GAAGkB,EACN,EAKF,gBAACjE,GAAA,CACC,IAAK8D,EAAW,IAChB,MAAO3B,EAAUC,CAAI,EACpB,GAAG6B,EACN,CAEJ,CAAC,CACH,CACF,CAEJ,CAEAlD,EAAgB,YAAc,cAc9B,IAAMmD,EAA6B,aACjC,CAAC,CAAE,UAAA3C,EAAW,SAAA4C,EAAU,GAAGC,CAAM,EAAGC,IAEhC,gBAAC,OACC,IAAKA,EACL,KAAK,WACL,aAAW,EAAAzD,SAAW,YAAa,mBAAoB,sBAAuBW,CAAS,EACtF,GAAG6C,GAEHD,CACH,CAGN,EAEAD,EAAqB,YAAc,mBAGnC,IAAMI,GAAwB,OAAKJ,EAAsB,CAACK,EAAWC,IAAc,CACjF,IAAMC,EAAYF,EAAU,MACtBG,EAAYF,EAAU,MAO5B,MANI,EAAAC,GAAW,SAAWC,GAAW,QACjCD,GAAW,YAAcC,GAAW,WACpCH,EAAU,kBAAkB,IAAMC,EAAU,kBAAkB,GAC9DD,EAAU,WAAaC,EAAU,UACjCD,EAAU,KAAOC,EAAU,IAC3BD,EAAU,YAAcC,EAAU,WAClCD,EAAU,WAAaC,EAAU,SAEvC,CAAC,EAMKG,GAAc,OAAO,OAAO5D,EAAiB,CACjD,KAAMuD,EACR,CAAC",
-  "names": ["virtual_menu_exports", "__export", "VirtualMenu", "__toCommonJS", "React", "import_classnames", "import_react_virtual", "React", "MenuContext", "menuSizeToItemHeight", "getMenuItemHeight", "size", "useMenuContext", "MenuContext", "SimpleItem", "label", "_isHighlighted", "id", "style", "tabIndex", "dataHighlighted", "dataIndex", "onMouseEnter", "onMouseLeave", "onClick", "onKeyDown", "classNames", "prev", "next", "VirtualMenuRoot", "items", "itemLabel", "RenderItem", "sizeProp", "estimatedItemSizeProp", "overscan", "onSelect", "className", "ariaLabel", "menuId", "parentRef", "highlightedIndex", "setHighlightedIndex", "isInsideMenu", "contextSize", "contextItemHeight", "useMenuContext", "estimatedItemSize", "getMenuItemHeight", "getLabel", "item", "safeHighlightedIndex", "getItemSize", "virtualizer", "virtualItems", "itemsRef", "onSelectRef", "scrollToIndexRef", "highlightedIndexRef", "handleItemMouseEnter", "e", "index", "handleItemClick", "idx", "currentItems", "noop", "handleItemKeyDown", "handleKeyDown", "currentHighlightedIndex", "nextIndex", "prevIndex", "lastIndex", "getItemId", "rootStyle", "totalSize", "viewportStyle", "virtualRow", "isHighlighted", "itemStyle", "commonProps", "VirtualMenuItemInner", "children", "props", "forwardedRef", "VirtualMenuItem", "prevProps", "nextProps", "prevStyle", "nextStyle", "VirtualMenu"]
+  "sourcesContent": ["'use client';\n\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport { useVirtualizer } from '@tanstack/react-virtual';\nimport { useMenuContext, useMenuClose, getMenuItemHeight } from './_internal/menu-context.js';\n\nimport type { MenuSize } from './_internal/menu-context.js';\n\n/**\n * VirtualMenu - A virtualized menu component for rendering large lists efficiently.\n *\n * Uses TanStack Virtual to render only visible items.\n * Works inside any container (DropdownMenu.Content, Popover.Content, etc.)\n *\n * @example\n * // Simple usage with itemLabel\n * <VirtualMenu\n *   items={items}\n *   itemLabel={(item) => item.name}\n *   onSelect={handleSelect}\n * />\n *\n * @example\n * // Custom rendering with renderItem\n * const UserItem = React.memo(({ item, ...props }) => (\n *   <VirtualMenu.Item {...props}>\n *     <Avatar src={item.avatar} />\n *     {item.name}\n *   </VirtualMenu.Item>\n * ));\n *\n * <VirtualMenu items={users} renderItem={UserItem} onSelect={handleSelect} />\n */\n\n// ============================================================================\n// Types\n// ============================================================================\n\n/** Props passed to custom renderItem components */\ninterface VirtualMenuRenderItemProps<T> {\n  /** The item data */\n  item: T;\n  /** Index in the items array */\n  index: number;\n  /** Whether this item is currently highlighted */\n  isHighlighted: boolean;\n  /** Unique ID for accessibility */\n  id: string;\n  /** Positioning styles - must be applied */\n  style: React.CSSProperties;\n  /** Tab index for focus management */\n  tabIndex: number;\n  /** Data attribute for CSS styling */\n  'data-highlighted': true | undefined;\n  /** Data attribute for event delegation */\n  'data-index': number;\n  /** Mouse enter handler */\n  onMouseEnter: (e: React.MouseEvent<HTMLElement>) => void;\n  /** Mouse leave handler */\n  onMouseLeave: () => void;\n  /** Click handler */\n  onClick: (e: React.MouseEvent<HTMLElement>) => void;\n  /** Keyboard handler for Enter/Space activation */\n  onKeyDown: (e: React.KeyboardEvent<HTMLElement>) => void;\n}\n\ninterface VirtualMenuProps<T> {\n  /** Array of items to render */\n  items: T[];\n  /**\n   * Simple label accessor for basic text items.\n   * Can be a property key or a function.\n   * @example\n   * itemLabel=\"name\"\n   * itemLabel={(item) => item.name}\n   */\n  itemLabel?: keyof T | ((item: T) => React.ReactNode);\n  /**\n   * Custom component for rendering items.\n   * Must be memoized (React.memo) for optimal performance.\n   * @example\n   * const MyItem = React.memo(({ item, ...props }) => (\n   *   <VirtualMenu.Item {...props}>{item.name}</VirtualMenu.Item>\n   * ));\n   * <VirtualMenu items={items} renderItem={MyItem} />\n   */\n  renderItem?: React.ComponentType<VirtualMenuRenderItemProps<T>>;\n  /**\n   * Menu size - controls item height.\n   * Automatically inherited from parent DropdownMenu.Content/ContextMenu.Content.\n   * Only set manually when using VirtualMenu outside of a menu context.\n   * @default '2' (or inherited from context)\n   */\n  size?: MenuSize;\n  /**\n   * Estimated height of each item in pixels.\n   * Can be a number (same for all) or a function (per-item).\n   * Usually not needed - height is automatically derived from size prop/context.\n   * Use this only for custom item heights (e.g., variable height items).\n   */\n  estimatedItemSize?: number | ((index: number) => number);\n  /** Number of items to render outside visible area */\n  overscan?: number;\n  /** Callback when an item is selected */\n  onSelect?: (item: T, index: number) => void;\n  /** Additional class name */\n  className?: string;\n  /** Additional styles */\n  style?: React.CSSProperties;\n  /** Accessible label for the menu */\n  'aria-label'?: string;\n}\n\n// ============================================================================\n// Internal Memoized Item Component\n// ============================================================================\n\ninterface SimpleItemProps {\n  label: React.ReactNode;\n  isHighlighted: boolean;\n  id: string;\n  style: React.CSSProperties;\n  tabIndex: number;\n  'data-highlighted': true | undefined;\n  'data-index': number;\n  onMouseEnter: (e: React.MouseEvent<HTMLElement>) => void;\n  onMouseLeave: () => void;\n  onClick: (e: React.MouseEvent<HTMLElement>) => void;\n  onKeyDown: (e: React.KeyboardEvent<HTMLElement>) => void;\n}\n\nconst SimpleItem = React.memo(\n  function SimpleItem({\n    label,\n    isHighlighted: _isHighlighted,\n    id,\n    style,\n    tabIndex,\n    'data-highlighted': dataHighlighted,\n    'data-index': dataIndex,\n    onMouseEnter,\n    onMouseLeave,\n    onClick,\n    onKeyDown,\n  }: SimpleItemProps) {\n    return (\n      <div\n        id={id}\n        role=\"menuitem\"\n        className={classNames('kui-reset', 'kui-BaseMenuItem', 'kui-VirtualMenuItem')}\n        style={style}\n        tabIndex={tabIndex}\n        data-highlighted={dataHighlighted}\n        data-index={dataIndex}\n        onMouseEnter={onMouseEnter}\n        onMouseLeave={onMouseLeave}\n        onClick={onClick}\n        onKeyDown={onKeyDown}\n      >\n        {label}\n      </div>\n    );\n  },\n  (prev, next) => {\n    // Custom comparison - only re-render if these change\n    if (prev.label !== next.label) return false;\n    if (prev['data-highlighted'] !== next['data-highlighted']) return false;\n    if (prev.style.height !== next.style.height) return false;\n    if (prev.style.transform !== next.style.transform) return false;\n    if (prev.tabIndex !== next.tabIndex) return false;\n    if (prev.id !== next.id) return false;\n    // Event handlers are stable, skip comparison\n    return true;\n  },\n);\n\n// ============================================================================\n// VirtualMenu Component\n// ============================================================================\n\n/**\n * Measures the row height the menu's CSS draws (--base-menu-item-height), so rows follow\n * the theme scale instead of the fixed 100% table. Returns undefined until measured.\n */\nfunction useMeasuredRowHeight(\n  rootRef: React.RefObject<HTMLDivElement | null>,\n  enabled: boolean,\n  size: MenuSize | undefined,\n) {\n  const [height, setHeight] = React.useState<number | undefined>(undefined);\n  React.useLayoutEffect(() => {\n    const root = rootRef.current;\n    if (!enabled || !root) return;\n    const probe = document.createElement('div');\n    probe.className = 'kui-reset kui-BaseMenuItem kui-VirtualMenuItem';\n    probe.setAttribute('aria-hidden', 'true');\n    probe.style.visibility = 'hidden';\n    probe.textContent = '\\u00a0';\n    root.appendChild(probe);\n    const measured = probe.getBoundingClientRect().height;\n    probe.remove();\n    setHeight(measured > 0 ? measured : undefined);\n  }, [rootRef, enabled, size]);\n  return enabled ? height : undefined;\n}\n\nfunction VirtualMenuRootInner<T>(\n  {\n    items,\n    itemLabel,\n    renderItem: RenderItem,\n    size: sizeProp,\n    estimatedItemSize: estimatedItemSizeProp,\n    overscan = 5,\n    onSelect,\n    className,\n    style,\n    'aria-label': ariaLabel,\n  }: VirtualMenuProps<T>,\n  forwardedRef: React.ForwardedRef<HTMLDivElement>,\n) {\n  const menuId = React.useId();\n  const parentRef = React.useRef<HTMLDivElement>(null);\n  const [highlightedIndex, setHighlightedIndex] = React.useState<number>(-1);\n  const { isInsideMenu, size: contextSize, itemHeight: contextItemHeight } = useMenuContext();\n  const closeMenu = useMenuClose();\n\n  const setRootRef = React.useCallback(\n    (node: HTMLDivElement | null) => {\n      parentRef.current = node;\n      if (typeof forwardedRef === 'function') forwardedRef(node);\n      else if (forwardedRef) forwardedRef.current = node;\n    },\n    [forwardedRef],\n  );\n\n  // Inside a menu, the CSS row height is measured so it tracks the theme scale.\n  const measuredItemHeight = useMeasuredRowHeight(\n    parentRef,\n    isInsideMenu && sizeProp == null && estimatedItemSizeProp == null,\n    contextSize,\n  );\n\n  // Resolve item height: explicit prop > own size > measured CSS row > parent menu > default size '2'.\n  const estimatedItemSize =\n    estimatedItemSizeProp ??\n    (sizeProp\n      ? getMenuItemHeight(sizeProp)\n      : (measuredItemHeight ?? contextItemHeight ?? getMenuItemHeight(contextSize ?? '2')));\n\n  // Validate props\n  if (!itemLabel && !RenderItem) {\n    throw new Error('VirtualMenu requires either itemLabel or renderItem prop');\n  }\n\n  // Normalize itemLabel to a function\n  const getLabel = React.useMemo(() => {\n    if (!itemLabel) return null;\n    if (typeof itemLabel === 'function') return itemLabel;\n    return (item: T) => item[itemLabel] as React.ReactNode;\n  }, [itemLabel]);\n\n  // Derive safe highlighted index\n  const safeHighlightedIndex = React.useMemo(() => {\n    if (items.length === 0) return -1;\n    if (highlightedIndex < 0) return -1;\n    return Math.min(highlightedIndex, items.length - 1);\n  }, [highlightedIndex, items.length]);\n\n  // Normalize estimatedItemSize to a function\n  const getItemSize = React.useMemo(\n    () =>\n      typeof estimatedItemSize === 'function'\n        ? estimatedItemSize\n        : () => estimatedItemSize,\n    [estimatedItemSize],\n  );\n\n  const virtualizer = useVirtualizer({\n    count: items.length,\n    getScrollElement: () => parentRef.current,\n    estimateSize: getItemSize,\n    overscan,\n  });\n\n  const virtualItems = virtualizer.getVirtualItems();\n\n  // Re-measure cached rows when the resolved row height changes.\n  React.useLayoutEffect(() => {\n    virtualizer.measure();\n  }, [virtualizer, estimatedItemSize]);\n\n  // Inside a menu, the menu focuses its own content on open (and a submenu on keyboard\n  // open). Hand that focus to the list so arrow keys reach the rows.\n  React.useEffect(() => {\n    const root = parentRef.current;\n    if (!isInsideMenu || !root) return;\n    const content = root.closest<HTMLElement>('[data-radix-menu-content]');\n    if (!content) return;\n    const handleFocusIn = (event: FocusEvent) => {\n      if (event.target === content) root.focus({ preventScroll: true });\n    };\n    content.addEventListener('focusin', handleFocusIn);\n    if (document.activeElement === content) root.focus({ preventScroll: true });\n    return () => content.removeEventListener('focusin', handleFocusIn);\n  }, [isInsideMenu]);\n\n  // Refs for stable handler references\n  const itemsRef = React.useRef(items);\n  const onSelectRef = React.useRef(onSelect);\n  const closeMenuRef = React.useRef(closeMenu);\n  itemsRef.current = items;\n  onSelectRef.current = onSelect;\n  closeMenuRef.current = closeMenu;\n\n  // Choosing a row calls onSelect, then closes the parent menu like a menu item does.\n  const selectIndex = React.useCallback((idx: number) => {\n    const currentItems = itemsRef.current;\n    if (idx < 0 || idx >= currentItems.length) return;\n    onSelectRef.current?.(currentItems[idx], idx);\n    closeMenuRef.current?.();\n  }, []);\n\n  const scrollToIndexRef = React.useRef(virtualizer.scrollToIndex);\n  scrollToIndexRef.current = virtualizer.scrollToIndex;\n\n  const highlightedIndexRef = React.useRef(safeHighlightedIndex);\n  highlightedIndexRef.current = safeHighlightedIndex;\n\n  // Stable event handlers\n  const handleItemMouseEnter = React.useCallback((e: React.MouseEvent<HTMLElement>) => {\n    const index = e.currentTarget.dataset.index;\n    if (index != null) {\n      setHighlightedIndex(Number(index));\n    }\n  }, []);\n\n  const handleItemClick = React.useCallback((e: React.MouseEvent<HTMLElement>) => {\n    const index = e.currentTarget.dataset.index;\n    if (index != null) selectIndex(Number(index));\n  }, [selectIndex]);\n\n  const noop = React.useCallback(() => {}, []);\n\n  // Item-level keyboard handler for Enter/Space activation (satisfies a11y lint rule)\n  const handleItemKeyDown = React.useCallback((e: React.KeyboardEvent<HTMLElement>) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      e.stopPropagation();\n      const index = e.currentTarget.dataset.index;\n      if (index != null) selectIndex(Number(index));\n    }\n  }, [selectIndex]);\n\n  // Keyboard navigation\n  const handleKeyDown = React.useCallback((e: React.KeyboardEvent) => {\n    const currentItems = itemsRef.current;\n    const currentHighlightedIndex = highlightedIndexRef.current;\n\n    switch (e.key) {\n      case 'ArrowDown': {\n        e.preventDefault();\n        const nextIndex =\n          currentHighlightedIndex < currentItems.length - 1 ? currentHighlightedIndex + 1 : 0;\n        setHighlightedIndex(nextIndex);\n        scrollToIndexRef.current(nextIndex, { align: 'auto' });\n        break;\n      }\n      case 'ArrowUp': {\n        e.preventDefault();\n        const prevIndex =\n          currentHighlightedIndex > 0 ? currentHighlightedIndex - 1 : currentItems.length - 1;\n        setHighlightedIndex(prevIndex);\n        scrollToIndexRef.current(prevIndex, { align: 'auto' });\n        break;\n      }\n      case 'Home': {\n        e.preventDefault();\n        setHighlightedIndex(0);\n        scrollToIndexRef.current(0, { align: 'start' });\n        break;\n      }\n      case 'End': {\n        e.preventDefault();\n        const lastIndex = currentItems.length - 1;\n        setHighlightedIndex(lastIndex);\n        scrollToIndexRef.current(lastIndex, { align: 'end' });\n        break;\n      }\n      case 'Enter':\n      case ' ': {\n        e.preventDefault();\n        selectIndex(currentHighlightedIndex);\n        break;\n      }\n      case 'Tab': {\n        e.preventDefault();\n        break;\n      }\n      case 'Escape': {\n        // Inside a menu, the menu handles Escape and returns focus to its trigger.\n        if (!isInsideMenu) (e.currentTarget as HTMLElement).blur();\n        break;\n      }\n    }\n  }, [selectIndex, isInsideMenu]);\n\n  // Keyboard focus on the list highlights the first row when none is highlighted.\n  const handleFocus = React.useCallback((e: React.FocusEvent<HTMLDivElement>) => {\n    if (e.target !== e.currentTarget) return;\n    if (highlightedIndexRef.current < 0 && itemsRef.current.length > 0) setHighlightedIndex(0);\n  }, []);\n\n  // Item ID generator\n  const getItemId = React.useCallback(\n    (index: number) => `${menuId}-item-${index}`,\n    [menuId],\n  );\n\n  // Memoize styles\n  const rootStyle = React.useMemo(\n    () => ({\n      overflow: 'auto' as const,\n      position: 'relative' as const,\n      ...style,\n    }),\n    [style],\n  );\n\n  const totalSize = virtualizer.getTotalSize();\n  const viewportStyle = React.useMemo(\n    () => ({\n      height: `${totalSize}px`,\n      width: '100%' as const,\n      position: 'relative' as const,\n    }),\n    [totalSize],\n  );\n\n  return (\n    <div\n      ref={setRootRef}\n      role={isInsideMenu ? 'group' : 'menu'}\n      aria-label={ariaLabel}\n      aria-activedescendant={safeHighlightedIndex >= 0 ? getItemId(safeHighlightedIndex) : undefined}\n      tabIndex={0}\n      onKeyDown={handleKeyDown}\n      onFocus={handleFocus}\n      className={classNames('kui-VirtualMenuRoot', className)}\n      style={rootStyle}\n    >\n      <div className=\"kui-VirtualMenuViewport\" style={viewportStyle}>\n        {virtualItems.map((virtualRow) => {\n          const item = items[virtualRow.index];\n          const index = virtualRow.index;\n          const isHighlighted = safeHighlightedIndex === index;\n\n          const itemStyle: React.CSSProperties = {\n            height: virtualRow.size,\n            transform: `translateY(${virtualRow.start}px)`,\n          };\n\n          const commonProps = {\n            id: getItemId(index),\n            isHighlighted,\n            style: itemStyle,\n            tabIndex: isHighlighted ? 0 : -1,\n            'data-highlighted': isHighlighted ? true as const : undefined,\n            'data-index': index,\n            onMouseEnter: handleItemMouseEnter,\n            onMouseLeave: noop,\n            onClick: handleItemClick,\n            onKeyDown: handleItemKeyDown,\n          };\n\n          // Use renderItem if provided, otherwise use SimpleItem with itemLabel\n          if (RenderItem) {\n            return (\n              <RenderItem\n                key={virtualRow.key}\n                item={item}\n                index={index}\n                {...commonProps}\n              />\n            );\n          }\n\n          return (\n            <SimpleItem\n              key={virtualRow.key}\n              label={getLabel!(item)}\n              {...commonProps}\n            />\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n\nconst VirtualMenuRoot = React.forwardRef(VirtualMenuRootInner) as (<T>(\n  props: VirtualMenuProps<T> & React.RefAttributes<HTMLDivElement>,\n) => React.ReactElement) & { displayName?: string };\nVirtualMenuRoot.displayName = 'VirtualMenu';\n\n// ============================================================================\n// VirtualMenu.Item Component (for custom renderItem usage)\n// ============================================================================\n\ninterface VirtualMenuItemProps extends React.ComponentPropsWithoutRef<'div'> {\n  children: React.ReactNode;\n  /** Data attribute for highlight styling */\n  'data-highlighted'?: true | undefined;\n  /** Data attribute for event delegation */\n  'data-index'?: number;\n}\n\nconst VirtualMenuItemInner = React.forwardRef<HTMLDivElement, VirtualMenuItemProps>(\n  ({ className, children, ...props }, forwardedRef) => {\n    return (\n      <div\n        ref={forwardedRef}\n        role=\"menuitem\"\n        className={classNames('kui-reset', 'kui-BaseMenuItem', 'kui-VirtualMenuItem', className)}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\nVirtualMenuItemInner.displayName = 'VirtualMenu.Item';\n\n// Memoized with custom comparison\nconst VirtualMenuItem = React.memo(VirtualMenuItemInner, (prevProps, nextProps) => {\n  const prevStyle = prevProps.style as React.CSSProperties | undefined;\n  const nextStyle = nextProps.style as React.CSSProperties | undefined;\n  if (prevStyle?.height !== nextStyle?.height) return false;\n  if (prevStyle?.transform !== nextStyle?.transform) return false;\n  if (prevProps['data-highlighted'] !== nextProps['data-highlighted']) return false;\n  if (prevProps.tabIndex !== nextProps.tabIndex) return false;\n  if (prevProps.id !== nextProps.id) return false;\n  if (prevProps.className !== nextProps.className) return false;\n  if (prevProps.children !== nextProps.children) return false;\n  return true;\n});\n\n// ============================================================================\n// Exports\n// ============================================================================\n\nconst VirtualMenu = Object.assign(VirtualMenuRoot, {\n  Item: VirtualMenuItem,\n});\n\nexport { VirtualMenu };\nexport type { VirtualMenuProps, VirtualMenuItemProps, VirtualMenuRenderItemProps };\n", "'use client';\n\nimport * as React from 'react';\n\nimport { useResolvedResponsiveValue } from './base-menu.utils.js';\n\nimport type { Responsive } from '../../props/prop-def.js';\n\n/**\n * Context to detect if a component is rendered inside a menu (DropdownMenu, ContextMenu, etc.)\n * Used by VirtualMenu to adjust its behavior:\n * - Skip role=\"menu\" when inside a parent menu (parent owns the role)\n * - Delegate certain keyboard handling to parent\n * - Use the correct item height based on menu size\n */\n\nexport type MenuSize = '1' | '2' | '3' | '4';\n\ninterface MenuContextValue {\n  /** Whether we're inside a menu that owns the menu role */\n  isInsideMenu: boolean;\n  /** Menu size for the current breakpoint */\n  size?: MenuSize;\n  /** Item height in px for the current size and theme scaling */\n  itemHeight?: number;\n}\n\nconst MenuContext = React.createContext<MenuContextValue>({ isInsideMenu: false });\n\ninterface MenuProviderProps {\n  children: React.ReactNode;\n  /** Menu size passed from parent (DropdownMenu.Content, ContextMenu.Content, etc.) */\n  size?: Responsive<MenuSize>;\n}\n\n/**\n * Menu row height in pixels per size: the line height plus --row-inset-N above and below\n * (base-menu.css), never under the 24px target floor.\n */\nexport const menuSizeToItemHeight: Record<MenuSize, number> = {\n  '1': 24,\n  '2': 30,\n  '3': 34,\n  '4': 38,\n};\n\nexport function getMenuItemHeight(size: MenuSize): number {\n  return menuSizeToItemHeight[size];\n}\n\nexport function MenuProvider({ children, size }: MenuProviderProps) {\n  const resolvedSize = useResolvedResponsiveValue<MenuSize | undefined>(size, undefined);\n  const itemHeight = resolvedSize ? getMenuItemHeight(resolvedSize) : undefined;\n  const value = React.useMemo(\n    () => ({ isInsideMenu: true, size: resolvedSize, itemHeight }),\n    [resolvedSize, itemHeight],\n  );\n  return <MenuContext.Provider value={value}>{children}</MenuContext.Provider>;\n}\n\nexport function useMenuContext() {\n  return React.useContext(MenuContext);\n}\n\n/**\n * Closes the whole menu from inside it. DropdownMenu.Root and ContextMenu.Root provide it,\n * so a VirtualMenu row can close the menu on select the way a menu item does.\n */\nconst MenuCloseContext = React.createContext<(() => void) | undefined>(undefined);\nexport const MenuCloseProvider = MenuCloseContext.Provider;\n\nexport function useMenuClose() {\n  return React.useContext(MenuCloseContext);\n}\n"],
+  "mappings": "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",
+  "names": ["virtual_menu_exports", "__export", "VirtualMenu", "__toCommonJS", "React", "import_classnames", "import_react_virtual", "React", "MenuContext", "menuSizeToItemHeight", "getMenuItemHeight", "size", "useMenuContext", "MenuContext", "MenuCloseContext", "MenuCloseProvider", "useMenuClose", "SimpleItem", "label", "_isHighlighted", "id", "style", "tabIndex", "dataHighlighted", "dataIndex", "onMouseEnter", "onMouseLeave", "onClick", "onKeyDown", "classNames", "prev", "next", "useMeasuredRowHeight", "rootRef", "enabled", "size", "height", "setHeight", "root", "probe", "measured", "VirtualMenuRootInner", "items", "itemLabel", "RenderItem", "sizeProp", "estimatedItemSizeProp", "overscan", "onSelect", "className", "ariaLabel", "forwardedRef", "menuId", "parentRef", "highlightedIndex", "setHighlightedIndex", "isInsideMenu", "contextSize", "contextItemHeight", "useMenuContext", "closeMenu", "useMenuClose", "setRootRef", "node", "measuredItemHeight", "estimatedItemSize", "getMenuItemHeight", "getLabel", "item", "safeHighlightedIndex", "getItemSize", "virtualizer", "virtualItems", "content", "handleFocusIn", "event", "itemsRef", "onSelectRef", "closeMenuRef", "selectIndex", "idx", "currentItems", "scrollToIndexRef", "highlightedIndexRef", "handleItemMouseEnter", "index", "handleItemClick", "noop", "handleItemKeyDown", "handleKeyDown", "currentHighlightedIndex", "nextIndex", "prevIndex", "lastIndex", "handleFocus", "getItemId", "rootStyle", "totalSize", "viewportStyle", "virtualRow", "isHighlighted", "itemStyle", "commonProps", "VirtualMenuRoot", "VirtualMenuItemInner", "children", "props", "VirtualMenuItem", "prevProps", "nextProps", "prevStyle", "nextStyle", "VirtualMenu"]
 }

package/dist/cjs/helpers/extract-margin-props.d.ts

@@ -1,12 +1,12 @@
 import type { MarginProps } from '../props/margin.props.js';
 export declare function extractMarginProps<T extends MarginProps>(props: T): {
-    m: import("../props/prop-def.js").Responsive<import("../props/prop-def.js").Union<string, "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "bleed">> | undefined;
-    mx: import("../props/prop-def.js").Responsive<import("../props/prop-def.js").Union<string, "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "bleed">> | undefined;
-    my: import("../props/prop-def.js").Responsive<import("../props/prop-def.js").Union<string, "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "bleed">> | undefined;
-    mt: import("../props/prop-def.js").Responsive<import("../props/prop-def.js").Union<string, "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "bleed">> | undefined;
-    mr: import("../props/prop-def.js").Responsive<import("../props/prop-def.js").Union<string, "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "bleed">> | undefined;
-    mb: import("../props/prop-def.js").Responsive<import("../props/prop-def.js").Union<string, "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "bleed">> | undefined;
-    ml: import("../props/prop-def.js").Responsive<import("../props/prop-def.js").Union<string, "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "bleed">> | undefined;
+    m: import("../props/prop-def.js").Responsive<import("../props/prop-def.js").Union<string, "0" | "1" | "2" | "3" | "4" | "9" | "5" | "6" | "7" | "8" | "10" | "11" | "12" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "bleed">> | undefined;
+    mx: import("../props/prop-def.js").Responsive<import("../props/prop-def.js").Union<string, "0" | "1" | "2" | "3" | "4" | "9" | "5" | "6" | "7" | "8" | "10" | "11" | "12" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "bleed">> | undefined;
+    my: import("../props/prop-def.js").Responsive<import("../props/prop-def.js").Union<string, "0" | "1" | "2" | "3" | "4" | "9" | "5" | "6" | "7" | "8" | "10" | "11" | "12" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "bleed">> | undefined;
+    mt: import("../props/prop-def.js").Responsive<import("../props/prop-def.js").Union<string, "0" | "1" | "2" | "3" | "4" | "9" | "5" | "6" | "7" | "8" | "10" | "11" | "12" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "bleed">> | undefined;
+    mr: import("../props/prop-def.js").Responsive<import("../props/prop-def.js").Union<string, "0" | "1" | "2" | "3" | "4" | "9" | "5" | "6" | "7" | "8" | "10" | "11" | "12" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "bleed">> | undefined;
+    mb: import("../props/prop-def.js").Responsive<import("../props/prop-def.js").Union<string, "0" | "1" | "2" | "3" | "4" | "9" | "5" | "6" | "7" | "8" | "10" | "11" | "12" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "bleed">> | undefined;
+    ml: import("../props/prop-def.js").Responsive<import("../props/prop-def.js").Union<string, "0" | "1" | "2" | "3" | "4" | "9" | "5" | "6" | "7" | "8" | "10" | "11" | "12" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "bleed">> | undefined;
     rest: Omit<T, "m" | "ml" | "mr" | "mt" | "mb" | "mx" | "my">;
 };
 //# sourceMappingURL=extract-margin-props.d.ts.map

package/dist/cjs/hooks/use-scroll-edges.d.ts

@@ -1,7 +1,9 @@
 import * as React from 'react';
 /**
- * Publishes how much content is hidden past each block edge of a scroller, as
- * `--scroll-overflow-start` and `--scroll-overflow-end` (px) on the element.
+ * Publishes how much content is hidden past each edge of a scroller, as
+ * `--scroll-overflow-start` and `--scroll-overflow-end` (block axis) and
+ * `--scroll-overflow-x-start` and `--scroll-overflow-x-end` (inline axis, from
+ * the inline start, so right-to-left reads the same) in px on the element.
  * The scroll fade reads them, so an edge fades only while content is hidden
  * there, and the fade ramps in over the first pixels of scrolling.
  *

package/dist/cjs/hooks/use-scroll-edges.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-scroll-edges.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-scroll-edges.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;;;;;;;GAQG;AACH,wBAAgB,cAAc,CAAC,CAAC,SAAS,WAAW,EAAE,OAAO,EAAE,OAAO,kDAkCrE"}
+{"version":3,"file":"use-scroll-edges.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-scroll-edges.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;;;;;;;;;GAUG;AACH,wBAAgB,cAAc,CAAC,CAAC,SAAS,WAAW,EAAE,OAAO,EAAE,OAAO,kDAyCrE"}

package/dist/cjs/hooks/use-scroll-edges.js

@@ -1,2 +1,2 @@
-"use strict";var m=Object.create;var l=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var h=(t,e)=>{for(var r in e)l(t,r,{get:e[r],enumerable:!0})},f=(t,e,r,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of p(e))!b.call(t,s)&&s!==r&&l(t,s,{get:()=>e[s],enumerable:!(o=d(e,s))||o.enumerable});return t};var w=(t,e,r)=>(r=t!=null?m(y(t)):{},f(e||!t||!t.__esModule?l(r,"default",{value:t,enumerable:!0}):r,t)),x=t=>f(l({},"__esModule",{value:!0}),t);var M={};h(M,{useScrollEdges:()=>E});module.exports=x(M);var c=w(require("react"));function E(t){let[e,r]=c.useState(null);return c.useEffect(()=>{if(!t||!e)return;let o=0,s=()=>{o=0;let a=Math.max(0,e.scrollTop),v=Math.max(0,e.scrollHeight-e.clientHeight-e.scrollTop);e.style.setProperty("--scroll-overflow-start",`${a}px`),e.style.setProperty("--scroll-overflow-end",`${v}px`)},n=()=>{o||(o=requestAnimationFrame(s))};s(),e.addEventListener("scroll",n,{passive:!0});let i=typeof ResizeObserver>"u"?null:new ResizeObserver(n);i?.observe(e);for(let a of Array.from(e.children))i?.observe(a);let u=typeof MutationObserver>"u"?null:new MutationObserver(n);return u?.observe(e,{childList:!0}),()=>{o&&cancelAnimationFrame(o),e.removeEventListener("scroll",n),i?.disconnect(),u?.disconnect(),e.style.removeProperty("--scroll-overflow-start"),e.style.removeProperty("--scroll-overflow-end")}},[t,e]),r}
+"use strict";var p=Object.create;var n=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var b=(t,e)=>{for(var r in e)n(t,r,{get:e[r],enumerable:!0})},d=(t,e,r,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of x(e))!w.call(t,s)&&s!==r&&n(t,s,{get:()=>e[s],enumerable:!(o=y(e,s))||o.enumerable});return t};var P=(t,e,r)=>(r=t!=null?p(h(t)):{},d(e||!t||!t.__esModule?n(r,"default",{value:t,enumerable:!0}):r,t)),E=t=>d(n({},"__esModule",{value:!0}),t);var L={};b(L,{useScrollEdges:()=>M});module.exports=E(L);var c=P(require("react"));function M(t){let[e,r]=c.useState(null);return c.useEffect(()=>{if(!t||!e)return;let o=0,s=()=>{o=0;let a=Math.max(0,e.scrollTop),m=Math.max(0,e.scrollHeight-e.clientHeight-e.scrollTop);e.style.setProperty("--scroll-overflow-start",`${a}px`),e.style.setProperty("--scroll-overflow-end",`${m}px`);let v=Math.abs(e.scrollLeft),u=Math.max(0,e.scrollWidth-e.clientWidth-v);e.style.setProperty("--scroll-overflow-x-start",`${v}px`),e.style.setProperty("--scroll-overflow-x-end",`${u}px`)},l=()=>{o||(o=requestAnimationFrame(s))};s(),e.addEventListener("scroll",l,{passive:!0});let i=typeof ResizeObserver>"u"?null:new ResizeObserver(l);i?.observe(e);for(let a of Array.from(e.children))i?.observe(a);let f=typeof MutationObserver>"u"?null:new MutationObserver(l);return f?.observe(e,{childList:!0}),()=>{o&&cancelAnimationFrame(o),e.removeEventListener("scroll",l),i?.disconnect(),f?.disconnect(),e.style.removeProperty("--scroll-overflow-start"),e.style.removeProperty("--scroll-overflow-end"),e.style.removeProperty("--scroll-overflow-x-start"),e.style.removeProperty("--scroll-overflow-x-end")}},[t,e]),r}
 //# sourceMappingURL=use-scroll-edges.js.map

package/dist/cjs/hooks/use-scroll-edges.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/hooks/use-scroll-edges.ts"],
-  "sourcesContent": ["import * as React from 'react';\n\n/**\n * Publishes how much content is hidden past each block edge of a scroller, as\n * `--scroll-overflow-start` and `--scroll-overflow-end` (px) on the element.\n * The scroll fade reads them, so an edge fades only while content is hidden\n * there, and the fade ramps in over the first pixels of scrolling.\n *\n * Writes happen at most once per frame, on scroll and when the element or its\n * content resizes. Nothing re-renders.\n */\nexport function useScrollEdges<T extends HTMLElement>(enabled: boolean) {\n  const [element, setElement] = React.useState<T | null>(null);\n\n  React.useEffect(() => {\n    if (!enabled || !element) return;\n    let frame = 0;\n    const write = () => {\n      frame = 0;\n      const start = Math.max(0, element.scrollTop);\n      const end = Math.max(0, element.scrollHeight - element.clientHeight - element.scrollTop);\n      element.style.setProperty('--scroll-overflow-start', `${start}px`);\n      element.style.setProperty('--scroll-overflow-end', `${end}px`);\n    };\n    const schedule = () => {\n      if (!frame) frame = requestAnimationFrame(write);\n    };\n    write();\n    element.addEventListener('scroll', schedule, { passive: true });\n    const observer = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(schedule);\n    observer?.observe(element);\n    for (const child of Array.from(element.children)) observer?.observe(child);\n    const mutations = typeof MutationObserver === 'undefined' ? null : new MutationObserver(schedule);\n    mutations?.observe(element, { childList: true });\n    return () => {\n      if (frame) cancelAnimationFrame(frame);\n      element.removeEventListener('scroll', schedule);\n      observer?.disconnect();\n      mutations?.disconnect();\n      element.style.removeProperty('--scroll-overflow-start');\n      element.style.removeProperty('--scroll-overflow-end');\n    };\n  }, [enabled, element]);\n\n  return setElement;\n}\n"],
-  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,oBAAAE,IAAA,eAAAC,EAAAH,GAAA,IAAAI,EAAuB,oBAWhB,SAASF,EAAsCG,EAAkB,CACtE,GAAM,CAACC,EAASC,CAAU,EAAU,WAAmB,IAAI,EAE3D,OAAM,YAAU,IAAM,CACpB,GAAI,CAACF,GAAW,CAACC,EAAS,OAC1B,IAAIE,EAAQ,EACNC,EAAQ,IAAM,CAClBD,EAAQ,EACR,IAAME,EAAQ,KAAK,IAAI,EAAGJ,EAAQ,SAAS,EACrCK,EAAM,KAAK,IAAI,EAAGL,EAAQ,aAAeA,EAAQ,aAAeA,EAAQ,SAAS,EACvFA,EAAQ,MAAM,YAAY,0BAA2B,GAAGI,CAAK,IAAI,EACjEJ,EAAQ,MAAM,YAAY,wBAAyB,GAAGK,CAAG,IAAI,CAC/D,EACMC,EAAW,IAAM,CAChBJ,IAAOA,EAAQ,sBAAsBC,CAAK,EACjD,EACAA,EAAM,EACNH,EAAQ,iBAAiB,SAAUM,EAAU,CAAE,QAAS,EAAK,CAAC,EAC9D,IAAMC,EAAW,OAAO,eAAmB,IAAc,KAAO,IAAI,eAAeD,CAAQ,EAC3FC,GAAU,QAAQP,CAAO,EACzB,QAAWQ,KAAS,MAAM,KAAKR,EAAQ,QAAQ,EAAGO,GAAU,QAAQC,CAAK,EACzE,IAAMC,EAAY,OAAO,iBAAqB,IAAc,KAAO,IAAI,iBAAiBH,CAAQ,EAChG,OAAAG,GAAW,QAAQT,EAAS,CAAE,UAAW,EAAK,CAAC,EACxC,IAAM,CACPE,GAAO,qBAAqBA,CAAK,EACrCF,EAAQ,oBAAoB,SAAUM,CAAQ,EAC9CC,GAAU,WAAW,EACrBE,GAAW,WAAW,EACtBT,EAAQ,MAAM,eAAe,yBAAyB,EACtDA,EAAQ,MAAM,eAAe,uBAAuB,CACtD,CACF,EAAG,CAACD,EAASC,CAAO,CAAC,EAEdC,CACT",
-  "names": ["use_scroll_edges_exports", "__export", "useScrollEdges", "__toCommonJS", "React", "enabled", "element", "setElement", "frame", "write", "start", "end", "schedule", "observer", "child", "mutations"]
+  "sourcesContent": ["import * as React from 'react';\n\n/**\n * Publishes how much content is hidden past each edge of a scroller, as\n * `--scroll-overflow-start` and `--scroll-overflow-end` (block axis) and\n * `--scroll-overflow-x-start` and `--scroll-overflow-x-end` (inline axis, from\n * the inline start, so right-to-left reads the same) in px on the element.\n * The scroll fade reads them, so an edge fades only while content is hidden\n * there, and the fade ramps in over the first pixels of scrolling.\n *\n * Writes happen at most once per frame, on scroll and when the element or its\n * content resizes. Nothing re-renders.\n */\nexport function useScrollEdges<T extends HTMLElement>(enabled: boolean) {\n  const [element, setElement] = React.useState<T | null>(null);\n\n  React.useEffect(() => {\n    if (!enabled || !element) return;\n    let frame = 0;\n    const write = () => {\n      frame = 0;\n      const start = Math.max(0, element.scrollTop);\n      const end = Math.max(0, element.scrollHeight - element.clientHeight - element.scrollTop);\n      element.style.setProperty('--scroll-overflow-start', `${start}px`);\n      element.style.setProperty('--scroll-overflow-end', `${end}px`);\n      // scrollLeft runs negative in right-to-left, so its size is the distance from the inline start.\n      const xStart = Math.abs(element.scrollLeft);\n      const xEnd = Math.max(0, element.scrollWidth - element.clientWidth - xStart);\n      element.style.setProperty('--scroll-overflow-x-start', `${xStart}px`);\n      element.style.setProperty('--scroll-overflow-x-end', `${xEnd}px`);\n    };\n    const schedule = () => {\n      if (!frame) frame = requestAnimationFrame(write);\n    };\n    write();\n    element.addEventListener('scroll', schedule, { passive: true });\n    const observer = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(schedule);\n    observer?.observe(element);\n    for (const child of Array.from(element.children)) observer?.observe(child);\n    const mutations = typeof MutationObserver === 'undefined' ? null : new MutationObserver(schedule);\n    mutations?.observe(element, { childList: true });\n    return () => {\n      if (frame) cancelAnimationFrame(frame);\n      element.removeEventListener('scroll', schedule);\n      observer?.disconnect();\n      mutations?.disconnect();\n      element.style.removeProperty('--scroll-overflow-start');\n      element.style.removeProperty('--scroll-overflow-end');\n      element.style.removeProperty('--scroll-overflow-x-start');\n      element.style.removeProperty('--scroll-overflow-x-end');\n    };\n  }, [enabled, element]);\n\n  return setElement;\n}\n"],
+  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,oBAAAE,IAAA,eAAAC,EAAAH,GAAA,IAAAI,EAAuB,oBAahB,SAASF,EAAsCG,EAAkB,CACtE,GAAM,CAACC,EAASC,CAAU,EAAU,WAAmB,IAAI,EAE3D,OAAM,YAAU,IAAM,CACpB,GAAI,CAACF,GAAW,CAACC,EAAS,OAC1B,IAAIE,EAAQ,EACNC,EAAQ,IAAM,CAClBD,EAAQ,EACR,IAAME,EAAQ,KAAK,IAAI,EAAGJ,EAAQ,SAAS,EACrCK,EAAM,KAAK,IAAI,EAAGL,EAAQ,aAAeA,EAAQ,aAAeA,EAAQ,SAAS,EACvFA,EAAQ,MAAM,YAAY,0BAA2B,GAAGI,CAAK,IAAI,EACjEJ,EAAQ,MAAM,YAAY,wBAAyB,GAAGK,CAAG,IAAI,EAE7D,IAAMC,EAAS,KAAK,IAAIN,EAAQ,UAAU,EACpCO,EAAO,KAAK,IAAI,EAAGP,EAAQ,YAAcA,EAAQ,YAAcM,CAAM,EAC3EN,EAAQ,MAAM,YAAY,4BAA6B,GAAGM,CAAM,IAAI,EACpEN,EAAQ,MAAM,YAAY,0BAA2B,GAAGO,CAAI,IAAI,CAClE,EACMC,EAAW,IAAM,CAChBN,IAAOA,EAAQ,sBAAsBC,CAAK,EACjD,EACAA,EAAM,EACNH,EAAQ,iBAAiB,SAAUQ,EAAU,CAAE,QAAS,EAAK,CAAC,EAC9D,IAAMC,EAAW,OAAO,eAAmB,IAAc,KAAO,IAAI,eAAeD,CAAQ,EAC3FC,GAAU,QAAQT,CAAO,EACzB,QAAWU,KAAS,MAAM,KAAKV,EAAQ,QAAQ,EAAGS,GAAU,QAAQC,CAAK,EACzE,IAAMC,EAAY,OAAO,iBAAqB,IAAc,KAAO,IAAI,iBAAiBH,CAAQ,EAChG,OAAAG,GAAW,QAAQX,EAAS,CAAE,UAAW,EAAK,CAAC,EACxC,IAAM,CACPE,GAAO,qBAAqBA,CAAK,EACrCF,EAAQ,oBAAoB,SAAUQ,CAAQ,EAC9CC,GAAU,WAAW,EACrBE,GAAW,WAAW,EACtBX,EAAQ,MAAM,eAAe,yBAAyB,EACtDA,EAAQ,MAAM,eAAe,uBAAuB,EACpDA,EAAQ,MAAM,eAAe,2BAA2B,EACxDA,EAAQ,MAAM,eAAe,yBAAyB,CACxD,CACF,EAAG,CAACD,EAASC,CAAO,CAAC,EAEdC,CACT",
+  "names": ["use_scroll_edges_exports", "__export", "useScrollEdges", "__toCommonJS", "React", "enabled", "element", "setElement", "frame", "write", "start", "end", "xStart", "xEnd", "schedule", "observer", "child", "mutations"]
 }