myoperator-ui 0.0.152 → 0.0.154-beta.0

package/dist/index.js

@@ -5,9 +5,9 @@ import { Command } from "commander";
 import { createRequire } from "module";
 
 // src/commands/add.ts
-import chalk2 from "chalk";
-import fs3 from "fs-extra";
-import path3 from "path";
+import chalk from "chalk";
+import fs2 from "fs-extra";
+import path2 from "path";
 import prompts from "prompts";
 import ora from "ora";
 
@@ -5679,7 +5679,7 @@ export { PageHeader, pageHeaderVariants };
         {
           name: "event-selector.tsx",
           content: prefixTailwindClasses(`import * as React from "react";
-import { cn } from "../../../lib/utils";
+import { cn } from "../../lib/utils";
 import { EventGroupComponent } from "./event-group";
 import type { EventSelectorProps, EventCategory, EventGroup } from "./types";
 
@@ -5872,14 +5872,14 @@ EventSelector.displayName = "EventSelector";
         {
           name: "event-group.tsx",
           content: prefixTailwindClasses(`import * as React from "react";
-import { cn } from "../../../lib/utils";
-import { Checkbox, type CheckedState } from "../../ui/checkbox";
+import { cn } from "../../lib/utils";
+import { Checkbox, type CheckedState } from "../checkbox";
 import {
   Accordion,
   AccordionItem,
   AccordionTrigger,
   AccordionContent,
-} from "../../ui/accordion";
+} from "../accordion";
 import { EventItemComponent } from "./event-item";
 import type { EventGroupComponentProps } from "./types";
 
@@ -6058,8 +6058,8 @@ EventGroupComponent.displayName = "EventGroupComponent";
         {
           name: "event-item.tsx",
           content: prefixTailwindClasses(`import * as React from "react";
-import { cn } from "../../../lib/utils";
-import { Checkbox } from "../../ui/checkbox";
+import { cn } from "../../lib/utils";
+import { Checkbox } from "../checkbox";
 import type { EventItemComponentProps } from "./types";
 
 /**
@@ -6236,8 +6236,8 @@ export interface EventItemComponentProps {
           name: "key-value-input.tsx",
           content: prefixTailwindClasses(`import * as React from "react";
 import { Plus } from "lucide-react";
-import { cn } from "../../../lib/utils";
-import { Button } from "../../ui/button";
+import { cn } from "../../lib/utils";
+import { Button } from "../button";
 import { KeyValueRow } from "./key-value-row";
 import type { KeyValueInputProps, KeyValuePair } from "./types";
 
@@ -6479,9 +6479,9 @@ KeyValueInput.displayName = "KeyValueInput";
           name: "key-value-row.tsx",
           content: prefixTailwindClasses(`import * as React from "react";
 import { Trash2 } from "lucide-react";
-import { cn } from "../../../lib/utils";
-import { Input } from "../../ui/input";
-import { Button } from "../../ui/button";
+import { cn } from "../../lib/utils";
+import { Input } from "../input";
+import { Button } from "../button";
 import type { KeyValueRowProps } from "./types";
 
 /**
@@ -6668,8 +6668,8 @@ export interface KeyValueRowProps {
         {
           name: "api-feature-card.tsx",
           content: prefixTailwindClasses(`import * as React from "react";
-import { Button } from "../../ui/button";
-import { cn } from "../../../lib/utils";
+import { Button } from "../button";
+import { cn } from "../../lib/utils";
 
 export interface Capability {
   /** Unique identifier for the capability */
@@ -6789,7 +6789,7 @@ export const ApiFeatureCard = React.forwardRef<
                   key={capability.id}
                   className="flex items-center gap-1.5"
                 >
-                  <span className="h-1.5 w-1.5 shrink-0 rounded-full bg-[var(--semantic-info-primary,#4275D6)]" />
+                  <span className="h-1.5 w-1.5 shrink-0 rounded-full bg-[var(--color-neutral-400,#A4A7AE)]" />
                   <span className="text-sm text-[var(--semantic-text-primary,#181D27)] tracking-[0.035px]">
                     {capability.label}
                   </span>
@@ -6834,8 +6834,8 @@ export type { ApiFeatureCardProps, Capability } from "./api-feature-card";
           name: "endpoint-details.tsx",
           content: prefixTailwindClasses(`import * as React from "react";
 import { XCircle } from "lucide-react";
-import { cn } from "../../../lib/utils";
-import { ReadableField } from "../../ui/readable-field";
+import { cn } from "../../lib/utils";
+import { ReadableField } from "../readable-field";
 
 export interface EndpointDetailsProps
   extends React.HTMLAttributes<HTMLDivElement> {
@@ -7066,9 +7066,9 @@ export type { EndpointDetailsProps } from "./endpoint-details";
         {
           name: "alert-configuration.tsx",
           content: prefixTailwindClasses(`import * as React from "react";
-import { Button } from "../../ui/button";
+import { Button } from "../button";
 import { Pencil } from "lucide-react";
-import { cn } from "../../../lib/utils";
+import { cn } from "../../lib/utils";
 
 export interface AlertConfigurationProps {
   /** Minimum balance threshold */
@@ -7193,8 +7193,8 @@ AlertConfiguration.displayName = "AlertConfiguration";
         {
           name: "alert-values-modal.tsx",
           content: prefixTailwindClasses(`import * as React from "react";
-import { FormModal } from "../../ui/form-modal";
-import { Input } from "../../ui/input";
+import { FormModal } from "../form-modal";
+import { Input } from "../input";
 
 export interface AlertValuesModalProps {
   /** Whether the modal is open */
@@ -7359,14 +7359,14 @@ export type { AlertValuesModalProps } from "./alert-values-modal";
         {
           name: "auto-pay-setup.tsx",
           content: prefixTailwindClasses(`import * as React from "react";
-import { cn } from "../../../lib/utils";
-import { Button } from "../../ui/button";
+import { cn } from "../../lib/utils";
+import { Button } from "../button";
 import {
   Accordion,
   AccordionItem,
   AccordionTrigger,
   AccordionContent,
-} from "../../ui/accordion";
+} from "../accordion";
 import type { AutoPaySetupProps } from "./types";
 
 /**
@@ -7549,13 +7549,13 @@ export type { AutoPaySetupProps } from "./types";
           name: "bank-details.tsx",
           content: prefixTailwindClasses(`import * as React from "react";
 import { Copy, Check } from "lucide-react";
-import { cn } from "../../../lib/utils";
+import { cn } from "../../lib/utils";
 import {
   Accordion,
   AccordionItem,
   AccordionTrigger,
   AccordionContent,
-} from "../../ui/accordion";
+} from "../accordion";
 import type { BankDetailsProps, BankDetailItem } from "./types";
 
 /**
@@ -7767,14 +7767,14 @@ export type { BankDetailsProps, BankDetailItem } from "./types";
           name: "payment-summary.tsx",
           content: prefixTailwindClasses(`import * as React from "react";
 import { Info } from "lucide-react";
-import { cn } from "../../../lib/utils";
+import { cn } from "../../lib/utils";
 import {
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
   TooltipArrow,
-} from "../../ui/tooltip";
+} from "../tooltip";
 
 /**
  * Represents a single row in the payment summary.
@@ -7951,15 +7951,15 @@ export type {
           name: "wallet-topup.tsx",
           content: prefixTailwindClasses(`import * as React from "react";
 import { Check, Ticket } from "lucide-react";
-import { cn } from "../../../lib/utils";
-import { Button } from "../../ui/button";
-import { Input } from "../../ui/input";
+import { cn } from "../../lib/utils";
+import { Button } from "../button";
+import { Input } from "../input";
 import {
   Accordion,
   AccordionItem,
   AccordionTrigger,
   AccordionContent,
-} from "../../ui/accordion";
+} from "../accordion";
 import type { AmountOption, WalletTopupProps } from "./types";
 
 /**
@@ -8442,64 +8442,17 @@ async function detectTailwindPrefix(configFile, cwd = process.cwd()) {
   return "";
 }
 
-// src/utils/tailwind-fix.ts
-import fs2 from "fs-extra";
-import path2 from "path";
-import chalk from "chalk";
-var CUSTOM_COMPONENTS_PATH = "./src/components/custom/**/*.{js,ts,jsx,tsx}";
-async function ensureCustomComponentsInTailwindConfig(cwd) {
-  const tailwindConfigOptions = [
-    "tailwind.config.js",
-    "tailwind.config.ts",
-    "tailwind.config.mjs",
-    "tailwind.config.cjs"
-  ];
-  let tailwindConfigPath = null;
-  for (const configFile of tailwindConfigOptions) {
-    const fullPath = path2.join(cwd, configFile);
-    if (await fs2.pathExists(fullPath)) {
-      tailwindConfigPath = fullPath;
-      break;
-    }
-  }
-  if (!tailwindConfigPath) {
-    return false;
-  }
-  const tailwindConfig = await fs2.readFile(tailwindConfigPath, "utf-8");
-  if (tailwindConfig.includes("./src/components/custom/")) {
-    return false;
-  }
-  const contentMatch = tailwindConfig.match(/content\s*:\s*\[([^\]]*)\]/s);
-  if (!contentMatch) {
-    return false;
-  }
-  const existingContent = contentMatch[1];
-  const existingPaths = existingContent.split(",").map((p) => p.trim()).filter((p) => p.length > 0);
-  const newPaths = [...existingPaths.map((p) => p.replace(/["']/g, "")), CUSTOM_COMPONENTS_PATH];
-  const newContentArray = newPaths.map((p) => `    "${p}"`).join(",\n");
-  const updatedConfig = tailwindConfig.replace(
-    /content\s*:\s*\[([^\]]*)\]/s,
-    `content: [
-${newContentArray},
-  ]`
-  );
-  await fs2.writeFile(tailwindConfigPath, updatedConfig);
-  console.log(chalk.green(`
-  \u2713 Updated ${path2.basename(tailwindConfigPath)} with custom components path`));
-  return true;
-}
-
 // src/commands/add.ts
 async function add(components, options) {
   const cwd = process.cwd();
   if (!await configExists(cwd)) {
-    console.log(chalk2.red("\n  Error: Project not initialized."));
-    console.log(chalk2.yellow("  Run `npx myoperator-ui init` first.\n"));
+    console.log(chalk.red("\n  Error: Project not initialized."));
+    console.log(chalk.yellow("  Run `npx myoperator-ui init` first.\n"));
     process.exit(1);
   }
   const prefix = await getTailwindPrefix(cwd);
   if (prefix) {
-    console.log(chalk2.blue(`
+    console.log(chalk.blue(`
   \u2139 Applying Tailwind prefix: "${prefix}"
 `));
   }
@@ -8507,27 +8460,27 @@ async function add(components, options) {
   const availableComponents = Object.keys(registry);
   if (options.all) {
     components = availableComponents;
-    console.log(chalk2.blue(`  Adding all ${components.length} components...
+    console.log(chalk.blue(`  Adding all ${components.length} components...
 `));
   }
   if (options.category) {
     const validCategories = ["core", "form", "data", "overlay", "feedback", "layout", "custom"];
     const categoryLower = options.category.toLowerCase();
     if (!validCategories.includes(categoryLower)) {
-      console.log(chalk2.red(`
+      console.log(chalk.red(`
   Error: Unknown category: ${options.category}`));
-      console.log(chalk2.yellow(`  Available categories: ${validCategories.join(", ")}
+      console.log(chalk.yellow(`  Available categories: ${validCategories.join(", ")}
 `));
       process.exit(1);
     }
     components = availableComponents.filter((name) => registry[name].category === categoryLower);
     if (components.length === 0) {
-      console.log(chalk2.yellow(`
+      console.log(chalk.yellow(`
   No components found in category: ${categoryLower}
 `));
       process.exit(0);
     }
-    console.log(chalk2.blue(`  Adding all ${components.length} ${categoryLower} components...
+    console.log(chalk.blue(`  Adding all ${components.length} ${categoryLower} components...
 `));
   }
   if (!components || components.length === 0) {
@@ -8543,7 +8496,7 @@ async function add(components, options) {
       min: 1
     });
     if (!selectedComponents || selectedComponents.length === 0) {
-      console.log(chalk2.yellow("\n  No components selected.\n"));
+      console.log(chalk.yellow("\n  No components selected.\n"));
       process.exit(0);
     }
     components = selectedComponents;
@@ -8563,13 +8516,13 @@ async function add(components, options) {
   });
   const invalidComponents = components.filter((c) => !availableComponents.includes(c));
   if (invalidComponents.length > 0) {
-    console.log(chalk2.red(`
+    console.log(chalk.red(`
   Error: Unknown components: ${invalidComponents.join(", ")}`));
-    console.log(chalk2.yellow(`  Available: ${availableComponents.join(", ")}
+    console.log(chalk.yellow(`  Available: ${availableComponents.join(", ")}
 `));
     process.exit(1);
   }
-  const componentsDir = path3.join(cwd, options.path);
+  const componentsDir = path2.join(cwd, options.path);
   if (!options.yes) {
     const { confirm } = await prompts({
       type: "confirm",
@@ -8578,7 +8531,7 @@ async function add(components, options) {
       initial: true
     });
     if (!confirm) {
-      console.log(chalk2.yellow("\n  Installation cancelled.\n"));
+      console.log(chalk.yellow("\n  Installation cancelled.\n"));
       process.exit(0);
     }
   }
@@ -8604,22 +8557,19 @@ async function add(components, options) {
         }
       }
       spinner.text = `Installing ${componentName}...`;
-      const isCustomComponent = component.category === "custom";
-      const baseDir = isCustomComponent ? path3.join(cwd, "src/components/custom") : componentsDir;
-      const targetDir = component.isMultiFile ? path3.join(baseDir, component.directory) : baseDir;
+      const targetDir = component.isMultiFile ? path2.join(componentsDir, component.directory) : componentsDir;
       for (const file of component.files) {
-        const filePath = path3.join(targetDir, file.name);
-        if (await fs3.pathExists(filePath)) {
+        const filePath = path2.join(targetDir, file.name);
+        if (await fs2.pathExists(filePath)) {
           if (!options.overwrite) {
             spinner.warn(`${file.name} already exists. Use --overwrite to replace.`);
             continue;
           }
         }
-        await fs3.ensureDir(path3.dirname(filePath));
-        await fs3.writeFile(filePath, file.content);
-        const basePath = isCustomComponent ? "src/components/custom" : options.path;
+        await fs2.ensureDir(path2.dirname(filePath));
+        await fs2.writeFile(filePath, file.content);
         const relativePath = component.isMultiFile ? `${component.directory}/${file.name}` : file.name;
-        installed.push({ path: relativePath, basePath });
+        installed.push({ path: relativePath, basePath: options.path });
       }
       if (component.dependencies) {
         component.dependencies.forEach((dep) => dependencies.add(dep));
@@ -8631,18 +8581,14 @@ async function add(components, options) {
     }
     spinner.succeed("Components installed successfully!");
     if (installed.length > 0) {
-      console.log(chalk2.green("\n  Installed files:"));
+      console.log(chalk.green("\n  Installed files:"));
       installed.forEach((file) => {
-        console.log(chalk2.green(`    \u2713 ${file.basePath}/${file.path}`));
+        console.log(chalk.green(`    \u2713 ${file.basePath}/${file.path}`));
       });
     }
     if (dependencies.size > 0) {
-      console.log(chalk2.yellow("\n  Required dependencies:"));
-      console.log(chalk2.cyan(`    npm install ${Array.from(dependencies).join(" ")}`));
-    }
-    const hasCustomComponents = installed.some((file) => file.basePath.includes("custom"));
-    if (hasCustomComponents) {
-      await ensureCustomComponentsInTailwindConfig(cwd);
+      console.log(chalk.yellow("\n  Required dependencies:"));
+      console.log(chalk.cyan(`    npm install ${Array.from(dependencies).join(" ")}`));
     }
     console.log("");
   } catch (error) {
@@ -8657,6 +8603,55 @@ import chalk3 from "chalk";
 import fs4 from "fs-extra";
 import path4 from "path";
 import ora2 from "ora";
+
+// src/utils/tailwind-fix.ts
+import fs3 from "fs-extra";
+import path3 from "path";
+import chalk2 from "chalk";
+var CUSTOM_COMPONENTS_PATH = "./src/components/custom/**/*.{js,ts,jsx,tsx}";
+async function ensureCustomComponentsInTailwindConfig(cwd) {
+  const tailwindConfigOptions = [
+    "tailwind.config.js",
+    "tailwind.config.ts",
+    "tailwind.config.mjs",
+    "tailwind.config.cjs"
+  ];
+  let tailwindConfigPath = null;
+  for (const configFile of tailwindConfigOptions) {
+    const fullPath = path3.join(cwd, configFile);
+    if (await fs3.pathExists(fullPath)) {
+      tailwindConfigPath = fullPath;
+      break;
+    }
+  }
+  if (!tailwindConfigPath) {
+    return false;
+  }
+  const tailwindConfig = await fs3.readFile(tailwindConfigPath, "utf-8");
+  if (tailwindConfig.includes("./src/components/custom/")) {
+    return false;
+  }
+  const contentMatch = tailwindConfig.match(/content\s*:\s*\[([^\]]*)\]/s);
+  if (!contentMatch) {
+    return false;
+  }
+  const existingContent = contentMatch[1];
+  const existingPaths = existingContent.split(",").map((p) => p.trim()).filter((p) => p.length > 0);
+  const newPaths = [...existingPaths.map((p) => p.replace(/["']/g, "")), CUSTOM_COMPONENTS_PATH];
+  const newContentArray = newPaths.map((p) => `    "${p}"`).join(",\n");
+  const updatedConfig = tailwindConfig.replace(
+    /content\s*:\s*\[([^\]]*)\]/s,
+    `content: [
+${newContentArray},
+  ]`
+  );
+  await fs3.writeFile(tailwindConfigPath, updatedConfig);
+  console.log(chalk2.green(`
+  \u2713 Updated ${path3.basename(tailwindConfigPath)} with custom components path`));
+  return true;
+}
+
+// src/commands/fix.ts
 async function fix() {
   const cwd = process.cwd();
   console.log(chalk3.bold("\n  myOperator UI - Fix Configuration\n"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "myoperator-ui",
-  "version": "0.0.152",
+  "version": "0.0.154-beta.0",
   "description": "CLI for adding myOperator UI components to your project",
   "type": "module",
   "exports": "./dist/index.js",