7onic 0.1.4 → 0.1.6

package/dist/index.js

@@ -1198,7 +1198,7 @@ function installDeps(deps, options) {
   const commands = {
     npm: `npm install${devFlag} ${deps.join(" ")}`,
     pnpm: `pnpm add${devFlag} ${deps.join(" ")}`,
-    yarn: `yarn add${devFlag} ${deps.join(" ")}`,
+    yarn: `yarn add --ignore-engines${devFlag} ${deps.join(" ")}`,
     bun: `bun add${devFlag} ${deps.join(" ")}`
   };
   (0, import_node_child_process.execSync)(commands[pm], { cwd, stdio: "pipe" });
@@ -1246,7 +1246,11 @@ var CSS_V3_IMPORTS = `@import '@7onic-ui/tokens/css/variables.css';
 @import '@7onic-ui/tokens/css/themes/light.css';
 @import '@7onic-ui/tokens/css/themes/dark.css';
 `;
-var CSS_V4_IMPORTS = `@import '@7onic-ui/tokens/css/variables.css';
+var CSS_V4_IMPORTS = `@import "tailwindcss";
+@import '@7onic-ui/tokens/css/variables.css';
+@import '@7onic-ui/tokens/tailwind/v4.css';
+`;
+var CSS_V4_TOKEN_ONLY = `@import '@7onic-ui/tokens/css/variables.css';
 @import '@7onic-ui/tokens/tailwind/v4.css';
 `;
 async function init(args) {
@@ -1281,15 +1285,37 @@ async function init(args) {
   const tw = detectTailwindVersion(projectRoot);
   const pm = detectPackageManager(projectRoot);
   let hasPathAlias = false;
-  try {
-    const tsConfigRaw = import_node_fs4.default.readFileSync(import_node_path4.default.join(projectRoot, "tsconfig.json"), "utf-8");
-    hasPathAlias = tsConfigRaw.includes('"@/');
-  } catch {
+  const TSCONFIG_CANDIDATES = ["tsconfig.json", "tsconfig.app.json"];
+  for (const tc of TSCONFIG_CANDIDATES) {
+    try {
+      const raw = import_node_fs4.default.readFileSync(import_node_path4.default.join(projectRoot, tc), "utf-8");
+      if (raw.includes('"@/')) {
+        hasPathAlias = true;
+        break;
+      }
+    } catch {
+    }
   }
+  const viteConfigPath = import_node_fs4.default.existsSync(import_node_path4.default.join(projectRoot, "vite.config.ts")) ? import_node_path4.default.join(projectRoot, "vite.config.ts") : import_node_fs4.default.existsSync(import_node_path4.default.join(projectRoot, "vite.config.js")) ? import_node_path4.default.join(projectRoot, "vite.config.js") : null;
+  const isViteProject = import_node_fs4.default.existsSync(import_node_path4.default.join(projectRoot, "tsconfig.app.json")) && viteConfigPath !== null;
+  let needsTypesNode = false;
   if (!hasPathAlias) {
-    O2.warn(
-      "No @/ path alias detected in tsconfig.json.\n  Components use @/lib/utils \u2014 make sure your project has path aliases configured.\n  Next.js: automatic. Vite: add resolve.alias in vite.config.ts"
-    );
+    if (isViteProject) {
+      const tscPatch = patchTsconfigApp(import_node_path4.default.join(projectRoot, "tsconfig.app.json"));
+      const vitePatch = patchViteConfig(viteConfigPath);
+      if (vitePatch) needsTypesNode = true;
+      if (tscPatch || vitePatch) {
+        O2.success("Configured @/ path alias in tsconfig.app.json and vite.config.ts");
+      } else {
+        O2.warn(
+          'Could not auto-configure @/ path alias. Add manually:\n  tsconfig.app.json \u2192 compilerOptions.paths: { "@/*": ["./src/*"] }\n  vite.config.ts \u2192 resolve: { alias: { "@": path.resolve(__dirname, "./src") } }'
+        );
+      }
+    } else {
+      O2.warn(
+        "No @/ path alias detected.\n  Next.js: automatic (no action needed)\n  Other: configure compilerOptions.paths in tsconfig.json"
+      );
+    }
   }
   try {
     const pkgJson = JSON.parse(import_node_fs4.default.readFileSync(import_node_path4.default.join(projectRoot, "package.json"), "utf-8"));
@@ -1353,6 +1379,9 @@ async function init(args) {
   s.start(`Installing dependencies (${pm})...`);
   try {
     installDeps(baseDeps, { cwd: projectRoot, pm });
+    if (needsTypesNode) {
+      installDeps(["@types/node"], { cwd: projectRoot, pm, dev: true });
+    }
     s.stop("Dependencies installed");
   } catch (err) {
     s.stop("Failed to install dependencies");
@@ -1360,18 +1389,30 @@ async function init(args) {
     process.exit(1);
   }
   const cssFullPath = import_node_path4.default.join(projectRoot, config.cssPath);
-  const cssImports = tailwindVersion === 3 ? CSS_V3_IMPORTS : CSS_V4_IMPORTS;
   if (!import_node_fs4.default.existsSync(cssFullPath)) {
     const cssDir = import_node_path4.default.dirname(cssFullPath);
     if (!import_node_fs4.default.existsSync(cssDir)) {
       import_node_fs4.default.mkdirSync(cssDir, { recursive: true });
     }
+    const cssImports = tailwindVersion === 3 ? CSS_V3_IMPORTS : CSS_V4_IMPORTS;
     import_node_fs4.default.writeFileSync(cssFullPath, cssImports, "utf-8");
     O2.success(`Created ${config.cssPath} with token imports`);
   } else {
     const cssContent = import_node_fs4.default.readFileSync(cssFullPath, "utf-8");
     if (!cssContent.includes("@7onic-ui/tokens")) {
-      import_node_fs4.default.writeFileSync(cssFullPath, cssImports + "\n" + cssContent, "utf-8");
+      const tokenImports = tailwindVersion === 3 ? CSS_V3_IMPORTS : CSS_V4_TOKEN_ONLY;
+      if (tailwindVersion === 4) {
+        const twMatch = cssContent.match(/@import\s+["']tailwindcss["'].*\n/);
+        if (twMatch) {
+          const insertAt = twMatch.index + twMatch[0].length;
+          const updated = cssContent.slice(0, insertAt) + tokenImports + cssContent.slice(insertAt);
+          import_node_fs4.default.writeFileSync(cssFullPath, updated, "utf-8");
+        } else {
+          import_node_fs4.default.writeFileSync(cssFullPath, CSS_V4_IMPORTS + "\n" + cssContent, "utf-8");
+        }
+      } else {
+        import_node_fs4.default.writeFileSync(cssFullPath, tokenImports + "\n" + cssContent, "utf-8");
+      }
       O2.success(`Added token imports to ${config.cssPath}`);
     } else {
       O2.info(`Token imports already present in ${config.cssPath}`);
@@ -1434,6 +1475,48 @@ async function init(args) {
   O2.success("Created 7onic.json");
   gt("Done! Run " + import_picocolors2.default.cyan("npx 7onic add <component>") + " to add components.");
 }
+function patchTsconfigApp(tsconfigPath) {
+  try {
+    const raw = import_node_fs4.default.readFileSync(tsconfigPath, "utf-8");
+    const clean = raw.replace(/\/\*[\s\S]*?\*\//g, "").replace(/\/\/.*$/gm, "").replace(/,(\s*[}\]])/g, "$1");
+    const tc = JSON.parse(clean);
+    if (!tc.compilerOptions) tc.compilerOptions = {};
+    const existingPaths = tc.compilerOptions.paths ?? {};
+    if (existingPaths["@/*"]) return false;
+    tc.compilerOptions.paths = { "@/*": ["./src/*"], ...existingPaths };
+    import_node_fs4.default.writeFileSync(tsconfigPath, JSON.stringify(tc, null, 2), "utf-8");
+    return true;
+  } catch {
+    return false;
+  }
+}
+function patchViteConfig(viteConfigPath) {
+  try {
+    let content = import_node_fs4.default.readFileSync(viteConfigPath, "utf-8");
+    if (content.includes("'@'") || content.includes('"@"') || content.includes("'@/*'") || content.includes('"@/*"') || content.includes("resolve:")) return false;
+    if (!content.includes("import path from 'path'") && !content.includes('import path from "path"')) {
+      const importMatches = [...content.matchAll(/^import .+$/gm)];
+      const lastImport = importMatches.at(-1);
+      if (lastImport?.index !== void 0) {
+        const insertAt = lastImport.index + lastImport[0].length;
+        content = content.slice(0, insertAt) + "\nimport path from 'path'" + content.slice(insertAt);
+      }
+    }
+    const lastClose = content.lastIndexOf("\n})");
+    if (lastClose === -1) return false;
+    const beforeClose = content.slice(0, lastClose).trimEnd();
+    const comma = beforeClose.endsWith(",") ? "" : ",";
+    const resolveBlock = `${comma}
+  resolve: {
+    alias: { '@': path.resolve(__dirname, './src') },
+  },`;
+    content = content.slice(0, lastClose) + resolveBlock + content.slice(lastClose);
+    import_node_fs4.default.writeFileSync(viteConfigPath, content, "utf-8");
+    return true;
+  } catch {
+    return false;
+  }
+}
 function resolveAliasPath(projectRoot, alias) {
   if (!alias.startsWith("@/")) return null;
   const relative = alias.slice(2);
@@ -3223,12 +3306,6 @@ const CardRoot = React.forwardRef<HTMLDivElement, CardProps>(
 CardRoot.displayName = 'Card'
 
 // \u2500\u2500 Size-based padding map (responsive: mobile \u2192 desktop) \u2500\u2500
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const sizePaddingMap = {
-  sm: 'p-4',                // 16px
-  default: 'p-4 sm:p-6',   // 16px \u2192 24px
-  lg: 'p-6 sm:p-8',        // 24px \u2192 32px
-} as const
 
 const sizePaddingXMap = {
   sm: 'px-4',               // 16px
@@ -8780,8 +8857,9 @@ const PaginationRoot = React.forwardRef<HTMLElement, PaginationProps>(
     color = 'default',
     radius = 'md',
     disabled = false,
-    withControls = true, // eslint-disable-line @typescript-eslint/no-unused-vars
-    withEdges = false, // eslint-disable-line @typescript-eslint/no-unused-vars
+    // Pre-declared API; conditional auto-rendering is tracked in COMPONENT-IMPROVEMENTS.md.
+    withControls: _withControls = true,
+    withEdges: _withEdges = false,
     loop = false,
     children,
     ...props
@@ -13028,7 +13106,6 @@ const ToastItem = React.memo(function ToastItem({
 }: ToastItemProps) {
   const [isExiting, setIsExiting] = React.useState(false)
   const [isEntered, setIsEntered] = React.useState(false)
-  const [isPaused, setIsPaused] = React.useState(false) // eslint-disable-line @typescript-eslint/no-unused-vars
   const timerRef = React.useRef<ReturnType<typeof setTimeout> | null>(null)
   const remainingRef = React.useRef<number>(0)
   const startTimeRef = React.useRef<number>(0)
@@ -13095,10 +13172,9 @@ const ToastItem = React.memo(function ToastItem({
     }
   }, [duration, handleAutoClose])
 
-  // Pause/resume on hover
+  // Pause/resume on hover (ref-only \u2014 no state update needed, avoids unnecessary re-renders)
   const handleMouseEnter = React.useCallback(() => {
     if (duration <= 0) return
-    setIsPaused(true)
     if (timerRef.current) {
       clearTimeout(timerRef.current)
       remainingRef.current -= Date.now() - startTimeRef.current
@@ -13107,7 +13183,6 @@ const ToastItem = React.memo(function ToastItem({
 
   const handleMouseLeave = React.useCallback(() => {
     if (duration <= 0) return
-    setIsPaused(false)
     startTimeRef.current = Date.now()
     timerRef.current = setTimeout(handleAutoClose, Math.max(remainingRef.current, TOAST_MIN_RESUME_MS))
   }, [duration, handleAutoClose])
@@ -14255,6 +14330,42 @@ async function add(args) {
     addedCount++;
     logger.success(`${entry.exists ? "Overwrote" : "Added"} ${entry.fileName}`);
   }
+  if (config.tailwind.version === 4 && addedCount > 0) {
+    try {
+      const cssFullPath = import_node_path5.default.join(projectRoot, config.tailwind.css);
+      if (import_node_fs5.default.existsSync(cssFullPath)) {
+        const cssContent = import_node_fs5.default.readFileSync(cssFullPath, "utf-8");
+        const cssDir = import_node_path5.default.dirname(cssFullPath);
+        const relRaw = import_node_path5.default.relative(cssDir, componentsDir).replace(/\\/g, "/");
+        const relSource = relRaw.startsWith(".") ? relRaw : `./${relRaw}`;
+        const sourcePattern = new RegExp(`@source\\s+["']${relSource.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}["']`);
+        if (!sourcePattern.test(cssContent)) {
+          const marker = "@7onic-ui/tokens";
+          const lastIdx = cssContent.lastIndexOf(marker);
+          if (lastIdx !== -1) {
+            const lineEnd = cssContent.indexOf("\n", lastIdx);
+            const insertAt = lineEnd !== -1 ? lineEnd + 1 : cssContent.length;
+            const updated = cssContent.slice(0, insertAt) + `@source "${relSource}";
+` + cssContent.slice(insertAt);
+            import_node_fs5.default.writeFileSync(cssFullPath, updated, "utf-8");
+            O2.success(`Added @source "${relSource}" to ${config.tailwind.css}`);
+          } else {
+            O2.warn(
+              `Could not find @7onic-ui/tokens import in ${config.tailwind.css}.
+  Run ${import_picocolors3.default.cyan("npx 7onic init")} first, or manually add to your CSS:
+
+    @source "${relSource}";`
+            );
+          }
+        }
+      }
+    } catch (err) {
+      if (err instanceof Error && "code" in err && err.code === "ENOENT") {
+      } else {
+        O2.warn(`Failed to inject @source into ${config.tailwind.css}: ${err}`);
+      }
+    }
+  }
   if (depsToInstall.length > 0) {
     const pm = detectPackageManager(projectRoot);
     const s = fe();
@@ -14368,7 +14479,7 @@ function showSetupHints(names) {
 
 // cli/src/index.ts
 var import_picocolors4 = __toESM(require_picocolors());
-var VERSION = "0.1.4";
+var VERSION = "0.1.6";
 var HELP = `
 ${import_picocolors4.default.bold("7onic")} \u2014 Add 7onic design system components to your project
 

package/llms.txt

@@ -25,14 +25,15 @@ npx 7onic init --tailwind v3 --yes    # Explicit v3, skip prompts
 **What it does:**
 1. Detects Tailwind version (v3: config file exists, v4: no config) — or uses `--tailwind` flag
 2. Detects package manager (npm/pnpm/yarn/bun)
-3. Installs: `@7onic-ui/tokens`, `clsx`, `tailwind-merge`, `class-variance-authority`
-4. Creates/updates CSS file with token imports
-5. Creates `cn()` utility at configured path
-6. Writes `7onic.json` config
+3. **Vite projects**: auto-configures `@/` path alias — patches `tsconfig.app.json` (JSONC-safe) and `vite.config.ts` (adds `import path` + `resolve.alias`), installs `@types/node`
+4. Installs: `@7onic-ui/tokens`, `lucide-react`, `clsx`, `tailwind-merge`, `class-variance-authority`
+5. Creates/updates CSS file with token imports (v4: auto-injects `@import "tailwindcss"` if missing)
+6. Creates `cn()` utility at configured path
+7. Writes `7onic.json` config
 
 **Requirements:**
 - TypeScript project (tsconfig.json required)
-- `@/` path alias configured
+- `@/` path alias — auto-configured for Vite; Next.js handles this automatically
 
 ### add
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "7onic",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "description": "CLI for adding 7onic design system components to your project",
   "bin": {
     "7onic": "./dist/index.js"