@blakesteve/roster 5.11.0 → 5.13.0

package/dist/components/organisms/Navbar/Navbar.cjs

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),m=require("react"),f=require("../../../node_modules/@fortawesome/react-fontawesome/dist/index.cjs"),p=require("../../../node_modules/@fortawesome/free-solid-svg-icons/index.cjs"),n=require("../../../lib/utils.cjs"),cr=require("../../../lib/labels.cjs"),q=require("../../atoms/Button/Button.cjs"),E=require("../../atoms/Link/Link.cjs"),J=require("../../atoms/Badge/Badge.cjs"),dr=require("../../atoms/Avatar/Avatar.cjs"),Q=require("../../atoms/Switch/switch-variants.cjs"),d=require("../../molecules/Menu/Menu.cjs"),lr=require("./navbar-variants.cjs"),L=require("../../../node_modules/@headlessui/react/dist/components/popover/popover.cjs"),ur=require("../../../node_modules/@headlessui/react/dist/components/transition/transition.cjs");function T({on:s,size:e}){return r.jsx("span",{"aria-hidden":"true","data-testid":"navbar-theme-track","data-checked":s?"":void 0,className:n.cn(Q.switchTrackVariants({size:e,variant:"neutral"}),"rst:pointer-events-none"),children:r.jsx("span",{className:n.cn(Q.switchThumbVariants({size:e}))})})}const D="rst:gap-2 rst:px-4 rst:[&>[data-menu-lead]]:w-auto rst:text-gray-700 rst:dark:text-gray-200 rst:focus:bg-gray-50 rst:focus:text-gray-700 rst:dark:focus:bg-gray-700 rst:dark:focus:text-gray-200",xr=n.cn(D,"rst:font-semibold rst:rounded-sm rst:hover:text-gray-900 rst:dark:hover:text-gray-100 rst:hover:focus:text-gray-900 rst:dark:hover:focus:text-gray-100"),W=new WeakMap;function hr(s){if(!s||typeof s=="string")return;let e=W.get(s);return e||(e=a=>r.jsx(s,{...a}),W.set(s,e)),e}const Y=n.cn(D,"rst:border rst:border-transparent rst:font-medium rst:text-gray-600 rst:dark:text-gray-400 rst:focus:text-gray-600 rst:dark:focus:text-gray-400 rst:hover:bg-gray-500/10 rst:dark:hover:bg-gray-400/15 rst:hover:focus:bg-gray-500/10 rst:dark:hover:focus:bg-gray-400/15"),Z=(s,e)=>typeof s=="function"?s({close:e}):s,mr={openMainMenu:"Open main menu",closeMainMenu:"Close menu",openUserMenu:"Open user menu",logIn:"Log In",logOut:"Log Out",darkMode:"Dark Mode",pendingInvitations:"Pending Invitations",inbox:s=>`Inbox (${s})`};function gr(s){return m.useSyncExternalStore(e=>{if(!s||typeof document>"u")return()=>{};const a=new MutationObserver(e);return a.observe(document.documentElement,{attributes:!0,attributeFilter:["class"]}),()=>a.disconnect()},()=>s&&document.documentElement.classList.contains("dark"),()=>!1)}function H(s,e){if(!e||!s)return!1;if(s.contains(e))return!0;const a=e.closest?.("[data-menu-panel]")?.getAttribute("data-menu-tree");return!!a&&!!s.querySelector(`[data-menu-tree="${CSS.escape(a)}"]`)}const yr='a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';function fr({close:s,panel:e,hamburger:a}){return m.useEffect(()=>{const x=g=>{const b=g.target;!H(e.current,b)&&!a.current?.contains(b)&&s()};return document.addEventListener("pointerdown",x,{capture:!0}),()=>document.removeEventListener("pointerdown",x,{capture:!0})},[s,e,a]),null}function pr({close:s,panel:e}){return m.useEffect(()=>{const a=g=>{g.target!==e.current?.parentElement&&(H(e.current,g.target)||s())},x=requestAnimationFrame(()=>{e.current?.querySelector(yr)?.focus(),document.addEventListener("focusin",a)});return()=>{cancelAnimationFrame(x),document.removeEventListener("focusin",a)}},[s,e]),null}function vr({activePath:s,close:e}){const a=m.useRef(s);return m.useEffect(()=>{a.current!==s&&(a.current=s,e())},[s,e]),null}const br=({logoSrc:s,logoSize:e="2rem",logoHeight:a,logoWidth:x,logoClassName:g,brandName:b,items:_,activePath:w,routerElement:k,user:i,onLogin:M,onLogout:S,onInboxClick:j,onThemeToggle:v,actions:rr,brandElement:z,navActions:tr,userMenuItems:F=[],className:sr,variant:l="default",position:er="sticky",themeMode:O,labels:ar,notificationVariant:P="error",notificationFill:V="solid",...nr})=>{const o=cr.withLabels(mr,ar),ir=hr(k),N=(i?.notificationCount||0)>0,I=h=>typeof h=="number"?`${h}px`:h,$=a!==void 0||x!==void 0,G=$?{width:x===void 0?"auto":I(x),height:a===void 0?"auto":I(a)}:{width:I(e),height:I(e)},K=$&&"rst:object-contain rst:object-left rst:rtl:object-right",or=gr(O==="auto"),u=(O==="auto"?or?"dark":"light":O??(l==="white"||l==="default"?"light":"dark"))==="dark",A=l==="slate"||l==="primary"||l==="default"&&u||l==="white"&&u||l==="transparent"&&u,B=l==="primary"?{brand:"rst:text-primary-700-ink rst:hover:text-primary-700-ink/80 rst:dark:text-white rst:dark:hover:text-gray-200",linkBase:"rst:text-primary-700-ink/80 rst:hover:text-primary-700-ink rst:dark:text-gray-300 rst:dark:hover:text-white",linkActive:"rst:text-primary-700-ink rst:font-semibold rst:hover:text-primary-700-ink/80 rst:dark:text-primary-400 rst:dark:hover:text-primary-300",hamburger:"rst:text-primary-700-ink/80 rst:hover:bg-primary-700-ink/10 rst:hover:text-primary-700-ink rst:dark:text-gray-300 rst:dark:hover:bg-white/10 rst:dark:hover:text-white"}:{brand:A?"rst:text-white rst:dark:text-white rst:hover:text-gray-200 rst:dark:hover:text-gray-200":"rst:text-gray-900 rst:dark:text-gray-900 rst:hover:text-gray-600 rst:dark:hover:text-gray-600",linkBase:A?"rst:text-gray-300 rst:dark:text-gray-300 rst:hover:text-white rst:dark:hover:text-white":"rst:text-gray-600 rst:dark:text-gray-600 rst:hover:text-gray-900 rst:dark:hover:text-gray-900",linkActive:A?"rst:text-primary-400 rst:dark:text-primary-400 rst:font-semibold rst:hover:text-primary-300 rst:dark:hover:text-primary-300":"rst:text-primary-600 rst:dark:text-primary-600 rst:font-semibold rst:hover:text-primary-700 rst:dark:hover:text-primary-700",hamburger:A?"rst:text-gray-300 rst:dark:text-gray-300 rst:hover:bg-white/10 rst:dark:hover:bg-white/10 rst:hover:text-white rst:dark:hover:text-white":"rst:text-gray-500 rst:dark:text-gray-500 rst:hover:bg-gray-100 rst:dark:hover:bg-gray-100 rst:hover:text-gray-700 rst:dark:hover:text-gray-700"},R=m.useRef(null),X=m.useRef(null);return r.jsx(L.Popover,{as:"nav",className:n.cn("rst:z-50",lr.navbarVariants({variant:l,position:er}),sr),...nr,children:({open:h,close:c})=>{const C=Z(rr,c),U=Z(tr,c);return r.jsxs(r.Fragment,{children:[r.jsxs("div",{className:"rst:container rst:mx-auto rst:flex rst:items-center rst:justify-between rst:px-4 rst:h-16",children:[r.jsxs(E.Link,{as:k,href:"/",to:"/",variant:"neutral",underline:"none",className:n.cn("rst:flex rst:items-center rst:gap-3 rst:transition-opacity",B.brand),children:[r.jsx("img",{src:s,alt:"",style:G,className:n.cn("rst:shrink-0",K,g??"rst:rounded-md")}),z??r.jsx("span",{className:"rst:text-xl rst:font-bold rst:tracking-tight",children:b})]}),r.jsxs("div",{className:"rst:hidden rst:md:flex rst:items-center rst:gap-8",children:[r.jsx("div",{className:"rst:flex rst:items-center rst:gap-6",children:_.map(t=>{const y=w===t.path;return r.jsxs(E.Link,{as:k,href:t.path,to:t.path,variant:"neutral",underline:"none",className:n.cn("rst:inline-flex rst:items-center rst:gap-1.5 rst:text-sm rst:transition-colors rst:duration-200",y?B.linkActive:B.linkBase),children:[t.label,t.badge&&r.jsx("span",{className:"rst:inline-flex",children:t.badge})]},t.path)})}),U,C??(i?r.jsx("div",{className:"rst:relative rst:ml-2",children:r.jsxs(d.Menu,{linkComponent:ir,children:[r.jsxs(d.MenuButton,{plain:!0,className:"rst:relative rst:flex rst:rounded-full rst:text-sm rst:focus-visible:outline-hidden rst:focus-visible:ring-2 rst:focus-visible:ring-ring rst:focus-visible:ring-offset-2 rst:ring-offset-background rst:before:absolute rst:before:-inset-1.5 rst:before:content-['']",children:[r.jsx("span",{className:"rst:sr-only",children:o.openUserMenu}),r.jsx(dr.Avatar,{"aria-hidden":"true",alt:"",initials:i.initials,src:i.avatarSrc,size:"sm",shape:"circle",colorScheme:i.avatarColor??"primary"}),N&&r.jsx("div",{className:"rst:absolute rst:-top-1 rst:-right-2",children:r.jsx(J.Badge,{fill:V,size:"xs",statusBadge:!0,variant:P,children:i.notificationCount})})]}),r.jsxs(d.MenuItems,{align:"end",offset:8,className:"rst:w-48 rst:min-w-0 rst:bg-white rst:dark:bg-gray-800 rst:ring-black/5 rst:dark:ring-white/10 rst:divide-y rst:divide-gray-100 rst:dark:divide-gray-700",children:[(N&&j||v)&&r.jsxs(d.MenuGroup,{className:"rst:py-1",children:[N&&j&&r.jsx(d.MenuItem,{onSelect:j,className:Y,icon:r.jsx(f.FontAwesomeIcon,{icon:p.faInbox,className:"rst:text-primary-500 rst:w-4"}),children:o.inbox(i.notificationCount??0)}),v&&r.jsx(d.MenuCheckboxItem,{checked:u,onCheckedChange:()=>v(),closeOnSelect:!1,className:D,icon:r.jsx(f.FontAwesomeIcon,{icon:p.faMoon,className:n.cn("rst:w-4 rst:transition-colors",u?"rst:text-amber-500":"rst:text-gray-400")}),indicator:r.jsx(T,{on:u,size:"xs"}),children:r.jsx("span",{className:"rst:font-medium",children:o.darkMode})})]}),F.length>0&&r.jsx(d.MenuGroup,{className:"rst:py-1",children:F.map(t=>r.jsx(d.MenuItem,{href:t.path,badge:t.badge,className:xr,children:t.label},t.path))}),S&&r.jsx(d.MenuGroup,{className:"rst:py-1",children:r.jsx(d.MenuItem,{onSelect:S,className:Y,icon:r.jsx(f.FontAwesomeIcon,{icon:p.faRightFromBracket,className:"rst:text-gray-400 rst:dark:text-gray-500 rst:w-4"}),children:o.logOut})})]})]})}):r.jsx(q.Button,{size:"sm",variant:"solid",colorScheme:"primary",onClick:M,children:o.logIn}))]}),r.jsx("div",{ref:X,"data-roster-hamburger":!0,className:"rst:flex rst:md:hidden",children:r.jsxs(L.PopoverButton,{className:n.cn("rst:inline-flex rst:items-center rst:justify-center rst:rounded-md rst:p-2 rst:focus-visible:outline-hidden rst:focus-visible:ring-2 rst:focus-visible:ring-ring rst:focus-visible:ring-offset-2 rst:ring-offset-background",B.hamburger),children:[r.jsx("span",{className:"rst:sr-only",children:o.openMainMenu}),h?r.jsx(f.FontAwesomeIcon,{icon:p.faXmark,className:"rst:block rst:h-6 rst:w-6","aria-hidden":"true"}):r.jsxs("div",{className:"rst:relative",children:[r.jsx(f.FontAwesomeIcon,{icon:p.faBars,className:"rst:block rst:h-6 rst:w-6","aria-hidden":"true"}),N&&r.jsx("span",{className:"rst:absolute rst:top-0 rst:right-0 rst:block rst:h-2.5 rst:w-2.5 rst:rounded-full rst:bg-error-500 rst:ring-2 rst:ring-transparent rst:transform rst:translate-x-1/4 rst:-translate-y-1/4"})]})]})})]}),h&&r.jsx(fr,{close:c,panel:R,hamburger:X}),h&&r.jsx(pr,{close:c,panel:R}),h&&r.jsx(vr,{activePath:w,close:c}),r.jsx(ur.Transition,{as:m.Fragment,enter:"rst:duration-200 rst:ease-out",enterFrom:"rst:opacity-0 rst:scale-95",enterTo:"rst:opacity-100 rst:scale-100",leave:"rst:duration-100 rst:ease-in",leaveFrom:"rst:opacity-100 rst:scale-100",leaveTo:"rst:opacity-0 rst:scale-95",children:r.jsx(L.PopoverPanel,{className:"rst:absolute rst:top-0 rst:inset-x-0 rst:z-50 rst:origin-top-right rst:transform rst:p-2 rst:transition rst:md:hidden",children:r.jsxs("div",{ref:R,"data-roster-mobile-panel":!0,className:"rst:rounded-lg rst:elevation-anchored rst:ring rst:ring-black/5 rst:dark:ring-white/10 rst:divide-y rst:divide-gray-100 rst:dark:divide-gray-700 rst:bg-white rst:dark:bg-gray-800",children:[r.jsxs("div",{className:"rst:px-5 rst:pt-5 rst:pb-6",children:[r.jsxs("div",{className:"rst:flex rst:items-center rst:justify-between",children:[r.jsxs("div",{className:"rst:flex rst:items-center rst:gap-3",children:[r.jsx("img",{src:s,alt:"",style:G,className:n.cn("rst:shrink-0",K,g??"rst:rounded-md")}),z??r.jsx("span",{className:"rst:font-bold rst:text-gray-900 rst:dark:text-white",children:b})]}),r.jsx("div",{className:"rst:-mr-2",children:r.jsxs(L.PopoverButton,{className:"rst:inline-flex rst:items-center rst:justify-center rst:rounded-md rst:p-2 rst:text-gray-400 rst:hover:bg-gray-100 rst:dark:hover:bg-gray-700 rst:hover:text-gray-500 rst:dark:hover:text-white rst:focus:outline-hidden",children:[r.jsx("span",{className:"rst:sr-only",children:o.closeMainMenu}),r.jsx(f.FontAwesomeIcon,{icon:p.faXmark,className:"rst:h-6 rst:w-6","aria-hidden":"true"})]})})]}),r.jsxs("div",{className:"rst:mt-6",children:[U&&r.jsx("div",{className:"rst:mb-4",children:U}),r.jsxs("nav",{className:"rst:grid rst:gap-y-4",children:[_.map(t=>{const y=w===t.path;return r.jsx(E.Link,{as:k,href:t.path,to:t.path,onClick:()=>c(),variant:"neutral",underline:"none",className:n.cn("rst:-m-3 rst:flex rst:items-center rst:rounded-md rst:p-3 rst:transition-colors","rst:hover:bg-gray-50 rst:dark:hover:bg-gray-700",y?"rst:bg-gray-50 rst:dark:bg-gray-700":"rst:text-gray-900 rst:dark:text-gray-100"),children:r.jsxs("span",{className:n.cn("rst:ml-3 rst:inline-flex rst:items-center rst:gap-1.5 rst:text-base rst:font-medium",y?"rst:text-primary-600 rst:dark:text-primary-400 rst:font-bold":"rst:text-gray-900 rst:dark:text-gray-100"),children:[t.label,t.badge&&r.jsx("span",{className:"rst:inline-flex",children:t.badge})]})},t.path)}),i&&F.length>0&&r.jsxs(r.Fragment,{children:[r.jsx("hr",{className:"rst:border-gray-100 rst:dark:border-gray-700"}),F.map(t=>{const y=w===t.path;return r.jsxs(E.Link,{as:k,href:t.path,to:t.path,onClick:()=>c(),variant:"neutral",underline:"none",className:n.cn("rst:-m-3 rst:flex rst:items-center rst:rounded-md rst:p-3 rst:transition-colors","rst:hover:bg-gray-50 rst:dark:hover:bg-gray-700",y?"rst:bg-gray-50 rst:dark:bg-gray-700":"rst:text-gray-900 rst:dark:text-gray-100"),children:[r.jsx("span",{className:n.cn("rst:ml-3 rst:text-base rst:font-medium",y?"rst:text-primary-600 rst:dark:text-primary-400 rst:font-bold":"rst:text-gray-900 rst:dark:text-gray-100"),children:t.label}),t.badge&&r.jsx("span",{className:"rst:ml-2 rst:inline-flex",children:t.badge})]},t.path)})]})]})]})]}),(i||C||M)&&r.jsx("div",{className:"rst:py-6 rst:px-5 rst:space-y-4",children:C||(!i&&M?r.jsx(q.Button,{variant:"solid",colorScheme:"primary",className:"rst:w-full rst:justify-center",onClick:()=>{M(),c()},children:o.logIn}):r.jsxs(r.Fragment,{children:[N&&j&&r.jsx(q.Button,{variant:"ghost",colorScheme:"neutral",onClick:()=>{j?.(),c()},className:"rst:w-full rst:justify-between rst:px-4 rst:text-base rst:font-medium rst:hover:bg-gray-50 rst:dark:hover:bg-gray-700 rst:text-gray-900 rst:dark:text-gray-100",endIcon:r.jsx(J.Badge,{fill:V,size:"xs",statusBadge:!0,variant:P,children:i?.notificationCount}),children:o.pendingInvitations}),v&&r.jsxs("div",{onClick:t=>{t.preventDefault(),v()},role:"switch","aria-checked":u,tabIndex:0,onKeyDown:t=>{t.repeat||(t.key==="Enter"||t.key===" ")&&(t.preventDefault(),v())},className:"rst:flex rst:w-full rst:items-center rst:justify-between rst:rounded-md rst:px-4 rst:py-2 rst:text-base rst:transition-colors rst:cursor-pointer rst:hover:bg-gray-50 rst:dark:hover:bg-gray-700 rst:text-gray-900 rst:dark:text-gray-100",children:[r.jsxs("div",{className:"rst:flex rst:items-center rst:gap-3 rst:font-medium",children:[r.jsx(f.FontAwesomeIcon,{icon:p.faMoon,className:n.cn("rst:w-5 rst:transition-colors",u?"rst:text-amber-500":"rst:text-gray-400")}),r.jsx("span",{children:o.darkMode})]}),r.jsx(T,{on:u,size:"sm"})]}),S&&r.jsx(q.Button,{variant:"outline",colorScheme:"error",className:"rst:w-full rst:justify-center",onClick:()=>{S?.(),c()},children:o.logOut})]}))})]})})})]})}})};exports.Navbar=br;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),m=require("react"),f=require("../../../node_modules/@fortawesome/react-fontawesome/dist/index.cjs"),p=require("../../../node_modules/@fortawesome/free-solid-svg-icons/index.cjs"),n=require("../../../lib/utils.cjs"),cr=require("../../../lib/labels.cjs"),C=require("../../atoms/Button/Button.cjs"),E=require("../../atoms/Link/Link.cjs"),J=require("../../atoms/Badge/Badge.cjs"),dr=require("../../atoms/Avatar/Avatar.cjs"),Q=require("../../atoms/Switch/switch-variants.cjs"),d=require("../../molecules/Menu/Menu.cjs"),lr=require("./navbar-variants.cjs"),ur=require("../../../internal/key-focus.cjs"),L=require("../../../node_modules/@headlessui/react/dist/components/popover/popover.cjs"),xr=require("../../../node_modules/@headlessui/react/dist/components/transition/transition.cjs");function T({on:s,size:e}){return r.jsx("span",{"aria-hidden":"true","data-testid":"navbar-theme-track","data-checked":s?"":void 0,className:n.cn(Q.switchTrackVariants({size:e,variant:"neutral"}),"rst:pointer-events-none"),children:r.jsx("span",{className:n.cn(Q.switchThumbVariants({size:e}))})})}const D="rst:gap-2 rst:px-4 rst:[&>[data-menu-lead]]:w-auto rst:text-gray-700 rst:dark:text-gray-200 rst:focus:bg-gray-50 rst:focus:text-gray-700 rst:dark:focus:bg-gray-700 rst:dark:focus:text-gray-200",hr=n.cn(D,"rst:font-semibold rst:rounded-sm rst:hover:text-gray-900 rst:dark:hover:text-gray-100 rst:hover:focus:text-gray-900 rst:dark:hover:focus:text-gray-100"),W=new WeakMap;function mr(s){if(!s||typeof s=="string")return;let e=W.get(s);return e||(e=a=>r.jsx(s,{...a}),W.set(s,e)),e}const Y=n.cn(D,"rst:border rst:border-transparent rst:font-medium rst:text-gray-600 rst:dark:text-gray-400 rst:focus:text-gray-600 rst:dark:focus:text-gray-400 rst:hover:bg-gray-500/10 rst:dark:hover:bg-gray-400/15 rst:hover:focus:bg-gray-500/10 rst:dark:hover:focus:bg-gray-400/15"),Z=(s,e)=>typeof s=="function"?s({close:e}):s,gr={openMainMenu:"Open main menu",closeMainMenu:"Close menu",openUserMenu:"Open user menu",logIn:"Log In",logOut:"Log Out",darkMode:"Dark Mode",pendingInvitations:"Pending Invitations",inbox:s=>`Inbox (${s})`};function yr(s){return m.useSyncExternalStore(e=>{if(!s||typeof document>"u")return()=>{};const a=new MutationObserver(e);return a.observe(document.documentElement,{attributes:!0,attributeFilter:["class"]}),()=>a.disconnect()},()=>s&&document.documentElement.classList.contains("dark"),()=>!1)}function H(s,e){if(!e||!s)return!1;if(s.contains(e))return!0;const a=e.closest?.("[data-menu-panel]")?.getAttribute("data-menu-tree");return!!a&&!!s.querySelector(`[data-menu-tree="${CSS.escape(a)}"]`)}const fr='a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';function pr({close:s,panel:e,hamburger:a}){return m.useEffect(()=>{const x=g=>{const b=g.target;!H(e.current,b)&&!a.current?.contains(b)&&s()};return document.addEventListener("pointerdown",x,{capture:!0}),()=>document.removeEventListener("pointerdown",x,{capture:!0})},[s,e,a]),null}function vr({close:s,panel:e}){return m.useEffect(()=>{const a=g=>{g.target!==e.current?.parentElement&&(H(e.current,g.target)||s())},x=requestAnimationFrame(()=>{e.current?.querySelector(fr)?.focus(),document.addEventListener("focusin",a)});return()=>{cancelAnimationFrame(x),document.removeEventListener("focusin",a)}},[s,e]),null}function br({activePath:s,close:e}){const a=m.useRef(s);return m.useEffect(()=>{a.current!==s&&(a.current=s,e())},[s,e]),null}const kr=({logoSrc:s,logoSize:e="2rem",logoHeight:a,logoWidth:x,logoClassName:g,brandName:b,items:_,activePath:w,routerElement:k,user:i,onLogin:M,onLogout:S,onInboxClick:j,onThemeToggle:v,actions:rr,brandElement:z,navActions:tr,userMenuItems:F=[],className:sr,variant:l="default",position:er="sticky",themeMode:O,labels:ar,notificationVariant:P="error",notificationFill:K="solid",...nr})=>{ur.useKeyFocus();const o=cr.withLabels(gr,ar),ir=mr(k),N=(i?.notificationCount||0)>0,I=h=>typeof h=="number"?`${h}px`:h,V=a!==void 0||x!==void 0,$=V?{width:x===void 0?"auto":I(x),height:a===void 0?"auto":I(a)}:{width:I(e),height:I(e)},G=V&&"rst:object-contain rst:object-left rst:rtl:object-right",or=yr(O==="auto"),u=(O==="auto"?or?"dark":"light":O??(l==="white"||l==="default"?"light":"dark"))==="dark",A=l==="slate"||l==="primary"||l==="default"&&u||l==="white"&&u||l==="transparent"&&u,B=l==="primary"?{brand:"rst:text-primary-700-ink rst:hover:text-primary-700-ink/80 rst:dark:text-white rst:dark:hover:text-gray-200",linkBase:"rst:text-primary-700-ink/80 rst:hover:text-primary-700-ink rst:dark:text-gray-300 rst:dark:hover:text-white",linkActive:"rst:text-primary-700-ink rst:font-semibold rst:hover:text-primary-700-ink/80 rst:dark:text-primary-400 rst:dark:hover:text-primary-300",hamburger:"rst:text-primary-700-ink/80 rst:hover:bg-primary-700-ink/10 rst:hover:text-primary-700-ink rst:dark:text-gray-300 rst:dark:hover:bg-white/10 rst:dark:hover:text-white"}:{brand:A?"rst:text-white rst:dark:text-white rst:hover:text-gray-200 rst:dark:hover:text-gray-200":"rst:text-gray-900 rst:dark:text-gray-900 rst:hover:text-gray-600 rst:dark:hover:text-gray-600",linkBase:A?"rst:text-gray-300 rst:dark:text-gray-300 rst:hover:text-white rst:dark:hover:text-white":"rst:text-gray-600 rst:dark:text-gray-600 rst:hover:text-gray-900 rst:dark:hover:text-gray-900",linkActive:A?"rst:text-primary-400 rst:dark:text-primary-400 rst:font-semibold rst:hover:text-primary-300 rst:dark:hover:text-primary-300":"rst:text-primary-600 rst:dark:text-primary-600 rst:font-semibold rst:hover:text-primary-700 rst:dark:hover:text-primary-700",hamburger:A?"rst:text-gray-300 rst:dark:text-gray-300 rst:hover:bg-white/10 rst:dark:hover:bg-white/10 rst:hover:text-white rst:dark:hover:text-white":"rst:text-gray-500 rst:dark:text-gray-500 rst:hover:bg-gray-100 rst:dark:hover:bg-gray-100 rst:hover:text-gray-700 rst:dark:hover:text-gray-700"},R=m.useRef(null),X=m.useRef(null);return r.jsx(L.Popover,{as:"nav",className:n.cn("rst:z-50",lr.navbarVariants({variant:l,position:er}),sr),...nr,children:({open:h,close:c})=>{const q=Z(rr,c),U=Z(tr,c);return r.jsxs(r.Fragment,{children:[r.jsxs("div",{className:"rst:container rst:mx-auto rst:flex rst:items-center rst:justify-between rst:px-4 rst:h-16",children:[r.jsxs(E.Link,{as:k,href:"/",to:"/",variant:"neutral",underline:"none",className:n.cn("rst:flex rst:items-center rst:gap-3 rst:transition-opacity",B.brand),children:[r.jsx("img",{src:s,alt:"",style:$,className:n.cn("rst:shrink-0",G,g??"rst:rounded-md")}),z??r.jsx("span",{className:"rst:text-xl rst:font-bold rst:tracking-tight",children:b})]}),r.jsxs("div",{className:"rst:hidden rst:md:flex rst:items-center rst:gap-8",children:[r.jsx("div",{className:"rst:flex rst:items-center rst:gap-6",children:_.map(t=>{const y=w===t.path;return r.jsxs(E.Link,{as:k,href:t.path,to:t.path,variant:"neutral",underline:"none",className:n.cn("rst:inline-flex rst:items-center rst:gap-1.5 rst:text-sm rst:transition-colors rst:duration-200",y?B.linkActive:B.linkBase),children:[t.label,t.badge&&r.jsx("span",{className:"rst:inline-flex",children:t.badge})]},t.path)})}),U,q??(i?r.jsx("div",{className:"rst:relative rst:ml-2",children:r.jsxs(d.Menu,{linkComponent:ir,children:[r.jsxs(d.MenuButton,{plain:!0,className:"rst:relative rst:flex rst:rounded-full rst:text-sm rst:focus-visible:outline-hidden rst:focus-visible:ring-2 rst:focus-visible:ring-ring rst:focus-visible:ring-offset-2 rst:ring-offset-background rst:before:absolute rst:before:-inset-1.5 rst:before:content-['']",children:[r.jsx("span",{className:"rst:sr-only",children:o.openUserMenu}),r.jsx(dr.Avatar,{"aria-hidden":"true",alt:"",initials:i.initials,src:i.avatarSrc,size:"sm",shape:"circle",colorScheme:i.avatarColor??"primary"}),N&&r.jsx("div",{className:"rst:absolute rst:-top-1 rst:-right-2",children:r.jsx(J.Badge,{fill:K,size:"xs",statusBadge:!0,variant:P,children:i.notificationCount})})]}),r.jsxs(d.MenuItems,{align:"end",offset:8,className:"rst:w-48 rst:min-w-0 rst:bg-white rst:dark:bg-gray-800 rst:ring-black/5 rst:dark:ring-white/10 rst:divide-y rst:divide-gray-100 rst:dark:divide-gray-700",children:[(N&&j||v)&&r.jsxs(d.MenuGroup,{className:"rst:py-1",children:[N&&j&&r.jsx(d.MenuItem,{onSelect:j,className:Y,icon:r.jsx(f.FontAwesomeIcon,{icon:p.faInbox,className:"rst:text-primary-500 rst:w-4"}),children:o.inbox(i.notificationCount??0)}),v&&r.jsx(d.MenuCheckboxItem,{checked:u,onCheckedChange:()=>v(),closeOnSelect:!1,className:D,icon:r.jsx(f.FontAwesomeIcon,{icon:p.faMoon,className:n.cn("rst:w-4 rst:transition-colors",u?"rst:text-amber-500":"rst:text-gray-400")}),indicator:r.jsx(T,{on:u,size:"xs"}),children:r.jsx("span",{className:"rst:font-medium",children:o.darkMode})})]}),F.length>0&&r.jsx(d.MenuGroup,{className:"rst:py-1",children:F.map(t=>r.jsx(d.MenuItem,{href:t.path,badge:t.badge,className:hr,children:t.label},t.path))}),S&&r.jsx(d.MenuGroup,{className:"rst:py-1",children:r.jsx(d.MenuItem,{onSelect:S,className:Y,icon:r.jsx(f.FontAwesomeIcon,{icon:p.faRightFromBracket,className:"rst:text-gray-400 rst:dark:text-gray-500 rst:w-4"}),children:o.logOut})})]})]})}):r.jsx(C.Button,{size:"sm",variant:"solid",colorScheme:"primary",onClick:M,children:o.logIn}))]}),r.jsx("div",{ref:X,"data-roster-hamburger":!0,className:"rst:flex rst:md:hidden",children:r.jsxs(L.PopoverButton,{className:n.cn("rst:inline-flex rst:items-center rst:justify-center rst:rounded-md rst:p-2 rst:focus-visible:outline-hidden rst:focus-visible:ring-2 rst:focus-visible:ring-ring rst:focus-visible:ring-offset-2 rst:ring-offset-background",B.hamburger),children:[r.jsx("span",{className:"rst:sr-only",children:o.openMainMenu}),h?r.jsx(f.FontAwesomeIcon,{icon:p.faXmark,className:"rst:block rst:h-6 rst:w-6","aria-hidden":"true"}):r.jsxs("div",{className:"rst:relative",children:[r.jsx(f.FontAwesomeIcon,{icon:p.faBars,className:"rst:block rst:h-6 rst:w-6","aria-hidden":"true"}),N&&r.jsx("span",{className:"rst:absolute rst:top-0 rst:right-0 rst:block rst:h-2.5 rst:w-2.5 rst:rounded-full rst:bg-error-500 rst:ring-2 rst:ring-transparent rst:transform rst:translate-x-1/4 rst:-translate-y-1/4"})]})]})})]}),h&&r.jsx(pr,{close:c,panel:R,hamburger:X}),h&&r.jsx(vr,{close:c,panel:R}),h&&r.jsx(br,{activePath:w,close:c}),r.jsx(xr.Transition,{as:m.Fragment,enter:"rst:duration-200 rst:ease-out",enterFrom:"rst:opacity-0 rst:scale-95",enterTo:"rst:opacity-100 rst:scale-100",leave:"rst:duration-100 rst:ease-in",leaveFrom:"rst:opacity-100 rst:scale-100",leaveTo:"rst:opacity-0 rst:scale-95",children:r.jsx(L.PopoverPanel,{className:"rst:absolute rst:top-0 rst:inset-x-0 rst:z-50 rst:origin-top-right rst:transform rst:p-2 rst:transition rst:md:hidden",children:r.jsxs("div",{ref:R,"data-roster-mobile-panel":!0,className:"rst:rounded-lg rst:elevation-anchored rst:ring rst:ring-black/5 rst:dark:ring-white/10 rst:divide-y rst:divide-gray-100 rst:dark:divide-gray-700 rst:bg-white rst:dark:bg-gray-800",children:[r.jsxs("div",{className:"rst:px-5 rst:pt-5 rst:pb-6",children:[r.jsxs("div",{className:"rst:flex rst:items-center rst:justify-between",children:[r.jsxs("div",{className:"rst:flex rst:items-center rst:gap-3",children:[r.jsx("img",{src:s,alt:"",style:$,className:n.cn("rst:shrink-0",G,g??"rst:rounded-md")}),z??r.jsx("span",{className:"rst:font-bold rst:text-gray-900 rst:dark:text-white",children:b})]}),r.jsx("div",{className:"rst:-mr-2",children:r.jsxs(L.PopoverButton,{className:"rst:inline-flex rst:items-center rst:justify-center rst:rounded-md rst:p-2 rst:text-gray-400 rst:hover:bg-gray-100 rst:dark:hover:bg-gray-700 rst:hover:text-gray-500 rst:dark:hover:text-white rst:focus:outline-hidden",children:[r.jsx("span",{className:"rst:sr-only",children:o.closeMainMenu}),r.jsx(f.FontAwesomeIcon,{icon:p.faXmark,className:"rst:h-6 rst:w-6","aria-hidden":"true"})]})})]}),r.jsxs("div",{className:"rst:mt-6",children:[U&&r.jsx("div",{className:"rst:mb-4",children:U}),r.jsxs("nav",{className:"rst:grid rst:gap-y-4",children:[_.map(t=>{const y=w===t.path;return r.jsx(E.Link,{as:k,href:t.path,to:t.path,onClick:()=>c(),variant:"neutral",underline:"none",className:n.cn("rst:-m-3 rst:flex rst:items-center rst:rounded-md rst:p-3 rst:transition-colors","rst:hover:bg-gray-50 rst:dark:hover:bg-gray-700",y?"rst:bg-gray-50 rst:dark:bg-gray-700":"rst:text-gray-900 rst:dark:text-gray-100"),children:r.jsxs("span",{className:n.cn("rst:ml-3 rst:inline-flex rst:items-center rst:gap-1.5 rst:text-base rst:font-medium",y?"rst:text-primary-600 rst:dark:text-primary-400 rst:font-bold":"rst:text-gray-900 rst:dark:text-gray-100"),children:[t.label,t.badge&&r.jsx("span",{className:"rst:inline-flex",children:t.badge})]})},t.path)}),i&&F.length>0&&r.jsxs(r.Fragment,{children:[r.jsx("hr",{className:"rst:border-gray-100 rst:dark:border-gray-700"}),F.map(t=>{const y=w===t.path;return r.jsxs(E.Link,{as:k,href:t.path,to:t.path,onClick:()=>c(),variant:"neutral",underline:"none",className:n.cn("rst:-m-3 rst:flex rst:items-center rst:rounded-md rst:p-3 rst:transition-colors","rst:hover:bg-gray-50 rst:dark:hover:bg-gray-700",y?"rst:bg-gray-50 rst:dark:bg-gray-700":"rst:text-gray-900 rst:dark:text-gray-100"),children:[r.jsx("span",{className:n.cn("rst:ml-3 rst:text-base rst:font-medium",y?"rst:text-primary-600 rst:dark:text-primary-400 rst:font-bold":"rst:text-gray-900 rst:dark:text-gray-100"),children:t.label}),t.badge&&r.jsx("span",{className:"rst:ml-2 rst:inline-flex",children:t.badge})]},t.path)})]})]})]})]}),(i||q||M)&&r.jsx("div",{className:"rst:py-6 rst:px-5 rst:space-y-4",children:q||(!i&&M?r.jsx(C.Button,{variant:"solid",colorScheme:"primary",className:"rst:w-full rst:justify-center",onClick:()=>{M(),c()},children:o.logIn}):r.jsxs(r.Fragment,{children:[N&&j&&r.jsx(C.Button,{variant:"ghost",colorScheme:"neutral",onClick:()=>{j?.(),c()},className:"rst:w-full rst:justify-between rst:px-4 rst:text-base rst:font-medium rst:hover:bg-gray-50 rst:dark:hover:bg-gray-700 rst:text-gray-900 rst:dark:text-gray-100",endIcon:r.jsx(J.Badge,{fill:K,size:"xs",statusBadge:!0,variant:P,children:i?.notificationCount}),children:o.pendingInvitations}),v&&r.jsxs("div",{onClick:t=>{t.preventDefault(),v()},role:"switch","aria-checked":u,tabIndex:0,onKeyDown:t=>{t.repeat||(t.key==="Enter"||t.key===" ")&&(t.preventDefault(),v())},className:"rst:flex rst:w-full rst:items-center rst:justify-between rst:rounded-md rst:px-4 rst:py-2 rst:text-base rst:transition-colors rst:cursor-pointer rst:hover:bg-gray-50 rst:dark:hover:bg-gray-700 rst:text-gray-900 rst:dark:text-gray-100",children:[r.jsxs("div",{className:"rst:flex rst:items-center rst:gap-3 rst:font-medium",children:[r.jsx(f.FontAwesomeIcon,{icon:p.faMoon,className:n.cn("rst:w-5 rst:transition-colors",u?"rst:text-amber-500":"rst:text-gray-400")}),r.jsx("span",{children:o.darkMode})]}),r.jsx(T,{on:u,size:"sm"})]}),S&&r.jsx(C.Button,{variant:"outline",colorScheme:"error",className:"rst:w-full rst:justify-center",onClick:()=>{S?.(),c()},children:o.logOut})]}))})]})})})]})}})};exports.Navbar=kr;

package/dist/components/organisms/Navbar/Navbar.js

@@ -12,8 +12,9 @@ import { Avatar as xr } from "../../atoms/Avatar/Avatar.js";
 import { switchThumbVariants as vr, switchTrackVariants as br } from "../../atoms/Switch/switch-variants.js";
 import { Menu as kr, MenuButton as Nr, MenuItems as wr, MenuGroup as D, MenuItem as _, MenuCheckboxItem as Mr } from "../../molecules/Menu/Menu.js";
 import { navbarVariants as Sr } from "./navbar-variants.js";
-import { Popover as Cr, PopoverButton as T, PopoverPanel as Er } from "../../../node_modules/@headlessui/react/dist/components/popover/popover.js";
-import { Transition as Fr } from "../../../node_modules/@headlessui/react/dist/components/transition/transition.js";
+import { useKeyFocus as Cr } from "../../../internal/key-focus.js";
+import { Popover as Er, PopoverButton as T, PopoverPanel as Fr } from "../../../node_modules/@headlessui/react/dist/components/popover/popover.js";
+import { Transition as Or } from "../../../node_modules/@headlessui/react/dist/components/transition/transition.js";
 function H({ on: e, size: s }) {
   return /* @__PURE__ */ r(
     "span",
@@ -26,11 +27,11 @@ function H({ on: e, size: s }) {
     }
   );
 }
-const K = "rst:gap-2 rst:px-4 rst:[&>[data-menu-lead]]:w-auto rst:text-gray-700 rst:dark:text-gray-200 rst:focus:bg-gray-50 rst:focus:text-gray-700 rst:dark:focus:bg-gray-700 rst:dark:focus:text-gray-200", Or = /* @__PURE__ */ i(
+const K = "rst:gap-2 rst:px-4 rst:[&>[data-menu-lead]]:w-auto rst:text-gray-700 rst:dark:text-gray-200 rst:focus:bg-gray-50 rst:focus:text-gray-700 rst:dark:focus:bg-gray-700 rst:dark:focus:text-gray-200", jr = /* @__PURE__ */ i(
   K,
   "rst:font-semibold rst:rounded-sm rst:hover:text-gray-900 rst:dark:hover:text-gray-100 rst:hover:focus:text-gray-900 rst:dark:hover:focus:text-gray-100"
 ), rr = /* @__PURE__ */ new WeakMap();
-function jr(e) {
+function Ar(e) {
   if (!e || typeof e == "string") return;
   let s = rr.get(e);
   return s || (s = (n) => /* @__PURE__ */ r(e, { ...n }), rr.set(e, s)), s;
@@ -38,7 +39,7 @@ function jr(e) {
 const tr = /* @__PURE__ */ i(
   K,
   "rst:border rst:border-transparent rst:font-medium rst:text-gray-600 rst:dark:text-gray-400 rst:focus:text-gray-600 rst:dark:focus:text-gray-400 rst:hover:bg-gray-500/10 rst:dark:hover:bg-gray-400/15 rst:hover:focus:bg-gray-500/10 rst:dark:hover:focus:bg-gray-400/15"
-), er = (e, s) => typeof e == "function" ? e({ close: s }) : e, Ar = {
+), er = (e, s) => typeof e == "function" ? e({ close: s }) : e, Br = {
   openMainMenu: "Open main menu",
   closeMainMenu: "Close menu",
   openUserMenu: "Open user menu",
@@ -48,7 +49,7 @@ const tr = /* @__PURE__ */ i(
   pendingInvitations: "Pending Invitations",
   inbox: (e) => `Inbox (${e})`
 };
-function Br(e) {
+function Ir(e) {
   return ur.useSyncExternalStore(
     (s) => {
       if (!e || typeof document > "u") return () => {
@@ -69,8 +70,8 @@ function sr(e, s) {
   const n = s.closest?.("[data-menu-panel]")?.getAttribute("data-menu-tree");
   return !!n && !!e.querySelector(`[data-menu-tree="${CSS.escape(n)}"]`);
 }
-const Ir = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
-function Lr({ close: e, panel: s, hamburger: n }) {
+const Lr = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+function Ur({ close: e, panel: s, hamburger: n }) {
   return z(() => {
     const u = (g) => {
       const x = g.target;
@@ -79,19 +80,19 @@ function Lr({ close: e, panel: s, hamburger: n }) {
     return document.addEventListener("pointerdown", u, { capture: !0 }), () => document.removeEventListener("pointerdown", u, { capture: !0 });
   }, [e, s, n]), null;
 }
-function Ur({ close: e, panel: s }) {
+function Dr({ close: e, panel: s }) {
   return z(() => {
     const n = (g) => {
       g.target !== s.current?.parentElement && (sr(s.current, g.target) || e());
     }, u = requestAnimationFrame(() => {
-      s.current?.querySelector(Ir)?.focus(), document.addEventListener("focusin", n);
+      s.current?.querySelector(Lr)?.focus(), document.addEventListener("focusin", n);
     });
     return () => {
       cancelAnimationFrame(u), document.removeEventListener("focusin", n);
     };
   }, [e, s]), null;
 }
-function Dr({
+function _r({
   activePath: e,
   close: s
 }) {
@@ -100,7 +101,7 @@ function Dr({
     n.current !== e && (n.current = e, s());
   }, [e, s]), null;
 }
-const Hr = ({
+const tt = ({
   logoSrc: e,
   logoSize: s = "2rem",
   logoHeight: n,
@@ -128,10 +129,11 @@ const Hr = ({
   notificationFill: V = "solid",
   ...dr
 }) => {
-  const c = pr(Ar, cr), lr = jr(v), k = (o?.notificationCount || 0) > 0, C = (h) => typeof h == "number" ? `${h}px` : h, G = n !== void 0 || u !== void 0, X = G ? {
+  Cr();
+  const c = pr(Br, cr), lr = Ar(v), k = (o?.notificationCount || 0) > 0, C = (h) => typeof h == "number" ? `${h}px` : h, G = n !== void 0 || u !== void 0, X = G ? {
     width: u === void 0 ? "auto" : C(u),
     height: n === void 0 ? "auto" : C(n)
-  } : { width: C(s), height: C(s) }, J = G && "rst:object-contain rst:object-left rst:rtl:object-right", mr = Br(B === "auto"), m = (B === "auto" ? mr ? "dark" : "light" : B ?? (l === "white" || l === "default" ? "light" : "dark")) === "dark", E = l === "slate" || l === "primary" || l === "default" && m || l === "white" && m || l === "transparent" && m, F = l === "primary" ? {
+  } : { width: C(s), height: C(s) }, J = G && "rst:object-contain rst:object-left rst:rtl:object-right", mr = Ir(B === "auto"), m = (B === "auto" ? mr ? "dark" : "light" : B ?? (l === "white" || l === "default" ? "light" : "dark")) === "dark", E = l === "slate" || l === "primary" || l === "default" && m || l === "white" && m || l === "transparent" && m, F = l === "primary" ? {
     // On primary-700, text is that fill's ink (the dimmer links at 80%),
     // so a light primary gets dark text. The dark fill is primary-950,
     // which the ink doesn't describe: there it stays the dark surface's
@@ -147,7 +149,7 @@ const Hr = ({
     hamburger: E ? "rst:text-gray-300 rst:dark:text-gray-300 rst:hover:bg-white/10 rst:dark:hover:bg-white/10 rst:hover:text-white rst:dark:hover:text-white" : "rst:text-gray-500 rst:dark:text-gray-500 rst:hover:bg-gray-100 rst:dark:hover:bg-gray-100 rst:hover:text-gray-700 rst:dark:hover:text-gray-700"
   }, I = R(null), Q = R(null);
   return /* @__PURE__ */ r(
-    Cr,
+    Er,
     {
       as: "nav",
       className: i("rst:z-50", Sr({ variant: l, position: or }), ir),
@@ -275,7 +277,7 @@ const Hr = ({
                           }
                         )
                       ] }),
-                      S.length > 0 && /* @__PURE__ */ r(D, { className: "rst:py-1", children: S.map((t) => /* @__PURE__ */ r(_, { href: t.path, badge: t.badge, className: Or, children: t.label }, t.path)) }),
+                      S.length > 0 && /* @__PURE__ */ r(D, { className: "rst:py-1", children: S.map((t) => /* @__PURE__ */ r(_, { href: t.path, badge: t.badge, className: jr, children: t.label }, t.path)) }),
                       M && /* @__PURE__ */ r(D, { className: "rst:py-1", children: /* @__PURE__ */ r(
                         _,
                         {
@@ -321,11 +323,11 @@ const Hr = ({
               }
             ) })
           ] }),
-          h && /* @__PURE__ */ r(Lr, { close: d, panel: I, hamburger: Q }),
-          h && /* @__PURE__ */ r(Ur, { close: d, panel: I }),
-          h && /* @__PURE__ */ r(Dr, { activePath: N, close: d }),
+          h && /* @__PURE__ */ r(Ur, { close: d, panel: I, hamburger: Q }),
+          h && /* @__PURE__ */ r(Dr, { close: d, panel: I }),
+          h && /* @__PURE__ */ r(_r, { activePath: N, close: d }),
           /* @__PURE__ */ r(
-            Fr,
+            Or,
             {
               as: hr,
               enter: "rst:duration-200 rst:ease-out",
@@ -335,7 +337,7 @@ const Hr = ({
               leaveFrom: "rst:opacity-100 rst:scale-100",
               leaveTo: "rst:opacity-0 rst:scale-95",
               children: /* @__PURE__ */ r(
-                Er,
+                Fr,
                 {
                   className: "rst:absolute rst:top-0 rst:inset-x-0 rst:z-50 rst:origin-top-right rst:transform rst:p-2 rst:transition rst:md:hidden",
                   children: /* @__PURE__ */ a("div", { ref: I, "data-roster-mobile-panel": !0, className: "rst:rounded-lg rst:elevation-anchored rst:ring rst:ring-black/5 rst:dark:ring-white/10 rst:divide-y rst:divide-gray-100 rst:dark:divide-gray-700 rst:bg-white rst:dark:bg-gray-800", children: [
@@ -531,5 +533,5 @@ const Hr = ({
   );
 };
 export {
-  Hr as Navbar
+  tt as Navbar
 };

package/dist/components/organisms/Sheet/Sheet.cjs

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),Q=require("react"),Z=require("../../../node_modules/@headlessui/react/dist/components/description/description.cjs"),x=require("../../../node_modules/@headlessui/react/dist/components/dialog/dialog.cjs"),W=require("../../../node_modules/@headlessui/react/dist/components/transition/transition.cjs"),f=require("../../../lib/utils.cjs"),O=require("../../../lib/labels.cjs"),tt=require("../../../internal/popup.cjs"),et=require("../../../internal/motion.cjs"),rt=require("../../../internal/page-inert.cjs"),S=require("./sheet-drag.cjs"),st=require("./sheet-title.cjs");function nt(r){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const c in r)if(c!=="default"){const l=Object.getOwnPropertyDescriptor(r,c);Object.defineProperty(i,c,l.get?l:{enumerable:!0,get:()=>r[c]})}}return i.default=r,Object.freeze(i)}const n=nt(Q),ot={close:"Close"},at="rst:transition-transform rst:duration-(--roster-sheet-enter-duration) rst:ease-(--roster-sheet-enter-easing) rst:data-leave:duration-(--roster-sheet-leave-duration) rst:data-leave:ease-(--roster-sheet-leave-easing) rst:data-closed:translate-y-full",it="rst:transition-opacity rst:duration-(--roster-sheet-fade-duration) rst:ease-out rst:data-closed:opacity-0",ct="rst:transition-opacity rst:duration-(--roster-sheet-enter-duration) rst:ease-out rst:data-leave:duration-(--roster-sheet-leave-duration) rst:data-closed:opacity-0",ut="rst:transition-opacity rst:duration-(--roster-sheet-fade-duration) rst:ease-out rst:data-closed:opacity-0",lt=["input:not([type=checkbox]):not([type=radio]):not([type=button]):not([type=submit]):not([type=reset]):not([type=range]):not([type=color]):not([type=file]):not([type=image])","textarea","select","[contenteditable]:not([contenteditable=false])"].join(",");function dt(r){return r?"current"in r?r.current:r:null}function ft({target:r}){const i=n.useRef(r),c=n.useRef(!1);return n.useEffect(()=>{i.current=r}),n.useEffect(()=>(c.current=!1,()=>{c.current=!0,queueMicrotask(()=>{if(!c.current)return;const l=dt(i.current);l?.isConnected&&l.focus()})}),[]),null}function pt(){return s.jsx("svg",{"aria-hidden":"true",focusable:"false",viewBox:"0 0 20 20",className:"rst:h-5 rst:w-5",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",children:s.jsx("path",{d:"M5 5l10 10M15 5L5 15"})})}const ht=({isOpen:r,onClose:i,onAfterClose:c,title:l,hideTitle:T=!1,description:D,actions:L,maxWidth:y=560,initialFocus:v,returnFocus:_,busy:p=!1,dragToDismiss:j=!0,contentKey:h,labels:z,className:B,children:Y})=>{const U=O.withLabels(ot,z),{ref:R,inDarkScope:V}=tt.useDarkScope(),N=et.useReducedMotion();n.useLayoutEffect(()=>{if(r)return rt.lockPage(R.current)},[r,R]);const u=n.useRef(null),C=n.useRef(null),I=n.useRef(null),E=n.useRef(null),k=n.useRef(null),w=n.useId(),g=st.titleSignature(l),P=n.useRef({signature:g,contentKey:h,open:r,busy:p});n.useEffect(()=>{const t=P.current;if(P.current={signature:g,contentKey:h,open:r,busy:p},!t.open||!r)return;const e=t.contentKey!==h,o=t.signature!==g&&!t.busy;!e&&!o||(I.current?.focus(),k.current&&(k.current.scrollTop=0))},[g,h,r,p]),n.useEffect(()=>{if(!r)return;const t=requestAnimationFrame(()=>{const e=u.current,o=document.activeElement;!e||o&&e.contains(o)||(v?.current??E.current)?.focus()});return()=>cancelAnimationFrame(t)},[r,v]);const[q,M]=n.useState(null);n.useEffect(()=>{if(!r)return;const t=window.visualViewport;if(!t)return;const e=()=>{const o=document.activeElement,d=!!o&&!!u.current?.contains(o)&&o.matches(lt);M(d?Math.round(t.height):null)};return t.addEventListener("resize",e),document.addEventListener("focusin",e),document.addEventListener("focusout",e),()=>{t.removeEventListener("resize",e),document.removeEventListener("focusin",e),document.removeEventListener("focusout",e),M(null)}},[r]);const a=n.useRef(null),m=n.useRef(!1),A=n.useRef(r);n.useEffect(()=>{A.current=r},[r]);const b=t=>{u.current?.style.setProperty("--rst-sheet-drag",`${t}px`)},F=t=>{const e=u.current;a.current=null,e&&(delete e.dataset.dragging,t==="close"?(i(),requestAnimationFrame(()=>{A.current&&!a.current&&b(0)})):b(0))};n.useEffect(()=>{!r&&a.current&&(a.current=null,u.current&&delete u.current.dataset.dragging),r&&!a.current&&b(0)},[r]);const X=t=>{a.current||(m.current=!1,!(!j||!r)&&(t.pointerType==="mouse"&&(t.button!==0||!C.current?.contains(t.target))||(a.current={pointerId:t.pointerId,x0:t.clientX,y0:t.clientY,dy:0,phase:"pending",samples:[{t:t.timeStamp,y:t.clientY}]})))},$=t=>{const e=a.current;if(!e||t.pointerId!==e.pointerId)return;const o=t.clientX-e.x0,d=t.clientY-e.y0;if(e.phase==="pending"){if(!S.exceedsSheetTapSlop(o,d))return;if(Math.abs(o)>Math.abs(d)){e.phase="ignored";return}e.phase="dragging",m.current=!0;try{t.currentTarget.setPointerCapture(t.pointerId)}catch{}u.current&&(u.current.dataset.dragging="")}e.phase==="dragging"&&(e.dy=d,e.samples.push({t:t.timeStamp,y:t.clientY}),e.samples.length>32&&e.samples.shift(),b(Math.max(0,d)))},G=t=>{const e=a.current;if(!e||t.pointerId!==e.pointerId)return;if(e.phase!=="dragging"){a.current=null;return}e.samples.push({t:t.timeStamp,y:t.clientY});const o=t.clientY-e.y0,d=u.current?.getBoundingClientRect().height??0;F(S.sheetDragOutcome(o,d,S.sheetReleaseVelocity(e.samples)))},K=t=>{const e=a.current;!e||t.pointerId!==e.pointerId||(e.phase==="dragging"?F("stay"):a.current=null)},H=t=>{!m.current||t.detail===0||(m.current=!1,t.preventDefault(),t.stopPropagation())},J={"--rst-sheet-max-width":typeof y=="number"?`${y}px`:y,...q!==null&&{"--rst-sheet-keyboard-cap":`${q}px`}};return s.jsxs(s.Fragment,{children:[s.jsx("span",{ref:R,hidden:!0}),s.jsxs(x.Dialog,{open:r,as:"div",onClose:i,initialFocus:v??E,className:f.cn("rst:font-ui rst:relative rst:z-50 rst:focus:outline-hidden",V&&"dark"),children:[s.jsx(x.DialogBackdrop,{transition:!0,"data-testid":"sheet-backdrop",className:f.cn("rst:fixed rst:inset-0 rst:bg-[var(--roster-backdrop,var(--roster-sheet-backdrop))]",N?ut:ct)}),s.jsx("div",{className:"rst:fixed rst:inset-0 rst:flex rst:items-end rst:justify-center",children:s.jsx(W.TransitionChild,{afterLeave:c,children:s.jsxs(x.DialogPanel,{ref:u,style:J,"data-testid":"sheet-panel",className:f.cn("rst:relative rst:flex rst:max-h-[min(92dvh,var(--rst-sheet-keyboard-cap,92dvh))] rst:w-full rst:flex-col","rst:md:max-w-(--rst-sheet-max-width)","rst:rounded-t-2xl rst:border rst:border-b-0 rst:elevation-overlay","rst:bg-[var(--roster-popover-bg)] rst:border-[var(--roster-popover-border)] rst:text-[var(--roster-popover-text)]","rst:[--roster-ring-offset:var(--roster-popover-bg)]","rst:pb-[env(safe-area-inset-bottom)]","rst:translate-y-[var(--rst-sheet-drag,0px)]",N?it:at,"rst:data-dragging:transition-none",B),children:[s.jsxs("div",{"data-testid":"sheet-drag-zone",className:f.cn("rst:shrink-0",j&&"rst:touch-none"),onPointerDown:X,onPointerMove:$,onPointerUp:G,onPointerCancel:K,onClickCapture:H,children:[s.jsx("div",{ref:C,"aria-hidden":"true","data-testid":"sheet-handle",className:f.cn("rst:flex rst:h-11 rst:items-start rst:justify-center rst:pt-2",j&&"rst:cursor-grab rst:active:cursor-grabbing"),children:s.jsx("span",{className:"rst:h-1 rst:w-10 rst:rounded-full rst:bg-current rst:opacity-30"})}),s.jsxs("div",{className:"rst:-mt-3 rst:flex rst:items-start rst:gap-2 rst:px-5 rst:pb-4",children:[s.jsxs("div",{className:"rst:min-w-0 rst:flex-1 rst:pt-2",children:[s.jsx(x.DialogTitle,{as:"h2",id:w,ref:I,tabIndex:-1,className:f.cn("rst:text-lg rst:font-semibold rst:text-inherit rst:focus:outline-hidden",T&&"rst:sr-only"),children:l}),D&&s.jsx(Z.Description,{as:"p",className:"rst:mt-1 rst:text-sm rst:text-inherit rst:opacity-75",children:D})]}),L&&s.jsx("div",{className:"rst:flex rst:h-11 rst:shrink-0 rst:items-center rst:gap-1",children:L}),s.jsx("button",{ref:E,type:"button",onClick:i,"aria-label":U.close,className:"rst:inline-flex rst:size-11 rst:shrink-0 rst:-mr-2 rst:cursor-pointer rst:items-center rst:justify-center rst:rounded-md rst:bg-transparent rst:text-inherit rst:opacity-60 rst:transition-opacity rst:hover:opacity-100 rst:focus:outline-hidden rst:focus-visible:opacity-100 rst:focus-visible:ring-2 rst:focus-visible:ring-ring rst:focus-visible:ring-offset-2 rst:ring-offset-background",children:s.jsx(pt,{})})]})]}),s.jsx("div",{ref:k,role:"region","aria-labelledby":w,tabIndex:0,"data-testid":"sheet-content","aria-busy":p||void 0,className:"rst:min-h-0 rst:flex-1 rst:overflow-y-auto rst:overscroll-contain rst:px-5 rst:pb-4 rst:focus:outline-hidden rst:ring-inset rst:focus-visible:ring-2 rst:focus-visible:ring-ring",children:Y}),s.jsx(ft,{target:_})]})})})]})]})};exports.Sheet=ht;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),Q=require("react"),Z=require("../../../node_modules/@headlessui/react/dist/components/description/description.cjs"),b=require("../../../node_modules/@headlessui/react/dist/components/dialog/dialog.cjs"),W=require("../../../node_modules/@headlessui/react/dist/components/transition/transition.cjs"),f=require("../../../lib/utils.cjs"),O=require("../../../lib/labels.cjs"),tt=require("../../../internal/popup.cjs"),et=require("../../../internal/motion.cjs"),rt=require("../../../internal/page-inert.cjs"),S=require("./sheet-drag.cjs"),st=require("./sheet-title.cjs"),nt=require("../../../internal/key-focus.cjs");function ot(r){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const c in r)if(c!=="default"){const l=Object.getOwnPropertyDescriptor(r,c);Object.defineProperty(i,c,l.get?l:{enumerable:!0,get:()=>r[c]})}}return i.default=r,Object.freeze(i)}const n=ot(Q),at={close:"Close"},it="rst:transition-transform rst:duration-(--roster-sheet-enter-duration) rst:ease-(--roster-sheet-enter-easing) rst:data-leave:duration-(--roster-sheet-leave-duration) rst:data-leave:ease-(--roster-sheet-leave-easing) rst:data-closed:translate-y-full",ct="rst:transition-opacity rst:duration-(--roster-sheet-fade-duration) rst:ease-out rst:data-closed:opacity-0",ut="rst:transition-opacity rst:duration-(--roster-sheet-enter-duration) rst:ease-out rst:data-leave:duration-(--roster-sheet-leave-duration) rst:data-closed:opacity-0",lt="rst:transition-opacity rst:duration-(--roster-sheet-fade-duration) rst:ease-out rst:data-closed:opacity-0",dt=["input:not([type=checkbox]):not([type=radio]):not([type=button]):not([type=submit]):not([type=reset]):not([type=range]):not([type=color]):not([type=file]):not([type=image])","textarea","select","[contenteditable]:not([contenteditable=false])"].join(",");function ft(r){return r?"current"in r?r.current:r:null}function pt({target:r}){const i=n.useRef(r),c=n.useRef(!1);return n.useEffect(()=>{i.current=r}),n.useEffect(()=>(c.current=!1,()=>{c.current=!0,queueMicrotask(()=>{if(!c.current)return;const l=ft(i.current);l?.isConnected&&l.focus()})}),[]),null}function ht(){return s.jsx("svg",{"aria-hidden":"true",focusable:"false",viewBox:"0 0 20 20",className:"rst:h-5 rst:w-5",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",children:s.jsx("path",{d:"M5 5l10 10M15 5L5 15"})})}const gt=({isOpen:r,onClose:i,onAfterClose:c,title:l,hideTitle:T=!1,description:D,actions:L,maxWidth:x=560,initialFocus:v,returnFocus:_,busy:p=!1,dragToDismiss:j=!0,contentKey:h,labels:z,className:B,children:Y})=>{nt.useKeyFocus();const K=O.withLabels(at,z),{ref:R,inDarkScope:U}=tt.useDarkScope(),N=et.useReducedMotion();n.useLayoutEffect(()=>{if(r)return rt.lockPage(R.current)},[r,R]);const u=n.useRef(null),C=n.useRef(null),I=n.useRef(null),E=n.useRef(null),k=n.useRef(null),q=n.useId(),g=st.titleSignature(l),w=n.useRef({signature:g,contentKey:h,open:r,busy:p});n.useEffect(()=>{const t=w.current;if(w.current={signature:g,contentKey:h,open:r,busy:p},!t.open||!r)return;const e=t.contentKey!==h,o=t.signature!==g&&!t.busy;!e&&!o||(I.current?.focus(),k.current&&(k.current.scrollTop=0))},[g,h,r,p]),n.useEffect(()=>{if(!r)return;const t=requestAnimationFrame(()=>{const e=u.current,o=document.activeElement;!e||o&&e.contains(o)||(v?.current??E.current)?.focus()});return()=>cancelAnimationFrame(t)},[r,v]);const[P,M]=n.useState(null);n.useEffect(()=>{if(!r)return;const t=window.visualViewport;if(!t)return;const e=()=>{const o=document.activeElement,d=!!o&&!!u.current?.contains(o)&&o.matches(dt);M(d?Math.round(t.height):null)};return t.addEventListener("resize",e),document.addEventListener("focusin",e),document.addEventListener("focusout",e),()=>{t.removeEventListener("resize",e),document.removeEventListener("focusin",e),document.removeEventListener("focusout",e),M(null)}},[r]);const a=n.useRef(null),m=n.useRef(!1),A=n.useRef(r);n.useEffect(()=>{A.current=r},[r]);const y=t=>{u.current?.style.setProperty("--rst-sheet-drag",`${t}px`)},F=t=>{const e=u.current;a.current=null,e&&(delete e.dataset.dragging,t==="close"?(i(),requestAnimationFrame(()=>{A.current&&!a.current&&y(0)})):y(0))};n.useEffect(()=>{!r&&a.current&&(a.current=null,u.current&&delete u.current.dataset.dragging),r&&!a.current&&y(0)},[r]);const V=t=>{a.current||(m.current=!1,!(!j||!r)&&(t.pointerType==="mouse"&&(t.button!==0||!C.current?.contains(t.target))||(a.current={pointerId:t.pointerId,x0:t.clientX,y0:t.clientY,dy:0,phase:"pending",samples:[{t:t.timeStamp,y:t.clientY}]})))},X=t=>{const e=a.current;if(!e||t.pointerId!==e.pointerId)return;const o=t.clientX-e.x0,d=t.clientY-e.y0;if(e.phase==="pending"){if(!S.exceedsSheetTapSlop(o,d))return;if(Math.abs(o)>Math.abs(d)){e.phase="ignored";return}e.phase="dragging",m.current=!0;try{t.currentTarget.setPointerCapture(t.pointerId)}catch{}u.current&&(u.current.dataset.dragging="")}e.phase==="dragging"&&(e.dy=d,e.samples.push({t:t.timeStamp,y:t.clientY}),e.samples.length>32&&e.samples.shift(),y(Math.max(0,d)))},$=t=>{const e=a.current;if(!e||t.pointerId!==e.pointerId)return;if(e.phase!=="dragging"){a.current=null;return}e.samples.push({t:t.timeStamp,y:t.clientY});const o=t.clientY-e.y0,d=u.current?.getBoundingClientRect().height??0;F(S.sheetDragOutcome(o,d,S.sheetReleaseVelocity(e.samples)))},G=t=>{const e=a.current;!e||t.pointerId!==e.pointerId||(e.phase==="dragging"?F("stay"):a.current=null)},H=t=>{!m.current||t.detail===0||(m.current=!1,t.preventDefault(),t.stopPropagation())},J={"--rst-sheet-max-width":typeof x=="number"?`${x}px`:x,...P!==null&&{"--rst-sheet-keyboard-cap":`${P}px`}};return s.jsxs(s.Fragment,{children:[s.jsx("span",{ref:R,hidden:!0}),s.jsxs(b.Dialog,{open:r,as:"div",onClose:i,initialFocus:v??E,className:f.cn("rst:font-ui rst:relative rst:z-50 rst:focus:outline-hidden",U&&"dark"),children:[s.jsx(b.DialogBackdrop,{transition:!0,"data-testid":"sheet-backdrop",className:f.cn("rst:fixed rst:inset-0 rst:bg-[var(--roster-backdrop,var(--roster-sheet-backdrop))]",N?lt:ut)}),s.jsx("div",{className:"rst:fixed rst:inset-0 rst:flex rst:items-end rst:justify-center",children:s.jsx(W.TransitionChild,{afterLeave:c,children:s.jsxs(b.DialogPanel,{ref:u,style:J,"data-testid":"sheet-panel",className:f.cn("rst:relative rst:flex rst:max-h-[min(92dvh,var(--rst-sheet-keyboard-cap,92dvh))] rst:w-full rst:flex-col","rst:md:max-w-(--rst-sheet-max-width)","rst:rounded-t-2xl rst:border rst:border-b-0 rst:elevation-overlay","rst:bg-[var(--roster-popover-bg)] rst:border-[var(--roster-popover-border)] rst:text-[var(--roster-popover-text)]","rst:[--roster-ring-offset:var(--roster-popover-bg)]","rst:pb-[env(safe-area-inset-bottom)]","rst:translate-y-[var(--rst-sheet-drag,0px)]",N?ct:it,"rst:data-dragging:transition-none",B),children:[s.jsxs("div",{"data-testid":"sheet-drag-zone",className:f.cn("rst:shrink-0",j&&"rst:touch-none"),onPointerDown:V,onPointerMove:X,onPointerUp:$,onPointerCancel:G,onClickCapture:H,children:[s.jsx("div",{ref:C,"aria-hidden":"true","data-testid":"sheet-handle",className:f.cn("rst:flex rst:h-11 rst:items-start rst:justify-center rst:pt-2",j&&"rst:cursor-grab rst:active:cursor-grabbing"),children:s.jsx("span",{className:"rst:h-1 rst:w-10 rst:rounded-full rst:bg-current rst:opacity-30"})}),s.jsxs("div",{className:"rst:-mt-3 rst:flex rst:items-start rst:gap-2 rst:px-5 rst:pb-4",children:[s.jsxs("div",{className:"rst:min-w-0 rst:flex-1 rst:pt-2",children:[s.jsx(b.DialogTitle,{as:"h2",id:q,ref:I,tabIndex:-1,className:f.cn("rst:text-lg rst:font-semibold rst:text-inherit rst:focus:outline-hidden",T&&"rst:sr-only"),children:l}),D&&s.jsx(Z.Description,{as:"p",className:"rst:mt-1 rst:text-sm rst:text-inherit rst:opacity-75",children:D})]}),L&&s.jsx("div",{className:"rst:flex rst:h-11 rst:shrink-0 rst:items-center rst:gap-1",children:L}),s.jsx("button",{ref:E,type:"button",onClick:i,"aria-label":K.close,className:"rst:inline-flex rst:size-11 rst:shrink-0 rst:-mr-2 rst:cursor-pointer rst:items-center rst:justify-center rst:rounded-md rst:bg-transparent rst:text-inherit rst:opacity-60 rst:transition-opacity rst:hover:opacity-100 rst:focus:outline-hidden rst:focus-visible:opacity-100 rst:focus-visible:ring-2 rst:focus-visible:ring-ring rst:focus-visible:ring-offset-2 rst:ring-offset-background",children:s.jsx(ht,{})})]})]}),s.jsx("div",{ref:k,role:"region","aria-labelledby":q,tabIndex:0,"data-testid":"sheet-content","aria-busy":p||void 0,className:"rst:min-h-0 rst:flex-1 rst:overflow-y-auto rst:overscroll-contain rst:px-5 rst:pb-4 rst:focus:outline-hidden rst:ring-inset rst:focus-visible:ring-2 rst:focus-visible:ring-ring",children:Y}),s.jsx(pt,{target:_})]})})})]})]})};exports.Sheet=gt;

package/dist/components/organisms/Sheet/Sheet.js

@@ -11,28 +11,29 @@ import { useReducedMotion as nt } from "../../../internal/motion.js";
 import { lockPage as ot } from "../../../internal/page-inert.js";
 import { sheetDragOutcome as at, sheetReleaseVelocity as it, exceedsSheetTapSlop as ct } from "./sheet-drag.js";
 import { titleSignature as ut } from "./sheet-title.js";
-const lt = { close: "Close" }, dt = "rst:transition-transform rst:duration-(--roster-sheet-enter-duration) rst:ease-(--roster-sheet-enter-easing) rst:data-leave:duration-(--roster-sheet-leave-duration) rst:data-leave:ease-(--roster-sheet-leave-easing) rst:data-closed:translate-y-full", ft = "rst:transition-opacity rst:duration-(--roster-sheet-fade-duration) rst:ease-out rst:data-closed:opacity-0", pt = "rst:transition-opacity rst:duration-(--roster-sheet-enter-duration) rst:ease-out rst:data-leave:duration-(--roster-sheet-leave-duration) rst:data-closed:opacity-0", mt = "rst:transition-opacity rst:duration-(--roster-sheet-fade-duration) rst:ease-out rst:data-closed:opacity-0", ht = [
+import { useKeyFocus as lt } from "../../../internal/key-focus.js";
+const dt = { close: "Close" }, ft = "rst:transition-transform rst:duration-(--roster-sheet-enter-duration) rst:ease-(--roster-sheet-enter-easing) rst:data-leave:duration-(--roster-sheet-leave-duration) rst:data-leave:ease-(--roster-sheet-leave-easing) rst:data-closed:translate-y-full", pt = "rst:transition-opacity rst:duration-(--roster-sheet-fade-duration) rst:ease-out rst:data-closed:opacity-0", mt = "rst:transition-opacity rst:duration-(--roster-sheet-enter-duration) rst:ease-out rst:data-leave:duration-(--roster-sheet-leave-duration) rst:data-closed:opacity-0", ht = "rst:transition-opacity rst:duration-(--roster-sheet-fade-duration) rst:ease-out rst:data-closed:opacity-0", gt = [
   "input:not([type=checkbox]):not([type=radio]):not([type=button]):not([type=submit]):not([type=reset]):not([type=range]):not([type=color]):not([type=file]):not([type=image])",
   "textarea",
   "select",
   "[contenteditable]:not([contenteditable=false])"
 ].join(",");
-function gt(r) {
+function yt(r) {
   return r ? "current" in r ? r.current : r : null;
 }
-function yt({ target: r }) {
+function bt({ target: r }) {
   const u = s.useRef(r), f = s.useRef(!1);
   return s.useEffect(() => {
     u.current = r;
   }), s.useEffect(() => (f.current = !1, () => {
     f.current = !0, queueMicrotask(() => {
       if (!f.current) return;
-      const p = gt(u.current);
+      const p = yt(u.current);
       p?.isConnected && p.focus();
     });
   }), []), null;
 }
-function bt() {
+function vt() {
   return /* @__PURE__ */ n(
     "svg",
     {
@@ -48,7 +49,7 @@ function bt() {
     }
   );
 }
-const St = ({
+const Mt = ({
   isOpen: r,
   onClose: u,
   onAfterClose: f,
@@ -66,7 +67,8 @@ const St = ({
   className: T,
   children: _
 }) => {
-  const q = rt(lt, Y), { ref: R, inDarkScope: $ } = st(), D = nt();
+  lt();
+  const q = rt(dt, Y), { ref: R, inDarkScope: $ } = st(), D = nt();
   s.useLayoutEffect(() => {
     if (r)
       return ot(R.current);
@@ -91,7 +93,7 @@ const St = ({
     const t = window.visualViewport;
     if (!t) return;
     const e = () => {
-      const o = document.activeElement, c = !!o && !!i.current?.contains(o) && o.matches(ht);
+      const o = document.activeElement, c = !!o && !!i.current?.contains(o) && o.matches(gt);
       A(c ? Math.round(t.height) : null);
     };
     return t.addEventListener("resize", e), document.addEventListener("focusin", e), document.addEventListener("focusout", e), () => {
@@ -113,7 +115,7 @@ const St = ({
   s.useEffect(() => {
     !r && a.current && (a.current = null, i.current && delete i.current.dataset.dragging), r && !a.current && b(0);
   }, [r]);
-  const U = (t) => {
+  const K = (t) => {
     a.current || (y.current = !1, !(!E || !r) && (t.pointerType === "mouse" && (t.button !== 0 || !I.current?.contains(t.target)) || (a.current = {
       pointerId: t.pointerId,
       x0: t.clientX,
@@ -122,7 +124,7 @@ const St = ({
       phase: "pending",
       samples: [{ t: t.timeStamp, y: t.clientY }]
     })));
-  }, V = (t) => {
+  }, U = (t) => {
     const e = a.current;
     if (!e || t.pointerId !== e.pointerId) return;
     const o = t.clientX - e.x0, c = t.clientY - e.y0;
@@ -140,7 +142,7 @@ const St = ({
       i.current && (i.current.dataset.dragging = "");
     }
     e.phase === "dragging" && (e.dy = c, e.samples.push({ t: t.timeStamp, y: t.clientY }), e.samples.length > 32 && e.samples.shift(), b(Math.max(0, c)));
-  }, X = (t) => {
+  }, V = (t) => {
     const e = a.current;
     if (!e || t.pointerId !== e.pointerId) return;
     if (e.phase !== "dragging") {
@@ -150,10 +152,10 @@ const St = ({
     e.samples.push({ t: t.timeStamp, y: t.clientY });
     const o = t.clientY - e.y0, c = i.current?.getBoundingClientRect().height ?? 0;
     j(at(o, c, it(e.samples)));
-  }, G = (t) => {
+  }, X = (t) => {
     const e = a.current;
     !e || t.pointerId !== e.pointerId || (e.phase === "dragging" ? j("stay") : a.current = null);
-  }, K = (t) => {
+  }, G = (t) => {
     !y.current || t.detail === 0 || (y.current = !1, t.preventDefault(), t.stopPropagation());
   }, Q = {
     "--rst-sheet-max-width": typeof v == "number" ? `${v}px` : v,
@@ -180,7 +182,7 @@ const St = ({
               "data-testid": "sheet-backdrop",
               className: d(
                 "rst:fixed rst:inset-0 rst:bg-[var(--roster-backdrop,var(--roster-sheet-backdrop))]",
-                D ? mt : pt
+                D ? ht : mt
               )
             }
           ),
@@ -202,7 +204,7 @@ const St = ({
                 "rst:[--roster-ring-offset:var(--roster-popover-bg)]",
                 "rst:pb-[env(safe-area-inset-bottom)]",
                 "rst:translate-y-[var(--rst-sheet-drag,0px)]",
-                D ? ft : dt,
+                D ? pt : ft,
                 "rst:data-dragging:transition-none",
                 T
               ),
@@ -212,11 +214,11 @@ const St = ({
                   {
                     "data-testid": "sheet-drag-zone",
                     className: d("rst:shrink-0", E && "rst:touch-none"),
-                    onPointerDown: U,
-                    onPointerMove: V,
-                    onPointerUp: X,
-                    onPointerCancel: G,
-                    onClickCapture: K,
+                    onPointerDown: K,
+                    onPointerMove: U,
+                    onPointerUp: V,
+                    onPointerCancel: X,
+                    onClickCapture: G,
                     children: [
                       /* @__PURE__ */ n(
                         "div",
@@ -272,7 +274,7 @@ const St = ({
                             onClick: u,
                             "aria-label": q.close,
                             className: "rst:inline-flex rst:size-11 rst:shrink-0 rst:-mr-2 rst:cursor-pointer rst:items-center rst:justify-center rst:rounded-md rst:bg-transparent rst:text-inherit rst:opacity-60 rst:transition-opacity rst:hover:opacity-100 rst:focus:outline-hidden rst:focus-visible:opacity-100 rst:focus-visible:ring-2 rst:focus-visible:ring-ring rst:focus-visible:ring-offset-2 rst:ring-offset-background",
-                            children: /* @__PURE__ */ n(bt, {})
+                            children: /* @__PURE__ */ n(vt, {})
                           }
                         )
                       ] })
@@ -292,7 +294,7 @@ const St = ({
                     children: _
                   }
                 ),
-                /* @__PURE__ */ n(yt, { target: B })
+                /* @__PURE__ */ n(bt, { target: B })
               ]
             }
           ) }) })
@@ -302,5 +304,5 @@ const St = ({
   ] });
 };
 export {
-  St as Sheet
+  Mt as Sheet
 };

package/dist/index.d.ts

@@ -63,6 +63,7 @@ export * from './components/molecules/Breadcrumbs/breadcrumb-variants';
 export * from './components/molecules/LiquidTabs/LiquidTabs';
 export * from './components/molecules/LiquidTabs/LiquidNav';
 export * from './components/molecules/LiquidTabs/liquid-tab-id';
+export * from './components/molecules/LiquidTabs/LiquidTabPanel';
 export * from './components/molecules/Carousel/Carousel';
 export * from './components/molecules/CallToAction/CallToAction';
 export * from './components/molecules/CallToAction/call-to-action-variants';
@@ -96,4 +97,5 @@ export * from './components/organisms/Table/Table';
 export * from './components/organisms/Table/table-variants';
 export * from './hooks/useCountdown';
 export * from './hooks/useKeySequence';
+export { useKeyFocus, KEY_FOCUS } from './internal/key-focus';
 export * from './lib/utils';

package/dist/internal/key-focus.cjs

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react");function f(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const c in e)if(c!=="default"){const i=Object.getOwnPropertyDescriptor(e,c);Object.defineProperty(t,c,i.get?i:{enumerable:!0,get:()=>e[c]})}}return t.default=e,Object.freeze(t)}const y=f(l),d=new Set(["Tab","Enter"," ","Escape","ArrowUp","ArrowDown","ArrowLeft","ArrowRight","Home","End","PageUp","PageDown"]),o="data-key-focus";let u=0,r=!1,n=null;const s=()=>{for(const e of document.querySelectorAll(`[${o}]`))e.removeAttribute(o)};function m(e){e.ctrlKey||e.metaKey||e.altKey&&e.key!=="Tab"||d.has(e.key)&&(r=!0)}function p(e){n=[e.clientX,e.clientY],r=!1,s()}function b(e){const t=!n||n[0]!==e.clientX||n[1]!==e.clientY;n=[e.clientX,e.clientY],t&&(r=!1)}function g(e){r&&e.target instanceof Element&&e.target.setAttribute(o,"")}function w(e){e.target instanceof Element&&e.target.removeAttribute(o)}const a=[["keydown",m],["pointerdown",p],["pointermove",b],["focusin",g],["focusout",w]];function E(){if(u+=1,!(u>1))for(const[e,t]of a)document.addEventListener(e,t,{capture:!0,passive:!0})}function A(){if(u-=1,!(u>0)){for(const[e,t]of a)document.removeEventListener(e,t,{capture:!0});r=!1,n=null,s()}}function O(){y.useEffect(()=>(E(),A),[])}exports.KEY_FOCUS=o;exports.useKeyFocus=O;

package/dist/internal/key-focus.d.ts

@@ -0,0 +1,32 @@
+/**
+ * The attribute the tracker marks keyboard focus with: `data-key-focus`. For
+ * a selector or a test of your own, or a control that marks focus itself (a
+ * typeahead that moves focus marks the item it lands on). A ring should match
+ * it through the `focus-visible` variant rather than on its own: see
+ * `useKeyFocus`.
+ */
+export declare const KEY_FOCUS = "data-key-focus";
+/**
+ * Keeps the keyboard-mode listeners installed while the calling component is
+ * mounted. Every Roster component that moves focus by script, or opens
+ * something that does, calls it.
+ *
+ * **Call it in your own control when** the control moves focus by script in
+ * answer to a key (arrows around a hand-drawn wheel, a grid that roves its own
+ * focus) and draws its ring with `focus-visible:`. Once the page has been
+ * clicked, WebKit doesn't count that focus as the keyboard's, and the ring
+ * doesn't show in Safari. With the hook mounted, the element the keys land on
+ * carries `data-key-focus` until it loses focus, and the ring follows it once
+ * your `focus-visible` variant matches the mark too, the one line Roster's own
+ * stylesheet has:
+ *
+ * ```css
+ * @custom-variant focus-visible (&:is(:focus-visible, [data-key-focus]));
+ * ```
+ *
+ * Focus the keyboard moves on its own, Tab to a button or a field, rings in
+ * every engine and needs neither. Calling it beside Roster's components costs
+ * nothing more: the listeners are shared, added for the first caller and
+ * removed after the last.
+ */
+export declare function useKeyFocus(): void;

package/dist/internal/key-focus.js

@@ -0,0 +1,60 @@
+"use client";
+import * as s from "react";
+const f = /* @__PURE__ */ new Set([
+  "Tab",
+  "Enter",
+  " ",
+  "Escape",
+  "ArrowUp",
+  "ArrowDown",
+  "ArrowLeft",
+  "ArrowRight",
+  "Home",
+  "End",
+  "PageUp",
+  "PageDown"
+]), r = "data-key-focus";
+let c = 0, o = !1, e = null;
+const i = () => {
+  for (const t of document.querySelectorAll(`[${r}]`)) t.removeAttribute(r);
+};
+function l(t) {
+  t.ctrlKey || t.metaKey || t.altKey && t.key !== "Tab" || f.has(t.key) && (o = !0);
+}
+function a(t) {
+  e = [t.clientX, t.clientY], o = !1, i();
+}
+function m(t) {
+  const n = !e || e[0] !== t.clientX || e[1] !== t.clientY;
+  e = [t.clientX, t.clientY], n && (o = !1);
+}
+function y(t) {
+  o && t.target instanceof Element && t.target.setAttribute(r, "");
+}
+function p(t) {
+  t.target instanceof Element && t.target.removeAttribute(r);
+}
+const u = [
+  ["keydown", l],
+  ["pointerdown", a],
+  ["pointermove", m],
+  ["focusin", y],
+  ["focusout", p]
+];
+function d() {
+  if (c += 1, !(c > 1))
+    for (const [t, n] of u) document.addEventListener(t, n, { capture: !0, passive: !0 });
+}
+function w() {
+  if (c -= 1, !(c > 0)) {
+    for (const [t, n] of u) document.removeEventListener(t, n, { capture: !0 });
+    o = !1, e = null, i();
+  }
+}
+function E() {
+  s.useEffect(() => (d(), w), []);
+}
+export {
+  r as KEY_FOCUS,
+  E as useKeyFocus
+};

package/dist/internal/popup.cjs

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react");function c(t){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const r in t)if(r!=="default"){const n=Object.getOwnPropertyDescriptor(t,r);Object.defineProperty(e,r,n.get?n:{enumerable:!0,get:()=>t[r]})}}return e.default=t,Object.freeze(e)}const o=c(s);function a(){const t=o.useRef(null),[e,r]=o.useState(!1);return o.useLayoutEffect(()=>{r(!!t.current?.closest(".dark"))},[]),{ref:t,inDarkScope:e}}const u=["rst:font-ui","rst:z-50 rst:rounded-md rst:py-1 rst:elevation-anchored rst:ring rst:focus:outline-hidden","rst:bg-[var(--roster-popover-bg)] rst:text-[var(--roster-popover-text)] rst:ring-[var(--roster-popover-border)]","rst:[--anchor-gap:4px]"].join(" ");function P(t,e){return t||e==="slate"}const p="rst:w-(--button-width)",i="rst:w-(--input-width)",l="bottom start";exports.POPUP_ANCHOR=l;exports.POPUP_PANEL=u;exports.POPUP_WIDTH_OF_BUTTON=p;exports.POPUP_WIDTH_OF_INPUT=i;exports.popupInDarkPalette=P;exports.useDarkScope=a;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react");function a(t){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const r in t)if(r!=="default"){const n=Object.getOwnPropertyDescriptor(t,r);Object.defineProperty(e,r,n.get?n:{enumerable:!0,get:()=>t[r]})}}return e.default=t,Object.freeze(e)}const o=a(c);function s(t){const e=t?.closest(".dark");return!!e&&!e.contains(document.body)}function u(){const t=o.useRef(null),[e,r]=o.useState(!1);return o.useLayoutEffect(()=>{r(s(t.current))},[]),{ref:t,inDarkScope:e}}const P=["rst:font-ui","rst:z-50 rst:rounded-md rst:py-1 rst:elevation-anchored rst:ring rst:focus:outline-hidden","rst:bg-[var(--roster-popover-bg)] rst:text-[var(--roster-popover-text)] rst:ring-[var(--roster-popover-border)]","rst:[--anchor-gap:4px]"].join(" ");function i(t,e){return t||e==="slate"}const p="rst:w-(--button-width)",l="rst:w-(--input-width)",O="bottom start";exports.POPUP_ANCHOR=O;exports.POPUP_PANEL=P;exports.POPUP_WIDTH_OF_BUTTON=p;exports.POPUP_WIDTH_OF_INPUT=l;exports.carriesDark=s;exports.popupInDarkPalette=i;exports.useDarkScope=u;

package/dist/internal/popup.d.ts

@@ -29,13 +29,27 @@ import * as React from "react";
  * `@custom-variant dark (&:where(.dark, .dark *))` matches, so this reproduces
  * the cascade rather than second-guessing it. Applying the class to the panel
  * covers the panel itself through the `&:where(.dark, …)` half, and its
- * options through `.dark *`. Idempotent when `.dark` is already on the root.
+ * options through `.dark *`.
+ *
+ * **Only when the portal leaves the scope.** When `.dark` is on `<html>` or
+ * `<body>`, the panel is already inside it and needs nothing. The class isn't
+ * harmless there either: it carries Roster's own `.dark` token block, which
+ * declares the default palette on the panel itself, over whatever the page set
+ * above it. A consumer's `--roster-*` set inline on `<html>`, or under
+ * `html.dark`, stopped at every panel, which drew Roster's grays under the
+ * consumer's trigger.
  *
  * Read once, on mount. A theme TOGGLE does not need this at all: it flips
  * `.dark` on `<html>`, and the portal is already a descendant of `<html>`. The
  * only case this covers is a scoped `.dark`, which is part of a page's
  * structure rather than something that changes at runtime.
  */
+/**
+ * Whether a panel portaled out from beside `el` must carry `.dark` itself:
+ * `el` is in a `.dark` scope, and the scope doesn't contain `<body>`, where
+ * the portal lands. See `useDarkScope` for why carrying it otherwise is wrong.
+ */
+export declare function carriesDark(el: Element | null | undefined): boolean;
 export declare function useDarkScope<T extends HTMLElement>(): {
     ref: React.RefObject<T | null>;
     inDarkScope: boolean;