@primer/react/dist/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 { jsx } from 'react/jsx-runtime';

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

export { TokenBase as default, defaultTokenSize, isTokenInteractive };