@alexourus/ui 0.3.0 → 0.3.2

package/dist/cli.mjs

@@ -0,0 +1,1556 @@
+#!/usr/bin/env node
+
+// src/index.ts
+import { Command } from "commander";
+
+// src/commands/init.ts
+import path2 from "path";
+import fs2 from "fs-extra";
+import prompts from "prompts";
+import ora from "ora";
+import { execa } from "execa";
+
+// src/utils/logger.ts
+import {
+  cyan,
+  green,
+  yellow,
+  red,
+  bold,
+  dim,
+  magenta,
+  blue
+} from "kolorist";
+var logger = {
+  banner() {
+    console.log();
+    console.log(
+      bold(
+        cyan("  \u25B2 alexourus-ui ") + dim("v0.3.0 \u2014 Modern React & Tailwind Design System")
+      )
+    );
+    console.log(
+      dim("  \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500")
+    );
+    console.log();
+  },
+  info(...args) {
+    console.log(cyan("\u2139"), ...args);
+  },
+  success(...args) {
+    console.log(green("\u2714"), bold(green(String(args[0]))), ...args.slice(1));
+  },
+  warn(...args) {
+    console.log(yellow("\u25B2"), yellow(String(args[0])), ...args.slice(1));
+  },
+  error(...args) {
+    console.log(red("\u2716"), bold(red(String(args[0]))), ...args.slice(1));
+  },
+  step(step, desc) {
+    console.log(`  ${magenta(step)} ${desc}`);
+  },
+  item(title, desc) {
+    console.log(`    ${blue("\u2022")} ${bold(title)}${desc ? dim(` \u2014 ${desc}`) : ""}`);
+  },
+  break() {
+    console.log();
+  }
+};
+
+// src/utils/get-package-manager.ts
+import fs from "fs-extra";
+import path from "path";
+async function getPackageManager(cwd = process.cwd()) {
+  const userAgent = process.env.npm_config_user_agent || "";
+  if (userAgent.startsWith("pnpm")) return "pnpm";
+  if (userAgent.startsWith("bun")) return "bun";
+  if (userAgent.startsWith("yarn")) return "yarn";
+  if (userAgent.startsWith("npm")) return "npm";
+  if (await fs.pathExists(path.join(cwd, "pnpm-lock.yaml"))) return "pnpm";
+  if (await fs.pathExists(path.join(cwd, "bun.lockb")) || await fs.pathExists(path.join(cwd, "bun.lock"))) return "bun";
+  if (await fs.pathExists(path.join(cwd, "yarn.lock"))) return "yarn";
+  if (await fs.pathExists(path.join(cwd, "package-lock.json"))) return "npm";
+  return "npm";
+}
+function getInstallCommand(pm, isDev = false) {
+  switch (pm) {
+    case "pnpm":
+      return isDev ? "pnpm add -D" : "pnpm add";
+    case "bun":
+      return isDev ? "bun add -d" : "bun add";
+    case "yarn":
+      return isDev ? "yarn add -D" : "yarn add";
+    case "npm":
+    default:
+      return isDev ? "npm install --save-dev" : "npm install";
+  }
+}
+
+// src/utils/templates.ts
+var UTILS_TEMPLATE = `import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+`;
+var COLOR_THEMES = {
+  zinc: {
+    light: { primary: "222 47% 11%", primaryForeground: "210 40% 98%", ring: "222 47% 11%" },
+    dark: { primary: "0 0% 96%", primaryForeground: "0 0% 6%", ring: "0 0% 60%" }
+  },
+  emerald: {
+    light: { primary: "142.1 76.2% 36.3%", primaryForeground: "355.7 100% 97.3%", ring: "142.1 76.2% 36.3%" },
+    dark: { primary: "142.1 70.6% 45.3%", primaryForeground: "144.9 80.4% 10%", ring: "142.4 71.8% 29.2%" }
+  },
+  violet: {
+    light: { primary: "262.1 83.3% 57.8%", primaryForeground: "210 20% 98%", ring: "262.1 83.3% 57.8%" },
+    dark: { primary: "263.4 70% 50.4%", primaryForeground: "210 20% 98%", ring: "263.4 70% 50.4%" }
+  },
+  rose: {
+    light: { primary: "346.8 77.2% 49.8%", primaryForeground: "355.7 100% 97.3%", ring: "346.8 77.2% 49.8%" },
+    dark: { primary: "346.8 77.2% 49.8%", primaryForeground: "355.7 100% 97.3%", ring: "346.8 77.2% 49.8%" }
+  },
+  blue: {
+    light: { primary: "221.2 83.2% 53.3%", primaryForeground: "210 40% 98%", ring: "221.2 83.2% 53.3%" },
+    dark: { primary: "217.2 91.2% 59.8%", primaryForeground: "222.2 47.4% 11.2%", ring: "224.3 76.3% 48%" }
+  },
+  amber: {
+    light: { primary: "24.6 95% 53.1%", primaryForeground: "60 9.1% 97.8%", ring: "24.6 95% 53.1%" },
+    dark: { primary: "20.5 90.2% 48.2%", primaryForeground: "60 9.1% 97.8%", ring: "20.5 90.2% 48.2%" }
+  },
+  cyan: {
+    light: { primary: "188 86% 40%", primaryForeground: "210 40% 98%", ring: "188 86% 40%" },
+    dark: { primary: "188 86% 53%", primaryForeground: "222 47% 11%", ring: "188 86% 53%" }
+  }
+};
+function getCssVariables(theme = "zinc", radius = "0.5rem") {
+  const defaultTheme = COLOR_THEMES.zinc;
+  const selected = COLOR_THEMES[theme] ?? defaultTheme;
+  return `@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222 47% 11%;
+    --card: 0 0% 100%;
+    --card-foreground: 222 47% 11%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222 47% 11%;
+    --primary: ${selected.light.primary};
+    --primary-foreground: ${selected.light.primaryForeground};
+    --secondary: 210 40% 96%;
+    --secondary-foreground: 222 47% 11%;
+    --muted: 210 40% 96%;
+    --muted-foreground: 215 16% 47%;
+    --accent: 210 40% 96%;
+    --accent-foreground: 222 47% 11%;
+    --destructive: 0 84% 60%;
+    --destructive-foreground: 210 40% 98%;
+    --success: 142 71% 45%;
+    --success-foreground: 0 0% 100%;
+    --warning: 38 92% 50%;
+    --warning-foreground: 222 47% 11%;
+    --info: 217 91% 60%;
+    --info-foreground: 0 0% 100%;
+    --border: 214 32% 91%;
+    --input: 214 32% 91%;
+    --ring: ${selected.light.ring};
+    --radius: ${radius};
+  }
+
+  .dark {
+    --background: 0 0% 4%;
+    --foreground: 0 0% 96%;
+    --card: 0 0% 6%;
+    --card-foreground: 0 0% 96%;
+    --popover: 0 0% 6%;
+    --popover-foreground: 0 0% 96%;
+    --primary: ${selected.dark.primary};
+    --primary-foreground: ${selected.dark.primaryForeground};
+    --secondary: 0 0% 10%;
+    --secondary-foreground: 0 0% 90%;
+    --muted: 0 0% 10%;
+    --muted-foreground: 0 0% 55%;
+    --accent: 0 0% 10%;
+    --accent-foreground: 0 0% 96%;
+    --destructive: 0 63% 31%;
+    --destructive-foreground: 0 0% 96%;
+    --success: 142 69% 35%;
+    --success-foreground: 0 0% 100%;
+    --warning: 38 92% 40%;
+    --warning-foreground: 0 0% 100%;
+    --info: 217 91% 50%;
+    --info-foreground: 0 0% 100%;
+    --border: 0 0% 12%;
+    --input: 0 0% 12%;
+    --ring: ${selected.dark.ring};
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+`;
+}
+
+// src/commands/init.ts
+async function runInit(options) {
+  const cwd = options.cwd || process.cwd();
+  logger.banner();
+  const pm = await getPackageManager(cwd);
+  const hasSrc = await fs2.pathExists(path2.join(cwd, "src"));
+  const candidateCss = [
+    "src/app/globals.css",
+    "app/globals.css",
+    "src/styles/globals.css",
+    "styles/globals.css",
+    "src/index.css",
+    "src/main.css",
+    "src/App.css"
+  ];
+  let detectedCss = null;
+  for (const file of candidateCss) {
+    if (await fs2.pathExists(path2.join(cwd, file))) {
+      detectedCss = file;
+      break;
+    }
+  }
+  let theme = "zinc";
+  let radius = "0.5rem";
+  let cssFile = detectedCss || (hasSrc ? "src/app/globals.css" : "app/globals.css");
+  let componentsDir = hasSrc ? "src/components/ui" : "components/ui";
+  let utilsFile = hasSrc ? "src/lib/utils.ts" : "lib/utils.ts";
+  if (detectedCss) {
+    logger.info("Proje yap\u0131s\u0131 otomatik alg\u0131land\u0131:");
+    console.log(`  \u2713 Global CSS:  ${cssFile}`);
+    console.log(`  \u2713 Bile\u015Fenler:  ${componentsDir}`);
+    console.log(`  \u2713 Yard\u0131mc\u0131lar: ${utilsFile}`);
+    console.log();
+  }
+  if (!options.yes) {
+    const questions = [
+      {
+        type: "select",
+        name: "theme",
+        message: "Hangi temel renk temas\u0131n\u0131 kullanmak istersiniz?",
+        choices: [
+          { title: "Zinc (Varsay\u0131lan Monochrome)", value: "zinc" },
+          { title: "Emerald (Ye\u015Fil)", value: "emerald" },
+          { title: "Violet (Mor)", value: "violet" },
+          { title: "Rose (G\xFCl)", value: "rose" },
+          { title: "Blue (Mavi)", value: "blue" },
+          { title: "Amber (Kehribar)", value: "amber" },
+          { title: "Cyan (Turkuaz)", value: "cyan" }
+        ],
+        initial: 0
+      },
+      {
+        type: "select",
+        name: "radius",
+        message: "K\xF6\u015Fe yuvarlakl\u0131\u011F\u0131 (Border Radius) tercihiniz:",
+        choices: [
+          { title: "0 (Keskin)", value: "0" },
+          { title: "0.3rem (Kompakt)", value: "0.3rem" },
+          { title: "0.5rem (Dengeli / Varsay\u0131lan)", value: "0.5rem" },
+          { title: "0.75rem (Yuvarlak)", value: "0.75rem" },
+          { title: "1.0rem (Geni\u015F)", value: "1.0rem" }
+        ],
+        initial: 2
+      }
+    ];
+    if (!detectedCss) {
+      questions.push({
+        type: "text",
+        name: "cssFile",
+        message: "Global CSS dosyan\u0131z bulunamad\u0131. L\xFCtfen dosya yolunu girin:",
+        initial: cssFile
+      });
+    }
+    const response = await prompts(questions);
+    if (!response.theme) {
+      logger.warn("Kurulum iptal edildi.");
+      process.exit(0);
+    }
+    theme = response.theme;
+    radius = response.radius;
+    if (response.cssFile) {
+      cssFile = response.cssFile;
+    }
+  }
+  const spinner = ora("Proje yap\u0131land\u0131r\u0131l\u0131yor...").start();
+  try {
+    const config = {
+      $schema: "https://alexourus-ui.dev/schema.json",
+      style: "default",
+      tailwind: {
+        config: "tailwind.config.js",
+        css: cssFile,
+        baseColor: theme,
+        cssVariables: true,
+        prefix: ""
+      },
+      aliases: {
+        components: componentsDir.replace("/ui", ""),
+        utils: utilsFile.replace(/\.ts$/, ""),
+        ui: componentsDir
+      }
+    };
+    await fs2.writeJSON(path2.join(cwd, "components.json"), config, { spaces: 2 });
+    spinner.succeed("components.json olu\u015Fturuldu");
+    const utilsPath = path2.join(cwd, utilsFile);
+    await fs2.ensureDir(path2.dirname(utilsPath));
+    await fs2.writeFile(utilsPath, UTILS_TEMPLATE, "utf-8");
+    logger.success(`${utilsFile} olu\u015Fturuldu.`);
+    const cssPath = path2.join(cwd, cssFile);
+    await fs2.ensureDir(path2.dirname(cssPath));
+    if (!await fs2.pathExists(cssPath)) {
+      await fs2.writeFile(cssPath, getCssVariables(theme, radius), "utf-8");
+      logger.success(`${cssFile} olu\u015Fturuldu.`);
+    }
+    const installSpinner = ora(`Temel ba\u011F\u0131ml\u0131l\u0131klar y\xFCkleniyor (${pm})...`).start();
+    const coreDeps = ["clsx", "tailwind-merge", "lucide-react", "class-variance-authority", "tailwindcss-animate"];
+    try {
+      const isDev = false;
+      const cmdParts = getInstallCommand(pm, isDev).split(" ");
+      const [cmd, ...args] = cmdParts;
+      if (cmd) {
+        await execa(cmd, [...args, ...coreDeps], { cwd });
+      }
+      installSpinner.succeed("Ba\u011F\u0131ml\u0131l\u0131klar ba\u015Far\u0131yla y\xFCklendi.");
+    } catch {
+      installSpinner.warn("Ba\u011F\u0131ml\u0131l\u0131klar otomatik y\xFCklenemedi, l\xFCtfen elle \xE7al\u0131\u015Ft\u0131r\u0131n:");
+      console.log(`  ${getInstallCommand(pm)} ${coreDeps.join(" ")}`);
+    }
+    logger.break();
+    logger.success("alexourus-ui ba\u015Far\u0131yla kuruldu ve yap\u0131land\u0131r\u0131ld\u0131! \u{1F389}");
+    logger.break();
+    console.log("  Bile\u015Fen eklemek i\xE7in:");
+    console.log(`  $ npx @alexourus/cli add button alert input-otp`);
+    console.log();
+  } catch (error) {
+    spinner.fail("Kurulum s\u0131ras\u0131nda bir hata olu\u015Ftu.");
+    console.error(error);
+    process.exit(1);
+  }
+}
+
+// src/commands/add.ts
+import path3 from "path";
+import fs3 from "fs-extra";
+import prompts2 from "prompts";
+import ora2 from "ora";
+import { execa as execa2 } from "execa";
+
+// src/registry/index.ts
+var REGISTRY = {
+  button: {
+    name: "button",
+    type: "components:ui",
+    category: "temel",
+    description: "6 varyant, 4 boyut ve loading durumlu buton bile\u015Feni",
+    dependencies: ["@radix-ui/react-slot", "class-variance-authority", "lucide-react"],
+    devDependencies: [],
+    registryDependencies: [],
+    files: [
+      {
+        name: "button.tsx",
+        content: `"use client";
+
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import { Loader2 } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+export const buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-lg text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 select-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground shadow hover:bg-primary/90 active:scale-[0.98]",
+        destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90 active:scale-[0.98]",
+        outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground active:scale-[0.98]",
+        secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80 active:scale-[0.98]",
+        ghost: "hover:bg-accent hover:text-accent-foreground active:scale-[0.98]",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8 text-base",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+  loading?: boolean;
+}
+
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, loading = false, disabled, children, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        disabled={disabled || loading}
+        {...props}
+      >
+        {loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+        {children}
+      </Comp>
+    );
+  }
+);
+Button.displayName = "Button";
+`
+      }
+    ]
+  },
+  badge: {
+    name: "badge",
+    type: "components:ui",
+    category: "temel",
+    description: "Durum ve etiket rozetleri (success, warning, destructive, info, dot)",
+    dependencies: ["class-variance-authority"],
+    devDependencies: [],
+    registryDependencies: [],
+    files: [
+      {
+        name: "badge.tsx",
+        content: `"use client";
+
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+
+export const badgeVariants = cva(
+  "inline-flex items-center gap-1.5 rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive: "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+        outline: "text-foreground border-border",
+        success: "border-transparent bg-success text-success-foreground shadow hover:bg-success/80",
+        warning: "border-transparent bg-warning text-warning-foreground shadow hover:bg-warning/80",
+        info: "border-transparent bg-info text-info-foreground shadow hover:bg-info/80",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {
+  dot?: boolean;
+}
+
+export function Badge({ className, variant, dot = false, children, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props}>
+      {dot && <span className="h-1.5 w-1.5 rounded-full bg-current" />}
+      {children}
+    </div>
+  );
+}
+`
+      }
+    ]
+  },
+  card: {
+    name: "card",
+    type: "components:ui",
+    category: "temel",
+    description: "Header, Content ve Footer b\xF6l\xFCml\xFC kutu konteyner bile\u015Feni",
+    dependencies: [],
+    devDependencies: [],
+    registryDependencies: [],
+    files: [
+      {
+        name: "card.tsx",
+        content: `"use client";
+
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("rounded-2xl border border-border bg-card text-card-foreground shadow-subtle", className)} {...props} />
+  )
+);
+Card.displayName = "Card";
+
+export const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
+  )
+);
+CardHeader.displayName = "CardHeader";
+
+export const CardTitle = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h3 ref={ref} className={cn("text-lg font-semibold leading-none tracking-tight", className)} {...props} />
+  )
+);
+CardTitle.displayName = "CardTitle";
+
+export const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => (
+    <p ref={ref} className={cn("text-xs text-muted-foreground", className)} {...props} />
+  )
+);
+CardDescription.displayName = "CardDescription";
+
+export const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+  )
+);
+CardContent.displayName = "CardContent";
+
+export const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("flex items-center p-6 pt-0", className)} {...props} />
+  )
+);
+CardFooter.displayName = "CardFooter";
+`
+      }
+    ]
+  },
+  dialog: {
+    name: "dialog",
+    type: "components:ui",
+    category: "overlay",
+    description: "Eri\u015Filebilir modal diyalog penceresi",
+    dependencies: ["@radix-ui/react-dialog", "lucide-react"],
+    devDependencies: [],
+    registryDependencies: [],
+    files: [
+      {
+        name: "dialog.tsx",
+        content: `"use client";
+
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+export const Dialog = DialogPrimitive.Root;
+export const DialogTrigger = DialogPrimitive.Trigger;
+export const DialogPortal = DialogPrimitive.Portal;
+export const DialogClose = DialogPrimitive.Close;
+
+export const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-black/60 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+  />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+export const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-background p-6 shadow-overlay duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-2xl",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Kapat</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+export const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)} {...props} />
+);
+DialogHeader.displayName = "DialogHeader";
+
+export const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)} {...props} />
+);
+DialogFooter.displayName = "DialogFooter";
+
+export const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title ref={ref} className={cn("text-lg font-semibold leading-none tracking-tight", className)} {...props} />
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+export const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description ref={ref} className={cn("text-xs text-muted-foreground", className)} {...props} />
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+`
+      }
+    ]
+  },
+  toast: {
+    name: "toast",
+    type: "components:ui",
+    category: "feedback",
+    description: "Sonner tabanl\u0131 modern bildirim ve toaster sistemi",
+    dependencies: ["sonner"],
+    devDependencies: [],
+    registryDependencies: [],
+    files: [
+      {
+        name: "toast.tsx",
+        content: `"use client";
+
+import { Toaster as Sonner, toast } from "sonner";
+
+type ToasterProps = React.ComponentProps<typeof Sonner>;
+
+export const Toaster = ({ ...props }: ToasterProps) => {
+  return (
+    <Sonner
+      className="toaster group"
+      toastOptions={{
+        classNames: {
+          toast:
+            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg group-[.toaster]:rounded-xl",
+          description: "group-[.toast]:text-muted-foreground",
+          actionButton:
+            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+          cancelButton:
+            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+        },
+      }}
+      {...props}
+    />
+  );
+};
+
+export { toast };
+`
+      }
+    ]
+  },
+  alert: {
+    name: "alert",
+    type: "components:ui",
+    category: "feedback",
+    description: "Farkl\u0131 \xF6nem derecelerine g\xF6re renk ve ikonlu bildirim kutusu",
+    dependencies: ["class-variance-authority"],
+    devDependencies: [],
+    registryDependencies: [],
+    files: [
+      {
+        name: "alert.tsx",
+        content: `"use client";
+
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+
+export const alertVariants = cva(
+  "relative w-full rounded-xl border p-4 text-sm [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground border-border",
+        info: "bg-info/10 text-info border-info/30 [&>svg]:text-info",
+        success: "bg-success/10 text-success border-success/30 [&>svg]:text-success",
+        warning: "bg-warning/10 text-warning border-warning/30 [&>svg]:text-warning",
+        destructive: "bg-destructive/10 text-destructive border-destructive/30 [&>svg]:text-destructive",
+        outline: "bg-transparent text-foreground border-border",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+
+export interface AlertProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof alertVariants> {}
+
+export const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
+  ({ className, variant, ...props }, ref) => (
+    <div
+      ref={ref}
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  )
+);
+Alert.displayName = "Alert";
+
+export const AlertTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h5
+    ref={ref}
+    className={cn("mb-1 font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+));
+AlertTitle.displayName = "AlertTitle";
+
+export const AlertDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-xs leading-relaxed opacity-90", className)}
+    {...props}
+  />
+));
+AlertDescription.displayName = "AlertDescription";
+`
+      }
+    ]
+  },
+  "input-otp": {
+    name: "input-otp",
+    type: "components:ui",
+    category: "form",
+    description: "2FA ve SMS do\u011Frulama i\xE7in b\xF6l\xFCmlenmi\u015F PIN/OTP giri\u015F bile\u015Feni",
+    dependencies: ["input-otp"],
+    devDependencies: [],
+    registryDependencies: [],
+    files: [
+      {
+        name: "input-otp.tsx",
+        content: `"use client";
+
+import * as React from "react";
+import { OTPInput, OTPInputContext } from "input-otp";
+import { Minus } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+export type InputOTPProps = React.ComponentPropsWithoutRef<typeof OTPInput>;
+
+export const InputOTP = React.forwardRef<
+  React.ElementRef<typeof OTPInput>,
+  InputOTPProps
+>(({ className, containerClassName, ...props }, ref) => (
+  <OTPInput
+    ref={ref}
+    containerClassName={cn("flex items-center gap-2 has-disabled:opacity-50", containerClassName)}
+    className={cn("disabled:cursor-not-allowed", className)}
+    {...props}
+  />
+));
+InputOTP.displayName = "InputOTP";
+
+export const InputOTPGroup = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("flex items-center", className)} {...props} />
+));
+InputOTPGroup.displayName = "InputOTPGroup";
+
+export interface InputOTPSlotProps extends React.HTMLAttributes<HTMLDivElement> {
+  index: number;
+}
+
+export const InputOTPSlot = React.forwardRef<HTMLDivElement, InputOTPSlotProps>(
+  ({ index, className, ...props }, ref) => {
+    const inputOTPContext = React.useContext(OTPInputContext);
+    const { char, hasFakeCaret, isActive } = inputOTPContext?.slots?.[index] ?? {};
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "relative flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm font-semibold transition-all first:rounded-l-lg first:border-l last:rounded-r-lg",
+          isActive && "z-10 ring-2 ring-ring ring-offset-background",
+          className
+        )}
+        {...props}
+      >
+        {char}
+        {hasFakeCaret && (
+          <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+            <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+InputOTPSlot.displayName = "InputOTPSlot";
+
+export const InputOTPSeparator = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} role="separator" aria-hidden="true" className={cn("text-muted-foreground", className)} {...props}>
+    <Minus className="h-4 w-4" />
+  </div>
+));
+InputOTPSeparator.displayName = "InputOTPSeparator";
+`
+      }
+    ]
+  },
+  "stat-card": {
+    name: "stat-card",
+    type: "components:ui",
+    category: "temel",
+    description: "SaaS dashboard ve KPI panelleri i\xE7in trend ve ikonlu metrik kart\u0131",
+    dependencies: ["class-variance-authority", "lucide-react"],
+    devDependencies: [],
+    registryDependencies: ["card"],
+    files: [
+      {
+        name: "stat-card.tsx",
+        content: `"use client";
+
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { TrendingUp, TrendingDown, Minus } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+export const statCardVariants = cva(
+  "rounded-2xl border border-border bg-card p-5 text-card-foreground shadow-subtle transition-all duration-200 hover:border-border/80 hover:shadow-card",
+  {
+    variants: {
+      variant: {
+        default: "bg-card",
+        gradient: "bg-gradient-to-br from-card via-card/90 to-muted/30 border-border/70",
+        outline: "bg-transparent border-dashed",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+
+export interface StatCardProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof statCardVariants> {}
+
+export const StatCard = React.forwardRef<HTMLDivElement, StatCardProps>(
+  ({ className, variant, ...props }, ref) => (
+    <div ref={ref} className={cn(statCardVariants({ variant }), className)} {...props} />
+  )
+);
+StatCard.displayName = "StatCard";
+
+export const StatCardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("flex items-center justify-between gap-2 pb-2", className)} {...props} />
+  )
+);
+StatCardHeader.displayName = "StatCardHeader";
+
+export const StatCardTitle = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h3 ref={ref} className={cn("text-xs font-semibold text-muted-foreground uppercase tracking-wider", className)} {...props} />
+  )
+);
+StatCardTitle.displayName = "StatCardTitle";
+
+export const StatCardIcon = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("flex h-8 w-8 items-center justify-center rounded-xl bg-muted/60 text-foreground", className)} {...props} />
+  )
+);
+StatCardIcon.displayName = "StatCardIcon";
+
+export const StatCardValue = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("text-2xl font-bold tracking-tight text-foreground", className)} {...props} />
+  )
+);
+StatCardValue.displayName = "StatCardValue";
+
+export interface StatCardTrendProps extends React.HTMLAttributes<HTMLSpanElement> {
+  trend: "up" | "down" | "neutral";
+  value: string;
+}
+
+export const StatCardTrend = React.forwardRef<HTMLSpanElement, StatCardTrendProps>(
+  ({ trend, value, className, ...props }, ref) => {
+    return (
+      <span
+        ref={ref}
+        className={cn(
+          "inline-flex items-center gap-1 text-xs font-semibold rounded-md px-1.5 py-0.5",
+          trend === "up" && "bg-success/10 text-success",
+          trend === "down" && "bg-destructive/10 text-destructive",
+          trend === "neutral" && "bg-muted text-muted-foreground",
+          className
+        )}
+        {...props}
+      >
+        {trend === "up" && <TrendingUp className="h-3 w-3" />}
+        {trend === "down" && <TrendingDown className="h-3 w-3" />}
+        {trend === "neutral" && <Minus className="h-3 w-3" />}
+        {value}
+      </span>
+    );
+  }
+);
+StatCardTrend.displayName = "StatCardTrend";
+
+export const StatCardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => (
+    <p ref={ref} className={cn("flex items-center gap-2 pt-2 text-xs text-muted-foreground", className)} {...props} />
+  )
+);
+StatCardDescription.displayName = "StatCardDescription";
+`
+      }
+    ]
+  },
+  rating: {
+    name: "rating",
+    type: "components:ui",
+    category: "form",
+    description: "Hover, klavye ve salt okunur mod destekli y\u0131ld\u0131zl\u0131 puanlama bile\u015Feni",
+    dependencies: ["class-variance-authority", "lucide-react"],
+    devDependencies: [],
+    registryDependencies: [],
+    files: [
+      {
+        name: "rating.tsx",
+        content: `"use client";
+
+import * as React from "react";
+import { Star } from "lucide-react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+
+export const ratingVariants = cva("inline-flex items-center gap-1", {
+  variants: {
+    size: {
+      sm: "[&_svg]:h-3.5 [&_svg]:w-3.5",
+      md: "[&_svg]:h-4 [&_svg]:w-4",
+      lg: "[&_svg]:h-5 [&_svg]:w-5",
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
+});
+
+export interface RatingProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange">,
+    VariantProps<typeof ratingVariants> {
+  value?: number;
+  defaultValue?: number;
+  max?: number;
+  readOnly?: boolean;
+  disabled?: boolean;
+  onChange?: (value: number) => void;
+}
+
+export const Rating = React.forwardRef<HTMLDivElement, RatingProps>(
+  (
+    {
+      value: controlledValue,
+      defaultValue = 0,
+      max = 5,
+      readOnly = false,
+      disabled = false,
+      size,
+      className,
+      onChange,
+      ...props
+    },
+    ref
+  ) => {
+    const [internalValue, setInternalValue] = React.useState(defaultValue);
+    const [hoverValue, setHoverValue] = React.useState<number | null>(null);
+
+    const isControlled = controlledValue !== undefined;
+    const currentValue = isControlled ? controlledValue : internalValue;
+
+    const handleClick = (index: number) => {
+      if (readOnly || disabled) return;
+      if (!isControlled) setInternalValue(index);
+      onChange?.(index);
+    };
+
+    return (
+      <div
+        ref={ref}
+        role="slider"
+        aria-valuenow={currentValue}
+        aria-valuemin={0}
+        aria-valuemax={max}
+        aria-label="De\u011Ferlendirme Puan\u0131"
+        tabIndex={readOnly || disabled ? -1 : 0}
+        className={cn(ratingVariants({ size }), disabled && "opacity-50 cursor-not-allowed", className)}
+        {...props}
+      >
+        {Array.from({ length: max }).map((_, i) => {
+          const ratingIndex = i + 1;
+          const isFilled = (hoverValue ?? currentValue) >= ratingIndex;
+          return (
+            <span
+              key={i}
+              onClick={() => handleClick(ratingIndex)}
+              onMouseEnter={() => !readOnly && !disabled && setHoverValue(ratingIndex)}
+              onMouseLeave={() => !readOnly && !disabled && setHoverValue(null)}
+              className={cn("transition-colors", !readOnly && !disabled && "cursor-pointer hover:scale-110")}
+            >
+              <Star
+                className={cn(
+                  "transition-colors",
+                  isFilled ? "fill-amber-400 text-amber-400" : "fill-transparent text-muted-foreground/40"
+                )}
+              />
+            </span>
+          );
+        })}
+      </div>
+    );
+  }
+);
+Rating.displayName = "Rating";
+`
+      }
+    ]
+  },
+  "pricing-table": {
+    name: "pricing-table",
+    type: "components:block",
+    category: "bloklar",
+    description: "Ayl\u0131k/Y\u0131ll\u0131k indirim d\xF6ng\xFCl\xFC, pop\xFCler rozetli ve \xF6zellik listeli SaaS fiyat tablosu",
+    dependencies: ["lucide-react", "@radix-ui/react-switch"],
+    devDependencies: [],
+    registryDependencies: ["button", "badge", "switch"],
+    files: [
+      {
+        name: "pricing-table.tsx",
+        content: `"use client";
+
+import * as React from "react";
+import { Check, X, Sparkles } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+export interface PricingFeature {
+  text: string;
+  included: boolean;
+}
+
+export interface PricingPlan {
+  id: string;
+  name: string;
+  description: string;
+  priceMonthly: number;
+  priceYearly: number;
+  currency?: string;
+  isPopular?: boolean;
+  popularBadge?: string;
+  features: PricingFeature[];
+  ctaText?: string;
+  ctaVariant?: "default" | "secondary" | "outline";
+}
+
+export interface PricingTableProps extends React.HTMLAttributes<HTMLDivElement> {
+  plans: PricingPlan[];
+  onPlanSelect?: (planId: string, billingCycle: "monthly" | "yearly") => void;
+  yearlyDiscountLabel?: string;
+}
+
+export function PricingTable({
+  plans,
+  onPlanSelect,
+  yearlyDiscountLabel = "%20 \u0130ndirim",
+  className,
+  ...props
+}: PricingTableProps) {
+  const [cycle, setCycle] = React.useState<"monthly" | "yearly">("monthly");
+
+  return (
+    <div className={cn("w-full space-y-8", className)} {...props}>
+      {/* Billing Switcher */}
+      <div className="flex items-center justify-center gap-3">
+        <span className={cn("text-xs font-semibold transition-colors", cycle === "monthly" ? "text-foreground" : "text-muted-foreground")}>
+          Ayl\u0131k
+        </span>
+        <button
+          type="button"
+          role="switch"
+          aria-checked={cycle === "yearly"}
+          onClick={() => setCycle((c) => (c === "monthly" ? "yearly" : "monthly"))}
+          className={cn(
+            "relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            cycle === "yearly" ? "bg-primary" : "bg-muted"
+          )}
+        >
+          <span
+            className={cn(
+              "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform",
+              cycle === "yearly" ? "translate-x-5" : "translate-x-0"
+            )}
+          />
+        </button>
+        <span className={cn("text-xs font-semibold flex items-center gap-1.5 transition-colors", cycle === "yearly" ? "text-foreground" : "text-muted-foreground")}>
+          Y\u0131ll\u0131k
+          <span className="rounded-full bg-success/15 px-2 py-0.5 text-[10px] font-bold text-success">
+            {yearlyDiscountLabel}
+          </span>
+        </span>
+      </div>
+
+      {/* Plans Matrix */}
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+        {plans.map((plan) => {
+          const price = cycle === "monthly" ? plan.priceMonthly : plan.priceYearly;
+          const currency = plan.currency || "\u20BA";
+
+          return (
+            <div
+              key={plan.id}
+              className={cn(
+                "relative flex flex-col rounded-2xl border p-6 transition-all duration-200",
+                plan.isPopular
+                  ? "border-primary bg-card shadow-lg ring-2 ring-primary/20"
+                  : "border-border bg-card/60 hover:border-border/80"
+              )}
+            >
+              {plan.isPopular && (
+                <div className="absolute -top-3.5 left-1/2 -translate-x-1/2 flex items-center gap-1 rounded-full bg-primary px-3 py-1 text-[11px] font-bold text-primary-foreground shadow-sm">
+                  <Sparkles className="h-3 w-3" />
+                  {plan.popularBadge || "En \xC7ok Tercih Edilen"}
+                </div>
+              )}
+
+              <div className="space-y-2 mb-6">
+                <h4 className="text-lg font-bold">{plan.name}</h4>
+                <p className="text-xs text-muted-foreground min-h-[32px]">{plan.description}</p>
+              </div>
+
+              <div className="mb-6 flex items-baseline gap-1">
+                <span className="text-3xl font-extrabold">{currency}{price}</span>
+                <span className="text-xs text-muted-foreground">/{cycle === "monthly" ? "ay" : "y\u0131l"}</span>
+              </div>
+
+              <button
+                type="button"
+                onClick={() => onPlanSelect?.(plan.id, cycle)}
+                className={cn(
+                  "w-full h-10 rounded-xl font-semibold text-xs transition-all shadow-sm mb-6",
+                  plan.ctaVariant === "outline"
+                    ? "border border-border bg-transparent hover:bg-muted text-foreground"
+                    : "bg-primary text-primary-foreground hover:bg-primary/90"
+                )}
+              >
+                {plan.ctaText || "Ba\u015Flay\u0131n"}
+              </button>
+
+              <div className="space-y-3 flex-1">
+                <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Dahil \xD6zellikler</p>
+                {plan.features.map((feature, i) => (
+                  <div key={i} className="flex items-center gap-2.5 text-xs">
+                    {feature.included ? (
+                      <Check className="h-4 w-4 text-success shrink-0" />
+                    ) : (
+                      <X className="h-4 w-4 text-muted-foreground/50 shrink-0" />
+                    )}
+                    <span className={feature.included ? "text-foreground" : "text-muted-foreground line-through"}>
+                      {feature.text}
+                    </span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+`
+      }
+    ]
+  },
+  "auth-card": {
+    name: "auth-card",
+    type: "components:block",
+    category: "bloklar",
+    description: "Giri\u015F, Kay\u0131t, \u015Eifremi Unuttum ve Sosyal Giri\u015F destekli kimlik do\u011Frulama kart\u0131",
+    dependencies: ["lucide-react"],
+    devDependencies: [],
+    registryDependencies: ["button", "input", "label", "checkbox"],
+    files: [
+      {
+        name: "auth-card.tsx",
+        content: `"use client";
+
+import * as React from "react";
+import { Lock, Mail, User, Eye, EyeOff, Loader2 } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+export type AuthMode = "login" | "register" | "forgot-password";
+
+export interface AuthCardProps {
+  initialMode?: AuthMode;
+  onLogin?: (data: { email: string; password: string; rememberMe?: boolean }) => void | Promise<void>;
+  onRegister?: (data: { name: string; email: string; password: string }) => void | Promise<void>;
+  onForgotPassword?: (email: string) => void | Promise<void>;
+  onSocialLogin?: (provider: "github" | "google") => void;
+  className?: string;
+}
+
+export function AuthCard({
+  initialMode = "login",
+  onLogin,
+  onRegister,
+  onForgotPassword,
+  onSocialLogin,
+  className,
+}: AuthCardProps) {
+  const [mode, setMode] = React.useState<AuthMode>(initialMode);
+  const [name, setName] = React.useState("");
+  const [email, setEmail] = React.useState("");
+  const [password, setPassword] = React.useState("");
+  const [rememberMe, setRememberMe] = React.useState(false);
+  const [showPassword, setShowPassword] = React.useState(false);
+  const [loading, setLoading] = React.useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    try {
+      if (mode === "login") {
+        await onLogin?.({ email, password, rememberMe });
+      } else if (mode === "register") {
+        await onRegister?.({ name, email, password });
+      } else {
+        await onForgotPassword?.(email);
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className={cn("w-full max-w-md mx-auto rounded-2xl border border-border bg-card p-8 shadow-card", className)}>
+      <div className="text-center space-y-2 mb-6">
+        <h3 className="text-xl font-bold tracking-tight">
+          {mode === "login" && "Tekrar Ho\u015F Geldiniz"}
+          {mode === "register" && "Hesap Olu\u015Fturun"}
+          {mode === "forgot-password" && "\u015Eifrenizi S\u0131f\u0131rlay\u0131n"}
+        </h3>
+        <p className="text-xs text-muted-foreground">
+          {mode === "login" && "Devam etmek i\xE7in bilgilerinizi girin"}
+          {mode === "register" && "Saniyeler i\xE7inde aram\u0131za kat\u0131l\u0131n"}
+          {mode === "forgot-password" && "E-posta adresinize s\u0131f\u0131rlama linki g\xF6nderece\u011Fiz"}
+        </p>
+      </div>
+
+      <form onSubmit={handleSubmit} className="space-y-4">
+        {mode === "register" && (
+          <div className="space-y-1.5">
+            <label className="text-xs font-semibold">Ad Soyad</label>
+            <div className="relative">
+              <User className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
+              <input
+                type="text"
+                required
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                placeholder="Ahmet Y\u0131lmaz"
+                className="w-full pl-9 pr-3 py-2 text-xs rounded-xl border border-border bg-background focus:outline-none focus:ring-2 focus:ring-ring"
+              />
+            </div>
+          </div>
+        )}
+
+        <div className="space-y-1.5">
+          <label className="text-xs font-semibold">E-posta</label>
+          <div className="relative">
+            <Mail className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
+            <input
+              type="email"
+              required
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              placeholder="ornek@alanadi.com"
+              className="w-full pl-9 pr-3 py-2 text-xs rounded-xl border border-border bg-background focus:outline-none focus:ring-2 focus:ring-ring"
+            />
+          </div>
+        </div>
+
+        {mode !== "forgot-password" && (
+          <div className="space-y-1.5">
+            <div className="flex items-center justify-between">
+              <label className="text-xs font-semibold">\u015Eifre</label>
+              {mode === "login" && (
+                <button
+                  type="button"
+                  onClick={() => setMode("forgot-password")}
+                  className="text-[11px] text-muted-foreground hover:text-foreground font-medium"
+                >
+                  \u015Eifremi Unuttum?
+                </button>
+              )}
+            </div>
+            <div className="relative">
+              <Lock className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
+              <input
+                type={showPassword ? "text" : "password"}
+                required
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                placeholder="\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022"
+                className="w-full pl-9 pr-10 py-2 text-xs rounded-xl border border-border bg-background focus:outline-none focus:ring-2 focus:ring-ring"
+              />
+              <button
+                type="button"
+                onClick={() => setShowPassword(!showPassword)}
+                className="absolute right-3 top-3 text-muted-foreground hover:text-foreground"
+              >
+                {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+              </button>
+            </div>
+          </div>
+        )}
+
+        <button
+          type="submit"
+          disabled={loading}
+          className="w-full h-10 rounded-xl bg-primary text-primary-foreground font-semibold text-xs flex items-center justify-center gap-2 hover:bg-primary/90 transition-all shadow-sm"
+        >
+          {loading && <Loader2 className="h-4 w-4 animate-spin" />}
+          {mode === "login" && "Giri\u015F Yap"}
+          {mode === "register" && "Kay\u0131t Ol"}
+          {mode === "forgot-password" && "S\u0131f\u0131rlama Ba\u011Flant\u0131s\u0131 G\xF6nder"}
+        </button>
+      </form>
+
+      <div className="mt-6 text-center text-xs text-muted-foreground">
+        {mode === "login" ? (
+          <p>
+            Hesab\u0131n\u0131z yok mu?{" "}
+            <button type="button" onClick={() => setMode("register")} className="font-semibold text-foreground hover:underline">
+              Kay\u0131t Olun
+            </button>
+          </p>
+        ) : (
+          <p>
+            Zaten hesab\u0131n\u0131z var m\u0131?{" "}
+            <button type="button" onClick={() => setMode("login")} className="font-semibold text-foreground hover:underline">
+              Giri\u015F Yap\u0131n
+            </button>
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}
+`
+      }
+    ]
+  }
+};
+
+// src/commands/add.ts
+async function runAdd(components, options) {
+  const cwd = options.cwd || process.cwd();
+  logger.banner();
+  let config = {
+    style: "default",
+    tailwind: {
+      config: "tailwind.config.js",
+      css: "app/globals.css",
+      baseColor: "zinc",
+      cssVariables: true,
+      prefix: ""
+    },
+    aliases: {
+      components: "@/components",
+      utils: "@/lib/utils",
+      ui: "@/components/ui"
+    }
+  };
+  const configPath = path3.join(cwd, "components.json");
+  if (await fs3.pathExists(configPath)) {
+    try {
+      config = await fs3.readJSON(configPath);
+    } catch {
+    }
+  }
+  let selectedComponents = [];
+  if (options.all) {
+    selectedComponents = Object.keys(REGISTRY);
+  } else if (components.length > 0) {
+    selectedComponents = components;
+  } else {
+    const choices = Object.entries(REGISTRY).map(([key, item]) => ({
+      title: `${item.name} (${item.category}) \u2014 ${item.description}`,
+      value: key
+    }));
+    const response = await prompts2({
+      type: "multiselect",
+      name: "components",
+      message: "Eklemek istedi\u011Finiz bile\u015Fenleri se\xE7in (Bo\u015Fluk tu\u015Fu ile se\xE7in):",
+      choices,
+      min: 1,
+      hint: "- Bo\u015Fluk tu\u015Fu ile se\xE7in, Enter ile onaylay\u0131n"
+    });
+    if (!response.components || response.components.length === 0) {
+      logger.warn("Hi\xE7bir bile\u015Fen se\xE7ilmedi.");
+      process.exit(0);
+    }
+    selectedComponents = response.components;
+  }
+  const spinner = ora2("Bile\u015Fenler y\xFCkleniyor...").start();
+  const dependenciesToInstall = /* @__PURE__ */ new Set();
+  const uiDir = path3.join(cwd, config.aliases.ui.replace(/^@\//, ""));
+  await fs3.ensureDir(uiDir);
+  for (const compName of selectedComponents) {
+    const registryItem = REGISTRY[compName];
+    if (!registryItem) {
+      logger.warn(`'${compName}' ad\u0131nda bir bile\u015Fen registry'de bulunamad\u0131.`);
+      continue;
+    }
+    for (const dep of registryItem.dependencies) {
+      dependenciesToInstall.add(dep);
+    }
+    for (const file of registryItem.files) {
+      const targetFilePath = path3.join(uiDir, file.name);
+      if (await fs3.pathExists(targetFilePath) && !options.overwrite) {
+        logger.item(file.name, "Mevcut dosya atland\u0131 (\xFCzerine yazmak i\xE7in --overwrite kullan\u0131n)");
+        continue;
+      }
+      await fs3.writeFile(targetFilePath, file.content, "utf-8");
+      logger.item(file.name, `-> ${path3.relative(cwd, targetFilePath)}`);
+    }
+  }
+  spinner.succeed("Bile\u015Fen dosyalar\u0131 projeye ba\u015Far\u0131yla eklendi.");
+  if (dependenciesToInstall.size > 0) {
+    const pm = await getPackageManager(cwd);
+    const installSpinner = ora2(`Ba\u011F\u0131ml\u0131l\u0131klar y\xFCkleniyor: ${Array.from(dependenciesToInstall).join(", ")}...`).start();
+    try {
+      const isDev = false;
+      const cmdParts = getInstallCommand(pm, isDev).split(" ");
+      const [cmd, ...args] = cmdParts;
+      if (cmd) {
+        await execa2(cmd, [...args, ...Array.from(dependenciesToInstall)], { cwd });
+      }
+      installSpinner.succeed("T\xFCm ba\u011F\u0131ml\u0131l\u0131klar ba\u015Far\u0131yla y\xFCklendi.");
+    } catch {
+      installSpinner.warn("Ba\u011F\u0131ml\u0131l\u0131klar otomatik y\xFCklenemedi. L\xFCtfen elle y\xFCkleyin:");
+      console.log(`  ${getInstallCommand(pm)} ${Array.from(dependenciesToInstall).join(" ")}`);
+    }
+  }
+  logger.break();
+  logger.success("Bile\u015Fenler kullan\u0131ma haz\u0131r! \u{1F680}");
+  logger.break();
+}
+
+// src/commands/list.ts
+import { bold as bold2, cyan as cyan2, dim as dim2, green as green2, magenta as magenta2, yellow as yellow2 } from "kolorist";
+async function runList() {
+  logger.banner();
+  console.log(bold2("  \u{1F4E6} Kullan\u0131labilir Bile\u015Fenler ve Bloklar:\n"));
+  const categories = {
+    temel: [],
+    form: [],
+    feedback: [],
+    overlay: [],
+    navigation: [],
+    bloklar: []
+  };
+  for (const [key, item] of Object.entries(REGISTRY)) {
+    const list = categories[item.category];
+    if (list) {
+      list.push(key);
+    } else {
+      categories.temel?.push(key);
+    }
+  }
+  const categoryTitles = {
+    temel: "Temel Bile\u015Fenler (Core / Base)",
+    form: "Form & Girdi Bile\u015Fenleri (Forms & Inputs)",
+    feedback: "Geri Bildirim & Durum (Feedback & Status)",
+    overlay: "A\xE7\u0131l\u0131r Pencereler & Katmanlar (Overlays & Dialogs)",
+    navigation: "Navigasyon & D\xFCzen (Navigation & Layout)",
+    bloklar: "Haz\u0131r SaaS Bloklar\u0131 (Composite Blocks)"
+  };
+  for (const [cat, compKeys] of Object.entries(categories)) {
+    if (compKeys.length === 0) continue;
+    console.log(`  ${magenta2("\u25CF")} ${bold2(categoryTitles[cat] || cat)}`);
+    for (const key of compKeys) {
+      const item = REGISTRY[key];
+      console.log(
+        `    ${cyan2("\u2022")} ${bold2(item.name.padEnd(16))} ${dim2(item.description)}`
+      );
+      if (item.dependencies.length > 0) {
+        console.log(
+          `      ${dim2("deps:")} ${green2(item.dependencies.join(", "))}`
+        );
+      }
+    }
+    console.log();
+  }
+  console.log(
+    dim2("  Bir bile\u015Feni eklemek i\xE7in:") + bold2(yellow2(" npx @alexourus/cli add <bile\u015Fen-ad\u0131>"))
+  );
+  console.log();
+}
+
+// src/index.ts
+var program = new Command();
+program.name("alexourus-ui").description("alexourus-ui \u2014 Modern React ve Tailwind bile\u015Fen k\xFCt\xFCphanesi CLI arac\u0131").version("0.3.2");
+program.command("init").description("Projenizde alexourus-ui yap\u0131land\u0131rmas\u0131n\u0131 ba\u015Flat\u0131n ve temel dosyalar\u0131 olu\u015Fturun").option("-y, --yes", "T\xFCm sorulara varsay\u0131lan yan\u0131tlar\u0131 vererek otomatik kur").option("-c, --cwd <cwd>", "\xC7al\u0131\u015Fma dizini", process.cwd()).action(async (opts) => {
+  await runInit(opts);
+});
+program.command("add [components...]").description("Projenize bir veya daha fazla alexourus-ui bile\u015Feni ekleyin").option("-a, --all", "T\xFCm bile\u015Fenleri ve bloklar\u0131 projeye ekle").option("-o, --overwrite", "Mevcut bile\u015Fen dosyalar\u0131n\u0131n \xFCzerine yaz").option("-c, --cwd <cwd>", "\xC7al\u0131\u015Fma dizini", process.cwd()).option("-y, --yes", "Onay istemeden do\u011Frudan kur").action(async (components, opts) => {
+  await runAdd(components, opts);
+});
+program.command("list").description("Kullan\u0131labilir t\xFCm alexourus-ui bile\u015Fenlerini ve bloklar\u0131n\u0131 listeler").action(async () => {
+  await runList();
+});
+program.parse(process.argv);