react-circular-text-writer/dist/index.mjs.map

A JavaScript utility to arrange text in a circular shape using HTML and CSS. Supports monospaced fonts for better alignment.

{"version":3,"sources":["../index.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  CircularTextWriterProps,\n  ReactCircularTextWriterOptions,\n  MonospacedFont\n} from './interfaces';\n\nconst CircularTextWriter: React.FC<CircularTextWriterProps> = ({\n  text,\n  radius,\n  id,\n  options = {}\n}) => {\n  // List of allowed monospaced font families\n  const monospacedFonts = [\n    'Menlo',\n    'Courier New',\n    'Consolas',\n    'Lucida Console',\n    'Monaco',\n    'monospace'\n  ];\n\n  // Determine the font family based on the provided options\n  // If a custom font is provided, use it\n\n  let fontFamily = 'Menlo, monospace';\n  if (options.fontFamily === 'customFont' && options.customFont) {\n    fontFamily = options.customFont;\n  } else if (monospacedFonts.includes(options.fontFamily || '')) {\n    fontFamily = options.fontFamily || 'Menlo';\n  }\n\n  // Split the text into individual letters for the circular arrangement\n  const letters = text?.split('');\n  // Calculate the rotation between each letter based on the number of letters\n  const rotationBetweenLetters = 360 / letters.length;\n\n  return (\n    <div\n      id={id}\n      aria-label={text}\n      style={{\n        height: `${radius * 2}px`,\n        width: `${radius * 2}px`,\n        position: 'relative',\n        display: 'flex',\n        justifyContent: 'center'\n      }}\n    >\n      {letters?.map((letter, index) => {\n        const rotation = index * rotationBetweenLetters;\n        return (\n          <p\n            key={index}\n            style={{\n              height: `${radius}px`,\n              position: 'absolute',\n              transform: `rotate(${rotation}deg)`,\n              transformOrigin: '0 100%',\n              color: options.color || '#000000',\n              fontFamily: fontFamily,\n              fontWeight: options.fontWeight || 400,\n              lineHeight: 'normal',\n              fontSize: options.fontSize || 16\n            }}\n          >\n            {letter}\n          </p>\n        );\n      })}\n    </div>\n  );\n};\n\nexport default CircularTextWriter;\n"],"mappings":";;;;AAAA,OAAO,WAAW;AAOlB,IAAM,qBAAwD,wBAAC;AAAA,EAC7D;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU,CAAC;AACb,MAAM;AAEJ,QAAM,kBAAkB;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAKA,MAAI,aAAa;AACjB,MAAI,QAAQ,eAAe,gBAAgB,QAAQ,YAAY;AAC7D,iBAAa,QAAQ;AAAA,EACvB,WAAW,gBAAgB,SAAS,QAAQ,cAAc,EAAE,GAAG;AAC7D,iBAAa,QAAQ,cAAc;AAAA,EACrC;AAGA,QAAM,UAAU,MAAM,MAAM,EAAE;AAE9B,QAAM,yBAAyB,MAAM,QAAQ;AAE7C,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,cAAY;AAAA,MACZ,OAAO;AAAA,QACL,QAAQ,GAAG,SAAS,CAAC;AAAA,QACrB,OAAO,GAAG,SAAS,CAAC;AAAA,QACpB,UAAU;AAAA,QACV,SAAS;AAAA,QACT,gBAAgB;AAAA,MAClB;AAAA;AAAA,IAEC,SAAS,IAAI,CAAC,QAAQ,UAAU;AAC/B,YAAM,WAAW,QAAQ;AACzB,aACE;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACL,OAAO;AAAA,YACL,QAAQ,GAAG,MAAM;AAAA,YACjB,UAAU;AAAA,YACV,WAAW,UAAU,QAAQ;AAAA,YAC7B,iBAAiB;AAAA,YACjB,OAAO,QAAQ,SAAS;AAAA,YACxB;AAAA,YACA,YAAY,QAAQ,cAAc;AAAA,YAClC,YAAY;AAAA,YACZ,UAAU,QAAQ,YAAY;AAAA,UAChC;AAAA;AAAA,QAEC;AAAA,MACH;AAAA,IAEJ,CAAC;AAAA,EACH;AAEJ,GAlE8D;AAoE9D,IAAO,gBAAQ;","names":[]}