import React, { forwardRef, useMemo } from "react";
import cls from "classnames";
import { base } from "./List.styles";
import { classes } from "./List.tokens";
import { base as viewCSS } from "./variations/_view/base";
import { base as sizeCSS } from "./variations/_size/base";
import { base as disabledCSS } from "./variations/_disabled/base";
import { ListContext } from "./List.context";
export const listRoot = (Root)=>/*#__PURE__*/ forwardRef(({ size, view, disabled, variant, hasBackground, hasItemBackground, hasDivider, className, children, ...rest }, outerRootRef)=>{
        const contextValue = useMemo(()=>({
                disabled,
                hasItemBackground,
                hasDivider
            }), [
            disabled,
            hasItemBackground,
            hasDivider
        ]);
        return /*#__PURE__*/ React.createElement(Root, {
            ref: outerRootRef,
            size: size,
            view: view,
            disabled: disabled,
            className: cls(classes.listRoot, className, variant === 'tight' && classes.tightListItem, disabled && classes.disabledList, hasBackground && classes.hasListBackground),
            ...rest
        }, /*#__PURE__*/ React.createElement(ListContext.Provider, {
            value: contextValue
        }, children));
    });
export const listConfig = {
    name: 'List',
    tag: 'ul',
    layout: listRoot,
    base,
    variations: {
        view: {
            css: viewCSS
        },
        size: {
            css: sizeCSS
        },
        disabled: {
            css: disabledCSS
        }
    },
    defaults: {
        view: 'default',
        size: 'm'
    }
};
