@machinemetrics/mm-react-components 0.2.0 → 0.2.3-1

package/scripts/chakra-to-shadcn-migrator/bin/chakra-to-shadcn.js

@@ -0,0 +1,1135 @@
+#!/usr/bin/env node
+import fs from 'fs';
+import path from 'path';
+import process from 'process';
+import { bold, colorize } from '../lib/colors.js';
+import { parseArgs } from '../lib/args.js';
+import { resolveConfig, loadJson } from '../lib/config.js';
+import { updateDependencies, renderDependencyReport } from '../lib/deps.js';
+import { collectSourceFiles } from '../lib/file-io.js';
+import {
+  renderImportReport,
+  renderProviderInstructions,
+  renderPostSteps,
+} from '../lib/render.js';
+
+const opts = parseArgs(process.argv.slice(2));
+const projectRoot = path.resolve(process.cwd(), opts.project);
+const configPath = resolveConfig(projectRoot, opts.config);
+const config = configPath ? loadJson(configPath) : undefined;
+
+if (!config) {
+  console.error(
+    colorize(
+      'Unable to locate chakra-to-shadcn.config.json. Provide one with --config.',
+      'red',
+    ),
+  );
+  process.exit(1);
+}
+
+const moduleNames = Object.keys(config.moduleMappings ?? {});
+
+console.log(bold(colorize('\nChakra UI → Shadcn migration helper', 'cyan')));
+console.log(`Project: ${colorize(projectRoot, 'green')}`);
+console.log(`Configuration: ${colorize(configPath, 'green')}`);
+console.log(
+  `Mode: ${opts.apply ? colorize('apply changes', 'green') : colorize('dry-run / plan', 'yellow')}`,
+);
+
+const dependencyReport = updateDependencies(projectRoot, config, opts.apply);
+renderDependencyReport(dependencyReport, opts.apply, { bold, colorize });
+renderProviderInstructions(config, { bold });
+
+if (moduleNames.length > 0) {
+  const sourceFiles = collectSourceFiles(
+    projectRoot,
+    opts.source,
+    opts.includeTests,
+  );
+  const importReports = analyzeImports(
+    sourceFiles,
+    moduleNames,
+    config,
+    opts.apply,
+  );
+  renderImportReport(importReports, opts.apply, config, { colorize });
+} else {
+  console.log('\nNo module mappings configured.');
+}
+
+renderPostSteps(config, { bold });
+
+function analyzeImports(files, moduleNames, config, applyMode) {
+  console.log(bold('\nStep 3 – Replace Chakra imports'));
+  const reports = [];
+  for (const file of files) {
+    const text = fs.readFileSync(file.absolute, 'utf8');
+    let mutated = text;
+    let dirty = false;
+    const fileReport = { file: file.relative, modules: [], applied: false };
+    const usedSpecifiersByModule = new Map();
+    for (const moduleName of moduleNames) {
+      const moduleConfig = config.moduleMappings[moduleName];
+      if (!moduleConfig) continue;
+      const matches = findImports(mutated, moduleName);
+      for (const match of matches.reverse()) {
+        const result = transformImport(match, moduleConfig, applyMode);
+        fileReport.modules.push({ module: moduleName, ...result });
+        // Track specifiers used so we can target JSX replacement to only those imported
+        const used = usedSpecifiersByModule.get(moduleName) ?? new Set();
+        for (const s of match.specifiers) {
+          if (s?.local) used.add(s.local);
+          else if (s?.imported) used.add(s.imported);
+        }
+        usedSpecifiersByModule.set(moduleName, used);
+        if (applyMode && result && result.replacement) {
+          mutated =
+            mutated.slice(0, match.start) +
+            result.replacement +
+            mutated.slice(match.end);
+          dirty = true;
+        }
+      }
+      // JSX tag replacement based on config.jsxSpecifiers
+      const jsxSpec = moduleConfig.jsxSpecifiers;
+      if (jsxSpec) {
+        const used = usedSpecifiersByModule.get(moduleName) ?? new Set();
+        const jsxResult = transformJSX(mutated, jsxSpec, used, applyMode);
+        if (jsxResult && jsxResult.changed) {
+          if (applyMode && jsxResult.output !== mutated) {
+            mutated = jsxResult.output;
+            dirty = true;
+          }
+          fileReport.modules.push({
+            module: moduleName,
+            jsxReplaced: Array.from(jsxResult.replaced ?? []),
+          });
+        }
+      }
+
+      // Transform compound components (e.g., Dialog.Root, Tabs.List)
+      const compoundSpec = moduleConfig.compoundComponents;
+      if (compoundSpec && applyMode) {
+        const compoundResult = transformCompoundComponents(
+          mutated,
+          compoundSpec,
+        );
+        if (compoundResult.changed) {
+          mutated = compoundResult.output;
+          dirty = true;
+          if (compoundResult.transformed.length > 0) {
+            fileReport.modules.push({
+              module: moduleName,
+              compoundTransformed: compoundResult.transformed,
+            });
+
+            // Add imports for new compound components
+            const newImports = compoundResult.newComponents;
+            if (newImports.length > 0) {
+              // Find existing imports from mm-react-components
+              const mmImportPattern =
+                /import\s+\{([^}]*)\}\s+from\s+['"]@machinemetrics\/mm-react-components['"];?/;
+              const match = mutated.match(mmImportPattern);
+
+              if (match) {
+                // Add to existing import and deduplicate
+                const existingImports = match[1].trim();
+                const existingList = existingImports
+                  .split(',')
+                  .map((s) => s.trim())
+                  .filter(Boolean);
+                const allImports = [
+                  ...new Set([...existingList, ...newImports]),
+                ];
+                mutated = mutated.replace(
+                  mmImportPattern,
+                  `import { ${allImports.join(', ')} } from '@machinemetrics/mm-react-components';`,
+                );
+              } else {
+                // Add new import at top of file (after existing imports)
+                const firstImportEnd = mutated.indexOf(';') + 1;
+                const newImport = `\nimport { ${newImports.join(', ')} } from '@machinemetrics/mm-react-components';`;
+                mutated =
+                  mutated.slice(0, firstImportEnd) +
+                  newImport +
+                  mutated.slice(firstImportEnd);
+              }
+            }
+          }
+        }
+      }
+    }
+
+    // Cleanup unused Chakra imports
+    if (applyMode && dirty) {
+      const cleanupResult = cleanupUnusedImports(mutated, moduleNames);
+      if (cleanupResult.changed) {
+        mutated = cleanupResult.output;
+        fileReport.importsRemoved = cleanupResult.removed;
+      }
+    }
+
+    if (applyMode && dirty && mutated !== text) {
+      fs.writeFileSync(file.absolute, mutated, 'utf8');
+      fileReport.applied = true;
+    }
+    if (fileReport.modules.length) {
+      reports.push(fileReport);
+    }
+  }
+  return reports;
+}
+
+// Clean up unused Chakra imports after transformation
+function cleanupUnusedImports(content, moduleNames) {
+  let output = content;
+  let changed = false;
+  const removed = [];
+
+  for (const moduleName of moduleNames) {
+    const imports = findImports(output, moduleName);
+
+    for (const importMatch of imports.reverse()) {
+      const unusedSpecifiers = [];
+      const usedSpecifiers = [];
+
+      for (const spec of importMatch.specifiers) {
+        const name = spec.local || spec.imported;
+        // Check if this import is actually used in the code (outside of imports)
+        // Look for the name as a JSX tag or in code
+        const codeWithoutImports = output.replace(
+          /import\s+.*?from\s+['"].*?['"];?/gs,
+          '',
+        );
+        const usagePattern = new RegExp(
+          `<${escapeRegex(name)}[\\s/>]|\\b${escapeRegex(name)}\\b`,
+          'g',
+        );
+        const isUsed = usagePattern.test(codeWithoutImports);
+
+        if (isUsed) {
+          usedSpecifiers.push(spec);
+        } else {
+          unusedSpecifiers.push(spec);
+        }
+      }
+
+      if (unusedSpecifiers.length > 0) {
+        if (usedSpecifiers.length === 0) {
+          // Remove entire import statement
+          output =
+            output.slice(0, importMatch.start) + output.slice(importMatch.end);
+          changed = true;
+          removed.push({
+            module: moduleName,
+            specifiers: unusedSpecifiers.map((s) => s.local || s.imported),
+          });
+        } else {
+          // Keep only used specifiers
+          const isTypeOnly = importMatch.raw.includes('import type');
+          const specifierList = usedSpecifiers
+            .map((s) => {
+              const typePrefix = s.isType && !isTypeOnly ? 'type ' : '';
+              if (s.local && s.imported && s.local !== s.imported) {
+                return `${typePrefix}${s.imported} as ${s.local}`;
+              }
+              return `${typePrefix}${s.local || s.imported}`;
+            })
+            .join(', ');
+
+          const keyword = isTypeOnly ? 'import type' : 'import';
+          const newImport = `${keyword} { ${specifierList} } from '${moduleName}';`;
+          output =
+            output.slice(0, importMatch.start) +
+            newImport +
+            output.slice(importMatch.end);
+          changed = true;
+          removed.push({
+            module: moduleName,
+            specifiers: unusedSpecifiers.map((s) => s.local || s.imported),
+          });
+        }
+      }
+    }
+  }
+
+  return { output, changed, removed };
+}
+
+function escapeRegex(text) {
+  return text.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+function findImports(content, moduleName) {
+  const pattern = new RegExp(
+    `import\\s+(type\\s+)?\\{([^}]*)\\}\\s+from\\s+['"]${escapeRegex(moduleName)}['"];?`,
+    'gm',
+  );
+  const imports = [];
+  let match;
+  while ((match = pattern.exec(content))) {
+    const [full, typeKeyword, specifierBlock] = match;
+    const start = match.index;
+    const end = start + full.length;
+    const isTypeOnly = Boolean(typeKeyword);
+    const specifiers = parseSpecifiers(specifierBlock, isTypeOnly);
+    imports.push({ start, end, specifiers, raw: full });
+  }
+  return imports;
+}
+
+function parseSpecifiers(block, isTypeOnly) {
+  return block
+    .split(',')
+    .map((part) => part.trim())
+    .filter(Boolean)
+    .map((part) => {
+      let spec = part;
+      let specIsType = isTypeOnly;
+      if (spec.startsWith('type ')) {
+        specIsType = true;
+        spec = spec.slice(5).trim();
+      }
+      const [importedRaw, localRaw] = spec.split(/\s+as\s+/i);
+      const imported = (importedRaw ?? '').trim();
+      const local = (localRaw ?? importedRaw ?? '').trim();
+      return { imported, local, isType: specIsType };
+    });
+}
+
+function transformImport(importInfo, moduleConfig, applyMode) {
+  if (!moduleConfig) {
+    return { missingConfig: true, specifiers: importInfo.specifiers };
+  }
+  const convertible = [];
+  const manual = [];
+  const jsxHandled = new Set(Object.keys(moduleConfig.jsxSpecifiers ?? {}));
+
+  for (const specifier of importInfo.specifiers) {
+    const mapping =
+      moduleConfig.specifiers?.[specifier.imported] ||
+      moduleConfig.specifiers?.[specifier.local] ||
+      moduleConfig.default;
+    if (!mapping) {
+      // If we have a JSX replacement for this specifier, treat it as handled (to be dropped from imports)
+      if (
+        jsxHandled.has(specifier.imported) ||
+        jsxHandled.has(specifier.local)
+      ) {
+        continue;
+      }
+      manual.push(specifier);
+      continue;
+    }
+    convertible.push({ specifier, mapping });
+  }
+
+  if (!applyMode) {
+    return { convertible, manual };
+  }
+
+  // Build replacement imports even if some manual specifiers remain; we'll keep the remaining Chakra specifiers
+
+  const grouped = new Map();
+  for (const entry of convertible) {
+    const { specifier, mapping } = entry;
+    const modulePath = mapping.module ?? moduleConfig.default?.module;
+    if (!modulePath) {
+      manual.push(specifier);
+      continue;
+    }
+    const importName = mapping.import ?? specifier.imported;
+    const localName = mapping.alias ?? specifier.local;
+    const isType = mapping.type === true || specifier.isType;
+    const key = `${modulePath}|${isType ? 'type' : 'value'}`;
+    if (!grouped.has(key)) {
+      grouped.set(key, { modulePath, isType, names: [] });
+    }
+    grouped.get(key).names.push({ importName, localName });
+  }
+
+  // Construct import lines for mapped specifiers
+
+  const parts = [];
+  for (const group of grouped.values()) {
+    const names = group.names
+      .map(({ importName, localName }) =>
+        importName === localName ? importName : `${importName} as ${localName}`,
+      )
+      .join(', ');
+    const keyword = group.isType ? 'import type' : 'import';
+    parts.push(`${keyword} { ${names} } from '${group.modulePath}';`);
+  }
+
+  // Keep remaining manual specifiers (that are not JSX-handled) from the original module
+  if (manual.length) {
+    const remaining = manual.map((s) => s.local || s.imported).filter(Boolean);
+    if (remaining.length) {
+      parts.unshift(
+        `import { ${remaining.join(', ')} } from '${moduleConfig.moduleName || ''}@chakra-ui/react';`,
+      );
+    }
+  }
+
+  return { convertible, manual, replacement: parts.join(' ') };
+}
+
+// renderImportReport and renderPostSteps now come from lib/render.js
+
+// --- JSX Transformation Helpers ---
+
+// Transform compound components like Dialog.Root, Tabs.List, etc.
+function transformCompoundComponents(input, compoundSpec) {
+  if (!input)
+    return {
+      output: input,
+      changed: false,
+      transformed: [],
+      newComponents: [],
+    };
+
+  let output = input;
+  let changed = false;
+  const transformed = [];
+  const newComponents = new Set();
+
+  // Process each compound component mapping
+  for (const [compoundName, config] of Object.entries(compoundSpec)) {
+    const escapedName = escapeRegex(compoundName);
+
+    if (config.remove) {
+      // Remove the component entirely (keep children)
+      // Opening tags: <Dialog.Backdrop ...>...</Dialog.Backdrop> → ...
+      const pattern = new RegExp(
+        `<${escapedName}([^>]*?)>([\\s\\S]*?)<\\/${escapedName}>`,
+        'g',
+      );
+      const newOutput = output.replace(pattern, (match, attrs, children) => {
+        transformed.push(compoundName);
+        return children;
+      });
+      if (newOutput !== output) {
+        output = newOutput;
+        changed = true;
+      }
+
+      // Self-closing tags: <Dialog.Backdrop ... /> → (remove entirely)
+      const selfPattern = new RegExp(`<${escapedName}([^>]*?)\\/>`, 'g');
+      const newOutput2 = output.replace(selfPattern, () => {
+        transformed.push(compoundName);
+        return '';
+      });
+      if (newOutput2 !== output) {
+        output = newOutput2;
+        changed = true;
+      }
+    } else if (config.unwrap) {
+      // Unwrap: remove the component tags but keep children
+      // <Dialog.Body ...>children</Dialog.Body> → children
+      const pattern = new RegExp(
+        `<${escapedName}([^>]*?)>([\\s\\S]*?)<\\/${escapedName}>`,
+        'g',
+      );
+      const newOutput = output.replace(pattern, (match, attrs, children) => {
+        transformed.push(compoundName);
+        return children;
+      });
+      if (newOutput !== output) {
+        output = newOutput;
+        changed = true;
+      }
+    } else if (config.component) {
+      // Replace with new component name
+      const newComponent = config.component;
+
+      // Opening tags: <Dialog.Root> → <Dialog>
+      const openPattern = new RegExp(`<${escapedName}([^/>]*?)>`, 'g');
+      output = output.replace(openPattern, (match, attrs) => {
+        transformed.push(`${compoundName} → ${newComponent}`);
+        newComponents.add(newComponent);
+        changed = true;
+        return `<${newComponent}${attrs}>`;
+      });
+
+      // Self-closing tags: <Dialog.Root ... /> → <Dialog ... />
+      const selfPattern = new RegExp(`<${escapedName}([^>]*?)\\/>`, 'g');
+      output = output.replace(selfPattern, (match, attrs) => {
+        transformed.push(`${compoundName} → ${newComponent}`);
+        newComponents.add(newComponent);
+        changed = true;
+        return `<${newComponent}${attrs}/>`;
+      });
+
+      // Closing tags: </Dialog.Root> → </Dialog>
+      const closePattern = new RegExp(`<\\/${escapedName}>`, 'g');
+      output = output.replace(closePattern, () => {
+        changed = true;
+        return `</${newComponent}>`;
+      });
+    } else if (config.tag) {
+      // Replace with JSX tag + Tailwind classes (like regular JSX transformations)
+      const toTag = config.tag;
+      const tw = config.class || '';
+
+      // Remove Chakra props by actually parsing attributes properly
+      // This helper removes known Chakra styling props
+      function removeChakraProps(attrString) {
+        const chakraPropsSet = new Set([
+          'p',
+          'm',
+          'px',
+          'py',
+          'mx',
+          'my',
+          'pt',
+          'pb',
+          'pl',
+          'pr',
+          'mt',
+          'mb',
+          'ml',
+          'mr',
+          'w',
+          'h',
+          'bg',
+          'bgColor',
+          'color',
+          'fontSize',
+          'fontWeight',
+          'textAlign',
+          'display',
+          'flex',
+          'flexDirection',
+          'direction',
+          'align',
+          'alignItems',
+          'justify',
+          'justifyContent',
+          'gap',
+          'borderRadius',
+          'rounded',
+          'border',
+          'borderWidth',
+          'borderColor',
+          'borderStyle',
+          'boxShadow',
+          'position',
+          'top',
+          'right',
+          'bottom',
+          'left',
+          'zIndex',
+          'overflow',
+          'variant',
+          'size',
+          'colorPalette',
+          'colorScheme',
+          'spacing',
+          'maxW',
+          'maxH',
+          'minW',
+          'minH',
+          'transition',
+          '_hover',
+          '_active',
+          '_focus',
+          '_disabled',
+          '_focusVisible',
+          'status',
+          'aria',
+          'loading',
+        ]);
+
+        let result = '';
+        let i = 0;
+        const str = attrString.trim();
+
+        while (i < str.length) {
+          // Skip whitespace
+          while (i < str.length && /\s/.test(str[i])) {
+            result += str[i];
+            i++;
+          }
+
+          if (i >= str.length) break;
+
+          // Match attribute name
+          let name = '';
+          while (i < str.length && /[\w-]/.test(str[i])) {
+            name += str[i];
+            i++;
+          }
+
+          if (!name) break;
+
+          // Skip whitespace after name
+          while (i < str.length && /\s/.test(str[i])) {
+            i++;
+          }
+
+          // Check if there's a value
+          if (i < str.length && str[i] === '=') {
+            i++; // skip '='
+
+            // Skip whitespace after '='
+            while (i < str.length && /\s/.test(str[i])) {
+              i++;
+            }
+
+            // Extract value
+            let value = '';
+            if (str[i] === '"' || str[i] === "'") {
+              // Quoted string
+              const quote = str[i];
+              value += str[i];
+              i++;
+              while (i < str.length && str[i] !== quote) {
+                value += str[i];
+                i++;
+              }
+              if (i < str.length) {
+                value += str[i]; // closing quote
+                i++;
+              }
+            } else if (str[i] === '{') {
+              // JSX expression - need to balance braces
+              let braceCount = 0;
+              while (i < str.length) {
+                if (str[i] === '{') braceCount++;
+                if (str[i] === '}') braceCount--;
+                value += str[i];
+                i++;
+                if (braceCount === 0) break;
+              }
+            } else {
+              // Unquoted value (boolean shorthand)
+              while (i < str.length && /[\w.-]/.test(str[i])) {
+                value += str[i];
+                i++;
+              }
+            }
+
+            // Only keep if not a Chakra prop
+            if (!chakraPropsSet.has(name)) {
+              result += name + '=' + value;
+            }
+          } else {
+            // Boolean prop (no value)
+            if (!chakraPropsSet.has(name)) {
+              result += name;
+            }
+          }
+        }
+
+        return result;
+      }
+
+      // Self-closing tags: <Card.Root ... /> → <div className="..." />
+      const selfPattern = new RegExp(`<${escapedName}([^>]*?)\\/>`, 'g');
+      output = output.replace(selfPattern, (match, attrs) => {
+        // Remove Chakra props
+        let cleanedAttrs = removeChakraProps(attrs);
+
+        // Add Tailwind classes
+        const tailwindClasses = tw ? tw.split(' ').filter(Boolean) : [];
+        let newAttrs = '';
+
+        if (cleanedAttrs.trim() || tailwindClasses.length > 0) {
+          const attrsToKeep = cleanedAttrs.trim();
+          if (tailwindClasses.length > 0) {
+            if (attrsToKeep) {
+              newAttrs = ` ${attrsToKeep} className="${tailwindClasses.join(' ')}"`;
+            } else {
+              newAttrs = ` className="${tailwindClasses.join(' ')}"`;
+            }
+          } else if (attrsToKeep) {
+            newAttrs = ` ${attrsToKeep}`;
+          }
+        }
+
+        transformed.push(`${compoundName} → ${toTag}`);
+        changed = true;
+        return `<${toTag}${newAttrs}/>`;
+      });
+
+      // Opening tags: <Card.Root> → <div className="...">
+      const openPattern = new RegExp(`<${escapedName}([^/>]*?)>`, 'g');
+      output = output.replace(openPattern, (match, attrs) => {
+        // Remove Chakra props
+        let cleanedAttrs = removeChakraProps(attrs);
+
+        // Add Tailwind classes
+        const tailwindClasses = tw ? tw.split(' ').filter(Boolean) : [];
+        let newAttrs = '';
+
+        if (cleanedAttrs.trim() || tailwindClasses.length > 0) {
+          const attrsToKeep = cleanedAttrs.trim();
+          if (tailwindClasses.length > 0) {
+            if (attrsToKeep) {
+              newAttrs = ` ${attrsToKeep} className="${tailwindClasses.join(' ')}"`;
+            } else {
+              newAttrs = ` className="${tailwindClasses.join(' ')}"`;
+            }
+          } else if (attrsToKeep) {
+            newAttrs = ` ${attrsToKeep}`;
+          }
+        }
+
+        transformed.push(`${compoundName} → ${toTag}`);
+        changed = true;
+        return `<${toTag}${newAttrs}>`;
+      });
+
+      // Closing tags: </Card.Root> → </div>
+      const closePattern = new RegExp(`<\\/${escapedName}>`, 'g');
+      output = output.replace(closePattern, () => {
+        changed = true;
+        return `</${toTag}>`;
+      });
+    }
+  }
+
+  return {
+    output,
+    changed,
+    transformed,
+    newComponents: Array.from(newComponents),
+  };
+}
+
+function transformJSX(input, jsxSpecifiers, usedSpecifiers) {
+  if (!input) return { output: input, changed: false, replaced: [] };
+  let output = input;
+  const replaced = new Set();
+  let changed = false;
+
+  // Chakra prop to Tailwind class mappings
+  const PROP_MAPPINGS = {
+    // Spacing
+    p: (v) => `p-${v}`,
+    px: (v) => `px-${v}`,
+    py: (v) => `py-${v}`,
+    pt: (v) => `pt-${v}`,
+    pb: (v) => `pb-${v}`,
+    pl: (v) => `pl-${v}`,
+    pr: (v) => `pr-${v}`,
+    m: (v) => `m-${v}`,
+    mx: (v) => `mx-${v}`,
+    my: (v) => `my-${v}`,
+    mt: (v) => `mt-${v}`,
+    mb: (v) => `mb-${v}`,
+    ml: (v) => `ml-${v}`,
+    mr: (v) => `mr-${v}`,
+    gap: (v) => `gap-${v}`,
+
+    // Sizing
+    w: (v) => (v === 'full' ? 'w-full' : `w-[${v}]`),
+    h: (v) => (v === 'full' ? 'h-full' : `h-[${v}]`),
+    width: (v) => (v === 'full' ? 'w-full' : `w-[${v}]`),
+    height: (v) => (v === 'full' ? 'h-full' : `h-[${v}]`),
+    maxW: (v) => (v === 'full' ? 'max-w-full' : `max-w-[${v}]`),
+    maxH: (v) => (v === 'full' ? 'max-h-full' : `max-h-[${v}]`),
+    minW: (v) => `min-w-[${v}]`,
+    minH: (v) => `min-h-[${v}]`,
+
+    // Flexbox
+    flex: (v) => (v === '1' || v === 1 ? 'flex-1' : `flex-[${v}]`),
+    flexDir: (v) =>
+      v === 'column' ? 'flex-col' : v === 'row' ? 'flex-row' : `flex-${v}`,
+    flexDirection: (v) =>
+      v === 'column' ? 'flex-col' : v === 'row' ? 'flex-row' : `flex-${v}`,
+    direction: (v) =>
+      v === 'column' ? 'flex-col' : v === 'row' ? 'flex-row' : `flex-${v}`,
+    align: (v) =>
+      v === 'center'
+        ? 'items-center'
+        : v === 'start'
+          ? 'items-start'
+          : v === 'end'
+            ? 'items-end'
+            : `items-${v}`,
+    alignItems: (v) =>
+      v === 'center'
+        ? 'items-center'
+        : v === 'start'
+          ? 'items-start'
+          : v === 'end'
+            ? 'items-end'
+            : `items-${v}`,
+    justify: (v) =>
+      v === 'center'
+        ? 'justify-center'
+        : v === 'between'
+          ? 'justify-between'
+          : v === 'around'
+            ? 'justify-around'
+            : `justify-${v}`,
+    justifyContent: (v) =>
+      v === 'center'
+        ? 'justify-center'
+        : v === 'between'
+          ? 'justify-between'
+          : v === 'around'
+            ? 'justify-around'
+            : `justify-${v}`,
+
+    // Display
+    display: (v) => v,
+
+    // Position
+    pos: (v) => v,
+    position: (v) => v,
+
+    // Overflow
+    overflow: (v) => `overflow-${v}`,
+    overflowX: (v) => `overflow-x-${v}`,
+    overflowY: (v) => `overflow-y-${v}`,
+
+    // Text
+    fontSize: (v) => `text-[${v}]`,
+    fontWeight: (v) =>
+      v === 'bold'
+        ? 'font-bold'
+        : v === 'semibold'
+          ? 'font-semibold'
+          : `font-${v}`,
+    textAlign: (v) => `text-${v}`,
+    color: (v) => `text-[${v}]`,
+
+    // Background
+    bg: (v) => `bg-[${v}]`,
+    bgColor: (v) => `bg-[${v}]`,
+
+    // Border
+    border: (v) => `border-[${v}]`,
+    borderLeft: (v) => `border-l-[${v}]`,
+    borderRight: (v) => `border-r-[${v}]`,
+    borderTop: (v) => `border-t-[${v}]`,
+    borderBottom: (v) => `border-b-[${v}]`,
+    borderColor: (v) => `border-[${v}]`,
+    borderRadius: (v) =>
+      v === 'sm'
+        ? 'rounded-sm'
+        : v === 'md'
+          ? 'rounded-md'
+          : v === 'lg'
+            ? 'rounded-lg'
+            : `rounded-[${v}]`,
+    rounded: (v) =>
+      v === 'sm'
+        ? 'rounded-sm'
+        : v === 'md'
+          ? 'rounded-md'
+          : v === 'lg'
+            ? 'rounded-lg'
+            : `rounded-[${v}]`,
+
+    // More flexbox
+    flexWrap: (v) => `flex-wrap${v === 'wrap' ? '' : `-${v}`}`,
+    flexShrink: (v) => `flex-shrink${v === '0' || v === 0 ? '-0' : ''}`,
+    flexGrow: (v) => `flex-grow${v === '1' || v === 1 ? '' : `-${v}`}`,
+
+    // Grid
+    columns: (v) => `grid-cols-${v}`,
+    rows: (v) => `grid-rows-${v}`,
+
+    // Opacity
+    opacity: (v) => `opacity-${Math.round(parseFloat(v) * 100)}`,
+
+    // Min/Max
+    minHeight: (v) => `min-h-[${v}]`,
+    minWidth: (v) => `min-w-[${v}]`,
+
+    // Text
+    lineClamp: (v) => `line-clamp-${v}`,
+    lineHeight: (v) => `leading-[${v}]`,
+    whiteSpace: (v) => `whitespace-${v}`,
+
+    // Border colors
+    borderLeftColor: (v) => `border-l-[${v}]`,
+    borderRightColor: (v) => `border-r-[${v}]`,
+    borderTopColor: (v) => `border-t-[${v}]`,
+    borderBottomColor: (v) => `border-b-[${v}]`,
+
+    // Misc
+    padding: (v) => `p-${v}`,
+    wrap: (v) => `flex-wrap${v === 'wrap' ? '' : `-${v}`}`,
+  };
+
+  // Component-specific prop mappings
+  const COMPONENT_SPECIFIC_PROPS = {
+    Heading: {
+      size: {
+        xs: 'text-md',
+        sm: 'text-lg',
+        md: 'text-xl',
+        lg: 'text-2xl',
+        xl: 'text-3xl',
+        '2xl': 'text-4xl',
+      },
+    },
+    Text: {
+      size: {
+        xs: 'text-xs',
+        sm: 'text-sm',
+        md: 'text-base',
+        lg: 'text-lg',
+        xl: 'text-xl',
+        '2xl': 'text-2xl',
+      },
+    },
+  };
+
+  // Parse JSX attributes from a string
+  function parseAttributes(attrString) {
+    const attrs = [];
+    let remaining = attrString.trim();
+
+    while (remaining) {
+      // Skip leading whitespace
+      remaining = remaining.replace(/^\s+/, '');
+      if (!remaining) break;
+
+      // Match attribute name (including hyphens for aria-*, data-*, etc.)
+      const nameMatch = remaining.match(/^([\w-]+)/);
+      if (!nameMatch) break;
+
+      const name = nameMatch[1];
+      remaining = remaining.slice(name.length);
+
+      // Check if there's a value
+      if (remaining.match(/^\s*=/)) {
+        remaining = remaining.replace(/^\s*=\s*/, '');
+
+        let value = null;
+        let isJSX = false;
+        let fullMatch = name + '=';
+
+        if (remaining[0] === '{') {
+          // JSX expression - need to balance braces
+          let depth = 0;
+          let i = 0;
+          for (; i < remaining.length; i++) {
+            if (remaining[i] === '{') depth++;
+            if (remaining[i] === '}') depth--;
+            if (depth === 0) break;
+          }
+          value = remaining.slice(1, i);
+          fullMatch += remaining.slice(0, i + 1);
+          remaining = remaining.slice(i + 1);
+          isJSX = true;
+        } else if (remaining[0] === '"') {
+          // Double quoted string
+          const endQuote = remaining.indexOf('"', 1);
+          value = remaining.slice(1, endQuote);
+          fullMatch += remaining.slice(0, endQuote + 1);
+          remaining = remaining.slice(endQuote + 1);
+        } else if (remaining[0] === "'") {
+          // Single quoted string
+          const endQuote = remaining.indexOf("'", 1);
+          value = remaining.slice(1, endQuote);
+          fullMatch += remaining.slice(0, endQuote + 1);
+          remaining = remaining.slice(endQuote + 1);
+        }
+
+        attrs.push({ name, value, isJSX, fullMatch });
+      } else {
+        // Boolean attribute
+        attrs.push({ name, value: true, isJSX: false, fullMatch: name });
+      }
+    }
+
+    return attrs;
+  }
+
+  // Transform Chakra props to Tailwind classes
+  function transformChakraProps(attrString, componentName) {
+    const attrs = parseAttributes(attrString);
+    const tailwindClasses = [];
+    const keepAttrs = [];
+    let asElement = null;
+
+    for (const attr of attrs) {
+      if (attr.name === 'className' || attr.name === 'class') {
+        // Keep className as-is, we'll merge with it later
+        keepAttrs.push(attr);
+        continue;
+      }
+
+      // Skip Chakra pseudo-props (require manual conversion)
+      if (attr.name.startsWith('_')) {
+        // _hover, _active, _focus, etc. - skip these (will be removed)
+        continue;
+      }
+
+      // Keep 'as' prop for now - it will cause type errors but won't break JSX
+      // TODO: Handle polymorphic 'as' prop transformation
+      if (attr.name === 'as') {
+        keepAttrs.push(attr);
+        continue;
+      }
+
+      // Keep data and aria attributes
+      if (attr.name.startsWith('data-') || attr.name.startsWith('aria-')) {
+        keepAttrs.push(attr);
+        continue;
+      }
+
+      // Check for component-specific prop handling
+      const componentProps = COMPONENT_SPECIFIC_PROPS[componentName];
+      if (componentProps && componentProps[attr.name]) {
+        // Component-specific transformation
+        try {
+          let value = attr.value;
+          if (attr.isJSX) {
+            value = value.trim().replace(/^["']|["']$/g, '');
+          }
+          const mapping = componentProps[attr.name];
+          const twClass = mapping[value] || mapping[value.toString()];
+          if (twClass) {
+            tailwindClasses.push(twClass);
+            continue; // Don't keep the original attribute
+          }
+        } catch {
+          // Fall through to default handling
+        }
+      }
+
+      const mapper = PROP_MAPPINGS[attr.name];
+      if (mapper) {
+        // Transform Chakra prop to Tailwind
+        try {
+          let value = attr.value;
+          // Handle JSX expressions: extract the value if it's a simple literal
+          if (attr.isJSX) {
+            value = value.trim();
+            // Remove quotes if present
+            value = value.replace(/^["']|["']$/g, '');
+          }
+          const twClass = mapper(value);
+          if (twClass) {
+            tailwindClasses.push(twClass);
+          }
+        } catch {
+          // If transformation fails, keep the original attribute
+          keepAttrs.push(attr);
+        }
+      } else {
+        // Keep attributes we don't recognize
+        keepAttrs.push(attr);
+      }
+    }
+
+    return { tailwindClasses, keepAttrs, asElement };
+  }
+
+  // Reconstruct attribute string from parsed attributes
+  function reconstructAttrs(keepAttrs, tailwindClasses) {
+    const parts = [];
+
+    // Add kept attributes
+    for (const attr of keepAttrs) {
+      if (attr.name === 'className' || attr.name === 'class') {
+        // Merge Tailwind classes with existing className
+        if (tailwindClasses.length > 0) {
+          const existingClasses = attr.isJSX ? attr.value : attr.value;
+          if (attr.isJSX) {
+            // className={...} - merge into template literal
+            parts.push(
+              `className={\`${tailwindClasses.join(' ')} \${${existingClasses}}\`}`,
+            );
+          } else {
+            // className="..." - simple string concatenation
+            parts.push(
+              `className="${tailwindClasses.join(' ')} ${existingClasses}"`,
+            );
+          }
+          tailwindClasses.length = 0; // Clear so we don't add again
+        } else {
+          parts.push(attr.fullMatch);
+        }
+      } else {
+        parts.push(attr.fullMatch);
+      }
+    }
+
+    // If we have Tailwind classes but no existing className, add it
+    if (tailwindClasses.length > 0) {
+      parts.push(`className="${tailwindClasses.join(' ')}"`);
+    }
+
+    return parts.length > 0 ? ' ' + parts.join(' ') : '';
+  }
+
+  // Inject Tailwind classes into className attribute (legacy - kept for backward compat)
+  // legacy helper removed (unused)
+
+  for (const [fromName, spec] of Object.entries(jsxSpecifiers)) {
+    if (usedSpecifiers && usedSpecifiers.size && !usedSpecifiers.has(fromName))
+      continue;
+    const toTag = spec.tag || 'div';
+    const tw = spec.class || '';
+    const escapedFromName = escapeRegex(fromName);
+
+    // Self-closing tags: <From ... />
+    // Use negative lookbehind to avoid matching TypeScript generics (e.g., Array<Text>)
+    // JSX tags are preceded by: =, (, {, >, whitespace, or start of string
+    const selfClosing = new RegExp(
+      `(?<=[=({>\\s]|^)<${escapedFromName}([^>]*?)\\/>`,
+      'gs',
+    );
+    output = output.replace(selfClosing, (match, attrs) => {
+      // Transform Chakra props to Tailwind classes, passing component name for context
+      const { tailwindClasses, keepAttrs } = transformChakraProps(
+        attrs,
+        fromName,
+      );
+      // Add component-specific Tailwind classes from config
+      if (tw) {
+        tailwindClasses.unshift(...tw.split(' ').filter(Boolean));
+      }
+      // Reconstruct attributes with transformed props
+      let newAttrs = reconstructAttrs(keepAttrs, tailwindClasses);
+
+      changed = true;
+      replaced.add(fromName);
+      return `<${toTag}${newAttrs}/>`;
+    });
+
+    // Opening tags: <From ...>
+    // Use negative lookbehind to avoid matching TypeScript generics (e.g., React.FC<TextProps>)
+    // JSX tags are preceded by: =, (, {, >, whitespace, or start of string
+    const opening = new RegExp(
+      `(?<=[=({>\\s]|^)<${escapedFromName}([^>]*?)>`,
+      'gs',
+    );
+    output = output.replace(opening, (match, attrs) => {
+      // Transform Chakra props to Tailwind classes, passing component name for context
+      const { tailwindClasses, keepAttrs } = transformChakraProps(
+        attrs,
+        fromName,
+      );
+      // Add component-specific Tailwind classes from config
+      if (tw) {
+        tailwindClasses.unshift(...tw.split(' ').filter(Boolean));
+      }
+      // Reconstruct attributes with transformed props
+      let newAttrs = reconstructAttrs(keepAttrs, tailwindClasses);
+
+      changed = true;
+      replaced.add(fromName);
+      return `<${toTag}${newAttrs}>`;
+    });
+
+    // Closing tags: </From>
+    const closing = new RegExp(`<\\/${escapedFromName}\\s*>`, 'g');
+    output = output.replace(closing, () => {
+      changed = true;
+      replaced.add(fromName);
+      return `</${toTag}>`;
+    });
+  }
+
+  return { output, changed, replaced };
+}