flikkui 0.1.0-beta.8 → 0.2.0-beta.1

package/dist/cli/commands/init.js

@@ -0,0 +1,82 @@
+import chalk from 'chalk';
+import ora from 'ora';
+import { confirm } from '@inquirer/prompts';
+import { detectProjectType } from '../utils/detectProject.js';
+import { injectCSSImport } from '../utils/injectCSS.js';
+import { setupTailwind } from '../utils/setupTailwind.js';
+import { installDependencies } from '../utils/installDeps.js';
+import { logger } from '../utils/logger.js';
+
+async function init(options) {
+    logger.welcome();
+    const spinner = ora();
+    try {
+        // Step 1: Detect project type
+        spinner.start('Detecting project type...');
+        const projectType = await detectProjectType();
+        spinner.succeed(`Detected: ${chalk.cyan(projectType.name)}`);
+        // Step 2: Ask user preferences (unless --yes flag)
+        let shouldSetupTailwind = options.tailwind || false;
+        let shouldInstallDeps = !options.skipInstall;
+        if (!options.yes) {
+            shouldInstallDeps = await confirm({
+                message: 'Install peer dependencies (recommended)?',
+                default: true,
+            });
+            shouldSetupTailwind = await confirm({
+                message: 'Set up Tailwind CSS integration?',
+                default: false,
+            });
+        }
+        // Step 3: Install dependencies
+        if (shouldInstallDeps) {
+            await installDependencies(projectType.packageManager, spinner);
+        }
+        else {
+            logger.info('Skipping dependency installation');
+            logger.info('You will need to install these manually:');
+            logger.info('npm install @heroicons/react clsx motion tailwind-merge tailwindcss react-markdown react-syntax-highlighter remark-gfm three');
+        }
+        // Step 4: Inject CSS import
+        spinner.start('Setting up CSS imports...');
+        const cssResult = await injectCSSImport(projectType);
+        if (cssResult.success) {
+            spinner.succeed(`Added CSS import to ${chalk.cyan(cssResult.file)}`);
+        }
+        else {
+            spinner.warn(cssResult.message || 'Could not auto-inject CSS import');
+            logger.manual(`Add this to your main app file (${projectType.entryFile}):`);
+            logger.code("import 'flikkui/styles.css'");
+        }
+        // Step 5: Setup Tailwind (optional)
+        if (shouldSetupTailwind) {
+            spinner.start('Setting up Tailwind CSS...');
+            const tailwindResult = await setupTailwind(projectType);
+            if (tailwindResult.success) {
+                spinner.succeed('Tailwind CSS configured');
+            }
+            else {
+                spinner.warn(tailwindResult.message || 'Could not auto-configure Tailwind');
+                logger.manual('Add this to your tailwind.config.js:');
+                logger.code("presets: [require('flikkui/tailwind.preset.cjs')]");
+            }
+        }
+        // Step 6: Success message
+        logger.success('\n✨ Flikkui has been initialized!');
+        logger.info('\nNext steps:');
+        logger.info('  1. Start your development server');
+        logger.info('  2. Import components: import { Button } from "flikkui"');
+        logger.info('  3. Use in your code: <Button variant="primary">Click me</Button>');
+        logger.info('\n📚 Documentation: https://flikkui.dev');
+        logger.info('🐛 Issues: https://github.com/yourusername/flikkui/issues\n');
+    }
+    catch (error) {
+        spinner.fail('Initialization failed');
+        if (error instanceof Error) {
+            logger.error(error.message);
+        }
+        process.exit(1);
+    }
+}
+
+export { init };

package/dist/cli/index.d.ts

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+export {};

package/dist/cli/index.js

@@ -0,0 +1,17 @@
+#!/usr/bin/env node
+import { Command } from 'commander';
+import { init } from './commands/init.js';
+
+const program = new Command();
+program
+    .name('flikkui')
+    .description('CLI tool for Flikkui - Modern React Component Library')
+    .version('0.1.0-beta.12');
+program
+    .command('init')
+    .description('Initialize Flikkui in your project')
+    .option('-t, --tailwind', 'Set up Tailwind CSS integration')
+    .option('-y, --yes', 'Skip prompts and use defaults')
+    .option('--skip-install', 'Skip installing dependencies')
+    .action(init);
+program.parse();

package/dist/cli/utils/detectProject.d.ts

@@ -0,0 +1,9 @@
+export interface ProjectInfo {
+    name: string;
+    type: 'nextjs' | 'vite' | 'cra' | 'remix' | 'unknown';
+    entryFile: string;
+    packageManager: 'npm' | 'yarn' | 'pnpm' | 'bun';
+    hasTypeScript: boolean;
+    tailwindConfigFile?: string;
+}
+export declare function detectProjectType(): Promise<ProjectInfo>;

package/dist/cli/utils/detectProject.js

@@ -0,0 +1,126 @@
+import { existsSync, readFileSync } from 'fs';
+import { join } from 'path';
+
+async function detectProjectType() {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const cwd = process.cwd();
+    // Detect package manager
+    let packageManager = 'npm';
+    if (existsSync(join(cwd, 'yarn.lock')))
+        packageManager = 'yarn';
+    else if (existsSync(join(cwd, 'pnpm-lock.yaml')))
+        packageManager = 'pnpm';
+    else if (existsSync(join(cwd, 'bun.lockb')))
+        packageManager = 'bun';
+    // Detect TypeScript
+    const hasTypeScript = existsSync(join(cwd, 'tsconfig.json'));
+    // Read package.json
+    let packageJson = {};
+    try {
+        const packageJsonPath = join(cwd, 'package.json');
+        if (existsSync(packageJsonPath)) {
+            packageJson = JSON.parse(readFileSync(packageJsonPath, 'utf-8'));
+        }
+    }
+    catch (error) {
+        // Ignore errors
+    }
+    // Detect Tailwind config
+    let tailwindConfigFile;
+    const tailwindExtensions = ['js', 'cjs', 'mjs', 'ts'];
+    for (const ext of tailwindExtensions) {
+        const configFile = `tailwind.config.${ext}`;
+        if (existsSync(join(cwd, configFile))) {
+            tailwindConfigFile = configFile;
+            break;
+        }
+    }
+    // Detect project type
+    let type = 'unknown';
+    let name = 'Unknown Project';
+    let entryFile = '';
+    // Next.js detection
+    if (((_a = packageJson.dependencies) === null || _a === void 0 ? void 0 : _a.next) || ((_b = packageJson.devDependencies) === null || _b === void 0 ? void 0 : _b.next)) {
+        type = 'nextjs';
+        name = 'Next.js';
+        // Check for App Router vs Pages Router
+        if (existsSync(join(cwd, 'app'))) {
+            entryFile = hasTypeScript ? 'app/layout.tsx' : 'app/layout.js';
+        }
+        else if (existsSync(join(cwd, 'src/app'))) {
+            entryFile = hasTypeScript ? 'src/app/layout.tsx' : 'src/app/layout.js';
+        }
+        else {
+            entryFile = hasTypeScript ? 'pages/_app.tsx' : 'pages/_app.js';
+        }
+    }
+    // Vite detection
+    else if (existsSync(join(cwd, 'vite.config.ts')) || existsSync(join(cwd, 'vite.config.js'))) {
+        type = 'vite';
+        name = 'Vite';
+        if (existsSync(join(cwd, 'src/main.tsx')))
+            entryFile = 'src/main.tsx';
+        else if (existsSync(join(cwd, 'src/main.ts')))
+            entryFile = 'src/main.ts';
+        else if (existsSync(join(cwd, 'src/index.tsx')))
+            entryFile = 'src/index.tsx';
+        else if (existsSync(join(cwd, 'src/index.ts')))
+            entryFile = 'src/index.ts';
+        else if (existsSync(join(cwd, 'src/App.tsx')))
+            entryFile = 'src/App.tsx';
+        else if (existsSync(join(cwd, 'src/App.jsx')))
+            entryFile = 'src/App.jsx';
+        else
+            entryFile = 'src/main.tsx';
+    }
+    // Remix detection
+    else if (((_c = packageJson.dependencies) === null || _c === void 0 ? void 0 : _c['@remix-run/react']) || ((_d = packageJson.devDependencies) === null || _d === void 0 ? void 0 : _d['@remix-run/react'])) {
+        type = 'remix';
+        name = 'Remix';
+        entryFile = hasTypeScript ? 'app/root.tsx' : 'app/root.jsx';
+    }
+    // Create React App detection
+    else if ((_e = packageJson.dependencies) === null || _e === void 0 ? void 0 : _e['react-scripts']) {
+        type = 'cra';
+        name = 'Create React App';
+        if (existsSync(join(cwd, 'src/index.tsx')))
+            entryFile = 'src/index.tsx';
+        else if (existsSync(join(cwd, 'src/index.js')))
+            entryFile = 'src/index.js';
+        else if (existsSync(join(cwd, 'src/App.tsx')))
+            entryFile = 'src/App.tsx';
+        else if (existsSync(join(cwd, 'src/App.jsx')))
+            entryFile = 'src/App.jsx';
+        else
+            entryFile = 'src/index.js';
+    }
+    // Generic React project
+    else if (((_f = packageJson.dependencies) === null || _f === void 0 ? void 0 : _f.react) || ((_g = packageJson.devDependencies) === null || _g === void 0 ? void 0 : _g.react)) {
+        type = 'unknown';
+        name = 'React Project';
+        // Try common entry files
+        const commonEntries = [
+            'src/index.tsx', 'src/index.ts', 'src/index.jsx', 'src/index.js',
+            'src/main.tsx', 'src/main.ts', 'src/main.jsx', 'src/main.js',
+            'src/App.tsx', 'src/App.jsx',
+        ];
+        for (const entry of commonEntries) {
+            if (existsSync(join(cwd, entry))) {
+                entryFile = entry;
+                break;
+            }
+        }
+        if (!entryFile)
+            entryFile = 'src/index.tsx';
+    }
+    return {
+        name,
+        type,
+        entryFile,
+        packageManager,
+        hasTypeScript,
+        tailwindConfigFile,
+    };
+}
+
+export { detectProjectType };

package/dist/cli/utils/injectCSS.d.ts

@@ -0,0 +1,8 @@
+import type { ProjectInfo } from './detectProject';
+interface InjectResult {
+    success: boolean;
+    file?: string;
+    message?: string;
+}
+export declare function injectCSSImport(projectInfo: ProjectInfo): Promise<InjectResult>;
+export {};

package/dist/cli/utils/injectCSS.js

@@ -0,0 +1,82 @@
+import { existsSync, readFileSync, writeFileSync } from 'fs';
+import { join } from 'path';
+
+async function injectCSSImport(projectInfo) {
+    const cwd = process.cwd();
+    const targetFile = join(cwd, projectInfo.entryFile);
+    // Check if file exists
+    if (!existsSync(targetFile)) {
+        return {
+            success: false,
+            message: `Entry file not found: ${projectInfo.entryFile}`,
+        };
+    }
+    try {
+        // Read the file
+        let content = readFileSync(targetFile, 'utf-8');
+        // Check if import already exists
+        if (content.includes("'flikkui/styles.css'") || content.includes('"flikkui/styles.css"')) {
+            return {
+                success: true,
+                file: projectInfo.entryFile,
+                message: 'CSS import already exists',
+            };
+        }
+        // Find the right place to inject
+        const importStatement = "import 'flikkui/styles.css';\n";
+        // For Next.js layout files
+        if (projectInfo.type === 'nextjs' && projectInfo.entryFile.includes('layout')) {
+            // Add after other imports but before the layout component
+            const lines = content.split('\n');
+            let lastImportIndex = -1;
+            for (let i = 0; i < lines.length; i++) {
+                if (lines[i].trim().startsWith('import ')) {
+                    lastImportIndex = i;
+                }
+            }
+            if (lastImportIndex !== -1) {
+                lines.splice(lastImportIndex + 1, 0, importStatement.trim());
+                content = lines.join('\n');
+            }
+            else {
+                // No imports found, add at the top
+                content = importStatement + content;
+            }
+        }
+        // For other project types
+        else {
+            // Find the last import statement
+            const importRegex = /^import\s+.*from\s+['"].*['"];?$/gm;
+            const imports = Array.from(content.matchAll(importRegex));
+            if (imports.length > 0) {
+                const lastImport = imports[imports.length - 1];
+                const lastImportIndex = lastImport.index + lastImport[0].length;
+                content = content.slice(0, lastImportIndex) + '\n' + importStatement + content.slice(lastImportIndex);
+            }
+            else {
+                // No imports found, add at the top (after any comments)
+                const firstCodeLine = content.search(/^(?!\/\/|\/\*|\s*$)/m);
+                if (firstCodeLine !== -1) {
+                    content = content.slice(0, firstCodeLine) + importStatement + '\n' + content.slice(firstCodeLine);
+                }
+                else {
+                    content = importStatement + content;
+                }
+            }
+        }
+        // Write the file back
+        writeFileSync(targetFile, content, 'utf-8');
+        return {
+            success: true,
+            file: projectInfo.entryFile,
+        };
+    }
+    catch (error) {
+        return {
+            success: false,
+            message: error instanceof Error ? error.message : 'Unknown error',
+        };
+    }
+}
+
+export { injectCSSImport };

package/dist/cli/utils/installDeps.d.ts

@@ -0,0 +1,2 @@
+import type { Ora } from 'ora';
+export declare function installDependencies(packageManager: 'npm' | 'yarn' | 'pnpm' | 'bun', spinner: Ora): Promise<void>;

package/dist/cli/utils/installDeps.js

@@ -0,0 +1,44 @@
+import { execSync } from 'child_process';
+
+const PEER_DEPENDENCIES = [
+    '@heroicons/react',
+    'clsx',
+    'motion',
+    'tailwind-merge',
+    'tailwindcss',
+    'react-markdown',
+    'react-syntax-highlighter',
+    'remark-gfm',
+    'three',
+];
+async function installDependencies(packageManager, spinner) {
+    const deps = PEER_DEPENDENCIES.join(' ');
+    let command;
+    switch (packageManager) {
+        case 'yarn':
+            command = `yarn add ${deps}`;
+            break;
+        case 'pnpm':
+            command = `pnpm add ${deps}`;
+            break;
+        case 'bun':
+            command = `bun add ${deps}`;
+            break;
+        default:
+            command = `npm install ${deps}`;
+    }
+    spinner.start(`Installing peer dependencies with ${packageManager}...`);
+    try {
+        execSync(command, {
+            stdio: 'pipe',
+            cwd: process.cwd(),
+        });
+        spinner.succeed('Peer dependencies installed');
+    }
+    catch (error) {
+        spinner.fail('Failed to install dependencies');
+        throw new Error(error instanceof Error ? error.message : 'Dependency installation failed');
+    }
+}
+
+export { installDependencies };

package/dist/cli/utils/logger.d.ts

@@ -0,0 +1,9 @@
+export declare const logger: {
+    welcome(): void;
+    success(message: string): void;
+    error(message: string): void;
+    info(message: string): void;
+    warn(message: string): void;
+    manual(message: string): void;
+    code(code: string): void;
+};

package/dist/cli/utils/logger.js

@@ -0,0 +1,35 @@
+import chalk from 'chalk';
+
+const logger = {
+    welcome() {
+        console.log();
+        console.log(chalk.bold.cyan('╔═══════════════════════════════════════╗'));
+        console.log(chalk.bold.cyan('║                                       ║'));
+        console.log(chalk.bold.cyan('║   ') + chalk.bold.white('Flikkui Initialization') + chalk.bold.cyan('        ║'));
+        console.log(chalk.bold.cyan('║   ') + chalk.gray('Modern React Component Library') + chalk.bold.cyan('  ║'));
+        console.log(chalk.bold.cyan('║                                       ║'));
+        console.log(chalk.bold.cyan('╚═══════════════════════════════════════╝'));
+        console.log();
+    },
+    success(message) {
+        console.log(chalk.green('✓ ') + message);
+    },
+    error(message) {
+        console.log(chalk.red('✗ ') + message);
+    },
+    info(message) {
+        console.log(chalk.blue('ℹ ') + message);
+    },
+    warn(message) {
+        console.log(chalk.yellow('⚠ ') + message);
+    },
+    manual(message) {
+        console.log(chalk.yellow('\n📝 Manual step required:'));
+        console.log(chalk.white('   ' + message));
+    },
+    code(code) {
+        console.log(chalk.bgGray.white('\n   ' + code + '\n'));
+    },
+};
+
+export { logger };

package/dist/cli/utils/setupTailwind.d.ts

@@ -0,0 +1,7 @@
+import type { ProjectInfo } from './detectProject';
+interface TailwindResult {
+    success: boolean;
+    message?: string;
+}
+export declare function setupTailwind(projectInfo: ProjectInfo): Promise<TailwindResult>;
+export {};

package/dist/cli/utils/setupTailwind.js

@@ -0,0 +1,98 @@
+import { readFileSync, writeFileSync } from 'fs';
+import { join } from 'path';
+
+async function setupTailwind(projectInfo) {
+    const cwd = process.cwd();
+    // Check if Tailwind config exists
+    if (!projectInfo.tailwindConfigFile) {
+        return {
+            success: false,
+            message: 'No Tailwind config file found. Create one first with: npx tailwindcss init',
+        };
+    }
+    const configPath = join(cwd, projectInfo.tailwindConfigFile);
+    try {
+        let content = readFileSync(configPath, 'utf-8');
+        // Check if preset already exists
+        if (content.includes('flikkui/tailwind.preset')) {
+            return {
+                success: true,
+                message: 'Tailwind preset already configured',
+            };
+        }
+        // Different strategies for different file types
+        if (projectInfo.tailwindConfigFile.endsWith('.ts')) {
+            // TypeScript config
+            content = updateTypeScriptConfig(content);
+        }
+        else {
+            // JavaScript/CommonJS config
+            content = updateJavaScriptConfig(content);
+        }
+        // Update content array to include flikkui
+        if (!content.includes('node_modules/flikkui')) {
+            content = addFlikkuiToContent(content);
+        }
+        // Write back
+        writeFileSync(configPath, content, 'utf-8');
+        return { success: true };
+    }
+    catch (error) {
+        return {
+            success: false,
+            message: error instanceof Error ? error.message : 'Unknown error',
+        };
+    }
+}
+function updateTypeScriptConfig(content) {
+    // Check if there's already a presets array
+    if (content.includes('presets:')) {
+        // Add to existing presets array
+        content = content.replace(/presets:\s*\[(.*?)\]/s, (match, presets) => {
+            if (!presets.trim()) {
+                return `presets: [require('flikkui/tailwind.preset.cjs')]`;
+            }
+            return `presets: [require('flikkui/tailwind.preset.cjs'), ${presets}]`;
+        });
+    }
+    else {
+        // Add presets array to config
+        content = content.replace(/(export default\s*{|module\.exports\s*=\s*{)/, `$1\n  presets: [require('flikkui/tailwind.preset.cjs')],`);
+    }
+    return content;
+}
+function updateJavaScriptConfig(content) {
+    // Check if there's already a presets array
+    if (content.includes('presets:')) {
+        // Add to existing presets array
+        content = content.replace(/presets:\s*\[(.*?)\]/s, (match, presets) => {
+            if (!presets.trim()) {
+                return `presets: [require('flikkui/tailwind.preset.cjs')]`;
+            }
+            return `presets: [require('flikkui/tailwind.preset.cjs'), ${presets}]`;
+        });
+    }
+    else {
+        // Add presets array to config
+        content = content.replace(/module\.exports\s*=\s*{/, `module.exports = {\n  presets: [require('flikkui/tailwind.preset.cjs')],`);
+    }
+    return content;
+}
+function addFlikkuiToContent(content) {
+    // Find the content array
+    const contentMatch = content.match(/content:\s*\[([\s\S]*?)\]/);
+    if (contentMatch) {
+        const contentArray = contentMatch[1];
+        const newContent = contentArray.trim()
+            ? `${contentArray.trim()}, './node_modules/flikkui/**/*.{js,ts,jsx,tsx}'`
+            : `'./node_modules/flikkui/**/*.{js,ts,jsx,tsx}'`;
+        content = content.replace(/content:\s*\[([\s\S]*?)\]/, `content: [${newContent}]`);
+    }
+    else {
+        // No content array found, add one
+        content = content.replace(/(export default\s*{|module\.exports\s*=\s*{)/, `$1\n  content: ['./node_modules/flikkui/**/*.{js,ts,jsx,tsx}'],`);
+    }
+    return content;
+}
+
+export { setupTailwind };

package/dist/components/ai/ApprovalCard/ApprovalCard.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { ApprovalCardProps } from "./ApprovalCard.types";
+export declare const ApprovalCard: React.FC<ApprovalCardProps>;

package/dist/components/ai/ApprovalCard/ApprovalCard.js

@@ -0,0 +1,42 @@
+import React__default from 'react';
+import { ExclamationTriangleIcon, ShieldCheckIcon, CheckCircleIcon } from '@heroicons/react/16/solid';
+import { approvalCardTheme } from './ApprovalCard.theme.js';
+import { Card } from '../../core/Card/Card.js';
+import { Badge } from '../../core/Badge/Badge.js';
+import { Button } from '../../core/Button/Button.js';
+import { AlertDialog } from '../../core/AlertDialog/AlertDialog.js';
+import { cn } from '../../../utils/cn.js';
+
+const ApprovalCard = ({ title, description, riskLevel = "medium", mode = "inline", onApprove, onDeny, children, isApproving = false, className, }) => {
+    // --- MODAL MODE ---
+    if (mode === "modal") {
+        return (React__default.createElement(AlertDialog, { trigger: React__default.createElement(Button, { variant: "outline", color: "neutral" }, "Review Approval"), title: title, icon: riskLevel === "critical" || riskLevel === "high" ? (React__default.createElement(ExclamationTriangleIcon, { className: "size-6 text-[var(--color-danger)]" })) : (React__default.createElement(ShieldCheckIcon, { className: "size-6 text-[var(--color-primary)]" })), description: description, footer: (close) => (React__default.createElement("div", { className: "flex gap-2 justify-end w-full" },
+                React__default.createElement(Button, { variant: "outline", color: "neutral", onClick: () => {
+                        onDeny();
+                        close();
+                    } }, "Deny"),
+                React__default.createElement(Button, { color: riskLevel === "critical" ? "danger" : "primary", state: isApproving ? "loading" : "default", onClick: () => {
+                        onApprove();
+                        close();
+                    } }, "Approve"))) }));
+    }
+    // --- INLINE MODE ---
+    const riskColor = approvalCardTheme.badgeColors[riskLevel];
+    const riskIcon = riskLevel === "critical" || riskLevel === "high" ? (React__default.createElement(ExclamationTriangleIcon, { className: "" })) : (React__default.createElement(CheckCircleIcon, { className: "" }));
+    return (React__default.createElement(Card, { className: cn(approvalCardTheme.baseStyle, approvalCardTheme.riskStyles[riskLevel], className) },
+        React__default.createElement(Card.Header, null,
+            React__default.createElement("div", { className: "flex flex-col items-start" },
+                React__default.createElement(Badge, { variant: "outline", color: riskColor, size: "sm", iconStart: riskIcon, className: "font-semibold shadow" },
+                    riskLevel.toUpperCase(),
+                    " RISK"))),
+        React__default.createElement(Card.Content, { className: "space-y-3" },
+            React__default.createElement("div", { className: "space-y-1" },
+                React__default.createElement(Card.Title, { className: "text-base" }, title),
+                description && (React__default.createElement("p", { className: "text-sm text-[var(--color-text-secondary)]" }, description))),
+            children && (React__default.createElement("div", { className: "bg-[var(--color-background-secondary)] rounded-md p-3 text-xs font-mono border border-[var(--color-border)] overflow-x-auto" }, children))),
+        React__default.createElement(Card.Footer, { className: "justify-end gap-2 mt-3" },
+            React__default.createElement(Button, { variant: "filled", color: "neutral", size: "sm", onClick: onDeny }, "Deny"),
+            React__default.createElement(Button, { color: riskColor, size: "sm", state: isApproving ? "loading" : "default", onClick: onApprove }, "Approve"))));
+};
+
+export { ApprovalCard };

package/dist/components/ai/ApprovalCard/ApprovalCard.theme.d.ts

@@ -0,0 +1,15 @@
+export declare const approvalCardTheme: {
+    baseStyle: string;
+    riskStyles: {
+        low: string;
+        medium: string;
+        high: string;
+        critical: string;
+    };
+    badgeColors: {
+        readonly low: "success";
+        readonly medium: "warning";
+        readonly high: "danger";
+        readonly critical: "danger";
+    };
+};

package/dist/components/ai/ApprovalCard/ApprovalCard.theme.js

@@ -0,0 +1,17 @@
+const approvalCardTheme = {
+    baseStyle: "glass-effect ",
+    riskStyles: {
+        low: "bg-[var(--color-success-50)]/40 border-[var(--color-border)]",
+        medium: "bg-[var(--color-warning-50)]/40 border-[var(--color-border)]",
+        high: "bg-[var(--color-danger-50)]/40 border-[var(--color-border)]",
+        critical: "bg-[var(--color-danger-50)]/40 border-[var(--color-border)]",
+    },
+    badgeColors: {
+        low: "success",
+        medium: "warning",
+        high: "danger",
+        critical: "danger",
+    },
+};
+
+export { approvalCardTheme };

package/dist/components/ai/ApprovalCard/ApprovalCard.types.d.ts

@@ -0,0 +1,43 @@
+import { ReactNode } from "react";
+export type ApprovalRiskLevel = "low" | "medium" | "high" | "critical";
+export type ApprovalMode = "inline" | "modal";
+export interface ApprovalCardProps {
+    /**
+     * Title of the approval request
+     */
+    title: string;
+    /**
+     * Description or context for the user
+     */
+    description?: string;
+    /**
+     * Risk level determining visual severity
+     * @default "medium"
+     */
+    riskLevel?: ApprovalRiskLevel;
+    /**
+     * Display mode: Inline card or Modal dialog
+     * @default "inline"
+     */
+    mode?: ApprovalMode;
+    /**
+     * Callback when user approves the action
+     */
+    onApprove: () => void;
+    /**
+     * Callback when user denies/cancels the action
+     */
+    onDeny: () => void;
+    /**
+     * Optional payload to display (e.g. code snippet, JSON)
+     */
+    children?: ReactNode;
+    /**
+     * Loading state for the approve button
+     */
+    isApproving?: boolean;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}

package/dist/components/ai/ApprovalCard/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./ApprovalCard";
+export * from "./ApprovalCard.types";