@navinc/base-react-components/dist/wayfinder/toggle/toggle.js

Nav's Pattern Library

var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef } from 'react';
import { styled, css } from 'styled-components';
import { Icon } from '../icon/icon.js';
import { percentageToHexOpacity } from '@navinc/utils';
import { cn } from '../../cn.js';
import { styledBackwardsCompatibility } from '../../styled-backwards-compatibility.js';
const BoxShadowLight = css `
  box-shadow: ${({ theme }) => `0 0 0 1px ${theme.onSurfaceDim}${percentageToHexOpacity(50)}`};
`;
const BoxShadowDark = css `
  box-shadow: ${({ theme }) => `0 0 0 1px ${theme.onPrimaryContainer}`};
`;
const ToggleHandleCheckedStyles = css `
  ${BoxShadowDark}

  ${Icon} {
    color: ${({ theme }) => theme.primary};
  }
`;
const ToggleHandleDisabledStyles = css `
  ${BoxShadowLight}
  background-color: ${({ theme }) => theme.outlineVariant};

  ${Icon} {
    color: ${({ theme }) => theme.outline};
    opacity: 0.5;
  }
`;
const ToggleHandle = styled.div.withConfig({ displayName: "brc-sc-ToggleHandle", componentId: "brc-sc-rlrpkc" }) `
  margin-right: auto;
  display: flex;
  height: 20px;
  width: 20px;
  border-radius: 24px;
  justify-content: center;
  align-items: center;
  user-select: none;
  transition: transform 0.2s ease-in-out;
  transform: translateX(${({ checked }) => (checked ? '15px' : '0')});
  background-color: ${({ theme }) => theme.surface};

  ${({ checked }) => (checked ? ToggleHandleCheckedStyles : BoxShadowLight)};
  ${({ disabled }) => (disabled ? ToggleHandleDisabledStyles : '')};
`;
const ToggleCheckbox = styled.input.attrs(() => ({ type: 'checkbox' })).withConfig({ displayName: "brc-sc-ToggleCheckbox", componentId: "brc-sc-jykdti" }) `
  position: absolute;

  /* Extending checkbox size to cover entire toggle for larger clickable area when rendering a toggle without a label */
  left: -10%;
  top: -10%;
  height: 120%;
  width: 120%;
  appearance: none;
`;
const ToggleBaseUncheckedStyles = css `
  ${BoxShadowLight}
  background: ${({ theme }) => `linear-gradient(180deg, ${theme.surface}${percentageToHexOpacity(0)} 0%, ${theme.onSurface}${percentageToHexOpacity(8)} 100%), ${theme.surface}`};

  ${ToggleHandle} ${Icon} {
    visibility: hidden;
  }

  &:hover ${ToggleHandle} ${Icon}, &:focus-within ${ToggleHandle} ${Icon} {
    visibility: visible;
    color: ${({ theme }) => theme.outline};
  }

  &:hover:not(:focus-within) ${ToggleHandle} ${Icon} {
    opacity: 0.5;
  }

  &:hover {
    background: ${({ theme }) => `linear-gradient(180deg, ${theme.surface}${percentageToHexOpacity(0)} 0%, ${theme.onSurface}${percentageToHexOpacity(8)} 100%), ${theme.surface}`};
  }

  &:focus-within {
    background: ${({ theme }) => `linear-gradient(0deg, ${theme.onSurface}${percentageToHexOpacity(8)} 0%, ${theme.onSurface}${percentageToHexOpacity(8)} 100%), ${theme.surface}`};
  }
`;
const ToggleBaseCheckedStyles = css `
  ${BoxShadowDark}
  background: ${({ theme }) => `linear-gradient(180deg, ${theme.primaryContainer}${percentageToHexOpacity(20)} 0%, ${theme.primary}${percentageToHexOpacity(0)} 100%), ${theme.primary}`};

  &:hover {
    background: ${({ theme }) => `linear-gradient(180deg, ${theme.primaryContainer}${percentageToHexOpacity(30)} 0%, ${theme.primary}${percentageToHexOpacity(0)} 100%), ${theme.primary}`};
  }

  &:focus-within {
    background: ${({ theme }) => theme.primary};
  }
`;
const ToggleBaseDisabledStyles = css `
  ${BoxShadowLight}
  pointer-events: none;
  background: ${({ theme }) => theme.surfaceDim};
`;
const ToggleBase = styled.div.withConfig({ displayName: "brc-sc-ToggleBase", componentId: "brc-sc-95zags" }) `
  display: flex;
  position: relative;
  overflow: hidden;
  width: 35px;
  height: 20px;
  align-items: center;
  border-radius: 24px;
  outline: 0;
  border: none;

  ${({ checked }) => (checked ? ToggleBaseCheckedStyles : ToggleBaseUncheckedStyles)};
  ${({ disabled }) => (disabled ? ToggleBaseDisabledStyles : '')};
`;
const ToggleContainer = styled.label.withConfig({ displayName: "brc-sc-ToggleContainer", componentId: "brc-sc-j2z8o1" }) `
  display: flex;
  align-items: center;
  flex-direction: ${({ labelPosition }) => (labelPosition === 'right' ? 'row' : 'row-reverse')};
  gap: ${({ theme }) => theme.spacing.space150};
`;
export const Toggle = styledBackwardsCompatibility(forwardRef((_a, forwardedRef) => {
    var { checked, disabled, label, labelPosition = 'right' } = _a, props = __rest(_a, ["checked", "disabled", "label", "labelPosition"]);
    const ToggleSwitch = (_jsxs(ToggleBase, { checked: checked, disabled: disabled, children: [_jsx(ToggleHandle, { checked: checked, disabled: disabled, children: _jsx(Icon, { isFilled: true, size: 20, name: "check_small" }) }), _jsx(ToggleCheckbox, Object.assign({ checked: checked, disabled: disabled, ref: forwardedRef, "data-testid": "toggle-checkbox" }, props))] }));
    if (label) {
        return (_jsxs(ToggleContainer, { labelPosition: labelPosition, children: [ToggleSwitch, label && _jsx("span", { className: cn('body1', disabled ? 'text-onSurfaceDim' : 'text-onSurface'), children: label })] }));
    }
    return ToggleSwitch;
}));
//# sourceMappingURL=toggle.js.map