@oalacea/chaosui 0.4.0 → 0.5.1

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

@@ -0,0 +1,141 @@
+/* deeper-button - Bouton "aller plus loin" style descent */
+.button {
+  padding: 2rem 4rem;
+  background: transparent;
+  border: 2px solid var(--chaos-blood, #ff0040);
+  color: var(--chaos-blood, #ff0040);
+  font-family: var(--chaos-font-display, 'Bebas Neue', sans-serif);
+  font-size: 1.5rem;
+  text-decoration: none;
+  position: relative;
+  overflow: hidden;
+  transition: all 0.3s;
+  letter-spacing: 0.1em;
+  cursor: pointer;
+  display: inline-block;
+  text-transform: uppercase;
+}
+
+.button::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: var(--chaos-blood, #ff0040);
+  transition: left 0.3s;
+  z-index: -1;
+}
+
+.button:hover {
+  color: var(--chaos-void, #0a0a0a);
+}
+
+.button:hover::before {
+  left: 0;
+}
+
+/* Arrow animation */
+.arrow {
+  display: inline-block;
+  margin-left: 1rem;
+  transition: transform 0.3s;
+}
+
+.button:hover .arrow {
+  animation: arrowBounce 0.5s ease-in-out infinite;
+}
+
+@keyframes arrowBounce {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(5px); }
+}
+
+/* Variants */
+.variantGold {
+  border-color: var(--chaos-gold, #c9a227);
+  color: var(--chaos-gold, #c9a227);
+}
+
+.variantGold::before {
+  background: var(--chaos-gold, #c9a227);
+}
+
+.variantGold:hover {
+  color: var(--chaos-void, #0a0a0a);
+}
+
+.variantOutline {
+  border-width: 1px;
+}
+
+.variantOutline:hover {
+  border-width: 2px;
+}
+
+.variantGhost {
+  border-color: transparent;
+  border-bottom-color: var(--chaos-blood, #ff0040);
+}
+
+.variantGhost::before {
+  display: none;
+}
+
+.variantGhost:hover {
+  color: var(--chaos-blood, #ff0040);
+  border-color: var(--chaos-blood, #ff0040);
+}
+
+/* Size variants */
+.sizeSm {
+  padding: 1rem 2rem;
+  font-size: 1rem;
+}
+
+.sizeLg {
+  padding: 2.5rem 5rem;
+  font-size: 2rem;
+}
+
+/* Pulsing effect */
+.pulsing {
+  animation: pulse 2s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 0, 64, 0.4); }
+  50% { box-shadow: 0 0 0 15px rgba(255, 0, 64, 0); }
+}
+
+.variantGold.pulsing {
+  animation: pulseGold 2s ease-in-out infinite;
+}
+
+@keyframes pulseGold {
+  0%, 100% { box-shadow: 0 0 0 0 rgba(201, 162, 39, 0.4); }
+  50% { box-shadow: 0 0 0 15px rgba(201, 162, 39, 0); }
+}
+
+/* Icon support */
+.iconLeft {
+  margin-right: 1rem;
+}
+
+.iconRight {
+  margin-left: 1rem;
+}
+
+/* Glitch on hover */
+.glitchHover:hover {
+  animation: glitchText 0.3s infinite;
+}
+
+@keyframes glitchText {
+  0%, 100% { transform: translate(0); }
+  20% { transform: translate(-2px, 2px); }
+  40% { transform: translate(2px, -2px); }
+  60% { transform: translate(-1px, -1px); }
+  80% { transform: translate(1px, 1px); }
+}

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

@@ -0,0 +1,62 @@
+'use client';
+
+import { forwardRef, ButtonHTMLAttributes, AnchorHTMLAttributes, ReactNode } from 'react';
+import styles from './deeper-button.module.css';
+
+type BaseProps = {
+  children: ReactNode;
+  variant?: 'default' | 'gold' | 'outline' | 'ghost';
+  size?: 'sm' | 'md' | 'lg';
+  showArrow?: boolean;
+  pulsing?: boolean;
+  glitchOnHover?: boolean;
+  iconLeft?: ReactNode;
+  iconRight?: ReactNode;
+};
+
+type ButtonProps = BaseProps & ButtonHTMLAttributes<HTMLButtonElement> & { href?: never };
+type AnchorProps = BaseProps & AnchorHTMLAttributes<HTMLAnchorElement> & { href: string };
+
+export type DeeperButtonProps = ButtonProps | AnchorProps;
+
+export const DeeperButton = forwardRef<HTMLButtonElement | HTMLAnchorElement, DeeperButtonProps>(
+  ({ children, variant = 'default', size = 'md', showArrow = true, pulsing = false, glitchOnHover = false, iconLeft, iconRight, className, ...props }, ref) => {
+    const classes = [
+      styles.button,
+      variant === 'gold' && styles.variantGold,
+      variant === 'outline' && styles.variantOutline,
+      variant === 'ghost' && styles.variantGhost,
+      size === 'sm' && styles.sizeSm,
+      size === 'lg' && styles.sizeLg,
+      pulsing && styles.pulsing,
+      glitchOnHover && styles.glitchHover,
+      className,
+    ].filter(Boolean).join(' ');
+
+    const content = (
+      <>
+        {iconLeft && <span className={styles.iconLeft}>{iconLeft}</span>}
+        {children}
+        {iconRight && <span className={styles.iconRight}>{iconRight}</span>}
+        {showArrow && <span className={styles.arrow}>↓</span>}
+      </>
+    );
+
+    if ('href' in props && props.href) {
+      return (
+        <a ref={ref as any} className={classes} {...(props as AnchorProps)}>
+          {content}
+        </a>
+      );
+    }
+
+    return (
+      <button ref={ref as any} className={classes} {...(props as ButtonProps)}>
+        {content}
+      </button>
+    );
+  }
+);
+
+DeeperButton.displayName = 'DeeperButton';
+export default DeeperButton;

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

@@ -0,0 +1,78 @@
+'use client';
+
+import { forwardRef, ButtonHTMLAttributes, AnchorHTMLAttributes, ReactNode } from 'react';
+
+type BaseProps = {
+  children: ReactNode;
+  variant?: 'default' | 'gold' | 'outline' | 'ghost';
+  size?: 'sm' | 'md' | 'lg';
+  showArrow?: boolean;
+  pulsing?: boolean;
+  glitchOnHover?: boolean;
+  iconLeft?: ReactNode;
+  iconRight?: ReactNode;
+};
+
+type ButtonProps = BaseProps & ButtonHTMLAttributes<HTMLButtonElement> & { href?: never };
+type AnchorProps = BaseProps & AnchorHTMLAttributes<HTMLAnchorElement> & { href: string };
+
+export type DeeperButtonProps = ButtonProps | AnchorProps;
+
+const variantClasses: Record<string, string> = {
+  default: 'border-red-500 text-red-500 hover:text-black before:bg-red-500',
+  gold: 'border-amber-500 text-amber-500 hover:text-black before:bg-amber-500',
+  outline: 'border border-red-500 text-red-500 hover:border-2 hover:text-black before:bg-red-500',
+  ghost: 'border-transparent border-b-red-500 text-red-500 hover:border-red-500 before:hidden',
+};
+
+const sizeClasses: Record<string, string> = {
+  sm: 'py-4 px-8 text-base',
+  md: 'py-8 px-16 text-2xl',
+  lg: 'py-10 px-20 text-3xl',
+};
+
+export const DeeperButton = forwardRef<HTMLButtonElement | HTMLAnchorElement, DeeperButtonProps>(
+  ({ children, variant = 'default', size = 'md', showArrow = true, pulsing = false, glitchOnHover = false, iconLeft, iconRight, className, ...props }, ref) => {
+    const classes = `
+      relative overflow-hidden border-2 bg-transparent
+      font-display tracking-[0.1em] uppercase cursor-pointer
+      transition-all inline-block no-underline
+      before:content-[''] before:absolute before:top-0 before:-left-full
+      before:w-full before:h-full before:transition-[left] before:duration-300 before:-z-10
+      hover:before:left-0
+      ${variantClasses[variant]}
+      ${sizeClasses[size]}
+      ${pulsing ? 'animate-[pulse_2s_ease-in-out_infinite]' : ''}
+      ${glitchOnHover ? 'hover:animate-[glitchText_0.3s_infinite]' : ''}
+      ${className || ''}
+    `;
+
+    const content = (
+      <>
+        {iconLeft && <span className="mr-4">{iconLeft}</span>}
+        {children}
+        {iconRight && <span className="ml-4">{iconRight}</span>}
+        {showArrow && (
+          <span className="inline-block ml-4 transition-transform group-hover:animate-bounce">↓</span>
+        )}
+      </>
+    );
+
+    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}`} {...(props as ButtonProps)}>
+        {content}
+      </button>
+    );
+  }
+);
+
+DeeperButton.displayName = 'DeeperButton';
+export default DeeperButton;

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

@@ -0,0 +1,176 @@
+/* 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 button */
+.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 button */
+.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 */
+.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;
+}
+
+/* Variant: dramatic */
+.variantDramatic .yes {
+  color: var(--chaos-gold, #c9a227);
+  border-color: var(--chaos-gold, #c9a227);
+}
+
+.variantDramatic .yes::before {
+  background: var(--chaos-gold, #c9a227);
+}
+
+.variantDramatic .no {
+  color: var(--chaos-blood, #ff0040);
+}
+
+/* Variant: minimal */
+.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;
+}
+
+/* Variant: stacked */
+.variantStacked {
+  flex-direction: column;
+}
+
+.variantStacked .no {
+  border-left: 2px solid var(--chaos-blood, #ff0040);
+  border-top: none;
+}
+
+.variantStacked .divider {
+  width: 100%;
+  height: 2px;
+}
+
+.variantStacked .divider::before {
+  padding: 0 0.5rem;
+}
+
+/* Size variants */
+.sizeSm .button {
+  padding: 0.8rem 1.5rem;
+  font-size: 1rem;
+}
+
+.sizeLg .button {
+  padding: 2rem 4rem;
+  font-size: 2rem;
+}
+
+/* Disabled state */
+.disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+/* Active/selected state */
+.selected {
+  background: currentColor;
+  color: var(--chaos-void, #0a0a0a) !important;
+}

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

@@ -0,0 +1,56 @@
+'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/buttons/dual-choice/tailwind/index.tsx

@@ -0,0 +1,89 @@
+'use client';
+
+import { forwardRef, HTMLAttributes } from 'react';
+
+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;
+}
+
+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',
+};
+
+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 isMinimal = variant === 'minimal';
+    const isStacked = variant === 'stacked';
+    const isDramatic = variant === 'dramatic';
+
+    const containerClasses = `
+      flex font-display
+      ${isStacked ? 'flex-col' : ''}
+      ${disabled ? 'opacity-50 pointer-events-none' : ''}
+      ${className || ''}
+    `;
+
+    const baseButtonClasses = `
+      flex-1 tracking-[0.15em] uppercase cursor-pointer transition-all relative overflow-hidden
+      ${sizeClasses[size]}
+      before:content-[''] before:absolute before:top-0 before:-left-full
+      before:w-full before:h-full before:transition-[left] before:duration-300 before:-z-10
+      hover:before:left-0
+    `;
+
+    const yesClasses = `
+      ${baseButtonClasses}
+      ${isMinimal 
+        ? 'border-0 text-stone-300 after:absolute after:bottom-0 after:left-0 after:right-0 after:h-0.5 after:bg-current after:scale-x-0 after:transition-transform hover:after:scale-x-100 before:hidden' 
+        : `border-2 ${isDramatic ? 'border-amber-500 text-amber-500 before:bg-amber-500' : 'border-gray-600 text-stone-200 before:bg-stone-200'}`
+      }
+      hover:text-black
+      ${selectedValue === 'yes' ? 'bg-current text-black' : ''}
+    `;
+
+    const noClasses = `
+      ${baseButtonClasses}
+      ${isMinimal 
+        ? 'border-0 text-red-500 after:absolute after:bottom-0 after:left-0 after:right-0 after:h-0.5 after:bg-current after:scale-x-0 after:transition-transform hover:after:scale-x-100 before:hidden'
+        : `border-2 border-red-500 text-red-500 before:bg-red-500 ${isStacked ? 'border-t-0' : 'border-l-0'}`
+      }
+      hover:text-black
+      ${selectedValue === 'no' ? 'bg-red-500 text-black' : ''}
+    `;
+
+    return (
+      <div ref={ref} className={containerClasses} {...props}>
+        <button className={yesClasses} onClick={onYes} disabled={disabled}>
+          {yesLabel}
+        </button>
+        
+        {showDivider && !isMinimal && (
+          <div className={`
+            flex items-center justify-center relative
+            ${isStacked ? 'w-full h-0.5' : 'w-0.5'} 
+            bg-gray-700
+          `}>
+            <span className="absolute text-[0.6rem] text-gray-500 bg-black px-1 tracking-widest">OU</span>
+          </div>
+        )}
+        
+        <button className={noClasses} onClick={onNo} disabled={disabled}>
+          {noLabel}
+        </button>
+      </div>
+    );
+  }
+);
+
+DualChoice.displayName = 'DualChoice';
+export default DualChoice;

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

@@ -0,0 +1,96 @@
+'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' | 'dramatic';
+  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,
+      variant === 'dramatic' && styles.variantDramatic,
+      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;