@alexandretav/aleui 1.0.0 → 1.1.0

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}`;
+};
+

package/src/utils/index.ts

@@ -0,0 +1,39 @@
+/**
+ * Utility functions for the glassmorphism UI library
+ */
+
+/**
+ * Combine multiple class names, filtering out falsy values
+ */
+export const cn = (...classes: (string | undefined | null | false)[]): string => {
+  return classes.filter(Boolean).join(' ');
+};
+
+/**
+ * Generate random gradient colors for backgrounds
+ */
+export const getRandomGradient = (): string => {
+  const gradients = [
+    'from-purple-600 via-pink-500 to-orange-400',
+    'from-blue-600 via-cyan-500 to-teal-400',
+    'from-pink-500 via-red-500 to-yellow-500',
+    'from-indigo-600 via-purple-500 to-pink-500',
+    'from-green-500 via-teal-500 to-blue-500',
+  ];
+  return gradients[Math.floor(Math.random() * gradients.length)];
+};
+
+/**
+ * Debounce function for performance optimization
+ */
+export const debounce = <T extends (...args: any[]) => any>(
+  func: T,
+  wait: number
+): ((...args: Parameters<T>) => void) => {
+  let timeout: NodeJS.Timeout | null = null;
+
+  return (...args: Parameters<T>) => {
+    if (timeout) clearTimeout(timeout);
+    timeout = setTimeout(() => func(...args), wait);
+  };
+};

package/dist/index.d.mts

@@ -1,137 +0,0 @@
-import React from 'react';
-
-declare const glassVariants: {
-    readonly light: {
-        readonly background: "bg-white/5";
-        readonly backdropBlur: "backdrop-blur-[2px]";
-        readonly border: "border border-white/15";
-        readonly shadow: "shadow-lg";
-        readonly hover: "hover:bg-white/10 hover:shadow-xl";
-        readonly focus: "focus:outline-none focus:ring-2 focus:ring-white/10";
-    };
-    readonly medium: {
-        readonly background: "bg-white/20";
-        readonly backdropBlur: "backdrop-blur-lg";
-        readonly border: "border border-white/30";
-        readonly shadow: "shadow-xl";
-        readonly hover: "hover:bg-white/30 hover:shadow-2xl";
-        readonly focus: "focus:outline-none focus:ring-2 focus:ring-white/50";
-    };
-    readonly dark: {
-        readonly background: "bg-black/20";
-        readonly backdropBlur: "backdrop-blur-md";
-        readonly border: "border border-white/10";
-        readonly shadow: "shadow-lg";
-        readonly hover: "hover:bg-black/30 hover:shadow-xl";
-        readonly focus: "focus:outline-none focus:ring-2 focus:ring-white/40";
-    };
-    readonly colored: {
-        readonly background: "bg-gradient-to-br from-white/20 to-white/10";
-        readonly backdropBlur: "backdrop-blur-xl";
-        readonly border: "border border-white/25";
-        readonly shadow: "shadow-2xl";
-        readonly hover: "hover:from-white/30 hover:to-white/20 hover:shadow-[0_8px_32px_0_rgba(255,255,255,0.37)]";
-        readonly focus: "focus:outline-none focus:ring-2 focus:ring-white/60";
-    };
-};
-declare const aeroVariants: {
-    readonly light: {
-        readonly background: "bg-gradient-to-br from-cyan-400/20 to-blue-400/10";
-        readonly backdropBlur: "backdrop-blur-md";
-        readonly border: "border border-cyan-300/30";
-        readonly shadow: "shadow-aero";
-        readonly hover: "hover:from-cyan-400/30 hover:to-blue-400/20 hover:shadow-aero-lg";
-        readonly focus: "focus:outline-none focus:ring-2 focus:ring-cyan-300/50";
-    };
-    readonly medium: {
-        readonly background: "bg-gradient-to-br from-sky-400/25 to-cyan-400/15";
-        readonly backdropBlur: "backdrop-blur-lg";
-        readonly border: "border border-sky-300/40";
-        readonly shadow: "shadow-aero-lg";
-        readonly hover: "hover:from-sky-400/35 hover:to-cyan-400/25 hover:shadow-[0_8px_32px_0_rgba(56,189,248,0.37)]";
-        readonly focus: "focus:outline-none focus:ring-2 focus:ring-sky-300/60";
-    };
-    readonly dark: {
-        readonly background: "bg-gradient-to-br from-blue-500/30 to-cyan-500/20";
-        readonly backdropBlur: "backdrop-blur-md";
-        readonly border: "border border-blue-300/30";
-        readonly shadow: "shadow-aero";
-        readonly hover: "hover:from-blue-500/40 hover:to-cyan-500/30 hover:shadow-aero-lg";
-        readonly focus: "focus:outline-none focus:ring-2 focus:ring-blue-300/50";
-    };
-    readonly colored: {
-        readonly background: "bg-gradient-to-br from-lime-400/25 via-cyan-400/20 to-blue-400/15";
-        readonly backdropBlur: "backdrop-blur-xl";
-        readonly border: "border border-lime-300/35";
-        readonly shadow: "shadow-aero-lg";
-        readonly 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)]";
-        readonly focus: "focus:outline-none focus:ring-2 focus:ring-lime-300/60";
-    };
-};
-type GlassVariantType = keyof typeof glassVariants;
-type AeroVariantType = keyof typeof aeroVariants;
-/**
- * Generate glassmorphism class string
- */
-declare const getGlassClasses: (variant?: GlassVariantType, rounded?: string, includeInteractions?: boolean) => string;
-/**
- * Generate Frutiger Aero class string
- */
-declare const getAeroClasses: (variant?: AeroVariantType, rounded?: string, includeInteractions?: boolean) => string;
-
-interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    variant?: GlassVariantType;
-    size?: 'sm' | 'md' | 'lg';
-    fullWidth?: boolean;
-    children: React.ReactNode;
-}
-declare const Button: React.FC<ButtonProps>;
-
-interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
-    variant?: GlassVariantType;
-    padding?: 'none' | 'sm' | 'md' | 'lg';
-    enableInteractions?: boolean;
-    children: React.ReactNode;
-}
-declare const Card: React.FC<CardProps>;
-
-interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
-    variant?: GlassVariantType;
-    fullWidth?: boolean;
-    label?: string;
-}
-declare const Input: React.FC<InputProps>;
-
-interface ModalProps {
-    isOpen: boolean;
-    onClose: () => void;
-    variant?: GlassVariantType;
-    title?: string;
-    children: React.ReactNode;
-    size?: 'sm' | 'md' | 'lg' | 'xl';
-}
-declare const Modal: React.FC<ModalProps>;
-
-interface AeroBubbleProps {
-    size?: 'sm' | 'md' | 'lg' | 'xl';
-    color?: 'cyan' | 'blue' | 'lime' | 'sky';
-    className?: string;
-}
-declare const AeroBubble: React.FC<AeroBubbleProps>;
-
-interface AccordionItemProps {
-    id: string;
-    title: string;
-    content: React.ReactNode;
-    icon?: React.ReactNode;
-}
-interface AccordionProps {
-    items: AccordionItemProps[];
-    variant?: GlassVariantType;
-    allowMultiple?: boolean;
-    defaultOpen?: string[];
-    className?: string;
-}
-declare const Accordion: React.FC<AccordionProps>;
-
-export { Accordion, type AccordionItemProps, type AccordionProps, AeroBubble, type AeroBubbleProps, type AeroVariantType, Button, type ButtonProps, Card, type CardProps, type GlassVariantType, Input, type InputProps, Modal, type ModalProps, aeroVariants, getAeroClasses, getGlassClasses, glassVariants };

package/dist/index.d.ts

@@ -1,137 +0,0 @@
-import React from 'react';
-
-declare const glassVariants: {
-    readonly light: {
-        readonly background: "bg-white/5";
-        readonly backdropBlur: "backdrop-blur-[2px]";
-        readonly border: "border border-white/15";
-        readonly shadow: "shadow-lg";
-        readonly hover: "hover:bg-white/10 hover:shadow-xl";
-        readonly focus: "focus:outline-none focus:ring-2 focus:ring-white/10";
-    };
-    readonly medium: {
-        readonly background: "bg-white/20";
-        readonly backdropBlur: "backdrop-blur-lg";
-        readonly border: "border border-white/30";
-        readonly shadow: "shadow-xl";
-        readonly hover: "hover:bg-white/30 hover:shadow-2xl";
-        readonly focus: "focus:outline-none focus:ring-2 focus:ring-white/50";
-    };
-    readonly dark: {
-        readonly background: "bg-black/20";
-        readonly backdropBlur: "backdrop-blur-md";
-        readonly border: "border border-white/10";
-        readonly shadow: "shadow-lg";
-        readonly hover: "hover:bg-black/30 hover:shadow-xl";
-        readonly focus: "focus:outline-none focus:ring-2 focus:ring-white/40";
-    };
-    readonly colored: {
-        readonly background: "bg-gradient-to-br from-white/20 to-white/10";
-        readonly backdropBlur: "backdrop-blur-xl";
-        readonly border: "border border-white/25";
-        readonly shadow: "shadow-2xl";
-        readonly hover: "hover:from-white/30 hover:to-white/20 hover:shadow-[0_8px_32px_0_rgba(255,255,255,0.37)]";
-        readonly focus: "focus:outline-none focus:ring-2 focus:ring-white/60";
-    };
-};
-declare const aeroVariants: {
-    readonly light: {
-        readonly background: "bg-gradient-to-br from-cyan-400/20 to-blue-400/10";
-        readonly backdropBlur: "backdrop-blur-md";
-        readonly border: "border border-cyan-300/30";
-        readonly shadow: "shadow-aero";
-        readonly hover: "hover:from-cyan-400/30 hover:to-blue-400/20 hover:shadow-aero-lg";
-        readonly focus: "focus:outline-none focus:ring-2 focus:ring-cyan-300/50";
-    };
-    readonly medium: {
-        readonly background: "bg-gradient-to-br from-sky-400/25 to-cyan-400/15";
-        readonly backdropBlur: "backdrop-blur-lg";
-        readonly border: "border border-sky-300/40";
-        readonly shadow: "shadow-aero-lg";
-        readonly hover: "hover:from-sky-400/35 hover:to-cyan-400/25 hover:shadow-[0_8px_32px_0_rgba(56,189,248,0.37)]";
-        readonly focus: "focus:outline-none focus:ring-2 focus:ring-sky-300/60";
-    };
-    readonly dark: {
-        readonly background: "bg-gradient-to-br from-blue-500/30 to-cyan-500/20";
-        readonly backdropBlur: "backdrop-blur-md";
-        readonly border: "border border-blue-300/30";
-        readonly shadow: "shadow-aero";
-        readonly hover: "hover:from-blue-500/40 hover:to-cyan-500/30 hover:shadow-aero-lg";
-        readonly focus: "focus:outline-none focus:ring-2 focus:ring-blue-300/50";
-    };
-    readonly colored: {
-        readonly background: "bg-gradient-to-br from-lime-400/25 via-cyan-400/20 to-blue-400/15";
-        readonly backdropBlur: "backdrop-blur-xl";
-        readonly border: "border border-lime-300/35";
-        readonly shadow: "shadow-aero-lg";
-        readonly 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)]";
-        readonly focus: "focus:outline-none focus:ring-2 focus:ring-lime-300/60";
-    };
-};
-type GlassVariantType = keyof typeof glassVariants;
-type AeroVariantType = keyof typeof aeroVariants;
-/**
- * Generate glassmorphism class string
- */
-declare const getGlassClasses: (variant?: GlassVariantType, rounded?: string, includeInteractions?: boolean) => string;
-/**
- * Generate Frutiger Aero class string
- */
-declare const getAeroClasses: (variant?: AeroVariantType, rounded?: string, includeInteractions?: boolean) => string;
-
-interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    variant?: GlassVariantType;
-    size?: 'sm' | 'md' | 'lg';
-    fullWidth?: boolean;
-    children: React.ReactNode;
-}
-declare const Button: React.FC<ButtonProps>;
-
-interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
-    variant?: GlassVariantType;
-    padding?: 'none' | 'sm' | 'md' | 'lg';
-    enableInteractions?: boolean;
-    children: React.ReactNode;
-}
-declare const Card: React.FC<CardProps>;
-
-interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
-    variant?: GlassVariantType;
-    fullWidth?: boolean;
-    label?: string;
-}
-declare const Input: React.FC<InputProps>;
-
-interface ModalProps {
-    isOpen: boolean;
-    onClose: () => void;
-    variant?: GlassVariantType;
-    title?: string;
-    children: React.ReactNode;
-    size?: 'sm' | 'md' | 'lg' | 'xl';
-}
-declare const Modal: React.FC<ModalProps>;
-
-interface AeroBubbleProps {
-    size?: 'sm' | 'md' | 'lg' | 'xl';
-    color?: 'cyan' | 'blue' | 'lime' | 'sky';
-    className?: string;
-}
-declare const AeroBubble: React.FC<AeroBubbleProps>;
-
-interface AccordionItemProps {
-    id: string;
-    title: string;
-    content: React.ReactNode;
-    icon?: React.ReactNode;
-}
-interface AccordionProps {
-    items: AccordionItemProps[];
-    variant?: GlassVariantType;
-    allowMultiple?: boolean;
-    defaultOpen?: string[];
-    className?: string;
-}
-declare const Accordion: React.FC<AccordionProps>;
-
-export { Accordion, type AccordionItemProps, type AccordionProps, AeroBubble, type AeroBubbleProps, type AeroVariantType, Button, type ButtonProps, Card, type CardProps, type GlassVariantType, Input, type InputProps, Modal, type ModalProps, aeroVariants, getAeroClasses, getGlassClasses, glassVariants };