@alexandretav/aleui 1.1.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

@@ -71,22 +71,25 @@ function showHelp() {
 🎨 AleUI - Glassmorphism Components
 
 Uso:
-  npx @alexandretav/aleui add <componente>
-  npx @alexandretav/aleui add-all
-  npx @alexandretav/aleui list
+  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 add button
-  npx @alexandretav/aleui add card
-  npx @alexandretav/aleui add-all
+  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
   `);
 }
 
@@ -99,27 +102,41 @@ function listComponents() {
 }
 
 // Main
-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;
-
-  default:
-    showHelp();
+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,11 +1,11 @@
 {
   "name": "@alexandretav/aleui",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "description": "Glass UI components for React",
   "main": "src/components/index.ts",
   "types": "src/components/index.ts",
   "bin": {
-    "aleui": "./cli.js"
+    "aleui": "cli.js"
   },
   "files": [
     "src/components",