smooth-shadows/dist/shadows.js

A library to generate smooth shadows with multiple layers

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.smoothShadows = void 0;
const bezier_easing_1 = __importDefault(require("bezier-easing"));
const parse_unit_1 = __importDefault(require("parse-unit"));
const round_to_1 = __importDefault(require("round-to"));
const easings_1 = require("./easings");
function smoothShadows(x, y, blur, spread, color, options) {
    const [xValue, xUnit] = typeof x === 'string' ? parse_unit_1.default(x) : [x];
    const [yValue, yUnit] = typeof y === 'string' ? parse_unit_1.default(y) : [y];
    const [blurValue, blurUnit] = typeof blur === 'string' ? parse_unit_1.default(blur) : [blur];
    const [spreadValue, spreadUnit] = typeof spread === 'string' ? parse_unit_1.default(spread) : [spread];
    const [redValue, greenValue, blueValue, alphaValue] = color;
    const layers = (options && options.layers) || 4;
    const easings = {
        offset: options?.easings?.offset || [0.65, 0.1, 0.9, 0.4],
        blur: options?.easings?.blur || [0.65, 0.2, 0.9, 0.4],
        alpha: options?.easings?.alpha || [0.2, 0.6, 0.9, 0.4],
    };
    const output = (options && options.output) || 'array';
    const offsetBezierEasing = bezier_easing_1.default(...(typeof easings.offset === 'string' ? easings_1.easingToCubicBezier(easings.offset) : easings.offset));
    const blurBezierEasing = bezier_easing_1.default(...(typeof easings.blur === 'string' ? easings_1.easingToCubicBezier(easings.blur) : easings.blur));
    const alphaBezierEasing = bezier_easing_1.default(...(typeof easings.alpha === 'string' ? easings_1.easingToCubicBezier(easings.alpha) : easings.alpha));
    const shadows = [...Array(layers)].map((_, index) => {
        const progress = (index + 1) / layers;
        return {
            x: xValue !== 0 ? `${round_to_1.default(offsetBezierEasing(progress) * xValue, 3)}${xUnit}` : 0,
            y: yValue !== 0 ? `${round_to_1.default(offsetBezierEasing(progress) * yValue, 3)}${yUnit}` : 0,
            blur: blurValue !== 0 ? `${round_to_1.default(blurBezierEasing(progress) * blurValue, 3)}${blurUnit}` : 0,
            spread: spreadValue !== 0 ? `${round_to_1.default(spreadValue, 3)}${spreadUnit}` : 0,
            color: {
                red: redValue,
                green: greenValue,
                blue: blueValue,
                alpha: round_to_1.default(alphaBezierEasing(progress) * alphaValue, 3),
            },
        };
    });
    if (output === 'css') {
        return shadows
            .map((shadow) => {
            return `${shadow.x} ${shadow.y} ${shadow.blur}${shadow.spread ? ` ${shadow.spread}` : ''} rgba(${shadow.color.red}, ${shadow.color.green}, ${shadow.color.blue}, ${shadow.color.alpha})`;
        })
            .join(', ');
    }
    if (output === 'object')
        return shadows;
    return shadows.map(({ x, y, blur, spread, color }) => {
        return [x, y, blur, spread, [color.red, color.green, color.blue, color.alpha]];
    });
}
exports.smoothShadows = smoothShadows;