import * as React from 'react';
import { TinyColor } from '@ctrl/tinycolor';
export var ColorRampItem = function (props) {
    var color = new TinyColor(props.value);
    var isDark = color.isDark();
    var isTransparent = color.getAlpha() < 0.5;
    return (React.createElement("div", { style: {
            display: 'flex',
            justifyContent: 'space-between',
            padding: '1.5vh',
            background: props.value,
            color: isTransparent ? '#000' : isDark ? '#fff' : '#000',
            width: 250,
        } },
        props.name && React.createElement("span", null, props.name),
        props.value && React.createElement("span", null, props.value)));
};
/**
 * Renders a color ramp for documentation purposes.
 */
export var ColorRamp = function (props) { return (React.createElement("div", null, Object.entries(props.ramp).map(function (_a) {
    var name = _a[0], value = _a[1];
    return React.createElement(ColorRampItem, { key: name + ':' + value, name: name, value: value });
}))); };
//# sourceMappingURL=ColorRamp.js.map