@imaginario27/air-ui-ds 1.0.1 → 1.0.3

package/README.md

@@ -1,19 +1,18 @@
 # @imaginario27/air-ui-ds
 
-A modular Design System and UI component library built for Vue 3 and Nuxt 3. It provides a scalable architecture for building consistent interfaces, theme management, and reusable components powered by Tailwind CSS and TypeScript.
+A modular Design System and UI component library built for Vue and Nuxt. It provides a scalable architecture for building consistent interfaces, theme management, and reusable components powered by Tailwind CSS and TypeScript.
 
 Documentation: [https://air-ui.netlify.app/](https://air-ui.netlify.app/)
 
 ## Features
 
-* Vue 3 and Nuxt 3 compatibility
+* Vue and Nuxt compatibility
 * Design System tokens for colors, spacing, typography, and themes
 * Reusable and typed UI components
 * Light and dark theme system with automatic CSS variable generation
-* Tailwind CSS v4 integration
+* Tailwind CSS latest version integration
 * Auto-import support for components and composables in Nuxt
 * Utilities for i18n, file uploads, images, PDF generation, and QR codes
-* Documentation support using Nuxt Content
 * Full testing setup with Vitest, Vue Test Utils, and Nuxt Test Utils
 
 
@@ -52,6 +51,8 @@ This regenerates the theme files used by Tailwind CSS and the Design System.
 This package includes a complete testing environment using:
 
 * Vitest
+* Vue Test Utils
+* Nuxt Test Utils
 * Happy DOM
 
 Run the tests with:

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@imaginario27/air-ui-ds",
-    "version": "1.0.1",
+    "version": "1.0.3",
     "author": "imaginario27",
     "type": "module",
     "homepage": "https://air-ui.netlify.app/",

package/scripts/generate-theme.ts

@@ -0,0 +1,104 @@
+import {
+    readFileSync,
+    writeFileSync,
+    existsSync,
+    mkdirSync,
+    unlinkSync,
+} from "fs"
+import { resolve, dirname } from "path"
+
+const inputPath = resolve("assets/css/theme/ui-theme.css")
+const outputPath = resolve("assets/css/main.css")
+
+ensureOutputDir(outputPath)
+deleteIfExists(outputPath)
+
+const content = readFileSync(inputPath, "utf-8")
+const { colorVars, otherVars } = extractThemeVars(content)
+
+const finalOutput = generateThemeFile(colorVars, otherVars)
+writeFileSync(outputPath, finalOutput, "utf-8")
+
+console.log("✅ Tailwind theme file generated in assets/css/")
+
+function ensureOutputDir(filePath: string) {
+    const dir = dirname(filePath)
+    if (!existsSync(dir)) {
+        mkdirSync(dir, { recursive: true })
+    }
+}
+
+function deleteIfExists(filePath: string) {
+    if (existsSync(filePath)) {
+        unlinkSync(filePath)
+    }
+}
+
+function extractThemeVars(content: string) {
+    const colorVars: string[] = []
+    const otherVars: string[] = []
+
+    const lines = content.split("\n")
+    let inRoot = false
+    let inDark = false
+
+    for (const rawLine of lines) {
+        const line = rawLine.trim()
+
+        if (line.startsWith(":root {")) {
+            inRoot = true
+            continue
+        }
+        if (line.startsWith(".dark {")) {
+            inDark = true
+            continue
+        }
+        if (line.startsWith("}")) {
+            inRoot = false
+            inDark = false
+            continue
+        }
+
+        if (!inRoot || inDark) continue
+
+        const key = extractVarKey(line)
+        if (!key || key.startsWith("--ds-")) continue
+
+        const declaration = `    ${key}: var(${key});`
+        if (key.startsWith("--color-")) {
+            colorVars.push(declaration)
+        } else {
+            otherVars.push(declaration)
+        }
+    }
+
+    return { colorVars, otherVars }
+}
+
+function extractVarKey(line: string): string | null {
+    const match = line.match(/^--[\w-]+:\s*[^;]+;/)
+    if (!match) return null
+    const [key] = line.split(":").map(s => s.trim().replace(/;$/, ""))
+    return key || null
+}
+
+function generateThemeFile(colorVars: string[], otherVars: string[]): string {
+    return [
+        `@import "tailwindcss";`,
+        `@source "../../node_modules/@imaginario27/air-ui-ds";`,
+        `@source "../../node_modules/@imaginario27/air-ui-utils";`,
+        ``,
+        `@import "./theme/primitives.css";`,
+        `@import "./theme/colors.css";`,
+        `@import "./theme/ui-theme.css";`,
+        ``,
+        `@theme {`,
+        `    /* Disables Tailwind default colors */`,
+        `    --color-*: initial;`,
+        ``,
+        ...colorVars,
+        ``,
+        ...otherVars,
+        `}`,
+    ].join("\n")
+}