@vimeo/iris/components/TourPoint/Caret.esm.js

Vimeo Design System

import { a as __makeTemplateObject, _ as __read, c as __assign } from '../../tslib.es6-7f0e734f.js';
import React__default from 'react';
import styled from 'styled-components';
import { core } from '../../tokens/core.esm.js';
import '../../tokens/color/index.esm.js';
import '../../tokens/color/background/background.esm.js';
import '../../tokens/util/readToken.esm.js';
import '../../color/colors.esm.js';
import 'polished';
import '../../tokens/util/clamp.esm.js';
import '../../tokens/color/format/format.esm.js';
import '../../tokens/color/format/primary.esm.js';
import '../../tokens/color/format/secondary.esm.js';
import '../../tokens/color/format/tertiary.esm.js';
import '../../tokens/color/rainbow/rainbow.esm.js';
import '../../tokens/color/rainbow/conic/index.esm.js';
import '../../tokens/color/rainbow/conic/sm.esm.js';
import '../../tokens/color/rainbow/conic/xl.esm.js';
import '../../tokens/color/rainbow/linear/index.esm.js';
import '../../tokens/color/rainbow/linear/sm.esm.js';
import '../../tokens/color/rainbow/linear/xl.esm.js';
import '../../tokens/color/livestream/livestream.esm.js';
import '../../tokens/color/status/status.esm.js';
import '../../tokens/color/status/caution.esm.js';
import '../../tokens/color/status/negative.esm.js';
import '../../tokens/color/status/positive.esm.js';
import '../../tokens/color/stroke/stroke.esm.js';
import '../../tokens/color/surface/surface.esm.js';
import '../../tokens/color/text/text.esm.js';
import '../../tokens/util/round.esm.js';
import '../../tokens/color/upsell/upsell.esm.js';
import '../../tokens/color/upsell/sm.esm.js';
import '../../tokens/color/upsell/xl.esm.js';
import '../../tokens/color/upsell/new.esm.js';
import '../../tokens/edge/edge.esm.js';
import '../../tokens/space/space.esm.js';
import '../../tokens/typography/index.esm.js';
import '../../tokens/typography/size/size.esm.js';

function Caret(_a) {
    var _b = _a.attach, attach = _b === void 0 ? 'left' : _b;
    var style = attachPosition({ attach: attach });
    return React__default.createElement(CaretStyled, { style: style });
}
function caret(side, sideA, sideB, borderSize) {
    return side === sideA || side === sideB ? borderSize : 0;
}
var CaretStyled = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  width: 1rem;\n  height: 1rem;\n  transform: rotate(-45deg);\n  background: ", ";\n  border: 0.25rem solid transparent;\n  background-clip: padding-box;\n"], ["\n  position: absolute;\n  width: 1rem;\n  height: 1rem;\n  transform: rotate(-45deg);\n  background: ", ";\n  border: 0.25rem solid transparent;\n  background-clip: padding-box;\n"])), core.color.surface(600));
function attachPosition(_a) {
    var _b;
    var _c = _a.attach, attach = _c === void 0 ? 'left' : _c, _d = _a.distance, distance = _d === void 0 ? 1 : _d, _e = _a.size, size = _e === void 0 ? 0.5 : _e;
    var borderSize = '0.25rem';
    var _f = __read(attach.split('-'), 2), side = _f[0], placement = _f[1];
    var attachSide = distance + size + 'rem';
    var attachCenter = 'calc(50% - ' + size + 'rem)';
    var axisY = side === 'top' || side === 'bottom';
    var shiftProp = placement ? placement : axisY ? 'left' : 'top';
    var shiftVal = placement ? attachSide : attachCenter;
    var border = {
        borderTopWidth: caret(side, 'top', 'left', borderSize),
        borderRightWidth: caret(side, 'right', 'top', borderSize),
        borderBottomWidth: caret(side, 'bottom', 'right', borderSize),
        borderLeftWidth: caret(side, 'left', 'bottom', borderSize),
    };
    var borderRadius = '0.125rem';
    var styleSide = __assign((_b = {}, _b[side] = '-0.68rem', _b[shiftProp] = shiftVal, _b.borderRadius = borderRadius, _b), border);
    return styleSide;
}
function buildClipPaths(attach) {
    var _a = __read(attach.split('-'), 2), side = _a[0], placement = _a[1];
    var axis = side === 'left' || side === 'right' ? 'X' : 'Y';
    var TL = side === 'left' || side === 'top';
    var sign = TL ? 1 : -1;
    var operator = TL ? '+' : '-';
    var end = TL ? '0%' : '100%';
    var distance = 0.67 * sign * -1 + 'rem';
    var inset = "calc(".concat(end, " ").concat(operator, " 1rem)");
    var translate = "translate".concat(axis, "(").concat(distance, ")");
    var _b = __read(buildVertices(placement, side, inset), 3), A = _b[0], B = _b[1], Tip = _b[2];
    var clipPath = "polygon(".concat(A, ", ").concat(Tip, ", ").concat(B, ")");
    return {
        '--caret-translate': translate,
        '--caret-clip-path': clipPath,
    };
}
function buildVertices(placement, side, inset) {
    var TL = placement === 'left' || placement === 'top';
    var end = TL ? '0%' : '100%';
    var sign = TL ? 1 : -1;
    var points = buildPoints(placement, sign, end);
    return points.map(function (point, i) {
        var tip = i === 2;
        var outset = inset.replace('1rem', '0rem');
        return tip
            ? buildVertex(side, outset, point)
            : buildVertex(side, inset, point);
    });
}
function buildVertex(side, X, Y) {
    return side === 'left' || side === 'right'
        ? "".concat(X, " ").concat(Y)
        : "".concat(Y, " ").concat(X);
}
function buildPoints(placement, sign, end) {
    if (!placement) {
        return [
            'calc(50% + 1rem)',
            'calc(50% - 1rem)',
            'calc(50% + 0rem)',
        ];
    }
    else {
        return [
            "calc(".concat(end, " + ").concat(sign * 1.25, "rem)"),
            "calc(".concat(end, " + ").concat(sign * 3.25, "rem)"),
            "calc(".concat(end, " + ").concat(sign * 2.25, "rem)"),
        ];
    }
}
var templateObject_1;

export { Caret, CaretStyled, buildClipPaths };