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

A Plasma flavoured Mantine theme

import { jsx as _jsx } from "react/jsx-runtime";
import { Box, createVarsResolver, getSize, polymorphicFactory, useProps, useStyles } from '@mantine/core';
import Circle from './icons/circle.svg?raw';
import Ring from './icons/ring.svg?raw';
import Square from './icons/square.svg?raw';
import Triangle from './icons/triangle.svg?raw';
import Info from './icons/info.svg?raw';
import classes from './StatusToken.module.css';
const defaultProps = {
    size: 'lg',
    variant: 'info'
};
const resolveThemeColorFromVariant = (variant, theme)=>{
    switch(variant){
        case 'success':
            return theme.colors.green[4];
        case 'caution':
            return theme.colors.yellow[4];
        case 'error':
            return theme.colors.red[5];
        case 'disabled':
        case 'waiting':
            return theme.colors.gray[5];
        case 'edited':
        case 'new':
            return 'var(--mantine-primary-color-filled)';
        case 'info':
            return theme.colors.gray[3];
        default:
            return theme.colors.navy[5];
    }
};
const resolveSize = (size)=>size === 'sm' ? 8 : 12;
const resolveIconSrcFromVariant = (variant)=>{
    switch(variant){
        case 'caution':
            return Triangle;
        case 'error':
            return Square;
        case 'disabled':
            return Ring;
        case 'info':
            return Info;
        case 'success':
        case 'waiting':
        case 'edited':
        case 'new':
        default:
            return Circle;
    }
};
const varsResolver = createVarsResolver((theme, { variant, size })=>{
    const color = resolveThemeColorFromVariant(variant, theme);
    return {
        root: {
            '--status-token-color': color,
            '--status-token-size': getSize(resolveSize(size), 'status-token-size')
        }
    };
});
const statusTokenLabels = {
    info: 'Info',
    success: 'Success',
    caution: 'Caution',
    error: 'Error',
    disabled: 'Disabled',
    waiting: 'Waiting',
    edited: 'Edited',
    new: 'New'
};
export const StatusToken = polymorphicFactory((props, ref)=>{
    const { variant, vars, size, className, style, unstyled, styles, classNames, ...others } = useProps('StatusToken', defaultProps, props);
    const getStyles = useStyles({
        name: 'StatusToken',
        classes,
        className,
        props,
        style,
        styles,
        unstyled,
        vars,
        varsResolver
    });
    return /*#__PURE__*/ _jsx(Box, {
        ref: ref,
        variant: variant,
        role: "img",
        "aria-label": statusTokenLabels[variant],
        ...getStyles('root', {
            className,
            style,
            styles,
            classNames
        }),
        dangerouslySetInnerHTML: {
            __html: resolveIconSrcFromVariant(variant)
        },
        ...others
    });
});
StatusToken.displayName = 'StatusToken';

//# sourceMappingURL=StatusToken.js.map