@fragments-sdk/cli 0.14.3 → 0.15.1

package/src/commands/scan.ts

@@ -22,6 +22,7 @@ import {
 import {
   loadConfig,
   discoverAllComponents,
+  findConfigFile,
   type DiscoveredComponent,
 } from "../core/node.js";
 import {
@@ -38,6 +39,7 @@ import {
   type PropsExtractionResult,
   type ParsedStoryFile,
 } from "../service/index.js";
+import { getGeneratorVersion } from '@fragments-sdk/compiler';
 
 export interface ScanOptions {
   /** Path to config file */
@@ -146,6 +148,7 @@ export async function scan(options: ScanOptions = {}): Promise<ScanResult> {
     try {
       const extraction = await extractPropsFromFile(comp.sourcePath, {
         propsTypeName: `${comp.name}Props`,
+        componentName: comp.name,
       });
 
       propsResults.set(comp.name, extraction);
@@ -270,10 +273,21 @@ export async function scan(options: ScanOptions = {}): Promise<ScanResult> {
   // Write output
   const outputPath = resolve(configDir, outputFile);
   await mkdir(dirname(outputPath), { recursive: true });
+  const generatorVersion = await getGeneratorVersion();
+  const buildInputs = components
+    .map((component) => relative(configDir, component.sourcePath).split("\\").join("/"))
+    .sort();
+  const configPath = options.config ? resolve(process.cwd(), options.config) : findConfigFile(configDir);
+  if (configPath) {
+    buildInputs.push(relative(configDir, configPath).split("\\").join("/"));
+    buildInputs.sort();
+  }
 
   const output: CompiledFragmentsFile = {
     version: "1.0.0",
     generatedAt: new Date().toISOString(),
+    generatorVersion,
+    buildInputs,
     fragments,
   };
 

package/src/commands/setup.ts

@@ -456,6 +456,28 @@ function generateScssSeedImport(brand?: string): string {
 `;
 }
 
+// ============================================
+// Step runner
+// ============================================
+
+async function runSetupStep(
+  fn: () => Promise<{ modified: boolean; message: string }>,
+  failureLabel: string,
+  actions: string[],
+  errors: string[],
+): Promise<void> {
+  try {
+    const result = await fn();
+    const icon = result.modified ? pc.green('+') : pc.dim('·');
+    console.log(`  ${icon} ${result.message}`);
+    if (result.modified) actions.push(result.message);
+  } catch (error) {
+    const msg = `${failureLabel}: ${error instanceof Error ? error.message : error}`;
+    console.log(`  ${pc.red('✗')} ${msg}`);
+    errors.push(msg);
+  }
+}
+
 // ============================================
 // Main Setup Function
 // ============================================
@@ -491,72 +513,27 @@ export async function setup(options: SetupOptions = {}): Promise<SetupResult> {
 
   // 3. Add styles import
   if (entryFile) {
-    try {
-      const result = await addStylesImport(root, entryFile);
-      const icon = result.modified ? pc.green('+') : pc.dim('·');
-      console.log(`  ${icon} ${result.message}`);
-      if (result.modified) actions.push(result.message);
-    } catch (error) {
-      const msg = `Failed to add styles import: ${error instanceof Error ? error.message : error}`;
-      console.log(`  ${pc.red('✗')} ${msg}`);
-      errors.push(msg);
-    }
+    await runSetupStep(() => addStylesImport(root, entryFile), 'Failed to add styles import', actions, errors);
   }
 
   // 4. Add ThemeProvider imports
   if (entryFile) {
-    try {
-      const result = await addThemeProvider(root, entryFile, framework);
-      const icon = result.modified ? pc.green('+') : pc.dim('·');
-      console.log(`  ${icon} ${result.message}`);
-      if (result.modified) actions.push(result.message);
-    } catch (error) {
-      const msg = `Failed to add ThemeProvider: ${error instanceof Error ? error.message : error}`;
-      console.log(`  ${pc.red('✗')} ${msg}`);
-      errors.push(msg);
-    }
+    await runSetupStep(() => addThemeProvider(root, entryFile, framework), 'Failed to add ThemeProvider', actions, errors);
   }
 
   // 5. Next.js: add transpilePackages
   if (framework === 'nextjs-app' || framework === 'nextjs-pages') {
-    try {
-      const result = await addTranspilePackages(root);
-      const icon = result.modified ? pc.green('+') : pc.dim('·');
-      console.log(`  ${icon} ${result.message}`);
-      if (result.modified) actions.push(result.message);
-    } catch (error) {
-      const msg = `Failed to update next.config: ${error instanceof Error ? error.message : error}`;
-      console.log(`  ${pc.red('✗')} ${msg}`);
-      errors.push(msg);
-    }
+    await runSetupStep(() => addTranspilePackages(root), 'Failed to update next.config', actions, errors);
   }
 
   // 6. Create SCSS seeds file (if --scss flag or brand color specified)
   if (options.scss || options.brand) {
-    try {
-      const result = await createScssSeeds(root, options.brand);
-      const icon = result.modified ? pc.green('+') : pc.dim('·');
-      console.log(`  ${icon} ${result.message}`);
-      if (result.modified) actions.push(result.message);
-    } catch (error) {
-      const msg = `Failed to create SCSS seeds: ${error instanceof Error ? error.message : error}`;
-      console.log(`  ${pc.red('✗')} ${msg}`);
-      errors.push(msg);
-    }
+    await runSetupStep(() => createScssSeeds(root, options.brand), 'Failed to create SCSS seeds', actions, errors);
   }
 
   // 7. Configure MCP server (if --mcp flag)
   if (options.mcp) {
-    try {
-      const result = await setupMcpConfig(root);
-      const icon = result.modified ? pc.green('+') : pc.dim('·');
-      console.log(`  ${icon} ${result.message}`);
-      if (result.modified) actions.push(result.message);
-    } catch (error) {
-      const msg = `Failed to configure MCP: ${error instanceof Error ? error.message : error}`;
-      console.log(`  ${pc.red('✗')} ${msg}`);
-      errors.push(msg);
-    }
+    await runSetupStep(() => setupMcpConfig(root), 'Failed to configure MCP', actions, errors);
   }
 
   // Summary

package/src/commands/sync.ts

@@ -13,8 +13,8 @@ import { BRAND } from '../core/index.js';
 import { loadConfig } from '../core/node.js';
 import { discoverFragmentFiles, loadFragmentFile } from '../core/node.js';
 import { parseFragmentFile } from '../core/parser.js';
-import { resolveComponentSourcePath } from '../core/auto-props.js';
-import { createComponentExtractor, type PropMeta, type CompositionMeta } from '../core/component-extractor.js';
+import { resolveComponentSourcePath } from '@fragments-sdk/extract';
+import { createComponentExtractor, type PropMeta, type CompositionMeta } from '@fragments-sdk/extract';
 import type { FragmentsConfig } from '@fragments-sdk/core';
 
 // ---------------------------------------------------------------------------

package/src/commands/tokens-generate.ts

@@ -0,0 +1,113 @@
+/**
+ * fragments tokens generate — Generate CSS, SCSS, Tailwind, or Figma output
+ * from a DTCG .tokens.json source file.
+ */
+
+import { readFile, writeFile, mkdir } from 'node:fs/promises';
+import { resolve, dirname, basename, extname } from 'node:path';
+import pc from 'picocolors';
+import {
+  generateCSSCustomProperties,
+  generateSCSSVariables,
+  generateTailwindConfig,
+  generateFigmaVariables,
+} from '../core/index.js';
+import type { DTCGTokenFile } from '../core/index.js';
+
+export interface TokensGenerateOptions {
+  /** Path to DTCG .tokens.json source file */
+  from: string;
+  /** Output formats (comma-separated: css, scss, tailwind, figma) */
+  format: string;
+  /** Output directory */
+  out?: string;
+  /** Token name prefix */
+  prefix?: string;
+  /** CSS selector for custom properties (default: ':root') */
+  selector?: string;
+  /** Verbose output */
+  verbose?: boolean;
+}
+
+type OutputFormat = 'css' | 'scss' | 'tailwind' | 'figma';
+
+const VALID_FORMATS = new Set<OutputFormat>(['css', 'scss', 'tailwind', 'figma']);
+
+export async function tokensGenerate(options: TokensGenerateOptions): Promise<void> {
+  const { from, format, out, prefix, selector, verbose } = options;
+
+  // Parse formats
+  const formats = format.split(',').map((f) => f.trim().toLowerCase()) as OutputFormat[];
+  const invalidFormats = formats.filter((f) => !VALID_FORMATS.has(f));
+  if (invalidFormats.length > 0) {
+    console.error(pc.red(`Invalid format(s): ${invalidFormats.join(', ')}`));
+    console.error(`Valid formats: ${[...VALID_FORMATS].join(', ')}`);
+    process.exit(1);
+  }
+
+  // Read source file
+  const sourcePath = resolve(process.cwd(), from);
+  let content: string;
+  try {
+    content = await readFile(sourcePath, 'utf-8');
+  } catch {
+    console.error(pc.red(`Could not read file: ${sourcePath}`));
+    process.exit(1);
+  }
+
+  let tokens: DTCGTokenFile;
+  try {
+    tokens = JSON.parse(content) as DTCGTokenFile;
+  } catch {
+    console.error(pc.red(`Invalid JSON in: ${sourcePath}`));
+    process.exit(1);
+  }
+
+  // Determine output directory
+  const outDir = out ? resolve(process.cwd(), out) : dirname(sourcePath);
+  await mkdir(outDir, { recursive: true });
+
+  const baseName = basename(from, extname(from)).replace(/\.tokens$/, '');
+
+  // Generate each format
+  for (const fmt of formats) {
+    let output: string;
+    let fileName: string;
+
+    switch (fmt) {
+      case 'css': {
+        output = generateCSSCustomProperties(tokens, { prefix, selector });
+        fileName = `${baseName}.css`;
+        break;
+      }
+      case 'scss': {
+        output = generateSCSSVariables(tokens, { prefix });
+        fileName = `_${baseName}.scss`;
+        break;
+      }
+      case 'tailwind': {
+        const config = generateTailwindConfig(tokens);
+        output = `// Auto-generated Tailwind config from DTCG tokens\n// Do not edit directly\nexport default ${JSON.stringify(config, null, 2)};\n`;
+        fileName = `tailwind.tokens.js`;
+        break;
+      }
+      case 'figma': {
+        const collections = generateFigmaVariables(tokens);
+        output = JSON.stringify(collections, null, 2);
+        fileName = `${baseName}.figma-variables.json`;
+        break;
+      }
+      default:
+        continue;
+    }
+
+    const outputPath = resolve(outDir, fileName);
+    await writeFile(outputPath, output, 'utf-8');
+
+    if (verbose) {
+      console.log(pc.green(`  ✓ ${fmt}`), pc.dim(outputPath));
+    }
+  }
+
+  console.log(pc.green(`Generated ${formats.length} output(s) from ${from}`));
+}

package/src/commands/tokens-push.ts

@@ -0,0 +1,199 @@
+/**
+ * fragments tokens push — Push code tokens to Fragments Cloud for drift comparison.
+ *
+ * Extracts CSS custom properties from Tailwind v4 @theme blocks (or config-based
+ * token files) and POSTs them to the Fragments Cloud /api/ingest endpoint.
+ * Supports --dry-run for local inspection without pushing.
+ */
+
+import { resolve } from 'node:path';
+import pc from 'picocolors';
+
+// ---------------------------------------------------------------------------
+// Options
+// ---------------------------------------------------------------------------
+
+export interface TokensPushOptions {
+  /** Path to fragments config file */
+  config?: string;
+  /** Path to Tailwind v4 CSS file with @theme block */
+  tailwindV4?: string;
+  /** Parse and display tokens without pushing */
+  dryRun?: boolean;
+  /** Show detailed output */
+  verbose?: boolean;
+}
+
+// ---------------------------------------------------------------------------
+// tokensPush
+// ---------------------------------------------------------------------------
+
+export async function tokensPush(options: TokensPushOptions): Promise<void> {
+  const startTime = Date.now();
+
+  // 1. Resolve API credentials
+  const apiKey = process.env.FRAGMENTS_API_KEY;
+  const baseUrl = process.env.FRAGMENTS_URL || 'https://app.usefragments.com';
+
+  if (!apiKey && !options.dryRun) {
+    console.error(pc.red('Error: FRAGMENTS_API_KEY environment variable is required'));
+    console.error(pc.dim('Get your API key from https://app.usefragments.com/api-keys'));
+    process.exit(1);
+  }
+
+  // 2. Token extraction
+  const flatMap: Record<string, string> = {};
+
+  if (options.tailwindV4) {
+    // Use @theme parser for Tailwind v4 CSS files
+    const { parseTailwindV4File } = await import('../service/token-parser.js');
+
+    const filePath = resolve(process.cwd(), options.tailwindV4);
+    const result = parseTailwindV4File(filePath);
+
+    if (result.errors.length > 0) {
+      for (const err of result.errors) {
+        console.error(pc.red(`  Error: ${err.message}`));
+      }
+    }
+
+    if (options.verbose && result.warnings.length > 0) {
+      for (const warn of result.warnings) {
+        console.warn(pc.yellow(`  Warning: ${warn}`));
+      }
+    }
+
+    for (const token of result.tokens) {
+      flatMap[token.name] = token.resolvedValue;
+    }
+
+    if (options.verbose) {
+      console.log(
+        pc.dim(`  Parsed ${result.tokens.length} tokens from ${options.tailwindV4} (${result.parseTimeMs.toFixed(1)}ms)`),
+      );
+    }
+  } else if (options.config) {
+    // Use config-based token extraction
+    try {
+      const { loadConfig } = await import('../core/node.js');
+      const { parseTokenFiles } = await import('../service/index.js');
+
+      const { config, configDir } = await loadConfig(options.config);
+      if (config.tokens?.include?.length) {
+        const result = await parseTokenFiles(config.tokens, configDir);
+        for (const token of result.tokens) {
+          flatMap[token.name] = token.resolvedValue;
+        }
+
+        if (options.verbose) {
+          console.log(
+            pc.dim(`  Parsed ${result.tokens.length} tokens from config (${result.parseTimeMs.toFixed(1)}ms)`),
+          );
+        }
+      } else {
+        console.error(pc.red('Error: Config file has no tokens.include patterns'));
+        process.exit(1);
+      }
+    } catch (error) {
+      console.error(pc.red('Error loading config:'), error instanceof Error ? error.message : error);
+      process.exit(1);
+    }
+  } else {
+    // No source specified — try auto-detection
+    try {
+      const { loadConfig } = await import('../core/node.js');
+      const { parseTokenFiles } = await import('../service/index.js');
+
+      const { config, configDir } = await loadConfig();
+      if (config.tokens?.include?.length) {
+        const result = await parseTokenFiles(config.tokens, configDir);
+        for (const token of result.tokens) {
+          flatMap[token.name] = token.resolvedValue;
+        }
+
+        if (options.verbose) {
+          console.log(
+            pc.dim(`  Parsed ${result.tokens.length} tokens from auto-detected config (${result.parseTimeMs.toFixed(1)}ms)`),
+          );
+        }
+      }
+    } catch {
+      // No config found — fall through to error
+    }
+
+    if (Object.keys(flatMap).length === 0) {
+      console.error(pc.red('Error: No token source specified'));
+      console.error(pc.dim('Provide one of:'));
+      console.error(pc.dim('  --tailwind-v4 <path>  Path to Tailwind v4 CSS file with @theme block'));
+      console.error(pc.dim('  --config <path>       Path to fragments config with tokens.include'));
+      console.error(pc.dim('\nExample: fragments tokens push --tailwind-v4 ./app.css'));
+      process.exit(1);
+    }
+  }
+
+  const tokenCount = Object.keys(flatMap).length;
+
+  if (tokenCount === 0) {
+    console.log(pc.yellow('No tokens found.'));
+    return;
+  }
+
+  console.log(pc.cyan(`Found ${tokenCount} tokens`));
+
+  // 3. Dry run — display tokens and exit
+  if (options.dryRun) {
+    console.log(pc.dim('\nDry run — tokens that would be pushed:\n'));
+    const entries = Object.entries(flatMap);
+    for (const [name, value] of entries.slice(0, 20)) {
+      console.log(`  ${pc.bold(name)}: ${value}`);
+    }
+    if (entries.length > 20) {
+      console.log(pc.dim(`  ... and ${entries.length - 20} more`));
+    }
+    return;
+  }
+
+  // 4. POST to Fragments Cloud
+  try {
+    const response = await fetch(`${baseUrl}/api/ingest`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': `Bearer ${apiKey}`,
+      },
+      body: JSON.stringify({
+        codeTokens: JSON.stringify(flatMap),
+      }),
+    });
+
+    if (!response.ok) {
+      const errorText = await response.text();
+      console.error(pc.red(`Error: API returned ${response.status}`));
+      console.error(pc.dim(errorText));
+      process.exit(1);
+    }
+
+    const result = await response.json() as Record<string, unknown>;
+
+    console.log(pc.green(`\nPushed ${tokenCount} tokens to Fragments Cloud`));
+
+    if (result.tokenDrift) {
+      const drift = result.tokenDrift as Record<string, unknown>;
+      const summary = drift.summary as Record<string, number> | undefined;
+      if (summary) {
+        console.log(pc.cyan('\nDrift Summary:'));
+        if (summary.total !== undefined) console.log(pc.dim(`  Total issues: ${summary.total}`));
+        if (summary.missingInCode > 0) console.log(pc.yellow(`  Missing in code: ${summary.missingInCode}`));
+        if (summary.missingInFigma > 0) console.log(pc.yellow(`  Missing in Figma: ${summary.missingInFigma}`));
+        if (summary.valueMismatch > 0) console.log(pc.yellow(`  Value mismatches: ${summary.valueMismatch}`));
+        if (summary.score !== undefined) console.log(`  Health score: ${summary.score}%`);
+      }
+    }
+
+    console.log(pc.dim(`\nView dashboard: ${baseUrl}/tokens`));
+    console.log(pc.dim(`Completed in ${Date.now() - startTime}ms`));
+  } catch (error) {
+    console.error(pc.red('Error pushing tokens:'), error instanceof Error ? error.message : error);
+    process.exit(1);
+  }
+}

package/src/commands/verify.ts

@@ -6,7 +6,14 @@
  */
 
 import pc from 'picocolors';
-import { BRAND } from '../core/index.js';
+import { readFile } from 'node:fs/promises';
+import { resolve } from 'node:path';
+import { existsSync } from 'node:fs';
+import {
+  BRAND,
+  type CompiledFragment,
+  type CompiledFragmentsFile,
+} from '../core/index.js';
 import { loadConfig } from '../core/node.js';
 import {
   createDevServerClient,
@@ -86,6 +93,10 @@ export async function verify(
     console.log(pc.dim(`Minimum compliance: ${minCompliance}%\n`));
   }
 
+  if (ci) {
+    return verifyFromLocalFragments(configPath, minCompliance, component);
+  }
+
   // Check if dev server is reachable
   const isReachable = await client.ping();
   if (!isReachable) {
@@ -213,3 +224,186 @@ export async function verify(
 
   return summary;
 }
+
+/**
+ * Compute metadata completeness score for a compiled fragment.
+ *
+ * Scoring breakdown (max 100):
+ *  - Has description:                       +20
+ *  - Has category that isn't "Components":  +15
+ *  - Has when/whenNot usage guidelines:     +20
+ *  - Has props with types:                  +20
+ *  - Has variants:                          +15
+ *  - Has relations:                         +10
+ */
+function computeMetadataScore(fragment: CompiledFragment): {
+  score: number;
+  violations: ViolationItem[];
+} {
+  let score = 0;
+  const violations: ViolationItem[] = [];
+
+  // Description (+20)
+  if (fragment.meta.description && fragment.meta.description.trim().length > 0) {
+    score += 20;
+  } else {
+    violations.push({
+      property: 'meta.description',
+      issue: 'Missing component description',
+      severity: 'warning',
+      suggestion: 'Add a description to the fragment definition',
+    });
+  }
+
+  // Category that isn't the default "Components" (+15)
+  if (fragment.meta.category && fragment.meta.category !== 'Components') {
+    score += 15;
+  } else {
+    violations.push({
+      property: 'meta.category',
+      issue: fragment.meta.category === 'Components'
+        ? 'Using default category "Components"'
+        : 'Missing category',
+      severity: 'warning',
+      suggestion: 'Set a specific category (e.g., "forms", "layout", "feedback")',
+    });
+  }
+
+  // Usage guidelines — when/whenNot (+20)
+  const hasWhen = fragment.usage?.when && fragment.usage.when.length > 0;
+  const hasWhenNot = fragment.usage?.whenNot && fragment.usage.whenNot.length > 0;
+  if (hasWhen || hasWhenNot) {
+    score += 20;
+  } else {
+    violations.push({
+      property: 'usage.when / usage.whenNot',
+      issue: 'Missing usage guidelines',
+      severity: 'warning',
+      suggestion: 'Add when[] and whenNot[] arrays to describe appropriate usage',
+    });
+  }
+
+  // Props with types (+20)
+  const propKeys = Object.keys(fragment.props ?? {});
+  if (propKeys.length > 0) {
+    score += 20;
+  } else {
+    violations.push({
+      property: 'props',
+      issue: 'No props defined',
+      severity: 'warning',
+      suggestion: 'Define props with types in the fragment definition',
+    });
+  }
+
+  // Variants (+15)
+  if (fragment.variants && fragment.variants.length > 0) {
+    score += 15;
+  } else {
+    violations.push({
+      property: 'variants',
+      issue: 'No variants defined',
+      severity: 'warning',
+      suggestion: 'Add at least one variant showing component usage',
+    });
+  }
+
+  // Relations (+10)
+  if (fragment.relations && fragment.relations.length > 0) {
+    score += 10;
+  } else {
+    violations.push({
+      property: 'relations',
+      issue: 'No component relations defined',
+      severity: 'warning',
+      suggestion: 'Define relations to related components (parent, child, alternative)',
+    });
+  }
+
+  return { score, violations };
+}
+
+/**
+ * CI fallback: verify components from the local fragments.json file
+ * without requiring a running dev server.
+ */
+async function verifyFromLocalFragments(
+  configPath: string | undefined,
+  minCompliance: number,
+  component: string | undefined,
+): Promise<VerifySummary> {
+  // Load config to resolve outFile
+  const { config, configDir } = await loadConfig(configPath);
+  const outFile = config.outFile ?? 'fragments.json';
+  const fragmentsPath = resolve(configDir ?? process.cwd(), outFile);
+
+  if (!existsSync(fragmentsPath)) {
+    const error = {
+      error: `fragments.json not found at ${fragmentsPath}. Run "fragments build" first.`,
+    };
+    console.log(JSON.stringify(error));
+    process.exit(1);
+  }
+
+  const raw = await readFile(fragmentsPath, 'utf-8');
+  const data: CompiledFragmentsFile = JSON.parse(raw);
+
+  // Filter to only local fragments (skip anything from node_modules)
+  let entries = Object.entries(data.fragments).filter(
+    ([, frag]) => !frag.filePath.includes('node_modules')
+  );
+
+  // Filter by specific component if requested
+  if (component) {
+    entries = entries.filter(
+      ([name]) => name.toLowerCase() === component.toLowerCase()
+    );
+
+    if (entries.length === 0) {
+      const error = { error: `Component "${component}" not found in local fragments` };
+      console.log(JSON.stringify(error));
+      process.exit(1);
+    }
+  }
+
+  const results: VerifyResultItem[] = [];
+  let totalCompliance = 0;
+
+  for (const [name, fragment] of entries) {
+    const { score, violations } = computeMetadataScore(fragment);
+    const passed = score >= minCompliance;
+
+    results.push({
+      component: name,
+      compliance: score,
+      passed,
+      violations,
+      totalProperties: Object.keys(fragment.props ?? {}).length,
+      hardcoded: 0,
+      usingTokens: 0,
+    });
+
+    totalCompliance += score;
+  }
+
+  const componentCount = entries.length;
+  const averageCompliance = componentCount > 0 ? totalCompliance / componentCount : 100;
+  const allPassed = results.every(r => r.passed);
+
+  const summary: VerifySummary = {
+    passed: allPassed,
+    compliance: Math.round(averageCompliance * 100) / 100,
+    threshold: minCompliance,
+    totalComponents: componentCount,
+    passedComponents: results.filter(r => r.passed).length,
+    failedComponents: results.filter(r => !r.passed).length,
+    results,
+    violations: results.flatMap(r => r.violations.map(v => ({
+      component: r.component,
+      ...v,
+    }))),
+  };
+
+  console.log(JSON.stringify(summary, null, 2));
+  return summary;
+}

package/src/core/__fixtures__/shadcn-input/input.tsx

@@ -0,0 +1,7 @@
+import * as React from 'react';
+
+function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
+  return <input className={className} type={type} {...props} />;
+}
+
+export { Input };