@alexandretav/aleui 1.0.0 → 1.1.2

package/README.md

@@ -1,122 +1,132 @@
-# ✨ Glassmorphism UI Library
+# ✨ AleUI - Glassmorphism Components
 
-A beautiful, modern React component library built with TypeScript and Tailwind CSS, featuring stunning glassmorphism and Frutiger Aero design styles.
+Beautiful, modern React components with glassmorphism and Frutiger Aero design. Copy components directly to your project - no bloat, full control.
 
-![Version](https://img.shields.io/badge/version-1.0.0-blue)
+![Version](https://img.shields.io/badge/version-1.1.0-blue)
 ![License](https://img.shields.io/badge/license-MIT-green)
 ![TypeScript](https://img.shields.io/badge/TypeScript-5.0-blue)
 ![React](https://img.shields.io/badge/React-18-blue)
 
 ## 🎨 Features
 
-- ✨ **Beautiful Glassmorphism Design**: Modern, translucent UI components with backdrop blur effects
-- 🌊 **Frutiger Aero Style**: Nostalgic 2000s aesthetic with aquatic gradients
-- 📘 **TypeScript Support**: Full type safety and IntelliSense support
-- 🎨 **Tailwind CSS**: Utility-first CSS framework for easy customization
-- 🎭 **Multiple Variants**: Light, Medium, Dark, and Colored variants for each component
-- 📱 **Responsive**: Mobile-first design that works on all screen sizes
-- 🔧 **Customizable**: Easy to extend and customize with your own styles
-- ⚡ **Framer Motion**: Smooth animations and interactions
+- ✨ **Copy, Don't Install**: Components are copied to your project, not bundled
+- 🌊 **Glassmorphism & Frutiger Aero**: Modern glass effects + nostalgic 2000s aesthetic
+- 📘 **TypeScript**: Full type safety and IntelliSense
+- 🎨 **Tailwind CSS**: Utility-first styling
+- 🎭 **4 Variants**: Light, Medium, Dark, and Colored for each component
+- 📱 **Responsive**: Mobile-first design
+- 🔧 **Full Control**: Edit components directly in your codebase
+- ⚡ **Framer Motion**: Smooth animations
 
 ## 📦 Components
 
-- **Button**: Interactive buttons with glassmorphism effects
-- **Card**: Container components with customizable variants
-- **Input**: Form input fields with labels and validation
-- **Modal**: Dialog components with backdrop blur
-- **Accordion**: Collapsible content panels
-- **AeroBubble**: Decorative bubble elements with Frutiger Aero style
+### Glassmorphism Components
+- **Button** - Interactive buttons with glass effects
+- **Card** - Container components with blur
+- **Input** - Form fields with labels
+- **Modal** - Dialog with backdrop blur
+- **Accordion** - Collapsible panels
 
-## 🚀 Quick Start
-
-### Installation
+### Frutiger Aero Components
+- **AeroButton** - Aquatic gradient buttons
+- **AeroCard** - Cards with aero styling
+- **AeroInput** - Inputs with aero theme
+- **AeroBubble** - Decorative bubble elements
 
-```bash
-npm install glassmorphism-ui
-# or
-yarn add glassmorphism-ui
-# or
-pnpm add glassmorphism-ui
-```
+## 🚀 Quick Start
 
-### Setup Tailwind CSS
+### 1. Setup Tailwind CSS
 
-This library requires Tailwind CSS. Configure your `tailwind.config.js`:
+Add to your `tailwind.config.js`:
 
 ```js
 module.exports = {
   content: [
     "./src/**/*.{js,ts,jsx,tsx}",
-    "./node_modules/glassmorphism-ui/**/*.{js,ts,jsx,tsx}", // Add this line
   ],
   theme: {
     extend: {
-      colors: {
-        aero: {
-          sky: '#87CEEB',
-          aqua: '#00CED1',
-          cyan: '#00E5FF',
-          mint: '#98FF98',
-          lime: '#BFFF00',
-          white: '#F0F8FF',
-        },
-      },
       boxShadow: {
         'aero': '0 8px 32px 0 rgba(31, 38, 135, 0.37)',
         'aero-lg': '0 12px 48px 0 rgba(31, 38, 135, 0.5)',
       },
     },
   },
-  plugins: [],
 }
 ```
 
-### Demo
+### 2. Add Components
 
-Para ver a demo localmente:
+Add all components (recommended):
 
 ```bash
-# Clone o repositório
-git clone https://github.com/seu-usuario/glassmorphism-ui.git
-cd glassmorphism-ui
+npx @alexandretav/aleui
+```
 
-# Instalar dependências
-npm install
+Or add a specific component:
 
-# Rodar servidor de desenvolvimento
-npm run dev
+```bash
+npx @alexandretav/aleui add button
 ```
 
-Abra [http://localhost:3000](http://localhost:3000) para ver a demo.
+List available components:
+
+```bash
+npx @alexandretav/aleui list
+```
 
-## 💻 Usage
+### 3. Use Components
 
-### Import Components
+Components are copied to `src/components/ui/` in your project:
 
 ```tsx
-import { Button, Card, Input, Modal } from '@/components';
+import { Button } from '@/components/ui/button';
+import { Card } from '@/components/ui/card';
+
+function App() {
+  return (
+    <Card variant="medium" padding="lg">
+      <h2>Hello World</h2>
+      <Button variant="light" size="md">
+        Click Me
+      </Button>
+    </Card>
+  );
+}
 ```
 
-### Button Example
+## 💻 Usage Examples
+
+### Button
 
 ```tsx
-<Button variant="light" size="md" onClick={() => console.log('Clicked!')}>
+import { Button } from '@/components/ui/button';
+
+<Button variant="light" size="md" onClick={() => alert('Clicked!')}>
   Click Me
 </Button>
+
+<Button variant="colored" size="lg" fullWidth>
+  Full Width Button
+</Button>
 ```
 
-### Card Example
+### Card
 
 ```tsx
-<Card variant="medium" hover padding="lg">
+import { Card } from '@/components/ui/card';
+
+<Card variant="medium" padding="lg" enableInteractions>
   <h2>Card Title</h2>
-  <p>Card content goes here</p>
+  <p>Card content with hover effects</p>
 </Card>
 ```
 
-### Input Example
+### Input
 
 ```tsx
+import { Input } from '@/components/ui/input';
+
 <Input
   variant="light"
   label="Email"
@@ -126,9 +136,12 @@ import { Button, Card, Input, Modal } from '@/components';
 />
 ```
 
-### Modal Example
+### Modal
 
 ```tsx
+import { Modal } from '@/components/ui/modal';
+import { useState } from 'react';
+
 const [isOpen, setIsOpen] = useState(false);
 
 <Modal
@@ -141,75 +154,165 @@ const [isOpen, setIsOpen] = useState(false);
 </Modal>
 ```
 
+### Accordion
+
+```tsx
+import { Accordion } from '@/components/ui/accordion';
+
+<Accordion
+  variant="light"
+  items={[
+    {
+      id: '1',
+      title: 'Question 1',
+      content: 'Answer 1',
+    },
+    {
+      id: '2',
+      title: 'Question 2',
+      content: 'Answer 2',
+    },
+  ]}
+/>
+```
+
 ## 🎨 Customization
 
+Since components are copied to your project, you have **full control** to customize them:
+
+### Edit Components Directly
+
+```tsx
+// src/components/ui/button/button.tsx
+export const Button = ({ variant = 'light', ... }) => {
+  // Modify styles, add features, change behavior
+  return <button className={...}>...</button>
+}
+```
+
 ### Theme Configuration
 
-The glassmorphism theme is configured in `src/theme/glass.ts`. You can customize:
+The theme is in `src/theme/glass.ts`:
+
+```typescript
+export const glassVariants = {
+  light: {
+    background: 'bg-white/5',
+    backdropBlur: 'backdrop-blur-[2px]',
+    border: 'border border-white/15',
+    shadow: 'shadow-lg',
+    hover: 'hover:bg-white/10',
+    focus: 'focus:ring-2 focus:ring-white/10',
+  },
+  // ... customize as needed
+}
+```
+
+### Using Theme Utilities
 
-- Background opacity
-- Backdrop blur intensity
-- Border styles
-- Shadow effects
-- Animation transitions
+```tsx
+import { getGlassClasses, getAeroClasses } from '@/theme/glass';
+
+const MyComponent = () => {
+  const glassStyle = getGlassClasses('medium');
+  const aeroStyle = getAeroClasses('colored');
+  
+  return <div className={glassStyle}>Custom component</div>;
+};
+```
 
-### Tailwind Configuration
+## 📁 Project Structure (After Installation)
 
-Extend the Tailwind configuration in `tailwind.config.js` to add custom colors, spacing, or other utilities.
+```
+your-project/
+├── src/
+│   ├── components/
+│   │   └── ui/              # Components copied here
+│   │       ├── button/
+│   │       │   ├── button.tsx
+│   │       │   └── index.ts
+│   │       ├── card/
+│   │       ├── input/
+│   │       ├── modal/
+│   │       ├── accordion/
+│   │       └── aero-bubble/
+│   └── theme/
+│       └── glass.ts         # Theme config copied here
+```
 
-### Global Styles
+## 🎯 CLI Commands
 
-Global glassmorphism utility classes are available in `src/app/globals.css`:
+```bash
+# Add all components (default)
+npx @alexandretav/aleui
 
-- `.glass` - Default glassmorphism style
-- `.glass-light` - Light variant
-- `.glass-medium` - Medium variant
-- `.glass-dark` - Dark variant
-- `.glass-hover` - Hover animation
+# Add a specific component
+npx @alexandretav/aleui add button
+npx @alexandretav/aleui add card
+npx @alexandretav/aleui add modal
 
-## 📁 Project Structure
+# List available components
+npx @alexandretav/aleui list
 
+# Show help
+npx @alexandretav/aleui help
 ```
-src/
-├── app/
-│   ├── globals.css       # Global styles and Tailwind imports
-│   ├── layout.tsx        # Root layout
-│   └── page.tsx          # Demo page
-├── components/
-│   ├── Button/
-│   │   ├── Button.tsx
-│   │   └── index.ts
-│   ├── Card/
-│   │   ├── Card.tsx
-│   │   └── index.ts
-│   ├── Input/
-│   │   ├── Input.tsx
-│   │   └── index.ts
-│   ├── Modal/
-│   │   ├── Modal.tsx
-│   │   └── index.ts
-│   └── index.ts          # Component exports
-├── theme/
-│   └── glass.ts          # Glassmorphism theme config
-└── utils/
-    └── index.ts          # Utility functions
+
+## 🌐 Demo
+
+View live demo: [https://github.com/alexandrertav/alex-ui](https://github.com/alexandrertav/alex-ui)
+
+Run demo locally:
+
+```bash
+git clone https://github.com/alexandrertav/alex-ui.git
+cd alex-ui
+npm install
+npm run dev
 ```
 
+Open [http://localhost:3000](http://localhost:3000)
+
 ## 🛠️ Tech Stack
 
-- **Next.js 14** - React framework
+- **React 18** - UI library
 - **TypeScript** - Type safety
 - **Tailwind CSS** - Styling
-- **React 18** - UI library
+- **Framer Motion** - Animations
+
+## ❓ FAQ
+
+**Q: Why copy components instead of installing from npm?**  
+A: Full control. Edit, customize, and own the code. No black boxes.
+
+**Q: Do I need to install the package?**  
+A: No! Just use `npx @alexandretav/aleui add <component>` to copy components.
+
+**Q: Can I modify the components?**  
+A: Yes! They're in your codebase. Modify freely.
+
+**Q: What about updates?**  
+A: Re-run the CLI command to get the latest version of a component.
+
+**Q: Does it work with Next.js/Remix/Vite?**  
+A: Yes! Works with any React framework that supports Tailwind CSS.
 
 ## 📝 License
 
-MIT
+MIT License - feel free to use in personal and commercial projects.
 
 ## 🤝 Contributing
 
-Contributions are welcome! Feel free to open issues or submit pull requests.
+Contributions are welcome! 
+
+- Report bugs: [GitHub Issues](https://github.com/alexandrertav/alex-ui/issues)
+- Submit PRs: [GitHub Pull Requests](https://github.com/alexandrertav/alex-ui/pulls)
+
+## 🔗 Links
+
+- **NPM Package**: [@alexandretav/aleui](https://www.npmjs.com/package/@alexandretav/aleui)
+- **GitHub**: [alexandrertav/alex-ui](https://github.com/alexandrertav/alex-ui)
+- **Author**: Alexandre R. Tavares
 
 ---
 
-Built with ❤️ using Next.js and Tailwind CSS

package/cli.js

@@ -0,0 +1,142 @@
+#!/usr/bin/env node
+
+const fs = require('fs');
+const path = require('path');
+const { execSync } = require('child_process');
+
+const COMPONENTS_DIR = path.join(__dirname, 'src', 'components');
+const TARGET_DIR = path.join(process.cwd(), 'src', 'components', 'ui');
+
+const args = process.argv.slice(2);
+const command = args[0];
+const componentName = args[1];
+
+const availableComponents = [
+  'button',
+  'card',
+  'input',
+  'modal',
+  'accordion',
+  'aero-bubble',
+  'aero-button',
+  'aero-card',
+  'aero-input'
+];
+
+function copyComponent(name) {
+  const sourcePath = path.join(COMPONENTS_DIR, name);
+  const targetPath = path.join(TARGET_DIR, name);
+
+  if (!fs.existsSync(sourcePath)) {
+    console.error(`❌ Componente "${name}" não encontrado!`);
+    return;
+  }
+
+  // Criar diretório de destino
+  if (!fs.existsSync(targetPath)) {
+    fs.mkdirSync(targetPath, { recursive: true });
+  }
+
+  // Copiar arquivos
+  const files = fs.readdirSync(sourcePath);
+  files.forEach(file => {
+    const sourceFile = path.join(sourcePath, file);
+    const targetFile = path.join(targetPath, file);
+    fs.copyFileSync(sourceFile, targetFile);
+  });
+
+  console.log(`✅ Componente "${name}" copiado para ${targetPath}`);
+}
+
+function copyTheme() {
+  const themePath = path.join(__dirname, 'src', 'theme');
+  const targetThemePath = path.join(process.cwd(), 'src', 'theme');
+
+  if (!fs.existsSync(targetThemePath)) {
+    fs.mkdirSync(targetThemePath, { recursive: true });
+  }
+
+  const files = fs.readdirSync(themePath);
+  files.forEach(file => {
+    const sourceFile = path.join(themePath, file);
+    const targetFile = path.join(targetThemePath, file);
+    fs.copyFileSync(sourceFile, targetFile);
+  });
+
+  console.log(`✅ Tema copiado para ${targetThemePath}`);
+}
+
+function showHelp() {
+  console.log(`
+🎨 AleUI - Glassmorphism Components
+
+Uso:
+  npx @alexandretav/aleui                    # Adiciona todos os componentes
+  npx @alexandretav/aleui add <componente>   # Adiciona um componente específico
+  npx @alexandretav/aleui list               # Lista componentes disponíveis
+
+Comandos:
+  (sem comando)     Adiciona todos os componentes
+  add <componente>  Adiciona um componente específico
+  add-all           Adiciona todos os componentes
+  list              Lista componentes disponíveis
+  help              Mostra esta ajuda
+
+Componentes disponíveis:
+${availableComponents.map(c => `  - ${c}`).join('\n')}
+
+Exemplos:
+  npx @alexandretav/aleui              # Adiciona tudo
+  npx @alexandretav/aleui add button   # Adiciona só o Button
+  npx @alexandretav/aleui add card     # Adiciona só o Card
+  npx @alexandretav/aleui list         # Lista componentes
+  `);
+}
+
+function listComponents() {
+  console.log('\n📦 Componentes disponíveis:\n');
+  availableComponents.forEach(c => {
+    console.log(`  ✨ ${c}`);
+  });
+  console.log('');
+}
+
+// Main
+if (!command) {
+  // Se não houver comando, adiciona todos os componentes
+  copyTheme();
+  availableComponents.forEach(comp => copyComponent(comp));
+  console.log('\n✅ Todos os componentes foram copiados!');
+} else {
+  switch (command) {
+    case 'add':
+      if (!componentName) {
+        console.error('❌ Especifique o nome do componente!');
+        console.log('Uso: npx @alexandretav/aleui add <componente>');
+        process.exit(1);
+      }
+      copyTheme();
+      copyComponent(componentName);
+      break;
+
+    case 'add-all':
+      copyTheme();
+      availableComponents.forEach(comp => copyComponent(comp));
+      console.log('\n✅ Todos os componentes foram copiados!');
+      break;
+
+    case 'list':
+      listComponents();
+      break;
+
+    case 'help':
+    case '--help':
+    case '-h':
+      showHelp();
+      break;
+
+    default:
+      console.error(`❌ Comando desconhecido: "${command}"`);
+      showHelp();
+  }
+}

package/package.json

@@ -1,12 +1,16 @@
 {
   "name": "@alexandretav/aleui",
-  "version": "1.0.0",
+  "version": "1.1.2",
   "description": "Glass UI components for React",
-  "main": "dist/index.js",
-  "module": "dist/index.esm.js",
-  "types": "dist/index.d.ts",
+  "main": "src/components/index.ts",
+  "types": "src/components/index.ts",
+  "bin": {
+    "aleui": "cli.js"
+  },
   "files": [
-    "dist",
+    "src/components",
+    "src/theme",
+    "src/utils",
     "README.md",
     "LICENSE"
   ],
@@ -33,10 +37,8 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build",
-    "build:lib": "tsup src/components/index.ts --format cjs,esm --dts --external react --external react-dom --external framer-motion",
     "start": "next start",
-    "lint": "next lint",
-    "prepublishOnly": "npm run build:lib"
+    "lint": "next lint"
   },
   "peerDependencies": {
     "framer-motion": "^11.0.0",

package/src/components/accordion/accordion.tsx

@@ -0,0 +1,103 @@
+'use client';
+
+import React, { useState } from 'react';
+import { getGlassClasses, GlassVariantType } from '@/theme/glass';
+
+export interface AccordionItemProps {
+  id: string;
+  title: string;
+  content: React.ReactNode;
+  icon?: React.ReactNode;
+}
+
+export interface AccordionProps {
+  items: AccordionItemProps[];
+  variant?: GlassVariantType;
+  allowMultiple?: boolean;
+  defaultOpen?: string[];
+  className?: string;
+}
+
+export const Accordion: React.FC<AccordionProps> = ({
+  items,
+  variant = 'light',
+  allowMultiple = false,
+  defaultOpen = [],
+  className = '',
+}) => {
+  const [openItems, setOpenItems] = useState<string[]>(defaultOpen);
+
+  const toggleItem = (id: string) => {
+    if (allowMultiple) {
+      setOpenItems((prev) =>
+        prev.includes(id) ? prev.filter((item) => item !== id) : [...prev, id]
+      );
+    } else {
+      setOpenItems((prev) => (prev.includes(id) ? [] : [id]));
+    }
+  };
+
+  const isOpen = (id: string) => openItems.includes(id);
+
+  return (
+    <div className={className}>
+      {items.map((item, index) => {
+        const open = isOpen(item.id);
+        const glassClasses = getGlassClasses(variant, 'rounded-none', false);
+        const isFirst = index === 0;
+        const isLast = index === items.length - 1;
+
+        return (
+          <div 
+            key={item.id} 
+            className={`${glassClasses} ${
+              isFirst ? 'rounded-t-lg' : ''
+            } ${
+              isLast ? 'rounded-b-lg' : ''
+            } ${
+              !isLast ? 'border-b border-white/10' : ''
+            }`}
+          >
+            <button
+              onClick={() => toggleItem(item.id)}
+              className="w-full px-4 py-4 flex items-center justify-between text-left text-white font-medium hover:underline transition-all duration-200"
+            >
+              <div className="flex items-center gap-2">
+                {item.icon && <span className="flex items-center text-base">{item.icon}</span>}
+                <span className="text-sm font-medium">{item.title}</span>
+              </div>
+              <svg
+                className={`w-4 h-4 shrink-0 transition-transform duration-200 text-white/70 ${
+                  open ? 'rotate-180' : ''
+                }`}
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M19 9l-7 7-7-7"
+                />
+              </svg>
+            </button>
+            <div
+              className={`grid transition-all duration-200 ease-in-out ${
+                open ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'
+              }`}
+            >
+              <div className="overflow-hidden">
+                <div className="px-4 pb-4 pt-0 text-sm text-white/80 leading-relaxed">
+                  {item.content}
+                </div>
+              </div>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default Accordion;