gladvn 0.2.14

package/scripts/merge-components.js

@@ -0,0 +1,64 @@
+const fs = require("fs");
+
+const dataTsPath = "./src/dev/data.ts";
+let content = fs.readFileSync(dataTsPath, "utf8");
+
+// Match MICRO_COMPONENTS array
+const microMatch = content.match(
+  /export const MICRO_COMPONENTS = (\[[\s\S]*?\]);/,
+);
+// Match MACRO_COMPONENTS array
+const macroMatch = content.match(
+  /export const MACRO_COMPONENTS = (\[[\s\S]*?\]);/,
+);
+
+if (!microMatch || !macroMatch) {
+  console.error("Could not find arrays");
+  process.exit(1);
+}
+
+// Safely evaluate arrays (since they only contain static objects)
+const micro = eval(microMatch[1]);
+const macro = eval(macroMatch[1]);
+
+const componentMap = new Map();
+
+micro.forEach((c) => {
+  componentMap.set(c.id, {
+    id: c.id,
+    label: c.label,
+    hasMicro: true,
+    hasMacro: false,
+  });
+});
+
+macro.forEach((c) => {
+  const baseId = c.id.replace("macro-", "");
+  if (componentMap.has(baseId)) {
+    componentMap.get(baseId).hasMacro = true;
+  } else {
+    componentMap.set(baseId, {
+      id: baseId,
+      label: c.label,
+      hasMicro: false,
+      hasMacro: true,
+    });
+  }
+});
+
+const merged = Array.from(componentMap.values()).sort((a, b) =>
+  a.label.localeCompare(b.label),
+);
+
+let output = "export const COMPONENTS = [\n";
+merged.forEach((c) => {
+  output += `  { id: "${c.id}", label: "${c.label}", hasMicro: ${c.hasMicro}, hasMacro: ${c.hasMacro} },\n`;
+});
+output += "];\n";
+
+// Replace in content
+content = content.replace(microMatch[0], output);
+content = content.replace(macroMatch[0], ""); // Remove MACRO_COMPONENTS
+
+fs.writeFileSync(dataTsPath, content);
+console.log("Merged data.ts successfully.");

package/scripts/optimize-barrel.ts

@@ -0,0 +1,116 @@
+import { Project } from "ts-morph";
+import { resolve, relative } from "path";
+
+const project = new Project({
+  tsConfigFilePath: "tsconfig.json",
+});
+
+const indexFile = project.getSourceFileOrThrow("src/index.ts");
+const presetFile = project.getSourceFileOrThrow("src/preset.ts");
+
+const exportMap = new Map<string, string>();
+
+function populateExportMap(file: any) {
+  const exportedDeclarations = file.getExportedDeclarations();
+  for (const [name, declarations] of exportedDeclarations) {
+    const decl = declarations[0];
+    const sourceFile = decl.getSourceFile();
+    let relPath = relative(resolve("src"), sourceFile.getFilePath());
+    relPath = relPath.replace(/\\/g, "/");
+    relPath = relPath.replace(/\.tsx?$/, "");
+    exportMap.set(name, "@/" + relPath);
+  }
+}
+
+populateExportMap(indexFile);
+populateExportMap(presetFile);
+
+// Find all dev files
+const filesToProcess = project.getSourceFiles([
+  "src/dev/**/*.tsx",
+  "src/dev/**/*.ts",
+]);
+
+let totalChanged = 0;
+
+for (const file of filesToProcess) {
+  let changed = false;
+  const imports = file.getImportDeclarations();
+
+  for (const imp of imports) {
+    const specifier = imp.getModuleSpecifierValue();
+    // Catch both @/index and @/preset (and trailing semicolon typos like @/index;)
+    if (
+      specifier === "@/index" ||
+      specifier === "@/preset" ||
+      specifier === "@/preset;"
+    ) {
+      const namedImports = imp.getNamedImports();
+      const importsByPath = new Map<
+        string,
+        { name: string; alias?: string }[]
+      >();
+
+      for (const named of namedImports) {
+        const name = named.getName();
+        const alias = named.getAliasNode()?.getText();
+
+        const sourcePath = exportMap.get(name);
+        if (sourcePath) {
+          if (!importsByPath.has(sourcePath)) {
+            importsByPath.set(sourcePath, []);
+          }
+          importsByPath.get(sourcePath)!.push({ name, alias });
+        } else {
+          console.warn(
+            `Export not found for ${name} in index.ts/preset.ts for file ${file.getFilePath()}`,
+          );
+          if (!importsByPath.has(specifier)) {
+            importsByPath.set(specifier, []);
+          }
+          importsByPath.get(specifier)!.push({ name, alias });
+        }
+      }
+
+      imp.remove();
+
+      for (const [sourcePath, namedList] of importsByPath) {
+        if (
+          sourcePath === "@/index" ||
+          sourcePath === "@/preset" ||
+          sourcePath === "@/preset;"
+        )
+          continue; // skip unmapped to avoid infinite loop or just add them back if we want to preserve. Wait, if I skip them, they are lost!
+        // Let's add them back correctly if they weren't found.
+        file.addImportDeclaration({
+          moduleSpecifier: sourcePath,
+          namedImports: namedList.map((n) =>
+            n.alias ? { name: n.name, alias: n.alias } : { name: n.name },
+          ),
+        });
+      }
+      // If we had unmapped ones, put them back
+      if (importsByPath.has(specifier)) {
+        file.addImportDeclaration({
+          moduleSpecifier: specifier,
+          namedImports: importsByPath
+            .get(specifier)!
+            .map((n) =>
+              n.alias ? { name: n.name, alias: n.alias } : { name: n.name },
+            ),
+        });
+      }
+
+      changed = true;
+    }
+  }
+
+  if (changed) {
+    totalChanged++;
+    file.saveSync();
+  }
+}
+
+console.log(
+  `Processed ${filesToProcess.length} files. Changed imports in ${totalChanged} files.`,
+);

package/scripts/postinstall.cjs

@@ -0,0 +1,228 @@
+#!/usr/bin/env node
+
+const fs = require("fs");
+const path = require("path");
+const readline = require("readline");
+
+// Colors
+const cyan = "\x1b[36m";
+const green = "\x1b[32m";
+const yellow = "\x1b[33m";
+const bold = "\x1b[1m";
+const dim = "\x1b[90m";
+const reset = "\x1b[0m";
+
+// Find the consumer's project root (where npm install was run)
+function findProjectRoot() {
+  // During postinstall, CWD is the package dir inside node_modules
+  // The consumer's project root is the INIT_CWD env variable
+  const initCwd = process.env.INIT_CWD;
+  if (initCwd) return initCwd;
+
+  // Fallback: walk up from node_modules
+  let dir = __dirname;
+  while (dir !== path.dirname(dir)) {
+    if (path.basename(dir) === "node_modules") {
+      return path.dirname(dir);
+    }
+    dir = path.dirname(dir);
+  }
+  return process.cwd();
+}
+
+// Check if running in the package's own install (not consumer)
+function isSelfInstall() {
+  const projectRoot = findProjectRoot();
+  try {
+    const pkg = JSON.parse(
+      fs.readFileSync(path.join(projectRoot, "package.json"), "utf8"),
+    );
+    return pkg.name === "gladvn";
+  } catch {
+    return false;
+  }
+}
+
+// Copy tokens.css to the target directory
+function copyTokens(projectRoot, targetDir) {
+  const tokensSource = path.join(
+    __dirname,
+    "..",
+    "src",
+    "styles",
+    "tokens.css",
+  );
+  const targetPath = path.join(projectRoot, targetDir, "tokens.css");
+
+  // Create directory if it doesn't exist
+  const dir = path.dirname(targetPath);
+  if (!fs.existsSync(dir)) {
+    fs.mkdirSync(dir, { recursive: true });
+  }
+
+  // Don't overwrite if already exists
+  if (fs.existsSync(targetPath)) {
+    console.log(
+      `${dim}   ⏭  tokens.css already exists at ${targetDir}/tokens.css — skipped${reset}`,
+    );
+    return targetPath;
+  }
+
+  fs.copyFileSync(tokensSource, targetPath);
+  console.log(
+    `${green}   ✅ Copied tokens.css → ${targetDir}/tokens.css${reset}`,
+  );
+  return targetPath;
+}
+
+// Inject imports into the main CSS file
+function injectImports(cssFilePath, tokensRelPath) {
+  if (!fs.existsSync(cssFilePath)) {
+    console.log(`${yellow}   ⚠  File not found: ${cssFilePath}${reset}`);
+    return false;
+  }
+
+  let content = fs.readFileSync(cssFilePath, "utf8");
+
+  // Check if already configured
+  if (content.includes("gladvn/gladcn.css")) {
+    console.log(
+      `${dim}   ⏭  gladvn already configured in this file — skipped${reset}`,
+    );
+    return true;
+  }
+
+  // Build the import lines
+  const sourceDirective = `@source "../node_modules/gladvn/dist";`;
+  const tokensImport = `@import "${tokensRelPath}";`;
+  const globalsImport = `@import "gladvn/gladcn.css";`;
+
+  const imports = `\n/* gladvn */\n${sourceDirective}\n${tokensImport}\n${globalsImport}\n`;
+
+  // Insert after @import "tailwindcss" if it exists, otherwise append
+  const tailwindPattern = /@import\s+["']tailwindcss["'];?\s*\n?/;
+  if (tailwindPattern.test(content)) {
+    content = content.replace(tailwindPattern, (match) => match + imports);
+  } else {
+    content = content + "\n" + imports;
+  }
+
+  fs.writeFileSync(cssFilePath, content);
+  console.log(
+    `${green}   ✅ Injected gladcn imports into ${path.basename(
+      cssFilePath,
+    )}${reset}`,
+  );
+  return true;
+}
+
+// Interactive setup
+async function interactiveSetup(projectRoot) {
+  const rl = readline.createInterface({
+    input: process.stdin,
+    output: process.stdout,
+  });
+
+  const ask = (question) =>
+    new Promise((resolve) => rl.question(question, resolve));
+
+  console.log(
+    `\n${cyan}╔══════════════════════════════════════════════════════════════════╗${reset}`,
+  );
+  console.log(
+    `${cyan}║  ${bold}gladvn${reset}${cyan} — Interactive Setup                          ║${reset}`,
+  );
+  console.log(
+    `${cyan}╚══════════════════════════════════════════════════════════════════╝${reset}\n`,
+  );
+
+  // Step 1: Ask where to put tokens.css
+  const tokensDir = await ask(
+    `${yellow}   📁 Where to copy tokens.css? ${dim}(default: src/styles)${reset}\n   > `,
+  );
+  const targetDir = tokensDir.trim() || "src/styles";
+  const tokensPath = copyTokens(projectRoot, targetDir);
+
+  // Step 2: Ask for main CSS file
+  const cssFile = await ask(
+    `\n${yellow}   📄 Path to your main CSS file? ${dim}(e.g. app/globals.css)${reset}\n   > `,
+  );
+  const cssFileTrimmed = cssFile.trim();
+
+  if (cssFileTrimmed) {
+    const cssFilePath = path.resolve(projectRoot, cssFileTrimmed);
+    const cssDir = path.dirname(cssFilePath);
+    const tokensAbsPath = path.resolve(projectRoot, targetDir, "tokens.css");
+    const tokensRelPath = "./" + path.relative(cssDir, tokensAbsPath);
+
+    injectImports(cssFilePath, tokensRelPath);
+  } else {
+    console.log(`${dim}   ⏭  Skipped CSS injection${reset}`);
+  }
+
+  console.log(`\n${cyan}   🎉 Setup complete! Use components:${reset}`);
+  console.log(
+    `${green}   import { Button, Card } from "gladvn"${reset}`,
+  );
+  console.log(
+    `\n${dim}   💡 Edit ${targetDir}/tokens.css to customize colors, radius, etc.${reset}\n`,
+  );
+
+  rl.close();
+}
+
+// Show static message (for non-interactive environments)
+function showStaticMessage() {
+  console.log(`
+${cyan}╔══════════════════════════════════════════════════════════════════╗
+║                                                                  ║
+║   ${bold}gladvn${reset}${cyan} installed successfully! 🎉                   ║
+║                                                                  ║
+║   ${yellow}1. Copy the default tokens into your CSS:${cyan}                      ║
+║                                                                  ║
+║      ${dim}cp node_modules/gladvn/src/styles/tokens.css \\${cyan}    ║
+║      ${dim}   src/styles/tokens.css${cyan}                                    ║
+║                                                                  ║
+║   ${yellow}2. Set up your main CSS file (e.g. app/globals.css):${cyan}               ║
+║                                                                  ║
+║      ${green}@import "tailwindcss";${cyan}                                      ║
+║      ${green}@source "../node_modules/gladvn/dist";${cyan}             ║
+║      ${green}@import "./tokens.css";${cyan}                                     ║
+║      ${green}@import "gladvn/gladcn.css";${cyan}                       ║
+║                                                                  ║
+║   ${yellow}3. Use components:${cyan}                                             ║
+║                                                                  ║
+║      ${green}import { Button, Card } from "gladvn"${cyan}             ║
+║                                                                  ║
+║   ${dim}💡 Customize tokens.css to change colors, radius, etc.${cyan}        ║
+║                                                                  ║
+╚══════════════════════════════════════════════════════════════════╝${reset}
+`);
+}
+
+// Main
+async function main() {
+  // Skip if this is the package's own install
+  if (isSelfInstall()) return;
+
+  const projectRoot = findProjectRoot();
+
+  // Check if running in interactive terminal
+  const isInteractive = process.stdin.isTTY && process.stdout.isTTY;
+
+  if (isInteractive) {
+    try {
+      await interactiveSetup(projectRoot);
+    } catch {
+      // Fallback to static message if interactive fails
+      showStaticMessage();
+    }
+  } else {
+    showStaticMessage();
+  }
+}
+
+main().catch(() => {
+  // Never fail the install
+  process.exit(0);
+});

package/scripts/refactor_divs.ts

@@ -0,0 +1,39 @@
+import * as fs from 'fs';
+import * as path from 'path';
+
+const dir = 'src/dev/showcase';
+const files = fs.readdirSync(dir).filter(f => f.endsWith('.tsx'));
+
+let totalChanges = 0;
+
+for (const file of files) {
+  const filePath = path.join(dir, file);
+  let content = fs.readFileSync(filePath, 'utf8');
+  let original = content;
+
+  const selfClosingRegex = /<div className="(w-64|w-full)">\s*<([A-Z]\w*)([\s\S]*?)\/>\s*<\/div>/g;
+  content = content.replace(selfClosingRegex, (match, width, comp, rest) => {
+    if (rest.includes('className=')) {
+      // If it already has className, replace className="..." with className="... width"
+      return match.replace(/className="([^"]*)"/, `className="$1 ${width}"`).replace(/<div[^>]*>/, '').replace(/<\/div>/, '').trim();
+    }
+    totalChanges++;
+    return `<${comp} className="${width}"${rest}/>`;
+  });
+
+  const withChildrenRegex = /<div className="(w-64|w-full)">\s*<([A-Z]\w*)([^>]*?)>([\s\S]*?)<\/\2>\s*<\/div>/g;
+  content = content.replace(withChildrenRegex, (match, width, comp, rest, inner) => {
+    if (rest.includes('className=')) {
+      return match;
+    }
+    totalChanges++;
+    return `<${comp} className="${width}"${rest}>${inner}</${comp}>`;
+  });
+
+  if (content !== original) {
+    fs.writeFileSync(filePath, content, 'utf8');
+    console.log(`Updated ${file}`);
+  }
+}
+
+console.log(`Total wrappers removed: ${totalChanges}`);

package/scripts/remove_div_wrappers.ts

@@ -0,0 +1,17 @@
+import { Project, SyntaxKind, JsxElement, StringLiteral, NoSubstitutionTemplateLiteral } from "ts-morph";
+import * as fs from "fs";
+
+// We will only do this for specific known wrapper classes to be safe
+const targetClasses = ["w-64", "w-full", "w-72", "w-96", "max-w-sm", "max-w-xs", "max-w-lg"];
+
+function shouldRemoveWrapper(classNameAttrValue: string) {
+  const classes = classNameAttrValue.split(" ").map(c => c.trim());
+  // If it ONLY contains classes from our safe list, or simple combinations
+  const hasTarget = classes.some(c => targetClasses.includes(c));
+  const hasDangerous = classes.some(c => c.includes("flex") || c.includes("grid") || c.includes("relative") || c.includes("absolute") || c.includes("mx-auto"));
+  
+  // Actually, if the wrapper is JUST a sizing wrapper, let's remove it.
+  return hasTarget && !hasDangerous;
+}
+
+// Just printing instructions for manual replacement is safer, but let's try a regex approach for calendar.tsx first

package/scripts/update-gaps.ts

@@ -0,0 +1,83 @@
+import { Project, SyntaxKind, PropertyAssignment } from "ts-morph";
+import fs from "fs";
+import path from "path";
+
+const project = new Project({
+  tsConfigFilePath: "tsconfig.json",
+});
+
+const sourceFiles = project.getSourceFiles("src/components/micro/*.tsx");
+
+let changed = 0;
+
+for (const sf of sourceFiles) {
+  let fileChanged = false;
+  
+  // 1. Update Badge base class specifically
+  if (sf.getBaseName() === "badge.tsx") {
+    const varDecls = sf.getVariableDeclarations();
+    for (const v of varDecls) {
+      if (v.getName() === "badgeVariants") {
+        const init = v.getInitializer();
+        if (init && init.getKind() === SyntaxKind.CallExpression) {
+          const args = init.getArguments();
+          if (args.length > 0 && args[0].getKind() === SyntaxKind.StringLiteral) {
+            let str = args[0].getText();
+            str = str.replace(/gap-\d+(\.\d+)?/g, "gap-1");
+            args[0].replaceWithText(str);
+            fileChanged = true;
+          }
+        }
+      }
+    }
+  }
+
+  // 2. Update size variants for all components
+  const calls = sf.getDescendantsOfKind(SyntaxKind.CallExpression);
+  for (const call of calls) {
+    if (call.getExpression().getText() === "cva" || call.getExpression().getText() === "tv") {
+      const args = call.getArguments();
+      if (args.length > 1 && args[1].getKind() === SyntaxKind.ObjectLiteralExpression) {
+        const variantsProp = args[1].getProperty("variants");
+        if (variantsProp && variantsProp.getKind() === SyntaxKind.PropertyAssignment) {
+          const variantsInit = variantsProp.getInitializerIfKind(SyntaxKind.ObjectLiteralExpression);
+          if (variantsInit) {
+            const sizeProp = variantsInit.getProperty("size");
+            if (sizeProp && sizeProp.getKind() === SyntaxKind.PropertyAssignment) {
+              const sizeInit = sizeProp.getInitializerIfKind(SyntaxKind.ObjectLiteralExpression);
+              if (sizeInit) {
+                // We have size: { sm: "...", md: "...", lg: "..." }
+                const sizes = ["sm", "md", "lg"];
+                const targetGaps = { sm: "gap-1", md: "gap-1.5", lg: "gap-2" };
+
+                for (const s of sizes) {
+                  const prop = sizeInit.getProperty(s);
+                  if (prop && prop.getKind() === SyntaxKind.PropertyAssignment) {
+                    const init = prop.getInitializer();
+                    if (init && init.getKind() === SyntaxKind.StringLiteral) {
+                      let text = init.getText();
+                      // Only replace if gap- exists
+                      if (/gap-\d+(\.\d+)?/.test(text)) {
+                        text = text.replace(/gap-\d+(\.\d+)?/g, targetGaps[s]);
+                        init.replaceWithText(text);
+                        fileChanged = true;
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  if (fileChanged) {
+    sf.saveSync();
+    changed++;
+    console.log("Updated", sf.getFilePath());
+  }
+}
+
+console.log(`Updated ${changed} files.`);

package/scripts/update_showcase_codestrings.ts

@@ -0,0 +1,87 @@
+import { Project, SyntaxKind, JsxElement } from "ts-morph";
+
+const project = new Project({
+  tsConfigFilePath: "tsconfig.json",
+});
+
+const sourceFiles = project.getSourceFiles("src/dev/showcase/**/*.tsx");
+
+let totalUpdates = 0;
+
+function dedent(text: string): string {
+  const lines = text.split('\n');
+  // Remove first empty line if it exists (usually just newline after the opening tag)
+  if (lines.length > 0 && lines[0].trim() === '') {
+    lines.shift();
+  }
+  // Remove last empty line if it exists
+  if (lines.length > 0 && lines[lines.length - 1].trim() === '') {
+    lines.pop();
+  }
+  
+  // Find minimum indentation
+  let minIndent = Infinity;
+  for (const line of lines) {
+    if (line.trim().length === 0) continue;
+    const match = line.match(/^(\s*)/);
+    if (match) {
+      minIndent = Math.min(minIndent, match[1].length);
+    }
+  }
+  
+  if (minIndent === Infinity) return text.trim();
+  
+  return lines.map(line => line.substring(minIndent)).join('\n');
+}
+
+for (const sourceFile of sourceFiles) {
+  const exampleSections = sourceFile.getDescendantsOfKind(SyntaxKind.JsxElement)
+    .filter(element => {
+      const opening = element.getOpeningElement();
+      return opening.getTagNameNode().getText() === "ExampleSection";
+    });
+
+  let fileUpdated = false;
+
+  for (const section of exampleSections) {
+    const opening = section.getOpeningElement();
+    
+    // Check if codeString already exists
+    const hasCodeString = opening.getAttributes().some(attr => {
+      return attr.getKind() === SyntaxKind.JsxAttribute && 
+             attr.asKind(SyntaxKind.JsxAttribute)?.getNameNode().getText() === "codeString";
+    });
+
+    if (!hasCodeString) {
+      // Get raw text of children
+      const childrenNodes = section.getJsxChildren();
+      if (childrenNodes.length === 0) continue;
+      
+      const start = childrenNodes[0].getStart();
+      const end = childrenNodes[childrenNodes.length - 1].getEnd();
+      const rawText = sourceFile.getFullText().substring(start, end);
+      
+      const cleanCode = dedent(rawText);
+      
+      // Escape backticks and ${} to avoid template literal interpolation issues
+      const escapedCode = cleanCode
+        .replace(/`/g, '\\`')
+        .replace(/\$\{/g, '\\${');
+
+      opening.addAttribute({
+        name: "codeString",
+        initializer: `{\`${escapedCode}\`}`
+      });
+      
+      fileUpdated = true;
+      totalUpdates++;
+    }
+  }
+
+  if (fileUpdated) {
+    console.log(`Updated ${sourceFile.getBaseName()}`);
+  }
+}
+
+project.saveSync();
+console.log(`Finished! Updated ${totalUpdates} ExampleSections.`);

package/src/components/macro/accordion-preset.test.tsx

@@ -0,0 +1,37 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { AccordionPreset } from "./accordion-preset";
+
+const items = [
+  { value: "item-1", title: "Section 1", content: "Content for section 1" },
+  { value: "item-2", title: "Section 2", content: "Content for section 2" },
+  {
+    value: "item-3",
+    title: "Section 3",
+    content: "Content for section 3",
+    disabled: true,
+  },
+];
+
+describe("AccordionPreset", () => {
+  it("renders all accordion triggers", () => {
+    render(<AccordionPreset items={items} />);
+    expect(screen.getByText("Section 1")).toBeInTheDocument();
+    expect(screen.getByText("Section 2")).toBeInTheDocument();
+    expect(screen.getByText("Section 3")).toBeInTheDocument();
+  });
+
+  it("renders correct number of items", () => {
+    const { container } = render(<AccordionPreset items={items} />);
+    const accordionItems = container.querySelectorAll(
+      "[data-slot='accordion-item']",
+    );
+    expect(accordionItems.length).toBe(3);
+  });
+
+  it("renders with empty items array", () => {
+    const { container } = render(<AccordionPreset items={[]} />);
+    const accordion = container.querySelector("[data-slot='accordion']");
+    expect(accordion).toBeInTheDocument();
+  });
+});