nexoreui-cli 0.1.1 → 0.1.3

package/dist/index.js

@@ -1935,180 +1935,350 @@ function Badge({ className, variant, size, pulse = false, dot = false, children,
   )
 }
 
-export { Badge, badgeVariants }
-
-// ----------------------------------------------------
-// Consolidated Badge Components
-// ----------------------------------------------------
-
-export const GlowBadge = ({ children, className, ...props }: BadgeProps) => (
-  <Badge variant="neon" className={className} {...props}>{children}</Badge>
-)
-
-export const GlassBadge = ({ children, className, ...props }: BadgeProps) => (
-  <Badge variant="outline" className={cn("backdrop-blur-md bg-white/10 dark:bg-black/20 border-white/20 dark:border-white/10", className)} {...props}>{children}</Badge>
-)
-
-export const DotBadge = ({ children, className, ...props }: BadgeProps) => (
-  <Badge dot={true} className={className} {...props}>{children}</Badge>
-)
-
-export const GradientBadge = ({ children, className, ...props }: BadgeProps) => (
-  <Badge variant="gradient" className={className} {...props}>{children}</Badge>
-)
+export { Badge, badgeVariants }`
+};
 
-export const OutlineGlowBadge = ({ children, className, ...props }: BadgeProps) => (
-  <Badge variant="neon" className={cn("bg-transparent border border-purple-500/50", className)} {...props}>{children}</Badge>
-)
+// src/registry/morphing-geometry.ts
+var morphingGeometry = {
+  name: "morphing-geometry",
+  dependencies: [
+    "clsx",
+    "tailwind-merge",
+    "framer-motion",
+    "lucide-react"
+  ],
+  fileName: "morphing-geometry.tsx",
+  content: `'use client';
 
-export const PulseBadge = ({ children, className, ...props }: BadgeProps) => (
-  <Badge pulse={true} className={className} {...props}>{children}</Badge>
-)
+import * as React from 'react';
+import { motion, HTMLMotionProps } from 'framer-motion';
+import { Sparkles } from 'lucide-react';
+import { cn } from '../utils/cn';
 
-export const SoftBadge = ({ children, className, ...props }: BadgeProps) => (
-  <Badge variant="secondary" className={className} {...props}>{children}</Badge>
-)
+export type MorphingShape = 'pill' | 'circle' | 'square' | 'squircle' | 'custom';
+export type MorphingVariant = 'gradient' | 'aurora' | 'neon' | 'glass' | 'outline' | 'subtle';
+export type MorphingColor = 'violet' | 'cyan' | 'emerald' | 'rose' | 'amber' | 'rainbow' | 'mono';
+export type MorphingSize = 'sm' | 'md' | 'lg' | 'xl' | 'custom';
+
+export interface MorphingGeometryProps extends Omit<HTMLMotionProps<'div'>, 'children'> {
+  shape?: MorphingShape;
+  radius?: number | string;
+  variant?: MorphingVariant;
+  color?: MorphingColor;
+  size?: MorphingSize;
+  dimension?: number;
+  spin?: boolean;
+  spinDuration?: number;
+  interactive?: boolean;
+  glow?: boolean;
+  icon?: React.ReactNode;
+  children?: React.ReactNode;
+}
 
-export const TagBadge = ({ children, className, ...props }: BadgeProps) => (
-  <Badge className={cn("rounded-md", className)} {...props}>{children}</Badge>
-)
+export const MorphingGeometry = React.forwardRef<HTMLDivElement, MorphingGeometryProps>(
+  (
+    {
+      shape = 'squircle',
+      radius,
+      variant = 'gradient',
+      color = 'violet',
+      size = 'md',
+      dimension,
+      spin = false,
+      spinDuration = 6,
+      interactive = false,
+      glow = true,
+      icon,
+      children,
+      className,
+      style,
+      onClick,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <motion.div
+        ref={ref}
+        animate={spin ? { rotate: [0, 90, 180, 270, 360] } : { rotate: 0 }}
+        transition={{ rotate: { duration: spinDuration, repeat: Infinity, ease: 'linear' }, borderRadius: { duration: 0.4 } }}
+        className={cn('relative flex items-center justify-center select-none overflow-hidden transition-all duration-300 w-24 h-24', className)}
+        style={{ borderRadius: radius || '24%', ...style }}
+        {...props}
+      >
+        <div className="relative z-10 flex flex-col items-center justify-center p-2 text-center">
+          {icon || children || <Sparkles className="w-6 h-6 text-white" />}
+        </div>
+      </motion.div>
+    );
+  }
+);
 
-export const PremiumBadge = ({ children, className, ...props }: BadgeProps) => (
-  <Badge variant="gradient" className={cn("bg-gradient-to-r from-yellow-500 via-amber-500 to-orange-500", className)} {...props}>{children}</Badge>
-)
+MorphingGeometry.displayName = 'MorphingGeometry';
+export default MorphingGeometry;
+`
+};
 
-export const MinimalBadge = ({ children, className, ...props }: BadgeProps) => (
-  <Badge size="sm" variant="outline" className={className} {...props}>{children}</Badge>
-)
+// src/registry/aurora-border-fx.ts
+var auroraBorderFX = {
+  name: "aurora-border-fx",
+  dependencies: [
+    "clsx",
+    "tailwind-merge",
+    "framer-motion",
+    "lucide-react"
+  ],
+  fileName: "aurora-border-fx.tsx",
+  content: `'use client';
 
-export const NotificationBadge = ({ count, className }: { count: number; className?: string }) => (
-  <div className={cn("flex h-5 min-w-[20px] px-1 items-center justify-center rounded-full bg-destructive text-[10px] font-bold text-destructive-foreground shadow-sm", className)}>
-    {count}
-  </div>
-)
+import * as React from 'react';
+import { motion, useReducedMotion } from 'framer-motion';
+import { Sparkles } from 'lucide-react';
+import { cn } from '../utils/cn';
 
-export const RibbonBadge = ({ children, text, className }: { children?: React.ReactNode; text?: string; className?: string }) => (
-  <div className={cn("absolute top-0 right-0 bg-primary text-primary-foreground text-[10px] font-bold px-3 py-1 rounded-bl-xl uppercase tracking-wider", className)}>
-    {children || text}
-  </div>
-)
+export type AuroraFXColor = 'violet' | 'cyan' | 'emerald' | 'rose' | 'amber' | string;
+export type AuroraFXGlow = 'none' | 'subtle' | 'medium' | 'strong';
+export type AuroraFXRadius = 'sm' | 'md' | 'lg' | 'xl' | 'full';
 
-export interface OutlineDotBadgeProps extends React.HTMLAttributes<HTMLDivElement> {
-  status?: string;
-  text?: string;
+export interface AuroraColorOption {
+  name: string;
+  hex: string;
 }
 
-export const OutlineDotBadge = ({ children, className, status, text, ...props }: OutlineDotBadgeProps) => {
-  const statusColors: Record<string, string> = {
-    online: "bg-emerald-500",
-    offline: "bg-muted-foreground/50",
-    away: "bg-amber-500",
-    busy: "bg-red-500",
-  }
-  const dotColor = status ? statusColors[status] || "bg-emerald-500" : "bg-primary"
-  return (
-    <Badge variant="outline" className={className} {...props}>
-      <span className={cn("h-1.5 w-1.5 rounded-full mr-1.5", dotColor)} />
-      {children || text}
-    </Badge>
-  )
-}
+export const defaultAuroraColors: AuroraColorOption[] = [
+  { name: 'Violet', hex: '#8b5cf6' },
+  { name: 'Cyan', hex: '#06b6d4' },
+  { name: 'Emerald', hex: '#10b981' },
+  { name: 'Rose', hex: '#f43f5e' },
+  { name: 'Amber', hex: '#f59e0b' },
+];
+
+const colorPresetMap: Record<string, string> = {
+  violet: '#8b5cf6',
+  cyan: '#06b6d4',
+  emerald: '#10b981',
+  rose: '#f43f5e',
+  amber: '#f59e0b',
+};
 
-export interface GradientOutlineBadgeProps extends React.HTMLAttributes<HTMLDivElement> {
-  text?: string;
-}
+const radiusMap: Record<AuroraFXRadius, { outer: string; inner: string }> = {
+  sm: { outer: 'rounded-lg', inner: 'rounded-[calc(0.5rem-1px)]' },
+  md: { outer: 'rounded-xl', inner: 'rounded-[calc(0.75rem-1px)]' },
+  lg: { outer: 'rounded-2xl', inner: 'rounded-[calc(1rem-1px)]' },
+  xl: { outer: 'rounded-3xl', inner: 'rounded-[calc(1.5rem-1.5px)]' },
+  full: { outer: 'rounded-full', inner: 'rounded-full' },
+};
 
-export const GradientOutlineBadge = ({ children, text, className, ...props }: GradientOutlineBadgeProps) => (
-  <Badge className={cn("p-[1px] bg-gradient-to-r from-violet-500 to-pink-500 rounded-full border-0", className)} {...props}>
-    <div className="bg-background text-foreground rounded-full px-2.5 py-0.5 text-xs font-semibold">
-      {children || text}
-    </div>
-  </Badge>
-)
+const glowOpacityMap: Record<AuroraFXGlow, number> = {
+  none: 0,
+  subtle: 0.25,
+  medium: 0.45,
+  strong: 0.75,
+};
 
-export interface IconBadgeProps extends React.HTMLAttributes<HTMLDivElement> {
-  icon?: React.ReactNode;
-  text?: string;
+export interface AuroraBorderFXProps extends React.HTMLAttributes<HTMLDivElement> {
+  color?: AuroraFXColor;
+  glow?: AuroraFXGlow;
+  radius?: AuroraFXRadius;
+  badgeText?: string;
+  badgeIcon?: React.ReactNode;
+  title?: string;
+  description?: string;
+  showColorPicker?: boolean;
+  colors?: AuroraColorOption[];
+  activeColor?: string;
+  onColorChange?: (colorHex: string) => void;
+  previewSlot?: React.ReactNode;
+  footerSlot?: React.ReactNode;
+  children?: React.ReactNode;
 }
 
-export const IconBadge = ({ children, icon, text, className, ...props }: IconBadgeProps) => {
-  const renderIcon = () => {
-    if (!icon) return null;
-    if (typeof icon === "string") {
-      if (icon.toLowerCase() === "star") {
-        return <Star className="h-3 w-3 mr-1" />
+export const AuroraBorderFX = React.forwardRef<HTMLDivElement, AuroraBorderFXProps>(
+  (
+    {
+      color = 'violet',
+      glow = 'medium',
+      radius = 'lg',
+      badgeText = 'Aurora Border FX',
+      badgeIcon = <Sparkles className="w-3 h-3" />,
+      title = 'Reactive Aurora Borders',
+      description = 'Smooth multi-color conic gradients that dynamically track and react with zero JavaScript canvas lag.',
+      showColorPicker = true,
+      colors = defaultAuroraColors,
+      activeColor: controlledColor,
+      onColorChange,
+      previewSlot,
+      footerSlot,
+      className,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const resolvedInitialColor = colorPresetMap[color] || color || '#8b5cf6';
+    const [internalColor, setInternalColor] = React.useState<string>(resolvedInitialColor);
+
+    React.useEffect(() => {
+      if (colorPresetMap[color]) {
+        setInternalColor(colorPresetMap[color]);
+      } else if (color) {
+        setInternalColor(color);
       }
-      return <span className="mr-1">{icon}</span>
-    }
-    return <span className="mr-1">{icon}</span>
-  }
-
-  return (
-    <Badge className={cn("inline-flex items-center gap-1", className)} {...props}>
-      {renderIcon()}
-      {children || text}
-    </Badge>
-  )
-}
-
-export interface FloatingBadgeProps extends React.HTMLAttributes<HTMLDivElement> {
-  text?: string;
-}
+    }, [color]);
 
-export const FloatingBadge = ({ children, text, className, ...props }: FloatingBadgeProps) => (
-  <Badge className={cn("absolute -top-2 -right-2 z-10 animate-[bounce_3s_infinite]", className)} {...props}>
-    {children || text}
-  </Badge>
-)
+    const currentColor = controlledColor !== undefined ? controlledColor : internalColor;
+    const radiusConfig = radiusMap[radius] || radiusMap.lg;
+    const glowOpacity = glowOpacityMap[glow] ?? 0.45;
 
-export interface ProgressBadgeProps extends React.HTMLAttributes<HTMLDivElement> {
-  progress?: number;
-  text?: string;
-}
+    const handleSelectColor = (hex: string) => {
+      if (controlledColor === undefined) {
+        setInternalColor(hex);
+      }
+      onColorChange?.(hex);
+    };
 
-export const ProgressBadge = ({ children, progress = 50, text, className, ...props }: ProgressBadgeProps) => (
-  <Badge variant="outline" className={cn("relative overflow-hidden", className)} {...props}>
-    <div className="absolute inset-y-0 left-0 bg-primary/10 transition-all duration-300" style={{ width: \`\${progress}%\` }} />
-    <span className="relative z-10">{children || (text ? \`\${text} (\${progress}%)\` : \`\${progress}%\`)}</span>
-  </Badge>
-)
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          'relative isolate p-5 sm:p-6 overflow-hidden flex flex-col justify-between group transition-all duration-300',
+          'border border-border/80 bg-card/60 backdrop-blur-xl shadow-xl',
+          radiusConfig.outer,
+          className
+        )}
+        {...props}
+      >
+        {glow !== 'none' && (
+          <div
+            className="absolute -top-12 -right-12 w-48 h-48 rounded-full blur-[85px] pointer-events-none transition-colors duration-500 -z-10"
+            style={{
+              backgroundColor: currentColor,
+              opacity: glowOpacity,
+            }}
+          />
+        )}
 
-export interface StatusRingBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
-  status?: "success" | "error" | "warning" | "active" | string;
-}
+        {glow !== 'none' && glow !== 'subtle' && (
+          <div
+            className="absolute -bottom-10 -left-10 w-40 h-40 rounded-full blur-[90px] pointer-events-none transition-colors duration-700 -z-10"
+            style={{
+              backgroundColor: currentColor,
+              opacity: glowOpacity * 0.4,
+            }}
+          />
+        )}
 
-export const StatusRingBadge = ({ status = "success", children, className, ...props }: StatusRingBadgeProps) => {
-  const ringColors: Record<string, string> = {
-    success: "border-emerald-500/30 ring-emerald-500/20 bg-emerald-500",
-    active: "border-emerald-500/30 ring-emerald-500/20 bg-emerald-500",
-    error: "border-red-500/30 ring-red-500/20 bg-red-500",
-    warning: "border-amber-500/30 ring-amber-500/20 bg-amber-500",
-  }
-  const colorClass = ringColors[status] || ringColors.success;
-  return (
-    <span className={cn("relative flex h-2.5 w-2.5 rounded-full ring-4 border-2 border-transparent", colorClass, className)} {...props} />
-  )
-}
+        {children ? (
+          <div className="relative z-10 w-full h-full">{children}</div>
+        ) : (
+          <div className="relative z-10 flex flex-col justify-between h-full space-y-5">
+            <div className="space-y-3">
+              <div className="flex items-center justify-between gap-3">
+                {badgeText && (
+                  <div
+                    className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[11px] font-semibold border transition-all duration-300 shadow-xs"
+                    style={{
+                      backgroundColor: \`\${currentColor}18\`,
+                      borderColor: \`\${currentColor}40\`,
+                      color: currentColor,
+                    }}
+                  >
+                    {badgeIcon}
+                    <span>{badgeText}</span>
+                  </div>
+                )}
+
+                {showColorPicker && colors && colors.length > 0 && (
+                  <div className="flex items-center gap-1.5 bg-muted/60 dark:bg-muted/40 p-1 rounded-full border border-border/60 backdrop-blur-md">
+                    {colors.map((c) => {
+                      const isActive = currentColor.toLowerCase() === c.hex.toLowerCase();
+                      return (
+                        <button
+                          key={c.name}
+                          type="button"
+                          onClick={() => handleSelectColor(c.hex)}
+                          className={cn(
+                            'w-3.5 h-3.5 rounded-full transition-all duration-200 cursor-pointer',
+                            isActive
+                              ? 'scale-125 ring-2 ring-foreground/40 shadow-xs'
+                              : 'hover:scale-110 opacity-70 hover:opacity-100'
+                          )}
+                          style={{ backgroundColor: c.hex }}
+                          title={\`Switch to \${c.name}\`}
+                          aria-label={\`Switch glow to \${c.name}\`}
+                        />
+                      );
+                    })}
+                  </div>
+                )}
+              </div>
 
-export interface NeonOutlineBadgeProps extends React.HTMLAttributes<HTMLDivElement> {
-  text?: string;
-}
+              <div>
+                {title && (
+                  <h3 className="text-base sm:text-lg font-bold tracking-tight text-foreground">
+                    {title}
+                  </h3>
+                )}
+                {description && (
+                  <p className="text-xs sm:text-sm text-muted-foreground leading-relaxed mt-1">
+                    {description}
+                  </p>
+                )}
+              </div>
+            </div>
 
-export const NeonOutlineBadge = ({ children, text, className, ...props }: NeonOutlineBadgeProps) => (
-  <Badge variant="outline" className={cn("border-2 border-primary text-primary shadow-[0_0_10px_rgba(var(--primary-rgb),0.4)] bg-transparent", className)} {...props}>
-    {children || text}
-  </Badge>
-)
+            <div className="pt-2 flex items-center justify-center">
+              {previewSlot ? (
+                previewSlot
+              ) : (
+                <div
+                  className={cn(
+                    'relative p-[1.5px] overflow-hidden transition-all duration-300 w-full max-w-[280px]',
+                    radiusConfig.inner
+                  )}
+                  style={{
+                    background: \`linear-gradient(135deg, \${currentColor}, transparent 60%, \${currentColor}90)\`,
+                  }}
+                >
+                  <div
+                    className={cn(
+                      'bg-card/90 dark:bg-card/80 px-4 py-3 flex items-center justify-between backdrop-blur-md shadow-inner',
+                      radiusConfig.inner
+                    )}
+                  >
+                    <div className="flex items-center gap-2.5">
+                      <div
+                        className="w-2.5 h-2.5 rounded-full animate-pulse shrink-0"
+                        style={{ backgroundColor: currentColor }}
+                      />
+                      <span className="text-xs font-mono font-semibold text-foreground">
+                        Interactive Aurora Pill
+                      </span>
+                    </div>
+                    <span
+                      className="text-[10px] font-mono px-2 py-0.5 rounded-md font-medium border"
+                      style={{
+                        backgroundColor: \`\${currentColor}12\`,
+                        borderColor: \`\${currentColor}30\`,
+                        color: currentColor,
+                      }}
+                    >
+                      {currentColor.toUpperCase()}
+                    </span>
+                  </div>
+                </div>
+              )}
+            </div>
 
-export interface TagLabelProps extends React.HTMLAttributes<HTMLSpanElement> {
-  text?: string;
-}
+            {footerSlot && <div className="pt-2 border-t border-border/50">{footerSlot}</div>}
+          </div>
+        )}
+      </div>
+    );
+  }
+);
 
-export const TagLabel = ({ children, text, className, ...props }: TagLabelProps) => (
-  <span className={cn("px-2 py-1 bg-muted text-muted-foreground rounded-md text-xs font-medium text-muted-foreground hover:bg-muted/80 hover:text-foreground cursor-pointer transition-colors before:content-['#'] before:mr-0.5 before:opacity-50", className)} {...props}>
-    {children || text}
-  </span>
-)
+AuroraBorderFX.displayName = 'AuroraBorderFX';
 `
 };
 
@@ -2118,7 +2288,9 @@ var registry = {
   modal,
   card,
   alert,
-  badge
+  badge,
+  "morphing-geometry": morphingGeometry,
+  "aurora-border-fx": auroraBorderFX
 };
 
 // src/commands/add.ts
@@ -2128,16 +2300,23 @@ function askQuestion(query) {
     output: process.stdout
   });
   return new Promise(
-    (resolve2) => rl.question(query, (ans) => {
+    (resolve4) => rl.question(query, (ans) => {
       rl.close();
-      resolve2(ans);
+      resolve4(ans);
     })
   );
 }
-async function addCommand(components, options) {
-  if (components.length === 0) {
-    console.error("\x1B[31mError: Please specify components to add.\x1B[0m");
-    console.log("Example: npx nexoreui add button modal");
+async function addCommand(components, options = {}) {
+  const allRegistryKeys = Object.keys(registry);
+  let targetComponents = [...components];
+  if (options.all || targetComponents.includes("--all")) {
+    targetComponents = allRegistryKeys;
+    console.log(`
+\x1B[36m\u26A1 Adding all ${targetComponents.length} components from NexoreUI registry...\x1B[0m`);
+  }
+  if (targetComponents.length === 0) {
+    console.error("\x1B[31mError: Please specify components to add or use --all.\x1B[0m");
+    console.log("Example: npx nexoreui add button modal table --all");
     return;
   }
   const project = detectProject(process.cwd());
@@ -2145,9 +2324,25 @@ async function addCommand(components, options) {
 \x1B[34mDetected project type:\x1B[0m ${project.projectType.toUpperCase()}`);
   console.log(`\x1B[34mDetected package manager:\x1B[0m ${project.packageManager}
 `);
+  let customComponentsDir;
+  let customUtilsFile;
+  try {
+    const configPath = path3.join(project.baseDir, "nexore.json");
+    if (fs3.existsSync(configPath)) {
+      const cfg = JSON.parse(fs3.readFileSync(configPath, "utf8"));
+      if (cfg.aliases?.components) {
+        customComponentsDir = cfg.aliases.components.replace(/^@\//, project.hasSrcDir ? "src/" : "");
+      }
+      if (cfg.aliases?.utils) {
+        const utilBase = cfg.aliases.utils.replace(/^@\//, project.hasSrcDir ? "src/" : "");
+        customUtilsFile = utilBase.endsWith(".ts") || utilBase.endsWith(".js") ? utilBase : `${utilBase}.ts`;
+      }
+    }
+  } catch {
+  }
   const componentsToInstall = /* @__PURE__ */ new Set();
   const invalidComponents = [];
-  const queue = [...components];
+  const queue = [...targetComponents.filter((c) => c !== "--all")];
   while (queue.length > 0) {
     const compName = queue.shift();
     const registryItem = registry[compName];
@@ -2169,14 +2364,11 @@ async function addCommand(components, options) {
     console.log("Run \x1B[32mnpx nexoreui list\x1B[0m to see all available components.");
     return;
   }
-  const defaultComponentsDir = project.hasSrcDir ? "src/components/ui" : "components/ui";
-  const defaultUtilsFile = project.hasSrcDir ? "src/lib/utils.ts" : "lib/utils.ts";
-  let componentsDirInput = "";
-  let utilsFileInput = "";
-  if (options.yes) {
-    componentsDirInput = defaultComponentsDir;
-    utilsFileInput = defaultUtilsFile;
-  } else {
+  const defaultComponentsDir = customComponentsDir || (project.hasSrcDir ? "src/components/ui" : "components/ui");
+  const defaultUtilsFile = customUtilsFile || (project.hasSrcDir ? "src/lib/utils.ts" : "lib/utils.ts");
+  let componentsDirInput = defaultComponentsDir;
+  let utilsFileInput = defaultUtilsFile;
+  if (!options.yes && !customComponentsDir) {
     const compPrompt = await askQuestion(`Where would you like to install the components? (default: ${defaultComponentsDir}): `);
     componentsDirInput = compPrompt.trim() || defaultComponentsDir;
     const utilsPrompt = await askQuestion(`Where should we create the utilities file (cn helper)? (default: ${defaultUtilsFile}): `);
@@ -2184,25 +2376,24 @@ async function addCommand(components, options) {
   }
   const absoluteComponentsDir = path3.resolve(project.baseDir, componentsDirInput);
   const absoluteUtilsFile = path3.resolve(project.baseDir, utilsFileInput);
-  console.log(`
-\x1B[33mInstalling components to:\x1B[0m ${absoluteComponentsDir}`);
+  console.log(`\x1B[33mInstalling components to:\x1B[0m ${absoluteComponentsDir}`);
   console.log(`\x1B[33mUsing cn helper from:\x1B[0m ${absoluteUtilsFile}
 `);
   ensureDir(absoluteComponentsDir);
   const didCreateCn = ensureCnUtil(absoluteUtilsFile);
   if (didCreateCn) {
-    console.log(`\x1B[32mCreated utilities file (cn helper) at:\x1B[0m ${utilsFileInput}`);
-  } else {
-    console.log(`\x1B[90mUtilities file already exists at:\x1B[0m ${utilsFileInput}`);
+    console.log(`\x1B[32m\u2714 Created utilities file (cn helper) at:\x1B[0m ${utilsFileInput}`);
   }
   const npmDependencies = /* @__PURE__ */ new Set();
   npmDependencies.add("clsx");
   npmDependencies.add("tailwind-merge");
+  npmDependencies.add("lucide-react");
+  npmDependencies.add("framer-motion");
   for (const compName of componentsToInstall) {
     const registryItem = registry[compName];
     const targetPath = path3.join(absoluteComponentsDir, registryItem.fileName);
     copyComponentFile(registryItem.content, targetPath, absoluteUtilsFile);
-    console.log(`\x1B[32mAdded component:\x1B[0m ${compName} -> ${path3.join(componentsDirInput, registryItem.fileName)}`);
+    console.log(`\x1B[32m\u2714 Added component:\x1B[0m ${compName} -> ${path3.join(componentsDirInput, registryItem.fileName)}`);
     registryItem.dependencies.forEach((dep) => npmDependencies.add(dep));
   }
   const depsArray = Array.from(npmDependencies);
@@ -2214,33 +2405,29 @@ async function addCommand(components, options) {
       const existingDeps = { ...packageJson.dependencies, ...packageJson.devDependencies };
       depsToInstall = depsArray.filter((dep) => !existingDeps[dep]);
     }
-  } catch (e) {
+  } catch {
   }
   if (depsToInstall.length > 0) {
     console.log(`
 \x1B[33mInstalling external dependencies:\x1B[0m ${depsToInstall.join(", ")}...`);
     let installCmd = "npm install";
-    if (project.packageManager === "pnpm") {
-      installCmd = "pnpm add";
-    } else if (project.packageManager === "yarn") {
-      installCmd = "yarn add";
-    } else if (project.packageManager === "bun") {
-      installCmd = "bun add";
-    }
+    if (project.packageManager === "pnpm") installCmd = "pnpm add";
+    else if (project.packageManager === "yarn") installCmd = "yarn add";
+    else if (project.packageManager === "bun") installCmd = "bun add";
     try {
       (0, import_child_process.execSync)(`${installCmd} ${depsToInstall.join(" ")}`, {
         stdio: "inherit",
         cwd: project.baseDir
       });
-      console.log("\x1B[32mDependencies installed successfully!\x1B[0m");
-    } catch (err) {
-      console.error("\x1B[31mFailed to install dependencies. Please run the command manually:\x1B[0m");
+      console.log("\x1B[32m\u2714 Dependencies installed successfully!\x1B[0m");
+    } catch {
+      console.error("\x1B[31mFailed to install dependencies automatically. Please run:\x1B[0m");
       console.log(`  ${installCmd} ${depsToInstall.join(" ")}`);
     }
-  } else {
-    console.log("\n\x1B[90mAll external dependencies are already installed.\x1B[0m");
   }
-  console.log("\n\x1B[32m\x1B[1mDone! NexoreUI components are ready to use.\x1B[0m\n");
+  console.log(`
+\x1B[32m\x1B[1m\u{1F389} Done! ${componentsToInstall.size} NexoreUI component(s) ready to use.\x1B[0m
+`);
 }
 
 // src/commands/list.ts
@@ -2259,6 +2446,299 @@ function listCommand() {
   });
 }
 
+// src/commands/init.ts
+var fs5 = __toESM(require("fs"));
+var path5 = __toESM(require("path"));
+var readline2 = __toESM(require("readline"));
+
+// src/utils/config.ts
+var fs4 = __toESM(require("fs"));
+var path4 = __toESM(require("path"));
+var import_child_process2 = require("child_process");
+var THEME_PALETTES = {
+  indigo: { light: "hsl(250 85% 50%)", dark: "hsl(250 85% 65%)", rgb: "99 60 220" },
+  violet: { light: "hsl(262.1 83.3% 57.8%)", dark: "hsl(263.4 70% 50.4%)", rgb: "139 92 246" },
+  emerald: { light: "hsl(142.1 76.2% 36.3%)", dark: "hsl(142.1 70.6% 45.3%)", rgb: "16 185 129" },
+  rose: { light: "hsl(346.8 77.2% 49.8%)", dark: "hsl(346.8 77.2% 55%)", rgb: "244 63 94" },
+  amber: { light: "hsl(37.7 92.1% 50.2%)", dark: "hsl(37.7 92.1% 55%)", rgb: "245 158 11" },
+  cyan: { light: "hsl(190.4 95% 39%)", dark: "hsl(188.7 94.5% 42.7%)", rgb: "6 182 212" },
+  slate: { light: "hsl(240 5.9% 10%)", dark: "hsl(0 0% 98%)", rgb: "244 244 245" },
+  neon: { light: "hsl(173 80% 40%)", dark: "hsl(173 100% 50%)", rgb: "0 255 220" }
+};
+function ensurePathAlias(baseDir, projectType, hasSrcDir) {
+  let updated = false;
+  const tsConfigPath = path4.join(baseDir, "tsconfig.json");
+  const jsConfigPath = path4.join(baseDir, "jsconfig.json");
+  const targetConfig = fs4.existsSync(tsConfigPath) ? tsConfigPath : fs4.existsSync(jsConfigPath) ? jsConfigPath : null;
+  if (targetConfig) {
+    try {
+      const content = fs4.readFileSync(targetConfig, "utf8");
+      const parsed = JSON.parse(content);
+      parsed.compilerOptions = parsed.compilerOptions || {};
+      parsed.compilerOptions.baseUrl = parsed.compilerOptions.baseUrl || ".";
+      parsed.compilerOptions.paths = parsed.compilerOptions.paths || {};
+      const aliasTarget = hasSrcDir ? ["./src/*"] : ["./*"];
+      if (!parsed.compilerOptions.paths["@/*"]) {
+        parsed.compilerOptions.paths["@/*"] = aliasTarget;
+        fs4.writeFileSync(targetConfig, JSON.stringify(parsed, null, 2), "utf8");
+        updated = true;
+      }
+    } catch {
+    }
+  }
+  if (projectType === "vite") {
+    const viteConfigFiles = ["vite.config.ts", "vite.config.js", "vite.config.mjs"];
+    for (const fileName of viteConfigFiles) {
+      const vitePath = path4.join(baseDir, fileName);
+      if (fs4.existsSync(vitePath)) {
+        let viteContent = fs4.readFileSync(vitePath, "utf8");
+        if (!viteContent.includes("alias") && !viteContent.includes("'@'")) {
+          const hasPathImport = viteContent.includes("from 'path'") || viteContent.includes('from "path"');
+          let headerAdditions = "";
+          if (!hasPathImport) {
+            headerAdditions += `import path from 'path'
+import { fileURLToPath } from 'url'
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+`;
+          }
+          if (viteContent.includes("defineConfig({")) {
+            viteContent = headerAdditions + viteContent.replace(
+              "defineConfig({",
+              `defineConfig({
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './${hasSrcDir ? "src" : "."}'),
+    },
+  },`
+            );
+            fs4.writeFileSync(vitePath, viteContent, "utf8");
+            updated = true;
+          }
+        }
+        break;
+      }
+    }
+  }
+  return updated;
+}
+function injectThemeCss(baseDir, cssRelativePath, themeName, radiusValue) {
+  const cssAbsolutePath = path4.join(baseDir, cssRelativePath);
+  const palette = THEME_PALETTES[themeName] || THEME_PALETTES.cyan;
+  const radius = typeof radiusValue === "number" ? radiusValue : parseFloat(radiusValue) || 1;
+  const themeBlock = `
+@source "../node_modules/nexoreui/dist/**/*.{js,mjs}";
+
+@theme {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-border: var(--border);
+  --radius-lg: var(--radius);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-sm: calc(var(--radius) - 4px);
+  --font-sans: system-ui, -apple-system, sans-serif;
+}
+
+:root {
+  --background: hsl(0 0% 100%);
+  --foreground: hsl(240 10% 3.9%);
+  --card: hsl(0 0% 100%);
+  --card-foreground: hsl(240 10% 3.9%);
+  --primary: ${palette.light};
+  --primary-foreground: hsl(0 0% 100%);
+  --border: hsl(240 5.9% 90%);
+  --radius: ${radius}rem;
+}
+
+.dark {
+  --background: hsl(240 10% 3.9%);
+  --foreground: hsl(0 0% 98%);
+  --card: hsl(240 10% 3.9%);
+  --card-foreground: hsl(0 0% 98%);
+  --primary: ${palette.dark};
+  --primary-foreground: hsl(0 0% 100%);
+  --border: hsl(240 3.7% 15.9%);
+  --radius: ${radius}rem;
+}
+`;
+  if (fs4.existsSync(cssAbsolutePath)) {
+    const existingContent = fs4.readFileSync(cssAbsolutePath, "utf8");
+    if (!existingContent.includes("--color-primary") && !existingContent.includes("nexoreui/dist")) {
+      fs4.writeFileSync(cssAbsolutePath, existingContent.trim() + "\n" + themeBlock, "utf8");
+      return true;
+    }
+  } else {
+    const cssDir = path4.dirname(cssAbsolutePath);
+    if (!fs4.existsSync(cssDir)) fs4.mkdirSync(cssDir, { recursive: true });
+    fs4.writeFileSync(cssAbsolutePath, `@import "tailwindcss";
+` + themeBlock, "utf8");
+    return true;
+  }
+  return false;
+}
+function installPeerDependencies(baseDir, packageManager, dependencies = ["clsx", "tailwind-merge", "lucide-react", "framer-motion"]) {
+  try {
+    const packageJsonPath = path4.join(baseDir, "package.json");
+    let missingDeps = [...dependencies];
+    if (fs4.existsSync(packageJsonPath)) {
+      const pkg = JSON.parse(fs4.readFileSync(packageJsonPath, "utf8"));
+      const installed = { ...pkg.dependencies, ...pkg.devDependencies };
+      missingDeps = dependencies.filter((dep) => !installed[dep]);
+    }
+    if (missingDeps.length === 0) return true;
+    let installCmd = "npm install";
+    if (packageManager === "pnpm") installCmd = "pnpm add";
+    else if (packageManager === "yarn") installCmd = "yarn add";
+    else if (packageManager === "bun") installCmd = "bun add";
+    console.log(`
+\x1B[33m\u26A1 Installing peer dependencies:\x1B[0m ${missingDeps.join(", ")}...`);
+    (0, import_child_process2.execSync)(`${installCmd} ${missingDeps.join(" ")}`, {
+      stdio: "inherit",
+      cwd: baseDir
+    });
+    return true;
+  } catch (err) {
+    console.warn("\x1B[33mWarning: Automatic peer dependency installation skipped.\x1B[0m");
+    return false;
+  }
+}
+
+// src/commands/init.ts
+function askQuestion2(query) {
+  const rl = readline2.createInterface({
+    input: process.stdin,
+    output: process.stdout
+  });
+  return new Promise(
+    (resolve4) => rl.question(query, (ans) => {
+      rl.close();
+      resolve4(ans);
+    })
+  );
+}
+async function initCommand(options = {}) {
+  console.log(`
+\x1B[36m\x1B[1m=== Initializing NexoreUI in your project ===\x1B[0m
+`);
+  const project = detectProject(process.cwd());
+  console.log(`\x1B[32m\u2714 Detected Project:\x1B[0m ${project.projectType.toUpperCase()} (${project.packageManager})`);
+  let theme = options.theme || "cyan";
+  let radius = options.radius || "1.0";
+  const defaultComponentsDir = project.hasSrcDir ? "src/components/ui" : "components/ui";
+  const defaultUtilsFile = project.hasSrcDir ? "src/lib/utils.ts" : "lib/utils.ts";
+  const defaultCssFile = project.projectType === "next" ? project.hasSrcDir ? "src/app/globals.css" : "app/globals.css" : project.hasSrcDir ? "src/index.css" : "src/index.css";
+  let componentsDir = defaultComponentsDir;
+  let utilsFile = defaultUtilsFile;
+  if (!options.yes) {
+    if (!options.theme) {
+      const themeAns = await askQuestion2(`Which color theme would you like to use? (cyan, indigo, violet, emerald, rose, amber, slate, neon) [default: cyan]: `);
+      if (themeAns.trim() && THEME_PALETTES[themeAns.trim().toLowerCase()]) {
+        theme = themeAns.trim().toLowerCase();
+      }
+    }
+    if (!options.radius) {
+      const radiusAns = await askQuestion2(`Which radius value would you like to use? (0, 0.3, 0.5, 0.75, 1.0) [default: 1.0]: `);
+      if (radiusAns.trim()) {
+        radius = radiusAns.trim();
+      }
+    }
+    const compAns = await askQuestion2(`Where should UI components be created? (default: ${defaultComponentsDir}): `);
+    if (compAns.trim()) componentsDir = compAns.trim();
+    const utilsAns = await askQuestion2(`Where should utility functions (cn helper) be placed? (default: ${defaultUtilsFile}): `);
+    if (utilsAns.trim()) utilsFile = utilsAns.trim();
+  }
+  const absoluteComponentsDir = path5.resolve(project.baseDir, componentsDir);
+  const absoluteUtilsFile = path5.resolve(project.baseDir, utilsFile);
+  ensureDir(absoluteComponentsDir);
+  ensureCnUtil(absoluteUtilsFile);
+  const didUpdateAlias = ensurePathAlias(project.baseDir, project.projectType, project.hasSrcDir);
+  if (didUpdateAlias) {
+    console.log(`\x1B[32m\u2714\x1B[0m Configured path alias \x1B[1m'@/*'\x1B[0m in project config`);
+  }
+  const didInjectCss = injectThemeCss(project.baseDir, defaultCssFile, theme, radius);
+  if (didInjectCss) {
+    console.log(`\x1B[32m\u2714\x1B[0m Injected Tailwind CSS v4 @theme tokens into \x1B[1m${defaultCssFile}\x1B[0m`);
+  }
+  installPeerDependencies(project.baseDir, project.packageManager);
+  const config = {
+    $schema: "https://nexoreui.site/schema.json",
+    style: "default",
+    theme,
+    radius: Number(radius),
+    framework: project.projectType,
+    packageManager: project.packageManager,
+    font: "system",
+    density: "default",
+    animation: "energetic",
+    defaultMode: "light",
+    tailwind: {
+      config: "tailwind.config.js",
+      css: defaultCssFile,
+      baseColor: "zinc",
+      cssVariables: true
+    },
+    aliases: {
+      components: `@/${componentsDir.replace(/^src\//, "")}`,
+      utils: `@/${utilsFile.replace(/^src\//, "").replace(/\.(ts|js)$/, "")}`
+    }
+  };
+  const configPath = path5.join(project.baseDir, "nexore.json");
+  fs5.writeFileSync(configPath, JSON.stringify(config, null, 2), "utf8");
+  console.log(`\x1B[32m\u2714\x1B[0m Generated \x1B[1mnexore.json\x1B[0m (Theme: ${theme}, Radius: ${radius}rem)`);
+  console.log(`\x1B[32m\u2714\x1B[0m Utilities ready at \x1B[1m${utilsFile}\x1B[0m`);
+  console.log(`\x1B[32m\u2714\x1B[0m Components directory ready at \x1B[1m${componentsDir}\x1B[0m`);
+  console.log(`
+\x1B[32m\x1B[1m\u{1F389} NexoreUI initialized successfully! You can now add components:\x1B[0m`);
+  console.log(`  \x1B[36mnpx nexoreui add button card modal table --all\x1B[0m
+`);
+}
+
+// src/commands/create.ts
+var fs6 = __toESM(require("fs"));
+var path6 = __toESM(require("path"));
+var import_child_process3 = require("child_process");
+async function createCommand(projectName, options = {}) {
+  const name = projectName || "my-nexore-app";
+  const targetDir = path6.resolve(process.cwd(), name);
+  console.log(`
+\x1B[36m\x1B[1m\u{1F680} Creating a new NexoreUI Project:\x1B[0m \x1B[32m${name}\x1B[0m
+`);
+  if (fs6.existsSync(targetDir) && fs6.readdirSync(targetDir).length > 0) {
+    console.error(`\x1B[31mError: Target directory ${name} already exists and is not empty.\x1B[0m`);
+    return;
+  }
+  console.log(`\x1B[33m\u26A1 Scaffolding React + Vite + Tailwind CSS template...\x1B[0m`);
+  try {
+    (0, import_child_process3.execSync)(`npm create vite@latest ${name} -- --template react-ts`, { stdio: "inherit" });
+  } catch (err) {
+    console.error(`\x1B[31mFailed to scaffold Vite project.\x1B[0m`);
+    return;
+  }
+  process.chdir(targetDir);
+  console.log(`
+\x1B[33m\u{1F4E6} Installing NexoreUI, Tailwind CSS, and core packages...\x1B[0m`);
+  (0, import_child_process3.execSync)(`npm install nexoreui lucide-react clsx tailwind-merge framer-motion @tailwindcss/vite tailwindcss`, {
+    stdio: "inherit"
+  });
+  await initCommand({
+    yes: true,
+    theme: options.theme || "cyan",
+    radius: options.radius || "1.0"
+  });
+  console.log(`
+\x1B[32m\x1B[1m\u2728 Project ${name} is ready!\x1B[0m`);
+  console.log(`
+To get started:
+`);
+  console.log(`  \x1B[36mcd ${name}\x1B[0m`);
+  console.log(`  \x1B[36mnpx nexoreui add button card modal table --all\x1B[0m`);
+  console.log(`  \x1B[36mnpm run dev\x1B[0m
+`);
+}
+
 // src/index.ts
 async function main() {
   const args = process.argv.slice(2);
@@ -2267,20 +2747,59 @@ async function main() {
     printHelp();
     return;
   }
-  if (command === "list") {
+  if (command === "create") {
+    const projectName = args[1] && !args[1].startsWith("-") ? args[1] : void 0;
+    let theme;
+    let radius;
+    for (let i = 1; i < args.length; i++) {
+      const arg = args[i];
+      if (arg === "--theme" && args[i + 1]) {
+        theme = args[++i];
+      } else if (arg.startsWith("--theme=")) {
+        theme = arg.split("=")[1];
+      } else if (arg === "--radius" && args[i + 1]) {
+        radius = args[++i];
+      } else if (arg.startsWith("--radius=")) {
+        radius = arg.split("=")[1];
+      }
+    }
+    await createCommand(projectName, { theme, radius });
+  } else if (command === "init") {
+    let yes = false;
+    let theme;
+    let radius;
+    for (let i = 1; i < args.length; i++) {
+      const arg = args[i];
+      if (arg === "-y" || arg === "--yes") {
+        yes = true;
+      } else if (arg === "--theme" && args[i + 1]) {
+        theme = args[++i];
+      } else if (arg.startsWith("--theme=")) {
+        theme = arg.split("=")[1];
+      } else if (arg === "--radius" && args[i + 1]) {
+        radius = args[++i];
+      } else if (arg.startsWith("--radius=")) {
+        radius = arg.split("=")[1];
+      }
+    }
+    await initCommand({ yes, theme, radius });
+  } else if (command === "list") {
     listCommand();
   } else if (command === "add") {
     const components = [];
     let yes = false;
+    let all = false;
     for (let i = 1; i < args.length; i++) {
       const arg = args[i];
       if (arg === "-y" || arg === "--yes") {
         yes = true;
+      } else if (arg === "--all" || arg === "-a") {
+        all = true;
       } else if (!arg.startsWith("-")) {
         components.push(arg);
       }
     }
-    await addCommand(components, { yes });
+    await addCommand(components, { yes, all });
   } else {
     console.error(`\x1B[31mUnknown command: ${command}\x1B[0m`);
     printHelp();
@@ -2288,16 +2807,23 @@ async function main() {
 }
 function printHelp() {
   console.log(`
-\x1B[34m\x1B[1mNexoreUI CLI\x1B[0m
+\x1B[36m\x1B[1mNexoreUI CLI\x1B[0m
+\x1B[90mModern, animated, production-ready React components with Tailwind CSS v4\x1B[0m
+
 Usage:
   npx nexoreui [command] [options]
 
 Commands:
-  \x1B[32madd [components...]\x1B[0m  Add components to your project (e.g., button, modal, card, alert, badge)
-  \x1B[32mlist\x1B[0m                 List all available components
+  \x1B[32mcreate [name]\x1B[0m        Create a new fully configured NexoreUI starter project
+  \x1B[32minit\x1B[0m                 Initialize NexoreUI in your project (configure theme, aliases, and CSS)
+  \x1B[32madd [components...]\x1B[0m  Add components to your project (use --all to install all 40+ components)
+  \x1B[32mlist\x1B[0m                 List all available components in registry
 
 Options:
-  \x1B[33m-y, --yes\x1B[0m            Skip prompts and use default paths
+  \x1B[33m--theme <name>\x1B[0m       Set color palette (cyan, indigo, violet, emerald, rose, amber, slate, neon)
+  \x1B[33m--radius <val>\x1B[0m       Set border radius (0, 0.3, 0.5, 0.75, 1.0)
+  \x1B[33m--all, -a\x1B[0m            Install all available components at once
+  \x1B[33m-y, --yes\x1B[0m            Skip prompts and use defaults automatically
   \x1B[33m-h, --help\x1B[0m           Show help information
   `);
 }