@alexandretav/aleui 1.0.0 → 1.1.0

package/cli.js

@@ -0,0 +1,125 @@
+#!/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 add <componente>
+  npx @alexandretav/aleui add-all
+  npx @alexandretav/aleui list
+
+Comandos:
+  add <componente>  Adiciona um componente específico
+  add-all           Adiciona todos os componentes
+  list              Lista componentes disponíveis
+
+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
+  `);
+}
+
+function listComponents() {
+  console.log('\n📦 Componentes disponíveis:\n');
+  availableComponents.forEach(c => {
+    console.log(`  ✨ ${c}`);
+  });
+  console.log('');
+}
+
+// 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();
+}

package/package.json

@@ -1,12 +1,16 @@
 {
   "name": "@alexandretav/aleui",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "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;

package/src/components/accordion/index.ts

@@ -0,0 +1,2 @@
+export { Accordion } from './accordion';
+export type { AccordionProps, AccordionItemProps } from './accordion';

package/src/components/aero-bubble/aero-bubble.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+
+export interface AeroBubbleProps {
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+  color?: 'cyan' | 'blue' | 'lime' | 'sky';
+  className?: string;
+}
+
+const sizeClasses = {
+  sm: 'w-12 h-12',
+  md: 'w-20 h-20',
+  lg: 'w-32 h-32',
+  xl: 'w-48 h-48',
+};
+
+const colorClasses = {
+  cyan: 'bg-gradient-to-br from-cyan-300/40 to-cyan-500/20',
+  blue: 'bg-gradient-to-br from-blue-300/40 to-blue-500/20',
+  lime: 'bg-gradient-to-br from-lime-300/40 to-lime-500/20',
+  sky: 'bg-gradient-to-br from-sky-300/40 to-sky-500/20',
+};
+
+export const AeroBubble: React.FC<AeroBubbleProps> = ({
+  size = 'md',
+  color = 'cyan',
+  className = '',
+}) => {
+  return (
+    <div
+      className={`
+        ${sizeClasses[size]}
+        ${colorClasses[color]}
+        rounded-full
+        backdrop-blur-sm
+        border border-white/30
+        shadow-[0_8px_32px_0_rgba(31,38,135,0.37)]
+        relative
+        overflow-hidden
+        ${className}
+      `}
+    >
+      {/* Shine effect */}
+      <div className="absolute inset-0 bg-gradient-to-br from-white/40 via-transparent to-transparent rounded-full"></div>
+      
+      {/* Inner glow */}
+      <div className="absolute bottom-2 right-2 w-1/3 h-1/3 bg-white/30 rounded-full blur-md"></div>
+    </div>
+  );
+};
+
+export default AeroBubble;

package/src/components/aero-bubble/index.ts

@@ -0,0 +1,2 @@
+export { AeroBubble } from './aero-bubble';
+export type { AeroBubbleProps } from './aero-bubble';

package/src/components/aero-button/aero-button.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { getAeroClasses, AeroVariantType } from '@/theme/glass';
+
+export interface AeroButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: AeroVariantType;
+  size?: 'sm' | 'md' | 'lg';
+  fullWidth?: boolean;
+  children: React.ReactNode;
+}
+
+const sizeClasses = {
+  sm: 'px-4 py-2 text-sm',
+  md: 'px-6 py-3 text-base',
+  lg: 'px-8 py-4 text-lg',
+};
+
+export const AeroButton: React.FC<AeroButtonProps> = ({
+  variant = 'light',
+  size = 'md',
+  fullWidth = false,
+  children,
+  className = '',
+  disabled = false,
+  ...props
+}) => {
+  const aeroClasses = getAeroClasses(variant, 'rounded-lg');
+  const sizeClass = sizeClasses[size];
+  const widthClass = fullWidth ? 'w-full' : '';
+  const disabledClass = disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer';
+
+  return (
+    <button
+      className={`
+        ${aeroClasses}
+        ${sizeClass}
+        ${widthClass}
+        ${disabledClass}
+        font-medium text-white
+        ${className}
+      `}
+      disabled={disabled}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+};
+
+export default AeroButton;

package/src/components/aero-button/index.ts

@@ -0,0 +1,2 @@
+export { AeroButton } from './aero-button';
+export type { AeroButtonProps } from './aero-button';

package/src/components/aero-button/shiny-button.tsx

@@ -0,0 +1,83 @@
+"use client"
+
+import React from 'react'
+import { motion } from 'framer-motion';
+import { cn } from '@/utils';
+
+const animation = {
+    initial: { "--x": "-100%", scale: 1 },
+    animate: { "--x": "-100%", scale: 1 },
+    whileHover: { scale: 1.05 },
+    whileTap: { scale: 0.95 },
+}
+
+const sizeClasses = {
+  sm: 'px-4 py-2 text-sm',
+  md: 'px-6 py-3 text-base',
+  lg: 'px-8 py-4 text-lg',
+};
+
+interface ShinyButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    size?: 'sm' | 'md' | 'lg';
+    fullWidth?: boolean;
+    children: React.ReactNode;
+    onClick?: () => void;
+}
+
+export const ShinyButton: React.FC<ShinyButtonProps> = ({
+    onClick,
+    size = 'md',
+    fullWidth = false,
+    className = '',
+    children,
+    disabled = false,
+}) => {
+    const sizeClass = sizeClasses[size];
+    const widthClass = fullWidth ? 'w-full' : '';
+    
+    return (
+      <motion.button 
+        {...animation}
+        onClick={onClick}
+        disabled={disabled}
+        className={cn(
+          "relative rounded-xl overflow-hidden font-medium",
+          sizeClass,
+          widthClass,
+          "bg-gradient-to-br from-cyan-400/30 via-blue-400/25 to-cyan-500/30",
+          "backdrop-blur-lg border-2 border-cyan-300/40",
+          "shadow-[0_0_30px_rgba(0,206,209,0.4),inset_0_0_20px_rgba(255,255,255,0.1)]",
+          "hover:shadow-[0_0_50px_rgba(0,206,209,0.6),inset_0_0_30px_rgba(255,255,255,0.2)]",
+          "hover:border-cyan-300/60",
+          "transition-all duration-300",
+          disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer",
+          className,
+        )}
+      >
+        {/* Shine effect */}
+        <motion.span
+          className="absolute inset-0 z-0"
+          animate={{
+            x: ["0%", "200%"],
+          }}
+          transition={{
+            duration: 3,
+            repeat: Infinity,
+            ease: "linear",
+          }}
+          style={{
+            background: "linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%)",
+            width: "50%",
+          }}
+        />
+        
+        {/* Inner glow */}
+        <span className="absolute inset-0 bg-gradient-to-t from-transparent via-white/5 to-white/10 z-0" />
+        
+        {/* Text */}
+        <span className="relative z-10 text-white font-semibold drop-shadow-[0_2px_8px_rgba(0,0,0,0.5)]">
+          {children}
+        </span>
+      </motion.button>
+    );
+};

package/src/components/aero-card/aero-card.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { getAeroClasses, AeroVariantType } from '@/theme/glass';
+
+export interface AeroCardProps extends React.HTMLAttributes<HTMLDivElement> {
+  variant?: AeroVariantType;
+  padding?: 'none' | 'sm' | 'md' | 'lg';
+  enableInteractions?: boolean;
+  children: React.ReactNode;
+}
+
+const paddingClasses = {
+  none: '',
+  sm: 'p-4',
+  md: 'p-6',
+  lg: 'p-8',
+};
+
+export const AeroCard: React.FC<AeroCardProps> = ({
+  variant = 'light',
+  padding = 'md',
+  enableInteractions = false,
+  children,
+  className = '',
+  ...props
+}) => {
+  const aeroClasses = getAeroClasses(variant, 'rounded-xl', enableInteractions);
+  const paddingClass = paddingClasses[padding];
+
+  return (
+    <div
+      className={`
+        ${aeroClasses}
+        ${paddingClass}
+        ${className}
+      `}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default AeroCard;

package/src/components/aero-card/index.ts

@@ -0,0 +1,2 @@
+export { AeroCard } from './aero-card';
+export type { AeroCardProps } from './aero-card';

package/src/components/aero-input/aero-input.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { getAeroClasses, AeroVariantType } from '@/theme/glass';
+
+export interface AeroInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  variant?: AeroVariantType;
+  label?: string;
+  fullWidth?: boolean;
+}
+
+export const AeroInput: React.FC<AeroInputProps> = ({
+  variant = 'light',
+  label,
+  fullWidth = false,
+  className = '',
+  ...props
+}) => {
+  const aeroClasses = getAeroClasses(variant, 'rounded-lg');
+  const widthClass = fullWidth ? 'w-full' : '';
+
+  return (
+    <div className={`flex flex-col gap-2 ${widthClass}`}>
+      {label && (
+        <label className="text-white/90 text-sm font-medium">
+          {label}
+        </label>
+      )}
+      <input
+        className={`
+          ${aeroClasses}
+          px-4 py-3
+          ${widthClass}
+          text-white placeholder-white/50
+          ${className}
+        `}
+        {...props}
+      />
+    </div>
+  );
+};
+
+export default AeroInput;

package/src/components/aero-input/index.ts

@@ -0,0 +1,2 @@
+export { AeroInput } from './aero-input';
+export type { AeroInputProps } from './aero-input';

package/src/components/button/button.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { getGlassClasses, GlassVariantType } from '@/theme/glass';
+
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: GlassVariantType;
+  size?: 'sm' | 'md' | 'lg';
+  fullWidth?: boolean;
+  children: React.ReactNode;
+}
+
+const sizeClasses = {
+  sm: 'px-4 py-2 text-sm',
+  md: 'px-6 py-3 text-base',
+  lg: 'px-8 py-4 text-lg',
+};
+
+
+export const Button: React.FC<ButtonProps> = ({
+  variant = 'light',
+  size = 'md',
+  fullWidth = false,
+  children,
+  className = '',
+  disabled = false,
+  ...props
+}) => {
+  const glassClasses = getGlassClasses(variant);
+  const sizeClass = sizeClasses[size];
+  const widthClass = fullWidth ? 'w-full' : '';
+  const disabledClass = disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer';
+
+  return (
+    <button
+      className={`
+        ${glassClasses}
+        ${sizeClass}
+        ${widthClass}
+        ${disabledClass}
+        font-medium text-white
+        ${className}
+      `}
+      disabled={disabled}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+};
+
+export default Button;

package/src/components/button/index.ts

@@ -0,0 +1,2 @@
+export { Button } from './button';
+export type { ButtonProps } from './button';

package/src/components/card/card.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { getGlassClasses, GlassVariantType } from '@/theme/glass';
+
+export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+  variant?: GlassVariantType;
+  padding?: 'none' | 'sm' | 'md' | 'lg';
+  enableInteractions?: boolean;
+  children: React.ReactNode;
+}
+
+const paddingClasses = {
+  none: '',
+  sm: 'p-4',
+  md: 'p-6',
+  lg: 'p-8',
+};
+
+export const Card: React.FC<CardProps> = ({
+  variant = 'light',
+  padding = 'md',
+  enableInteractions = false,
+  children,
+  className = '',
+  ...props
+}) => {
+  const glassClasses = getGlassClasses(variant, undefined, enableInteractions);
+  const paddingClass = paddingClasses[padding];
+
+  return (
+    <div
+      className={`
+        ${glassClasses}
+        ${paddingClass}
+        ${className}
+      `}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default Card;

package/src/components/card/index.ts

@@ -0,0 +1,2 @@
+export { Card } from './card';
+export type { CardProps } from './card';

package/src/components/index.ts

@@ -0,0 +1,30 @@
+/**
+ * Glassmorphism UI Component Library
+ * Export all components from a single entry point
+ */
+
+export { Button } from './button';
+export type { ButtonProps } from './button';
+
+export { Card } from './card';
+export type { CardProps } from './card';
+
+export { Input } from './input';
+export type { InputProps } from './input';
+
+export { Modal } from './modal';
+export type { ModalProps } from './modal';
+
+export { AeroBubble } from './aero-bubble';
+export type { AeroBubbleProps } from './aero-bubble';
+
+export { Accordion } from './accordion';
+export type { AccordionProps, AccordionItemProps } from './accordion';
+
+export { 
+  getGlassClasses, 
+  getAeroClasses,
+  glassVariants, 
+  aeroVariants,
+} from '@/theme/glass';
+export type { GlassVariantType, AeroVariantType } from '@/theme/glass';

package/src/components/input/index.ts

@@ -0,0 +1,2 @@
+export { Input } from './input';
+export type { InputProps } from './input';