@alexandretav/aleui 1.0.0 → 1.1.2

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';

package/src/components/input/input.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { getGlassClasses, GlassVariantType } from '@/theme/glass';
+
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  variant?: GlassVariantType;
+  fullWidth?: boolean;
+  label?: string;
+}
+
+export const Input: React.FC<InputProps> = ({
+  variant = 'light',
+  fullWidth = false,
+  label,
+  className = '',
+  id,
+  ...props
+}) => {
+  const glassClasses = getGlassClasses(variant);
+  const widthClass = fullWidth ? 'w-full' : '';
+  const inputId = id || label?.toLowerCase().replace(/\s+/g, '-');
+
+  return (
+    <div className={`flex flex-col gap-2 ${widthClass}`}>
+      {label && (
+        <label
+          htmlFor={inputId}
+          className="text-white text-sm font-medium pl-1"
+        >
+          {label}
+        </label>
+      )}
+      <input
+        id={inputId}
+        className={`
+          ${glassClasses}
+          ${widthClass}
+          px-4 py-3
+          text-white placeholder-white/50
+          transition-all duration-300
+          focus:outline-none focus:ring-2 focus:ring-white/50
+          ${className}
+        `}
+        {...props}
+      />
+    </div>
+  );
+};
+
+export default Input;

package/src/components/modal/index.ts

@@ -0,0 +1,2 @@
+export { Modal } from './modal';
+export type { ModalProps } from './modal';

package/src/components/modal/modal.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import { getGlassClasses, GlassVariantType } from '@/theme/glass';
+
+export interface ModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  variant?: GlassVariantType;
+  title?: string;
+  children: React.ReactNode;
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+}
+
+const sizeClasses = {
+  sm: 'max-w-sm',
+  md: 'max-w-md',
+  lg: 'max-w-lg',
+  xl: 'max-w-xl',
+};
+
+export const Modal: React.FC<ModalProps> = ({
+  isOpen,
+  onClose,
+  variant = 'medium',
+  title,
+  children,
+  size = 'md',
+}) => {
+  if (!isOpen) return null;
+
+  const glassClasses = getGlassClasses(variant);
+  const sizeClass = sizeClasses[size];
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center p-4 animate-fadeIn"
+      onClick={onClose}
+    >
+      {/* Backdrop */}
+      <div className="absolute inset-0 bg-black/50 backdrop-blur-sm" />
+
+      {/* Modal */}
+      <div
+        className={`
+          ${glassClasses}
+          ${sizeClass}
+          w-full p-6 relative z-10
+          animate-scaleIn
+        `}
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Header */}
+        {title && (
+          <div className="flex items-center justify-between mb-4">
+            <h2 className="text-2xl font-bold text-white">{title}</h2>
+            <button
+              onClick={onClose}
+              className="text-white/70 hover:text-white transition-colors p-1"
+              aria-label="Close modal"
+            >
+              <svg
+                className="w-6 h-6"
+                fill="none"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+        )}
+
+        {/* Content */}
+        <div className="text-white">{children}</div>
+      </div>
+    </div>
+  );
+};
+
+export default Modal;

package/src/theme/glass.ts

@@ -0,0 +1,124 @@
+/**
+ * Glassmorphism Theme Configuration
+ * Define reusable glassmorphism styles and variants
+ */
+
+export interface GlassVariant {
+  background: string;
+  backdropBlur: string;
+  border: string;
+  shadow: string;
+  hover: string;
+  focus: string;
+}
+
+export interface AeroVariant {
+  background: string;
+  backdropBlur: string;
+  border: string;
+  shadow: string;
+  hover: string;
+  focus: string;
+}
+
+// Traditional Glassmorphism styles
+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 hover:shadow-xl',
+    focus: 'focus:outline-none focus:ring-2 focus:ring-white/10',
+  },
+  medium: {
+    background: 'bg-white/20',
+    backdropBlur: 'backdrop-blur-lg',
+    border: 'border border-white/30',
+    shadow: 'shadow-xl',
+    hover: 'hover:bg-white/30 hover:shadow-2xl',
+    focus: 'focus:outline-none focus:ring-2 focus:ring-white/50',
+  },
+  dark: {
+    background: 'bg-black/20',
+    backdropBlur: 'backdrop-blur-md',
+    border: 'border border-white/10',
+    shadow: 'shadow-lg',
+    hover: 'hover:bg-black/30 hover:shadow-xl',
+    focus: 'focus:outline-none focus:ring-2 focus:ring-white/40',
+  },
+  colored: {
+    background: 'bg-gradient-to-br from-white/20 to-white/10',
+    backdropBlur: 'backdrop-blur-xl',
+    border: 'border border-white/25',
+    shadow: 'shadow-2xl',
+    hover: 'hover:from-white/30 hover:to-white/20 hover:shadow-[0_8px_32px_0_rgba(255,255,255,0.37)]',
+    focus: 'focus:outline-none focus:ring-2 focus:ring-white/60',
+  },
+} as const;
+
+// Frutiger Aero specific styles
+export const aeroVariants = {
+  light: {
+    background: 'bg-gradient-to-br from-cyan-400/20 to-blue-400/10',
+    backdropBlur: 'backdrop-blur-md',
+    border: 'border border-cyan-300/30',
+    shadow: 'shadow-aero',
+    hover: 'hover:from-cyan-400/30 hover:to-blue-400/20 hover:shadow-aero-lg',
+    focus: 'focus:outline-none focus:ring-2 focus:ring-cyan-300/50',
+  },
+  medium: {
+    background: 'bg-gradient-to-br from-sky-400/25 to-cyan-400/15',
+    backdropBlur: 'backdrop-blur-lg',
+    border: 'border border-sky-300/40',
+    shadow: 'shadow-aero-lg',
+    hover: 'hover:from-sky-400/35 hover:to-cyan-400/25 hover:shadow-[0_8px_32px_0_rgba(56,189,248,0.37)]',
+    focus: 'focus:outline-none focus:ring-2 focus:ring-sky-300/60',
+  },
+  dark: {
+    background: 'bg-gradient-to-br from-blue-500/30 to-cyan-500/20',
+    backdropBlur: 'backdrop-blur-md',
+    border: 'border border-blue-300/30',
+    shadow: 'shadow-aero',
+    hover: 'hover:from-blue-500/40 hover:to-cyan-500/30 hover:shadow-aero-lg',
+    focus: 'focus:outline-none focus:ring-2 focus:ring-blue-300/50',
+  },
+  colored: {
+    background: 'bg-gradient-to-br from-lime-400/25 via-cyan-400/20 to-blue-400/15',
+    backdropBlur: 'backdrop-blur-xl',
+    border: 'border border-lime-300/35',
+    shadow: 'shadow-aero-lg',
+    hover: 'hover:from-lime-400/35 hover:via-cyan-400/30 hover:to-blue-400/25 hover:shadow-[0_8px_32px_0_rgba(163,230,53,0.37)]',
+    focus: 'focus:outline-none focus:ring-2 focus:ring-lime-300/60',
+  },
+} as const;
+
+export type GlassVariantType = keyof typeof glassVariants;
+export type AeroVariantType = keyof typeof aeroVariants;
+
+/**
+ * Generate glassmorphism class string
+ */
+export const getGlassClasses = (
+  variant: GlassVariantType = 'light',
+  rounded: string = 'rounded-xl',
+  includeInteractions: boolean = true
+): string => {
+  const v = glassVariants[variant];
+  const interactions = includeInteractions ? `transition-all duration-300 ${v.hover} ${v.focus} active:scale-95` : '';
+  return `${v.background} ${v.backdropBlur} ${v.border} ${v.shadow} ${rounded} ${interactions}`;
+};
+
+/**
+ * Generate Frutiger Aero class string
+ */
+export const getAeroClasses = (
+  variant: AeroVariantType = 'light',
+  rounded: string = 'rounded-xl',
+  includeInteractions: boolean = true
+): string => {
+  const v = aeroVariants[variant];
+  const interactions = includeInteractions ? `transition-all duration-300 ${v.hover} ${v.focus} active:scale-95` : '';
+  return `${v.background} ${v.backdropBlur} ${v.border} ${v.shadow} ${rounded} ${interactions}`;
+};
+