muscle-config 1.0.0

package/dist/prompts/css.prompt.js

@@ -0,0 +1,217 @@
+import inquirer from "inquirer";
+import chalk from "chalk";
+const colorChoices = [
+    {
+        name: chalk.bgHex("#6366f1").white("  indigo  ") + "  Indigo",
+        value: "indigo",
+    },
+    {
+        name: chalk.bgHex("#10b981").black("  emerald ") + "  Emerald",
+        value: "emerald",
+    },
+    {
+        name: chalk.bgHex("#737373").white("  neutral ") + "  Neutral",
+        value: "neutral",
+    },
+    {
+        name: chalk.bgHex("#e11d48").white("  custom  ") + "  Custom HEX",
+        value: "custom",
+    },
+    { name: "  Skip", value: "none" },
+];
+const fontChoices = [
+    { name: "Inter   — clean, modern, readable", value: "inter" },
+    { name: "Poppins — rounded, great for dashboards", value: "poppins" },
+    { name: "Cairo   — elegant, great for bilingual apps", value: "cairo" },
+    { name: "Skip", value: "none" },
+];
+// Beginner Mode
+async function askBeginner() {
+    const { reset } = await inquirer.prompt([
+        {
+            type: "confirm",
+            name: "reset",
+            message: "Modern CSS reset (box-sizing, margin 0, etc.)?",
+            default: true,
+        },
+    ]);
+    const { colorPreset } = await inquirer.prompt([
+        {
+            type: "list",
+            name: "colorPreset",
+            message: "Choose a primary color:",
+            choices: colorChoices,
+        },
+    ]);
+    let customColor;
+    if (colorPreset === "custom") {
+        const res = await inquirer.prompt([
+            {
+                type: "input",
+                name: "customColor",
+                message: "Enter HEX color:",
+                default: "#6366f1",
+            },
+        ]);
+        customColor = res.customColor;
+    }
+    const { wantDarkMode } = await inquirer.prompt([
+        {
+            type: "confirm",
+            name: "wantDarkMode",
+            message: "Enable dark mode?",
+            default: true,
+        },
+    ]);
+    return {
+        reset,
+        colorPreset,
+        customColor,
+        darkMode: wantDarkMode ? "media" : false,
+        darkModeToggle: false,
+        font: "none",
+        separateFiles: false,
+    };
+}
+// Advanced Mode
+async function askAdvanced() {
+    const { reset } = await inquirer.prompt([
+        {
+            type: "confirm",
+            name: "reset",
+            message: "Add a CSS reset?",
+            default: true,
+        },
+    ]);
+    const { colorPreset } = await inquirer.prompt([
+        {
+            type: "list",
+            name: "colorPreset",
+            message: "Choose a primary color:",
+            choices: colorChoices,
+        },
+    ]);
+    let customColor;
+    if (colorPreset === "custom") {
+        const res = await inquirer.prompt([
+            {
+                type: "input",
+                name: "customColor",
+                message: "Enter HEX color:",
+                default: "#6366f1",
+            },
+        ]);
+        customColor = res.customColor;
+    }
+    const { wantDarkMode } = await inquirer.prompt([
+        {
+            type: "confirm",
+            name: "wantDarkMode",
+            message: "Enable dark mode?",
+            default: true,
+        },
+    ]);
+    let darkMode = false;
+    let darkModeToggle = false;
+    if (wantDarkMode) {
+        const { strategy } = await inquirer.prompt([
+            {
+                type: "list",
+                name: "strategy",
+                message: "Dark mode strategy:",
+                choices: [
+                    { name: "Manual toggle (class)  (recommended)", value: "class" },
+                    { name: "System preference (media)", value: "media" },
+                ],
+            },
+        ]);
+        darkMode = strategy;
+        if (strategy === "class") {
+            const { toggle } = await inquirer.prompt([
+                {
+                    type: "confirm",
+                    name: "toggle",
+                    message: "Add ThemeToggle component?",
+                    default: true,
+                },
+            ]);
+            darkModeToggle = toggle;
+        }
+    }
+    const { font } = await inquirer.prompt([
+        {
+            type: "list",
+            name: "font",
+            message: "Choose a default font:",
+            choices: fontChoices,
+        },
+    ]);
+    const { separateFiles } = await inquirer.prompt([
+        {
+            type: "confirm",
+            name: "separateFiles",
+            message: "Generate separate CSS files? (variables, reset, typography)",
+            default: false,
+        },
+    ]);
+    return {
+        reset,
+        colorPreset,
+        customColor,
+        darkMode,
+        darkModeToggle,
+        font,
+        separateFiles,
+    };
+}
+// Css Configuration
+export async function askCssConfig() {
+    const { mode } = await inquirer.prompt([
+        {
+            type: "list",
+            name: "mode",
+            message: "CSS configuration mode?",
+            choices: [
+                { name: "Beginner  (recommended)", value: "beginner" },
+                { name: "Advanced  (full control)", value: "advanced" },
+                { name: "Skip  (use Vite default)", value: "skip" },
+            ],
+        },
+    ]);
+    if (mode === "skip") {
+        return {
+            mode,
+            reset: false,
+            colorPreset: "none",
+            darkMode: false,
+            darkModeToggle: false,
+            font: "none",
+            separateFiles: false,
+            demo: false,
+        };
+    }
+    const answers = mode === "beginner" ? await askBeginner() : await askAdvanced();
+    let demo = false;
+    if (answers.darkModeToggle) {
+        const { wantDemo } = await inquirer.prompt([
+            {
+                type: "confirm",
+                name: "wantDemo",
+                message: "Override App.jsx with a CSS demo template?",
+                default: true,
+            },
+        ]);
+        demo = wantDemo;
+    }
+    return {
+        mode,
+        reset: false,
+        colorPreset: "none",
+        darkMode: false,
+        darkModeToggle: false,
+        font: "none",
+        separateFiles: false,
+        demo,
+        ...answers,
+    };
+}

package/dist/prompts/directory.prompt.js

@@ -0,0 +1,16 @@
+import inquirer from "inquirer";
+export async function askDirectoryMode() {
+    const { directoryMode } = await inquirer.prompt([
+        {
+            type: "list",
+            name: "directoryMode",
+            message: "Where would you like to create the project?",
+            choices: [
+                { name: "Create in a new folder", value: "new" },
+                { name: "Use current directory", value: "current" },
+            ],
+            default: "new",
+        },
+    ]);
+    return directoryMode;
+}

package/dist/prompts/framework.prompt.js

@@ -0,0 +1,15 @@
+import inquirer from "inquirer";
+export async function askFramework() {
+    const { framework } = await inquirer.prompt([
+        {
+            type: "list",
+            name: "framework",
+            message: "Choose your React setup:",
+            choices: [
+                { name: "React + TypeScript", value: "react-ts" },
+                { name: "React + JavaScript", value: "react-js" },
+            ],
+        },
+    ]);
+    return framework;
+}

package/dist/prompts/git.prompt.js

@@ -0,0 +1,23 @@
+import inquirer from "inquirer";
+export async function askGitConfig() {
+    const { init } = await inquirer.prompt([
+        {
+            type: "confirm",
+            name: "init",
+            message: "Initialize a Git repository?",
+            default: true,
+        },
+    ]);
+    if (!init) {
+        return { init: false, initialCommit: false };
+    }
+    const { initialCommit } = await inquirer.prompt([
+        {
+            type: "confirm",
+            name: "initialCommit",
+            message: "Create an initial commit?",
+            default: true,
+        },
+    ]);
+    return { init, initialCommit };
+}

package/dist/prompts/mui.prompt.js

@@ -0,0 +1,104 @@
+import chalk from "chalk";
+import inquirer from "inquirer";
+const colorChoices = [
+    {
+        name: chalk.bgHex("#1976d2").white("  blue   ") + "  Blue (MUI default)",
+        value: "blue",
+    },
+    {
+        name: chalk.bgHex("#9c27b0").white("  purple ") + "  Purple",
+        value: "purple",
+    },
+    {
+        name: chalk.bgHex("#2e7d32").white("  green  ") + "  Green",
+        value: "green",
+    },
+    {
+        name: chalk.bgHex("#e11d48").white("  custom ") + "  Custom HEX",
+        value: "custom",
+    },
+];
+export async function askMuiConfig() {
+    const { themeMode } = await inquirer.prompt([
+        {
+            type: "list",
+            name: "themeMode",
+            message: "Default theme mode:",
+            choices: [
+                { name: "Light", value: "light" },
+                { name: "Dark", value: "dark" },
+                { name: "System preference", value: "system" },
+            ],
+        },
+    ]);
+    const { darkModeToggle } = await inquirer.prompt([
+        {
+            type: "confirm",
+            name: "darkModeToggle",
+            message: "Add dark mode toggle component? (recommended — required for demo)",
+            default: true,
+        },
+    ]);
+    const { colorPreset } = await inquirer.prompt([
+        {
+            type: "list",
+            name: "colorPreset",
+            message: "Choose a primary color:",
+            choices: colorChoices,
+        },
+    ]);
+    let customColor;
+    if (colorPreset === "custom") {
+        const res = await inquirer.prompt([
+            {
+                type: "input",
+                name: "customColor",
+                message: "Enter HEX color:",
+                default: "#1976d2",
+            },
+        ]);
+        customColor = res.customColor;
+    }
+    const { icons } = await inquirer.prompt([
+        {
+            type: "confirm",
+            name: "icons",
+            message: "Add MUI Icons package? (@mui/icons-material)",
+            default: true,
+        },
+    ]);
+    const { font } = await inquirer.prompt([
+        {
+            type: "list",
+            name: "font",
+            message: "Choose a default font:",
+            choices: [
+                { name: "Inter   — clean, modern, readable", value: "inter" },
+                { name: "Poppins — rounded, great for dashboards", value: "poppins" },
+                { name: "Cairo   — elegant, great for bilingual apps", value: "cairo" },
+                { name: "Skip", value: "none" },
+            ],
+        },
+    ]);
+    let demo = false;
+    if (darkModeToggle) {
+        const { wantDemo } = await inquirer.prompt([
+            {
+                type: "confirm",
+                name: "wantDemo",
+                message: "Override App.jsx with a MUI demo template?",
+                default: true,
+            },
+        ]);
+        demo = wantDemo;
+    }
+    return {
+        themeMode,
+        darkModeToggle,
+        colorPreset,
+        customColor,
+        icons,
+        font,
+        demo,
+    };
+}

package/dist/prompts/prettier.prompt.js

@@ -0,0 +1,42 @@
+import inquirer from "inquirer";
+export async function askPrettierConfig() {
+    const { enabled } = await inquirer.prompt([
+        {
+            type: "confirm",
+            name: "enabled",
+            message: "Add Prettier?",
+            default: true,
+        },
+    ]);
+    if (!enabled) {
+        return { enabled: false, singleQuote: true, semi: true, tabWidth: 2 };
+    }
+    const { singleQuote } = await inquirer.prompt([
+        {
+            type: "confirm",
+            name: "singleQuote",
+            message: "Use single quotes?",
+            default: true,
+        },
+    ]);
+    const { semi } = await inquirer.prompt([
+        {
+            type: "confirm",
+            name: "semi",
+            message: "Use semicolons?",
+            default: true,
+        },
+    ]);
+    const { tabWidth } = await inquirer.prompt([
+        {
+            type: "list",
+            name: "tabWidth",
+            message: "Tab width:",
+            choices: [
+                { name: "2 spaces  (recommended)", value: 2 },
+                { name: "4 spaces", value: 4 },
+            ],
+        },
+    ]);
+    return { enabled, singleQuote, semi, tabWidth };
+}

package/dist/prompts/projectName.prompt.js

@@ -0,0 +1,13 @@
+import inquirer from "inquirer";
+export async function askProjectName() {
+    const { projectName } = await inquirer.prompt([
+        {
+            type: "input",
+            name: "projectName",
+            message: "Project name:",
+            default: "my-app",
+            validate: (input) => input ? true : "Project name cannot be empty",
+        },
+    ]);
+    return projectName;
+}

package/dist/prompts/styling.prompt.js

@@ -0,0 +1,17 @@
+import inquirer from "inquirer";
+export async function askStyling() {
+    const { styling } = await inquirer.prompt([
+        {
+            type: "list",
+            name: "styling",
+            message: "Choose your styling solution:",
+            choices: [
+                { name: "Tailwind CSS v4", value: "tailwind" },
+                { name: "MUI (Material UI)", value: "mui" },
+                { name: "None (plain CSS)", value: "css" },
+                { name: "Skip", value: "none" },
+            ],
+        },
+    ]);
+    return styling;
+}

package/dist/prompts/tailwind.prompt.js

@@ -0,0 +1,175 @@
+import inquirer from "inquirer";
+import chalk from "chalk";
+const colorChoices = [
+    {
+        name: chalk.bgHex("#6366f1").white("  indigo  ") + "  Indigo",
+        value: "indigo",
+    },
+    {
+        name: chalk.bgHex("#10b981").black("  emerald ") + "  Emerald",
+        value: "emerald",
+    },
+    {
+        name: chalk.bgHex("#737373").white("  neutral ") + "  Neutral",
+        value: "neutral",
+    },
+    {
+        name: chalk.bgHex("#e11d48").white("  custom  ") + "  Custom HEX",
+        value: "custom",
+    },
+    { name: "  Skip", value: "none" },
+];
+const fontChoices = [
+    { name: "Inter   — default for most apps", value: "inter" },
+    { name: "Poppins — great for dashboards & landing pages", value: "poppins" },
+    { name: "Cairo   — works great for bilingual apps", value: "cairo" },
+    { name: "Skip", value: "none" },
+];
+// Beginner mode asks only essential questions with simplified options
+async function askBeginner() {
+    const { wantDarkMode } = await inquirer.prompt([
+        {
+            type: "confirm",
+            name: "wantDarkMode",
+            message: "Enable Dark Mode?",
+            default: true,
+        },
+    ]);
+    let darkMode = false;
+    let darkModeToggle = false;
+    if (wantDarkMode) {
+        darkMode = "class";
+        darkModeToggle = true;
+    }
+    const { colorPreset } = await inquirer.prompt([
+        {
+            type: "list",
+            name: "colorPreset",
+            message: "Choose a primary color:",
+            choices: colorChoices,
+        },
+    ]);
+    let customColor;
+    if (colorPreset === "custom") {
+        const res = await inquirer.prompt([
+            {
+                type: "input",
+                name: "customColor",
+                message: "Enter HEX color:",
+                default: "#6366f1",
+            },
+        ]);
+        customColor = res.customColor;
+    }
+    return {
+        darkMode,
+        darkModeToggle,
+        colorPreset,
+        customColor,
+        font: "none",
+    };
+}
+// Advanced mode provides more granular control over Tailwind configuration
+async function askAdvanced() {
+    const { wantDarkMode } = await inquirer.prompt([
+        {
+            type: "confirm",
+            name: "wantDarkMode",
+            message: "Enable Dark Mode?",
+            default: true,
+        },
+    ]);
+    let darkMode = false;
+    let darkModeToggle = false;
+    if (wantDarkMode) {
+        const { strategy } = await inquirer.prompt([
+            {
+                type: "list",
+                name: "strategy",
+                message: "Dark Mode strategy:",
+                choices: [
+                    { name: "Manual toggle (class)  (recommended)", value: "class" },
+                    { name: "System preference (media)", value: "media" },
+                ],
+            },
+        ]);
+        darkMode = strategy;
+        if (strategy === "class") {
+            const { toggle } = await inquirer.prompt([
+                {
+                    type: "confirm",
+                    name: "toggle",
+                    message: "Add ThemeToggle component?",
+                    default: true,
+                },
+            ]);
+            darkModeToggle = toggle;
+        }
+    }
+    const { colorPreset } = await inquirer.prompt([
+        {
+            type: "list",
+            name: "colorPreset",
+            message: "Choose a primary color:",
+            choices: colorChoices,
+        },
+    ]);
+    let customColor;
+    if (colorPreset === "custom") {
+        const res = await inquirer.prompt([
+            {
+                type: "input",
+                name: "customColor",
+                message: "Enter HEX color:",
+                default: "#6366f1",
+            },
+        ]);
+        customColor = res.customColor;
+    }
+    const { font } = await inquirer.prompt([
+        {
+            type: "list",
+            name: "font",
+            message: "Choose default font:",
+            choices: fontChoices,
+        },
+    ]);
+    return {
+        darkMode,
+        darkModeToggle,
+        colorPreset,
+        customColor,
+        font,
+    };
+}
+export async function askTailwindConfig() {
+    const { mode } = await inquirer.prompt([
+        {
+            type: "list",
+            name: "mode",
+            message: "Tailwind configuration mode?",
+            choices: [
+                { name: "Beginner  (recommended)", value: "beginner" },
+                { name: "Advanced  (full control)", value: "advanced" },
+            ],
+        },
+    ]);
+    const answers = mode === "beginner" ? await askBeginner() : await askAdvanced();
+    const { prettierTailwind } = await inquirer.prompt([
+        {
+            type: "confirm",
+            name: "prettierTailwind",
+            message: "Add Prettier plugin for Tailwind class sorting? (recommended)",
+            default: true,
+        },
+    ]);
+    return {
+        mode,
+        darkMode: false,
+        darkModeToggle: false,
+        colorPreset: "none",
+        font: "none",
+        prettierTailwind,
+        ...answers,
+    };
+}

package/dist/templates/react/css/App.jsx

@@ -0,0 +1,41 @@
+import ThemeToggle from "./components/ThemeToggle";
+
+export default function App() {
+  return (
+    <div style={{
+      minHeight: "100vh",
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: "1.5rem",
+      fontFamily: "var(--font-base, system-ui)",
+      backgroundColor: "var(--bg, #ffffff)",
+      color: "var(--text, #171717)",
+    }}>
+      <h1>CSS is ready 🎉</h1>
+
+      <p style={{ color: "var(--color-muted, #555)" }}>
+        Your CSS variables and reset are set up and ready to use.
+      </p>
+
+      <ThemeToggle />
+
+      <button style={{
+        padding: "0.5rem 1.25rem",
+        backgroundColor: "var(--color-primary, #6366f1)",
+        color: "#fff",
+        border: "none",
+        borderRadius: "var(--radius, 0.5rem)",
+        cursor: "pointer",
+        fontSize: "1rem",
+      }}>
+        Everything is working
+      </button>
+
+      <small style={{ color: "var(--color-muted, #999)" }}>
+        You can delete this demo and start building your app.
+      </small>
+    </div>
+  );
+}