@accelint/design-toolkit/dist/components/details-list/index.d.ts

An open-source component library to serve as part of the entire ecosystem of UX for Accelint.

import * as react_jsx_runtime from 'react/jsx-runtime';
import { DetailsListProps } from './types.js';
import 'react';
import 'react-aria-components';
import 'tailwind-variants';
import './styles.js';

/**
 * A semantic details list component for displaying metadata in key-value pairs.
 * Uses CSS Grid layout with labels in the first column and values in the second column.
 * Perfect for map object details, user profiles, or any structured information.
 *
 * @example
 * ```tsx
 * <DetailsList align="left">
 *   <DetailsListLabel>Key</DetailsListLabel>
 *   <DetailsListValue>Value</DetailsListValue>
 *
 *   <DetailsListLabel>Ships</DetailsListLabel>
 *   <DetailsListValue>Millennium Falcon</DetailsListValue>
 *   <DetailsListValue>USS Enterprise NCC-1701</DetailsListValue>
 *   <DetailsListValue>Serenity</DetailsListValue>
 *
 *   <DetailsListLabel>Coordinates</DetailsListLabel>
 *   <DetailsListValue>
 *     <div>Great Pyramid of Giza: 29°58'44" N 31°08'02" E</div>
 *     <div>Machu Picchu: 13°09'47" S 72°32'41" W</div>
 *     <div>Colosseum: 41°53'24" N 12°29'32" E</div>
 *     <div>Taj Mahal: 27°10'30" N 78°02'31" E</div>
 *   </DetailsListValue>
 * </DetailsList>
 * ```
 * ## Child Component Behavior
 * - **DetailsListLabel**: Minimum of 1
 * - **DetailsListValue**: Minimum of 1
 */
declare function DetailsList({ ref, ...props }: DetailsListProps): react_jsx_runtime.JSX.Element;

export { DetailsList };