@oalacea/chaosui 0.1.0 → 0.4.0

package/components/layout/hologram-card/css/hologram-card.module.css

@@ -0,0 +1,102 @@
+.card {
+  --holo-color: #00f0ff;
+  --holo-bg: rgba(0, 240, 255, 0.05);
+  
+  position: relative;
+  padding: 1.5rem;
+  background: var(--holo-bg);
+  border: 1px solid var(--holo-color);
+  border-radius: 0.25rem;
+  overflow: hidden;
+}
+
+.card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: linear-gradient(90deg, transparent, var(--holo-color), transparent);
+  animation: scan-line 3s linear infinite;
+}
+
+@keyframes scan-line {
+  0% { top: 0; opacity: 1; }
+  50% { opacity: 0.5; }
+  100% { top: 100%; opacity: 1; }
+}
+
+/* Variants */
+.cyan {
+  --holo-color: #00f0ff;
+  --holo-bg: rgba(0, 240, 255, 0.05);
+}
+
+.pink {
+  --holo-color: #ff00ff;
+  --holo-bg: rgba(255, 0, 255, 0.05);
+}
+
+.green {
+  --holo-color: #00ff88;
+  --holo-bg: rgba(0, 255, 136, 0.05);
+}
+
+.purple {
+  --holo-color: #a855f7;
+  --holo-bg: rgba(168, 85, 247, 0.05);
+}
+
+.content {
+  position: relative;
+  z-index: 2;
+}
+
+.scanlines {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+    0deg,
+    transparent,
+    transparent 2px,
+    rgba(0, 0, 0, 0.1) 2px,
+    rgba(0, 0, 0, 0.1) 4px
+  );
+  pointer-events: none;
+  z-index: 3;
+}
+
+.glow {
+  position: absolute;
+  top: -50%;
+  left: -50%;
+  width: 200%;
+  height: 200%;
+  background: radial-gradient(circle, var(--holo-bg) 0%, transparent 70%);
+  opacity: 0.5;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.flicker {
+  animation: hologram-flicker 4s infinite;
+}
+
+@keyframes hologram-flicker {
+  0%, 100% { opacity: 1; }
+  92% { opacity: 1; }
+  93% { opacity: 0.8; }
+  94% { opacity: 1; }
+  95% { opacity: 0.9; }
+  96% { opacity: 1; }
+}
+
+.card:hover {
+  box-shadow: 
+    0 0 20px var(--holo-color),
+    inset 0 0 20px rgba(0, 240, 255, 0.1);
+}

package/components/layout/hologram-card/css/index.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import { forwardRef, HTMLAttributes } from 'react';
+import styles from './hologram-card.module.css';
+
+export interface HologramCardProps extends HTMLAttributes<HTMLDivElement> {
+  /** Neon color variant */
+  variant?: 'cyan' | 'pink' | 'green' | 'purple';
+  /** Show CRT scanlines */
+  scanlines?: boolean;
+  /** Flicker effect */
+  flicker?: boolean;
+}
+
+export const HologramCard = forwardRef<HTMLDivElement, HologramCardProps>(
+  (
+    {
+      children,
+      variant = 'cyan',
+      scanlines = true,
+      flicker = false,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const classes = [
+      styles.card,
+      styles[variant],
+      flicker && styles.flicker,
+      className,
+    ].filter(Boolean).join(' ');
+
+    return (
+      <div ref={ref} className={classes} {...props}>
+        <div className={styles.content}>{children}</div>
+        {scanlines && <div className={styles.scanlines} />}
+        <div className={styles.glow} />
+      </div>
+    );
+  }
+);
+
+HologramCard.displayName = 'HologramCard';
+
+export default HologramCard;

package/components/layout/hologram-card/tailwind/index.tsx

@@ -0,0 +1,61 @@
+'use client';
+
+import { forwardRef, HTMLAttributes, useId } from 'react';
+
+export interface HologramCardProps extends HTMLAttributes<HTMLDivElement> {
+  variant?: 'cyan' | 'pink' | 'green' | 'purple';
+  scanlines?: boolean;
+}
+
+const variantStyles = {
+  cyan: { border: 'border-cyan-400', bg: 'bg-cyan-400/5', glow: 'hover:shadow-[0_0_20px_#00f0ff]', color: '#00f0ff' },
+  pink: { border: 'border-fuchsia-500', bg: 'bg-fuchsia-500/5', glow: 'hover:shadow-[0_0_20px_#ff00ff]', color: '#ff00ff' },
+  green: { border: 'border-emerald-400', bg: 'bg-emerald-400/5', glow: 'hover:shadow-[0_0_20px_#00ff88]', color: '#00ff88' },
+  purple: { border: 'border-purple-500', bg: 'bg-purple-500/5', glow: 'hover:shadow-[0_0_20px_#a855f7]', color: '#a855f7' },
+};
+
+export const HologramCard = forwardRef<HTMLDivElement, HologramCardProps>(
+  ({ children, variant = 'cyan', scanlines = true, className = '', ...props }, ref) => {
+    const id = useId();
+    const styles = variantStyles[variant];
+    
+    return (
+      <>
+        <style>{`
+          @keyframes scan-${id} {
+            0% { top: 0; opacity: 1; }
+            50% { opacity: 0.5; }
+            100% { top: 100%; opacity: 1; }
+          }
+        `}</style>
+        <div
+          ref={ref}
+          className={`
+            relative p-6 rounded border ${styles.border} ${styles.bg}
+            overflow-hidden transition-shadow duration-300 ${styles.glow}
+            ${className}
+          `}
+          {...props}
+        >
+          <div
+            className="absolute left-0 right-0 h-0.5"
+            style={{
+              background: `linear-gradient(90deg, transparent, ${styles.color}, transparent)`,
+              animation: `scan-${id} 3s linear infinite`,
+            }}
+          />
+          <div className="relative z-10">{children}</div>
+          {scanlines && (
+            <div
+              className="absolute inset-0 pointer-events-none z-20"
+              style={{ background: 'repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.1) 2px, rgba(0,0,0,0.1) 4px)' }}
+            />
+          )}
+        </div>
+      </>
+    );
+  }
+);
+
+HologramCard.displayName = 'HologramCard';
+export default HologramCard;

package/components/navigation/hexagon-menu/css/hexagon-menu.module.css

@@ -0,0 +1,55 @@
+.menu {
+  --hex-color: #00f0ff;
+  --hex-size: 5rem;
+  --hex-offset: 2.5rem;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  justify-content: center;
+}
+
+.cyan { --hex-color: #00f0ff; }
+.pink { --hex-color: #ff00ff; }
+.green { --hex-color: #00ff88; }
+.purple { --hex-color: #a855f7; }
+
+.sm { --hex-size: 3.75rem; --hex-offset: 1.875rem; }
+.md { --hex-size: 5rem; --hex-offset: 2.5rem; }
+.lg { --hex-size: 6.25rem; --hex-offset: 3.125rem; }
+
+.item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: var(--hex-size);
+  height: calc(var(--hex-size) * 1.1547);
+  padding: 0.5rem;
+  background: rgba(0, 0, 0, 0.6);
+  border: 2px solid var(--hex-color);
+  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.item:hover {
+  background: rgba(0, 240, 255, 0.2);
+  box-shadow: 0 0 20px var(--hex-color);
+  transform: scale(1.1);
+}
+
+.icon {
+  font-size: calc(var(--hex-size) / 3);
+  color: var(--hex-color);
+  margin-bottom: 0.25rem;
+}
+
+.label {
+  font-family: var(--font-display, 'Orbitron', sans-serif);
+  font-size: 0.5625rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.0625em;
+  color: rgba(255, 255, 255, 0.9);
+  text-align: center;
+}

package/components/navigation/hexagon-menu/css/index.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import { forwardRef, HTMLAttributes } from 'react';
+import styles from './hexagon-menu.module.css';
+
+export interface HexagonMenuItem {
+  id: string;
+  label: string;
+  icon?: React.ReactNode;
+  onClick?: () => void;
+}
+
+export interface HexagonMenuProps extends HTMLAttributes<HTMLElement> {
+  items: HexagonMenuItem[];
+  variant?: 'cyan' | 'pink' | 'green' | 'purple';
+  size?: 'sm' | 'md' | 'lg';
+}
+
+export const HexagonMenu = forwardRef<HTMLElement, HexagonMenuProps>(
+  ({ items, variant = 'cyan', size = 'md', className, ...props }, ref) => {
+    return (
+      <nav ref={ref} className={`${styles.menu} ${styles[variant]} ${styles[size]} ${className || ''}`} {...props}>
+        {items.map((item, i) => (
+          <button key={item.id} className={styles.item} onClick={item.onClick} style={{ marginTop: i % 2 === 1 ? 'var(--hex-offset)' : 0 }}>
+            {item.icon && <span className={styles.icon}>{item.icon}</span>}
+            <span className={styles.label}>{item.label}</span>
+          </button>
+        ))}
+      </nav>
+    );
+  }
+);
+
+HexagonMenu.displayName = 'HexagonMenu';
+export default HexagonMenu;

package/components/navigation/hexagon-menu/tailwind/index.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+import { forwardRef, HTMLAttributes } from 'react';
+
+export interface HexagonMenuItem {
+  id: string;
+  label: string;
+  icon?: React.ReactNode;
+  onClick?: () => void;
+}
+
+export interface HexagonMenuProps extends HTMLAttributes<HTMLElement> {
+  items: HexagonMenuItem[];
+  variant?: 'cyan' | 'pink' | 'green' | 'purple';
+}
+
+const variantStyles = {
+  cyan: { border: 'border-cyan-400', hover: 'hover:bg-cyan-400/20 hover:shadow-[0_0_20px_#00f0ff]', icon: 'text-cyan-400' },
+  pink: { border: 'border-fuchsia-500', hover: 'hover:bg-fuchsia-500/20 hover:shadow-[0_0_20px_#ff00ff]', icon: 'text-fuchsia-500' },
+  green: { border: 'border-emerald-400', hover: 'hover:bg-emerald-400/20 hover:shadow-[0_0_20px_#00ff88]', icon: 'text-emerald-400' },
+  purple: { border: 'border-purple-500', hover: 'hover:bg-purple-500/20 hover:shadow-[0_0_20px_#a855f7]', icon: 'text-purple-500' },
+};
+
+export const HexagonMenu = forwardRef<HTMLElement, HexagonMenuProps>(
+  ({ items, variant = 'cyan', className = '', ...props }, ref) => {
+    const colors = variantStyles[variant];
+    return (
+      <nav ref={ref} className={`flex flex-wrap gap-2 justify-center ${className}`} {...props}>
+        {items.map((item, i) => (
+          <button
+            key={item.id}
+            className={`
+              flex flex-col items-center justify-center w-20 h-[92px] p-2
+              bg-black/60 border-2 ${colors.border}
+              transition-all duration-300 cursor-pointer
+              ${colors.hover} hover:scale-110 active:scale-105
+            `}
+            style={{ clipPath: 'polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)', marginTop: i % 2 === 1 ? '40px' : '0' }}
+            onClick={item.onClick}
+          >
+            {item.icon && <span className={`text-2xl ${colors.icon} mb-1`}>{item.icon}</span>}
+            <span className="font-['Orbitron',sans-serif] text-[9px] font-semibold uppercase tracking-wide text-white/90 text-center">
+              {item.label}
+            </span>
+          </button>
+        ))}
+      </nav>
+    );
+  }
+);
+
+HexagonMenu.displayName = 'HexagonMenu';
+export default HexagonMenu;

package/components/neon/neon-alert/css/index.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+import { forwardRef, HTMLAttributes } from 'react';
+import styles from './neon-alert.module.css';
+
+export interface NeonAlertProps extends HTMLAttributes<HTMLDivElement> {
+  /** Alert type */
+  variant?: 'info' | 'success' | 'warning' | 'error';
+  /** Alert title */
+  title?: string;
+  /** Dismissible with close button */
+  dismissible?: boolean;
+  /** Close callback */
+  onDismiss?: () => void;
+}
+
+export const NeonAlert = forwardRef<HTMLDivElement, NeonAlertProps>(
+  (
+    {
+      children,
+      variant = 'info',
+      title,
+      dismissible = false,
+      onDismiss,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <div 
+        ref={ref} 
+        className={`${styles.alert} ${styles[variant]} ${className || ''}`}
+        role="alert"
+        {...props}
+      >
+        <div className={styles.content}>
+          {title && <div className={styles.title}>{title}</div>}
+          <div className={styles.message}>{children}</div>
+        </div>
+        {dismissible && (
+          <button className={styles.dismiss} onClick={onDismiss} aria-label="Dismiss">
+            ✕
+          </button>
+        )}
+      </div>
+    );
+  }
+);
+
+NeonAlert.displayName = 'NeonAlert';
+
+export default NeonAlert;

package/components/neon/neon-alert/css/neon-alert.module.css

@@ -0,0 +1,60 @@
+.alert {
+  --alert-color: #00f0ff;
+  
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 1rem;
+  background: rgba(0, 0, 0, 0.5);
+  border: 1px solid var(--alert-color);
+  border-left: 4px solid var(--alert-color);
+  box-shadow: 0 0 10px rgba(0, 240, 255, 0.2);
+  animation: alert-slide 0.3s ease-out;
+}
+
+@keyframes alert-slide {
+  from { opacity: 0; transform: translateX(-20px); }
+  to { opacity: 1; transform: translateX(0); }
+}
+
+.info { --alert-color: #00f0ff; }
+.success { --alert-color: #00ff88; }
+.warning { --alert-color: #ffaa00; }
+.error { --alert-color: #ff0040; }
+
+.content {
+  flex: 1;
+  min-width: 0;
+}
+
+.title {
+  margin-bottom: 0.25rem;
+  font-family: var(--font-display, 'Orbitron', sans-serif);
+  font-size: 0.8125rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.0625em;
+  color: var(--alert-color);
+}
+
+.message {
+  font-family: var(--font-body, 'Rajdhani', sans-serif);
+  font-size: 0.875rem;
+  color: rgba(255, 255, 255, 0.8);
+  line-height: 1.5;
+}
+
+.dismiss {
+  flex-shrink: 0;
+  padding: 0.25rem 0.5rem;
+  font-size: 0.875rem;
+  color: rgba(255, 255, 255, 0.5);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  transition: color 0.2s ease;
+}
+
+.dismiss:hover {
+  color: var(--alert-color);
+}

package/components/neon/neon-alert/tailwind/index.tsx

@@ -0,0 +1,59 @@
+'use client';
+
+import { forwardRef, HTMLAttributes } from 'react';
+
+export interface NeonAlertProps extends HTMLAttributes<HTMLDivElement> {
+  variant?: 'info' | 'success' | 'warning' | 'error';
+  title?: string;
+  dismissible?: boolean;
+  onDismiss?: () => void;
+}
+
+const variantStyles = {
+  info: 'border-cyan-400 shadow-[0_0_10px_rgba(0,240,255,0.2)] [&_.title]:text-cyan-400',
+  success: 'border-emerald-400 shadow-[0_0_10px_rgba(0,255,136,0.2)] [&_.title]:text-emerald-400',
+  warning: 'border-amber-400 shadow-[0_0_10px_rgba(255,170,0,0.2)] [&_.title]:text-amber-400',
+  error: 'border-rose-500 shadow-[0_0_10px_rgba(255,0,64,0.2)] [&_.title]:text-rose-500',
+};
+
+export const NeonAlert = forwardRef<HTMLDivElement, NeonAlertProps>(
+  ({ children, variant = 'info', title, dismissible = false, onDismiss, className = '', ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        role="alert"
+        className={`
+          flex items-start gap-3 p-4
+          bg-black/50 border border-l-4
+          animate-[slideIn_0.3s_ease-out]
+          ${variantStyles[variant]}
+          ${className}
+        `}
+        {...props}
+      >
+        <div className="flex-1 min-w-0">
+          {title && (
+            <div className="title mb-1 font-['Orbitron',sans-serif] text-[13px] font-bold uppercase tracking-wide">
+              {title}
+            </div>
+          )}
+          <div className="font-['Rajdhani',sans-serif] text-sm text-white/80 leading-relaxed">
+            {children}
+          </div>
+        </div>
+        {dismissible && (
+          <button
+            className="flex-shrink-0 px-2 py-1 text-sm text-white/50 hover:text-white bg-transparent border-none cursor-pointer transition-colors"
+            onClick={onDismiss}
+            aria-label="Dismiss"
+          >
+            ✕
+          </button>
+        )}
+      </div>
+    );
+  }
+);
+
+NeonAlert.displayName = 'NeonAlert';
+export default NeonAlert;

package/components/neon/neon-badge/css/index.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+import { forwardRef, HTMLAttributes } from 'react';
+import styles from './neon-badge.module.css';
+
+export interface NeonBadgeProps extends HTMLAttributes<HTMLSpanElement> {
+  /** Neon color variant */
+  variant?: 'cyan' | 'pink' | 'green' | 'purple' | 'red' | 'yellow';
+  /** Badge size */
+  size?: 'sm' | 'md' | 'lg';
+  /** Continuous pulse animation */
+  pulse?: boolean;
+  /** Outline style instead of filled */
+  outline?: boolean;
+}
+
+export const NeonBadge = forwardRef<HTMLSpanElement, NeonBadgeProps>(
+  (
+    {
+      children,
+      variant = 'cyan',
+      size = 'md',
+      pulse = false,
+      outline = false,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const classes = [
+      styles.badge,
+      styles[variant],
+      styles[size],
+      pulse && styles.pulse,
+      outline && styles.outline,
+      className,
+    ].filter(Boolean).join(' ');
+
+    return (
+      <span ref={ref} className={classes} {...props}>
+        {children}
+      </span>
+    );
+  }
+);
+
+NeonBadge.displayName = 'NeonBadge';
+
+export default NeonBadge;

package/components/neon/neon-badge/css/neon-badge.module.css

@@ -0,0 +1,53 @@
+.badge {
+  --neon-color: #00f0ff;
+  
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.25rem 0.75rem;
+  font-family: var(--font-display, 'Orbitron', sans-serif);
+  font-size: 0.6875rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.0625em;
+  color: hsl(var(--background, 0 0% 4%));
+  background: var(--neon-color);
+  border-radius: 2px;
+  box-shadow: 0 0 10px var(--neon-color);
+}
+
+/* Variants */
+.cyan { --neon-color: #00f0ff; }
+.pink { --neon-color: #ff00ff; }
+.green { --neon-color: #00ff88; }
+.purple { --neon-color: #a855f7; }
+.red { --neon-color: #ff0040; }
+.yellow { --neon-color: #ffff00; }
+
+/* Sizes */
+.sm {
+  padding: 0.125rem 0.5rem;
+  font-size: 0.5625rem;
+}
+
+.lg {
+  padding: 0.375rem 1rem;
+  font-size: 0.8125rem;
+}
+
+/* Outline variant */
+.outline {
+  color: var(--neon-color);
+  background: transparent;
+  border: 1px solid var(--neon-color);
+}
+
+/* Pulse animation */
+.pulse {
+  animation: badge-pulse 2s ease-in-out infinite;
+}
+
+@keyframes badge-pulse {
+  0%, 100% { box-shadow: 0 0 5px var(--neon-color); }
+  50% { box-shadow: 0 0 20px var(--neon-color), 0 0 30px var(--neon-color); }
+}

package/components/neon/neon-badge/tailwind/index.tsx

@@ -0,0 +1,50 @@
+'use client';
+
+import { forwardRef, HTMLAttributes } from 'react';
+
+export interface NeonBadgeProps extends HTMLAttributes<HTMLSpanElement> {
+  variant?: 'cyan' | 'pink' | 'green' | 'purple' | 'red' | 'yellow';
+  size?: 'sm' | 'md' | 'lg';
+  pulse?: boolean;
+  outline?: boolean;
+}
+
+const variantStyles = {
+  cyan: { solid: 'bg-cyan-400 shadow-[0_0_10px_#00f0ff]', outline: 'text-cyan-400 border-cyan-400' },
+  pink: { solid: 'bg-fuchsia-500 shadow-[0_0_10px_#ff00ff]', outline: 'text-fuchsia-500 border-fuchsia-500' },
+  green: { solid: 'bg-emerald-400 shadow-[0_0_10px_#00ff88]', outline: 'text-emerald-400 border-emerald-400' },
+  purple: { solid: 'bg-purple-500 shadow-[0_0_10px_#a855f7]', outline: 'text-purple-500 border-purple-500' },
+  red: { solid: 'bg-rose-500 shadow-[0_0_10px_#ff0040]', outline: 'text-rose-500 border-rose-500' },
+  yellow: { solid: 'bg-yellow-400 shadow-[0_0_10px_#ffff00]', outline: 'text-yellow-400 border-yellow-400' },
+};
+
+const sizeStyles = {
+  sm: 'px-2 py-0.5 text-[9px]',
+  md: 'px-3 py-1 text-[11px]',
+  lg: 'px-4 py-1.5 text-[13px]',
+};
+
+export const NeonBadge = forwardRef<HTMLSpanElement, NeonBadgeProps>(
+  ({ children, variant = 'cyan', size = 'md', pulse = false, outline = false, className = '', ...props }, ref) => {
+    const colors = variantStyles[variant];
+    return (
+      <span
+        ref={ref}
+        className={`
+          inline-flex items-center justify-center
+          font-['Orbitron',sans-serif] font-bold uppercase tracking-wide rounded-sm
+          ${sizeStyles[size]}
+          ${outline ? `bg-transparent border ${colors.outline}` : `text-[#0a0a0f] ${colors.solid}`}
+          ${pulse ? 'animate-pulse' : ''}
+          ${className}
+        `}
+        {...props}
+      >
+        {children}
+      </span>
+    );
+  }
+);
+
+NeonBadge.displayName = 'NeonBadge';
+export default NeonBadge;