import type * as React from 'react';
import type { PrimitivePropsWithRef } from '../utils/primitive.js';
import type { Space } from '../utils/resolveSpace.js';
export type { Space };
/** Tag names {@link List} accepts via `as`. Under `dl` each item is a term/description pair rather than an `
`. */
export type ListTag = 'ul' | 'ol' | 'dl';
/** Layout axis of a description list's pairs, emitted as `data-orientation`. */
export type ListOrientation = 'horizontal' | 'vertical';
/** One entry of {@link ListProps.items} — a single term/description pair, read only under `as="dl"`. */
export interface ListEntry {
/** The term half of the pair, rendered into a derived `ListTerm` (``). */
label: React.ReactNode;
/** The description half of the pair, rendered into a derived `ListDescription` (``). */
value: React.ReactNode;
}
/** @internal The element choice and default marker icon, distributed from {@link List} to every {@link ListItem}. */
export interface ListContextValue {
icon: React.ReactNode;
/** The element the list root rendered, which decides whether an item is an `` or a pair wrapper. */
as: ListTag;
}
/** Props for the {@link List} container root element. */
export interface ListProps extends PrimitivePropsWithRef<'ul'> {
/**
* Element name to render, from the list's own tag allowlist; `dl` turns each item into a term/description pair.
* @default 'ul'
*/
as?: ListTag | undefined;
/**
* Layout axis of the pairs, emitted as `data-orientation` for the stylesheet to lay out; read only under `as="dl"`.
* @default 'horizontal'
*/
orientation?: ListOrientation | undefined;
/**
* Vertical rhythm rung the skin reads, mirrored to `data-density` on the root.
* @default undefined — the skin's own default density.
*/
density?: 'compact' | 'comfortable' | (string & {}) | undefined;
/**
* Term/description pairs the list derives one `ListItem` from each; read only under `as="dl"` and ignored when `children` is given.
* @default undefined — nothing is derived.
*/
items?: ListEntry[] | undefined;
/**
* `false` removes the marker and sets `role="list"` on the container, since Safari/VoiceOver otherwise drops list semantics.
* @default true
*/
markers?: boolean | undefined;
/**
* Gap between items, from the spacing scale.
* @default undefined — no inline declaration.
*/
spacing?: Space | undefined;
/**
* Starting number, passed through to ``. Ignored unless `as="ol"`.
* @default undefined — browser default numbering.
*/
start?: number | undefined;
/**
* Reverses the numbering direction, passed through to ``. Ignored unless `as="ol"`.
* @default false
*/
reversed?: boolean | undefined;
/**
* Default marker icon for every item, overridable per {@link ListItem}.
* @default undefined — the native marker is used.
*/
icon?: React.ReactNode | undefined;
}
/** Props for the {@link ListTerm}, the term half of a description-list pair. */
export interface ListTermProps extends PrimitivePropsWithRef<'dt'> {
}
/** Props for the {@link ListDescription}, the description half of a description-list pair. */
export interface ListDescriptionProps extends PrimitivePropsWithRef<'dd'> {
}
/** Props for a single {@link ListItem} within a list — an `- `, or the pair wrapper under `as="dl"`. */
export interface ListItemProps extends PrimitivePropsWithRef<'li'> {
/**
* Ordinal value, passed through to `
- `. Only meaningful inside an `
`.
* @default undefined — sequential numbering.
*/
value?: number | undefined;
/**
* Marker icon for this item, overriding the List's own `icon`.
* @default undefined — the List's `icon` is used, if any.
*/
icon?: React.ReactNode | undefined;
}