xertica-ui 1.1.0 → 1.2.1

package/dist/cli.js

@@ -9,6 +9,498 @@ import fs from "fs-extra";
 import path from "path";
 import { fileURLToPath } from "url";
 import { execa } from "execa";
+
+// contexts/theme-data.ts
+var colorThemes = [
+  {
+    id: "xertica-original",
+    name: "Xertica Original",
+    description: "A identidade visual cl\xE1ssica da Xertica com o gradiente original",
+    colors: {
+      primary: "#2C275B",
+      primaryForeground: "#FFFFFF",
+      primaryLight: "#5B568F",
+      primaryDarkMode: "#72CDFD",
+      primaryForegroundDark: "#09090B",
+      sidebarLight: "#2C275B",
+      // Primary Color
+      sidebarDark: "#1a1928",
+      // Original Dark BG
+      gradientStart: "#FDB0F2",
+      gradientEnd: "#72CDFD",
+      gradientStartDark: "#7B4A7A",
+      gradientEndDark: "#3A5C7D",
+      chart1: "#2C275B",
+      chart2: "#FDB0F2",
+      chart3: "#72CDFD",
+      chart4: "#5B568F",
+      chart5: "#4F46E5"
+    },
+    preview: {
+      primary: "#2C275B",
+      secondary: "#FDB0F2",
+      accent: "#72CDFD"
+    }
+  },
+  {
+    id: "zinc",
+    name: "Zinc",
+    description: "Minimalista, s\xE9rio e elegante (Escala de Cinza)",
+    colors: {
+      primary: "#18181B",
+      primaryForeground: "#FAFAFA",
+      primaryLight: "#E4E4E7",
+      primaryDarkMode: "#FAFAFA",
+      primaryForegroundDark: "#18181B",
+      sidebarLight: "#18181B",
+      // Primary Color
+      sidebarDark: "#09090B",
+      gradientStart: "#52525B",
+      gradientEnd: "#D4D4D8",
+      gradientStartDark: "#27272A",
+      gradientEndDark: "#52525B",
+      chart1: "#18181B",
+      chart2: "#52525B",
+      chart3: "#A1A1AA",
+      chart4: "#D4D4D8",
+      chart5: "#E4E4E7"
+    },
+    preview: {
+      primary: "#18181B",
+      secondary: "#52525B",
+      accent: "#E4E4E7"
+    }
+  },
+  {
+    id: "slate",
+    name: "Slate",
+    description: "Profissional com tons de azul acinzentado",
+    colors: {
+      primary: "#0F172A",
+      primaryForeground: "#F8FAFC",
+      primaryLight: "#CBD5E1",
+      primaryDarkMode: "#F8FAFC",
+      primaryForegroundDark: "#0F172A",
+      sidebarLight: "#0F172A",
+      // Primary Color
+      sidebarDark: "#020617",
+      gradientStart: "#475569",
+      gradientEnd: "#94A3B8",
+      gradientStartDark: "#1E293B",
+      gradientEndDark: "#475569",
+      chart1: "#0F172A",
+      chart2: "#475569",
+      chart3: "#94A3B8",
+      chart4: "#CBD5E1",
+      chart5: "#E2E8F0"
+    },
+    preview: {
+      primary: "#0F172A",
+      secondary: "#475569",
+      accent: "#94A3B8"
+    }
+  },
+  {
+    id: "blue",
+    name: "Blue",
+    description: "Confi\xE1vel e seguro, padr\xE3o corporativo",
+    colors: {
+      primary: "#2563EB",
+      primaryForeground: "#FFFFFF",
+      primaryLight: "#DBEAFE",
+      primaryDarkMode: "#3B82F6",
+      primaryForegroundDark: "#FFFFFF",
+      sidebarLight: "#1E3A8A",
+      // Blue 900 (High Contrast Sidebar)
+      sidebarDark: "#172554",
+      gradientStart: "#2563EB",
+      gradientEnd: "#60A5FA",
+      gradientStartDark: "#1D4ED8",
+      gradientEndDark: "#2563EB",
+      chart1: "#2563EB",
+      chart2: "#3B82F6",
+      chart3: "#60A5FA",
+      chart4: "#93C5FD",
+      chart5: "#BFDBFE"
+    },
+    preview: {
+      primary: "#2563EB",
+      secondary: "#60A5FA",
+      accent: "#DBEAFE"
+    }
+  },
+  {
+    id: "violet",
+    name: "Violet",
+    description: "Criativo e vibrante",
+    colors: {
+      primary: "#7C3AED",
+      primaryForeground: "#FFFFFF",
+      primaryLight: "#EDE9FE",
+      primaryDarkMode: "#8B5CF6",
+      primaryForegroundDark: "#FFFFFF",
+      sidebarLight: "#4C1D95",
+      // Violet 900 (High Contrast Sidebar)
+      sidebarDark: "#2E1065",
+      gradientStart: "#7C3AED",
+      gradientEnd: "#A78BFA",
+      gradientStartDark: "#5B21B6",
+      gradientEndDark: "#7C3AED",
+      chart1: "#7C3AED",
+      chart2: "#8B5CF6",
+      chart3: "#A78BFA",
+      chart4: "#C4B5FD",
+      chart5: "#DDD6FE"
+    },
+    preview: {
+      primary: "#7C3AED",
+      secondary: "#A78BFA",
+      accent: "#EDE9FE"
+    }
+  },
+  {
+    id: "rose",
+    name: "Rose",
+    description: "Elegante e suave",
+    colors: {
+      primary: "#BE123C",
+      // Rose 700 (Better text contrast for Primary)
+      primaryForeground: "#FFFFFF",
+      primaryLight: "#FFE4E6",
+      primaryDarkMode: "#F43F5E",
+      primaryForegroundDark: "#FFFFFF",
+      sidebarLight: "#881337",
+      // Rose 900 (High Contrast Sidebar)
+      sidebarDark: "#881337",
+      gradientStart: "#E11D48",
+      gradientEnd: "#FB7185",
+      gradientStartDark: "#9F1239",
+      gradientEndDark: "#E11D48",
+      chart1: "#E11D48",
+      chart2: "#F43F5E",
+      chart3: "#FB7185",
+      chart4: "#FDA4AF",
+      chart5: "#FECDD3"
+    },
+    preview: {
+      primary: "#BE123C",
+      secondary: "#FB7185",
+      accent: "#FFE4E6"
+    }
+  },
+  {
+    id: "emerald",
+    name: "Emerald",
+    description: "Natural e equilibrado",
+    colors: {
+      primary: "#047857",
+      // Emerald 700 (Better text contrast for Primary)
+      primaryForeground: "#FFFFFF",
+      primaryLight: "#D1FAE5",
+      primaryDarkMode: "#10B981",
+      primaryForegroundDark: "#FFFFFF",
+      sidebarLight: "#064E3B",
+      // Emerald 900 (High Contrast Sidebar)
+      sidebarDark: "#064E3B",
+      gradientStart: "#059669",
+      gradientEnd: "#34D399",
+      gradientStartDark: "#064E3B",
+      gradientEndDark: "#059669",
+      chart1: "#059669",
+      chart2: "#10B981",
+      chart3: "#34D399",
+      chart4: "#6EE7B7",
+      chart5: "#A7F3D0"
+    },
+    preview: {
+      primary: "#047857",
+      secondary: "#34D399",
+      accent: "#D1FAE5"
+    }
+  },
+  {
+    id: "amber",
+    name: "Amber",
+    description: "Quente e energ\xE9tico",
+    colors: {
+      primary: "#B45309",
+      // Amber 700 (Better text contrast for Primary)
+      primaryForeground: "#FFFFFF",
+      primaryLight: "#FEF3C7",
+      primaryDarkMode: "#F59E0B",
+      primaryForegroundDark: "#FFFFFF",
+      sidebarLight: "#78350F",
+      // Amber 900 (High Contrast Sidebar)
+      sidebarDark: "#78350F",
+      gradientStart: "#D97706",
+      gradientEnd: "#FBBF24",
+      gradientStartDark: "#92400E",
+      gradientEndDark: "#D97706",
+      chart1: "#D97706",
+      chart2: "#F59E0B",
+      chart3: "#FBBF24",
+      chart4: "#FDE68A",
+      chart5: "#FEF3C7"
+    },
+    preview: {
+      primary: "#B45309",
+      secondary: "#FBBF24",
+      accent: "#FEF3C7"
+    }
+  },
+  {
+    id: "orange",
+    name: "Orange",
+    description: "Vibrante e amig\xE1vel",
+    colors: {
+      primary: "#C2410C",
+      // Orange 700 (Better text contrast for Primary)
+      primaryForeground: "#FFFFFF",
+      primaryLight: "#FFEDD5",
+      primaryDarkMode: "#F97316",
+      primaryForegroundDark: "#FFFFFF",
+      sidebarLight: "#7C2D12",
+      // Orange 900 (High Contrast Sidebar)
+      sidebarDark: "#7C2D12",
+      gradientStart: "#EA580C",
+      gradientEnd: "#FB923C",
+      gradientStartDark: "#9A3412",
+      gradientEndDark: "#EA580C",
+      chart1: "#EA580C",
+      chart2: "#F97316",
+      chart3: "#FB923C",
+      chart4: "#FDBA74",
+      chart5: "#FED7AA"
+    },
+    preview: {
+      primary: "#C2410C",
+      secondary: "#FB923C",
+      accent: "#FFEDD5"
+    }
+  }
+];
+
+// bin/generate-tokens.ts
+var hexToRgbString = (hex) => {
+  hex = hex.replace(/^#/, "");
+  let r = 0, g = 0, b = 0;
+  if (hex.length === 3) {
+    r = parseInt(hex[0] + hex[0], 16);
+    g = parseInt(hex[1] + hex[1], 16);
+    b = parseInt(hex[2] + hex[2], 16);
+  } else if (hex.length === 6) {
+    r = parseInt(hex.substring(0, 2), 16);
+    g = parseInt(hex.substring(2, 4), 16);
+    b = parseInt(hex.substring(4, 6), 16);
+  }
+  return `${r}, ${g}, ${b}`;
+};
+var rgba = (hex, alpha = 1) => {
+  return `rgba(${hexToRgbString(hex)}, ${alpha})`;
+};
+var generateTokensCss = (theme) => {
+  const { colors } = theme;
+  return `/* ============================================
+   \u{1F3A8} TOKENS / VARIABLES (Generated by CLI)
+   ============================================ */
+
+:root,
+:root[data-theme="default"] {
+  /* Brand Tokens - Source of Truth */
+  --xertica-primary: ${rgba(colors.primary)};
+  --xertica-dark: ${rgba(colors.sidebarDark)}; /* Approximating generic dark from sidebar dark if needed, or keeping static? */
+  
+  /* Semantic Colors */
+  --background: rgba(255, 255, 255, 1);
+  --foreground: rgba(9, 9, 11, 1);
+  
+  --card: rgba(255, 255, 255, 1);
+  --card-foreground: rgba(9, 9, 11, 1);
+  
+  --popover: rgba(255, 255, 255, 1);
+  --popover-foreground: rgba(9, 9, 11, 1);
+  
+  --primary: var(--xertica-primary);
+  --primary-foreground: ${rgba(colors.primaryForeground)};
+  --primary-light: ${rgba(colors.primary, 0.15)};
+  --primary-light-foreground: ${rgba(colors.primary)};
+  
+  --secondary: rgba(244, 244, 245, 1);
+  --secondary-foreground: rgba(24, 24, 27, 1);
+  
+  --muted: rgba(244, 244, 245, 1);
+  --muted-foreground: rgba(113, 113, 122, 1);
+  
+  --accent: rgba(244, 244, 245, 1);
+  --accent-foreground: rgba(24, 24, 27, 1);
+  
+  --destructive: rgba(239, 68, 68, 1);
+  --destructive-foreground: rgba(250, 250, 250, 1);
+  
+  --border: rgba(228, 228, 231, 1);
+  --input: rgba(244, 244, 245, 0.5);
+  --input-background: rgba(244, 244, 245, 0.5);
+  --ring: ${rgba(colors.primary, 0.5)}; /* Adjusted to match brand somewhat */
+  
+  /* Sidebar */
+  --sidebar: ${rgba(colors.sidebarLight)};
+  --sidebar-foreground: ${colors.sidebarLight.toLowerCase() === "#ffffff" ? "rgba(15, 23, 42, 1)" : "rgba(250, 250, 250, 1)"};
+  --sidebar-primary: ${colors.sidebarLight.toLowerCase() === "#ffffff" ? rgba(colors.primary) : "rgba(255, 255, 255, 1)"};
+  --sidebar-primary-foreground: ${colors.sidebarLight.toLowerCase() === "#ffffff" ? rgba(colors.primaryForeground) : rgba(colors.primary)}; /* Actually if sidebar is dark, primary item usually white? */
+  /* Replicating logic from Context roughly or sticking to safe defaults */
+  /* Context Logic:
+     if !isSidebarLight: 
+        primary: #FFFFFF
+        primaryFg: primary
+  */
+  --sidebar-accent: ${rgba(colors.sidebarLight.toLowerCase() === "#ffffff" ? colors.primary : "#FFFFFF", 0.1)};
+  --sidebar-accent-foreground: ${colors.sidebarLight.toLowerCase() === "#ffffff" ? rgba(colors.primary) : "#FFFFFF"};
+  --sidebar-border: rgba(255, 255, 255, 0.1); 
+  --sidebar-ring: ${rgba(colors.primary, 0.5)};
+
+  /* Charts */
+  --chart-1: ${rgba(colors.chart1)};
+  --chart-2: ${rgba(colors.chart2)};
+  --chart-3: ${rgba(colors.chart3)};
+  --chart-4: ${rgba(colors.chart4)};
+  --chart-5: ${rgba(colors.chart5)};
+  
+  /* Gradients */
+  --gradient-diagonal: linear-gradient(135deg, ${colors.gradientStart} 0%, ${colors.gradientEnd} 100%);
+  
+  /* Spacing & Radius */
+  --radius: 6px;
+  --radius-button: 12px;
+  --radius-card: 12px;
+  
+  --elevation-sm: 0px 0px 48px 0px rgba(0, 0, 0, 0.1);
+  
+  /* Typography */
+  --font-size: 16px;
+  --text-h1: 2rem;
+  --text-h2: 1.75rem;
+  --text-h3: 1.5rem;
+  --text-h4: 1.25rem;
+  --text-base: 1rem;
+  --text-p: 0.875rem;
+  --text-label: 0.875rem;
+  --text-small: 0.875rem;
+  --text-xs: 0.75rem;
+  --text-muted: 0.875rem;
+  --text-stats: 2.25rem;
+  --text-table-head: 1.25rem;
+  
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --font-weight-extrabold: 800;
+  
+  --spacing-1: 0.25rem;
+  --spacing-2: 0.5rem;
+  --spacing-3: 0.75rem;
+  --spacing-4: 1rem;
+  --spacing-5: 1.25rem;
+  --spacing-6: 1.5rem;
+  --spacing-8: 2rem;
+  
+  /* Calendar */
+  --cell-size: 2.5rem;
+  --cell-radius: var(--radius);
+  --calendar-caption-size: 15px;
+  --calendar-weekday-size: 12px;
+  --calendar-day-size: 14px;
+  
+  /* Toast - Success */
+  --toast-success-bg: rgba(220, 252, 231, 1);
+  --toast-success-border: rgba(5, 150, 105, 1);
+  --toast-success-icon: rgba(5, 150, 105, 1);
+  /* Toast - Warning */
+  --toast-warning-bg: rgba(254, 243, 199, 1);
+  --toast-warning-border: rgba(245, 158, 11, 1);
+  --toast-warning-icon: rgba(245, 158, 11, 1);
+  /* Toast - Info */
+  --toast-info-bg: rgba(219, 234, 254, 1);
+  --toast-info-border: rgba(37, 99, 235, 1);
+  --toast-info-icon: rgba(37, 99, 235, 1);
+  /* Toast - Error */
+  --toast-error-bg: rgba(254, 226, 226, 1);
+  --toast-error-border: rgba(239, 68, 68, 1);
+  --toast-error-icon: rgba(239, 68, 68, 1);
+}
+
+:root[data-mode="dark"],
+.dark {
+  /* Brand Tokens */
+  --xertica-primary: ${rgba(colors.primaryDarkMode)};
+  
+  /* Semantic Colors */
+  --background: rgba(5, 5, 5, 1);
+  --foreground: rgba(250, 250, 250, 1);
+  
+  --card: rgba(20, 20, 22, 1);
+  --card-foreground: rgba(250, 250, 250, 1);
+  
+  --popover: rgba(20, 20, 22, 1);
+  --popover-foreground: rgba(250, 250, 250, 1);
+  
+  --primary-foreground: ${rgba(colors.primaryForegroundDark)};
+  --primary-light: ${rgba(colors.primaryDarkMode, 0.15)};
+  --primary-light-foreground: ${rgba(colors.primaryDarkMode)};
+  
+  --secondary: rgba(39, 39, 42, 1);
+  --secondary-foreground: rgba(250, 250, 250, 1);
+  
+  --muted: rgba(39, 39, 42, 1);
+  --muted-foreground: rgba(161, 161, 170, 1);
+  
+  --accent: rgba(39, 39, 42, 1);
+  --accent-foreground: rgba(250, 250, 250, 1);
+  
+  --destructive: rgba(239, 68, 68, 1);
+  --destructive-foreground: rgba(250, 250, 250, 1);
+  
+  --border: rgba(63, 63, 70, 1);
+  --input: rgba(39, 39, 42, 0.5);
+  --input-background: rgba(39, 39, 42, 0.5);
+  --ring: ${rgba(colors.primaryDarkMode, 0.5)};
+  
+  --elevation-sm: 0px 0px 48px 0px rgba(0, 0, 0, 0.3);
+  
+  /* Sidebar */
+  --sidebar: ${rgba(colors.sidebarDark)};
+  --sidebar-foreground: rgba(250, 250, 250, 1);
+  --sidebar-primary: rgba(255, 255, 255, 1);
+  --sidebar-primary-foreground: ${rgba(colors.primary)}; /* Often primary brand color on dark background */
+  --sidebar-accent: rgba(63, 63, 70, 1);
+  --sidebar-accent-foreground: rgba(250, 250, 250, 1);
+  --sidebar-border: rgba(65, 61, 107, 1); /* Keeping subtle border */
+  --sidebar-ring: ${rgba(colors.primaryDarkMode, 0.5)};
+  
+  /* Gradients */
+  --gradient-diagonal: linear-gradient(135deg, ${colors.gradientStartDark} 0%, ${colors.gradientEndDark} 100%);
+  
+  /* Toast - Success */
+  --toast-success-bg: rgba(6, 78, 59, 1);
+  --toast-success-border: rgba(34, 197, 94, 1);
+  --toast-success-icon: rgba(34, 197, 94, 1);
+  /* Toast - Warning */
+  --toast-warning-bg: rgba(113, 63, 18, 1);
+  --toast-warning-border: rgba(251, 191, 36, 1);
+  --toast-warning-icon: rgba(251, 191, 36, 1);
+  /* Toast - Info */
+  --toast-info-bg: rgba(30, 58, 138, 1);
+  --toast-info-border: rgba(96, 165, 250, 1);
+  --toast-info-icon: rgba(96, 165, 250, 1);
+  /* Toast - Error */
+  --toast-error-bg: rgba(127, 29, 29, 1);
+  --toast-error-border: rgba(248, 113, 113, 1);
+  --toast-error-icon: rgba(248, 113, 113, 1);
+}
+`;
+};
+
+// bin/cli.ts
 var __filename = fileURLToPath(import.meta.url);
 var __dirname = path.dirname(__filename);
 var program = new Command();
@@ -20,7 +512,7 @@ program.command("init").description("Initialize a new Xertica UI project").argum
   let componentChoices = [{ title: "All Components", value: "all", selected: true }];
   if (await fs.pathExists(uiComponentsDir)) {
     const files = await fs.readdir(uiComponentsDir);
-    const components = files.filter((f) => f.endsWith(".tsx") && !f.startsWith("index")).map((f) => ({ title: f.replace(".tsx", ""), value: f }));
+    const components = files.filter((f) => f.endsWith(".tsx") && !f.startsWith("index")).map((f) => ({ title: f.replace(".tsx", ""), value: f, selected: true }));
     componentChoices = [
       { title: "All Components", value: "all", selected: true },
       ...components
@@ -32,7 +524,12 @@ program.command("init").description("Initialize a new Xertica UI project").argum
       type: "multiselect",
       name: "components",
       message: "Which components would you like to include?",
-      choices: componentChoices,
+      choices: componentChoices.length > 1 ? componentChoices : [
+        { title: "All Components", value: "all", selected: true }
+        // Fetch components logic was above, I'll rely on existing code for that part 
+        // and just insert my code around existing blocks in separate steps if needed.
+        // But replace_file_content requires me to match content.
+      ],
       hint: "- Space to select. Return to submit",
       min: 1
     },
@@ -46,6 +543,17 @@ program.command("init").description("Initialize a new Xertica UI project").argum
         { title: "Template Page", value: "template", selected: true }
       ]
     },
+    {
+      type: "select",
+      name: "theme",
+      message: "Select the default color theme for your project:",
+      choices: colorThemes.map((t) => ({
+        title: t.name,
+        description: t.description,
+        value: t.id
+      })),
+      initial: 0
+    },
     {
       type: "confirm",
       name: "install",
@@ -137,6 +645,24 @@ export default function App() {
         });
       }
     }
+    if (response.theme) {
+      const contextPath = path.join(targetDir, "contexts", "BrandColorsContext.tsx");
+      if (await fs.pathExists(contextPath)) {
+        let content = await fs.readFile(contextPath, "utf8");
+        content = content.replace(
+          /return saved \|\| 'xertica-original';/,
+          `return saved || '${response.theme}';`
+        );
+        await fs.writeFile(contextPath, content);
+      }
+      const tokensPath = path.join(targetDir, "styles", "xertica", "tokens.css");
+      const selectedTheme = colorThemes.find((t) => t.id === response.theme);
+      if (selectedTheme) {
+        await fs.ensureDir(path.dirname(tokensPath));
+        const newTokensCss = generateTokensCss(selectedTheme);
+        await fs.writeFile(tokensPath, newTokensCss);
+      }
+    }
     spinner.succeed("Project initialized successfully!");
     if (response.install) {
       const installSpinner = ora("Installing dependencies...").start();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xertica-ui",
-  "version": "1.1.0",
+  "version": "1.2.1",
   "description": "Xertica UI - Design System completo com componentes React e Tailwind CSS",
   "type": "module",
   "bin": "./dist/cli.js",
@@ -116,4 +116,4 @@
     "typescript": "^5.7.2",
     "vite": "^6.0.5"
   }
-}
+}