import { jsx as _jsx } from "react/jsx-runtime";
import { cnb } from "cnbuilder";
import { forwardRef } from "react";
import { bem } from "../utils/bem.js";
const styles = bem("rmd-list");
/**
 * @since 6.0.0
 */ export function list(options = {}) {
    const { dense = false, horizontal = false, className } = options;
    return cnb(styles({
        dense,
        horizontal
    }), className);
}
/**
 * **Server Component**
 *
 * 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, ListItem, ListItemLink } from "@react-md/core";
 * 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>
 *   );
 * }
 * ```
 */ 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