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:T37aa,'use client'; import { AArrowDown, AArrowUp, ALargeSmall, ChevronDown, ExternalLink, Globe, Menu, Moon, Sun, X, } from 'lucide-react'; import { ComponentProps, ReactNode, createContext, useCallback, useContext, useId, useMemo, useState, useSyncExternalStore, } from 'react'; import { useAccessibilitySettings } from '@/components/ui/accessibility-widget'; import { Dropdown, DropdownContent, DropdownItem, DropdownTrigger } from '@/components/ui/dropdown'; import { Label1, Label2, Label3 } from '@/components/ui/typography'; import { cn } from '@/lib/utils'; /* * UX4G government header: a 41px primary utility bar over a 72px white bar. * The utility bar holds the Government of India mark and whatever site-wide * controls a site offers; the main bar holds brand, navigation and actions. */ interface INavbarContext { open: boolean; navId: string; toggle: () => void; close: () => void; } const NAVBAR_CONTEXT = createContext(null); /** Reads the nearest Navbar context, or fails loudly rather than silently. */ function useNavbar() { const context = useContext(NAVBAR_CONTEXT); if (!context) throw new Error('Navbar parts must be rendered inside '); return context; } /** Government website header. */ function Navbar({ className, children, ...props }: ComponentProps<'header'>) { const navId = useId(); const [open, setOpen] = useState(false); const toggle = useCallback(() => setOpen(o => !o), []); const close = useCallback(() => setOpen(false), []); const value = useMemo(() => ({ open, navId, toggle, close }), [open, navId, toggle, close]); return (

{children}

); } /** * Primary bar above the main header. * * `start` defaults to the Government of India mark, which is the whole point * of this bar on a government site. */ function NavbarUtilityBar({ className, children, start, ...props }: ComponentProps<'div'> & { start?: ReactNode }) { return (

{start ?? }

{children}

); } /** The Government of India mark, linking out to india.gov.in by default. */ function NavbarGovBadge({ className, href = 'https://www.india.gov.in', label = 'Government of India', ...props }: ComponentProps<'a'> & { label?: string }) { return ( {/* Drawn from a theme token rather than shipped as an asset, so the component needs no image file to install. */}

{label} ); } /** * Skip link. Hidden until focused, which is the only reason it works — it has * to be the first thing a keyboard user reaches. */ function NavbarSkipLink({ className, href = '#main', children = 'Skip to main content', ...props }: ComponentProps<'a'>) { return ( {children} ); } /** Thin divider between utility-bar controls. */ function NavbarSeparator({ className, ...props }: ComponentProps<'div'>) { return (

); } const UTILITY_CONTROL = 'focus-visible:shadow-focus-neutral inline-flex cursor-pointer items-center justify-center rounded-md transition-colors focus-visible:outline-none'; /** * Text-size controls, as A-minus / A / A-plus. * * Wired to the same store as the accessibility panel, so the two cannot * disagree about how large the page currently is. */ function NavbarTextSize({ className, ...props }: ComponentProps<'div'>) { const { settings, setStep, stepBy, maxStep } = useAccessibilitySettings(); const step = settings.textStep; const decrease = useCallback(() => stepBy('textStep', -1), [stepBy]); const reset = useCallback(() => setStep('textStep', 0), [setStep]); const increase = useCallback(() => stepBy('textStep', 1), [stepBy]); return (

); } interface INavbarThemeToggleProps extends Omit, 'onToggle'> { /** Controlled mode. Omit both to let the toggle manage the `dark` class. */ isDark?: boolean; onToggle?: () => void; } /** * Light and dark toggle. * * Uncontrolled it flips the `dark` class on the document element. Pass * `isDark` and `onToggle` to defer to an existing theme provider instead — * two things writing that class will fight. */ /** Subscribes to `dark` being added or removed on the document element. */ function subscribeDarkClass(listener: () => void) { const observer = new MutationObserver(listener); observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] }); return () => observer.disconnect(); } /** Whether the document is currently in dark mode. */ const getDarkClass = () => document.documentElement.classList.contains('dark'); /** The server cannot know the theme, so it renders light. */ const getServerDarkClass = () => false; /** * Light and dark toggle. * * Uncontrolled it flips the `dark` class on the document element. Pass * `isDark` and `onToggle` to defer to an existing theme provider instead — * two things writing that class will fight each other. */ function NavbarThemeToggle({ className, isDark, onToggle, ...props }: INavbarThemeToggleProps) { // Read the class through a store rather than syncing state in an effect, so // an external theme provider flipping it is picked up too. const observedDark = useSyncExternalStore(subscribeDarkClass, getDarkClass, getServerDarkClass); const dark = isDark ?? observedDark; const handleClick = useCallback(() => { if (onToggle) { onToggle(); return; } const root = document.documentElement; root.classList.toggle('dark', !root.classList.contains('dark')); }, [onToggle]); const Icon = dark ? Sun : Moon; return ( ); } interface INavbarLanguageProps { languages: { code: string; label: string }[]; value: string; onSelect: (code: string) => void; className?: string; } /** One language row. Split out so its handler is not rebuilt each render. */ function NavbarLanguageItem({ language, selected, onSelect, }: { language: { code: string; label: string }; selected: boolean; onSelect: (code: string) => void; }) { const handleSelect = useCallback(() => onSelect(language.code), [onSelect, language.code]); return ( {language.label} ); } /** Language selector, as the utility bar's globe and label. */ function NavbarLanguage({ languages, value, onSelect, className }: INavbarLanguageProps) { const current = languages.find(language => language.code === value) ?? languages[0]; return ( {current?.label} {languages.map(language => ( ))} ); } /** White bar holding brand, navigation and actions. */ function NavbarMain({ className, children, ...props }: ComponentProps<'div'>) { return (

{children}

); } /** Emblem and wordmark. */ function NavbarBrand({ className, ...props }: ComponentProps<'a'>) { return ( ); } /** * Navigation list. Collapses behind NavbarToggle below `lg`, where it becomes a * stacked panel under the header rather than an overlay. */ function NavbarNav({ className, children, ...props }: ComponentProps<'nav'>) { const { open, navId } = useNavbar(); return ( ); } interface INavbarLinkProps extends ComponentProps<'a'> { active?: boolean; /** Shows a chevron, for a link that opens a menu. */ hasMenu?: boolean; } /** One navigation link. */ function NavbarLink({ className, active, hasMenu, children, ...props }: INavbarLinkProps) { return ( {children} {hasMenu && } ); } /** Trailing actions: search, sign in, and so on. */ function NavbarActions({ className, ...props }: ComponentProps<'div'>) { return

; } /** Mobile disclosure button for the navigation. */ function NavbarToggle({ className, ...props }: ComponentProps<'button'>) { const { open, toggle, navId } = useNavbar(); return ( ); } /** Full-width row beneath the header, for the fill navigation layout. */ function NavbarSecondaryRow({ className, children, ...props }: ComponentProps<'div'>) { return (

{children}

); } export { Navbar, NavbarUtilityBar, NavbarTextSize, NavbarThemeToggle, NavbarLanguage, NavbarGovBadge, NavbarSkipLink, NavbarSeparator, NavbarMain, NavbarBrand, NavbarNav, NavbarLink, NavbarActions, NavbarToggle, NavbarSecondaryRow, }; 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":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L50",null,{"namespace":"@indiacn","registryDependencies":["https://indiacn.in/r/theme.json","https://indiacn.in/r/typography.json","https://indiacn.in/r/dropdown.json","https://indiacn.in/r/accessibility-widget.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"components/ui/navbar.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]