@oalacea/chaosui 0.1.0 → 0.4.0

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

@@ -0,0 +1,54 @@
+'use client';
+
+import { forwardRef, ButtonHTMLAttributes } from 'react';
+import styles from './neon-button.module.css';
+
+export interface NeonButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  /** Neon color variant */
+  variant?: 'cyan' | 'pink' | 'green' | 'purple' | 'red' | 'yellow';
+  /** Button size */
+  size?: 'sm' | 'md' | 'lg';
+  /** Continuous glow pulse animation */
+  glowing?: boolean;
+  /** Animated gradient border */
+  animated?: boolean;
+  /** Cut corner style */
+  cut?: boolean;
+}
+
+export const NeonButton = forwardRef<HTMLButtonElement, NeonButtonProps>(
+  (
+    {
+      children,
+      variant = 'cyan',
+      size = 'md',
+      glowing = false,
+      animated = false,
+      cut = false,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const classes = [
+      styles.button,
+      styles[variant],
+      styles[size],
+      glowing && styles.glowing,
+      animated && styles.animated,
+      cut && styles.cut,
+      className,
+    ].filter(Boolean).join(' ');
+
+    return (
+      <button ref={ref} className={classes} {...props}>
+        <span className={styles.text}>{children}</span>
+        <span className={styles.glow} aria-hidden="true" />
+      </button>
+    );
+  }
+);
+
+NeonButton.displayName = 'NeonButton';
+
+export default NeonButton;

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

@@ -0,0 +1,114 @@
+.button {
+  --neon-color: #00f0ff;
+  --neon-glow: 0 0 10px var(--neon-color), 0 0 20px var(--neon-color), 0 0 40px var(--neon-color);
+  
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.75rem 2rem;
+  font-family: var(--font-display, 'Orbitron', sans-serif);
+  font-size: 0.875rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.125em;
+  color: var(--neon-color);
+  background: transparent;
+  border: 2px solid var(--neon-color);
+  cursor: pointer;
+  overflow: hidden;
+  transition: all 0.3s ease;
+}
+
+.button:hover {
+  background: var(--neon-color);
+  color: hsl(var(--background, 0 0% 4%));
+  box-shadow: var(--neon-glow);
+}
+
+.button:active {
+  transform: scale(0.98);
+}
+
+/* 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.5rem 1.25rem;
+  font-size: 0.75rem;
+  letter-spacing: 0.0625em;
+}
+
+.lg {
+  padding: 1rem 3rem;
+  font-size: 1rem;
+  letter-spacing: 0.1875em;
+}
+
+/* Glowing animation */
+.glowing {
+  animation: neon-pulse 2s ease-in-out infinite;
+}
+
+@keyframes neon-pulse {
+  0%, 100% { box-shadow: 0 0 5px var(--neon-color); }
+  50% { box-shadow: var(--neon-glow); }
+}
+
+/* Animated gradient border */
+.animated {
+  border: none;
+  background: 
+    linear-gradient(hsl(var(--background, 0 0% 4%)), hsl(var(--background, 0 0% 4%))) padding-box,
+    linear-gradient(90deg, #00f0ff, #ff00ff, #00f0ff) border-box;
+  border: 2px solid transparent;
+  background-size: 100% 100%, 200% 100%;
+  animation: border-flow 3s linear infinite;
+}
+
+.animated:hover {
+  background: 
+    linear-gradient(90deg, #00f0ff, #ff00ff) padding-box,
+    linear-gradient(90deg, #00f0ff, #ff00ff, #00f0ff) border-box;
+  color: hsl(var(--background, 0 0% 4%));
+}
+
+@keyframes border-flow {
+  0% { background-position: 0 0, 0% 50%; }
+  100% { background-position: 0 0, 200% 50%; }
+}
+
+/* Cut corners */
+.cut {
+  clip-path: polygon(
+    0 0, calc(100% - 12px) 0, 100% 12px,
+    100% 100%, 12px 100%, 0 calc(100% - 12px)
+  );
+}
+
+/* Glow sweep element */
+.glow {
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, var(--neon-color), transparent);
+  opacity: 0.3;
+  transition: left 0.5s ease;
+}
+
+.button:hover .glow {
+  left: 100%;
+}
+
+.text {
+  position: relative;
+  z-index: 1;
+}

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

@@ -0,0 +1,51 @@
+'use client';
+
+import { forwardRef, ButtonHTMLAttributes } from 'react';
+
+export interface NeonButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: 'cyan' | 'pink' | 'green' | 'purple' | 'red' | 'yellow';
+  size?: 'sm' | 'md' | 'lg';
+  glowing?: boolean;
+}
+
+const variantStyles = {
+  cyan: 'text-cyan-400 border-cyan-400 hover:bg-cyan-400 hover:shadow-[0_0_20px_#00f0ff,0_0_40px_#00f0ff]',
+  pink: 'text-fuchsia-500 border-fuchsia-500 hover:bg-fuchsia-500 hover:shadow-[0_0_20px_#ff00ff,0_0_40px_#ff00ff]',
+  green: 'text-emerald-400 border-emerald-400 hover:bg-emerald-400 hover:shadow-[0_0_20px_#00ff88,0_0_40px_#00ff88]',
+  purple: 'text-purple-500 border-purple-500 hover:bg-purple-500 hover:shadow-[0_0_20px_#a855f7,0_0_40px_#a855f7]',
+  red: 'text-rose-500 border-rose-500 hover:bg-rose-500 hover:shadow-[0_0_20px_#ff0040,0_0_40px_#ff0040]',
+  yellow: 'text-yellow-400 border-yellow-400 hover:bg-yellow-400 hover:shadow-[0_0_20px_#ffff00,0_0_40px_#ffff00]',
+};
+
+const sizeStyles = {
+  sm: 'px-5 py-2 text-xs tracking-wide',
+  md: 'px-8 py-3 text-sm tracking-wider',
+  lg: 'px-12 py-4 text-base tracking-widest',
+};
+
+export const NeonButton = forwardRef<HTMLButtonElement, NeonButtonProps>(
+  ({ children, variant = 'cyan', size = 'md', glowing = false, className = '', ...props }, ref) => {
+    return (
+      <button
+        ref={ref}
+        className={`
+          relative inline-flex items-center justify-center
+          font-['Orbitron',sans-serif] font-bold uppercase
+          bg-transparent border-2 cursor-pointer overflow-hidden
+          transition-all duration-300 ease-out
+          hover:text-[#0a0a0f] active:scale-[0.98]
+          ${variantStyles[variant]}
+          ${sizeStyles[size]}
+          ${glowing ? 'animate-pulse' : ''}
+          ${className}
+        `}
+        {...props}
+      >
+        {children}
+      </button>
+    );
+  }
+);
+
+NeonButton.displayName = 'NeonButton';
+export default NeonButton;

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

@@ -0,0 +1,26 @@
+'use client';
+
+import { forwardRef, HTMLAttributes } from 'react';
+import styles from './neon-divider.module.css';
+
+export interface NeonDividerProps extends HTMLAttributes<HTMLDivElement> {
+  variant?: 'cyan' | 'pink' | 'green' | 'purple' | 'gradient';
+  animated?: boolean;
+  text?: string;
+}
+
+export const NeonDivider = forwardRef<HTMLDivElement, NeonDividerProps>(
+  ({ variant = 'cyan', animated = false, text, className, ...props }, ref) => {
+    const classes = [styles.divider, styles[variant], animated && styles.animated, className].filter(Boolean).join(' ');
+    return (
+      <div ref={ref} className={classes} {...props}>
+        <span className={styles.line} />
+        {text && <span className={styles.text}>{text}</span>}
+        <span className={styles.line} />
+      </div>
+    );
+  }
+);
+
+NeonDivider.displayName = 'NeonDivider';
+export default NeonDivider;

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

@@ -0,0 +1,43 @@
+.divider {
+  --divider-color: #00f0ff;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.cyan { --divider-color: #00f0ff; }
+.pink { --divider-color: #ff00ff; }
+.green { --divider-color: #00ff88; }
+.purple { --divider-color: #a855f7; }
+
+.line {
+  flex: 1;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, var(--divider-color), transparent);
+  box-shadow: 0 0 8px var(--divider-color);
+}
+
+.gradient .line {
+  height: 2px;
+  background: linear-gradient(90deg, #00f0ff, #ff00ff, #00ff88);
+}
+
+.text {
+  flex-shrink: 0;
+  padding: 0 0.5rem;
+  font-family: var(--font-display, 'Orbitron', sans-serif);
+  font-size: 0.6875rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.1875em;
+  color: var(--divider-color);
+}
+
+.animated .line {
+  animation: divider-pulse 2s ease-in-out infinite;
+}
+
+@keyframes divider-pulse {
+  0%, 100% { box-shadow: 0 0 5px var(--divider-color); }
+  50% { box-shadow: 0 0 15px var(--divider-color); }
+}

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

@@ -0,0 +1,36 @@
+'use client';
+
+import { forwardRef, HTMLAttributes } from 'react';
+
+export interface NeonDividerProps extends HTMLAttributes<HTMLDivElement> {
+  variant?: 'cyan' | 'pink' | 'green' | 'purple' | 'gradient';
+  text?: string;
+}
+
+const variantStyles = {
+  cyan: { line: 'from-transparent via-cyan-400 to-transparent shadow-[0_0_8px_#00f0ff]', text: 'text-cyan-400' },
+  pink: { line: 'from-transparent via-fuchsia-500 to-transparent shadow-[0_0_8px_#ff00ff]', text: 'text-fuchsia-500' },
+  green: { line: 'from-transparent via-emerald-400 to-transparent shadow-[0_0_8px_#00ff88]', text: 'text-emerald-400' },
+  purple: { line: 'from-transparent via-purple-500 to-transparent shadow-[0_0_8px_#a855f7]', text: 'text-purple-500' },
+  gradient: { line: 'from-cyan-400 via-fuchsia-500 to-emerald-400', text: 'text-white' },
+};
+
+export const NeonDivider = forwardRef<HTMLDivElement, NeonDividerProps>(
+  ({ variant = 'cyan', text, className = '', ...props }, ref) => {
+    const styles = variantStyles[variant];
+    return (
+      <div ref={ref} className={`flex items-center gap-4 ${className}`} {...props}>
+        <span className={`flex-1 h-px bg-gradient-to-r ${styles.line}`} />
+        {text && (
+          <span className={`flex-shrink-0 px-2 font-['Orbitron',sans-serif] text-[11px] font-semibold uppercase tracking-widest ${styles.text}`}>
+            {text}
+          </span>
+        )}
+        <span className={`flex-1 h-px bg-gradient-to-r ${styles.line}`} />
+      </div>
+    );
+  }
+);
+
+NeonDivider.displayName = 'NeonDivider';
+export default NeonDivider;

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

@@ -0,0 +1,65 @@
+'use client';
+
+import { forwardRef, HTMLAttributes } from 'react';
+import styles from './neon-progress.module.css';
+
+export interface NeonProgressProps extends HTMLAttributes<HTMLDivElement> {
+  /** Current progress value */
+  value: number;
+  /** Maximum value */
+  max?: number;
+  /** Neon color variant */
+  variant?: 'cyan' | 'pink' | 'green' | 'purple' | 'rainbow';
+  /** Bar size */
+  size?: 'sm' | 'md' | 'lg';
+  /** Shimmer animation */
+  animated?: boolean;
+  /** Show percentage value */
+  showValue?: boolean;
+}
+
+export const NeonProgress = forwardRef<HTMLDivElement, NeonProgressProps>(
+  (
+    {
+      value,
+      max = 100,
+      variant = 'cyan',
+      size = 'md',
+      animated = true,
+      showValue = false,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const percentage = Math.min((value / max) * 100, 100);
+
+    return (
+      <div 
+        ref={ref} 
+        className={`${styles.container} ${className || ''}`}
+        {...props}
+      >
+        <div className={`${styles.track} ${styles[size]}`}>
+          <div 
+            className={`${styles.bar} ${styles[variant]} ${animated ? styles.animated : ''}`}
+            style={{ width: `${percentage}%` }}
+          />
+          <div 
+            className={styles.glow}
+            style={{ width: `${percentage}%` }}
+          />
+        </div>
+        {showValue && (
+          <span className={`${styles.value} ${styles[variant]}`}>
+            {Math.round(percentage)}%
+          </span>
+        )}
+      </div>
+    );
+  }
+);
+
+NeonProgress.displayName = 'NeonProgress';
+
+export default NeonProgress;

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

@@ -0,0 +1,88 @@
+.container {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.track {
+  position: relative;
+  flex: 1;
+  height: 0.5rem;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 0.25rem;
+  overflow: hidden;
+}
+
+.sm { height: 0.25rem; }
+.md { height: 0.5rem; }
+.lg { height: 0.75rem; }
+
+.bar {
+  --progress-color: #00f0ff;
+  height: 100%;
+  background: var(--progress-color);
+  border-radius: 0.25rem;
+  transition: width 0.5s ease;
+}
+
+/* Variants */
+.cyan { --progress-color: #00f0ff; }
+.pink { --progress-color: #ff00ff; }
+.green { --progress-color: #00ff88; }
+.purple { --progress-color: #a855f7; }
+
+.rainbow {
+  background: linear-gradient(90deg, #00f0ff, #ff00ff, #00ff88, #00f0ff);
+  background-size: 200% 100%;
+  animation: rainbow-shift 3s linear infinite;
+}
+
+@keyframes rainbow-shift {
+  0% { background-position: 0% 50%; }
+  100% { background-position: 200% 50%; }
+}
+
+/* Shimmer animation */
+.animated {
+  position: relative;
+  overflow: hidden;
+}
+
+.animated::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
+  animation: shimmer 2s infinite;
+}
+
+@keyframes shimmer {
+  0% { left: -100%; }
+  100% { left: 100%; }
+}
+
+/* Glow effect */
+.glow {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  height: 1.25rem;
+  background: var(--progress-color, #00f0ff);
+  filter: blur(0.5rem);
+  opacity: 0.5;
+  transform: translateY(-50%);
+  pointer-events: none;
+}
+
+/* Value display */
+.value {
+  font-family: var(--font-display, 'Orbitron', monospace);
+  font-size: 0.75rem;
+  font-weight: 700;
+  color: var(--progress-color, #00f0ff);
+  min-width: 2.5rem;
+  text-align: right;
+}

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

@@ -0,0 +1,46 @@
+'use client';
+
+import { forwardRef, HTMLAttributes } from 'react';
+
+export interface NeonProgressProps extends HTMLAttributes<HTMLDivElement> {
+  value: number;
+  max?: number;
+  variant?: 'cyan' | 'pink' | 'green' | 'purple';
+  size?: 'sm' | 'md' | 'lg';
+  showValue?: boolean;
+}
+
+const variantStyles = {
+  cyan: { bg: 'bg-cyan-400', text: 'text-cyan-400', glow: 'shadow-[0_0_10px_#00f0ff]' },
+  pink: { bg: 'bg-fuchsia-500', text: 'text-fuchsia-500', glow: 'shadow-[0_0_10px_#ff00ff]' },
+  green: { bg: 'bg-emerald-400', text: 'text-emerald-400', glow: 'shadow-[0_0_10px_#00ff88]' },
+  purple: { bg: 'bg-purple-500', text: 'text-purple-500', glow: 'shadow-[0_0_10px_#a855f7]' },
+};
+
+const sizeStyles = { sm: 'h-1', md: 'h-2', lg: 'h-3' };
+
+export const NeonProgress = forwardRef<HTMLDivElement, NeonProgressProps>(
+  ({ value, max = 100, variant = 'cyan', size = 'md', showValue = false, className = '', ...props }, ref) => {
+    const percentage = Math.min((value / max) * 100, 100);
+    const styles = variantStyles[variant];
+    
+    return (
+      <div ref={ref} className={`flex items-center gap-3 ${className}`} {...props}>
+        <div className={`relative flex-1 ${sizeStyles[size]} bg-white/10 rounded-full overflow-hidden`}>
+          <div 
+            className={`h-full ${styles.bg} ${styles.glow} rounded-full transition-all duration-500 ease-out`}
+            style={{ width: `${percentage}%` }}
+          />
+        </div>
+        {showValue && (
+          <span className={`font-['Orbitron',sans-serif] text-xs font-bold ${styles.text} min-w-[40px] text-right`}>
+            {Math.round(percentage)}%
+          </span>
+        )}
+      </div>
+    );
+  }
+);
+
+NeonProgress.displayName = 'NeonProgress';
+export default NeonProgress;

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

@@ -0,0 +1,41 @@
+'use client';
+
+import { forwardRef, HTMLAttributes } from 'react';
+import styles from './neon-tabs.module.css';
+
+export interface NeonTab {
+  id: string;
+  label: string;
+  icon?: React.ReactNode;
+}
+
+export interface NeonTabsProps extends HTMLAttributes<HTMLDivElement> {
+  tabs: NeonTab[];
+  activeTab: string;
+  onChange: (tabId: string) => void;
+  variant?: 'cyan' | 'pink' | 'green' | 'purple';
+}
+
+export const NeonTabs = forwardRef<HTMLDivElement, NeonTabsProps>(
+  ({ tabs, activeTab, onChange, variant = 'cyan', className, ...props }, ref) => {
+    return (
+      <div ref={ref} className={`${styles.tabs} ${styles[variant]} ${className || ''}`} role="tablist" {...props}>
+        {tabs.map((tab) => (
+          <button
+            key={tab.id}
+            role="tab"
+            aria-selected={activeTab === tab.id}
+            className={`${styles.tab} ${activeTab === tab.id ? styles.active : ''}`}
+            onClick={() => onChange(tab.id)}
+          >
+            {tab.icon && <span className={styles.icon}>{tab.icon}</span>}
+            <span className={styles.label}>{tab.label}</span>
+          </button>
+        ))}
+      </div>
+    );
+  }
+);
+
+NeonTabs.displayName = 'NeonTabs';
+export default NeonTabs;

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

@@ -0,0 +1,45 @@
+.tabs {
+  --tabs-color: #00f0ff;
+  display: flex;
+  gap: 0.25rem;
+  padding: 0.25rem;
+  background: rgba(0, 0, 0, 0.5);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.cyan { --tabs-color: #00f0ff; }
+.pink { --tabs-color: #ff00ff; }
+.green { --tabs-color: #00ff88; }
+.purple { --tabs-color: #a855f7; }
+
+.tab {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.625rem 1.25rem;
+  font-family: var(--font-display, 'Orbitron', sans-serif);
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.0625em;
+  color: rgba(255, 255, 255, 0.5);
+  background: transparent;
+  border: 1px solid transparent;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.tab:hover {
+  color: rgba(255, 255, 255, 0.8);
+  background: rgba(255, 255, 255, 0.05);
+}
+
+.active {
+  color: var(--tabs-color);
+  background: rgba(0, 240, 255, 0.1);
+  border-color: var(--tabs-color);
+  box-shadow: 0 0 10px var(--tabs-color), inset 0 0 10px rgba(0, 240, 255, 0.1);
+}
+
+.icon { font-size: 0.875rem; }
+.label { white-space: nowrap; }

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

@@ -0,0 +1,53 @@
+'use client';
+
+import { forwardRef, HTMLAttributes } from 'react';
+
+export interface NeonTab {
+  id: string;
+  label: string;
+  icon?: React.ReactNode;
+}
+
+export interface NeonTabsProps extends HTMLAttributes<HTMLDivElement> {
+  tabs: NeonTab[];
+  activeTab: string;
+  onChange: (tabId: string) => void;
+  variant?: 'cyan' | 'pink' | 'green' | 'purple';
+}
+
+const variantStyles = {
+  cyan: { active: 'text-cyan-400 bg-cyan-400/10 border-cyan-400 shadow-[0_0_10px_#00f0ff]' },
+  pink: { active: 'text-fuchsia-500 bg-fuchsia-500/10 border-fuchsia-500 shadow-[0_0_10px_#ff00ff]' },
+  green: { active: 'text-emerald-400 bg-emerald-400/10 border-emerald-400 shadow-[0_0_10px_#00ff88]' },
+  purple: { active: 'text-purple-500 bg-purple-500/10 border-purple-500 shadow-[0_0_10px_#a855f7]' },
+};
+
+export const NeonTabs = forwardRef<HTMLDivElement, NeonTabsProps>(
+  ({ tabs, activeTab, onChange, variant = 'cyan', className = '', ...props }, ref) => {
+    const colors = variantStyles[variant];
+    return (
+      <div ref={ref} className={`flex gap-1 p-1 bg-black/50 border border-white/10 ${className}`} role="tablist" {...props}>
+        {tabs.map((tab) => (
+          <button
+            key={tab.id}
+            role="tab"
+            aria-selected={activeTab === tab.id}
+            className={`
+              flex items-center gap-2 px-5 py-2.5
+              font-['Orbitron',sans-serif] text-xs font-semibold uppercase tracking-wide
+              border transition-all duration-300 cursor-pointer
+              ${activeTab === tab.id ? colors.active : 'text-white/50 bg-transparent border-transparent hover:text-white/80 hover:bg-white/5'}
+            `}
+            onClick={() => onChange(tab.id)}
+          >
+            {tab.icon && <span className="text-sm">{tab.icon}</span>}
+            <span className="whitespace-nowrap">{tab.label}</span>
+          </button>
+        ))}
+      </div>
+    );
+  }
+);
+
+NeonTabs.displayName = 'NeonTabs';
+export default NeonTabs;