@oalacea/chaosui 0.1.0 → 0.5.0

package/components/buttons/dual-choice/dual-choice.module.css

@@ -0,0 +1,90 @@
+/* dual-choice - Deux boutons OUI/NON côte à côte */
+.container {
+  display: flex;
+  gap: 0;
+  font-family: var(--chaos-font-display, 'Bebas Neue', sans-serif);
+}
+
+.button {
+  flex: 1;
+  padding: 1.5rem 3rem;
+  font-size: 1.5rem;
+  letter-spacing: 0.15em;
+  text-transform: uppercase;
+  border: 2px solid var(--chaos-iron, #333);
+  background: transparent;
+  cursor: pointer;
+  transition: all 0.2s;
+  position: relative;
+  overflow: hidden;
+}
+
+.button::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  transition: left 0.3s;
+  z-index: -1;
+}
+
+.button:hover::before { left: 0; }
+
+.yes { color: var(--chaos-bone, #e8e8e8); border-color: var(--chaos-bone-dark, #666); }
+.yes::before { background: var(--chaos-bone, #e8e8e8); }
+.yes:hover { color: var(--chaos-void, #0a0a0a); border-color: var(--chaos-bone, #e8e8e8); }
+
+.no { color: var(--chaos-blood, #ff0040); border-color: var(--chaos-blood, #ff0040); border-left: none; }
+.no::before { background: var(--chaos-blood, #ff0040); }
+.no:hover { color: var(--chaos-void, #0a0a0a); }
+
+.divider {
+  width: 2px;
+  background: var(--chaos-iron, #333);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+
+.divider::before {
+  content: 'OU';
+  position: absolute;
+  font-size: 0.6rem;
+  color: var(--chaos-bone-dark, #666);
+  background: var(--chaos-void, #0a0a0a);
+  padding: 0.3rem;
+  letter-spacing: 0.1em;
+}
+
+.variantDramatic .yes { color: var(--chaos-gold, #c9a227); border-color: var(--chaos-gold, #c9a227); }
+.variantDramatic .yes::before { background: var(--chaos-gold, #c9a227); }
+
+.variantMinimal .button { border: none; padding: 1rem 2rem; font-size: 1rem; }
+.variantMinimal .button::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: currentColor;
+  transform: scaleX(0);
+  transition: transform 0.3s;
+}
+.variantMinimal .button:hover::after { transform: scaleX(1); }
+.variantMinimal .button::before { display: none; }
+.variantMinimal .button:hover { color: inherit; }
+.variantMinimal .divider { display: none; }
+
+.variantStacked { flex-direction: column; }
+.variantStacked .no { border-left: 2px solid var(--chaos-blood, #ff0040); border-top: none; }
+.variantStacked .divider { width: 100%; height: 2px; }
+
+.sizeSm .button { padding: 0.8rem 1.5rem; font-size: 1rem; }
+.sizeLg .button { padding: 2rem 4rem; font-size: 2rem; }
+
+.disabled { opacity: 0.5; pointer-events: none; }
+.selected { background: currentColor; color: var(--chaos-void, #0a0a0a) !important; }

package/components/buttons/dual-choice/index.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import { forwardRef, HTMLAttributes } from 'react';
+import styles from './dual-choice.module.css';
+
+export interface DualChoiceProps extends HTMLAttributes<HTMLDivElement> {
+  yesLabel?: string;
+  noLabel?: string;
+  onYes?: () => void;
+  onNo?: () => void;
+  variant?: 'default' | 'dramatic' | 'minimal' | 'stacked';
+  size?: 'sm' | 'md' | 'lg';
+  showDivider?: boolean;
+  disabled?: boolean;
+  selectedValue?: 'yes' | 'no' | null;
+}
+
+export const DualChoice = forwardRef<HTMLDivElement, DualChoiceProps>(
+  ({ yesLabel = 'OUI', noLabel = 'NON', onYes, onNo, variant = 'default', size = 'md', showDivider = true, disabled = false, selectedValue = null, className, ...props }, ref) => {
+    const containerClasses = [
+      styles.container,
+      variant === 'dramatic' && styles.variantDramatic,
+      variant === 'minimal' && styles.variantMinimal,
+      variant === 'stacked' && styles.variantStacked,
+      size === 'sm' && styles.sizeSm,
+      size === 'lg' && styles.sizeLg,
+      disabled && styles.disabled,
+      className,
+    ].filter(Boolean).join(' ');
+
+    return (
+      <div ref={ref} className={containerClasses} {...props}>
+        <button 
+          className={`${styles.button} ${styles.yes} ${selectedValue === 'yes' ? styles.selected : ''}`}
+          onClick={onYes}
+          disabled={disabled}
+        >
+          {yesLabel}
+        </button>
+        {showDivider && variant !== 'minimal' && <div className={styles.divider} />}
+        <button 
+          className={`${styles.button} ${styles.no} ${selectedValue === 'no' ? styles.selected : ''}`}
+          onClick={onNo}
+          disabled={disabled}
+        >
+          {noLabel}
+        </button>
+      </div>
+    );
+  }
+);
+
+DualChoice.displayName = 'DualChoice';
+export default DualChoice;

package/components/buttons/glitch-button/glitch-button.module.css

@@ -13,8 +13,8 @@
   cursor: pointer;
   overflow: hidden;
   transition: transform 0.1s;
-  --glitch-color: #ff0040;
-  --glitch-color-alt: #00ffff;
+  --glitch-color: hsl(var(--primary, 347 100% 50%));
+  --glitch-color-alt: hsl(var(--secondary, 180 100% 50%));
 }
 
 .button:active {
@@ -23,20 +23,20 @@
 
 /* Variants */
 .default {
-  background: #0a0a0a;
-  color: #fafafa;
-  border: 1px solid #333;
+  background: hsl(var(--background, 0 0% 4%));
+  color: hsl(var(--foreground, 0 0% 98%));
+  border: 1px solid hsl(var(--border, 0 0% 20%));
 }
 
 .outline {
   background: transparent;
-  color: #fafafa;
+  color: hsl(var(--foreground, 0 0% 98%));
   border: 2px solid currentColor;
 }
 
 .ghost {
   background: transparent;
-  color: #fafafa;
+  color: hsl(var(--foreground, 0 0% 98%));
   border: none;
 }
 

package/components/buttons/tension-bar/index.tsx

@@ -0,0 +1,79 @@
+'use client';
+
+import { forwardRef, HTMLAttributes } from 'react';
+import styles from './tension-bar.module.css';
+
+export interface TensionBarProps extends HTMLAttributes<HTMLDivElement> {
+  value: number;
+  max?: number;
+  labelLeft?: string;
+  labelRight?: string;
+  showPercentage?: boolean;
+  showMarkers?: boolean;
+  markerCount?: number;
+  variant?: 'default' | 'gold' | 'danger' | 'segmented';
+  size?: 'sm' | 'md' | 'lg';
+  innerText?: string;
+  animated?: boolean;
+  dangerThreshold?: number;
+}
+
+export const TensionBar = forwardRef<HTMLDivElement, TensionBarProps>(
+  ({ value, max = 100, labelLeft, labelRight, showPercentage = false, showMarkers = false, markerCount = 10, variant = 'default', size = 'md', innerText, animated = false, dangerThreshold = 80, className, ...props }, ref) => {
+    const percentage = Math.min(100, Math.max(0, (value / max) * 100));
+    const isHigh = variant === 'danger' && percentage >= dangerThreshold;
+
+    const containerClasses = [
+      styles.container,
+      variant === 'gold' && styles.variantGold,
+      variant === 'danger' && styles.variantDanger,
+      variant === 'segmented' && styles.variantSegmented,
+      size === 'sm' && styles.sizeSm,
+      size === 'lg' && styles.sizeLg,
+      innerText && styles.withText,
+      animated && styles.animated,
+      isHigh && styles.high,
+      className,
+    ].filter(Boolean).join(' ');
+
+    const renderSegmented = () => {
+      const segments = [];
+      const filledCount = Math.floor((percentage / 100) * markerCount);
+      for (let i = 0; i < markerCount; i++) {
+        segments.push(
+          <div key={i} className={`${styles.segment} ${i < filledCount ? styles.segmentFilled : ''}`} />
+        );
+      }
+      return segments;
+    };
+
+    return (
+      <div ref={ref} className={containerClasses} {...props}>
+        {(labelLeft || labelRight) && (
+          <div className={styles.labels}>
+            <span className={styles.labelLeft}>{labelLeft}</span>
+            <span className={styles.labelRight}>{labelRight}</span>
+          </div>
+        )}
+        
+        <div className={styles.track}>
+          {innerText && <span className={styles.innerText}>{innerText}</span>}
+          {variant === 'segmented' ? renderSegmented() : <div className={styles.fill} style={{ width: `${percentage}%` }} />}
+          {showPercentage && <span className={styles.percentage}>{Math.round(percentage)}%</span>}
+        </div>
+
+        {showMarkers && variant !== 'segmented' && (
+          <div className={styles.markers}>
+            {Array.from({ length: markerCount + 1 }).map((_, i) => {
+              const markerPercent = (i / markerCount) * 100;
+              return <div key={i} className={`${styles.marker} ${markerPercent <= percentage ? styles.markerActive : ''}`} />;
+            })}
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+
+TensionBar.displayName = 'TensionBar';
+export default TensionBar;

package/components/buttons/tension-bar/tension-bar.module.css

@@ -0,0 +1,105 @@
+/* tension-bar - Barre de tension/progression dramatique */
+.container {
+  width: 100%;
+  position: relative;
+  font-family: var(--chaos-font-mono, 'Space Mono', monospace);
+}
+
+.labels {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 0.5rem;
+  font-size: 0.65rem;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+}
+
+.labelLeft { color: var(--chaos-bone-dark, #666); }
+.labelRight { color: var(--chaos-blood, #ff0040); }
+
+.track {
+  height: 8px;
+  background: var(--chaos-iron, #222);
+  position: relative;
+  overflow: hidden;
+}
+
+.fill {
+  height: 100%;
+  background: var(--chaos-blood, #ff0040);
+  transition: width 0.5s ease-out;
+  position: relative;
+}
+
+.fill::after {
+  content: '';
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 20px;
+  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.3));
+  animation: shimmer 1.5s infinite;
+}
+
+@keyframes shimmer {
+  0% { opacity: 0; }
+  50% { opacity: 1; }
+  100% { opacity: 0; }
+}
+
+.percentage {
+  position: absolute;
+  right: 0;
+  top: -1.5rem;
+  font-size: 0.7rem;
+  color: var(--chaos-blood, #ff0040);
+  font-weight: bold;
+}
+
+.markers { display: flex; justify-content: space-between; margin-top: 0.3rem; }
+.marker { width: 1px; height: 6px; background: var(--chaos-iron, #333); }
+.markerActive { background: var(--chaos-blood, #ff0040); }
+
+.variantGold .fill { background: linear-gradient(to right, var(--chaos-gold-dark, #8b7017), var(--chaos-gold, #c9a227)); }
+.variantGold .labelRight, .variantGold .percentage { color: var(--chaos-gold, #c9a227); }
+.variantGold .markerActive { background: var(--chaos-gold, #c9a227); }
+
+.variantDanger .fill { background: var(--chaos-blood, #ff0040); }
+.variantDanger.high .fill { animation: dangerPulse 0.5s ease-in-out infinite; }
+.variantDanger.high .track { animation: dangerGlow 0.5s ease-in-out infinite; }
+
+@keyframes dangerPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }
+@keyframes dangerGlow {
+  0%, 100% { box-shadow: 0 0 5px var(--chaos-blood, #ff0040); }
+  50% { box-shadow: 0 0 15px var(--chaos-blood, #ff0040); }
+}
+
+.variantSegmented .track { display: flex; gap: 2px; background: transparent; }
+.segment { flex: 1; height: 8px; background: var(--chaos-iron, #222); transition: background 0.3s; }
+.segmentFilled { background: var(--chaos-blood, #ff0040); }
+
+.sizeSm .track, .sizeSm .segment { height: 4px; }
+.sizeLg .track, .sizeLg .segment { height: 16px; }
+
+.withText .track { height: 30px; display: flex; align-items: center; padding: 0 1rem; }
+.innerText {
+  position: absolute;
+  left: 1rem;
+  font-size: 0.7rem;
+  color: var(--chaos-bone, #e8e8e8);
+  z-index: 1;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+}
+
+.animated .fill {
+  background: repeating-linear-gradient(45deg, var(--chaos-blood, #ff0040), var(--chaos-blood, #ff0040) 10px, #cc0033 10px, #cc0033 20px);
+  background-size: 200% 100%;
+  animation: stripeMove 1s linear infinite;
+}
+
+@keyframes stripeMove {
+  0% { background-position: 0 0; }
+  100% { background-position: 28px 0; }
+}

package/components/chaos-vars.css

@@ -0,0 +1,27 @@
+/* Chaos UI - CSS Variables */
+/* These are the DEFAULT values - they will be overridden by your project's globals.css */
+/* Only add this if you don't have these variables defined yet */
+
+:root {
+  /* Standard variables (same as shadcn/ui) */
+  --primary: 347 100% 50%;           /* #ff0040 */
+  --primary-foreground: 0 0% 100%;
+  
+  --secondary: 180 100% 50%;         /* #00ffff */
+  --secondary-foreground: 0 0% 0%;
+  
+  --accent: 300 100% 50%;            /* #ff00ff */
+  --accent-foreground: 0 0% 100%;
+  
+  --background: 0 0% 4%;             /* #0a0a0a */
+  --foreground: 0 0% 98%;            /* #fafafa */
+  
+  --muted: 0 0% 9%;                  /* #171717 */
+  --muted-foreground: 0 0% 63%;      /* #a1a1a1 */
+  
+  --border: 0 0% 20%;                /* #333333 */
+  
+  /* Chaos-specific (optional, for fine-tuning effects) */
+  --destructive: 0 84% 60%;
+  --destructive-foreground: 0 0% 98%;
+}

package/components/cyber/cyber-avatar/css/cyber-avatar.module.css

@@ -0,0 +1,60 @@
+.avatar {
+  --avatar-color: #00f0ff;
+  --avatar-size: 3rem;
+  position: relative;
+  width: var(--avatar-size);
+  height: var(--avatar-size);
+}
+
+.sm { --avatar-size: 2rem; }
+.md { --avatar-size: 3rem; }
+.lg { --avatar-size: 4rem; }
+.xl { --avatar-size: 6rem; }
+
+.cyan { --avatar-color: #00f0ff; }
+.pink { --avatar-color: #ff00ff; }
+.green { --avatar-color: #00ff88; }
+.purple { --avatar-color: #a855f7; }
+
+.image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 50%;
+}
+
+.border {
+  position: absolute;
+  top: -2px;
+  left: -2px;
+  width: calc(100% + 4px);
+  height: calc(100% + 4px);
+  border: 2px solid var(--avatar-color);
+  border-radius: 50%;
+  pointer-events: none;
+}
+
+.glowing .border {
+  box-shadow: 0 0 10px var(--avatar-color), 0 0 20px var(--avatar-color);
+  animation: avatar-glow 2s ease-in-out infinite;
+}
+
+@keyframes avatar-glow {
+  0%, 100% { box-shadow: 0 0 5px var(--avatar-color); }
+  50% { box-shadow: 0 0 15px var(--avatar-color), 0 0 30px var(--avatar-color); }
+}
+
+.status {
+  position: absolute;
+  bottom: 2px;
+  right: 2px;
+  width: 0.75rem;
+  height: 0.75rem;
+  border-radius: 50%;
+  border: 2px solid hsl(var(--background, 0 0% 4%));
+}
+
+.online { background: #00ff88; box-shadow: 0 0 6px #00ff88; }
+.offline { background: #666; }
+.busy { background: #ff0040; box-shadow: 0 0 6px #ff0040; }
+.away { background: #ffaa00; box-shadow: 0 0 6px #ffaa00; }

package/components/cyber/cyber-avatar/css/index.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import { forwardRef, ImgHTMLAttributes } from 'react';
+import styles from './cyber-avatar.module.css';
+
+export interface CyberAvatarProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, 'src'> {
+  src: string;
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+  variant?: 'cyan' | 'pink' | 'green' | 'purple';
+  status?: 'online' | 'offline' | 'busy' | 'away';
+  glowing?: boolean;
+}
+
+export const CyberAvatar = forwardRef<HTMLDivElement, CyberAvatarProps>(
+  ({ src, alt = 'Avatar', size = 'md', variant = 'cyan', status, glowing = false, className, ...props }, ref) => {
+    const classes = [styles.avatar, styles[size], styles[variant], glowing && styles.glowing, className].filter(Boolean).join(' ');
+    return (
+      <div ref={ref} className={classes}>
+        <img src={src} alt={alt} className={styles.image} {...props} />
+        <div className={styles.border} />
+        {status && <span className={`${styles.status} ${styles[status]}`} />}
+      </div>
+    );
+  }
+);
+
+CyberAvatar.displayName = 'CyberAvatar';
+export default CyberAvatar;

package/components/cyber/cyber-avatar/tailwind/index.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import { forwardRef, ImgHTMLAttributes } from 'react';
+
+export interface CyberAvatarProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, 'src'> {
+  src: string;
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+  variant?: 'cyan' | 'pink' | 'green' | 'purple';
+  status?: 'online' | 'offline' | 'busy' | 'away';
+  glowing?: boolean;
+}
+
+const sizeStyles = { sm: 'w-8 h-8', md: 'w-12 h-12', lg: 'w-16 h-16', xl: 'w-24 h-24' };
+const variantStyles = {
+  cyan: 'border-cyan-400 shadow-[0_0_10px_#00f0ff]',
+  pink: 'border-fuchsia-500 shadow-[0_0_10px_#ff00ff]',
+  green: 'border-emerald-400 shadow-[0_0_10px_#00ff88]',
+  purple: 'border-purple-500 shadow-[0_0_10px_#a855f7]',
+};
+const statusStyles = {
+  online: 'bg-emerald-400 shadow-[0_0_6px_#00ff88]',
+  offline: 'bg-gray-500',
+  busy: 'bg-rose-500 shadow-[0_0_6px_#ff0040]',
+  away: 'bg-amber-500 shadow-[0_0_6px_#ffaa00]',
+};
+
+export const CyberAvatar = forwardRef<HTMLDivElement, CyberAvatarProps>(
+  ({ src, alt = 'Avatar', size = 'md', variant = 'cyan', status, glowing = false, className = '', ...props }, ref) => {
+    return (
+      <div ref={ref} className={`relative ${sizeStyles[size]} ${className}`}>
+        <img
+          src={src}
+          alt={alt}
+          className={`w-full h-full object-cover rounded-full border-2 ${variantStyles[variant]} ${glowing ? 'animate-pulse' : ''}`}
+          {...props}
+        />
+        {status && (
+          <span className={`absolute bottom-0.5 right-0.5 w-3 h-3 rounded-full border-2 border-[#0a0a0f] ${statusStyles[status]}`} />
+        )}
+      </div>
+    );
+  }
+);
+
+CyberAvatar.displayName = 'CyberAvatar';
+export default CyberAvatar;

package/components/cyber/cyber-input/css/cyber-input.module.css

@@ -0,0 +1,87 @@
+.wrapper {
+  --input-color: #00f0ff;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.cyan { --input-color: #00f0ff; }
+.pink { --input-color: #ff00ff; }
+.green { --input-color: #00ff88; }
+.purple { --input-color: #a855f7; }
+.hasError { --input-color: #ff0040; }
+
+.label {
+  font-family: var(--font-display, 'Rajdhani', sans-serif);
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.125em;
+  color: var(--input-color);
+}
+
+.inputWrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.input {
+  width: 100%;
+  padding: 0.75rem 1rem;
+  font-family: var(--font-mono, 'Share Tech Mono', monospace);
+  font-size: 0.875rem;
+  color: hsl(var(--foreground, 0 0% 98%));
+  background: rgba(0, 0, 0, 0.5);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 0;
+  outline: none;
+  transition: all 0.3s ease;
+}
+
+.input::placeholder {
+  color: rgba(255, 255, 255, 0.3);
+}
+
+.input:focus {
+  border-color: var(--input-color);
+  box-shadow: 0 0 10px rgba(0, 240, 255, 0.3);
+}
+
+.border {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 0;
+  height: 2px;
+  background: var(--input-color);
+  transition: width 0.3s ease;
+}
+
+.input:focus ~ .border {
+  width: 100%;
+}
+
+.glow {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  width: 0;
+  height: 1.25rem;
+  background: radial-gradient(ellipse, var(--input-color), transparent);
+  opacity: 0;
+  transform: translateX(-50%);
+  transition: all 0.3s ease;
+  pointer-events: none;
+}
+
+.input:focus ~ .glow {
+  width: 80%;
+  opacity: 0.3;
+}
+
+.error {
+  font-family: var(--font-mono, 'Share Tech Mono', monospace);
+  font-size: 0.75rem;
+  color: #ff0040;
+}

package/components/cyber/cyber-input/css/index.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+import { forwardRef, InputHTMLAttributes } from 'react';
+import styles from './cyber-input.module.css';
+
+export interface CyberInputProps extends InputHTMLAttributes<HTMLInputElement> {
+  /** Neon color variant */
+  variant?: 'cyan' | 'pink' | 'green' | 'purple';
+  /** Label above input */
+  label?: string;
+  /** Error message */
+  error?: string;
+}
+
+export const CyberInput = forwardRef<HTMLInputElement, CyberInputProps>(
+  (
+    {
+      variant = 'cyan',
+      label,
+      error,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const wrapperClasses = [
+      styles.wrapper,
+      styles[variant],
+      error && styles.hasError,
+      className,
+    ].filter(Boolean).join(' ');
+
+    return (
+      <div className={wrapperClasses}>
+        {label && <label className={styles.label}>{label}</label>}
+        <div className={styles.inputWrapper}>
+          <input ref={ref} className={styles.input} {...props} />
+          <span className={styles.border} />
+          <span className={styles.glow} />
+        </div>
+        {error && <span className={styles.error}>{error}</span>}
+      </div>
+    );
+  }
+);
+
+CyberInput.displayName = 'CyberInput';
+
+export default CyberInput;