@frontfriend/tailwind 2.1.0 → 2.1.2

package/dist/cli.js

@@ -1,23 +1,65 @@
 #!/usr/bin/env node
-var{Command:v}=require("commander"),m=require("./lib/config/config-loader"),h=require("./lib/config/cache-manager"),{APIClient:y}=require("./lib/core/api-client"),{ComponentDownloader:b}=require("./lib/core/component-downloader"),x=require("./lib/core/token-processor"),{ConfigError:d,APIError:D,CacheError:w}=require("./lib/core/errors"),I=require("path"),i=new v;i.name("frontfriend").description("FrontFriend Tailwind CLI - Manage design tokens and cache").version("2.0.0");i.command("init").description("Initialize FrontFriend configuration and fetch from API").option("--force","Force refresh even if cache is valid").action(async n=>{try{console.log("\u{1F527} FrontFriend Setup"),console.log(`==================
-`);let o=await new m().load();if(!o.ffId)throw new d(`ff-id not found in frontfriend.config.js
+var O=(e,n)=>()=>(n||e((n={exports:{}}).exports,n),n.exports);var S=O((V,I)=>{var u=require("fs"),F=require("path");function D(){let e=process.cwd(),n=F.join(e,"node_modules",".cache","frontfriend","icons.json"),o=F.join(e,"types","frontfriend-icons.d.ts");u.existsSync(n)||(console.error('[FrontFriend] Error: icons.json not found. Please run "npx frontfriend setup" first.'),process.exit(1));try{let r=function(t){for(let i of Object.values(t))typeof i=="string"?s.add(i):typeof i=="object"&&i!==null&&r(i)},g=function(t,i="  "){let f=[];for(let[k,h]of Object.entries(t))typeof h=="string"?f.push(`${i}${k}: '${h}';`):typeof h=="object"&&h!==null&&(f.push(`${i}${k}: {`),f.push(g(h,i+"  ")),f.push(`${i}};`));return f.join(`
+`)};var a=r,c=g;let l=JSON.parse(u.readFileSync(n,"utf-8")),s=new Set;r(l);let p=Array.from(s).map(t=>`'${t}'`).join(" | "),y=`// Generated by @frontfriend/tailwind
+// DO NOT EDIT THIS FILE MANUALLY
+
+import type { IconSetStructure } from '@frontfriend/tailwind';
+
+declare module '@frontfriend/tailwind' {
+  // Icon names used in this project
+  export type ProjectIconName = ${p||"string"};
+
+  // Typed iconSet structure with exact icon names
+  export interface TypedIconSet extends IconSetStructure {
+${g(l)}
+  }
+
+  // Override the iconSet type with the typed version
+  export const iconSet: TypedIconSet;
+}
+
+// Augment Vue component types with exact icon names
+declare module '*/components/ui/icon/*.vue' {
+  export type IconName = ${p||"string"};
+}
+
+declare module '@/components/ui/icon/*.vue' {
+  export type IconName = ${p||"string"};
+}
+
+declare module '@/components/ui/icon' {
+  export type IconName = ${p||"string"};
+}
+
+declare module '@/src/components/ui/icon' {
+  export type IconName = ${p||"string"};
+}
+
+declare module '@/src/components/ui/icon/Icon.vue' {
+  export type IconName = ${p||"string"};
+}
+`,$=F.dirname(o);u.existsSync($)||u.mkdirSync($,{recursive:!0}),u.writeFileSync(o,y),console.log("[FrontFriend] \u2713 Generated icon types at types/frontfriend-icons.d.ts");let w=F.join(e,"tsconfig.json");if(u.existsSync(w)){let t=JSON.parse(u.readFileSync(w,"utf-8"));t.include||(t.include=[]);let i="types/**/*.d.ts";t.include.includes(i)||(t.include.push(i),u.writeFileSync(w,JSON.stringify(t,null,2)),console.log("[FrontFriend] \u2713 Updated tsconfig.json to include generated types"))}}catch(l){console.error("[FrontFriend] Error generating icon types:",l.message),process.exit(1)}}require.main===I&&D();I.exports={generateIconTypes:D}});var{Command:L}=require("commander"),x=require("./lib/config/config-loader"),j=require("./lib/config/cache-manager"),{APIClient:R}=require("./lib/core/api-client"),{ComponentDownloader:q}=require("./lib/core/component-downloader"),N=require("./lib/core/token-processor"),{ConfigError:C,APIError:E,CacheError:T}=require("./lib/core/errors"),b=require("path"),m=new L;m.name("frontfriend").description("FrontFriend Tailwind CLI - Manage design tokens and cache").version("2.0.0");m.command("init").description("Initialize FrontFriend configuration and fetch from API").option("--force","Force refresh even if cache is valid").action(async e=>{try{console.log("\u{1F527} FrontFriend Setup"),console.log(`==================
+`);let o=await new x().load();if(!o.ffId)throw new C(`ff-id not found in frontfriend.config.js
    Please add "ff-id" to your frontfriend.config.js file`,"ff-id");console.log("\u{1F4CB} Configuration loaded"),console.log(`   FF_ID: ${o.ffId}`),console.log(`   App Root: ${o.appRoot}
-`);let l=new h(o.appRoot);!n.force&&l.exists()&&l.isValid()&&(console.log("\u2705 Cache is valid and up to date"),console.log("   Use --force to refresh anyway"),process.exit(0)),console.log("\u{1F50D} Checking cache..."),n.force?console.log(`   Force refresh requested
-`):l.exists()?console.log(`   Cache expired
+`);let a=new j(o.appRoot);!e.force&&a.exists()&&a.isValid()&&(console.log("\u2705 Cache is valid and up to date"),console.log("   Use --force to refresh anyway"),process.exit(0)),console.log("\u{1F50D} Checking cache..."),e.force?console.log(`   Force refresh requested
+`):a.exists()?console.log(`   Cache expired
 `):console.log(`   No cache found
-`),console.log("\u{1F310} Fetching configuration...");let c=new y(o.ffId,{baseURL:o["api-url"]||o.apiUrl});(o["api-url"]||o.apiUrl)&&console.log(`   Using API URL: ${o["api-url"]||o.apiUrl}`);let r=null;try{r=await c.fetchProcessedTokens()}catch(u){console.log(`   \u26A0\uFE0F  Failed to fetch pre-processed tokens: ${u.message}`)}r&&(console.log("   \u2713 Pre-processed tokens fetched from server"),console.log(`   \u2713 Skipping local processing
-`),console.log("\u{1F4BE} Saving cache..."),l.save(r),console.log(`   \u2713 Cache saved successfully
-`),console.log("\u2705 Setup complete!"),console.log("   Your FrontFriend configuration has been cached."),console.log("   The Tailwind plugin will now use this cached data."),process.exit(0)),console.log(`   \u2139\uFE0F  Pre-processed tokens not available, falling back to local processing
-`);let[e,a,g,k,p,$]=await Promise.all([c.fetchTokens(),c.fetchComponentsConfig(),c.fetchFonts(),c.fetchIcons(),c.fetchVersion(),c.fetchCustomCss()]);if(console.log("   \u2713 Tokens fetched"),e.global||e.colors||e.semantic||e.semanticDark){let u=[e.global?"global":null,e.colors?"colors":null,e.semantic?"semantic":null,e.semanticDark?"semanticDark":null].filter(Boolean).join(", ");console.log(`     (Found: ${u})`)}console.log("   \u2713 Components config fetched"),console.log("   \u2713 Fonts fetched"),console.log("   \u2713 Icons fetched"),console.log("   \u2713 Version fetched"),console.log(`   \u2713 Custom CSS fetched
-`),console.log("\u2699\uFE0F  Processing tokens...");let C=new x;console.log("   Processing raw token data...");let t=await C.process({colors:e.colors||e.global,semantic:e.semantic,semanticDark:e.semanticDark,fonts:g,globalTokens:e.global,animations:e.animations,version:p==null?void 0:p.version,ffId:o.ffId,customCss:$});console.log("   \u2713 Colors processed"),console.log("   \u2713 Semantic tokens processed"),t.fontFaces.length>0&&console.log(`   \u2713 ${t.fontFaces.length} font faces processed`),Object.keys(t.animations).length>0&&console.log(`   \u2713 ${Object.keys(t.animations).length} animations processed`),console.log(`
-`);let F=C.extractClassesFromComponentsConfig(a),f={tokens:t.utilities,variables:t.variables,semanticVariables:t.semanticVariables,semanticDarkVariables:t.semanticDarkVariables,fonts:t.fontFaces,icons:k,componentsConfig:a,keyframes:t.keyframes,animations:t.animations,safelist:t.safelist,version:p,metadata:t.metadata,cls:F||[],custom:t.custom};console.log("\u{1F4BE} Saving cache..."),console.log("   Cache data summary:"),console.log(`   - Tokens: ${Object.keys(f.tokens||{}).length} utilities`),console.log(`   - Variables: ${Object.keys(f.variables||{}).length} CSS variables`),console.log(`   - Semantic variables: ${Object.keys(f.semanticVariables||{}).length} semantic variables`),console.log(`   - Font faces: ${(f.fonts||[]).length} fonts`),console.log(`   - Classes: ${(f.cls||[]).length} extracted classes`),l.save(f),console.log(`   \u2713 Cache saved successfully
-`),console.log("\u2705 Setup complete!"),console.log("   Your FrontFriend configuration has been cached."),console.log("   The Tailwind plugin will now use this cached data."),process.exit(0)}catch(s){s instanceof d?console.error("\u274C Configuration Error:",s.message):s instanceof D?(console.error("\u274C API Error:",s.message),console.error(`   Status: ${s.statusCode}`),console.error(`   URL: ${s.url}`)):s instanceof w?(console.error("\u274C Cache Error:",s.message),console.error(`   Operation: ${s.operation}`)):console.error("\u274C Setup failed:",s.message),process.exit(1)}});i.command("clean").description("Remove cached configuration").action(async()=>{try{console.log(`\u{1F9F9} Cleaning FrontFriend cache...
-`);let s=new m().load(),o=new h(s.appRoot);o.exists()?(o.clear(),console.log("\u2705 Cache cleared successfully")):console.log("\u2139\uFE0F  No cache found"),process.exit(0)}catch(n){n instanceof w?(console.error("\u274C Cache Error:",n.message),console.error(`   Operation: ${n.operation}`)):console.error("\u274C Clean failed:",n.message),process.exit(1)}});i.command("status").description("Show cache status and configuration").action(async()=>{try{console.log("\u{1F4CA} FrontFriend Status"),console.log(`===================
-`);let s=await new m().load();console.log("Configuration:"),console.log(`  FF_ID: ${s.ffId||"Not set"}`),console.log(`  App Root: ${s.appRoot}
-`);let o=new h(s.appRoot),l=o.getCacheDir();if(console.log("Cache:"),console.log(`  Directory: ${I.relative(process.cwd(),l)}`),o.exists()){console.log(`  Status: ${o.isValid()?"\u2705 Valid":"\u26A0\uFE0F  Expired"}`);let c=o.load();if(c&&c.metadata){let r=new Date(c.metadata.timestamp);console.log(`  Created: ${r.toLocaleString()}`),console.log(`  Version: ${c.metadata.version||"Unknown"}`)}}else console.log("  Status: \u274C Not found");process.exit(0)}catch(n){n instanceof d?console.error("\u274C Configuration Error:",n.message):n instanceof w?(console.error("\u274C Cache Error:",n.message),console.error(`   Operation: ${n.operation}`)):console.error("\u274C Status check failed:",n.message),process.exit(1)}});i.command("download").description("Download components from registry").argument("<components...>",'component names to download (or "all" to download all components)').option("-f, --framework <framework>","Framework to download components for (react/vue)").option("-o, --output <path>","Output directory for components").option("--overwrite","Overwrite existing files").action(async(n,s)=>{try{console.log(`\u{1F4E6} Downloading components...
-`);let l=await new m().load();if(!l.ffId)throw new d(`ff-id not found in frontfriend.config.js
-   Please add "ff-id" to your frontfriend.config.js file`,"ff-id");let c=new b({appRoot:l.appRoot,config:l,framework:s.framework,outputPath:s.output,overwrite:s.overwrite}),r=n;if(n.length===1&&n[0].toLowerCase()==="all"){let a=await c.getAllComponents(),g=await c.getCustomComponents();a.length===0&&(console.error("\u274C Failed to fetch component list"),process.exit(1)),r=[...a,...g],console.log("\u{1F4CB} Configuration"),console.log(`   Framework: ${c.framework}`),console.log(`   Output: ${c.outputPath}`),console.log(`   Components: All ${a.length} standard components`),g.length>0&&console.log(`   Custom: ${g.length} custom components for ff-id: ${l.ffId||l["ff-id"]}`),console.log("")}else console.log("\u{1F4CB} Configuration"),console.log(`   Framework: ${c.framework}`),console.log(`   Output: ${c.outputPath}`),console.log(`   Components: ${n.join(", ")}
-`);let e=await c.downloadComponents(r);e.successful.length>0&&(console.log(`
-\u2705 Download complete!`),console.log(`   Downloaded: ${e.successful.length} components`)),e.failed.length>0&&(console.log(""),e.failed.forEach(a=>{a.error.includes("not found")?console.log(`\u274C ${a.error}`):console.log(`\u274C Failed to download ${a.component}: ${a.error}`)})),e.successful.length>0&&e.dependencies.length>0&&(console.log(`
-\u{1F4E6} Install dependencies:`),console.log(`   npm install ${e.dependencies.join(" ")}`)),e.successful.length===0&&e.failed.length>0&&process.exit(1),process.exit(0)}catch(o){o instanceof d?(console.error("\u274C Configuration Error:",o.message),o.missingKey&&console.error(`   Missing key: ${o.missingKey}`)):console.error("\u274C Download failed:",o.message),process.exit(1)}});i.parse(process.argv);process.argv.slice(2).length||(i.outputHelp(),process.exit(0));
+`),console.log("\u{1F310} Fetching configuration...");let c=new R(o.ffId,{baseURL:o["api-url"]||o.apiUrl});(o["api-url"]||o.apiUrl)&&console.log(`   Using API URL: ${o["api-url"]||o.apiUrl}`);let l=null;try{l=await c.fetchProcessedTokens()}catch(d){console.log(`   \u26A0\uFE0F  Failed to fetch pre-processed tokens: ${d.message}`)}if(l){console.log("   \u2713 Pre-processed tokens fetched from server"),console.log(`   \u2713 Skipping local processing
+`),console.log("\u{1F4BE} Saving cache..."),a.save(l),console.log(`   \u2713 Cache saved successfully
+`),console.log("\u2705 Setup complete!"),console.log("   Your FrontFriend configuration has been cached."),console.log("   The Tailwind plugin will now use this cached data.");let d=require("fs"),P=b.join(o.appRoot,"tsconfig.json");if(d.existsSync(P)){console.log(`
+\u{1F524} Generating TypeScript types...`);try{let{generateIconTypes:v}=S();v()}catch(v){console.log("   \u26A0\uFE0F  Type generation failed:",v.message),console.log('   Run "npx frontfriend generate-types" manually to retry')}}process.exit(0)}console.log(`   \u2139\uFE0F  Pre-processed tokens not available, falling back to local processing
+`);let[s,r,g,p,y,$]=await Promise.all([c.fetchTokens(),c.fetchComponentsConfig(),c.fetchFonts(),c.fetchIcons(),c.fetchVersion(),c.fetchCustomCss()]);if(console.log("   \u2713 Tokens fetched"),s.global||s.colors||s.semantic||s.semanticDark){let d=[s.global?"global":null,s.colors?"colors":null,s.semantic?"semantic":null,s.semanticDark?"semanticDark":null].filter(Boolean).join(", ");console.log(`     (Found: ${d})`)}console.log("   \u2713 Components config fetched"),console.log("   \u2713 Fonts fetched"),console.log("   \u2713 Icons fetched"),console.log("   \u2713 Version fetched"),console.log(`   \u2713 Custom CSS fetched
+`),console.log("\u2699\uFE0F  Processing tokens...");let w=new N;console.log("   Processing raw token data...");let t=await w.process({colors:s.colors||s.global,semantic:s.semantic,semanticDark:s.semanticDark,fonts:g,globalTokens:s.global,animations:s.animations,version:y==null?void 0:y.version,ffId:o.ffId,customCss:$});console.log("   \u2713 Colors processed"),console.log("   \u2713 Semantic tokens processed"),t.fontFaces.length>0&&console.log(`   \u2713 ${t.fontFaces.length} font faces processed`),Object.keys(t.animations).length>0&&console.log(`   \u2713 ${Object.keys(t.animations).length} animations processed`),console.log(`
+`);let i=w.extractClassesFromComponentsConfig(r),f={tokens:t.utilities,variables:t.variables,semanticVariables:t.semanticVariables,semanticDarkVariables:t.semanticDarkVariables,fonts:t.fontFaces,icons:p,componentsConfig:r,keyframes:t.keyframes,animations:t.animations,safelist:t.safelist,version:y,metadata:t.metadata,cls:i||[],custom:t.custom};console.log("\u{1F4BE} Saving cache..."),console.log("   Cache data summary:"),console.log(`   - Tokens: ${Object.keys(f.tokens||{}).length} utilities`),console.log(`   - Variables: ${Object.keys(f.variables||{}).length} CSS variables`),console.log(`   - Semantic variables: ${Object.keys(f.semanticVariables||{}).length} semantic variables`),console.log(`   - Font faces: ${(f.fonts||[]).length} fonts`),console.log(`   - Classes: ${(f.cls||[]).length} extracted classes`),a.save(f),console.log(`   \u2713 Cache saved successfully
+`),console.log("\u2705 Setup complete!"),console.log("   Your FrontFriend configuration has been cached."),console.log("   The Tailwind plugin will now use this cached data.");let k=require("fs"),h=b.join(o.appRoot,"tsconfig.json");if(k.existsSync(h)){console.log(`
+\u{1F524} Generating TypeScript types...`);try{let{generateIconTypes:d}=S();d()}catch(d){console.log("   \u26A0\uFE0F  Type generation failed:",d.message),console.log('   Run "npx frontfriend generate-types" manually to retry')}}process.exit(0)}catch(n){n instanceof C?console.error("\u274C Configuration Error:",n.message):n instanceof E?(console.error("\u274C API Error:",n.message),console.error(`   Status: ${n.statusCode}`),console.error(`   URL: ${n.url}`)):n instanceof T?(console.error("\u274C Cache Error:",n.message),console.error(`   Operation: ${n.operation}`)):console.error("\u274C Setup failed:",n.message),process.exit(1)}});m.command("clean").description("Remove cached configuration").action(async()=>{try{console.log(`\u{1F9F9} Cleaning FrontFriend cache...
+`);let n=new x().load(),o=new j(n.appRoot);o.exists()?(o.clear(),console.log("\u2705 Cache cleared successfully")):console.log("\u2139\uFE0F  No cache found"),process.exit(0)}catch(e){e instanceof T?(console.error("\u274C Cache Error:",e.message),console.error(`   Operation: ${e.operation}`)):console.error("\u274C Clean failed:",e.message),process.exit(1)}});m.command("generate-types").description("Generate TypeScript types from cached icons.json").action(async()=>{try{console.log(`\u{1F524} Generating TypeScript types...
+`);let{generateIconTypes:e}=S();e(),process.exit(0)}catch(e){console.error("\u274C Type generation failed:",e.message),process.exit(1)}});m.command("status").description("Show cache status and configuration").action(async()=>{try{console.log("\u{1F4CA} FrontFriend Status"),console.log(`===================
+`);let n=await new x().load();console.log("Configuration:"),console.log(`  FF_ID: ${n.ffId||"Not set"}`),console.log(`  App Root: ${n.appRoot}
+`);let o=new j(n.appRoot),a=o.getCacheDir();if(console.log("Cache:"),console.log(`  Directory: ${b.relative(process.cwd(),a)}`),o.exists()){console.log(`  Status: ${o.isValid()?"\u2705 Valid":"\u26A0\uFE0F  Expired"}`);let c=o.load();if(c&&c.metadata){let l=new Date(c.metadata.timestamp);console.log(`  Created: ${l.toLocaleString()}`),console.log(`  Version: ${c.metadata.version||"Unknown"}`)}}else console.log("  Status: \u274C Not found");process.exit(0)}catch(e){e instanceof C?console.error("\u274C Configuration Error:",e.message):e instanceof T?(console.error("\u274C Cache Error:",e.message),console.error(`   Operation: ${e.operation}`)):console.error("\u274C Status check failed:",e.message),process.exit(1)}});m.command("download").description("Download components from registry").argument("<components...>",'component names to download (or "all" to download all components)').option("-f, --framework <framework>","Framework to download components for (react/vue)").option("-o, --output <path>","Output directory for components").option("--overwrite","Overwrite existing files").action(async(e,n)=>{try{console.log(`\u{1F4E6} Downloading components...
+`);let a=await new x().load();if(!a.ffId)throw new C(`ff-id not found in frontfriend.config.js
+   Please add "ff-id" to your frontfriend.config.js file`,"ff-id");let c=new q({appRoot:a.appRoot,config:a,framework:n.framework,outputPath:n.output,overwrite:n.overwrite}),l=e;if(e.length===1&&e[0].toLowerCase()==="all"){let r=await c.getAllComponents(),g=await c.getCustomComponents();r.length===0&&(console.error("\u274C Failed to fetch component list"),process.exit(1)),l=[...r,...g],console.log("\u{1F4CB} Configuration"),console.log(`   Framework: ${c.framework}`),console.log(`   Output: ${c.outputPath}`),console.log(`   Components: All ${r.length} standard components`),g.length>0&&console.log(`   Custom: ${g.length} custom components for ff-id: ${a.ffId||a["ff-id"]}`),console.log("")}else console.log("\u{1F4CB} Configuration"),console.log(`   Framework: ${c.framework}`),console.log(`   Output: ${c.outputPath}`),console.log(`   Components: ${e.join(", ")}
+`);let s=await c.downloadComponents(l);s.successful.length>0&&(console.log(`
+\u2705 Download complete!`),console.log(`   Downloaded: ${s.successful.length} components`)),s.failed.length>0&&(console.log(""),s.failed.forEach(r=>{r.error.includes("not found")?console.log(`\u274C ${r.error}`):console.log(`\u274C Failed to download ${r.component}: ${r.error}`)})),s.successful.length>0&&s.dependencies.length>0&&(console.log(`
+\u{1F4E6} Install dependencies:`),console.log(`   npm install ${s.dependencies.join(" ")}`)),s.successful.length===0&&s.failed.length>0&&process.exit(1),process.exit(0)}catch(o){o instanceof C?(console.error("\u274C Configuration Error:",o.message),o.missingKey&&console.error(`   Missing key: ${o.missingKey}`)):console.error("\u274C Download failed:",o.message),process.exit(1)}});m.parse(process.argv);process.argv.slice(2).length||(m.outputHelp(),process.exit(0));
 //# sourceMappingURL=cli-temp.js.map

package/dist/lib/vue/utils.d.ts

@@ -1,3 +1,5 @@
+import type { Ref, ComputedRef } from 'vue';
+
 /**
  * Combines class names with tailwind-merge
  * @param inputs - Class names to combine
@@ -10,16 +12,16 @@ export function cn(...inputs: any[]): string;
  * @param query - Media query string
  * @returns Ref<boolean> indicating if query matches
  */
-export function useMediaQuery(query: string): import('vue').Ref<boolean>;
+export function useMediaQuery(query: string): Ref<boolean>;
 
 /**
  * Vue composition API hook for responsive breakpoints
  * @returns Object with breakpoint states and active breakpoint
  */
 export function useBreakpoints(): {
-  isXs: import('vue').Ref<boolean>;
-  isSm: import('vue').Ref<boolean>;
-  isMd: import('vue').Ref<boolean>;
-  isLg: import('vue').Ref<boolean>;
-  active: import('vue').ComputedRef<'xs' | 'sm' | 'md' | 'lg'>;
+  isXs: Ref<boolean>;
+  isSm: Ref<boolean>;
+  isMd: Ref<boolean>;
+  isLg: Ref<boolean>;
+  active: ComputedRef<'xs' | 'sm' | 'md' | 'lg'>;
 };

package/dist/runtime.d.ts

@@ -1,8 +1,10 @@
+import { IconSetStructure } from './types/index';
+
 export interface FrontFriend {
   /** Current configuration */
   config: Record<string, any> | null;
   /** Icon set */
-  iconSet: Record<string, string> | null;
+  iconSet: IconSetStructure | null;
   /** Get an icon by name */
   getIcon(name: string): string | null;
   /** Refresh configuration from globals */

package/dist/scripts/generate-icon-types.js

@@ -0,0 +1,141 @@
+#!/usr/bin/env node
+
+const fs = require('fs');
+const path = require('path');
+
+/**
+ * Generate TypeScript types from icons.json cache file
+ * This script reads the icons.json file and generates proper types for the iconSet
+ */
+
+function generateIconTypes() {
+  const projectRoot = process.cwd();
+  const iconsPath = path.join(projectRoot, 'node_modules', '.cache', 'frontfriend', 'icons.json');
+  const outputPath = path.join(projectRoot, 'types', 'frontfriend-icons.d.ts');
+  
+  // Check if icons.json exists
+  if (!fs.existsSync(iconsPath)) {
+    console.error('[FrontFriend] Error: icons.json not found. Please run "npx frontfriend setup" first.');
+    process.exit(1);
+  }
+  
+  try {
+    // Read icons.json
+    const icons = JSON.parse(fs.readFileSync(iconsPath, 'utf-8'));
+    
+    // Extract all unique icon names
+    const iconNames = new Set();
+    
+    function extractIconNames(obj) {
+      for (const value of Object.values(obj)) {
+        if (typeof value === 'string') {
+          iconNames.add(value);
+        } else if (typeof value === 'object' && value !== null) {
+          extractIconNames(value);
+        }
+      }
+    }
+    
+    extractIconNames(icons);
+    
+    // Generate the interface structure recursively
+    function generateInterface(obj, indent = '  ') {
+      const lines = [];
+      
+      for (const [key, value] of Object.entries(obj)) {
+        if (typeof value === 'string') {
+          lines.push(`${indent}${key}: '${value}';`);
+        } else if (typeof value === 'object' && value !== null) {
+          lines.push(`${indent}${key}: {`);
+          lines.push(generateInterface(value, indent + '  '));
+          lines.push(`${indent}};`);
+        }
+      }
+      
+      return lines.join('\n');
+    }
+    
+    // Generate the type definition file
+    const iconNameType = Array.from(iconNames).map(name => `'${name}'`).join(' | ');
+    
+    const typeDefinition = `// Generated by @frontfriend/tailwind
+// DO NOT EDIT THIS FILE MANUALLY
+
+import type { IconSetStructure } from '@frontfriend/tailwind';
+
+declare module '@frontfriend/tailwind' {
+  // Icon names used in this project
+  export type ProjectIconName = ${iconNameType || 'string'};
+
+  // Typed iconSet structure with exact icon names
+  export interface TypedIconSet extends IconSetStructure {
+${generateInterface(icons)}
+  }
+
+  // Override the iconSet type with the typed version
+  export const iconSet: TypedIconSet;
+}
+
+// Augment Vue component types with exact icon names
+declare module '*/components/ui/icon/*.vue' {
+  export type IconName = ${iconNameType || 'string'};
+}
+
+declare module '@/components/ui/icon/*.vue' {
+  export type IconName = ${iconNameType || 'string'};
+}
+
+declare module '@/components/ui/icon' {
+  export type IconName = ${iconNameType || 'string'};
+}
+
+declare module '@/src/components/ui/icon' {
+  export type IconName = ${iconNameType || 'string'};
+}
+
+declare module '@/src/components/ui/icon/Icon.vue' {
+  export type IconName = ${iconNameType || 'string'};
+}
+`;
+
+    // Ensure types directory exists
+    const typesDir = path.dirname(outputPath);
+    if (!fs.existsSync(typesDir)) {
+      fs.mkdirSync(typesDir, { recursive: true });
+    }
+    
+    // Write the type definition file
+    fs.writeFileSync(outputPath, typeDefinition);
+    
+    console.log('[FrontFriend] ✓ Generated icon types at types/frontfriend-icons.d.ts');
+    
+    // Check if tsconfig.json exists and update it
+    const tsconfigPath = path.join(projectRoot, 'tsconfig.json');
+    if (fs.existsSync(tsconfigPath)) {
+      const tsconfig = JSON.parse(fs.readFileSync(tsconfigPath, 'utf-8'));
+      
+      // Ensure the types file is included
+      if (!tsconfig.include) {
+        tsconfig.include = [];
+      }
+      
+      const typesPattern = 'types/**/*.d.ts';
+      if (!tsconfig.include.includes(typesPattern)) {
+        tsconfig.include.push(typesPattern);
+        fs.writeFileSync(tsconfigPath, JSON.stringify(tsconfig, null, 2));
+        console.log('[FrontFriend] ✓ Updated tsconfig.json to include generated types');
+      }
+    }
+    
+  } catch (error) {
+    console.error('[FrontFriend] Error generating icon types:', error.message);
+    process.exit(1);
+  }
+}
+
+// Run if called directly
+if (require.main === module) {
+  generateIconTypes();
+}
+
+module.exports = { generateIconTypes };

package/dist/types/index.d.ts

@@ -1,5 +1,5 @@
 declare module '@frontfriend/tailwind' {
-  // Main plugin
+  // Main Plugin
   import { Config, PluginCreator } from 'tailwindcss/types/config';
   
   export interface PluginOptions {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@frontfriend/tailwind",
-  "version": "2.1.0",
+  "version": "2.1.2",
   "description": "Design token management for Tailwind CSS",
   "main": "./dist/index.js",
   "types": "./dist/types/index.d.ts",
@@ -53,6 +53,7 @@
   "license": "SEE LICENSE IN LICENSE",
   "files": [
     "dist/",
+    "scripts/",
     "README.md",
     "LICENSE"
   ],

package/scripts/build.js

@@ -0,0 +1,371 @@
+const esbuild = require('esbuild');
+const fs = require('fs');
+const path = require('path');
+const { glob } = require('glob');
+
+// Clean dist directory
+const distDir = path.join(__dirname, '..', 'dist');
+if (fs.existsSync(distDir)) {
+  fs.rmSync(distDir, { recursive: true, force: true });
+}
+fs.mkdirSync(distDir, { recursive: true });
+
+// Create lib subdirectories
+fs.mkdirSync(path.join(distDir, 'lib', 'core'), { recursive: true });
+fs.mkdirSync(path.join(distDir, 'lib', 'config'), { recursive: true });
+fs.mkdirSync(path.join(distDir, 'lib', 'react'), { recursive: true });
+fs.mkdirSync(path.join(distDir, 'lib', 'vue'), { recursive: true });
+fs.mkdirSync(path.join(distDir, 'scripts'), { recursive: true });
+
+// Copy type definitions
+fs.mkdirSync(path.join(distDir, 'types'), { recursive: true });
+fs.copyFileSync(
+  path.join(__dirname, '..', 'types', 'index.d.ts'),
+  path.join(distDir, 'types', 'index.d.ts')
+);
+
+// Create individual type declaration files for each export
+const typeDeclarations = [
+  {
+    path: 'runtime.d.ts',
+    content: `import { IconSetStructure } from './types/index';
+
+export interface FrontFriend {
+  /** Current configuration */
+  config: Record<string, any> | null;
+  /** Icon set */
+  iconSet: IconSetStructure | null;
+  /** Get an icon by name */
+  getIcon(name: string): string | null;
+  /** Refresh configuration from globals */
+  refresh(): void;
+}
+
+declare const FrontFriend: FrontFriend;
+export default FrontFriend;`
+  },
+  {
+    path: 'next.d.ts',
+    content: `import { NextConfig } from 'next';
+
+/** 
+ * Wraps Next.js configuration to inject FrontFriend globals
+ * @param config - Next.js configuration object
+ * @returns Modified Next.js configuration
+ */
+export default function frontfriend(config?: NextConfig): NextConfig;`
+  },
+  {
+    path: 'vite.d.ts',
+    content: `import { Plugin } from 'vite';
+
+/**
+ * Vite plugin for FrontFriend globals injection
+ * @returns Vite plugin configuration
+ */
+export default function frontfriend(): Plugin;`
+  },
+  {
+    path: 'ffdc.d.ts',
+    content: `/**
+ * FrontFriend Design Config processor
+ * @param config - Design configuration object
+ * @returns Processed configuration
+ */
+export function ffdc(config: Record<string, any> | null | undefined): Record<string, any>;`
+  },
+  {
+    path: 'lib/react/utils.d.ts',
+    content: `/**
+ * Combines class names with tailwind-merge
+ * @param inputs - Class names to combine
+ * @returns Merged class string
+ */
+export function cn(...inputs: any[]): string;
+
+/**
+ * React hook for media query
+ * @param query - Media query string
+ * @returns Boolean indicating if query matches
+ */
+export function useMediaQuery(query: string): boolean;
+
+/**
+ * React hook for responsive breakpoints
+ * @returns Object with breakpoint states and active breakpoint
+ */
+export function useBreakpoints(): {
+  isXs: boolean;
+  isSm: boolean;
+  isMd: boolean;
+  isLg: boolean;
+  active: 'xs' | 'sm' | 'md' | 'lg';
+};`
+  },
+  {
+    path: 'lib/vue/utils.d.ts',
+    content: `import type { Ref, ComputedRef } from 'vue';
+
+/**
+ * Combines class names with tailwind-merge
+ * @param inputs - Class names to combine
+ * @returns Merged class string
+ */
+export function cn(...inputs: any[]): string;
+
+/**
+ * Vue composition API hook for media query
+ * @param query - Media query string
+ * @returns Ref<boolean> indicating if query matches
+ */
+export function useMediaQuery(query: string): Ref<boolean>;
+
+/**
+ * Vue composition API hook for responsive breakpoints
+ * @returns Object with breakpoint states and active breakpoint
+ */
+export function useBreakpoints(): {
+  isXs: Ref<boolean>;
+  isSm: Ref<boolean>;
+  isMd: Ref<boolean>;
+  isLg: Ref<boolean>;
+  active: ComputedRef<'xs' | 'sm' | 'md' | 'lg'>;
+};`
+  }
+];
+
+// Write individual type declaration files
+typeDeclarations.forEach(({ path: filePath, content }) => {
+  const fullPath = path.join(distDir, filePath);
+  const dir = path.dirname(fullPath);
+  fs.mkdirSync(dir, { recursive: true });
+  fs.writeFileSync(fullPath, content);
+});
+
+// Files to bundle (exclude dynamic loaders)
+const filesToBundle = [
+  // Core utilities (bundle these)
+  { input: 'lib/core/api-client.js', output: 'lib/core/api-client.js' },
+  { input: 'lib/core/token-processor.js', output: 'lib/core/token-processor.js' },
+  { input: 'lib/core/errors.js', output: 'lib/core/errors.js' },
+  { input: 'lib/core/constants.js', output: 'lib/core/constants.js' },
+  { input: 'lib/core/component-downloader.js', output: 'lib/core/component-downloader.js' },
+  
+  // React/Vue utilities
+  { input: 'lib/react/utils.mjs', output: 'lib/react/utils.mjs', format: 'esm' },
+  { input: 'lib/vue/utils.mjs', output: 'lib/vue/utils.mjs', format: 'esm' },
+  
+  // Main files
+  { input: 'ffdc.js', output: 'ffdc.js' },
+  { input: 'runtime.js', output: 'runtime.js' },
+  // CLI will be handled separately to preserve shebang
+  { input: 'next.js', output: 'next.js' },
+  { input: 'vite.js', output: 'vite.js' },
+  { input: 'vite.mjs', output: 'vite.mjs', format: 'esm' },
+];
+
+// Files to copy without bundling (dynamic loaders)
+const filesToCopy = [
+  { input: 'lib/core/config-loader.js', output: 'lib/config/config-loader.js' },
+  { input: 'lib/core/cache-manager.js', output: 'lib/config/cache-manager.js' },
+  { input: 'scripts/generate-icon-types.js', output: 'scripts/generate-icon-types.js' },
+];
+
+// Build each file
+async function build() {
+  console.log('Building frontfriend-tailwind...');
+  
+  // Bundle files
+  for (const file of filesToBundle) {
+    try {
+      console.log(`Bundling ${file.input}...`);
+      
+      await esbuild.build({
+        entryPoints: [path.join(__dirname, '..', file.input)],
+        bundle: true, // Bundle but keep external dependencies external
+        minify: true,
+        sourcemap: true,
+        format: file.format || 'cjs',
+        platform: 'node',
+        target: 'node14',
+        outfile: path.join(distDir, file.output),
+        external: [
+          'tailwindcss',
+          'commander',
+          'dotenv',
+          'color',
+          'clsx',
+          'tailwind-merge',
+          'fs',
+          'path',
+          'crypto',
+          'child_process',
+          'url',
+          'http',
+          'https',
+          '../config/*',
+          './lib/config/*',
+          '@frontfriend/tailwind',
+          '@radix-ui/*',
+          'react',
+          'vue',
+          'class-variance-authority',
+          'lucide-react'
+        ],
+      });
+    } catch (error) {
+      console.error(`Error building ${file.input}:`, error);
+      process.exit(1);
+    }
+  }
+  
+  // Copy dynamic loader files
+  for (const file of filesToCopy) {
+    console.log(`Copying ${file.input}...`);
+    let content = fs.readFileSync(path.join(__dirname, '..', file.input), 'utf8');
+    
+    // Update relative imports to point to correct locations
+    if (file.input.includes('cache-manager.js')) {
+      content = content
+        .replace("require('./constants')", "require('../core/constants')")
+        .replace("require('./errors')", "require('../core/errors')");
+    }
+    
+    if (file.input.includes('config-loader.js')) {
+      // No changes needed for config-loader
+    }
+    
+    fs.writeFileSync(path.join(distDir, file.output), content);
+  }
+  
+  // Special handling for CLI to preserve shebang
+  console.log('Building cli.js with shebang...');
+  const cliContent = fs.readFileSync(path.join(__dirname, '..', 'cli.js'), 'utf8');
+  const cliLines = cliContent.split('\n');
+  const shebang = cliLines[0];
+  const cliCodeContent = cliLines.slice(1).join('\n');
+  
+  // Update require paths in CLI
+  const updatedCliContent = cliCodeContent
+    .replace("require('./lib/core/config-loader')", "require('./lib/config/config-loader')")
+    .replace("require('./lib/core/cache-manager')", "require('./lib/config/cache-manager')");
+  
+  // Build CLI without shebang
+  await esbuild.build({
+    stdin: {
+      contents: updatedCliContent,
+      resolveDir: path.join(__dirname, '..'),
+      sourcefile: 'cli.js',
+    },
+    bundle: true,
+    minify: true,
+    sourcemap: true,
+    format: 'cjs',
+    platform: 'node',
+    target: 'node14',
+    outfile: path.join(distDir, 'cli-temp.js'),
+    external: [
+      'commander',
+      'dotenv',
+      'fs',
+      'path',
+      'child_process',
+      './lib/config/config-loader',
+      './lib/config/cache-manager',
+      './lib/core/api-client',
+      './lib/core/component-downloader',
+      './lib/core/token-processor',
+      './lib/core/errors'
+    ],
+  });
+  
+  // Add shebang back and make executable
+  const builtCliContent = fs.readFileSync(path.join(distDir, 'cli-temp.js'), 'utf8');
+  fs.writeFileSync(path.join(distDir, 'cli.js'), shebang + '\n' + builtCliContent);
+  fs.unlinkSync(path.join(distDir, 'cli-temp.js'));
+  // Remove the temp map file if it exists
+  if (fs.existsSync(path.join(distDir, 'cli-temp.js.map'))) {
+    fs.unlinkSync(path.join(distDir, 'cli-temp.js.map'));
+  }
+  fs.chmodSync(path.join(distDir, 'cli.js'), '755');
+  
+  // Special handling for index.js and index.mjs (need to update require paths)
+  console.log('Building index.js with updated paths...');
+  
+  // Read original index.js
+  let indexContent = fs.readFileSync(path.join(__dirname, '..', 'index.js'), 'utf8');
+  
+  // Update require paths for cache-manager
+  indexContent = indexContent.replace(
+    "require('./lib/core/cache-manager')",
+    "require('./lib/config/cache-manager')"
+  );
+  
+  // Build CommonJS version
+  await esbuild.build({
+    stdin: {
+      contents: indexContent,
+      resolveDir: path.join(__dirname, '..'),
+      sourcefile: 'index.js',
+    },
+    bundle: true,
+    minify: true,
+    sourcemap: true,
+    format: 'cjs',
+    platform: 'node',
+    target: 'node14',
+    outfile: path.join(distDir, 'index.js'),
+    external: [
+      'tailwindcss',
+      './lib/config/cache-manager',
+      './ffdc',
+      'fs',
+      'path'
+    ],
+  });
+  
+  // Build ESM version
+  console.log('Building index.mjs...');
+  let indexMjsContent = fs.readFileSync(path.join(__dirname, '..', 'index.mjs'), 'utf8');
+  
+  // Update import paths
+  indexMjsContent = indexMjsContent.replace(
+    "from './lib/core/cache-manager'",
+    "from './lib/config/cache-manager.js'"
+  );
+  
+  await esbuild.build({
+    stdin: {
+      contents: indexMjsContent,
+      resolveDir: path.join(__dirname, '..'),
+      sourcefile: 'index.mjs',
+    },
+    bundle: true,
+    minify: true,
+    sourcemap: true,
+    format: 'esm',
+    platform: 'node',
+    target: 'node14',
+    outfile: path.join(distDir, 'index.mjs'),
+    external: [
+      'tailwindcss',
+      './lib/config/cache-manager.js',
+      './ffdc.js',
+      'fs',
+      'path'
+    ],
+  });
+  
+  console.log('Build completed successfully!');
+  
+  // Show dist structure
+  console.log('\nDist structure:');
+  const files = await glob('**/*', { cwd: distDir });
+  files.forEach(file => console.log(`  dist/${file}`));
+}
+
+// Run build
+build().catch(error => {
+  console.error('Build failed:', error);
+  process.exit(1);
+});

package/scripts/generate-icon-types.js

@@ -0,0 +1,141 @@
+#!/usr/bin/env node
+
+const fs = require('fs');
+const path = require('path');
+
+/**
+ * Generate TypeScript types from icons.json cache file
+ * This script reads the icons.json file and generates proper types for the iconSet
+ */
+
+function generateIconTypes() {
+  const projectRoot = process.cwd();
+  const iconsPath = path.join(projectRoot, 'node_modules', '.cache', 'frontfriend', 'icons.json');
+  const outputPath = path.join(projectRoot, 'types', 'frontfriend-icons.d.ts');
+  
+  // Check if icons.json exists
+  if (!fs.existsSync(iconsPath)) {
+    console.error('[FrontFriend] Error: icons.json not found. Please run "npx frontfriend setup" first.');
+    process.exit(1);
+  }
+  
+  try {
+    // Read icons.json
+    const icons = JSON.parse(fs.readFileSync(iconsPath, 'utf-8'));
+    
+    // Extract all unique icon names
+    const iconNames = new Set();
+    
+    function extractIconNames(obj) {
+      for (const value of Object.values(obj)) {
+        if (typeof value === 'string') {
+          iconNames.add(value);
+        } else if (typeof value === 'object' && value !== null) {
+          extractIconNames(value);
+        }
+      }
+    }
+    
+    extractIconNames(icons);
+    
+    // Generate the interface structure recursively
+    function generateInterface(obj, indent = '  ') {
+      const lines = [];
+      
+      for (const [key, value] of Object.entries(obj)) {
+        if (typeof value === 'string') {
+          lines.push(`${indent}${key}: '${value}';`);
+        } else if (typeof value === 'object' && value !== null) {
+          lines.push(`${indent}${key}: {`);
+          lines.push(generateInterface(value, indent + '  '));
+          lines.push(`${indent}};`);
+        }
+      }
+      
+      return lines.join('\n');
+    }
+    
+    // Generate the type definition file
+    const iconNameType = Array.from(iconNames).map(name => `'${name}'`).join(' | ');
+    
+    const typeDefinition = `// Generated by @frontfriend/tailwind
+// DO NOT EDIT THIS FILE MANUALLY
+
+import type { IconSetStructure } from '@frontfriend/tailwind';
+
+declare module '@frontfriend/tailwind' {
+  // Icon names used in this project
+  export type ProjectIconName = ${iconNameType || 'string'};
+
+  // Typed iconSet structure with exact icon names
+  export interface TypedIconSet extends IconSetStructure {
+${generateInterface(icons)}
+  }
+
+  // Override the iconSet type with the typed version
+  export const iconSet: TypedIconSet;
+}
+
+// Augment Vue component types with exact icon names
+declare module '*/components/ui/icon/*.vue' {
+  export type IconName = ${iconNameType || 'string'};
+}
+
+declare module '@/components/ui/icon/*.vue' {
+  export type IconName = ${iconNameType || 'string'};
+}
+
+declare module '@/components/ui/icon' {
+  export type IconName = ${iconNameType || 'string'};
+}
+
+declare module '@/src/components/ui/icon' {
+  export type IconName = ${iconNameType || 'string'};
+}
+
+declare module '@/src/components/ui/icon/Icon.vue' {
+  export type IconName = ${iconNameType || 'string'};
+}
+`;
+
+    // Ensure types directory exists
+    const typesDir = path.dirname(outputPath);
+    if (!fs.existsSync(typesDir)) {
+      fs.mkdirSync(typesDir, { recursive: true });
+    }
+    
+    // Write the type definition file
+    fs.writeFileSync(outputPath, typeDefinition);
+    
+    console.log('[FrontFriend] ✓ Generated icon types at types/frontfriend-icons.d.ts');
+    
+    // Check if tsconfig.json exists and update it
+    const tsconfigPath = path.join(projectRoot, 'tsconfig.json');
+    if (fs.existsSync(tsconfigPath)) {
+      const tsconfig = JSON.parse(fs.readFileSync(tsconfigPath, 'utf-8'));
+      
+      // Ensure the types file is included
+      if (!tsconfig.include) {
+        tsconfig.include = [];
+      }
+      
+      const typesPattern = 'types/**/*.d.ts';
+      if (!tsconfig.include.includes(typesPattern)) {
+        tsconfig.include.push(typesPattern);
+        fs.writeFileSync(tsconfigPath, JSON.stringify(tsconfig, null, 2));
+        console.log('[FrontFriend] ✓ Updated tsconfig.json to include generated types');
+      }
+    }
+    
+  } catch (error) {
+    console.error('[FrontFriend] Error generating icon types:', error.message);
+    process.exit(1);
+  }
+}
+
+// Run if called directly
+if (require.main === module) {
+  generateIconTypes();
+}
+
+module.exports = { generateIconTypes };