2c:I[522016,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/0zz-qr4ehfg-y.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/0x4o-jqryzpjy.js","/_next/static/immutable/chunks/35wq0ehn8yo1w.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/40nsmaivjxzl9.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2iimfs9klm8ee.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/1v12dieyr7wjf.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/42c4hv7h_qef7.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2a84g45p9ue92.js","/_next/static/immutable/chunks/174-kkyy6-c5l.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],""] 2d:I[406394,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/0zz-qr4ehfg-y.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/0x4o-jqryzpjy.js","/_next/static/immutable/chunks/35wq0ehn8yo1w.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/40nsmaivjxzl9.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2iimfs9klm8ee.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/1v12dieyr7wjf.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/42c4hv7h_qef7.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2a84g45p9ue92.js","/_next/static/immutable/chunks/174-kkyy6-c5l.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"BlockTabs"] 2e:I[966139,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/0zz-qr4ehfg-y.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/0x4o-jqryzpjy.js","/_next/static/immutable/chunks/35wq0ehn8yo1w.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/40nsmaivjxzl9.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2iimfs9klm8ee.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/1v12dieyr7wjf.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/42c4hv7h_qef7.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2a84g45p9ue92.js","/_next/static/immutable/chunks/174-kkyy6-c5l.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"PreviewFrame"] 2f:I[967833,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/0zz-qr4ehfg-y.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/0x4o-jqryzpjy.js","/_next/static/immutable/chunks/35wq0ehn8yo1w.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/40nsmaivjxzl9.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2iimfs9klm8ee.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/1v12dieyr7wjf.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/42c4hv7h_qef7.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2a84g45p9ue92.js","/_next/static/immutable/chunks/174-kkyy6-c5l.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"CodeView"] 30:T38ff,"use client"; import * as React from "react"; import { IconChevronDown, IconMenu2 } from "@tabler/icons-react"; import { Button } from "@/components/ui/button"; import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"; import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, } from "@/components/ui/navigation-menu"; import { Sheet, SheetClose, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet"; import { cn } from "@/lib/utils"; import { useControllable } from "../_shared/use-nav"; type NavbarIcon = React.ComponentType<{ className?: string; stroke?: number }>; export type NavbarLink = { id: string; label: string; href: string; description?: string; icon?: NavbarIcon; }; /** A top-level entry: a plain link (`href`) or a dropdown (`items`). */ export type NavbarItem = { id: string; label: string; href?: string; items?: NavbarLink[]; }; export type NavbarPosition = "static" | "sticky" | "fixed"; export type NavbarSize = "sm" | "default" | "lg"; export type NavbarMaxWidth = "sm" | "md" | "lg" | "xl" | "2xl" | "full"; export type NavbarDensity = "default" | "compact"; export type NavbarAlign = "start" | "center" | "end"; const HEIGHT: Record = { sm: "h-12", default: "h-14", lg: "h-16" }; const MAX: Record = { sm: "max-w-2xl", md: "max-w-4xl", lg: "max-w-5xl", xl: "max-w-6xl", "2xl": "max-w-7xl", full: "max-w-none", }; const ALIGN: Record = { start: "justify-start", center: "justify-center", end: "justify-end" }; export type NavbarProps = { /** Usually `NavbarBrand`. */ brand: React.ReactNode; items: NavbarItem[]; /** Right side: buttons, avatar, search trigger. */ actions?: React.ReactNode; /** Pinned to the bottom of the mobile menu. */ menuFooter?: React.ReactNode; activeId?: string; /** Client-side navigation. When given, link clicks call it instead of following the href. */ navigate?: (href: string, item: NavbarLink | NavbarItem) => void; position?: NavbarPosition; size?: NavbarSize; maxWidth?: NavbarMaxWidth; density?: NavbarDensity; /** Where the links sit between brand and actions. */ align?: NavbarAlign; /** Slide away when scrolling down, return when scrolling up. Needs `sticky` or `fixed`. Transform only. */ hideOnScroll?: boolean; /** Scroll element to watch. Defaults to the window. */ scrollContainer?: React.RefObject; /** Pin to the nearest positioned ancestor instead of the viewport (`fixed` becomes `absolute`). For framed demos. */ contained?: boolean; bordered?: boolean; /** Blurred translucent surface once the bar floats over content. */ translucent?: boolean; /** Controlled mobile menu. */ menuOpen?: boolean; defaultMenuOpen?: boolean; onMenuOpenChange?: (open: boolean) => void; menuTitle?: string; "aria-label"?: string; className?: string; }; /** * App navbar on the Kobra navigation-menu: brand, links, dropdowns, actions. Collapses to a Kobra sheet menu * when its own width is narrow (container query, so it also works inside framed layouts). */ export function Navbar({ brand, items, actions, menuFooter, activeId, navigate, position = "static", size = "default", maxWidth = "xl", density = "default", align = "start", hideOnScroll = false, scrollContainer, contained = false, bordered = true, translucent = true, menuOpen, defaultMenuOpen = false, onMenuOpenChange, menuTitle = "Menu", className, ...aria }: NavbarProps) { const [open, setOpen] = useControllable(menuOpen, defaultMenuOpen, onMenuOpenChange); const floats = position !== "static"; const [scrolledAway, setHidden] = React.useState(false); const hidden = hideOnScroll && floats && scrolledAway; const header = React.useRef(null); // Direction-aware hide: down past a short threshold hides, any upward movement shows. React.useEffect(() => { if (!hideOnScroll || !floats) return; const target: HTMLElement | Window = scrollContainer?.current ?? window; const read = () => (target instanceof Window ? target.scrollY : target.scrollTop); let last = read(); let frame = 0; const onScroll = () => { if (frame) return; frame = requestAnimationFrame(() => { frame = 0; const y = read(); const delta = y - last; if (y < 48) setHidden(false); else if (delta > 6) setHidden(true); else if (delta < -6) setHidden(false); last = y; }); }; target.addEventListener("scroll", onScroll, { passive: true }); return () => { target.removeEventListener("scroll", onScroll); if (frame) cancelAnimationFrame(frame); }; }, [hideOnScroll, floats, scrollContainer]); const go = (event: React.MouseEvent, href: string, item: NavbarLink | NavbarItem) => { if (!navigate) return; event.preventDefault(); navigate(href, item); }; const compact = density === "compact"; const linkClass = cn( "relative inline-flex w-max items-center justify-center rounded-full font-medium outline-none transition-colors duration-150 ease-out focus-visible:ring-3 focus-visible:ring-ring/50 motion-reduce:transition-none", compact ? "h-8 px-2.5 text-[0.8125rem]" : "h-9 px-3 text-sm", "text-muted-foreground hover:text-foreground aria-[current=page]:text-foreground data-popup-open:text-foreground", ); const isActive = (item: NavbarItem) => item.id === activeId || item.items?.some((c) => c.id === activeId); return (

hidden && setHidden(false)} className={cn( "@container/navbar z-40 w-full", position === "sticky" && "sticky top-0", position === "fixed" && (contained ? "absolute inset-x-0 top-0" : "fixed inset-x-0 top-0"), position === "static" && "relative", floats && translucent ? "bg-background/80 backdrop-blur-md" : "bg-background", bordered && "border-b border-border", floats && "transition-transform duration-250 ease-[cubic-bezier(0.23,1,0.32,1)] data-hidden:-translate-y-full data-hidden:duration-200 data-hidden:ease-[cubic-bezier(0.4,0,0.6,1)] motion-reduce:transition-none", className, )} {...aria} >

{brand}

{items.map((item) => item.items ? ( {item.label}

go(e, child.href, child)} className="items-start gap-3 rounded-lg p-2.5" > {child.icon ? ( ) : null} {child.label} {child.description ? ( {child.description} ) : null}

) : ( go(e, item.href ?? "#", item)} className={cn(linkClass, "p-0", compact ? "px-2.5" : "px-3")} > {item.label} ), )}

{actions}

); } /** Brand block: a mark and a name, linking home. Pass anything else as `brand` if you need a logo. */ export function NavbarBrand({ mark, name, href = "/", onClick, className, }: { mark?: React.ReactNode; name: string; href?: string; onClick?: React.MouseEventHandler; className?: string; }) { return ( {mark ? ( {mark} ) : null} {name} ); } function MobileMenu({ open, onOpenChange, title, brand, items, activeId, onLink, footer, }: { open: boolean; onOpenChange: (open: boolean) => void; title: string; brand: React.ReactNode; items: NavbarItem[]; activeId?: string; onLink: (event: React.MouseEvent, href: string, item: NavbarLink | NavbarItem) => void; footer?: React.ReactNode; }) { const row = "flex min-h-11 items-center rounded-lg px-3 text-[0.9375rem] font-medium text-foreground outline-none transition-colors duration-150 hover:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 aria-[current=page]:bg-muted motion-reduce:transition-none"; return ( } /> {title}

{brand}

{items.map((item) => item.items ? ( c.id === activeId)}> {item.label}

{item.items.map((child) => ( } nativeButton={false} aria-current={child.id === activeId ? "page" : undefined} onClick={(e: React.MouseEvent) => onLink(e, child.href, child)} className={cn(row, "font-normal text-muted-foreground")} > {child.label} ))}

) : ( } nativeButton={false} aria-current={item.id === activeId ? "page" : undefined} onClick={(e: React.MouseEvent) => onLink(e, item.href ?? "#", item)} className={row} > {item.label} ), )}

{footer ?

{footer}

: null} ); } 31:T137e,"use client"; import { useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react"; const noop = () => () => {}; /** False on the server and during hydration, true afterwards. */ export function useMounted(): boolean { return useSyncExternalStore(noop, () => true, () => false); } /** True on Apple platforms, where the modifier key is Cmd. Server and first client render say Mac. */ export function useIsMac(): boolean { return useSyncExternalStore( noop, () => /Mac|iPhone|iPad/.test(navigator.platform), () => true, ); } const listeners = new Set<() => void>(); function subscribeStorage(notify: () => void) { listeners.add(notify); window.addEventListener("storage", notify); return () => { listeners.delete(notify); window.removeEventListener("storage", notify); }; } function readRaw(key: string | undefined): string | null { if (!key) return null; try { return window.localStorage.getItem(key); } catch { return null; } } function writeStorage(key: string, value: unknown) { try { window.localStorage.setItem(key, JSON.stringify(value)); } catch { /* private mode or quota: the state still works in memory */ } listeners.forEach((notify) => notify()); } /** * State that survives reloads when `key` is given. The server and the hydrating render see `initial`; the stored * value arrives right after, and `ready` turns true two frames later so callers can keep transitions off until * the restored value has painted. Without a key it is plain state. */ export function usePersistedState( key: string | undefined, initial: T, ): [value: T, setValue: (next: T) => void, ready: boolean] { const [local, setLocal] = useState(initial); const [ready, setReady] = useState(!key); const raw = useSyncExternalStore( subscribeStorage, () => readRaw(key), () => null, ); const stored = useMemo(() => { if (raw === null) return undefined; try { return JSON.parse(raw) as T; } catch { return undefined; } }, [raw]); useEffect(() => { if (!key) return; let second = 0; const first = requestAnimationFrame(() => { second = requestAnimationFrame(() => setReady(true)); }); return () => { cancelAnimationFrame(first); cancelAnimationFrame(second); }; }, [key]); const set = useCallback( (next: T) => { setLocal(next); if (key) writeStorage(key, next); }, [key], ); return [key && stored !== undefined ? stored : local, set, ready]; } /** Controlled or uncontrolled value, Base UI naming. */ export function useControllable( value: T | undefined, defaultValue: T, onChange?: (next: T) => void, ): [T, (next: T) => void] { const [inner, setInner] = useState(defaultValue); const controlled = value !== undefined; const current = controlled ? value : inner; const onChangeRef = useRef(onChange); useEffect(() => { onChangeRef.current = onChange; }); const set = useCallback( (next: T) => { if (!controlled) setInner(next); onChangeRef.current?.(next); }, [controlled], ); return [current, set]; } type ShortcutOptions = { /** `window`: any time. `within`: only while the element holds focus or the pointer. */ scope?: "window" | "within"; /** Element used by `within`. */ scopeRef?: React.RefObject; /** Also swallow these Cmd/Ctrl+key combos before other listeners see them. */ swallow?: string[]; }; /** * Cmd/Ctrl + key. Runs in the capture phase so it can claim a combo (for example, to replace the Kobra * sidebar's built-in Cmd/Ctrl+B with another key). A key of `false` disables the shortcut. */ export function useModShortcut( key: string | false | undefined, handler: () => void, { scope = "window", scopeRef, swallow = [] }: ShortcutOptions = {}, ) { const handlerRef = useRef(handler); useEffect(() => { handlerRef.current = handler; }); useEffect(() => { const wanted = key ? key.toLowerCase() : undefined; const onKeyDown = (event: KeyboardEvent) => { if (!(event.metaKey || event.ctrlKey) || event.altKey || event.shiftKey) return; const pressed = event.key.toLowerCase(); if (swallow.includes(pressed) && pressed !== wanted) { event.stopPropagation(); return; } if (!wanted || pressed !== wanted) return; if (scope === "within") { const node = scopeRef?.current; if (!node || !(node.contains(document.activeElement) || node.matches(":hover"))) return; } event.preventDefault(); event.stopPropagation(); handlerRef.current(); }; window.addEventListener("keydown", onKeyDown, true); return () => window.removeEventListener("keydown", onKeyDown, true); // swallow is compared by content // eslint-disable-next-line react-hooks/exhaustive-deps }, [key, scope, scopeRef, swallow.join("|")]); } 32:T30f2,"use client"; import { useRef, useState } from "react"; import { IconBell, IconBrandGithub } from "@tabler/icons-react"; import { Avatar, AvatarFallback } from "@/components/ui/avatar"; import { Button } from "@/components/ui/button"; import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import { dashboardBrand, dashboardTopNav, demoUser, docsBrand, docsTopNav, themeOptions } from "../_fixtures"; import { CommandPaletteDialog, CommandPaletteTrigger, type PaletteEntry } from "../command-palette/command-palette"; import { DemoPage, DemoSection, FillerRows, Stage } from "../_shared/demo-kit"; import { Segment } from "../segment/segment"; import { Navbar, NavbarBrand, type NavbarItem, type NavbarProps } from "./navbar"; const docsCopy = [ "Routes come from the folder structure. A file named page becomes a route, and brackets in a folder name become a parameter.", "Guards run before a page renders. Return a redirect to send the visitor elsewhere, or throw to show the error page.", "Loaders run on the server and hand typed data to the page. Cache a result for a time, or revalidate it on demand.", "Sessions live in a signed cookie. Add a role to restrict a route, and read the current user from any loader.", "Previews build on every branch. Promote one to production when it looks right, and roll back with one command.", ]; function Article() { return (

{docsCopy.concat(docsCopy).map((p, i) => (

Section {i + 1}

{p}

))}

); } /** Link clicks update local state instead of leaving the page. */ function useActive(initial: string) { const [active, setActive] = useState(initial); const navigate: NonNullable = (_href, item) => setActive(item.id); return { active, navigate }; } const paletteEntries: PaletteEntry[] = docsTopNav .flatMap((i) => i.items ?? []) .map((l) => ({ id: l.id, label: l.label, group: "Guides", hint: l.description?.slice(0, 22) })); function DocsNavbar() { const scroller = useRef(null); const { active, navigate } = useActive("docs"); const [theme, setTheme] = useState("light"); return (

e.preventDefault()} />} items={docsTopNav} align="center" actions={ <> } /> } contained />

); } function UserMenu() { return ( }> AQ {demoUser.name} {demoUser.email} Account Billing Sign out ); } function DashboardNavbar() { const scroller = useRef(null); const { active, navigate } = useActive("overview"); return (

e.preventDefault()} />} items={dashboardTopNav} actions={ <> } menuFooter={

{demoUser.name}

} contained />

); } function CompactNavbar() { const { active, navigate } = useActive("orders"); return (

e.preventDefault()} />} items={dashboardTopNav.map((i) => ({ id: i.id, label: i.label, href: i.href ?? "#" }))} actions={ } />

); } function SizesNavbar() { const items: NavbarItem[] = dashboardTopNav.map((i) => ({ id: i.id, label: i.label, href: i.href ?? "#" })); return (

{(["sm", "default", "lg"] as const).map((size) => (

e.preventDefault()} />} items={items} navigate={() => undefined} actions={} />

))}

); } function DropdownNavbar() { const { active, navigate } = useActive("g-start"); return ( e.preventDefault()} />} items={[...docsTopNav.slice(0, 2), ...dashboardTopNav.filter((i) => i.items)]} actions={} /> ); } function MobileMenuDemo() { const { active, navigate } = useActive("overview"); return (

e.preventDefault()} />} items={[...dashboardTopNav]} actions={} menuFooter={} />

Page content

); } function HideOnScroll() { const scroller = useRef(null); const { active, navigate } = useActive("docs"); return (

e.preventDefault()} />} items={docsTopNav} actions={} contained />

); } function Positioning() { const items: NavbarItem[] = docsTopNav.map((i) => ({ id: i.id, label: i.label, href: i.href ?? "#" })); const brand = e.preventDefault()} />; return (

{(["static", "sticky", "fixed"] as const).map((position) => (

position: {position}

{position === "fixed" ? ( ) : ( <> undefined} contained /> )}

{position === "fixed" ? ( undefined} /> ) : null}

))}

); } function MaxWidths() { const items: NavbarItem[] = docsTopNav.map((i) => ({ id: i.id, label: i.label, href: i.href ?? "#" })); return (

{(["md", "full"] as const).map((maxWidth) => (

e.preventDefault()} />} items={items} activeId="docs" navigate={() => undefined} actions={} />

))}

); } export function NavbarDemo() { return ( ); } export default NavbarDemo; 33:Ta73,import type { BlockMeta } from "../../../lib/block-meta"; export const navbarMeta: BlockMeta = { slug: "navbar", title: "Navbar", description: "App navbar on the Kobra navigation-menu: brand, links, dropdowns and actions, static, sticky or fixed, sizes, max width, direction-aware hide on scroll and a Kobra sheet menu for narrow containers.", group: "navigation", kobraDeps: ["navigation-menu", "sheet", "button", "collapsible"], files: ["blocks/navigation/navbar/navbar.tsx", "blocks/navigation/_shared/use-nav.ts"], props: [ { name: "brand", type: "ReactNode", description: "Left slot. NavbarBrand renders a mark and a name." }, { name: "items", type: "{ id; label; href?; items?: { id; label; href; description?; icon? }[] }[]", description: "Links, or dropdowns when `items` is given." }, { name: "actions", type: "ReactNode", description: "Right slot." }, { name: "menuFooter", type: "ReactNode", description: "Pinned to the bottom of the mobile menu." }, { name: "activeId", type: "string", description: "Marks the current link (aria-current). A dropdown is active when a child is." }, { name: "navigate", type: "(href, item) => void", description: "Client-side navigation: link clicks call it instead of following the href." }, { name: "position", type: "'static' | 'sticky' | 'fixed'", default: "'static'", description: "Positioning. Sticky and fixed get a translucent blurred surface." }, { name: "size", type: "'sm' | 'default' | 'lg'", default: "'default'", description: "Bar height (48, 56, 64px)." }, { name: "maxWidth", type: "'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'", default: "'xl'", description: "Content width cap." }, { name: "density", type: "'default' | 'compact'", default: "'default'", description: "Link size and spacing." }, { name: "align", type: "'start' | 'center' | 'end'", default: "'start'", description: "Where the links sit between brand and actions." }, { name: "hideOnScroll", type: "boolean", default: "false", description: "Slides out on scroll down, back on scroll up. Transform only. Needs sticky or fixed." }, { name: "scrollContainer", type: "RefObject", description: "Element to watch instead of the window." }, { name: "contained", type: "boolean", default: "false", description: "Pin to a positioned ancestor instead of the viewport." }, { name: "menuOpen / defaultMenuOpen / onMenuOpenChange", type: "boolean / boolean / (open) => void", description: "Mobile menu state." }, { name: "className", type: "string", description: "Root only." }, ], tags: ["navbar", "header", "navigation", "menu", "app-ui"], status: "ready", }; 23:["$","article",null,{"className":"grid gap-6","children":[["$","header",null,{"className":"grid gap-3","children":[["$","nav",null,{"aria-label":"breadcrumb","data-slot":"breadcrumb","className":"","children":["$","ol",null,{"data-slot":"breadcrumb-list","className":"flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground","children":[["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","$L2c",null,{"href":"/","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","children":"Kobra Commerce"}]}],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"tabler-icon tabler-icon-chevron-right rtl:-scale-x-100","children":["$undefined",["$","path","svg-0",{"d":"M9 6l6 6l-6 6"}],"$undefined"]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","$L2c",null,{"href":"/#navigation","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","children":"Navigation"}]}],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"tabler-icon tabler-icon-chevron-right rtl:-scale-x-100","children":["$undefined",["$","path","svg-0",{"d":"M9 6l6 6l-6 6"}],"$undefined"]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","span",null,{"data-slot":"breadcrumb-page","role":"link","aria-disabled":"true","aria-current":"page","className":"font-normal text-foreground","children":"Navbar"}]}]]}]}],["$","div",null,{"className":"flex flex-wrap items-center gap-3","children":[["$","h1",null,{"className":"text-2xl font-bold","children":"Navbar"}],["$","span",null,{"data-slot":"badge","data-variant":"green","className":"group/badge t-label relative isolate inline-flex w-fit shrink-0 items-center justify-center gap-1 rounded-full border border-transparent py-0.5 font-medium [--surface-calm:0.5] whitespace-nowrap transition-ring before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:border before:border-transparent before:transition-[scale,background-color,border-color] before:duration-150 before:ease-out focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 motion-reduce:before:transition-none has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [a,button]:active:before:scale-[0.97] motion-reduce:[a,button]:active:before:scale-100 [&>svg]:pointer-events-none [&>svg]:size-3! t-surface t-surface-success text-[var(--badge-green-fg)] h-5 px-1.5 text-xs","children":"Ready"}]]}],["$","p",null,{"className":"max-w-[65ch] text-sm text-muted-foreground","children":"App navbar on the Kobra navigation-menu: brand, links, dropdowns and actions, static, sticky or fixed, sizes, max width, direction-aware hide on scroll and a Kobra sheet menu for narrow containers."}]]}],["$","$L2d",null,{"preview":["$","$L2e",null,{"slug":"navbar","group":"navigation","minHeight":640,"fixedHeight":"$undefined"}],"code":["$","$L2f",null,{"files":[{"path":"blocks/navigation/navbar/navbar.tsx","code":"$30"},{"path":"blocks/navigation/_shared/use-nav.ts","code":"$31"},{"path":"blocks/navigation/navbar/demo.tsx","code":"$32"},{"path":"blocks/navigation/navbar/meta.ts","code":"$33"}]}],"props":"$L34"}],"$L35"]}]