import { jsx as _jsx } from "react/jsx-runtime";
import { forwardRef } from "react";
import { list } from "./listStyles.js";
/**
 * The `List` component is used to render a collection of clickable actions
 * vertically or horizontally and does not include the default `ol`/`ul` styles.
 *
 * @example Simple Example
 * ```tsx
 * import { List } from "@react-md/core/list/List";
 * import { ListItem } from "@react-md/core/list/ListItem";
 * import { ListItemLink } from "@react-md/core/list/ListItemLink";
 * import type { ReactElement } from "react";
 *
 * function Example(): ReactElement {
 *   return (
 *     <List>
 *       <ListItem
 *         onClick={() => {
 *           // do something
 *         }}
 *       >
 *         Item 1
 *       </ListItem>
 *       <ListItem
 *         onClick={() => {
 *           // do something
 *         }}
 *       >
 *         Item 2
 *       </ListItem>
 *       <ListItem
 *         onClick={() => {
 *           // do something
 *         }}
 *       >
 *         Item 3
 *       </ListItem>
 *       <ListItemLink href="/some-route">Link Example</ListItemLink>
 *     </List>
 *   );
 * }
 * ```
 *
 * @see {@link https://react-md.dev/components/list | List Demos}
 */ export const List = /*#__PURE__*/ forwardRef(function List(props, ref) {
    const { className, children, role = "none", dense = false, ordered = false, horizontal = false, ...remaining } = props;
    const Component = ordered ? "ol" : "ul";
    return /*#__PURE__*/ _jsx(Component, {
        ...remaining,
        ref: ref,
        role: role,
        className: list({
            dense,
            horizontal,
            className
        }),
        children: children
    });
});

//# sourceMappingURL=List.js.map