@adecore/ui 0.14.0

package/src/IconButton.tsx

@@ -0,0 +1,84 @@
+import type { ComponentProps, ReactElement, ReactNode } from 'react';
+import clsx from 'clsx';
+import type { LucideIcon } from 'lucide-react';
+import { useRender } from '@base-ui-components/react/use-render';
+import { Icon } from './Icon.tsx';
+import type { Shortcut } from './shortcut.ts';
+import { Spinner } from './Spinner.tsx';
+import { Tooltip, type TooltipSide } from './Tooltip.tsx';
+
+import { ICON_BUTTON_CLASS, ICON_BUTTON_ICON_SIZE, type IconButtonSize } from './icon-button-size.ts';
+
+export type { IconButtonSize };
+
+export interface IconButtonProps extends Omit<ComponentProps<'button'>, 'children'> {
+    /* Left out for a button that draws something other than one Lucide glyph, handed in as children. */
+    icon?: LucideIcon;
+    /* The accessible name, and the tooltip unless `tooltip` says otherwise. */
+    label: string;
+    /* A tooltip that says more than the name (a reason it is disabled), or `false` for none at all. */
+    tooltip?: ReactNode | false;
+    kbd?: Shortcut | string;
+    tooltipSide?: TooltipSide;
+    size?: IconButtonSize;
+    /* A toggle that is on, drawn as a pressed key. Use `aria-pressed` instead where the button is a real toggle. */
+    active?: boolean;
+    /* A `Spinner` in place of the icon, for a step that is running. */
+    busy?: boolean;
+    /** @deprecated Turns the icon; use `busy`, which draws a `Spinner` in its place. */
+    spin?: boolean;
+    /* Classes for the icon rather than the button: a tone of its own, a turn, a fill. The size stays the button's. */
+    iconClassName?: string;
+    /* Drawn after the icon: a count, or a word beside it together with `w-auto`. */
+    children?: ReactNode;
+    /* Another element to be the button, such as a menu trigger: `render={<Menu.Trigger />}`. */
+    render?: useRender.RenderProp;
+}
+
+/* Every button that is an icon and no word. A square, and the one place the icon inside it is sized. */
+export function IconButton({
+    icon,
+    label,
+    tooltip,
+    kbd,
+    tooltipSide,
+    size = 'md',
+    active = false,
+    busy = false,
+    spin = false,
+    iconClassName,
+    render,
+    className,
+    ref,
+    children,
+    ...props
+}: IconButtonProps) {
+    const button = useRender({
+        render: render ?? <button type="button" />,
+        ref,
+        props: {
+            'aria-label': label,
+            'data-active': active ? 'true' : undefined,
+            ...props,
+            className: clsx('icon-btn', ICON_BUTTON_CLASS[size], className),
+            children: (
+                <>
+                    {busy ? (
+                        <Spinner size={ICON_BUTTON_ICON_SIZE[size]} className={iconClassName} />
+                    ) : (
+                        icon !== undefined && <Icon icon={icon} size={ICON_BUTTON_ICON_SIZE[size]} className={clsx(spin && 'animate-spin', iconClassName)} />
+                    )}
+                    {children}
+                </>
+            )
+        }
+    });
+    if (tooltip === false) {
+        return button;
+    }
+    return (
+        <Tooltip label={tooltip ?? label} kbd={kbd} side={tooltipSide}>
+            {button as ReactElement<Record<string, unknown>>}
+        </Tooltip>
+    );
+}

package/src/IconPicker.tsx

@@ -0,0 +1,257 @@
+import { useId, useLayoutEffect, useMemo, useRef, useState, type KeyboardEvent, type Ref } from 'react';
+import clsx from 'clsx';
+import { Ban, Search, X } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { EmptyState } from './EmptyState.tsx';
+import { formatNumber } from './format/number.ts';
+import { Icon } from './Icon.tsx';
+import { IconButton } from './IconButton.tsx';
+import { cellForKey, escapeClearsSearch, filterSections, isGrouped, sectionsOf, tabStopOf, type IconPickerIcons } from './icon-picker.ts';
+import { SectionLabel } from './SectionLabel.tsx';
+import { Tooltip } from './Tooltip.tsx';
+
+export type { IconPickerGroup } from './icon-picker.ts';
+
+/* A row of cells is 28 high with a gap of 4. Under a heading of 28 the last row keeps 8 below it; without headings the grid has 6 above as well. */
+const ROW_HEIGHT = 32;
+const HEADED_EXTRA = 32;
+const BARE_EXTRA = 10;
+
+export interface IconPickerProps {
+    /* Every icon on offer by its name, in the order of the grid, or in groups under a heading each. The name is also its tooltip. */
+    icons: IconPickerIcons;
+    /* The name of the icon as it stands, or null for none. */
+    value: string | null;
+    onValueChange(name: string): void;
+    /* More words a search finds an icon by, beside its name and its group's label, by icon name. */
+    keywords?: Readonly<Record<string, readonly string[]>>;
+    /* A search field on top of the grid, in one frame with it. On by default for groups, off for a flat set. */
+    searchable?: boolean;
+    /* The grid as a scroll area this many rows high, with room for a heading. Without it the grid is as tall as its icons. */
+    rows?: number;
+    disabled?: boolean;
+    /* Clearing the icon. A surface that falls back to a default of its own offers that instead. */
+    onClear?: () => void;
+    /* The label above the grid. A surface that also takes an image calls this grid something else, or the two read as one list. */
+    label?: string;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+
+/* A heading is stuck while its group runs past the top of the scroll area, and only then draws a line under it. */
+const markStuckHeadings = (area: HTMLElement): void => {
+    const top = area.scrollTop;
+    for (const heading of area.querySelectorAll<HTMLElement>('[data-icon-heading]')) {
+        const group = heading.parentElement;
+        const stuck = group !== null && top > 0 && group.offsetTop <= top && group.offsetTop + group.offsetHeight > top;
+        heading.toggleAttribute('data-stuck', stuck);
+    }
+};
+
+/*
+ * The mark a thing wears, one of a set of Lucide icons, as a grid under a label. With a search or a
+ * height in rows, the search and the grid share one frame. The grid is one tab stop: arrows move the
+ * focus and only Enter, Space or a click chooses, since a caller may save every choice at once.
+ */
+export function IconPicker({
+    icons,
+    value,
+    onValueChange,
+    keywords,
+    searchable = isGrouped(icons),
+    rows,
+    disabled = false,
+    onClear,
+    label,
+    className,
+    ref
+}: IconPickerProps) {
+    const { t } = useTranslation('ui');
+    const id = useId();
+    const area = useRef<HTMLDivElement>(null);
+    const input = useRef<HTMLInputElement>(null);
+    const [query, setQuery] = useState('');
+    const [focused, setFocused] = useState<string | null>(null);
+    const headed = isGrouped(icons);
+    const framed = searchable || rows !== undefined;
+    const sections = useMemo(() => sectionsOf(icons), [icons]);
+    const shown = useMemo(() => filterSections(sections, query, keywords), [sections, query, keywords]);
+    const tabStop = tabStopOf(
+        shown.flatMap((section) => section.icons.map(([name]) => name)),
+        focused,
+        value
+    );
+    const name = label ?? t('iconPicker.label');
+
+    // Opens with the chosen icon in the middle of the area: a person changing an icon often starts from the current one.
+    useLayoutEffect(() => {
+        const element = area.current;
+        const chosen = element?.querySelector<HTMLElement>('[aria-checked="true"]');
+        if (!element || !chosen || element.scrollHeight <= element.clientHeight) {
+            return;
+        }
+        const heading = element.querySelector<HTMLElement>('[data-icon-heading]')?.offsetHeight ?? 0;
+        element.scrollTop = Math.round(chosen.offsetTop - heading - (element.clientHeight - heading - chosen.offsetHeight) / 2);
+    }, []);
+
+    const search = (next: string): void => {
+        setQuery(next);
+        if (area.current) {
+            area.current.scrollTop = 0;
+        }
+    };
+
+    const moveFocus = (event: KeyboardEvent<HTMLDivElement>): void => {
+        if (event.metaKey || event.ctrlKey || event.altKey) {
+            return;
+        }
+        const cells = [...event.currentTarget.querySelectorAll<HTMLElement>('[role="radio"]')];
+        const from = cells.indexOf(event.target as HTMLElement);
+        if (from === -1) {
+            return;
+        }
+        const to = cellForKey(
+            event.key,
+            cells.map((cell) => cell.getBoundingClientRect()),
+            from
+        );
+        if (to === null) {
+            return;
+        }
+        event.preventDefault();
+        cells[to]?.focus();
+    };
+
+    const grid = (
+        <div
+            ref={area}
+            id={`${id}-grid`}
+            role="radiogroup"
+            aria-label={name}
+            className={clsx(framed && 'relative overflow-y-auto overscroll-contain', framed && (headed ? 'scroll-pt-7' : 'px-1.5 pt-1.5 pb-2'))}
+            style={rows === undefined ? undefined : { height: rows * ROW_HEIGHT + (headed ? HEADED_EXTRA : BARE_EXTRA) }}
+            onScroll={(event) => markStuckHeadings(event.currentTarget)}
+            onKeyDown={moveFocus}
+        >
+            {shown.length === 0 && query.trim() !== '' ? (
+                <EmptyState className="h-full">{t('iconPicker.noMatch', { query: query.trim() })}</EmptyState>
+            ) : (
+                shown.map((section, index) => {
+                    const cells = (
+                        <div
+                            key={section.id}
+                            className={clsx('grid grid-cols-[repeat(auto-fill,minmax(28px,1fr))] gap-1', framed && section.label !== null && 'px-1.5 pb-2')}
+                        >
+                            {section.icons.map(([icon, glyph]) => (
+                                <Tooltip key={icon} label={icon} name>
+                                    <button
+                                        type="button"
+                                        role="radio"
+                                        aria-checked={value === icon}
+                                        tabIndex={icon === tabStop ? 0 : -1}
+                                        disabled={disabled}
+                                        className={clsx(
+                                            'flex h-7 items-center justify-center rounded-md hover:bg-surface-hover disabled:opacity-50',
+                                            value === icon ? 'bg-surface-active text-text' : 'text-text-muted'
+                                        )}
+                                        onFocus={() => setFocused(icon)}
+                                        onClick={() => onValueChange(icon)}
+                                    >
+                                        <Icon icon={glyph} size={16} />
+                                    </button>
+                                </Tooltip>
+                            ))}
+                        </div>
+                    );
+                    if (section.label === null) {
+                        return cells;
+                    }
+                    const headingId = `${id}-group-${index}`;
+                    return (
+                        <div key={section.id} role="group" aria-labelledby={headingId}>
+                            <SectionLabel
+                                render={<div />}
+                                data-icon-heading=""
+                                className={clsx(
+                                    'flex h-7 items-center gap-2',
+                                    framed ? 'sticky top-0 z-10 bg-surface px-2.5 data-stuck:shadow-[0_1px_0_var(--border)]' : 'mt-1'
+                                )}
+                            >
+                                <span id={headingId} className="truncate">
+                                    {section.label}
+                                </span>
+                                <span className="ms-auto shrink-0">{formatNumber(section.icons.length)}</span>
+                            </SectionLabel>
+                            {cells}
+                        </div>
+                    );
+                })
+            )}
+        </div>
+    );
+
+    return (
+        <div ref={ref} className={className}>
+            <SectionLabel render={<div />} className="mb-1.5 flex items-center gap-2">
+                {name}
+                {onClear && (
+                    <>
+                        <span className="grow" />
+                        <IconButton
+                            icon={Ban}
+                            size="sm"
+                            label={t('iconPicker.none')}
+                            className="-my-1"
+                            disabled={disabled || value === null}
+                            onClick={onClear}
+                        />
+                    </>
+                )}
+            </SectionLabel>
+            {framed ? (
+                // The frame wears the field's outline while its search has the focus; the search draws none of its own.
+                <div className="field h-auto overflow-hidden p-0 has-[input:focus-visible]:outline-2 has-[input:focus-visible]:-outline-offset-1 has-[input:focus-visible]:outline-accent">
+                    {searchable && (
+                        <div className="flex h-8 items-center gap-2 border-b border-border pr-1 pl-2.5">
+                            <Icon icon={Search} size={14} className="shrink-0 text-text-faint" />
+                            <input
+                                ref={input}
+                                type="text"
+                                value={query}
+                                placeholder={t('iconPicker.search')}
+                                aria-label={t('iconPicker.search')}
+                                aria-controls={`${id}-grid`}
+                                spellCheck={false}
+                                autoComplete="off"
+                                disabled={disabled}
+                                className="h-full min-w-0 flex-1 bg-transparent outline-none placeholder:text-text-faint"
+                                onChange={(event) => search(event.target.value)}
+                                onKeyDown={(event) => {
+                                    if (escapeClearsSearch(event.key, query)) {
+                                        event.stopPropagation();
+                                        search('');
+                                    }
+                                }}
+                            />
+                            {query && (
+                                <IconButton
+                                    icon={X}
+                                    size="sm"
+                                    label={t('iconPicker.clear')}
+                                    tooltip={false}
+                                    onClick={() => {
+                                        search('');
+                                        input.current?.focus();
+                                    }}
+                                />
+                            )}
+                        </div>
+                    )}
+                    {grid}
+                </div>
+            ) : (
+                grid
+            )}
+        </div>
+    );
+}

package/src/Input.tsx

@@ -0,0 +1,78 @@
+import type { ComponentProps } from 'react';
+import type { LucideIcon } from 'lucide-react';
+import clsx from 'clsx';
+import { useFieldControl } from './field-context.ts';
+import { Icon } from './Icon.tsx';
+
+export interface InputProps extends Omit<ComponentProps<'input'>, 'size'> {
+    /* `sm` is the height of a small button: a row of tools, or a name typed in place of the label it renames. */
+    size?: 'md' | 'sm';
+    /* A branch, a path or anything else read back letter by letter. */
+    mono?: boolean;
+    /* Drawn in front of the text, such as a magnifier on a search field. `className` then goes to the box around the icon and the input; `ref` stays on the input. */
+    icon?: LucideIcon;
+}
+
+/* The one text input: one border and one focus ring at the one height or the compact one. */
+export function Input({ size = 'md', mono = false, icon, className, id, ...props }: InputProps) {
+    const field = useFieldControl();
+    const small = size === 'sm';
+    const control = {
+        id: id ?? field?.id,
+        'aria-describedby': field?.describedBy,
+        'aria-invalid': field?.invalid || undefined,
+        ...props
+    };
+
+    if (icon === undefined) {
+        return <input {...control} className={clsx('field', small && 'field-sm', mono && 'font-mono text-code', className)} />;
+    }
+
+    // The input fills the whole box and the icon lets clicks through, so a click on the icon still lands in the input.
+    return (
+        <span className={clsx('field relative flex p-0', small && 'field-sm', className)}>
+            <Icon
+                icon={icon}
+                size={small ? 12 : 14}
+                className={clsx('pointer-events-none absolute top-1/2 -translate-y-1/2 text-text-faint', small ? 'left-2' : 'left-2.5')}
+            />
+            <input
+                {...control}
+                className={clsx(
+                    'min-w-0 flex-1 bg-transparent outline-none placeholder:text-text-faint',
+                    small ? 'pr-2 pl-7' : 'pr-2.5 pl-8',
+                    mono && 'font-mono text-code'
+                )}
+            />
+        </span>
+    );
+}
+
+export interface TextAreaProps extends ComponentProps<'textarea'> {
+    /* `sm` is the type and the padding of a small input: a commit message or a note in a narrow panel. */
+    size?: 'md' | 'sm';
+    /* `vertical` gives it a handle to drag it taller, for a draft of a few sentences. */
+    resize?: 'none' | 'vertical';
+    /* A command or anything else read back letter by letter. */
+    mono?: boolean;
+}
+
+/* A field of a few lines: a commit message, the body of a pull request, a note. At least 64px tall; `rows` makes it taller. */
+export function TextArea({ size = 'md', resize = 'none', mono = false, className, id, ...props }: TextAreaProps) {
+    const field = useFieldControl();
+    return (
+        <textarea
+            id={id ?? field?.id}
+            aria-describedby={field?.describedBy}
+            aria-invalid={field?.invalid || undefined}
+            {...props}
+            className={clsx(
+                'field h-auto min-h-16 py-1.5',
+                size === 'sm' && 'field-sm',
+                resize === 'vertical' ? 'resize-y' : 'resize-none',
+                mono && 'font-mono text-code',
+                className
+            )}
+        />
+    );
+}

package/src/Kbd.tsx

@@ -0,0 +1,67 @@
+import type { ReactNode, Ref } from 'react';
+import clsx from 'clsx';
+import { isApplePlatform } from './platform.ts';
+import { formatShortcut, shortcutParts, type Shortcut } from './shortcut.ts';
+
+/* A shortcut chip on the surface it sits on: in a tooltip, in a palette's footer, in a line of help. */
+const INLINE_KBD = 'rounded-sm bg-surface-sunken px-[5px] py-px font-sans text-xs/[inherit] text-text-muted';
+
+/* One key, drawn as a cap. A settings page prints a shortcut key by key, so a gesture can stand beside it. */
+const KEY_CAP =
+    'inline-grid h-6 min-w-6 place-items-center rounded-md border border-b-2 border-border-strong bg-surface-hover bg-clip-padding px-1.5 font-sans text-xs text-text';
+
+export interface KbdProps {
+    /* Printed the way this platform writes it. Without one, the children are printed as they are (`↑`, `Esc`). */
+    shortcut?: Shortcut;
+    children?: ReactNode;
+    /*
+     * Where the shortcut is printed. In a menu row the `.menu-item kbd` rule dresses it, as the
+     * quiet hint at the end of the row; anywhere else it is a chip on the surface it sits on.
+     */
+    variant?: 'menu' | 'inline';
+    className?: string;
+    ref?: Ref<HTMLElement>;
+}
+
+/* A shortcut as this platform prints it: `⌘K` on macOS, `Ctrl+K` elsewhere. */
+export function Kbd({ shortcut, children, variant = 'menu', className, ref }: KbdProps) {
+    return (
+        <kbd ref={ref} className={clsx(variant === 'inline' && INLINE_KBD, className)}>
+            {shortcut !== undefined ? formatShortcut(shortcut, isApplePlatform()) : children}
+        </kbd>
+    );
+}
+
+export interface KeyCapProps {
+    children: ReactNode;
+    className?: string;
+    ref?: Ref<HTMLElement>;
+}
+
+export function KeyCap({ children, className, ref }: KeyCapProps) {
+    return (
+        <kbd ref={ref} className={clsx(KEY_CAP, className)}>
+            {children}
+        </kbd>
+    );
+}
+
+export interface KeysProps {
+    shortcut: Shortcut;
+    /* The pointer gesture the keys go with, such as "drag", as one more cap. */
+    then?: string;
+    className?: string;
+    ref?: Ref<HTMLSpanElement>;
+}
+
+/* A shortcut as one cap per key, `⌘` and `K`, plus the pointer gesture it goes with. */
+export function Keys({ shortcut, then, className, ref }: KeysProps) {
+    const parts = [...shortcutParts(shortcut, isApplePlatform()), ...(then ? [then] : [])];
+    return (
+        <span ref={ref} className={clsx('flex items-center gap-1', className)}>
+            {parts.map((part, index) => (
+                <KeyCap key={`${part}-${index}`}>{part}</KeyCap>
+            ))}
+        </span>
+    );
+}

package/src/ListRow.tsx

@@ -0,0 +1,26 @@
+import clsx from 'clsx';
+import { useRender } from '@base-ui-components/react/use-render';
+
+const VARIANT = {
+    /* A row of a list that reads as a table and fills the width of its panel: commits, processes,
+       branches. Square, so the rows stack into one block. It carries no padding; the caller pads 12px
+       beside text and 4px beside a button. */
+    flat: 'flex h-7 items-center',
+    /* A row of a list a person finds their way through: a sidebar, devices, recent files. Inset from
+       the edge and rounded, so each row reads as a place of its own. */
+    inset: 'flex h-8 items-center rounded-md px-2'
+} as const;
+
+export type ListRowProps = useRender.ComponentProps<'div'> & {
+    variant: keyof typeof VARIANT;
+};
+
+/* The height and the shape of one row of a list. What it does (a button, a link, a menu trigger) comes from `render`. */
+export function ListRow({ variant, render, className, ref, ...props }: ListRowProps) {
+    return useRender({
+        render,
+        ref,
+        defaultTagName: 'div',
+        props: { ...props, className: clsx(VARIANT[variant], className) }
+    });
+}

package/src/Meter.tsx

@@ -0,0 +1,41 @@
+import type { Ref } from 'react';
+import clsx from 'clsx';
+
+export interface MeterProps {
+    /* In the unit of `min` and `max`, held to them. Null draws an empty track, for a level not measured yet. */
+    value: number | null;
+    min?: number;
+    max?: number;
+    /* Values drawn as lines across the track, such as a target or a limit. */
+    marks?: readonly number[];
+    label: string;
+    /* The value in words for a screen reader, such as "-18.2 LUFS". Left out, it reads the number. */
+    valueText?: string;
+    /* Its width, which it fills. */
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+
+/* A level against a scale: how full it is, and where a target or a limit sits on the same scale. */
+export function Meter({ value, min = 0, max = 100, marks = [], label, valueText, className, ref }: MeterProps) {
+    const fractionOf = (level: number): number => (max > min ? Math.min(1, Math.max(0, (level - min) / (max - min))) : 0);
+
+    return (
+        <div
+            ref={ref}
+            role="meter"
+            aria-label={label}
+            aria-valuemin={min}
+            aria-valuemax={max}
+            aria-valuenow={value === null ? min : Math.min(max, Math.max(min, value))}
+            aria-valuetext={valueText}
+            className={clsx('relative h-1.5 rounded-full bg-surface-sunken', className)}
+        >
+            {/* No transition on the width: a level that updates many times a second would lag and blur. */}
+            {value !== null && <span className="absolute inset-y-0 left-0 rounded-full bg-accent" style={{ width: `${fractionOf(value) * 100}%` }} />}
+            {marks.map((mark) => (
+                <span key={mark} className="absolute -inset-y-0.5 w-px bg-text-muted" style={{ left: `${fractionOf(mark) * 100}%` }} />
+            ))}
+        </div>
+    );
+}

package/src/PanelEmpty.tsx

@@ -0,0 +1,37 @@
+import type { ReactNode, Ref } from 'react';
+import type { LucideIcon } from 'lucide-react';
+import clsx from 'clsx';
+import { EmptyState } from './EmptyState.tsx';
+
+export interface PanelEmptyProps {
+    /* The panel's own header, kept above the sentence so a person can still act while nothing is listed. */
+    header?: ReactNode;
+    icon?: LucideIcon;
+    /* A `Spinner` in place of the icon, for a panel that is still loading. */
+    busy?: boolean;
+    /** @deprecated Turns the icon; use `busy`, which draws a `Spinner` in its place. */
+    spin?: boolean;
+    action?: ReactNode;
+    /* The sunken ground, for a box that has none behind it yet (a card on a canvas) rather than a panel that does. */
+    sunken?: boolean;
+    /*
+     * A panel is one track of a flex column and takes what is left of it; a card is a box with a
+     * height of its own, and `grow` means nothing to the block that lays it out.
+     */
+    fill?: 'grow' | 'full';
+    children: ReactNode;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+
+/* What a panel or a card shows while it holds nothing: a sentence, one icon, at most one button. */
+export function PanelEmpty({ header, icon, busy = false, spin = false, action, sunken = false, fill = 'grow', children, className, ref }: PanelEmptyProps) {
+    return (
+        <div ref={ref} className={clsx('grid min-h-0 place-items-center', fill === 'full' ? 'h-full' : 'grow', sunken && 'bg-surface-sunken', className)}>
+            {header}
+            <EmptyState icon={icon} busy={busy} spin={spin} action={action}>
+                {children}
+            </EmptyState>
+        </div>
+    );
+}

package/src/PanelHeader.tsx

@@ -0,0 +1,31 @@
+import type { ReactNode } from 'react';
+import clsx from 'clsx';
+import { useRender } from '@base-ui-components/react/use-render';
+import { SectionLabel } from './SectionLabel.tsx';
+
+export type PanelHeaderProps = useRender.ComponentProps<'header'> & {
+    /* The panel's name, as a section label first on the bar. Left out when the caller lays out the name itself. */
+    title?: ReactNode;
+};
+
+/*
+ * The bar across the top of a side panel, as tall as a 48px toolbar beside it: the panel's name,
+ * its own controls, and a close button last.
+ */
+export function PanelHeader({ title, render, className, ref, children, ...props }: PanelHeaderProps) {
+    return useRender({
+        render,
+        ref,
+        defaultTagName: 'header',
+        props: {
+            ...props,
+            className: clsx('flex h-12 shrink-0 items-center gap-2 border-b border-border pr-2 pl-3', className),
+            children: (
+                <>
+                    {title !== undefined && <SectionLabel className="shrink-0">{title}</SectionLabel>}
+                    {children}
+                </>
+            )
+        }
+    });
+}