@lar-works/design-system 0.0.0-stage → 0.1.0

package/src/actions/Button.tsx

@@ -0,0 +1,68 @@
+import { Button as NinnaButton, type ButtonProps as NinnaButtonProps } from '@ninna-ui/primitives';
+import { forwardRef } from 'react';
+
+import { tabbable } from '../foundations/KeyboardFocus';
+
+/** T3 Code's button (coss ui): an 8px-radius control, 36px on touch and 32px with a pointer, that dips to
+ *  97% while pressed. Every recipe sets its own colours, so ninna-ui only supplies behaviour. */
+const base =
+    'h-9 gap-2 rounded-md border px-[11px] text-sm font-medium whitespace-nowrap transition-[background-color,box-shadow,scale,color] duration-150 active:scale-[0.97] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary focus-visible:ring-offset-0 disabled:opacity-64 sm:h-8 [&_[data-slot=icon]>svg]:size-4';
+
+const outline =
+    'border-base-400/90 bg-base-100 text-base-content shadow-xs/5 hover:bg-base-200/70 dark:border-base-400 dark:bg-base-400/30 dark:hover:bg-base-400/60 [&_[data-slot=icon]]:text-base-700';
+const ghost =
+    'border-transparent text-base-content hover:bg-base-200 data-[state=open]:bg-base-200 [&_[data-slot=icon]]:text-base-700';
+
+const recipes = {
+    primary:
+        'border-primary bg-primary text-primary-content shadow-xs shadow-primary/24 inset-shadow-[0_1px_rgb(255_255_255/16%)] hover:bg-primary/90 active:shadow-none active:inset-shadow-[0_1px_rgb(0_0_0/8%)]',
+    secondary: outline,
+    quiet: ghost,
+    row: `${ghost} h-auto min-h-8 min-w-0 max-w-full justify-start whitespace-normal px-0 py-1 text-left text-xs font-normal text-base-700 hover:bg-transparent hover:text-base-content sm:h-auto active:scale-100`,
+    subtle: 'border-transparent bg-base-200 text-base-content hover:bg-base-300/70 dark:bg-base-300 dark:hover:bg-base-400',
+    destructive:
+        'border-danger bg-danger text-white shadow-xs shadow-danger/24 inset-shadow-[0_1px_rgb(255_255_255/16%)] hover:bg-danger/90 active:shadow-none',
+    'destructive-quiet':
+        'border-transparent text-(--lar-danger-text) hover:bg-danger/8 dark:hover:bg-danger/16 [&_[data-slot=icon]]:text-current',
+    choice: outline,
+    context: `${ghost} h-11 min-w-0 gap-1.5 px-2 lg:max-w-48 lg:pointer-fine:h-8`,
+    summary: `${ghost} h-7 min-w-0 px-1.5 sm:h-7`,
+    avatar: 'size-7 rounded-full border-transparent p-0 hover:bg-transparent sm:h-7 [&>*]:size-7',
+    status: 'h-4 min-w-0 max-w-full justify-start gap-1.5 rounded-sm border-transparent px-0 text-xs font-normal text-base-700 hover:bg-transparent hover:text-base-content sm:h-4 active:scale-100 [&>svg]:size-3 [&>svg]:shrink-0',
+} as const;
+
+const selectedChoice =
+    'border-primary/60 bg-primary/8 text-base-content ring-1 ring-inset ring-primary/40 hover:bg-primary/12 dark:border-primary/60 dark:bg-primary/16 dark:hover:bg-primary/20';
+
+export type ButtonProps = Omit<NinnaButtonProps, 'color' | 'radius' | 'size' | 'variant'> & {
+    variant?: keyof typeof recipes;
+    selected?: boolean;
+};
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+    ({ variant = 'primary', selected, className = '', children, leftIcon, rightIcon, ...props }, ref) => {
+        const context = variant === 'context';
+
+        return (
+            <NinnaButton
+                ref={ref}
+                {...tabbable}
+                {...props}
+                size="sm"
+                radius="lg"
+                variant="ghost"
+                color="neutral"
+                aria-pressed={selected ?? props['aria-pressed']}
+                className={`${base} ${variant === 'choice' && selected ? selectedChoice : recipes[variant]} ${selected && variant !== 'choice' ? 'bg-base-200' : ''} ${className}`}
+                leftIcon={
+                    context ? <span className="text-(--color-header-icon) [&>svg]:size-4">{leftIcon}</span> : leftIcon
+                }
+                rightIcon={context ? <span className="text-base-700 [&>svg]:size-3.5">{rightIcon}</span> : rightIcon}
+            >
+                {context ? <span className="truncate">{children}</span> : children}
+            </NinnaButton>
+        );
+    },
+);
+
+Button.displayName = 'Button';

package/src/actions/ButtonLink.tsx

@@ -0,0 +1,75 @@
+import { ArrowRightIcon } from 'lucide-react';
+import type { AnchorHTMLAttributes, ReactNode } from 'react';
+
+import { tabbable } from '../foundations/KeyboardFocus';
+
+/** The marketing pages' calls to action: the Button recipes at a roomier 44px, as links. */
+const recipes = {
+    primary:
+        'border-primary bg-primary text-primary-content shadow-sm shadow-primary/30 inset-shadow-[0_1px_rgb(255_255_255/18%)] hover:bg-[color-mix(in_srgb,var(--color-primary)_88%,white)] active:shadow-none',
+    secondary:
+        'border-base-400/90 bg-base-100 text-base-content shadow-xs/5 hover:bg-base-200/70 dark:border-base-400 dark:bg-base-300/40 dark:hover:bg-base-400/50',
+    inverse:
+        'border-transparent bg-base-content text-base-50 shadow-sm hover:bg-[color-mix(in_srgb,var(--color-base-content)_86%,transparent)]',
+    quiet: 'border-transparent text-base-content hover:text-primary dark:hover:text-[color-mix(in_srgb,var(--color-primary)_45%,white)]',
+} as const;
+
+export interface ButtonLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'className' | 'style'> {
+    href: string;
+    variant?: keyof typeof recipes;
+    size?: 'md' | 'lg';
+    icon?: ReactNode;
+    /** Shows an arrow that nudges forward on hover. */
+    arrow?: boolean;
+    external?: boolean;
+    onNavigate?: (href: string) => void;
+}
+
+export function ButtonLink({
+    variant = 'primary',
+    size = 'lg',
+    icon,
+    arrow,
+    external,
+    onNavigate,
+    onClick,
+    children,
+    href,
+    ...props
+}: ButtonLinkProps) {
+    return (
+        <a
+            {...tabbable}
+            {...props}
+            href={href}
+            {...(external ? { target: '_blank', rel: 'noreferrer' } : {})}
+            onClick={(event) => {
+                onClick?.(event);
+
+                if (
+                    !onNavigate ||
+                    external ||
+                    event.defaultPrevented ||
+                    event.button !== 0 ||
+                    event.metaKey ||
+                    event.ctrlKey ||
+                    event.shiftKey ||
+                    event.altKey
+                )
+                    return;
+
+                event.preventDefault();
+                onNavigate(href);
+            }}
+            className={`group/button focus-visible:outline-primary inline-flex shrink-0 items-center justify-center gap-2 rounded-[0.625rem] border font-medium whitespace-nowrap transition-[background-color,box-shadow,scale,color] duration-150 select-none focus-visible:outline-2 focus-visible:outline-offset-2 active:scale-[0.97] [&_svg]:size-4 [&_svg]:shrink-0 ${size === 'lg' ? 'h-11 text-[15px]' : 'h-9 text-sm'} ${variant === 'quiet' ? 'px-0' : size === 'lg' ? 'px-[1.125rem]' : 'px-3.5'} ${recipes[variant]}`}
+        >
+            {icon}
+            {children}
+            {arrow ? (
+                <span className="-mr-0.5 inline-flex transition-transform duration-200 group-hover/button:translate-x-0.5">
+                    <ArrowRightIcon />
+                </span>
+            ) : null}
+        </a>
+    );
+}

package/src/actions/IconButton.tsx

@@ -0,0 +1,55 @@
+import { IconButton as NinnaIconButton, type IconButtonProps as NinnaIconButtonProps } from '@ninna-ui/primitives';
+import { forwardRef } from 'react';
+
+import { StatusIndicator, type StatusTone } from '../feedback/StatusIndicator';
+import { tabbable } from '../foundations/KeyboardFocus';
+
+export type IconButtonProps = Omit<NinnaIconButtonProps, 'color' | 'radius' | 'size' | 'variant'> & {
+    variant?: 'header' | 'quiet' | 'title-bar';
+    tone?: StatusTone | 'accent';
+    notification?: string;
+};
+
+export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
+    ({ variant = 'quiet', tone = 'neutral', className = '', notification, icon, ...props }, ref) => (
+        <NinnaIconButton
+            ref={ref}
+            {...tabbable}
+            aria-description={notification}
+            {...props}
+            icon={
+                notification ? (
+                    <span className="relative block size-full">
+                        {icon}
+                        <StatusIndicator
+                            tone="warning"
+                            size="sm"
+                            className="ring-base-100 absolute -top-0.5 -right-0.5 ring-2"
+                        />
+                    </span>
+                ) : (
+                    icon
+                )
+            }
+            variant="ghost"
+            color={tone === 'accent' ? 'primary' : tone}
+            size="sm"
+            radius="lg"
+            className={
+                // T3 Code's ghost icon button: muted until hovered, on an accent fill.
+                (variant === 'header'
+                    ? 'text-base-700 hover:bg-base-200 hover:text-base-content data-[state=open]:bg-base-200 data-[state=open]:text-base-content size-8 rounded-md p-0 before:-inset-1 **:data-[slot=icon]:size-[18px] '
+                    : variant === 'title-bar'
+                      ? // The title bar's 28px row of controls, with 16px icons.
+                        'text-base-700 hover:bg-base-200 hover:text-base-content data-[state=open]:bg-base-200 data-[state=open]:text-base-content size-7 rounded-md p-0 before:-inset-1.5 **:data-[slot=icon]:size-4 '
+                      : tone === 'neutral'
+                        ? 'text-base-700 hover:bg-base-200 hover:text-base-content data-[state=open]:bg-base-200 rounded-md '
+                        : 'rounded-md ') +
+                'transition-[background-color,color,scale] active:scale-[0.94] [&_svg]:size-full ' +
+                className
+            }
+        />
+    ),
+);
+
+IconButton.displayName = 'IconButton';

package/src/actions/ThemeSwitch.tsx

@@ -0,0 +1,46 @@
+import { MonitorIcon, MoonIcon, SunIcon } from 'lucide-react';
+
+import { useDesignSystemLabels } from '../foundations/DesignSystemProvider';
+import { tabbable } from '../foundations/KeyboardFocus';
+import type { ThemePreference } from '../foundations/Theme';
+
+const choices = [
+    { value: 'system', Icon: MonitorIcon },
+    { value: 'light', Icon: SunIcon },
+    { value: 'dark', Icon: MoonIcon },
+] as const;
+
+/** Three small segments for the colour scheme: follow the system, light or dark. */
+export function ThemeSwitch({
+    value,
+    onChange,
+}: {
+    value: ThemePreference;
+    onChange: (value: ThemePreference) => void;
+}) {
+    const labels = useDesignSystemLabels().theme;
+
+    return (
+        <div
+            role="radiogroup"
+            aria-label={labels.label}
+            className="border-base-300 bg-base-100/70 dark:bg-base-200/60 inline-flex h-8 items-center gap-0.5 rounded-full border p-0.5"
+        >
+            {choices.map(({ value: choice, Icon }) => (
+                <button
+                    key={choice}
+                    {...tabbable}
+                    type="button"
+                    role="radio"
+                    aria-checked={value === choice}
+                    aria-label={labels[choice]}
+                    title={labels[choice]}
+                    onClick={() => onChange(choice)}
+                    className="text-base-600 hover:text-base-content aria-checked:bg-base-200 aria-checked:text-base-content focus-visible:outline-primary dark:aria-checked:bg-base-400/70 inline-flex size-7 items-center justify-center rounded-full transition-colors focus-visible:outline-2 aria-checked:shadow-xs/10 [&_svg]:size-[15px]"
+                >
+                    <Icon />
+                </button>
+            ))}
+        </div>
+    );
+}

package/src/actions/index.ts

@@ -0,0 +1,4 @@
+export { Button, type ButtonProps } from './Button';
+export { IconButton, type IconButtonProps } from './IconButton';
+export { ButtonLink, type ButtonLinkProps } from './ButtonLink';
+export { ThemeSwitch } from './ThemeSwitch';

package/src/collections/CollectionSectionHeader.tsx

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+
+import { Text } from '../typography/Typography';
+
+export function CollectionSectionHeader({ children }: { children: ReactNode }) {
+    return (
+        <div className="border-base-300 bg-base-100/65 flex h-10 items-center border-b px-3" role="presentation">
+            <Text as="span" className="shrink-0 tracking-[0.12em]" variant="overline">
+                {children}
+            </Text>
+        </div>
+    );
+}

package/src/collections/CollectionState.tsx

@@ -0,0 +1,76 @@
+import type { ReactNode } from 'react';
+
+import { Button } from '../actions/Button';
+import { Stack } from '../layout/Flow';
+import { Heading, Text } from '../typography/Typography';
+
+const page = { layout: 'max-w-lg px-6 py-16', icon: '[&>svg]:size-8', space: 'group' } as const;
+const variants = {
+    page,
+    /** A placeholder outlining the content that will fill the region. */
+    framed: page,
+    /** Fits inside a panel or popover instead of owning a page region. */
+    compact: { layout: 'max-w-64 px-3 py-6', icon: '[&>svg]:size-6', space: 'related' },
+    /** A quiet empty state with the same surface as dashboard content. */
+    panel: { layout: 'max-w-md px-4 py-5', icon: '[&>svg]:size-6', space: 'related' },
+} as const;
+
+interface CollectionStateProps {
+    actionLabel?: string;
+    description: string;
+    icon?: ReactNode;
+    onAction?: () => void;
+    title: string;
+    variant?: keyof typeof variants;
+}
+
+export function CollectionState({
+    actionLabel,
+    description,
+    icon,
+    onAction,
+    title,
+    variant = 'page',
+}: CollectionStateProps) {
+    const compact = variant === 'compact' || variant === 'panel';
+    const state = (
+        <Stack
+            align="center"
+            space={variants[variant].space}
+            className={`mx-auto text-center ${variants[variant].layout}`}
+        >
+            {icon ? <span className={`text-base-500 ${variants[variant].icon}`}>{icon}</span> : null}
+            <Stack space="tight">
+                {compact ? (
+                    <Text variant="label">{title}</Text>
+                ) : (
+                    <Heading as="h2" variant="subsection">
+                        {title}
+                    </Heading>
+                )}
+                <Text variant={compact ? 'caption' : 'description'} tone="muted">
+                    {description}
+                </Text>
+            </Stack>
+            {actionLabel && onAction ? (
+                <Button type="button" onClick={onAction} variant="secondary">
+                    {actionLabel}
+                </Button>
+            ) : null}
+        </Stack>
+    );
+
+    return variant === 'framed' || variant === 'panel' ? (
+        <div
+            className={
+                variant === 'panel'
+                    ? 'border-base-300 bg-base-100 rounded-xl border'
+                    : 'border-base-300 rounded-xl border border-dashed'
+            }
+        >
+            {state}
+        </div>
+    ) : (
+        state
+    );
+}

package/src/collections/CollectionTokens.ts

@@ -0,0 +1,12 @@
+export const columnWidths = {
+    primary: 'minmax(0, 2.5fr)',
+    secondary: 'minmax(0, 1.5fr)',
+    value: 'minmax(0, 1fr)',
+    compact: '4rem',
+    numeric: '5rem',
+    index: '2.5rem',
+    action: '1.5rem',
+    wide: '14rem',
+} as const;
+
+export const columnBreakpoints = { primary: 0, secondary: 640, tertiary: 900 } as const;

package/src/collections/CollectionViewport.ts

@@ -0,0 +1,40 @@
+import { useLayoutEffect, useState } from 'react';
+
+export function useCollectionViewport() {
+    const [collectionElement, setCollectionElement] = useState<HTMLDivElement | null>(null);
+    const [geometry, setGeometry] = useState({ scrollMargin: 0, width: 0 });
+
+    useLayoutEffect(() => {
+        if (!collectionElement) return;
+
+        const measure = () => {
+            const collection = collectionElement.getBoundingClientRect();
+            const next = {
+                scrollMargin: collection.top + window.scrollY,
+                width: collection.width,
+            };
+
+            setGeometry((current) =>
+                current.width === next.width && current.scrollMargin === next.scrollMargin ? current : next,
+            );
+        };
+        const observer = new ResizeObserver(measure);
+
+        observer.observe(collectionElement);
+
+        // Ancestor sizes can move the collection without changing its own size.
+        for (let ancestor = collectionElement.parentElement; ancestor; ancestor = ancestor.parentElement) {
+            observer.observe(ancestor);
+        }
+
+        window.addEventListener('resize', measure);
+        measure();
+
+        return () => {
+            observer.disconnect();
+            window.removeEventListener('resize', measure);
+        };
+    }, [collectionElement]);
+
+    return { ...geometry, setCollectionElement };
+}

package/src/collections/DataRow.tsx

@@ -0,0 +1,79 @@
+/* oxlint-disable react/only-export-components -- Compound members are exported through DataRow. */
+import type { ReactNode } from 'react';
+
+import { SkeletonLoader } from '../feedback/SkeletonLoader';
+import { LinkBox } from '../typography/Link';
+import { Text } from '../typography/Typography';
+
+function DataRowRoot({
+    children,
+    interactive,
+    rowIndex,
+}: {
+    children: ReactNode;
+    interactive?: boolean;
+    rowIndex: number;
+}) {
+    return (
+        <LinkBox
+            role="row"
+            aria-rowindex={rowIndex}
+            className={`group group/media-item border-base-300/60 grid h-full min-w-0 grid-cols-(--lar-list-columns) items-center gap-4 border-b px-3 transition-colors motion-reduce:transition-none ${interactive ? 'hover:bg-base-100 focus-within:bg-base-100' : ''}`}
+        >
+            {children}
+        </LinkBox>
+    );
+}
+
+type DataRowPrimaryProps =
+    | {
+          artwork?: ReactNode;
+          detail?: ReactNode;
+          loading?: false;
+          subtitle?: ReactNode;
+          title: string;
+      }
+    | {
+          artwork?: boolean;
+          loading: true;
+          subtitle?: boolean;
+      };
+
+function DataRowPrimary(props: DataRowPrimaryProps) {
+    const artwork = props.loading
+        ? props.artwork !== false && <SkeletonLoader.Shape presentation="artwork" />
+        : props.artwork;
+    const subtitle = props.loading ? props.subtitle !== false : Boolean(props.subtitle);
+
+    return (
+        <span className="flex min-w-0 items-center gap-3">
+            {artwork ? <span className="size-10 shrink-0">{artwork}</span> : null}
+            <span className="min-w-0 flex-1">
+                <Text
+                    as="span"
+                    className="block"
+                    truncate
+                    variant="label"
+                    loading={props.loading}
+                    title={props.loading ? undefined : props.title}
+                >
+                    {!props.loading && props.title}
+                </Text>
+                {subtitle ? (
+                    <Text as="span" className="block" truncate variant="caption" tone="muted" loading={props.loading}>
+                        {!props.loading && props.subtitle}
+                    </Text>
+                ) : null}
+            </span>
+            {!props.loading && props.detail ? (
+                <Text as="span" className="ml-auto shrink-0" variant="caption" tone="muted">
+                    {props.detail}
+                </Text>
+            ) : null}
+        </span>
+    );
+}
+
+export const DataRow = Object.assign(DataRowRoot, {
+    Primary: DataRowPrimary,
+});

package/src/collections/ResultList.tsx

@@ -0,0 +1,164 @@
+import { ChevronRightIcon } from 'lucide-react';
+import { type ComponentPropsWithoutRef, createContext, type ReactNode, useContext } from 'react';
+
+import { SkeletonLoader } from '../feedback/SkeletonLoader';
+import { tabbable } from '../foundations/KeyboardFocus';
+import { Stack } from '../layout/Flow';
+import { LinkBox, LinkOverlay } from '../typography/Link';
+import { Text } from '../typography/Typography';
+
+const ResultListContext = createContext({ compact: false, listbox: true });
+
+interface ResultListProps extends Omit<ComponentPropsWithoutRef<'div'>, 'className' | 'style'> {
+    label: string;
+    loading?: boolean;
+    loadingLabel?: string;
+    density?: 'compact' | 'comfortable';
+}
+
+export function ResultList({
+    children,
+    label,
+    loading = false,
+    loadingLabel = label,
+    density = 'comfortable',
+    role = 'listbox',
+    ...props
+}: ResultListProps) {
+    return (
+        <ResultListContext.Provider value={{ compact: density === 'compact', listbox: role === 'listbox' }}>
+            <SkeletonLoader loading={loading} label={loadingLabel}>
+                <div
+                    {...props}
+                    role={role}
+                    aria-label={label}
+                    aria-busy={loading || props['aria-busy']}
+                    className="flex flex-col gap-1"
+                >
+                    {loading ? Array.from({ length: 8 }, (_, index) => <ResultRow key={index} loading />) : children}
+                </div>
+            </SkeletonLoader>
+        </ResultListContext.Provider>
+    );
+}
+
+export interface ResultRowProps extends Pick<
+    ComponentPropsWithoutRef<'button'>,
+    'disabled' | 'id' | 'onPointerMove' | 'tabIndex'
+> {
+    artwork: ReactNode;
+    kind: string;
+    onSelect: () => void;
+    href?: string;
+    selected?: boolean;
+    /** `icon` sets a small glyph in a narrow column; `default` shows artwork. */
+    presentation?: 'default' | 'icon' | 'poster' | 'video';
+    current?: boolean;
+    subtitle?: string;
+    detail?: string;
+    title: string;
+}
+
+export function ResultRow(props: ResultRowProps | { loading: true }) {
+    const { compact, listbox } = useContext(ResultListContext);
+    const loading = 'loading' in props;
+    const presentation = loading ? 'default' : props.presentation;
+    const classes = `grid w-full items-center rounded-md px-2 text-left ${presentation === 'poster' ? 'grid-cols-[4rem_minmax(0,1fr)_auto] gap-4 py-3' : presentation === 'video' ? 'grid-cols-[5rem_minmax(0,1fr)_auto] gap-4 py-3 sm:grid-cols-[10rem_minmax(0,1fr)_auto]' : presentation === 'icon' ? 'grid-cols-[1rem_minmax(0,1fr)] gap-3 py-2' : compact ? 'grid-cols-[2rem_minmax(0,1fr)] gap-2 py-1' : 'grid-cols-[2.75rem_minmax(0,1fr)] gap-3 py-2'}`;
+    const content = (
+        <>
+            {loading ? (
+                <SkeletonLoader.Shape presentation="artwork" />
+            ) : presentation === 'icon' ? (
+                <span aria-hidden="true" className="text-base-600 flex size-4 [&_svg]:size-4">
+                    {props.artwork}
+                </span>
+            ) : (
+                props.artwork
+            )}
+            <Stack space="none" className="min-w-0">
+                <Text as="span" variant="label" truncate loading={loading}>
+                    {!loading &&
+                        (props.href && !listbox ? (
+                            <LinkOverlay
+                                href={props.href}
+                                onNavigate={props.onSelect}
+                                aria-label={resultLabel(props)}
+                                aria-current={props.current ? 'page' : undefined}
+                            >
+                                {props.title}
+                            </LinkOverlay>
+                        ) : (
+                            props.title
+                        ))}
+                </Text>
+                <Text as="span" variant="caption" tone="muted" truncate loading={loading}>
+                    {!loading && (props.subtitle ?? props.kind)}
+                </Text>
+                {!loading && props.detail ? (
+                    <Text as="span" variant="caption" tone="muted" className="line-clamp-2 wrap-break-word">
+                        {props.detail}
+                    </Text>
+                ) : null}
+            </Stack>
+            {presentation === 'poster' || presentation === 'video' ? (
+                <span aria-hidden="true" className="text-base-500 flex [&>svg]:size-4">
+                    <ChevronRightIcon />
+                </span>
+            ) : null}
+        </>
+    );
+
+    if (loading) return <div className={classes}>{content}</div>;
+
+    const {
+        artwork: _artwork,
+        href,
+        kind: _kind,
+        onSelect,
+        selected = false,
+        presentation: _presentation,
+        current = false,
+        subtitle: _subtitle,
+        detail: _detail,
+        title: _title,
+        ...buttonProps
+    } = props;
+
+    const row =
+        href && !listbox ? (
+            <LinkBox
+                className={`${classes} hover:bg-base-100 focus-within:bg-base-100 has-[[aria-current=page]]:bg-base-100 has-[[aria-current=page]]:ring-base-300 has-[[aria-current=page]]:ring-1`}
+            >
+                {content}
+            </LinkBox>
+        ) : (
+            <button
+                {...tabbable}
+                {...buttonProps}
+                type="button"
+                role={listbox ? 'option' : undefined}
+                aria-label={resultLabel(props)}
+                aria-selected={listbox ? selected : undefined}
+                aria-current={current ? 'page' : undefined}
+                className={`${classes} hover:bg-base-100 aria-selected:bg-primary/10 aria-selected:ring-primary/30 focus-visible:outline-primary focus-visible:outline-2 disabled:pointer-events-none disabled:opacity-60 aria-selected:ring-1 aria-selected:ring-inset`}
+                onClick={onSelect}
+            >
+                {content}
+            </button>
+        );
+
+    return listbox ? row : <div role="listitem">{row}</div>;
+}
+
+/** The row's accessible name: what it shows, then its kind, so two rows with one title still differ. */
+function resultLabel({ title, subtitle, kind }: ResultRowProps): string {
+    return [title, subtitle, kind].filter(Boolean).join(', ');
+}
+
+export function ResultEmpty({ children }: { children: ReactNode }) {
+    return (
+        <Text as="span" tone="muted" className="px-3 py-4 text-center">
+            {children}
+        </Text>
+    );
+}