@cloudwick/astral-ui-cli 0.3.0 → 0.4.0

package/README.md

@@ -163,8 +163,16 @@ npx astral-ui repair-tailwind
 This command will:
 - Check for existing Tailwind configuration and create a timestamped backup
 - Create a new Tailwind configuration with the appropriate file extension for your project
-- Update CSS variables required by components
+- Set up the complete CSS structure including:
+  - Main CSS file with proper imports
+  - Fonts stylesheet (fonts.min.css)
 - Ensure proper dependencies are installed
+- Create a backup of any existing Tailwind configuration before modifying it
+
+The CSS structure created will match exactly what the `init` command creates, including:
+- CSS variables for colors and theming
+- Font imports and configuration
+- Proper file organization
 
 #### Options
 
@@ -174,6 +182,19 @@ This command will:
 | `--cwd <dir>` | `-c` | Specify the working directory |
 | `--silent` | `-s` | Mute output |
 
+#### Example Usage
+
+```bash
+# Basic repair
+npx astral-ui repair-tailwind
+
+# Force overwrite existing files
+npx astral-ui repair-tailwind --force
+
+# Repair in a specific directory
+npx astral-ui repair-tailwind --cwd ./my-project
+```
+
 ## Configuration
 
 ### components.json

package/dist/index.js

@@ -333,10 +333,6 @@ async function CSS_VARIABLES_TEMPLATE() {
     const variables = await getCSSVariables();
     return `
 @import "./fonts.min.css";
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-@import "./utilities.css";
 
 @layer base {
   :root {
@@ -363,6 +359,13 @@ The \`tailwind.config.js\` file has been configured with:
 
 **Important:** You must import the styles from \`src/assets/css/index.css\` at the top level of your application (for example, in your main entry file such as \`src/main.tsx\`, \`src/index.js\`, or \`_app.tsx\` in Next.js) to ensure all components are styled correctly.
 
+## CSS Structure
+
+The styling system consists of several key files:
+
+1. \`index.css\` - Main CSS file that imports other stylesheets and defines the Core CSS variables and base styles
+2. \`fonts.min.css\` - Font definitions and configurations
+
 ## CSS Variables
 
 The CSS file includes all necessary CSS variables that the components reference, including:
@@ -381,6 +384,22 @@ If a component doesn't appear correctly styled, make sure:
 1. The Tailwind CSS configuration is properly loaded
 2. The CSS variables are included in your main CSS file
 3. Your component is properly importing the required styles
+4. The \`index.css\` file is imported in the correct order (after Tailwind directives)
+
+## Troubleshooting
+
+If you experience issues with Tailwind configuration or styling:
+
+1. Run \`npx astral-ui repair-tailwind\`
+2. The repair command will:
+   - Create a backup of your existing Tailwind configuration
+   - Generate a fresh Tailwind configuration file
+   - Restore the CSS structure with required variables
+   - Set up font files and stylesheets
+3. If styling issues persist after repair:
+   - Check that CSS files are imported in the correct order in your application
+   - Verify your build tool's PostCSS and Tailwind configuration
+   - Ensure all required dependencies are installed correctly
 `;
 async function loadTailwindConfig() {
   try {
@@ -533,17 +552,6 @@ async function copyTemplateFiles({
           } catch (error) {
             console.error(`Failed to copy fonts stylesheet: ${error}`);
           }
-          try {
-            const utilitiesSrc = import_path4.default.resolve(__dirname, "templates/css/utilities.css");
-            const utilitiesDestDir = import_path4.default.dirname(fullCssPath);
-            const utilitiesDest = import_path4.default.join(utilitiesDestDir, "utilities.css");
-            const utilitiesContent = await import_fs_extra3.default.readFile(utilitiesSrc, "utf-8");
-            const cleanedUtilitiesContent = utilitiesContent.replace(/\/\*[\s\S]*?\*\/\n\n/, "");
-            await import_fs_extra3.default.writeFile(utilitiesDest, cleanedUtilitiesContent);
-            console.info(import_chalk.default.green(`\u2705 Created utilities stylesheet at ${utilitiesDest}`));
-          } catch (error) {
-            console.error(`Failed to copy utilities stylesheet: ${error}`);
-          }
           try {
             const fontsDirSrc = import_path4.default.resolve(__dirname, "templates/fonts");
             const projectCssDir = import_path4.default.dirname(fullCssPath);
@@ -846,9 +854,12 @@ var init = new import_commander.Command().name("init").description("initialize y
       );
       console.info(
         import_chalk2.default.gray(
-          "  3. Set up your Tailwind CSS by importing the created CSS file in your application"
+          "  3. Import CSS files in your application entry point in this order:"
         )
       );
+      console.info(import_chalk2.default.gray("     a. Tailwind directives"));
+      console.info(import_chalk2.default.gray("     b. index.css from src/assets/css/index.css"));
+      console.info(import_chalk2.default.gray("     c. Other CSS files"));
     }
   } catch (error) {
     console.error(import_chalk2.default.red("Error initializing project:"), error);
@@ -2262,7 +2273,7 @@ PanelGroup.displayName = "PanelGroup";`
     "files": [
       {
         "name": "progressVariants.ts",
-        "content": 'import { cva } from "class-variance-authority";\n\nexport const progressContainerVariants = cva(\n  "flex items-center gap-2 w-full"\n);\n\nexport const progressTrackVariants = cva(\n  "bg-gray-200 h-2 rounded-2xl w-full dark:bg-secondary-600"\n);\n\nexport const progressBarVariants = cva(\n  "flex justify-center items-center outline rounded-sm text-xs font-medium transition-all duration-100 h-full py-1 relative group",\n  {\n    variants: {\n      color: {\n        primary: "!bg-primary-500 outline-primary-400 dark:bg-primary-400 dark:outline-primary-500",\n        secondary: "bg-gray-500 outline-gray-400 dark:bg-secondary-400 dark:outline-gray-500",\n        success: "bg-success-500 outline-success-400 dark:bg-success-400 dark:outline-success-500",\n        warning: "bg-warning-500 outline-warning-400 dark:bg-warning-400 dark:outline-warning-500",\n        error: "bg-error-500 outline-error-400 dark:bg-error-400 dark:outline-error-500"\n      },\n      striped: {\n        true: "bgStripesPattern"\n      },\n      animate: {\n        true: "animate-stripes"\n      }\n    },\n    defaultVariants: {\n      color: "primary"\n    }\n  }\n);\n\nexport const progressTextVariants = cva(\n  [\n    "flex items-center justify-center text-xs-fit text-white dark:text-secondary-800",\n    "h-8 w-8 border rounded-full dark:border-secondary-800 opacity-0 group-hover:opacity-100",\n    "transition-opacity duration-300 ease-in-out z-10 absolute -end-4"\n  ].join( " " ),\n  {\n    variants: {\n      position: {\n        top: "bottom-3",\n        right: "", // Not needed for position right\n        bottom: "top-3",\n        inline: "-end-4"\n      },\n      color: {\n        primary: "bg-primary-500 dark:bg-primary-400",\n        secondary: "bg-gray-500 dark:bg-secondary-400",\n        success: "bg-success-500 dark:bg-success-400",\n        warning: "bg-warning-500 dark:bg-warning-400",\n        error: "bg-error-500 dark:bg-error-400"\n      }\n    },\n    defaultVariants: {\n      position: "right",\n      color: "primary"\n    }\n  }\n);\n\nexport const progressValueTextVariants = cva(\n  "text-base text-center text-secondary-500 font-medium min-w-8 dark:text-secondary-50"\n);\n\nexport const progressCircularVariants = cva(\n  "",\n  {\n    variants: {\n      size: {\n        md: "",\n        lg: ""\n      }\n    },\n    defaultVariants: {\n      size: "md"\n    }\n  }\n);\n\nexport const progressCircularTrackVariants = cva(\n  "dark:stroke-secondary-600",\n  {\n    variants: {\n      color: {\n        primary: "stroke-primary-50",\n        secondary: "stroke-gray-50",\n        success: "stroke-success-50",\n        warning: "stroke-warning-50",\n        error: "stroke-error-50"\n      }\n    },\n    defaultVariants: {\n      color: "primary"\n    }\n  }\n);\n\nexport const progressCircularProgressVariants = cva(\n  "",\n  {\n    variants: {\n      color: {\n        primary: "stroke-primary-500 dark:stroke-primary-400",\n        secondary: "stroke-gray-500 dark:stroke-secondary-400",\n        success: "stroke-success-500 dark:stroke-success-400",\n        warning: "stroke-warning-500 dark:stroke-warning-400",\n        error: "stroke-error-500 dark:stroke-error-400"\n      }\n    },\n    defaultVariants: {\n      color: "primary"\n    }\n  }\n);\n\nexport const progressCircularTextVariants = cva(\n  "fill-secondary-500 font-semibold dark:fill-secondary-50",\n  {\n    variants: {\n      size: {\n        md: "text-xxs",\n        lg: "text-xs-fit"\n      }\n    },\n    defaultVariants: {\n      size: "md"\n    }\n  }\n);'
+        "content": 'import { cva } from "class-variance-authority";\n\nexport const progressContainerVariants = cva(\n  "flex items-center gap-2 w-full"\n);\n\nexport const progressTrackVariants = cva(\n  "bg-gray-200 h-2 rounded-2xl w-full dark:bg-secondary-600"\n);\n\nexport const progressBarVariants = cva(\n  "flex justify-center items-center outline rounded-sm text-xs font-medium transition-all duration-100 h-full py-1 relative group",\n  {\n    variants: {\n      color: {\n        primary: "!bg-primary-500 outline-primary-400 dark:bg-primary-400 dark:outline-primary-500",\n        secondary: "bg-gray-500 outline-gray-400 dark:bg-secondary-400 dark:outline-gray-500",\n        success: "bg-success-500 outline-success-400 dark:bg-success-400 dark:outline-success-500",\n        warning: "bg-warning-500 outline-warning-400 dark:bg-warning-400 dark:outline-warning-500",\n        error: "bg-error-500 outline-error-400 dark:bg-error-400 dark:outline-error-500"\n      },\n      striped: {\n        true: [\n          "bg-[size:0.5rem_0.5rem]",\n          "bg-[image:repeating-linear-gradient(45deg,rgba(255,255,255,0.15)_0_0.25rem,transparent_0.25rem_0.5rem)]"\n        ].join( " " )\n      },\n      animate: {\n        true: "animate-stripes"\n      }\n    },\n    defaultVariants: {\n      color: "primary"\n    }\n  }\n);\n\nexport const progressTextVariants = cva(\n  [\n    "flex items-center justify-center text-xs-fit text-white dark:text-secondary-800",\n    "h-8 w-8 border rounded-full dark:border-secondary-800 opacity-0 group-hover:opacity-100",\n    "transition-opacity duration-300 ease-in-out z-10 absolute -end-4"\n  ].join( " " ),\n  {\n    variants: {\n      position: {\n        top: "bottom-3",\n        right: "", // Not needed for position right\n        bottom: "top-3",\n        inline: "-end-4"\n      },\n      color: {\n        primary: "bg-primary-500 dark:bg-primary-400",\n        secondary: "bg-gray-500 dark:bg-secondary-400",\n        success: "bg-success-500 dark:bg-success-400",\n        warning: "bg-warning-500 dark:bg-warning-400",\n        error: "bg-error-500 dark:bg-error-400"\n      }\n    },\n    defaultVariants: {\n      position: "right",\n      color: "primary"\n    }\n  }\n);\n\nexport const progressValueTextVariants = cva(\n  "text-base text-center text-secondary-500 font-medium min-w-8 dark:text-secondary-50"\n);\n\nexport const progressCircularVariants = cva(\n  "",\n  {\n    variants: {\n      size: {\n        md: "",\n        lg: ""\n      }\n    },\n    defaultVariants: {\n      size: "md"\n    }\n  }\n);\n\nexport const progressCircularTrackVariants = cva(\n  "dark:stroke-secondary-600",\n  {\n    variants: {\n      color: {\n        primary: "stroke-primary-50",\n        secondary: "stroke-gray-50",\n        success: "stroke-success-50",\n        warning: "stroke-warning-50",\n        error: "stroke-error-50"\n      }\n    },\n    defaultVariants: {\n      color: "primary"\n    }\n  }\n);\n\nexport const progressCircularProgressVariants = cva(\n  "",\n  {\n    variants: {\n      color: {\n        primary: "stroke-primary-500 dark:stroke-primary-400",\n        secondary: "stroke-gray-500 dark:stroke-secondary-400",\n        success: "stroke-success-500 dark:stroke-success-400",\n        warning: "stroke-warning-500 dark:stroke-warning-400",\n        error: "stroke-error-500 dark:stroke-error-400"\n      }\n    },\n    defaultVariants: {\n      color: "primary"\n    }\n  }\n);\n\nexport const progressCircularTextVariants = cva(\n  "fill-secondary-500 font-semibold dark:fill-secondary-50",\n  {\n    variants: {\n      size: {\n        md: "text-xxs",\n        lg: "text-xs-fit"\n      }\n    },\n    defaultVariants: {\n      size: "md"\n    }\n  }\n);'
       },
       {
         "name": "progress.tsx",
@@ -3200,7 +3211,8 @@ var repairTailwindOptionsSchema = import_zod3.z.object({
   silent: import_zod3.z.boolean().default(false)
 });
 async function getCSSVariables2() {
-  const baseCSSPath = import_path9.default.join(process.cwd(), "src/assets/css/base.css");
+  const templatesDir = getTemplatesDir();
+  const baseCSSPath = import_path9.default.join(templatesDir, "css", "base.css");
   try {
     const content = await import_fs_extra7.default.readFile(baseCSSPath, "utf-8");
     const rootBlockMatch = content.match(/@layer base\s*{\s*:root\s*{([^}]+)}/s);
@@ -3213,6 +3225,25 @@ async function getCSSVariables2() {
     throw error;
   }
 }
+function getTemplatesDir() {
+  const isDev = __dirname.includes("src");
+  if (isDev) {
+    return import_path9.default.resolve(__dirname, "..", "templates");
+  }
+  return import_path9.default.resolve(__dirname, "..", "..", "templates");
+}
+async function copyFontsStylesheet(cssDir) {
+  try {
+    const templatesDir = getTemplatesDir();
+    const fontsSrc = import_path9.default.join(templatesDir, "css", "fonts.min.css");
+    const fontsDest = import_path9.default.join(cssDir, "fonts.min.css");
+    await import_fs_extra7.default.copy(fontsSrc, fontsDest);
+    console.info(import_chalk5.default.green(`\u2705 Created fonts stylesheet at ${fontsDest}`));
+  } catch (error) {
+    console.error(import_chalk5.default.red(`Failed to copy fonts stylesheet: ${error}`));
+    throw error;
+  }
+}
 var repairTailwind = new import_commander3.Command().name("repair-tailwind").description(
   "repair tailwind configuration when setup fails - only use if experiencing issues with Tailwind"
 ).option("-f, --force", "force overwrite of existing configuration", false).option(
@@ -3350,12 +3381,11 @@ export function cn(...inputs: ClassValue[]) {
     if (!import_fs_extra7.default.existsSync(cssPath) || options.force) {
       try {
         console.info(import_chalk5.default.cyan(`Directly creating CSS file at ${cssPath}`));
-        await import_fs_extra7.default.ensureDir(import_path9.default.dirname(cssPath));
+        const cssDir = import_path9.default.dirname(cssPath);
+        await import_fs_extra7.default.ensureDir(cssDir);
         const cssVariables = await getCSSVariables2();
         const cssContent = `
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "./fonts.min.css";
 
 @layer base {
   :root {
@@ -3364,6 +3394,8 @@ ${cssVariables}
 }
 `;
         await import_fs_extra7.default.writeFile(cssPath, cssContent.trim());
+        console.info(import_chalk5.default.green(`\u2705 Created CSS file at ${cssPath}`));
+        await copyFontsStylesheet(import_path9.default.dirname(cssPath));
       } catch (error) {
         console.error(import_chalk5.default.red(`Failed to create CSS file: ${error}`));
       }
@@ -3642,7 +3674,7 @@ import { cn } from '@utils';
 var import_gradient_string = __toESM(require("gradient-string"));
 var packageInfo = {
   name: "@cloudwick/astral-ui-cli",
-  version: "0.3.0"
+  version: "0.4.0"
 };
 var program = new import_commander5.Command().name(packageInfo.name).description("CLI for installing Astral UI components in any codebase").version(
   packageInfo.version,