flikkui 0.2.0-beta.7 → 0.2.0-beta.8

package/dist/components/core/ProgressiveBlur/ProgressiveBlur.js

@@ -1,5 +1,4 @@
 import React__default, { useRef, useState, useMemo, useEffect } from 'react';
-import * as math from 'mathjs';
 
 const DEFAULT_CONFIG = {
     position: "bottom",
@@ -128,15 +127,15 @@ const ProgressiveBlurBase = (props) => {
             let blurValue;
             if (config.exponential) {
                 blurValue =
-                    Number(math.pow(2, progress * 4)) * 0.0625 * currentStrength;
+                    Math.pow(2, progress * 4) * 0.0625 * currentStrength;
             }
             else {
                 blurValue = 0.0625 * (progress * config.divCount + 1) * currentStrength;
             }
-            const p1 = math.round((increment * i - increment) * 10) / 10;
-            const p2 = math.round(increment * i * 10) / 10;
-            const p3 = math.round((increment * i + increment) * 10) / 10;
-            const p4 = math.round((increment * i + increment * 2) * 10) / 10;
+            const p1 = Math.round((increment * i - increment) * 10) / 10;
+            const p2 = Math.round(increment * i * 10) / 10;
+            const p3 = Math.round((increment * i + increment) * 10) / 10;
+            const p4 = Math.round((increment * i + increment * 2) * 10) / 10;
             let gradient = `transparent ${p1}%, black ${p2}%`;
             if (p3 <= 100)
                 gradient += `, black ${p3}%`;

package/package.json

@@ -1,14 +1,11 @@
 {
   "name": "flikkui",
-  "version": "0.2.0-beta.7",
+  "version": "0.2.0-beta.8",
   "description": "A modern React component library built with TypeScript, Tailwind CSS v4, and Framer Motion. Follows the shadcn philosophy with complete className override support.",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
-  "bin": {
-    "flikkui": "./dist/cli/index.js"
-  },
   "sideEffects": [
     "*.css",
     "*.scss",
@@ -138,12 +135,5 @@
     "tslib": "^2.8.1",
     "typescript": "^5.7.3",
     "eslint-plugin-storybook": "10.2.3"
-  },
-  "dependencies": {
-    "mathjs": "^15.1.0",
-    "commander": "^12.1.0",
-    "@inquirer/prompts": "^7.2.1",
-    "chalk": "^5.3.0",
-    "ora": "^8.1.1"
   }
 }

package/dist/cli/commands/init.d.ts

@@ -1,7 +0,0 @@
-interface InitOptions {
-    tailwind?: boolean;
-    yes?: boolean;
-    skipInstall?: boolean;
-}
-export declare function init(options: InitOptions): Promise<void>;
-export {};

package/dist/cli/commands/init.js

@@ -1,82 +0,0 @@
-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

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

package/dist/cli/index.js

@@ -1,17 +0,0 @@
-#!/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

@@ -1,9 +0,0 @@
-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

@@ -1,126 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,82 +0,0 @@
-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

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

package/dist/cli/utils/installDeps.js

@@ -1,44 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

@@ -1,98 +0,0 @@
-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 };