@primer/react/lib-esm/Token/TokenBase.js

An implementation of GitHub's Primer Design System using React

import { c } from 'react-compiler-runtime';
import React from 'react';
import { clsx } from 'clsx';
import classes from './TokenBase.module.css.js';
import { BoxWithFallback } from '../internal/components/BoxWithFallback.js';
import { jsx } from 'react/jsx-runtime';

const tokenSizes = {
  small: '16px',
  medium: '20px',
  large: '24px',
  xlarge: '32px'
};
const defaultTokenSize = 'medium';
const isTokenInteractive = ({
  as = 'span',
  onClick,
  onFocus,
  tabIndex = -1,
  disabled
}) => {
  if (disabled) {
    return false;
  }
  return Boolean(onFocus || onClick || tabIndex > -1 || ['a', 'button'].includes(as));
};
const TokenBase = /*#__PURE__*/React.forwardRef((t0, forwardedRef) => {
  const $ = c(26);
  let className;
  let id;
  let onKeyDown;
  let onRemove;
  let rest;
  let t1;
  let t2;
  if ($[0] !== t0) {
    const {
      onRemove: t3,
      onKeyDown: t4,
      id: t5,
      className: t6,
      size: t7,
      isSelected: _isSelected,
      as: t8,
      ...t9
    } = t0;
    onRemove = t3;
    onKeyDown = t4;
    id = t5;
    className = t6;
    t1 = t7;
    t2 = t8;
    rest = t9;
    $[0] = t0;
    $[1] = className;
    $[2] = id;
    $[3] = onKeyDown;
    $[4] = onRemove;
    $[5] = rest;
    $[6] = t1;
    $[7] = t2;
  } else {
    className = $[1];
    id = $[2];
    onKeyDown = $[3];
    onRemove = $[4];
    rest = $[5];
    t1 = $[6];
    t2 = $[7];
  }
  const size = t1 === undefined ? defaultTokenSize : t1;
  const as = t2 === undefined ? "span" : t2;
  let t3;
  if ($[8] !== onKeyDown || $[9] !== onRemove) {
    t3 = event => {
      onKeyDown && onKeyDown(event);
      if ((event.key === "Backspace" || event.key === "Delete") && onRemove) {
        onRemove();
      }
    };
    $[8] = onKeyDown;
    $[9] = onRemove;
    $[10] = t3;
  } else {
    t3 = $[10];
  }
  let t4;
  if ($[11] !== className) {
    t4 = clsx(classes.TokenBase, className);
    $[11] = className;
    $[12] = t4;
  } else {
    t4 = $[12];
  }
  let t5;
  if ($[13] !== rest) {
    t5 = isTokenInteractive(rest);
    $[13] = rest;
    $[14] = t5;
  } else {
    t5 = $[14];
  }
  let t6;
  if ($[15] !== id) {
    var _id;
    t6 = (_id = id) === null || _id === void 0 ? void 0 : _id.toString();
    $[15] = id;
    $[16] = t6;
  } else {
    t6 = $[16];
  }
  let t7;
  if ($[17] !== as || $[18] !== forwardedRef || $[19] !== rest || $[20] !== size || $[21] !== t3 || $[22] !== t4 || $[23] !== t5 || $[24] !== t6) {
    t7 = /*#__PURE__*/jsx(BoxWithFallback, {
      as: as,
      onKeyDown: t3,
      className: t4,
      "data-cursor-is-interactive": t5,
      "data-size": size,
      id: t6,
      ...rest,
      ref: forwardedRef
    });
    $[17] = as;
    $[18] = forwardedRef;
    $[19] = rest;
    $[20] = size;
    $[21] = t3;
    $[22] = t4;
    $[23] = t5;
    $[24] = t6;
    $[25] = t7;
  } else {
    t7 = $[25];
  }
  return t7;
});

export { TokenBase as default, defaultTokenSize, isTokenInteractive, tokenSizes };