@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 * as react from 'react';
import { ContextValue } from 'react-aria-components';
import { ProviderProps } from '../../lib/types.js';
import { DetailsListProps, DetailsListLabelProps, DetailsListValueProps } from './types.js';
import 'tailwind-variants';
import './styles.js';

declare const DetailsListContext: react.Context<ContextValue<DetailsListProps, HTMLDListElement>>;
declare function DetailsListProvider({ children, ...props }: ProviderProps<DetailsListProps>): react_jsx_runtime.JSX.Element;
declare namespace DetailsListProvider {
    var displayName: string;
}
declare function DetailsListLabel(props: DetailsListLabelProps): react_jsx_runtime.JSX.Element;
declare namespace DetailsListLabel {
    var displayName: string;
}
declare function DetailsListValue(props: DetailsListValueProps): react_jsx_runtime.JSX.Element;
declare namespace DetailsListValue {
    var displayName: string;
}
/**
 * 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">
 *   <DetailsList.Label>Key</DetailsList.Label>
 *   <DetailsList.Value>Value</DetailsList.Value>
 *
 *   <DetailsList.Label>Ships</DetailsList.Label>
 *   <DetailsList.Value>Millennium Falcon</DetailsList.Value>
 *   <DetailsList.Value>USS Enterprise NCC-1701</DetailsList.Value>
 *   <DetailsList.Value>Serenity</DetailsList.Value>
 *
 *   <DetailsList.Label>Coordinates</DetailsList.Label>
 *   <DetailsList.Value>
 *     <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>
 *   </DetailsList.Value>
 * </DetailsList>
 * ```
 * ## Child Component Behavior
 * - **DetailsList.Label**: Minimum of 1
 * - **DetailsList.Value**: Minimum of 1
 */
declare function DetailsList({ ref, ...props }: DetailsListProps): react_jsx_runtime.JSX.Element;
declare namespace DetailsList {
    var displayName: string;
    var Provider: typeof DetailsListProvider;
    var Label: typeof DetailsListLabel;
    var Value: typeof DetailsListValue;
}

export { DetailsList, DetailsListContext };