@vimeo/iris/components/ButtonToggleState/ButtonToggleState.esm.js

Vimeo Design System

import { b as __rest, _ as __read, c as __assign } from '../../tslib.es6-7f0e734f.js';
import React__default, { useReducer, useEffect } from 'react';
import { reducer, initialState } from './ButtonToggleState.state.esm.js';
import { Button } from '../Button/Button.esm.js';
import { withIris } from '../../utils/HOCs/withIris.esm.js';
import { grayscale } from '../../color/colors.esm.js';
import '../Button/Button.style.esm.js';
import 'styled-components';
import 'polished';
import '../Button/Button.config.esm.js';
import '../Button/FeaturedIcon.esm.js';
import '../../themes/index.esm.js';
import '../../tokens/core.esm.js';
import '../../tokens/color/index.esm.js';
import '../../tokens/color/background/background.esm.js';
import '../../tokens/util/readToken.esm.js';
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';
import '../LoaderCircular/LoaderCircular.esm.js';
import '../LoaderCircular/LoaderCircular.style.esm.js';
import '../../utils/hooks/useDeprecate.esm.js';
import '../../utils/general/mergeReactRefs.esm.js';
import '../../utils/css.esm.js';

var ButtonToggleState = withIris(ButtonToggleStateComponent);
function ButtonToggleStateComponent(_a) {
    var fluid = _a.fluid, _b = _a.format, format = _b === void 0 ? 'primary' : _b, forwardRef = _a.forwardRef, isActive = _a.isActive, style = _a.style, _c = _a.variant, variant = _c === void 0 ? 'outline' : _c, theme = _a.theme, props = __rest(_a, ["fluid", "format", "forwardRef", "isActive", "style", "variant", "theme"]);
    var _d = __read(useReducer(reducer(__assign({ format: format }, props)), initialState(__assign({ format: format, isActive: isActive }, props))), 2), state = _d[0], dispatch = _d[1];
    var hover = function () { return isActive && dispatch('hovering'); };
    var toggle = function () { return (isActive ? dispatch('on') : dispatch('off')); };
    useEffect(toggle, [isActive]);
    props.onIcon; props.onStateText; props.offIcon; props.offStateText; var forwardProps = __rest(props, ["onIcon", "onStateText", "offIcon", "offStateText"]);
    return (React__default.createElement(Button, __assign({ children: state.children, fluid: fluid, format: state.format, icon: state.icon, onMouseEnter: hover, onMouseLeave: toggle, ref: forwardRef, variant: variant, style: style }, forwardProps, { 
        // Temporary custom theme to account for secondary active color
        theme: format === 'secondary'
            ? __assign(__assign({}, theme), { formats: __assign(__assign({}, theme.formats), { positive: grayscale(500) }) }) : theme })));
}

export { ButtonToggleState };