@coveord/plasma-mantine/dist/esm/components/InfoToken/InfoToken.js

A Plasma flavoured Mantine theme

import { jsx as _jsx } from "react/jsx-runtime";
import { IconAlertSquare, IconAlertTriangle, IconBulb, IconCheck, IconHelpCircle, IconInfoCircle } from '@coveord/plasma-react-icons';
import { Box, createPolymorphicComponent, createVarsResolver, polymorphicFactory, useProps, useStyles } from '@mantine/core';
import { forwardRef } from 'react';
import classes from './InfoToken.module.css';
const defaultProps = {
    variant: 'outline',
    type: 'information',
    size: 'xs'
};
const colorResolver = (type)=>{
    switch(type){
        case 'error':
            return 'var(--mantine-color-error)';
        case 'advice':
        case 'question':
            return 'var(--coveo-color-text-primary)';
        case 'warning':
            return 'var(--mantine-color-yellow-text)';
        case 'success':
            return 'var(--mantine-color-green-text)';
        case 'information':
        default:
            return 'var(--mantine-color-gray-text)';
    }
};
const bgColorResolver = (type)=>{
    switch(type){
        case 'error':
            return 'var(--mantine-color-red-light)';
        case 'advice':
        case 'question':
            return 'var(--mantine-primary-color-light)';
        case 'warning':
            return 'var(--mantine-color-yellow-light)';
        case 'success':
            return 'var(--mantine-color-green-light)';
        case 'information':
        default:
            return 'var(--mantine-color-gray-light)';
    }
};
const sizeResolver = (size)=>{
    switch(size){
        case 'sm':
            return 20;
        case 'md':
            return 24;
        case 'lg':
            return 32;
        case 'xs':
        default:
            return 16;
    }
};
const iconResolver = (type)=>{
    switch(type){
        case 'error':
            return IconAlertSquare;
        case 'question':
            return IconHelpCircle;
        case 'warning':
            return IconAlertTriangle;
        case 'advice':
            return IconBulb;
        case 'success':
            return IconCheck;
        default:
            return IconInfoCircle;
    }
};
const varsResolver = createVarsResolver((_theme, { type })=>{
    const color = colorResolver(type);
    const bgColor = bgColorResolver(type);
    return {
        root: {
            '--it-color': color,
            '--it-bg': bgColor
        }
    };
});
const _InfoToken = polymorphicFactory((_props, ref)=>{
    const props = useProps('InfoToken', defaultProps, _props);
    const { variant, type, vars, className, style, unstyled, styles, classNames, size, ...others } = props;
    const getStyles = useStyles({
        name: 'InfoToken',
        classes,
        className,
        props,
        style,
        styles,
        unstyled,
        vars,
        varsResolver
    });
    const IconComponent = iconResolver(type);
    return /*#__PURE__*/ _jsx(Box, {
        ref: ref,
        variant: variant,
        role: "img",
        "aria-label": type,
        size: size,
        ...getStyles('root', {
            className,
            style,
            styles,
            classNames
        }),
        ...others,
        children: /*#__PURE__*/ _jsx(IconComponent, {
            size: sizeResolver(size)
        })
    });
});
const createInfoTokenCompound = (type, displayName)=>{
    const Component = createPolymorphicComponent(/*#__PURE__*/ forwardRef((props, ref)=>/*#__PURE__*/ _jsx(_InfoToken, {
            ref: ref,
            ...props,
            type: type
        })));
    Component.displayName = displayName;
    return Component;
};
export const InfoToken = {
    Information: createInfoTokenCompound('information', 'InfoToken.Information'),
    Advice: createInfoTokenCompound('advice', 'InfoToken.Advice'),
    Warning: createInfoTokenCompound('warning', 'InfoToken.Warning'),
    Error: createInfoTokenCompound('error', 'InfoToken.Error'),
    Question: createInfoTokenCompound('question', 'InfoToken.Question'),
    Success: createInfoTokenCompound('success', 'InfoToken.Success')
};

//# sourceMappingURL=InfoToken.js.map