50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T109a,/* The nav is the container, so the bar responds to its own width, not the window's. */ .cr-navbar { container-type: inline-size; color: var(--cr-color-text-default); font-family: var(--cr-font-family-sans); } .cr-navbar__inner { display: flex; align-items: center; gap: var(--cr-space-2); box-sizing: border-box; min-height: 56px; padding: var(--cr-space-2) var(--cr-space-3) var(--cr-space-2) var(--cr-space-4); border-radius: var(--cr-radius-full); } .cr-navbar[data-variant='flush'] .cr-navbar__inner { padding-inline: var(--cr-space-2); border-bottom: 1px solid var(--cr-color-border-default); border-radius: 0; } .cr-navbar__brand { display: flex; align-items: center; margin-inline-end: var(--cr-space-2); font-size: var(--cr-font-size-lg); font-weight: var(--cr-font-weight-bold); letter-spacing: var(--cr-font-tracking-tight); } .cr-navbar__brand a { display: inline-flex; align-items: center; gap: var(--cr-space-2); border-radius: var(--cr-radius-sm); color: inherit; text-decoration: none; } .cr-navbar__links { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; } .cr-navbar__link { display: inline-flex; align-items: center; gap: var(--cr-space-2); box-sizing: border-box; min-height: var(--cr-control-height-sm); padding: 0 var(--cr-space-3); border-radius: var(--cr-radius-full); color: var(--cr-color-text-secondary); font-size: var(--cr-font-size-md); font-weight: var(--cr-font-weight-semibold); text-decoration: none; white-space: nowrap; } .cr-navbar__link:hover { background: var(--cr-color-bg-subtle); color: var(--cr-color-text-default); } .cr-navbar__link[aria-current='page'] { background: var(--cr-color-ink-bg); color: var(--cr-color-ink-fg); } /* Flush: the current page is underlined instead of filled. */ .cr-navbar[data-variant='flush'] .cr-navbar__link[aria-current='page'] { border-radius: 0; background: none; box-shadow: inset 0 -2px 0 var(--cr-color-ink-bg); color: var(--cr-color-text-default); } .cr-navbar__count { min-width: 18px; padding: 0 5px; border-radius: var(--cr-radius-full); background: var(--cr-color-bg-subtle); font-size: 11px; font-weight: var(--cr-font-weight-bold); line-height: 18px; text-align: center; } .cr-navbar__link[aria-current='page'] .cr-navbar__count { background: color-mix(in srgb, currentColor 22%, transparent); } .cr-navbar__actions { display: flex; align-items: center; gap: var(--cr-space-2); margin-inline-start: auto; } .cr-navbar__toggle { display: none; place-items: center; flex: none; width: var(--cr-control-height-sm); height: var(--cr-control-height-sm); margin-inline-start: auto; padding: 0; border: 0; border-radius: var(--cr-radius-full); background: none; color: var(--cr-color-text-secondary); font-size: var(--cr-font-size-lg); cursor: pointer; } .cr-navbar__actions + .cr-navbar__toggle { margin-inline-start: 0; } .cr-navbar__toggle:hover, .cr-navbar__toggle[aria-expanded='true'] { background: var(--cr-color-bg-subtle); color: var(--cr-color-text-default); } .cr-navbar__link:focus-visible, .cr-navbar__brand a:focus-visible, .cr-navbar__toggle:focus-visible { outline: var(--cr-focus-width) solid var(--cr-color-focus); outline-offset: var(--cr-focus-offset); } /* Narrow: the links leave the row and open below it from the menu button. */ @container (max-width: 640px) { .cr-navbar__inner { flex-wrap: wrap; border-radius: var(--cr-radius-xl); } .cr-navbar__toggle { display: grid; } .cr-navbar__links { display: none; flex-direction: column; align-items: stretch; order: 1; width: 100%; padding-bottom: var(--cr-space-1); } .cr-navbar[data-open] .cr-navbar__links { display: flex; } .cr-navbar__link { display: flex; min-height: var(--cr-control-height-md); border-radius: var(--cr-radius-md); } .cr-navbar__link .cr-navbar__count { margin-inline-start: auto; } .cr-navbar[data-variant='flush'] .cr-navbar__link[aria-current='page'] { border-radius: var(--cr-radius-md); background: var(--cr-color-bg-subtle); box-shadow: none; } } 53:Tc9e,'use client'; import { useId, useRef, useState, type KeyboardEvent, type MouseEventHandler, type ReactNode } from 'react'; import { cx } from '@/lib/creance/cx'; import { CrossIcon, MenuIcon } from '@/lib/creance/icons'; import './Navbar.css'; export interface NavbarItem { label: ReactNode; href?: string; onClick?: MouseEventHandler; /** The page the person is on. */ current?: boolean; /** A count shown after the label, such as items waiting. */ count?: number; } export interface NavbarProps { items: NavbarItem[]; /** Logo and name, usually a link home. */ brand?: ReactNode; /** The end of the bar: search, buttons, the account. Use one primary button at most. */ actions?: ReactNode; /** `bar` is a floating glass pill. `flush` sits on the page with a line under it. */ variant?: 'bar' | 'flush'; /** Accessible name of the nav. Default "Main". */ label?: string; /** Accessible name of the button that opens the links on a narrow bar. Default "Menu". */ menuLabel?: string; className?: string; } /** The bar across the top of an app or site. When it gets narrow, the links move into a menu. */ export function Navbar({ items, brand, actions, variant = 'bar', label = 'Main', menuLabel = 'Menu', className }: NavbarProps) { const [open, setOpen] = useState(false); const listId = useId(); const toggle = useRef(null); function onKeyDown(e: KeyboardEvent) { if (e.key !== 'Escape' || !open) return; setOpen(false); toggle.current?.focus(); } return ( // The key handler closes the open menu from anywhere inside it; the controls themselves are the button and links. // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions ); } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L50",null,{"namespace":"@creance","registryDependencies":["https://creance.pages.dev/r/creance-base.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"navbar/Navbar.css","content":"$52","type":"registry:file","target":"@components/creance/navbar/Navbar.css"},{"path":"navbar/Navbar.tsx","content":"$53","type":"registry:ui","target":"@components/creance/navbar/Navbar.tsx"}],"className":"h-[70svh] min-h-80"}]]}]