/**
 * @file Item.tsx
 * @input Uses React, ReactNode, StyleXStyles, theme tokens, useClickableContainer
 * @output Exports Item component, ItemProps type
 * @position Core layout primitive; consumed by index.ts, tested by Item.test.tsx
 *
 * SYNC: When modified, update these files to stay in sync:
 * - /packages/core/src/Item/Item.doc.mjs
 * - /packages/core/src/Item/Item.test.tsx
 * - /packages/core/src/Item/index.ts
 * - /apps/storybook/stories/Item.stories.tsx
 * - /packages/cli/assets/templates/blocks/components/Item/ (showcase blocks)
 */
import { type ReactNode } from 'react';
import type { BaseProps } from '../BaseProps';
export type ItemAlign = 'center' | 'start';
export type ItemDensity = 'compact' | 'balanced' | 'spacious';
export interface ItemProps extends BaseProps<HTMLElement> {
    /** Ref forwarded to the root element. */
    ref?: React.Ref<HTMLElement>;
    /**
     * HTML element to render as the root.
     * @default 'div'
     */
    as?: 'div' | 'li' | 'span';
    /**
     * Marker rendered before startContent as a direct flex child.
     * Use for list bullets/counters that need custom baseline alignment.
     */
    marker?: ReactNode;
    /**
     * Content rendered before the label/description area.
     * Use for leading icons, avatars, or checkboxes.
     */
    startContent?: ReactNode;
    /**
     * Primary text identifying this item. Required.
     * Accepts string (auto-styled) or ReactNode (for rich content).
     */
    label: ReactNode;
    /**
     * Secondary text — subtitle, description, or supporting info.
     */
    description?: ReactNode;
    /**
     * Content rendered after the label/description area.
     * Use for badges, metadata, timestamps, or action buttons.
     */
    endContent?: ReactNode;
    /**
     * Vertical alignment of the start/end content slots.
     * @default 'center'
     */
    align?: ItemAlign;
    /**
     * Density: "compact" (4px block padding), "balanced" (8px block padding),
     * or "spacious" (12px block and inline padding).
     * @default 'balanced'
     */
    density?: ItemDensity;
    /**
     * Max lines before label truncates. When set, overflow is hidden
     * and text-overflow: ellipsis is applied.
     */
    labelLines?: number;
    /**
     * Max lines before description truncates. When set, overflow is hidden
     * and text-overflow: ellipsis is applied.
     */
    descriptionLines?: number;
    /**
     * Click handler. Makes the item clickable with button semantics.
     */
    onClick?: (event: React.MouseEvent) => void;
    /**
     * Ref to a nested control inside the item (e.g. a checkbox in
     * `startContent`) that already provides the item's keyboard access and
     * action. When set, the item becomes an enlarged click/tap target that
     * delegates surface clicks to that control via the `useClickableContainer`
     * pattern: it renders no invisible button/anchor, so the row adds no second
     * tab stop (WCAG 4.1.2 — one focusable control per option). Clicks on the
     * control itself, and on any other nested interactive element, are left to
     * that element. Mutually exclusive with `onClick`/`href` — when
     * `interactiveRef` is set those are ignored (the nested control is the sole
     * action).
     */
    interactiveRef?: React.RefObject<HTMLElement | null>;
    /**
     * Link URL. Makes the item a link via an invisible anchor element.
     */
    href?: string;
    /**
     * Link target (e.g., '_blank'). Only used with href.
     */
    target?: '_blank' | '_self';
    /**
     * Link relationship. Automatically includes noopener noreferrer when
     * target is "_blank".
     */
    rel?: string;
    /**
     * Highlighted state (hover/keyboard focus appearance).
     * @default false
     */
    isHighlighted?: boolean;
    /**
     * Selected state. Always applies the selected visual styling. When `role`
     * permits it (option, tab, row, gridcell, columnheader, rowheader, treeitem)
     * the state is exposed as `aria-selected`; otherwise (e.g. a listitem or a
     * bare div, where `aria-selected` is invalid ARIA) it falls back to
     * `aria-current="true"` so assistive tech is still told which item is
     * selected. A consumer-provided `aria-current` always wins.
     * @default false
     */
    isSelected?: boolean;
    /**
     * Disabled state.
     * @default false
     */
    isDisabled?: boolean;
    /**
     * Test ID for testing frameworks.
     */
    'data-testid'?: string;
}
/**
 * A universal item primitive that unifies the "start content + label +
 * description + end content" layout pattern. Use as a building block for list items,
 * menu items, contact rows, notification items, and more.
 *
 * @example
 * ```
 * <Item
 *   startContent={<Avatar src={user.avatar} size="sm" />}
 *   label={user.name}
 *   description={user.role}
 *   endContent={<Badge>Admin</Badge>}
 *   onClick={() => navigate(`/users/${user.id}`)}
 * />
 * ```
 */
export declare function Item({ as: Component, marker, startContent, label, description, endContent, align, density, labelLines, descriptionLines, onClick, interactiveRef, href, target: targetFromProps, rel: relFromProps, isHighlighted, isSelected, isDisabled, xstyle, className, style, ref, role, ...restProps }: ItemProps): import("react").JSX.Element;
export declare namespace Item {
    var displayName: string;
}
//# sourceMappingURL=Item.d.ts.map