@ngrok/mantle 0.83.8 → 0.84.0

package/dist/sidebar.js

@@ -1 +1 @@
-import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./data-slot-EM6s2WEU.js";import{t as n}from"./slot-DpNWVci8.js";import{t as r}from"./button-CNg69RsV.js";import{t as i}from"./use-is-hydrated-DDCqXmju.js";import{n as a}from"./separator-D0D6VyyM.js";import{n as o,t as s}from"./use-is-apple-platform-Cxwrb86L.js";import{t as c}from"./use-callback-ref-IYti9y7x.js";import{n as l}from"./cookie-ca4g5CKp.js";import{t as u}from"./sheet-BxYeOYAb.js";import{r as d}from"./use-breakpoint-Dqu12Szq.js";import{t as f}from"./tooltip-BZRRJgpm.js";import{createContext as p,useCallback as m,useContext as h,useEffect as g,useId as _,useMemo as v,useRef as y,useState as b}from"react";import x from"tiny-invariant";import{Fragment as S,jsx as C,jsxs as w}from"react/jsx-runtime";import{SidebarSimpleIcon as T}from"@phosphor-icons/react/SidebarSimple";const E={sm:`hidden sm:block`,md:`hidden md:block`,lg:`hidden lg:block`},D=p(null);function O(){let e=h(D);return x(e,`useSidebar must be used within Sidebar.Root.`),e}function k(e){let t=h(D);return x(t,`Sidebar.${e} must be rendered inside Sidebar.Root.`),t}const A=[];function j(e){return e instanceof HTMLElement?e.isContentEditable||e.tagName===`INPUT`||e.tagName===`TEXTAREA`||e.tagName===`SELECT`:!1}function M(){let e=Symbol(`sidebar-keyboard-shortcut`);return A.push(e),{isOwner:()=>A[0]===e,release:()=>{let t=A.indexOf(e);t!==-1&&A.splice(t,1)}}}const N=({children:e,defaultOpen:t=!0,keyboardShortcut:n=!0,mobileBreakpoint:r=`lg`,onOpenChange:i,onOpenMobileChange:a,open:s,openMobile:l})=>{let u=d(r),f=_(),p=s!=null,[h,x]=b(t),S=p?s:h,w=m(e=>{p||x(e),i?.(e)},[p,i]),T=l!=null,[E,O]=b(!1),k=T?l:E,A=m(e=>{T||O(e),a?.(e)},[T,a]),N=y(u);g(()=>{let e=N.current&&!u;N.current=u,e&&k&&A(!1)},[u,k,A]);let P=m(()=>{u?A(!k):w(!S)},[u,S,k,w,A]),F=c(P);g(()=>{if(!n)return;let e=M(),t=o(),r=n=>{if(!e.isOwner()||j(n.target))return;let r=t?n.metaKey:n.ctrlKey,i=t?n.ctrlKey:n.metaKey;n.key.toLowerCase()===`b`&&r&&!i&&!n.altKey&&!n.shiftKey&&(n.preventDefault(),F())};return window.addEventListener(`keydown`,r),()=>{window.removeEventListener(`keydown`,r),e.release()}},[n,F]);let I=v(()=>({isMobile:u,keyboardShortcut:n,mobileBreakpoint:r,navId:f,open:S,openMobile:k,setOpen:w,setOpenMobile:A,toggle:P}),[u,n,r,f,S,k,w,A,P]);return C(D.Provider,{value:I,children:e})},P=({"aria-label":n,"aria-labelledby":r,children:a,className:o,"data-slot":s,...c})=>{let{isMobile:l,mobileBreakpoint:d,navId:f,open:p,openMobile:m,setOpenMobile:h}=k(`Nav`),g=i(),_=n??(r==null?`Main`:void 0);return l?C(u.Root,{open:m,onOpenChange:h,children:w(u.Content,{side:`left`,preferredWidth:`sm:max-w-(--sidebar-width-mobile,18rem)`,"data-slot":t(s,`sidebar-nav`),"data-mobile":``,...r==null?null:{"aria-labelledby":r},className:e(`bg-base w-(--sidebar-width-mobile,18rem) max-w-full p-0`,o),...c,children:[C(u.Title,{className:`sr-only`,children:_??`Sidebar`}),C(`nav`,{id:f,"aria-label":_,"aria-labelledby":r,className:`flex h-full w-full min-w-0 flex-col text-sm`,children:a})]})}):C(`div`,{"data-slot":t(s,`sidebar-nav`),"data-state":p?`expanded`:`collapsed`,"data-hydrated":g?``:void 0,className:e(`group/sidebar-nav bg-base relative h-full w-(--sidebar-width,13rem) shrink-0 overflow-hidden`,`data-[state=collapsed]:w-(--sidebar-width-icon,3.25rem)`,!g&&E[d],g&&[`transition-[width] duration-200 ease-linear motion-reduce:transition-none`],o),...c,children:C(`nav`,{id:f,"aria-label":_,"aria-labelledby":r,className:`absolute inset-y-0 left-0 flex w-full min-w-0 flex-col text-sm`,children:a})})},F=C(T,{}),I=({label:e,shortcut:t})=>t==null?e:w(`span`,{className:`flex items-center gap-1.5`,children:[e,C(`span`,{"aria-hidden":!0,className:`inline-flex shrink-0 items-center gap-0.5 [&_kbd]:h-4 [&_kbd]:min-w-4 [&_kbd]:bg-neutral-500/25 [&_kbd]:px-0.5 [&_kbd]:text-xs`,children:t})]}),L=({appearance:e=`ghost`,"data-slot":n,icon:i=F,intent:a=`neutral`,label:o=`Toggle Sidebar`,onClick:c,shortcut:l,...u})=>{let{isMobile:d,keyboardShortcut:p,navId:m,open:h,openMobile:g,toggle:_}=k(`Trigger`),v=s(),y=d?g:h,b=!d||g,x=p?l:void 0,S=v?`Meta+B`:`Control+B`;return w(f.Root,{children:[C(f.Trigger,{asChild:!0,children:C(r,{appearance:e,"aria-controls":b?m:void 0,"aria-expanded":y,"aria-keyshortcuts":p?S:void 0,"data-slot":t(n,`sidebar-trigger`),"data-state":y?`expanded`:`collapsed`,icon:i,intent:a,label:o,onClick:e=>{c?.(e),e.defaultPrevented||_()},...u})}),C(f.Content,{"data-slot":`sidebar-trigger-tooltip`,children:C(I,{label:o,shortcut:x})})]})},R=({asChild:r,children:i,className:a,"data-slot":o,...s})=>C(r?n:`div`,{"data-slot":t(o,`sidebar-header`),className:e(`grid grid-cols-1 grid-rows-(--sidebar-header-height,4.5rem) shrink-0 items-center px-3`,`group-data-[state=expanded]/sidebar-nav:pr-1`,a),...s,children:i}),z=({asChild:r,children:i,className:a,"data-slot":o,...s})=>C(r?n:`div`,{"data-slot":t(o,`sidebar-body`),className:e(`scrollbar scrollbar-gutter-stable scroll-fade-y flex-1 scroll-py-6 space-y-2 overflow-y-auto overflow-x-hidden px-3 pt-1.5 pb-4`,`group-data-[state=expanded]/sidebar-nav:pr-1`,`group-data-[state=collapsed]/sidebar-nav:scrollbar-none`,`group-data-[state=collapsed]/sidebar-nav:scrollbar-gutter-auto`,`group-data-[state=collapsed]/sidebar-nav:[&::-webkit-scrollbar]:hidden`,a),...s,children:i}),B=({asChild:r,children:i,className:a,"data-slot":o,...s})=>C(r?n:`div`,{"data-slot":t(o,`sidebar-footer`),className:e(`shrink-0 px-3 pt-3 pb-3.5`,`group-data-[state=expanded]/sidebar-nav:pr-1`,a),...s,children:i}),V=p(null),H=({asChild:r,children:i,className:a,"data-slot":o,...s})=>{let[c,l]=b(null),u=v(()=>({mountedLabelId:c,setMountedLabelId:l}),[c]),d=r?n:`div`;return C(V.Provider,{value:u,children:C(d,{"data-slot":t(o,`sidebar-group`),className:e(`pt-0.5`,a),...s,children:i})})},U=({asChild:r,children:i,className:a,"data-slot":o,id:s,...c})=>{let l=h(V),u=_(),d=s??(l==null?void 0:u),f=l?.setMountedLabelId;return g(()=>{if(f!=null&&d!=null)return f(d),()=>{f(null)}},[f,d]),C(r?n:`div`,{id:d,"data-slot":t(o,`sidebar-group-label`),className:e(`text-muted flex min-w-0 items-center gap-2 truncate px-2 py-1 text-xs font-medium`,`group-data-[state=collapsed]/sidebar-nav:opacity-0`,`group-data-[state=collapsed]/sidebar-nav:pointer-events-none`,`group-data-hydrated/sidebar-nav:transition-opacity group-data-hydrated/sidebar-nav:duration-200 group-data-hydrated/sidebar-nav:ease-linear group-data-hydrated/sidebar-nav:motion-reduce:transition-none`,a),...c,children:i})},W=({"aria-labelledby":r,asChild:i,children:a,className:o,"data-slot":s,...c})=>{let l=h(V);return C(i?n:`ul`,{"aria-labelledby":r??l?.mountedLabelId??void 0,"data-slot":t(s,`sidebar-list`),className:e(`mb-2 space-y-px`,o),...c,children:a})},G=({asChild:r,children:i,className:a,"data-slot":o,...s})=>C(r?n:`li`,{"data-slot":t(o,`sidebar-item`),className:e(`list-none`,a),...s,children:i}),K=[`ring-focus-accent flex w-full min-w-0 items-center gap-2 truncate rounded-md px-2 py-1 text-left font-normal transition-none focus:outline-hidden focus-visible:ring-4`,`text-body hover:text-strong hover:bg-neutral-500/10`,`data-state-open:bg-neutral-500/15 data-state-open:text-strong`,`group-data-[state=collapsed]/sidebar-nav:ml-1`,`group-data-[state=collapsed]/sidebar-nav:w-7`,`group-data-[state=collapsed]/sidebar-nav:p-1`],q={Root:N,Nav:P,Trigger:L,Header:R,Body:z,Footer:B,Group:H,GroupLabel:U,List:W,Item:G,ItemButton:({asChild:r,children:i,className:a,current:o,"data-slot":s,type:c,...l})=>C(r?n:`button`,{"data-slot":t(s,`sidebar-item-button`),"data-current":o?``:void 0,"aria-current":o?`page`:void 0,type:r?c:c??`button`,className:e(K,`data-current:bg-neutral-500/15 data-current:text-strong`,`aria-[current=page]:bg-neutral-500/15 aria-[current=page]:text-strong`,`[&>svg]:text-muted hover:[&>svg]:text-strong data-current:[&>svg]:text-strong aria-[current=page]:[&>svg]:text-strong [&>svg:first-child]:size-5 [&>svg]:shrink-0`,a),...l,children:i}),SearchTrigger:({asChild:r,children:i,className:a,"data-slot":o,shortcut:s,type:c,...l})=>{let u=r?n:`button`,d=s==null?i:w(S,{children:[i,C(`span`,{"aria-hidden":!0,className:e(`pointer-events-none -mr-1 ml-auto inline-flex shrink-0 items-center gap-0.5 opacity-0 select-none`,`group-hover:opacity-100 group-focus-visible:opacity-100`,`group-data-[state=collapsed]/sidebar-nav:hidden`,`[&_kbd]:text-body [&_kbd]:h-5 [&_kbd]:min-w-5 [&_kbd]:bg-neutral-500/20 [&_kbd]:px-1 [&_kbd]:text-xs [&_kbd]:font-normal`),children:s})]});return C(u,{"data-slot":t(o,`sidebar-search-trigger`),type:r?c:c??`button`,className:e(`group`,K,`[&>svg:first-child]:text-muted hover:[&>svg:first-child]:text-strong [&>svg:first-child]:size-5 [&>svg]:shrink-0`,a),...l,children:d})},SwitcherTrigger:({asChild:r,children:i,className:a,"data-slot":o,type:s,...c})=>C(r?n:`button`,{"data-slot":t(o,`sidebar-switcher-trigger`),type:r?s:s??`button`,className:e(`text-body hover:text-strong hover:bg-neutral-500/10 flex w-full min-w-0 items-center gap-2 rounded-[0.625rem] py-1 pr-1.5 pl-1 text-left font-medium transition-none`,`data-state-open:bg-neutral-500/15 data-state-open:text-strong`,`ring-focus-accent focus:outline-hidden focus-visible:ring-4`,`*:first:size-7`,`group-data-[state=collapsed]/sidebar-nav:w-9`,`group-data-[state=collapsed]/sidebar-nav:p-1`,`group-data-[state=collapsed]/sidebar-nav:[&>:not(:first-child)]:sr-only`,a),...c,children:i}),Tooltip:({children:e,"data-slot":n,label:r,shortcut:i,side:a=`right`,...o})=>{let{isMobile:s,open:c}=k(`Tooltip`),l=!s&&!c,[u,d]=b(!1),[p,m]=b(l);return p!==l&&(m(l),d(!1)),w(f.Root,{disableHoverableContent:!0,onOpenChange:e=>{d(e&&l)},open:l&&u,children:[C(f.Trigger,{asChild:!0,children:e}),C(f.Content,{"data-slot":t(n,`sidebar-tooltip`),side:a,...o,children:C(I,{label:r,shortcut:i})})]})},Separator:({className:n,"data-slot":r,...i})=>C(a,{"data-slot":t(r,`sidebar-separator`),className:e(`my-3`,`group-data-[state=collapsed]/sidebar-nav:w-9`,n),...i})},J=`mantle-sidebar-state`,Y={collapsed:`collapsed`,expanded:`expanded`};function X(e){let t=l(e,J);if(t===Y.expanded)return!0;if(t===Y.collapsed)return!1}function Z(e,t={}){let{domain:n,maxAge:r=31536e3,path:i=`/`,sameSite:a=`Lax`,secure:o=!1}=t,s=e?Y.expanded:Y.collapsed,c=[`${J}=${s}`,`Max-Age=${r}`,`Path=${i}`];return n!=null&&c.push(`Domain=${n}`),c.push(`SameSite=${a}`),o&&c.push(`Secure`),c.join(`; `)}export{J as SIDEBAR_STATE_COOKIE_NAME,q as Sidebar,X as extractSidebarStateCookie,Z as serializeSidebarStateCookie,O as useSidebar};
+import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./data-slot-EM6s2WEU.js";import{t as n}from"./slot-DpNWVci8.js";import{t as r}from"./button-CC10rP6X.js";import{t as i}from"./use-is-hydrated-DDCqXmju.js";import{n as a}from"./separator-D0D6VyyM.js";import{n as o,t as s}from"./use-is-apple-platform-Cxwrb86L.js";import{t as c}from"./use-callback-ref-IYti9y7x.js";import{n as l}from"./cookie-ca4g5CKp.js";import{t as u}from"./sheet-BcfnKUit.js";import{r as d}from"./use-breakpoint-Dqu12Szq.js";import{t as f}from"./tooltip-BZRRJgpm.js";import{createContext as p,useCallback as m,useContext as h,useEffect as g,useId as _,useMemo as v,useRef as y,useState as b}from"react";import x from"tiny-invariant";import{Fragment as S,jsx as C,jsxs as w}from"react/jsx-runtime";import{SidebarSimpleIcon as T}from"@phosphor-icons/react/SidebarSimple";const E={sm:`hidden sm:block`,md:`hidden md:block`,lg:`hidden lg:block`},D=p(null);function O(){let e=h(D);return x(e,`useSidebar must be used within Sidebar.Root.`),e}function k(e){let t=h(D);return x(t,`Sidebar.${e} must be rendered inside Sidebar.Root.`),t}const A=[];function j(e){return e instanceof HTMLElement?e.isContentEditable||e.tagName===`INPUT`||e.tagName===`TEXTAREA`||e.tagName===`SELECT`:!1}function M(){let e=Symbol(`sidebar-keyboard-shortcut`);return A.push(e),{isOwner:()=>A[0]===e,release:()=>{let t=A.indexOf(e);t!==-1&&A.splice(t,1)}}}const N=({children:e,defaultOpen:t=!0,keyboardShortcut:n=!0,mobileBreakpoint:r=`lg`,onOpenChange:i,onOpenMobileChange:a,open:s,openMobile:l})=>{let u=d(r),f=_(),p=s!=null,[h,x]=b(t),S=p?s:h,w=m(e=>{p||x(e),i?.(e)},[p,i]),T=l!=null,[E,O]=b(!1),k=T?l:E,A=m(e=>{T||O(e),a?.(e)},[T,a]),N=y(u);g(()=>{let e=N.current&&!u;N.current=u,e&&k&&A(!1)},[u,k,A]);let P=m(()=>{u?A(!k):w(!S)},[u,S,k,w,A]),F=c(P);g(()=>{if(!n)return;let e=M(),t=o(),r=n=>{if(!e.isOwner()||j(n.target))return;let r=t?n.metaKey:n.ctrlKey,i=t?n.ctrlKey:n.metaKey;n.key.toLowerCase()===`b`&&r&&!i&&!n.altKey&&!n.shiftKey&&(n.preventDefault(),F())};return window.addEventListener(`keydown`,r),()=>{window.removeEventListener(`keydown`,r),e.release()}},[n,F]);let I=v(()=>({isMobile:u,keyboardShortcut:n,mobileBreakpoint:r,navId:f,open:S,openMobile:k,setOpen:w,setOpenMobile:A,toggle:P}),[u,n,r,f,S,k,w,A,P]);return C(D.Provider,{value:I,children:e})},P=({"aria-label":n,"aria-labelledby":r,children:a,className:o,"data-slot":s,...c})=>{let{isMobile:l,mobileBreakpoint:d,navId:f,open:p,openMobile:m,setOpenMobile:h}=k(`Nav`),g=i(),_=n??(r==null?`Main`:void 0);return l?C(u.Root,{open:m,onOpenChange:h,children:w(u.Content,{side:`left`,preferredWidth:`sm:max-w-(--sidebar-width-mobile,18rem)`,"data-slot":t(s,`sidebar-nav`),"data-mobile":``,...r==null?null:{"aria-labelledby":r},className:e(`bg-base w-(--sidebar-width-mobile,18rem) max-w-full p-0`,o),...c,children:[C(u.Title,{className:`sr-only`,children:_??`Sidebar`}),C(`nav`,{id:f,"aria-label":_,"aria-labelledby":r,className:`flex h-full w-full min-w-0 flex-col text-sm`,children:a})]})}):C(`div`,{"data-slot":t(s,`sidebar-nav`),"data-state":p?`expanded`:`collapsed`,"data-hydrated":g?``:void 0,className:e(`group/sidebar-nav bg-base relative h-full w-(--sidebar-width,13rem) shrink-0 overflow-hidden`,`data-[state=collapsed]:w-(--sidebar-width-icon,3.25rem)`,!g&&E[d],g&&[`transition-[width] duration-200 ease-linear motion-reduce:transition-none`],o),...c,children:C(`nav`,{id:f,"aria-label":_,"aria-labelledby":r,className:`absolute inset-y-0 left-0 flex w-full min-w-0 flex-col text-sm`,children:a})})},F=C(T,{}),I=({label:e,shortcut:t})=>t==null?e:w(`span`,{className:`flex items-center gap-1.5`,children:[e,C(`span`,{"aria-hidden":!0,className:`inline-flex shrink-0 items-center gap-0.5 [&_kbd]:h-4 [&_kbd]:min-w-4 [&_kbd]:bg-neutral-500/25 [&_kbd]:px-0.5 [&_kbd]:text-xs`,children:t})]}),L=({appearance:e=`ghost`,"data-slot":n,icon:i=F,intent:a=`neutral`,label:o=`Toggle Sidebar`,onClick:c,shortcut:l,...u})=>{let{isMobile:d,keyboardShortcut:p,navId:m,open:h,openMobile:g,toggle:_}=k(`Trigger`),v=s(),y=d?g:h,b=!d||g,x=p?l:void 0,S=v?`Meta+B`:`Control+B`;return w(f.Root,{children:[C(f.Trigger,{asChild:!0,children:C(r,{appearance:e,"aria-controls":b?m:void 0,"aria-expanded":y,"aria-keyshortcuts":p?S:void 0,"data-slot":t(n,`sidebar-trigger`),"data-state":y?`expanded`:`collapsed`,icon:i,intent:a,label:o,onClick:e=>{c?.(e),e.defaultPrevented||_()},...u})}),C(f.Content,{"data-slot":`sidebar-trigger-tooltip`,children:C(I,{label:o,shortcut:x})})]})},R=({asChild:r,children:i,className:a,"data-slot":o,...s})=>C(r?n:`div`,{"data-slot":t(o,`sidebar-header`),className:e(`grid grid-cols-1 grid-rows-(--sidebar-header-height,4.5rem) shrink-0 items-center px-3`,`group-data-[state=expanded]/sidebar-nav:pr-1`,a),...s,children:i}),z=({asChild:r,children:i,className:a,"data-slot":o,...s})=>C(r?n:`div`,{"data-slot":t(o,`sidebar-body`),className:e(`scrollbar scrollbar-gutter-stable scroll-fade-y flex-1 scroll-py-6 space-y-2 overflow-y-auto overflow-x-hidden px-3 pt-1.5 pb-4`,`group-data-[state=expanded]/sidebar-nav:pr-1`,`group-data-[state=collapsed]/sidebar-nav:scrollbar-none`,`group-data-[state=collapsed]/sidebar-nav:scrollbar-gutter-auto`,`group-data-[state=collapsed]/sidebar-nav:[&::-webkit-scrollbar]:hidden`,a),...s,children:i}),B=({asChild:r,children:i,className:a,"data-slot":o,...s})=>C(r?n:`div`,{"data-slot":t(o,`sidebar-footer`),className:e(`shrink-0 px-3 pt-3 pb-3.5`,`group-data-[state=expanded]/sidebar-nav:pr-1`,a),...s,children:i}),V=p(null),H=({asChild:r,children:i,className:a,"data-slot":o,...s})=>{let[c,l]=b(null),u=v(()=>({mountedLabelId:c,setMountedLabelId:l}),[c]),d=r?n:`div`;return C(V.Provider,{value:u,children:C(d,{"data-slot":t(o,`sidebar-group`),className:e(`pt-0.5`,a),...s,children:i})})},U=({asChild:r,children:i,className:a,"data-slot":o,id:s,...c})=>{let l=h(V),u=_(),d=s??(l==null?void 0:u),f=l?.setMountedLabelId;return g(()=>{if(f!=null&&d!=null)return f(d),()=>{f(null)}},[f,d]),C(r?n:`div`,{id:d,"data-slot":t(o,`sidebar-group-label`),className:e(`text-muted flex min-w-0 items-center gap-2 truncate px-2 py-1 text-xs font-medium`,`group-data-[state=collapsed]/sidebar-nav:opacity-0`,`group-data-[state=collapsed]/sidebar-nav:pointer-events-none`,`group-data-hydrated/sidebar-nav:transition-opacity group-data-hydrated/sidebar-nav:duration-200 group-data-hydrated/sidebar-nav:ease-linear group-data-hydrated/sidebar-nav:motion-reduce:transition-none`,a),...c,children:i})},W=({"aria-labelledby":r,asChild:i,children:a,className:o,"data-slot":s,...c})=>{let l=h(V);return C(i?n:`ul`,{"aria-labelledby":r??l?.mountedLabelId??void 0,"data-slot":t(s,`sidebar-list`),className:e(`mb-2 space-y-px`,o),...c,children:a})},G=({asChild:r,children:i,className:a,"data-slot":o,...s})=>C(r?n:`li`,{"data-slot":t(o,`sidebar-item`),className:e(`list-none`,a),...s,children:i}),K=[`ring-focus-accent flex w-full min-w-0 items-center gap-2 truncate rounded-md px-2 py-1 text-left font-normal transition-none focus:outline-hidden focus-visible:ring-4`,`text-body hover:text-strong hover:bg-neutral-500/10`,`data-state-open:bg-neutral-500/15 data-state-open:text-strong`,`group-data-[state=collapsed]/sidebar-nav:ml-1`,`group-data-[state=collapsed]/sidebar-nav:w-7`,`group-data-[state=collapsed]/sidebar-nav:p-1`],q={Root:N,Nav:P,Trigger:L,Header:R,Body:z,Footer:B,Group:H,GroupLabel:U,List:W,Item:G,ItemButton:({asChild:r,children:i,className:a,current:o,"data-slot":s,type:c,...l})=>C(r?n:`button`,{"data-slot":t(s,`sidebar-item-button`),"data-current":o?``:void 0,"aria-current":o?`page`:void 0,type:r?c:c??`button`,className:e(K,`data-current:bg-neutral-500/15 data-current:text-strong`,`aria-[current=page]:bg-neutral-500/15 aria-[current=page]:text-strong`,`[&>svg]:text-muted hover:[&>svg]:text-strong data-current:[&>svg]:text-strong aria-[current=page]:[&>svg]:text-strong [&>svg:first-child]:size-5 [&>svg]:shrink-0`,a),...l,children:i}),SearchTrigger:({asChild:r,children:i,className:a,"data-slot":o,shortcut:s,type:c,...l})=>{let u=r?n:`button`,d=s==null?i:w(S,{children:[i,C(`span`,{"aria-hidden":!0,className:e(`pointer-events-none -mr-1 ml-auto inline-flex shrink-0 items-center gap-0.5 opacity-0 select-none`,`group-hover:opacity-100 group-focus-visible:opacity-100`,`group-data-[state=collapsed]/sidebar-nav:hidden`,`[&_kbd]:text-body [&_kbd]:h-5 [&_kbd]:min-w-5 [&_kbd]:bg-neutral-500/20 [&_kbd]:px-1 [&_kbd]:text-xs [&_kbd]:font-normal`),children:s})]});return C(u,{"data-slot":t(o,`sidebar-search-trigger`),type:r?c:c??`button`,className:e(`group`,K,`[&>svg:first-child]:text-muted hover:[&>svg:first-child]:text-strong [&>svg:first-child]:size-5 [&>svg]:shrink-0`,a),...l,children:d})},SwitcherTrigger:({asChild:r,children:i,className:a,"data-slot":o,type:s,...c})=>C(r?n:`button`,{"data-slot":t(o,`sidebar-switcher-trigger`),type:r?s:s??`button`,className:e(`text-body hover:text-strong hover:bg-neutral-500/10 flex w-full min-w-0 items-center gap-2 rounded-[0.625rem] py-1 pr-1.5 pl-1 text-left font-medium transition-none`,`data-state-open:bg-neutral-500/15 data-state-open:text-strong`,`ring-focus-accent focus:outline-hidden focus-visible:ring-4`,`*:first:size-7`,`group-data-[state=collapsed]/sidebar-nav:w-9`,`group-data-[state=collapsed]/sidebar-nav:p-1`,`group-data-[state=collapsed]/sidebar-nav:[&>:not(:first-child)]:sr-only`,a),...c,children:i}),Tooltip:({children:e,"data-slot":n,label:r,shortcut:i,side:a=`right`,...o})=>{let{isMobile:s,open:c}=k(`Tooltip`),l=!s&&!c,[u,d]=b(!1),[p,m]=b(l);return p!==l&&(m(l),d(!1)),w(f.Root,{disableHoverableContent:!0,onOpenChange:e=>{d(e&&l)},open:l&&u,children:[C(f.Trigger,{asChild:!0,children:e}),C(f.Content,{"data-slot":t(n,`sidebar-tooltip`),side:a,...o,children:C(I,{label:r,shortcut:i})})]})},Separator:({className:n,"data-slot":r,...i})=>C(a,{"data-slot":t(r,`sidebar-separator`),className:e(`my-3`,`group-data-[state=collapsed]/sidebar-nav:w-9`,n),...i})},J=`mantle-sidebar-state`,Y={collapsed:`collapsed`,expanded:`expanded`};function X(e){let t=l(e,J);if(t===Y.expanded)return!0;if(t===Y.collapsed)return!1}function Z(e,t={}){let{domain:n,maxAge:r=31536e3,path:i=`/`,sameSite:a=`Lax`,secure:o=!1}=t,s=e?Y.expanded:Y.collapsed,c=[`${J}=${s}`,`Max-Age=${r}`,`Path=${i}`];return n!=null&&c.push(`Domain=${n}`),c.push(`SameSite=${a}`),o&&c.push(`Secure`),c.join(`; `)}export{J as SIDEBAR_STATE_COOKIE_NAME,q as Sidebar,X as extractSidebarStateCookie,Z as serializeSidebarStateCookie,O as useSidebar};

package/dist/source-all.css

@@ -2,13 +2,8 @@
  * @ngrok/mantle/source-all.css
  *
  * Import this alongside mantle.css to tell Tailwind to scan ALL mantle component
- * dist files for utility class names. This is equivalent to what mantle.css used
- * to do automatically and is the correct choice for apps that use most or all
- * mantle components (e.g. a dashboard).
- *
- * For apps that use a small subset of mantle (e.g. a marketing site), prefer the
- * @ngrok/mantle Vite plugin instead — it automatically injects @source directives
- * only for the components your app actually imports, reducing generated CSS size.
+ * dist files for utility class names. This is the supported way to register
+ * mantle's Tailwind sources.
  *
  * Usage:
  *   @import "@ngrok/mantle/mantle.css";

package/dist/split-button.d.ts

@@ -1,5 +1,5 @@
 import { t as Button } from "./button-DjsmeoJ2.js";
-import { t as IconButton } from "./button-DkUUma3k.js";
+import { t as IconButton } from "./button-C39M5h4K.js";
 import { t as ButtonSize } from "./button-BCoI4bhP.js";
 import { t as DropdownMenu } from "./dropdown-menu-CpsUJGbn.js";
 import { ComponentProps, ReactNode } from "react";

package/dist/split-button.js

@@ -1 +1 @@
-import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./icon-lZ48P8Nn.js";import{t as n}from"./button-Bc0lEOJ2.js";import{t as r}from"./button-CNg69RsV.js";import{t as i}from"./dropdown-menu-DJDrRzDU.js";import{CaretDownIcon as a}from"@phosphor-icons/react/CaretDown";import{createContext as o,useContext as s,useMemo as c}from"react";import{jsx as l}from"react/jsx-runtime";const u=o({size:`md`}),d={Root:({className:t,children:n,dir:r,open:a,defaultOpen:o,onOpenChange:s,modal:d,size:f=`md`,ref:p,...m})=>{let h=c(()=>({size:f}),[f]);return l(i.Root,{dir:r,open:a,defaultOpen:o,onOpenChange:s,modal:d,children:l(u.Provider,{value:h,children:l(`div`,{"data-slot":`split-button`,"data-size":f,className:e(`flex flex-row [&>*:first-child]:rounded-r-none [&>*:last-child]:rounded-l-none [&>*:not(:first-child):not(:last-child)]:rounded-none [&>*:not(:first-child)]:-ml-px [&>*:focus]:relative [&>*:focus]:z-10 [&>*:hover]:relative [&>*:hover]:z-10 *:active:scale-100!`,t),ref:p,...m,children:n})})})},PrimaryAction:e=>{let{size:t}=s(u);return l(n,{appearance:`outlined`,intent:`neutral`,size:t,...e})},MenuTrigger:({icon:e,...n})=>{let{size:o}=s(u);return l(i.Trigger,{asChild:!0,className:`group`,children:l(r,{icon:e??l(t,{svg:l(a,{weight:`bold`,className:`size-4 group-data-[state=open]:-rotate-180 transition-transform ease-out duration-150`})}),appearance:`outlined`,intent:`neutral`,size:o,...n})})},MenuContent:({align:e=`end`,...t})=>l(i.Content,{align:e,...t}),MenuItem:({className:t,...n})=>l(i.Item,{className:e(`gap-2`,t),...n})};export{d as SplitButton};
+import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./icon-lZ48P8Nn.js";import{t as n}from"./button-Bc0lEOJ2.js";import{t as r}from"./button-CC10rP6X.js";import{t as i}from"./dropdown-menu-DJDrRzDU.js";import{CaretDownIcon as a}from"@phosphor-icons/react/CaretDown";import{createContext as o,useContext as s,useMemo as c}from"react";import{jsx as l}from"react/jsx-runtime";const u=o({size:`md`}),d={Root:({className:t,children:n,dir:r,open:a,defaultOpen:o,onOpenChange:s,modal:d,size:f=`md`,ref:p,...m})=>{let h=c(()=>({size:f}),[f]);return l(i.Root,{dir:r,open:a,defaultOpen:o,onOpenChange:s,modal:d,children:l(u.Provider,{value:h,children:l(`div`,{"data-slot":`split-button`,"data-size":f,className:e(`flex flex-row [&>*:first-child]:rounded-r-none [&>*:last-child]:rounded-l-none [&>*:not(:first-child):not(:last-child)]:rounded-none [&>*:not(:first-child)]:-ml-px [&>*:focus]:relative [&>*:focus]:z-10 [&>*:hover]:relative [&>*:hover]:z-10 *:active:scale-100!`,t),ref:p,...m,children:n})})})},PrimaryAction:e=>{let{size:t}=s(u);return l(n,{appearance:`outlined`,intent:`neutral`,size:t,...e})},MenuTrigger:({icon:e,...n})=>{let{size:o}=s(u);return l(i.Trigger,{asChild:!0,className:`group`,children:l(r,{icon:e??l(t,{svg:l(a,{weight:`bold`,className:`size-4 group-data-[state=open]:-rotate-180 transition-transform ease-out duration-150`})}),appearance:`outlined`,intent:`neutral`,size:o,...n})})},MenuContent:({align:e=`end`,...t})=>l(i.Content,{align:e,...t}),MenuItem:({className:t,...n})=>l(i.Item,{className:e(`gap-2`,t),...n})};export{d as SplitButton};

package/dist/theme-switcher.d.ts

@@ -1,6 +1,6 @@
 import { t as WithDataSlot } from "./data-slot-CChfb_cv.js";
 import { t as WithStyleProps } from "./with-style-props-Dq5Vntqy.js";
-import { n as IconButtonProps, r as IconButtonAppearance } from "./button-DkUUma3k.js";
+import { n as IconButtonProps, r as IconButtonAppearance } from "./button-C39M5h4K.js";
 import { t as DropdownMenu } from "./dropdown-menu-CpsUJGbn.js";
 import "./dropdown-menu-CNaaABck.js";
 import { ComponentProps } from "react";
@@ -82,9 +82,9 @@ declare const Root: (props: ThemeSwitcherRootProps) => import("react").JSX.Eleme
  * The props for the `ThemeSwitcher.Trigger` component. Forwards
  * `IconButton`'s props, except the parts the trigger owns: `icon` (the
  * SSR-safe themed icon) and `intent` (always `"neutral"`). `asChild` and
- * `children` are removed — the trigger renders only its icon and sr-only
- * label, so both would be silently meaningless. `appearance` and `label`
- * become optional with theme-switcher defaults.
+ * `children` are removed: the trigger renders only its icon (the `label`
+ * renders as `aria-label`), so both would be silently meaningless.
+ * `appearance` and `label` become optional with theme-switcher defaults.
  */
 type ThemeSwitcherTriggerProps = Omit<IconButtonProps, "appearance" | "asChild" | "children" | "icon" | "intent" | "label"> & WithDataSlot & {
   /**
@@ -96,8 +96,8 @@ type ThemeSwitcherTriggerProps = Omit<IconButtonProps, "appearance" | "asChild"
    */
   appearance?: IconButtonAppearance;
   /**
-   * The accessible name for the trigger `IconButton`. Visually hidden but
-   * announced to screen readers. Override it for localization.
+   * The accessible name for the trigger `IconButton`, rendered as its
+   * `aria-label`. Override it for localization.
    *
    * @default "Change Theme"
    */

package/dist/theme-switcher.js

@@ -1 +1 @@
-import{t as e}from"./icon-lZ48P8Nn.js";import{t}from"./data-slot-EM6s2WEU.js";import{t as n}from"./button-CNg69RsV.js";import{t as r}from"./browser-only-CmEEzfU3.js";import{t as i}from"./skeleton-BhcJMpem.js";import{t as a}from"./dropdown-menu-DJDrRzDU.js";import{d as o,h as s,l as c,p as l}from"./theme-CVfq037P.js";import{n as u,t as d}from"./icons-DEVx1oP9.js";import{jsx as f,jsxs as p}from"react/jsx-runtime";const m={system:`System Preference`,light:`Light Mode`,dark:`Dark Mode`,"light-high-contrast":`Light High Contrast`,"dark-high-contrast":`Dark High Contrast`},h=({className:t,style:n})=>{let[r,i]=c();return f(a.RadioGroup,{"data-slot":`theme-dropdown-menu-radio-group`,className:t,style:n,value:r,onValueChange:e=>{l(e)&&i(e)},children:s.map(t=>p(a.RadioItem,{value:o(t),children:[f(e,{svg:f(u,{theme:t})}),m[t]]},t))})},g={Root:e=>f(a.Root,{...e}),Trigger:({appearance:e=`ghost`,"data-slot":o,disabled:s,label:c=`Change Theme`,ref:l,...u})=>f(a.Trigger,{asChild:!0,disabled:s,children:f(n,{ref:l,appearance:e,disabled:s,"data-slot":t(o,`theme-switcher-trigger`),intent:`neutral`,icon:f(r,{fallback:f(i,{className:`rounded-full size-5`}),children:()=>f(d,{className:`size-5`})}),label:c,...u})}),Content:({children:e,"data-slot":n,...r})=>f(a.Content,{"data-slot":t(n,`theme-switcher-content`),...r,children:e??f(h,{})})};export{h as ThemeDropdownMenuRadioGroup,g as ThemeSwitcher};
+import{t as e}from"./icon-lZ48P8Nn.js";import{t}from"./data-slot-EM6s2WEU.js";import{t as n}from"./button-CC10rP6X.js";import{t as r}from"./browser-only-CmEEzfU3.js";import{t as i}from"./skeleton-BhcJMpem.js";import{t as a}from"./dropdown-menu-DJDrRzDU.js";import{d as o,h as s,l as c,p as l}from"./theme-CVfq037P.js";import{n as u,t as d}from"./icons-DEVx1oP9.js";import{jsx as f,jsxs as p}from"react/jsx-runtime";const m={system:`System Preference`,light:`Light Mode`,dark:`Dark Mode`,"light-high-contrast":`Light High Contrast`,"dark-high-contrast":`Dark High Contrast`},h=({className:t,style:n})=>{let[r,i]=c();return f(a.RadioGroup,{"data-slot":`theme-dropdown-menu-radio-group`,className:t,style:n,value:r,onValueChange:e=>{l(e)&&i(e)},children:s.map(t=>p(a.RadioItem,{value:o(t),children:[f(e,{svg:f(u,{theme:t})}),m[t]]},t))})},g={Root:e=>f(a.Root,{...e}),Trigger:({appearance:e=`ghost`,"data-slot":o,disabled:s,label:c=`Change Theme`,ref:l,...u})=>f(a.Trigger,{asChild:!0,disabled:s,children:f(n,{ref:l,appearance:e,disabled:s,"data-slot":t(o,`theme-switcher-trigger`),intent:`neutral`,icon:f(r,{fallback:f(i,{className:`rounded-full size-5`}),children:()=>f(d,{className:`size-5`})}),label:c,...u})}),Content:({children:e,"data-slot":n,...r})=>f(a.Content,{"data-slot":t(n,`theme-switcher-content`),...r,children:e??f(h,{})})};export{h as ThemeDropdownMenuRadioGroup,g as ThemeSwitcher};

package/dist/utils.js

@@ -1 +1 @@
-import{t as e}from"./compose-refs-BdBMM9ga.js";import{t}from"./copy-to-clipboard-B4UB6pts.js";import{a as n,c as r,d as i,f as a,i as o,l as s,n as c,o as l,p as u,r as d,s as f,t as p,u as m}from"./direction-Wa9W2F61.js";import{t as h}from"./in-view-C2DpZ6s0.js";function g(e,t){return Math.sign(t.getTime()-e.getTime())}function _(e,t){return Math.sign(e.getTime()-t.getTime())}export{p as $alphanumericSortingDirection,c as $sortingDirection,d as $sortingMode,o as $timeSortingDirection,n as alphanumericSortingDirections,g as compareDatesNewestToOldest,_ as compareDatesOldestToNewest,e as composeRefs,t as copyToClipboard,h as inView,l as isAlphanumericSortingDirection,f as isSortingDirection,r as isSortingMode,s as isTimeSortingDirection,m as sortingDirections,i as sortingModes,a as timeSortingByDirection,u as timeSortingDirections};
+import{t as e}from"./compose-refs-BdBMM9ga.js";import{t}from"./copy-to-clipboard-B4UB6pts.js";import{a as n,c as r,d as i,f as a,i as o,l as s,n as c,o as l,p as u,r as d,s as f,t as p,u as m}from"./direction-Wa9W2F61.js";import{t as h}from"./in-view-T_AAYaaF.js";function g(e,t){return Math.sign(t.getTime()-e.getTime())}function _(e,t){return Math.sign(e.getTime()-t.getTime())}export{p as $alphanumericSortingDirection,c as $sortingDirection,d as $sortingMode,o as $timeSortingDirection,n as alphanumericSortingDirections,g as compareDatesNewestToOldest,_ as compareDatesOldestToNewest,e as composeRefs,t as copyToClipboard,h as inView,l as isAlphanumericSortingDirection,f as isSortingDirection,r as isSortingMode,s as isTimeSortingDirection,m as sortingDirections,i as sortingModes,a as timeSortingByDirection,u as timeSortingDirections};

package/dist/visually-hidden.d.ts

@@ -0,0 +1,41 @@
+import { n as WithAsChild } from "./as-child-D23mGo4f.js";
+import { ComponentProps } from "react";
+//#region src/components/visually-hidden/visually-hidden.d.ts
+/**
+ * Content for assistive technology only. Renders a native `<span>` clipped to
+ * a one-pixel box (the `sr-only` technique, never `display: none`). Screen
+ * readers read the content; sighted users never see it.
+ *
+ * **When to use**
+ * - State context the visual design already carries: "(opens in a new tab)" on an external link, a caption on a layout table.
+ * - Give a screen reader a text alternative for content it cannot read, such as a decorative chart.
+ * - Style the message of a {@link https://mantle.ngrok.com/components/primitives/live-region LiveRegion}, which builds on the same technique.
+ *
+ * **When not to use**
+ * - To name an icon-only control. Voice-control software skips a control whose only label is hidden DOM text, so use `aria-label`, as {@link https://mantle.ngrok.com/components/actions/icon-button IconButton}'s required `label` prop does.
+ * - To hide content from assistive technology too. Use the `hidden` attribute or `aria-hidden`.
+ * - For a link that appears on focus. Use {@link https://mantle.ngrok.com/components/primitives/skip-to-main-link SkipToMainLink}.
+ *
+ * **Polymorphism.** Pass `asChild` to hide a more semantic element instead of
+ * the default `<span>` (a `<caption>`, a `<legend>`, a heading).
+ *
+ * | Data Attribute | Value               | Description                                                               |
+ * | -------------- | ------------------- | ------------------------------------------------------------------------- |
+ * | `data-slot`    | `"visually-hidden"` | Stamped on the rendered element, and joined onto the child via `asChild`. |
+ *
+ * @see https://mantle.ngrok.com/components/primitives/visually-hidden
+ * @see https://webaim.org/techniques/css/invisiblecontent/
+ *
+ * @example
+ * ```tsx
+ * import { VisuallyHidden } from "@ngrok/mantle/visually-hidden";
+ *
+ * <a href="https://status.ngrok.com" target="_blank" rel="noreferrer">
+ *   ngrok status
+ *   <VisuallyHidden> (opens in a new tab)</VisuallyHidden>
+ * </a>
+ * ```
+ */
+declare const VisuallyHidden: ({ asChild, className, ref, ...props }: ComponentProps<"span"> & WithAsChild) => import("react").JSX.Element;
+//#endregion
+export { VisuallyHidden };

package/dist/visually-hidden.js

@@ -0,0 +1 @@
+import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./slot-DpNWVci8.js";import{jsx as n}from"react/jsx-runtime";const r=({asChild:r,className:i,ref:a,...o})=>n(r?t:`span`,{ref:a,"data-slot":`visually-hidden`,className:e(`sr-only`,i),...o});export{r as VisuallyHidden};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ngrok/mantle",
-  "version": "0.83.8",
+  "version": "0.84.0",
   "description": "mantle is ngrok's UI library and design system.",
   "homepage": "https://mantle.ngrok.com",
   "license": "MIT",
@@ -82,6 +82,7 @@
     "./label": "./dist/label.js",
     "./line-chart": "./dist/line-chart.js",
     "./list": "./dist/list.js",
+    "./live-region": "./dist/live-region.js",
     "./main": "./dist/main.js",
     "./media-object": "./dist/media-object.js",
     "./multi-select": "./dist/multi-select.js",
@@ -114,10 +115,11 @@
     "./tooltip": "./dist/tooltip.js",
     "./types": "./dist/types.js",
     "./utils": "./dist/utils.js",
+    "./visually-hidden": "./dist/visually-hidden.js",
     "./well": "./dist/well.js"
   },
   "dependencies": {
-    "@ariakit/react": "0.4.36",
+    "@ariakit/react": "0.4.38",
     "@headlessui/react": "2.2.10",
     "@radix-ui/react-dialog": "1.1.23",
     "@radix-ui/react-dropdown-menu": "2.1.24",
@@ -131,14 +133,14 @@
     "@radix-ui/react-tabs": "1.1.21",
     "@radix-ui/react-tooltip": "1.2.16",
     "@tanstack/react-table": "8.21.3",
-    "@tanstack/react-virtual": "3.14.9",
+    "@tanstack/react-virtual": "3.14.10",
     "class-variance-authority": "0.7.1",
     "cmdk": "1.1.1",
     "d3-scale": "4.0.2",
     "d3-shape": "3.2.0",
-    "input-otp": "1.4.2",
+    "input-otp": "1.5.0",
     "react-day-picker": "10.0.1",
-    "sonner": "2.0.7",
+    "sonner": "2.0.8",
     "tiny-invariant": "1.3.3",
     "tw-animate-css": "1.4.0",
     "uqr": "0.1.3"

package/dist/button-CNg69RsV.js

@@ -1 +0,0 @@
-import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./icon-lZ48P8Nn.js";import{t as n}from"./slot-DpNWVci8.js";import{t as r}from"./booleanish-BfvnW6vy.js";import{t as i}from"./button-DiDlvAOp.js";import{Children as a,cloneElement as o,isValidElement as s}from"react";import c from"tiny-invariant";import{Fragment as l,jsx as u,jsxs as d}from"react/jsx-runtime";import{CircleNotchIcon as f}from"@phosphor-icons/react/CircleNotch";const p=({"aria-disabled":p,appearance:m,asChild:h=!1,children:g,className:_,disabled:v,icon:y,intent:b,isLoading:x=!1,label:S,ref:C,size:w=`md`,type:T,...E})=>{let D=r(p??v??x),O=x?u(f,{className:`animate-spin`}):y,k={"aria-disabled":D,"data-slot":`icon-button`,className:e(i({appearance:m,intent:b,isLoading:x,size:w}),_),"data-appearance":m,"data-disabled":D,"data-icon-button":!0,"data-intent":b,"data-loading":x,"data-size":w,disabled:D,ref:C,...E},A=d(l,{children:[u(`span`,{className:`sr-only`,children:S}),u(t,{svg:O})]});return h?(c(s(g)&&a.only(g),"When using `asChild`, IconButton must be passed a single child as a JSX tag."),u(n,{...k,children:o(g,{},A)})):u(`button`,{...k,type:T??`button`,children:A})};export{p as t};

package/dist/in-view-C2DpZ6s0.js

@@ -1 +0,0 @@
-const e={some:0,all:1};function t(t,n,{root:r,margin:i,amount:a=`some`}={}){let o=new WeakMap,s=new IntersectionObserver(e=>{e.forEach(e=>{let t=o.get(e.target);if(e.isIntersecting!==!!t)if(e.isIntersecting){let t=n(e.target,e);typeof t==`function`?o.set(e.target,t):s.unobserve(e.target)}else typeof t==`function`&&(t(e),o.delete(e.target))})},{root:r,rootMargin:i,threshold:typeof a==`number`?a:e[a]});return s.observe(t),()=>{s.unobserve(t),s.disconnect()}}export{t};