@oalacea/chaosui 0.4.0 → 0.5.1

package/buttons/cta-brutal/css/cta-brutal.module.css

@@ -0,0 +1,175 @@
+/* cta-brutal - CTA style brutaliste */
+.button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  padding: 1.5rem 3rem;
+  background: var(--chaos-blood, #ff0040);
+  color: var(--chaos-void, #0a0a0a);
+  font-family: var(--chaos-font-display, 'Bebas Neue', sans-serif);
+  font-size: 1.5rem;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  text-decoration: none;
+  border: none;
+  cursor: pointer;
+  position: relative;
+  transition: all 0.15s;
+  clip-path: polygon(0 0, 100% 0, 95% 100%, 0 100%);
+}
+
+.button:hover {
+  transform: translate(-2px, -2px);
+  box-shadow: 4px 4px 0 var(--chaos-bone, #e8e8e8);
+}
+
+.button:active {
+  transform: translate(0, 0);
+  box-shadow: none;
+}
+
+/* Icon */
+.icon {
+  font-size: 1.2em;
+  transition: transform 0.3s;
+}
+
+.button:hover .icon {
+  transform: translateX(5px);
+}
+
+/* Variants */
+.variantOutline {
+  background: transparent;
+  border: 3px solid var(--chaos-blood, #ff0040);
+  color: var(--chaos-blood, #ff0040);
+  clip-path: none;
+}
+
+.variantOutline:hover {
+  background: var(--chaos-blood, #ff0040);
+  color: var(--chaos-void, #0a0a0a);
+}
+
+.variantGold {
+  background: var(--chaos-gold, #c9a227);
+}
+
+.variantGold:hover {
+  box-shadow: 4px 4px 0 var(--chaos-gold-dark, #8b7017);
+}
+
+.variantInverse {
+  background: var(--chaos-bone, #e8e8e8);
+  color: var(--chaos-void, #0a0a0a);
+}
+
+.variantInverse:hover {
+  box-shadow: 4px 4px 0 var(--chaos-blood, #ff0040);
+}
+
+/* Glitch effect on hover */
+.glitch {
+  position: relative;
+}
+
+.glitch::before,
+.glitch::after {
+  content: attr(data-text);
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+}
+
+.glitch:hover::before {
+  animation: glitch1 0.3s infinite;
+  color: cyan;
+  z-index: -1;
+}
+
+.glitch:hover::after {
+  animation: glitch2 0.3s infinite;
+  color: magenta;
+  z-index: -2;
+}
+
+@keyframes glitch1 {
+  0%, 100% { transform: translate(0); opacity: 0.7; }
+  20% { transform: translate(-2px, 2px); }
+  40% { transform: translate(2px, -2px); }
+}
+
+@keyframes glitch2 {
+  0%, 100% { transform: translate(0); opacity: 0.7; }
+  20% { transform: translate(2px, -2px); }
+  40% { transform: translate(-2px, 2px); }
+}
+
+/* Size variants */
+.sizeSm {
+  padding: 0.8rem 1.5rem;
+  font-size: 1rem;
+}
+
+.sizeLg {
+  padding: 2rem 4rem;
+  font-size: 2rem;
+}
+
+.sizeXl {
+  padding: 2.5rem 5rem;
+  font-size: 2.5rem;
+}
+
+/* Full width */
+.fullWidth {
+  width: 100%;
+  clip-path: none;
+}
+
+/* Disabled */
+.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* Loading state */
+.loading {
+  position: relative;
+  color: transparent;
+}
+
+.loading::after {
+  content: '';
+  position: absolute;
+  width: 1.5em;
+  height: 1.5em;
+  border: 2px solid currentColor;
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+/* Shake animation */
+.shake:hover {
+  animation: shake 0.1s infinite;
+}
+
+@keyframes shake {
+  0%, 100% { transform: translate(-2px, -2px); }
+  25% { transform: translate(-1px, -3px); }
+  50% { transform: translate(-3px, -1px); }
+  75% { transform: translate(-2px, -2px); }
+}

package/buttons/cta-brutal/css/index.tsx

@@ -0,0 +1,78 @@
+'use client';
+
+import { forwardRef, ButtonHTMLAttributes, AnchorHTMLAttributes, ReactNode } from 'react';
+import styles from './cta-brutal.module.css';
+
+type BaseProps = {
+  children: ReactNode;
+  variant?: 'default' | 'outline' | 'gold' | 'inverse';
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+  icon?: ReactNode;
+  iconPosition?: 'left' | 'right';
+  fullWidth?: boolean;
+  glitch?: boolean;
+  shake?: boolean;
+  loading?: boolean;
+  disabled?: boolean;
+};
+
+type ButtonProps = BaseProps & ButtonHTMLAttributes<HTMLButtonElement> & { href?: never };
+type AnchorProps = BaseProps & AnchorHTMLAttributes<HTMLAnchorElement> & { href: string };
+
+export type CtaBrutalProps = ButtonProps | AnchorProps;
+
+export const CtaBrutal = forwardRef<HTMLButtonElement | HTMLAnchorElement, CtaBrutalProps>(
+  ({ children, variant = 'default', size = 'md', icon, iconPosition = 'right', fullWidth = false, glitch = false, shake = false, loading = false, disabled = false, className, ...props }, ref) => {
+    const classes = [
+      styles.button,
+      variant === 'outline' && styles.variantOutline,
+      variant === 'gold' && styles.variantGold,
+      variant === 'inverse' && styles.variantInverse,
+      size === 'sm' && styles.sizeSm,
+      size === 'lg' && styles.sizeLg,
+      size === 'xl' && styles.sizeXl,
+      fullWidth && styles.fullWidth,
+      glitch && styles.glitch,
+      shake && styles.shake,
+      loading && styles.loading,
+      disabled && styles.disabled,
+      className,
+    ].filter(Boolean).join(' ');
+
+    const content = (
+      <>
+        {icon && iconPosition === 'left' && <span className={styles.icon}>{icon}</span>}
+        {children}
+        {icon && iconPosition === 'right' && <span className={styles.icon}>{icon}</span>}
+      </>
+    );
+
+    if ('href' in props && props.href) {
+      return (
+        <a 
+          ref={ref as any} 
+          className={classes} 
+          data-text={glitch ? children : undefined}
+          {...(props as AnchorProps)}
+        >
+          {content}
+        </a>
+      );
+    }
+
+    return (
+      <button 
+        ref={ref as any} 
+        className={classes} 
+        disabled={disabled || loading}
+        data-text={glitch ? children : undefined}
+        {...(props as ButtonProps)}
+      >
+        {content}
+      </button>
+    );
+  }
+);
+
+CtaBrutal.displayName = 'CtaBrutal';
+export default CtaBrutal;

package/buttons/cta-brutal/tailwind/index.tsx

@@ -0,0 +1,85 @@
+'use client';
+
+import { forwardRef, ButtonHTMLAttributes, AnchorHTMLAttributes, ReactNode } from 'react';
+
+type BaseProps = {
+  children: ReactNode;
+  variant?: 'default' | 'outline' | 'gold' | 'inverse';
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+  icon?: ReactNode;
+  iconPosition?: 'left' | 'right';
+  fullWidth?: boolean;
+  glitch?: boolean;
+  shake?: boolean;
+  loading?: boolean;
+  disabled?: boolean;
+};
+
+type ButtonProps = BaseProps & ButtonHTMLAttributes<HTMLButtonElement> & { href?: never };
+type AnchorProps = BaseProps & AnchorHTMLAttributes<HTMLAnchorElement> & { href: string };
+
+export type CtaBrutalProps = ButtonProps | AnchorProps;
+
+const variantClasses: Record<string, string> = {
+  default: 'bg-red-500 text-black hover:shadow-[4px_4px_0_#e8e8e8] [clip-path:polygon(0_0,100%_0,95%_100%,0_100%)]',
+  outline: 'bg-transparent border-[3px] border-red-500 text-red-500 hover:bg-red-500 hover:text-black',
+  gold: 'bg-amber-500 text-black hover:shadow-[4px_4px_0_#8b7017] [clip-path:polygon(0_0,100%_0,95%_100%,0_100%)]',
+  inverse: 'bg-stone-200 text-black hover:shadow-[4px_4px_0_#ff0040] [clip-path:polygon(0_0,100%_0,95%_100%,0_100%)]',
+};
+
+const sizeClasses: Record<string, string> = {
+  sm: 'py-3 px-6 text-base',
+  md: 'py-6 px-12 text-2xl',
+  lg: 'py-8 px-16 text-3xl',
+  xl: 'py-10 px-20 text-4xl',
+};
+
+export const CtaBrutal = forwardRef<HTMLButtonElement | HTMLAnchorElement, CtaBrutalProps>(
+  ({ children, variant = 'default', size = 'md', icon, iconPosition = 'right', fullWidth = false, glitch = false, shake = false, loading = false, disabled = false, className, ...props }, ref) => {
+    const classes = `
+      inline-flex items-center justify-center gap-4
+      font-display tracking-[0.1em] uppercase no-underline
+      border-none cursor-pointer transition-all
+      hover:-translate-x-0.5 hover:-translate-y-0.5
+      active:translate-x-0 active:translate-y-0 active:shadow-none
+      ${variantClasses[variant]}
+      ${sizeClasses[size]}
+      ${fullWidth ? 'w-full [clip-path:none]' : ''}
+      ${shake ? 'hover:animate-[shake_0.1s_infinite]' : ''}
+      ${loading ? 'relative text-transparent after:content-[""] after:absolute after:w-6 after:h-6 after:border-2 after:border-current after:border-t-transparent after:rounded-full after:animate-spin' : ''}
+      ${disabled ? 'opacity-50 cursor-not-allowed pointer-events-none' : ''}
+      ${className || ''}
+    `;
+
+    const iconEl = icon && (
+      <span className="text-[1.2em] transition-transform group-hover:translate-x-1">
+        {icon}
+      </span>
+    );
+
+    const content = (
+      <>
+        {iconPosition === 'left' && iconEl}
+        {children}
+        {iconPosition === 'right' && iconEl}
+      </>
+    );
+
+    if ('href' in props && props.href) {
+      return (
+        <a ref={ref as any} className={`group ${classes}`} {...(props as AnchorProps)}>
+          {content}
+        </a>
+      );
+    }
+
+    return (
+      <button ref={ref as any} className={`group ${classes}`} disabled={disabled || loading} {...(props as ButtonProps)}>
+        {content}
+      </button>
+    );
+  }
+);
+
+CtaBrutal.displayName = 'CtaBrutal';
+export default CtaBrutal;

package/buttons/dead-button/css/dead-button.module.css

@@ -0,0 +1,216 @@
+/* dead-button - Bouton détruit/glitché avec layers */
+.container {
+  position: relative;
+  width: 280px;
+  height: 60px;
+  animation: btnShake 0.1s infinite;
+  cursor: not-allowed;
+}
+
+.container:hover {
+  animation: btnShakeHard 0.05s infinite;
+}
+
+@keyframes btnShake {
+  0%, 100% { transform: translate(0); }
+  25% { transform: translate(0.5px, 0.5px); }
+  50% { transform: translate(-0.5px, -0.5px); }
+  75% { transform: translate(0.5px, -0.5px); }
+}
+
+@keyframes btnShakeHard {
+  0%, 100% { transform: translate(0) rotate(0); }
+  25% { transform: translate(2px, 1px) rotate(0.5deg); }
+  50% { transform: translate(-1px, -2px) rotate(-0.5deg); }
+  75% { transform: translate(1px, -1px) rotate(0.3deg); }
+}
+
+/* Clean button layer underneath */
+.clean {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.8rem;
+  font-weight: 600;
+  font-size: 1rem;
+  color: white;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  box-shadow: 
+    0 4px 15px rgba(102, 126, 234, 0.4),
+    0 1px 3px rgba(0, 0, 0, 0.1),
+    inset 0 1px 0 rgba(255, 255, 255, 0.2);
+  letter-spacing: 0.02em;
+}
+
+/* Gradient variants */
+.gradient2 {
+  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+  box-shadow: 0 4px 15px rgba(245, 87, 108, 0.4);
+}
+
+.gradient3 {
+  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+  box-shadow: 0 4px 15px rgba(79, 172, 254, 0.4);
+}
+
+.gradient4 {
+  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
+  box-shadow: 0 4px 15px rgba(250, 112, 154, 0.4);
+}
+
+.icon {
+  font-size: 1.1rem;
+}
+
+/* Destruction layer */
+.destroy {
+  position: absolute;
+  inset: 0;
+  background: 
+    repeating-linear-gradient(
+      90deg,
+      transparent,
+      transparent 2px,
+      rgba(255, 0, 64, 0.1) 2px,
+      rgba(255, 0, 64, 0.1) 4px
+    ),
+    repeating-linear-gradient(
+      0deg,
+      transparent,
+      transparent 3px,
+      rgba(0, 0, 0, 0.3) 3px,
+      rgba(0, 0, 0, 0.3) 4px
+    );
+  border-radius: 16px;
+  mix-blend-mode: multiply;
+}
+
+/* Noise layer */
+.noise {
+  position: absolute;
+  inset: 0;
+  border-radius: 16px;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
+  opacity: 0.15;
+  mix-blend-mode: overlay;
+  animation: noiseMove 0.2s steps(5) infinite;
+}
+
+@keyframes noiseMove {
+  0% { transform: translate(0, 0); }
+  20% { transform: translate(-2px, 1px); }
+  40% { transform: translate(1px, -1px); }
+  60% { transform: translate(2px, 2px); }
+  80% { transform: translate(-1px, -2px); }
+  100% { transform: translate(0, 0); }
+}
+
+/* Glitch slices */
+.glitch1,
+.glitch2 {
+  position: absolute;
+  inset: 0;
+  border-radius: 16px;
+  pointer-events: none;
+}
+
+.glitch1 {
+  background: var(--chaos-blood, #ff0040);
+  mix-blend-mode: color-dodge;
+  opacity: 0;
+  animation: glitchSlice1 3s infinite;
+}
+
+.glitch2 {
+  background: cyan;
+  mix-blend-mode: color-dodge;
+  opacity: 0;
+  animation: glitchSlice2 3s infinite;
+}
+
+@keyframes glitchSlice1 {
+  0%, 89%, 91%, 93%, 95%, 100% { 
+    opacity: 0; 
+    clip-path: inset(0 0 100% 0);
+  }
+  90% { 
+    opacity: 0.8; 
+    clip-path: inset(20% 0 60% 0);
+    transform: translateX(-5px);
+  }
+  92% { 
+    opacity: 0.6; 
+    clip-path: inset(50% 0 30% 0);
+    transform: translateX(3px);
+  }
+  94% { 
+    opacity: 0.7; 
+    clip-path: inset(70% 0 10% 0);
+    transform: translateX(-2px);
+  }
+}
+
+@keyframes glitchSlice2 {
+  0%, 89%, 91%, 93%, 95%, 100% { 
+    opacity: 0; 
+    clip-path: inset(0 0 100% 0);
+  }
+  90% { 
+    opacity: 0.5; 
+    clip-path: inset(30% 0 50% 0);
+    transform: translateX(4px);
+  }
+  92% { 
+    opacity: 0.4; 
+    clip-path: inset(10% 0 70% 0);
+    transform: translateX(-3px);
+  }
+  94% { 
+    opacity: 0.6; 
+    clip-path: inset(60% 0 20% 0);
+    transform: translateX(5px);
+  }
+}
+
+/* Strikethrough */
+.container::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: -10px;
+  right: -10px;
+  height: 3px;
+  background: var(--chaos-blood, #ff0040);
+  transform: rotate(-3deg);
+  box-shadow: 0 0 10px var(--chaos-blood, #ff0040);
+}
+
+/* Variant: no strike */
+.noStrike::after {
+  display: none;
+}
+
+/* Size variants */
+.sizeSm {
+  width: 200px;
+  height: 45px;
+}
+
+.sizeSm .clean {
+  font-size: 0.85rem;
+  border-radius: 12px;
+}
+
+.sizeLg {
+  width: 340px;
+  height: 70px;
+}
+
+.sizeLg .clean {
+  font-size: 1.2rem;
+  border-radius: 20px;
+}

package/buttons/dead-button/css/index.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+import { forwardRef, HTMLAttributes, ReactNode } from 'react';
+import styles from './dead-button.module.css';
+
+export interface DeadButtonProps extends HTMLAttributes<HTMLDivElement> {
+  children: ReactNode;
+  icon?: ReactNode;
+  gradient?: 1 | 2 | 3 | 4;
+  size?: 'sm' | 'md' | 'lg';
+  showStrike?: boolean;
+}
+
+export const DeadButton = forwardRef<HTMLDivElement, DeadButtonProps>(
+  ({ children, icon, gradient = 1, size = 'md', showStrike = true, className, ...props }, ref) => {
+    const containerClasses = [
+      styles.container,
+      size === 'sm' && styles.sizeSm,
+      size === 'lg' && styles.sizeLg,
+      !showStrike && styles.noStrike,
+      className,
+    ].filter(Boolean).join(' ');
+
+    const cleanClasses = [
+      styles.clean,
+      gradient === 2 && styles.gradient2,
+      gradient === 3 && styles.gradient3,
+      gradient === 4 && styles.gradient4,
+    ].filter(Boolean).join(' ');
+
+    return (
+      <div ref={ref} className={containerClasses} {...props}>
+        <div className={cleanClasses}>
+          {icon && <span className={styles.icon}>{icon}</span>}
+          {children}
+        </div>
+        <div className={styles.destroy} />
+        <div className={styles.noise} />
+        <div className={styles.glitch1} />
+        <div className={styles.glitch2} />
+      </div>
+    );
+  }
+);
+
+DeadButton.displayName = 'DeadButton';
+export default DeadButton;

package/buttons/dead-button/tailwind/index.tsx

@@ -0,0 +1,90 @@
+'use client';
+
+import { forwardRef, HTMLAttributes, ReactNode } from 'react';
+
+export interface DeadButtonProps extends HTMLAttributes<HTMLDivElement> {
+  children: ReactNode;
+  icon?: ReactNode;
+  gradient?: 1 | 2 | 3 | 4;
+  size?: 'sm' | 'md' | 'lg';
+  showStrike?: boolean;
+}
+
+const gradientClasses: Record<number, string> = {
+  1: 'bg-gradient-to-br from-indigo-500 to-purple-600 shadow-[0_4px_15px_rgba(102,126,234,0.4)]',
+  2: 'bg-gradient-to-br from-fuchsia-400 to-rose-500 shadow-[0_4px_15px_rgba(245,87,108,0.4)]',
+  3: 'bg-gradient-to-br from-blue-400 to-cyan-400 shadow-[0_4px_15px_rgba(79,172,254,0.4)]',
+  4: 'bg-gradient-to-br from-pink-400 to-yellow-300 shadow-[0_4px_15px_rgba(250,112,154,0.4)]',
+};
+
+const sizeClasses: Record<string, { container: string; text: string; rounded: string }> = {
+  sm: { container: 'w-[200px] h-[45px]', text: 'text-sm', rounded: 'rounded-xl' },
+  md: { container: 'w-[280px] h-[60px]', text: 'text-base', rounded: 'rounded-2xl' },
+  lg: { container: 'w-[340px] h-[70px]', text: 'text-lg', rounded: 'rounded-[20px]' },
+};
+
+export const DeadButton = forwardRef<HTMLDivElement, DeadButtonProps>(
+  ({ children, icon, gradient = 1, size = 'md', showStrike = true, className, ...props }, ref) => {
+    const sizes = sizeClasses[size];
+
+    return (
+      <div 
+        ref={ref} 
+        className={`
+          relative cursor-not-allowed
+          animate-[shake_0.1s_infinite]
+          hover:animate-[shakeHard_0.05s_infinite]
+          ${sizes.container}
+          ${className || ''}
+        `}
+        style={{
+          // @ts-ignore - CSS custom properties
+          '--tw-animate-shake': 'shake 0.1s infinite',
+        }}
+        {...props}
+      >
+        {/* Clean button layer */}
+        <div className={`
+          absolute inset-0 flex items-center justify-center gap-3
+          font-semibold text-white font-sans tracking-wide
+          ${gradientClasses[gradient]}
+          ${sizes.text}
+          ${sizes.rounded}
+        `}>
+          {icon && <span className="text-lg">{icon}</span>}
+          {children}
+        </div>
+        
+        {/* Destruction layer */}
+        <div className={`
+          absolute inset-0 mix-blend-multiply
+          ${sizes.rounded}
+          bg-[repeating-linear-gradient(90deg,transparent,transparent_2px,rgba(255,0,64,0.1)_2px,rgba(255,0,64,0.1)_4px),repeating-linear-gradient(0deg,transparent,transparent_3px,rgba(0,0,0,0.3)_3px,rgba(0,0,0,0.3)_4px)]
+        `} />
+        
+        {/* Noise layer */}
+        <div className={`
+          absolute inset-0 opacity-15 mix-blend-overlay
+          ${sizes.rounded}
+          animate-[noiseMove_0.2s_steps(5)_infinite]
+        `}
+        style={{
+          backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E")`,
+        }}
+        />
+        
+        {/* Glitch layers */}
+        <div className={`absolute inset-0 ${sizes.rounded} pointer-events-none bg-red-500 mix-blend-color-dodge opacity-0 animate-[glitchSlice1_3s_infinite]`} />
+        <div className={`absolute inset-0 ${sizes.rounded} pointer-events-none bg-cyan-400 mix-blend-color-dodge opacity-0 animate-[glitchSlice2_3s_infinite]`} />
+        
+        {/* Strikethrough */}
+        {showStrike && (
+          <div className="absolute top-1/2 -left-2.5 -right-2.5 h-[3px] bg-red-500 -rotate-3 shadow-[0_0_10px_#ff0040]" />
+        )}
+      </div>
+    );
+  }
+);
+
+DeadButton.displayName = 'DeadButton';
+export default DeadButton;