{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "topbar", "title": "Topbar", "description": "Topbar from the Get IT Done design system.", "dependencies": [ "class-variance-authority@^0.7.0", "lucide-react@^0.379.0" ], "registryDependencies": [ "https://zero-design.itdone.de/r/accordion.json", "https://zero-design.itdone.de/r/breadcrumb.json", "https://zero-design.itdone.de/r/button.json", "https://zero-design.itdone.de/r/labels-context.json", "https://zero-design.itdone.de/r/popover.json", "https://zero-design.itdone.de/r/recipes.json", "https://zero-design.itdone.de/r/sheet.json", "https://zero-design.itdone.de/r/sidebar.json", "https://zero-design.itdone.de/r/status-dot.json", "https://zero-design.itdone.de/r/use-escape-key.json", "https://zero-design.itdone.de/r/utils.json", "https://zero-design.itdone.de/r/theme.json" ], "files": [ { "path": "registry/ui/topbar.tsx", "content": "'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { ArrowLeft, Globe, HelpCircle, Menu, Moon, Sun } from 'lucide-react';\nimport * as React from 'react';\n\nimport { focusRing, focusRingInverse, transitionBase } from '@/lib/recipes';\nimport { useEscapeKey } from '@/lib/use-escape-key';\nimport { cn } from '@/lib/utils';\nimport { BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, Breadcrumbs } from '@/components/ui/breadcrumb';\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion';\nimport { Button } from '@/components/ui/button';\nimport { useLabels, usePreset } from '@/components/ui/labels-context';\nimport { SidebarSwatch } from '@/components/ui/sidebar';\nimport { StatusDot, type StatusDotTone } from '@/components/ui/status-dot';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';\nimport { Sheet, SheetContent, SheetDescription, SheetNavLink, type SheetNavLinkProps, SheetTitle } from '@/components/ui/sheet';\n\n// App top bar family (Figma \"Header navigation\": Inset App / Settings / Guest, Simple, Dual-tier, Mobile).\n// Composable: TopBar is the landmark, the parts below fill its start and end slots.\n\nconst topBarVariants = cva(\n // Theme expression (kette-tokens 5.26.0): top bar image and bevel, accent stripe as the bottom border image; none by default\n '@container/topbar flex w-full shrink-0 items-center gap-2 border-0 border-b border-solid border-hairline bg-background-default text-text-default bg-[image:var(--image-top-bar)] shadow-[shadow:var(--bevel-top-bar)] [border-image-source:var(--image-accent-stripe)] [border-image-slice:1]',\n {\n variants: {\n variant: {\n inset: 'h-topbar px-4',\n guest: 'h-14 px-4',\n simple: 'h-topbar-lg px-8',\n mobile: 'h-16 px-4',\n },\n },\n defaultVariants: { variant: 'inset' },\n },\n);\n\nexport interface TopBarProps extends React.HTMLAttributes, VariantProps {}\n\nconst TopBar = React.forwardRef(({ className, variant, ...props }, ref) => {\n const zero = usePreset() === 'zero';\n return (\n \n );\n});\nTopBar.displayName = 'TopBar';\n\nconst TopBarStart = React.forwardRef>(\n ({ className, ...props }, ref) =>
,\n);\nTopBarStart.displayName = 'TopBarStart';\n\nconst TopBarEnd = React.forwardRef>(\n ({ className, children, ...props }, ref) => (\n
\n ),\n);\nTopBarEnd.displayName = 'TopBarEnd';\n\n// Second row of the Dual-tier header (sub navigation, search).\nconst TopBarSubRow = React.forwardRef>(\n ({ className, ...props }, ref) => (\n \n ),\n);\nTopBarSubRow.displayName = 'TopBarSubRow';\n\n/* -------------------------------------------------------------------------------------------------\n * Breadcrumb (up to three levels)\n * -----------------------------------------------------------------------------------------------*/\n\nexport interface TopBarBreadcrumbItem {\n label: React.ReactNode;\n href?: string;\n onClick?: React.MouseEventHandler;\n}\n\nexport interface TopBarBreadcrumbProps extends Omit, 'children'> {\n items: TopBarBreadcrumbItem[];\n /** Leading object icon tile, e.g. ``. */\n icon?: React.ReactNode;\n /** Muted trailing context, e.g. the selected projects. */\n context?: React.ReactNode;\n /** Project colours shown as small squares before the context text (user data, passed as CSS colours). */\n contextSwatches?: string[];\n /** Levels shown at most. Longer trails keep the first and the last items and collapse the middle. Default 3. */\n maxLevels?: number;\n}\n\nconst ELLIPSIS = Symbol('ellipsis');\n\nconst backArrow = ;\nconst backLinkClass = 'block min-w-0 max-w-full truncate leading-[var(--size-control-sm)]';\n\n// Thin header wrapper over Breadcrumbs (type path): adds the icon tile slot, the context slot and the level cap.\nconst TopBarBreadcrumb = React.forwardRef(\n ({ className, items, icon, context, contextSwatches, maxLevels = 3, ...props }, ref) => {\n const limit = Math.max(2, maxLevels);\n // The ellipsis counts as a level. With only two levels there is no room for it, so the trail becomes first and last.\n const collapsed: Array =\n limit === 2 ? [items[0], items[items.length - 1]] : [items[0], ELLIPSIS, ...items.slice(items.length - (limit - 2))];\n const visible: Array = items.length > limit ? collapsed : items;\n // The level above the current page, for the back link below sm. A level without a target is not offered.\n const parent = items.length > 1 && (items[items.length - 2].href || items[items.length - 2].onClick) ? items[items.length - 2] : null;\n // The trail stays on one line. Every level truncates with an ellipsis (the full text is the tooltip), the parents give way first and the current page keeps its room. Below sm only the back link (the level above) and the current page are drawn: the other parents are display none, so they are neither visible nor focusable. The context text drops out below sm.\n return (\n
\n {icon}\n ol]:flex-nowrap [&_li]:whitespace-nowrap\" {...props}>\n {parent && !visible.includes(parent) && (\n // The level above is not drawn on its own (a collapsed trail): below sm it is still offered as the way back.\n
  • \n \n {backArrow}\n {parent.label}\n \n
    • \n )}\n {visible.map((item, index) => {\n const last = index === visible.length - 1;\n // Below sm the level above the current page stays as the back link (arrow plus label); the other parents are hidden.\n const back = item === parent;\n return (\n span:last-child]:hidden')}\n >\n {item === ELLIPSIS ? (\n \n ) : (\n \n {back && backArrow}\n {item.label}\n \n )}\n \n );\n })}\n     \n {context && (\n \n {contextSwatches?.map((color) => )}\n {context}\n \n )}\n
    \n );\n },\n);\nTopBarBreadcrumb.displayName = 'TopBarBreadcrumb';\n\n/* -------------------------------------------------------------------------------------------------\n * Timer pill\n * -----------------------------------------------------------------------------------------------*/\n\nexport interface TimerPillProps extends Omit, 'children'> {\n /** Elapsed time, already formatted (e.g. `01:24:37`). */\n time: string;\n /** Shows the pulsing recording dot. Respects reduced motion (the dot stays static). Default true. */\n running?: boolean;\n /** Accessible name prefix. Default `Timer`. */\n label?: string;\n /** Optional details panel (e.g. project, note, stop button). When set, the pill opens it as a popover. */\n details?: React.ReactNode;\n /** Accessible name of the details panel. Defaults to the pill name. */\n detailsLabel?: string;\n}\n\nconst TimerPill = React.forwardRef(\n ({ className, time, running = true, label: labelProp, details, detailsLabel, ...props }, ref) => {\n const l = useLabels();\n const label = labelProp ?? l.timer;\n const name = l.timerState(label, running, time);\n const zero = usePreset() === 'zero';\n const pill = (\n \n \n {time}\n \n );\n if (details == null) return pill;\n return (\n \n {pill}\n \n {details}\n \n \n );\n },\n);\nTimerPill.displayName = 'TimerPill';\n\n/* -------------------------------------------------------------------------------------------------\n * Icon button + escape hint + menu button\n * -----------------------------------------------------------------------------------------------*/\n\nexport interface TopBarIconButtonProps extends React.ButtonHTMLAttributes {\n /** Required accessible name. */\n label: string;\n /** Unread or pending count shown as a small badge. */\n count?: number;\n // Toggle state, for example an open notification panel. Sets aria-pressed and the pressed surface.\n pressed?: boolean;\n // Open state of a popover or menu trigger. Sets aria-expanded and the open surface. Do not combine with `pressed`: expanded wins and no aria-pressed is set.\n expanded?: boolean;\n // Counts above this show as `+`. Default 99.\n maxCount?: number;\n // Small status dot in the bottom corner (for example connection or sync state). Pair it with `statusLabel`, colour alone is not enough.\n status?: StatusDotTone;\n // Text for assistive tech, appended to the accessible name, e.g. `Offline`.\n statusLabel?: string;\n}\n\nconst TopBarIconButton = React.forwardRef(\n ({ className, label, count, pressed: pressedProp, expanded, maxCount = 99, status, statusLabel, children, ...props }, ref) => {\n // A disclosure trigger exposes aria-expanded only, never aria-pressed.\n const pressed = expanded === undefined ? pressedProp : undefined;\n const shown = count && count > maxCount ? `${maxCount}+` : count;\n const zero = usePreset() === 'zero';\n return (\n svg]:h-icon-sm [&>svg]:w-icon-sm',\n zero ? 'text-icon-default' : 'text-icon-subtle',\n transitionBase,\n 'hover:bg-muted hover:text-icon-default active:bg-muted-strong',\n 'data-[pressed]:bg-muted data-[pressed]:text-icon-default',\n 'data-[expanded]:bg-muted data-[expanded]:text-icon-default',\n 'disabled:pointer-events-none disabled:opacity-disabled',\n focusRing,\n className,\n )}\n {...props}\n >\n {children}\n {count ? (\n \n {shown}\n \n ) : null}\n {status ? : null}\n \n );\n },\n);\nTopBarIconButton.displayName = 'TopBarIconButton';\n\nexport interface TopBarHelpButtonProps extends Omit {\n // Accessible name. Defaults to the provider text, then English `Help`.\n label?: string;\n}\n\n// Help icon button (Figma Header navigation Mode=Settings, Help button). Alternative to the close button in settings mode.\nconst TopBarHelpButton = React.forwardRef(({ label: labelProp, ...props }, ref) => {\n const l = useLabels();\n return (\n \n \n \n );\n});\nTopBarHelpButton.displayName = 'TopBarHelpButton';\n\nexport interface TopBarEscapeHintProps extends React.HTMLAttributes {\n /** Called when Escape is pressed. Omit to render the hint text only. */\n onEscape?: () => void;\n}\n\nconst TopBarEscapeHint = React.forwardRef(\n ({ className, onEscape, children: childrenProp, ...props }, ref) => {\n const l = useLabels();\n const children = childrenProp ?? l.escClosesSettings;\n useEscapeKey(onEscape);\n return (\n // A keyboard hint is no use on a phone: it also took the room of the page title below sm.\n \n {children}\n \n );\n },\n);\nTopBarEscapeHint.displayName = 'TopBarEscapeHint';\n\n// Mobile menu trigger: pair with a Sheet or any disclosure; exposes the disclosure state.\nexport interface TopBarMenuButtonProps extends React.ButtonHTMLAttributes {\n open?: boolean;\n // `inverse` is for a bar on an inverse surface (dark band in light mode, light band in dark mode): icon, hover and focus ring follow the band. `inverse-fixed` needs no change, its dark scope already resolves the default roles.\n tone?: 'default' | 'inverse' | 'inverse-fixed';\n}\n\nconst TopBarMenuButton = React.forwardRef(\n ({ className, open = false, tone = 'default', 'aria-label': ariaLabelProp, children, ...props }, ref) => {\n const l = useLabels();\n const ariaLabel = ariaLabelProp ?? l.menu;\n return (\n \n {children ?? }\n \n );\n },\n);\nTopBarMenuButton.displayName = 'TopBarMenuButton';\n\n/* -------------------------------------------------------------------------------------------------\n * Primary navigation (Guest, Simple, Dual-tier)\n * -----------------------------------------------------------------------------------------------*/\n\nexport interface TopBarNavItem extends Omit, 'children' | 'href'> {\n label: React.ReactNode;\n href: string;\n // `true` and `page` mark the current page. `location` marks the current in-page anchor section.\n current?: boolean | 'page' | 'location';\n}\n\nexport interface TopBarNavProps extends Omit, 'children'> {\n items: TopBarNavItem[];\n /** `muted` renders inactive items in the subtle text color (Guest header). Default `default`. */\n tone?: 'default' | 'muted';\n}\n\nconst TopBarNav = React.forwardRef(\n ({ className, items, tone = 'default', 'aria-label': ariaLabelProp, ...props }, ref) => {\n const l = useLabels();\n const ariaLabel = ariaLabelProp ?? l.primary;\n return (\n \n );\n },\n);\nTopBarNav.displayName = 'TopBarNav';\n\n/* -------------------------------------------------------------------------------------------------\n * Guest header parts: brand with suite byline, language and theme\n * -----------------------------------------------------------------------------------------------*/\n\nexport interface TopBarBrandProps extends Omit, 'children'> {\n // Leading logo or object icon.\n mark?: React.ReactNode;\n // Wordmark text.\n name: React.ReactNode;\n // Optional suite byline next to the wordmark, for example \"by Get IT Done\" (Figma Header navigation Guest, Suite byline).\n byline?: React.ReactNode;\n // Wordmark type role: `sm` is the default UI weight, `md` the small title, `lg` the small display style.\n // `18`, `20` and `24` set the wordmark at 18px (large role), 20px (title-sm role, same as `md`) and 24px (page title role) for site headers.\n size?: 'sm' | 'md' | 'lg' | '18' | '20' | '24';\n // `inverse` sets the wordmark and byline for an inverse surface (dark band in light mode, light band in dark mode).\n // `inverse-fixed` stays light on dark in both modes, for bands that are dark in light and dark mode.\n tone?: 'default' | 'inverse' | 'inverse-fixed';\n // Sets the wordmark in capitals.\n uppercase?: boolean;\n // Letter spacing of the wordmark. `default` keeps the type role. `tight`, `wide` and `wider` use the Tailwind tracking steps, usually with `uppercase`.\n tracking?: 'default' | 'tight' | 'wide' | 'wider';\n}\n\nconst brandSize = {\n sm: 'typography-ui-semibold',\n md: 'typography-title-sm',\n lg: 'typography-display-sm',\n '18': 'typography-large',\n '20': 'typography-title-sm',\n '24': 'typography-page-title',\n} as const;\n\nconst brandTracking = { default: undefined, tight: 'tracking-tight', wide: 'tracking-wide', wider: 'tracking-wider' } as const;\n\n// The title-sm and display-sm utilities omit the letter-spacing of their type role, so it is read from the role token here. typography-ui-semibold already carries it.\nconst brandLetterSpacing = {\n sm: undefined,\n md: 'var(--typo-title-sm-ls)',\n lg: 'var(--typo-display-sm-ls)',\n '18': undefined,\n '20': 'var(--typo-title-sm-ls)',\n '24': undefined,\n} as const;\n\nconst brandTone = {\n default: { name: 'text-text-default', byline: 'text-text-subtle' },\n inverse: { name: 'text-text-inverse', byline: 'text-text-inverse-subtle' },\n // The dark theme is scoped to the brand (class dark), so default text roles resolve light in both modes.\n 'inverse-fixed': { name: 'text-text-default', byline: 'text-text-subtle' },\n} as const;\n\nconst TopBarBrand = React.forwardRef(\n ({ className, mark, name, byline, size = 'sm', tone = 'default', uppercase = false, tracking = 'default', ...props }, ref) => (\n
    \n {mark}\n \n {name}\n \n {byline ? (\n \n {byline}\n \n ) : null}\n
    \n ),\n);\nTopBarBrand.displayName = 'TopBarBrand';\n\nexport interface TopBarPreferencesProps extends Omit, 'children'> {\n // Visible name of the active language, for example \"English\". The language button renders only when set.\n language?: React.ReactNode;\n onLanguageClick?: React.MouseEventHandler;\n // Renders the language switch as a link (crawlable on SEO pages). `onLanguageClick` then fires on the anchor.\n languageHref?: string;\n // Language of the target page, set on the link as hreflang.\n languageHrefLang?: string;\n // Accessible name of the language button. Defaults to the provider text.\n languageLabel?: string;\n // Current theme. Drives the icon (moon in light, sun in dark). The theme button renders only with `onThemeToggle`.\n theme?: 'light' | 'dark';\n onThemeToggle?: () => void;\n // Accessible name of the theme button. Defaults to the provider text.\n themeLabel?: string;\n}\n\n// Language switcher and theme toggle slot of the Guest header (Figma Header navigation Guest, Language and theme).\nconst TopBarPreferences = React.forwardRef(\n (\n {\n className,\n language,\n onLanguageClick,\n languageHref,\n languageHrefLang,\n languageLabel,\n theme = 'light',\n onThemeToggle,\n themeLabel,\n ...props\n },\n ref,\n ) => {\n const l = useLabels();\n return (\n
    \n {language && languageHref ? (\n \n ) : language ? (\n \n \n {language}\n \n ) : null}\n {onThemeToggle ? (\n \n {theme === 'dark' ? : }\n \n ) : null}\n
    \n );\n },\n);\nTopBarPreferences.displayName = 'TopBarPreferences';\n\n/* -------------------------------------------------------------------------------------------------\n * Guest mobile menu: menu button plus a drawer with the primary links\n * -----------------------------------------------------------------------------------------------*/\n\n// A link of the mobile menu: a TopBarNav link plus its own section-jump handler.\nexport interface TopBarMobileMenuLink extends TopBarNavItem {\n // Replaces the default jump of this link, see `onNavigate` of the menu.\n onNavigate?: SheetNavLinkProps['onNavigate'];\n}\n\nexport interface TopBarMobileMenuGroup {\n // Label of the group. The group collapses and expands with the library Accordion.\n group: React.ReactNode;\n // Links inside the group.\n items: TopBarMobileMenuLink[];\n // Starts expanded. Default: expanded when one of the links is the current page or section. Ignored when `collapsible` is false.\n defaultOpen?: boolean;\n // `false` shows the group label as a visible, always expanded section heading instead of an accordion trigger. Default `true`.\n collapsible?: boolean;\n}\n\nexport type TopBarMobileMenuItem = TopBarMobileMenuLink | TopBarMobileMenuGroup;\n\nconst isMenuGroup = (item: TopBarMobileMenuItem): item is TopBarMobileMenuGroup => 'items' in item;\n\nexport interface TopBarMobileMenuProps {\n // Flat links like TopBarNav, optionally mixed with collapsible groups (`{ group, items }`). A `#section` link closes the drawer, waits until the scroll lock is gone, scrolls to the section and focuses it (give the sections `scroll-mt-*` below a fixed header). Any other plain click closes the drawer as well. A modified click or a link with a `target` keeps it open.\n items: TopBarMobileMenuItem[];\n // Replaces the default jump of every link, for example to scroll with a router. Runs once the drawer is completely gone. A link can set its own `onNavigate`.\n onNavigate?: SheetNavLinkProps['onNavigate'];\n open?: boolean;\n defaultOpen?: boolean;\n onOpenChange?: (open: boolean) => void;\n // Deprecated fallback for `triggerLabel`, `title` and `navLabel` (removed after one minor). Use the three specific names.\n label?: string;\n // Accessible name of the menu button. Defaults to `label`, then the provider text \"Menu\" / \"Menü\".\n triggerLabel?: string;\n // Name of the drawer dialog. Defaults to `label`, then the provider text \"Menu\" / \"Menü\".\n title?: string;\n // Name of the navigation landmark. Defaults to `label`, then the provider text \"Navigation\".\n navLabel?: string;\n // Drawer width from the sheet size tokens. Default `sm` (440px, never wider than the viewport minus a scrim edge), so the drawer stays narrow at tablet width.\n size?: React.ComponentProps['size'];\n // Accessible name of the close button of the drawer. Defaults to the provider text \"Close menu\" / \"Menü schließen\".\n closeLabel?: string;\n // Extra content below the links, for example TopBarPreferences or a call to action. Scrolls with the links. A `SheetNavLink` here jumps to a section like the links above.\n children?: React.ReactNode;\n // Sticky footer of the drawer, outside the scrolling list, for actions such as \"Sign in\" that must stay visible while the links scroll.\n footer?: React.ReactNode;\n // Classes of the menu button. Default hides it from the md breakpoint up (pair TopBarNav with `hidden md:block`).\n triggerClassName?: string;\n // Keeps the menu button at every width, so the drawer replaces a desktop dropdown menu. Standard for landing pages, where the burger always opens this drawer.\n alwaysVisible?: boolean;\n // Surface tone of the bar that holds the menu button. The drawer itself always uses the default surface.\n tone?: TopBarMenuButtonProps['tone'];\n side?: 'left' | 'right';\n}\n\nconst TopBarMobileMenu = ({\n items,\n onNavigate: onNavigateAll,\n open: openProp,\n defaultOpen = false,\n onOpenChange,\n label: labelProp,\n triggerLabel,\n title,\n navLabel,\n size = 'sm',\n closeLabel,\n children,\n footer,\n triggerClassName,\n alwaysVisible = false,\n tone,\n side = 'right',\n}: TopBarMobileMenuProps) => {\n const l = useLabels({ closeMenu: closeLabel });\n const menuId = React.useId();\n const trigger = triggerLabel ?? labelProp ?? l.menu;\n const dialogTitle = title ?? labelProp ?? l.menu;\n const navName = navLabel ?? labelProp ?? l.navigation;\n const [uncontrolled, setUncontrolled] = React.useState(defaultOpen);\n const open = openProp ?? uncontrolled;\n const setOpen = (next: boolean) => {\n if (openProp === undefined) setUncontrolled(next);\n onOpenChange?.(next);\n };\n const renderLink = ({ label: itemLabel, href, current, onNavigate, ...rest }: TopBarMobileMenuLink, index: number) => (\n )}\n href={href}\n variant=\"nav\"\n closeOnNavigate\n onNavigate={onNavigate ?? onNavigateAll}\n aria-current={current ? (current === 'location' ? 'location' : 'page') : undefined}\n className={cn(\n 'typography-ui-medium inline-flex h-control-lg items-center rounded-control px-3 no-underline',\n transitionBase,\n 'hover:bg-muted aria-[current=page]:bg-muted aria-[current=location]:bg-muted',\n )}\n >\n {itemLabel}\n \n );\n return (\n <>\n setOpen(!open)} />\n \n \n {dialogTitle}\n {l.navigation}\n \n {items.map((item, index) => {\n if (isMenuGroup(item) && item.collapsible === false) {\n const headingId = `${menuId}-group-${index}`;\n return (\n
    \n

    {item.group}

    \n {/* Same 12px indent as the items of an expanded accordion group. */}\n
    {item.items.map((child, childIndex) => renderLink(child, childIndex))}
    \n
    \n );\n }\n if (isMenuGroup(item)) {\n const openByDefault = item.defaultOpen ?? item.items.some((child) => child.current);\n return (\n \n \n {item.group}\n {item.items.map((child, childIndex) => renderLink(child, childIndex))}\n \n \n );\n }\n return renderLink(item, index);\n })}\n {children ?
    {children}
    : null}\n \n {footer ?
    {footer}
    : null}\n     \n     \n \n );\n};\nTopBarMobileMenu.displayName = 'TopBarMobileMenu';\n\nexport {\n TopBarBrand,\n TopBarMobileMenu,\n TopBarPreferences,\n TimerPill,\n TopBar,\n TopBarBreadcrumb,\n TopBarEnd,\n TopBarEscapeHint,\n TopBarHelpButton,\n TopBarIconButton,\n TopBarMenuButton,\n TopBarNav,\n TopBarStart,\n TopBarSubRow,\n topBarVariants,\n};\n", "type": "registry:ui" } ], "type": "registry:ui" }