shelving/ui/block/List.js

Toolkit for using data in JavaScript.

import { jsx as _jsx } from "react/jsx-runtime";
import { getColorClass } from "../style/Color.js";
import { getGapClass } from "../style/Gap.js";
import { getSpacingClass } from "../style/Spacing.js";
import { getTypographyClass } from "../style/Typography.js";
import { getClass, getModuleClass } from "../util/css.js";
import styles from "./List.module.css";
export function List({ children, ordered = false, ...variants }) {
    const items = children.map((v, i) => _jsx("li", { children: v }, i.toString()));
    const className = getClass(getModuleClass(styles, ordered ? "ordered" : "unordered"), getColorClass(variants), getGapClass(variants), getSpacingClass(variants), getTypographyClass(variants));
    return ordered ? _jsx("ol", { className: className, children: items }) : _jsx("ul", { className: className, children: items });
}