import { type StoryObj } from "@storybook/react-vite";
/**
 * This component demonstrates how to build list-like interfaces
 * using composition with Card and UnorderedList instead of the
 * pre-configured List component.
 *
 * This approach gives you more flexibility and control over the
 * structure and styling of your lists.
 */
declare const meta: {
    title: string;
    parameters: {
        layout: string;
        docs: {
            description: {
                component: string;
            };
        };
    };
};
export default meta;
type Story = StoryObj<typeof meta>;
/**
 * The simplest list: a Card with UnorderedList inside.
 * No padding on the Card so the list items extend to the edges.
 */
export declare const BasicList: Story;
/**
 * Adding a title to your list using Card.Padding for the header
 * and keeping the list full-width below it.
 */
export declare const ListWithTitle: Story;
/**
 * Add icons to your list items using the Stack component
 * to layout the icon and text horizontally.
 */
export declare const ListWithIcons: Story;
/**
 * Add accessories like badges and buttons using flex layouts.
 * Stack with justify="spaceBetween" pushes the accessories to the right.
 */
export declare const ListWithAccessories: Story;
/**
 * Create nested lists using UnorderedList inside UnorderedList.Item.
 * The nested list automatically gets indentation and proper borders.
 */
export declare const NestedList: Story;
/**
 * Make list items interactive by adding onClick handlers and hover styles.
 * Use the Card's build in hover elevation for a nice effect on the whole card.
 */
export declare const InteractiveList: Story;
/**
 * A list has to say something while its data loads. Compose the skeleton from
 * the same row anatomy you use for the real rows — icon, title, subtitle,
 * accessory — so the layout does not jump when the data arrives.
 *
 * `Skeleton` takes `width`, `height` and `variant`; keep the widths uneven so
 * the placeholder reads as text rather than as a table.
 *
 * The `role="progressbar"` and `aria-label` belong on the list element, not on
 * each row: a screen reader should hear "loading" once, not once per row.
 */
export declare const LoadingState: Story;
/**
 * When there is nothing to show, keep the Card so the page layout stays put and
 * replace the rows with a single line of text. Use `Card.Padding` rather than
 * `UnorderedList.Padding` — there is no list here, and an empty `<ul>` is worse
 * for a screen reader than no `<ul>` at all.
 *
 * Keep the copy specific ("No measurements yet") over generic ("No results"),
 * and add an action only when there is one worth taking.
 */
export declare const EmptyState: Story;
/**
 * Combine multiple patterns: title, icons, accessories, and interactivity.
 * This shows the full flexibility of the compositional approach.
 */
export declare const CompleteExample: Story;