@medalsocial/meda/dist/shell/internal/mobile-header.js

Shared Meda UI shell and runtime package.

'use client';
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { ChevronLeft } from 'lucide-react';
import { cn } from '../../lib/utils.js';
import { useMedaShell } from '../shell-provider.js';
import { useShellViewport } from '../use-shell-viewport.js';
/**
 * Mobile-only header.
 *
 * Root mode: workspace name + optional globalActions.
 * Nested mode (when parentLabel is set): ← parentLabel · pageTitle back button.
 *
 * Renders nothing on non-mobile viewports.
 */
export function MobileHeader({ parentLabel, parentTo: _parentTo, title, onBack, globalActions, headerCenter, className, }) {
    const ctx = useMedaShell();
    const band = useShellViewport();
    const isNested = !!parentLabel;
    if (band !== 'mobile')
        return null;
    return (_jsx("header", { "data-testid": "mobile-header", "data-meda-mobile-header": isNested ? 'nested' : 'root', className: cn('relative flex h-[var(--shell-mobile-header-height)] items-center justify-between bg-background px-3', className), children: isNested ? (_jsxs("button", { type: "button", onClick: onBack, "aria-label": "Go back", className: "flex min-h-9 max-w-full items-center gap-1.5 rounded-lg px-2 text-sm font-medium hover:bg-accent", children: [_jsx(ChevronLeft, { size: 18, "aria-hidden": "true" }), _jsx("span", { className: "truncate text-muted-foreground", children: parentLabel }), title && (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-muted-foreground/40", "aria-hidden": "true", children: "\u00B7" }), _jsx("span", { className: "truncate text-foreground", children: title })] }))] })) : (_jsxs(_Fragment, { children: [_jsxs("button", { type: "button", onClick: () => ctx.mobileDrawer.setOpen('menu-drawer'), "aria-label": "Open workspace menu", "aria-haspopup": "menu", className: "-mx-1 flex min-w-0 items-center gap-2.5 rounded-lg px-1 py-1 text-sm font-semibold text-foreground hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: [_jsx("span", { className: "inline-flex size-8 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-muted text-foreground ring-1 ring-border/70", "aria-hidden": "true", children: ctx.workspace.icon }), _jsx("span", { className: "truncate text-[15px] leading-5", children: ctx.workspace.name })] }), headerCenter && (_jsx("div", { className: "-translate-x-1/2 pointer-events-none absolute left-1/2 flex max-w-[55%] items-center justify-center", children: _jsx("div", { className: "pointer-events-auto flex min-w-0 items-center", children: headerCenter }) })), globalActions && (_jsx("div", { className: "flex shrink-0 items-center gap-1.5", children: globalActions }))] })) }));
}