@oalacea/chaosui 0.4.0 → 0.5.1

package/layout/void-frame/css/void-frame.module.css

@@ -0,0 +1,141 @@
+.frame {
+  --frame-color: #c9a227;
+  --frame-bg: rgba(0, 0, 0, 0.5);
+  
+  position: relative;
+  padding: 2rem;
+  background: var(--frame-bg);
+  border: 1px solid var(--frame-color);
+}
+
+/* Corner ornaments */
+.corner {
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  border-color: var(--frame-color);
+  border-style: solid;
+}
+
+.cornerTopLeft {
+  top: -1px;
+  left: -1px;
+  border-width: 2px 0 0 2px;
+}
+
+.cornerTopRight {
+  top: -1px;
+  right: -1px;
+  border-width: 2px 2px 0 0;
+}
+
+.cornerBottomLeft {
+  bottom: -1px;
+  left: -1px;
+  border-width: 0 0 2px 2px;
+}
+
+.cornerBottomRight {
+  bottom: -1px;
+  right: -1px;
+  border-width: 0 2px 2px 0;
+}
+
+/* Extended corners */
+.extended .corner {
+  width: 30px;
+  height: 30px;
+}
+
+.extended .corner::before,
+.extended .corner::after {
+  content: '';
+  position: absolute;
+  background: var(--frame-color);
+}
+
+.extended .cornerTopLeft::before,
+.extended .cornerBottomLeft::before {
+  left: 5px;
+  width: 1px;
+  height: 15px;
+}
+
+.extended .cornerTopLeft::before { top: 5px; }
+.extended .cornerBottomLeft::before { bottom: 5px; }
+
+.extended .cornerTopRight::before,
+.extended .cornerBottomRight::before {
+  right: 5px;
+  width: 1px;
+  height: 15px;
+}
+
+.extended .cornerTopRight::before { top: 5px; }
+.extended .cornerBottomRight::before { bottom: 5px; }
+
+.extended .cornerTopLeft::after,
+.extended .cornerTopRight::after {
+  top: 5px;
+  height: 1px;
+  width: 15px;
+}
+
+.extended .cornerTopLeft::after { left: 5px; }
+.extended .cornerTopRight::after { right: 5px; }
+
+.extended .cornerBottomLeft::after,
+.extended .cornerBottomRight::after {
+  bottom: 5px;
+  height: 1px;
+  width: 15px;
+}
+
+.extended .cornerBottomLeft::after { left: 5px; }
+.extended .cornerBottomRight::after { right: 5px; }
+
+/* Ornate style - with decorative elements */
+.ornate .corner {
+  width: 40px;
+  height: 40px;
+}
+
+.ornate::before {
+  content: '✦';
+  position: absolute;
+  top: -0.5em;
+  left: 50%;
+  transform: translateX(-50%);
+  color: var(--frame-color);
+  font-size: 1rem;
+}
+
+.ornate::after {
+  content: '✦';
+  position: absolute;
+  bottom: -0.5em;
+  left: 50%;
+  transform: translateX(-50%);
+  color: var(--frame-color);
+  font-size: 1rem;
+}
+
+/* Variants */
+.gold { --frame-color: #c9a227; }
+.bone { --frame-color: #d4c5a9; }
+.blood { --frame-color: #8b1a1a; }
+.iron { --frame-color: #4a4a4a; }
+.cyan { --frame-color: #00f0ff; }
+
+/* Glow effect */
+.glow {
+  box-shadow: 0 0 20px rgba(201, 162, 39, 0.2);
+}
+
+.glow.cyan {
+  box-shadow: 0 0 20px rgba(0, 240, 255, 0.2);
+}
+
+.glow.blood {
+  box-shadow: 0 0 20px rgba(139, 26, 26, 0.3);
+}

package/layout/void-frame/tailwind/index.tsx

@@ -0,0 +1,64 @@
+'use client';
+
+import { forwardRef, HTMLAttributes, ReactNode } from 'react';
+
+export interface VoidFrameProps extends HTMLAttributes<HTMLDivElement> {
+  children: ReactNode;
+  variant?: 'gold' | 'bone' | 'blood' | 'iron' | 'cyan';
+  cornerStyle?: 'simple' | 'extended' | 'ornate';
+  glow?: boolean;
+  padding?: 'sm' | 'md' | 'lg' | 'xl';
+}
+
+const variantStyles = {
+  gold: { border: 'border-amber-600', corner: 'border-amber-600', glow: 'shadow-[0_0_20px_rgba(201,162,39,0.2)]', ornament: 'text-amber-600' },
+  bone: { border: 'border-stone-400', corner: 'border-stone-400', glow: 'shadow-[0_0_20px_rgba(212,197,169,0.2)]', ornament: 'text-stone-400' },
+  blood: { border: 'border-red-800', corner: 'border-red-800', glow: 'shadow-[0_0_20px_rgba(139,26,26,0.3)]', ornament: 'text-red-800' },
+  iron: { border: 'border-zinc-600', corner: 'border-zinc-600', glow: 'shadow-[0_0_20px_rgba(74,74,74,0.2)]', ornament: 'text-zinc-600' },
+  cyan: { border: 'border-cyan-400', corner: 'border-cyan-400', glow: 'shadow-[0_0_20px_rgba(0,240,255,0.2)]', ornament: 'text-cyan-400' },
+};
+
+const paddingClasses = {
+  sm: 'p-4',
+  md: 'p-8',
+  lg: 'p-12',
+  xl: 'p-16',
+};
+
+export const VoidFrame = forwardRef<HTMLDivElement, VoidFrameProps>(
+  ({ children, variant = 'gold', cornerStyle = 'simple', glow = false, padding = 'md', className = '', ...props }, ref) => {
+    const colors = variantStyles[variant];
+    const cornerSize = cornerStyle === 'ornate' ? 'w-10 h-10' : cornerStyle === 'extended' ? 'w-[30px] h-[30px]' : 'w-5 h-5';
+
+    return (
+      <div
+        ref={ref}
+        className={`
+          relative bg-black/50 border ${colors.border} ${paddingClasses[padding]}
+          ${glow ? colors.glow : ''}
+          ${className}
+        `}
+        {...props}
+      >
+        {/* Corners */}
+        <span className={`absolute -top-px -left-px ${cornerSize} border-t-2 border-l-2 ${colors.corner}`} />
+        <span className={`absolute -top-px -right-px ${cornerSize} border-t-2 border-r-2 ${colors.corner}`} />
+        <span className={`absolute -bottom-px -left-px ${cornerSize} border-b-2 border-l-2 ${colors.corner}`} />
+        <span className={`absolute -bottom-px -right-px ${cornerSize} border-b-2 border-r-2 ${colors.corner}`} />
+
+        {/* Ornate decorations */}
+        {cornerStyle === 'ornate' && (
+          <>
+            <span className={`absolute -top-[0.5em] left-1/2 -translate-x-1/2 ${colors.ornament}`}>✦</span>
+            <span className={`absolute -bottom-[0.5em] left-1/2 -translate-x-1/2 ${colors.ornament}`}>✦</span>
+          </>
+        )}
+
+        {children}
+      </div>
+    );
+  }
+);
+
+VoidFrame.displayName = 'VoidFrame';
+export default VoidFrame;

package/navigation/brutal-nav/css/brutal-nav.module.css

@@ -0,0 +1,178 @@
+/* brutal-nav - Nav brutaliste chaotique avec status */
+.nav {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  background: var(--chaos-void, #0a0a0a);
+  border-bottom: 3px solid var(--chaos-blood, #ff0040);
+  font-family: var(--chaos-font-mono, 'Space Mono', monospace);
+}
+
+.inner {
+  display: flex;
+  align-items: stretch;
+  height: 60px;
+}
+
+.brand {
+  background: var(--chaos-blood, #ff0040);
+  color: var(--chaos-void, #0a0a0a);
+  font-family: var(--chaos-font-display, 'Bebas Neue', sans-serif);
+  font-size: 1.5rem;
+  padding: 0 2rem;
+  display: flex;
+  align-items: center;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+
+.links {
+  display: flex;
+  flex: 1;
+}
+
+.link {
+  display: flex;
+  align-items: center;
+  padding: 0 1.5rem;
+  font-size: 0.75rem;
+  letter-spacing: 0.15em;
+  text-transform: uppercase;
+  color: var(--chaos-bone-dark, #888);
+  text-decoration: none;
+  border-right: 1px solid rgba(255, 255, 255, 0.1);
+  position: relative;
+  transition: all 0.15s;
+}
+
+.link:hover {
+  background: var(--chaos-blood, #ff0040);
+  color: var(--chaos-void, #0a0a0a);
+}
+
+.linkActive {
+  background: rgba(255, 0, 64, 0.1);
+  color: var(--chaos-blood, #ff0040);
+}
+
+.linkActive::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: var(--chaos-blood, #ff0040);
+}
+
+/* Status section */
+.status {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: 2rem;
+  padding: 0 2rem;
+  background: rgba(0, 0, 0, 0.5);
+  border-left: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.statusItem {
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+}
+
+.statusLabel {
+  font-size: 0.5rem;
+  color: var(--chaos-bone-dark, #666);
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+}
+
+.statusValue {
+  font-size: 0.7rem;
+  color: var(--chaos-blood, #ff0040);
+  font-weight: bold;
+}
+
+.statusOnline {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  animation: pulse 2s ease-in-out infinite;
+}
+
+.dotOnline { background: #00ff00; box-shadow: 0 0 10px #00ff00; }
+.dotOffline { background: #ff0040; }
+.dotWarning { background: #ffaa00; animation: blink 0.5s infinite; }
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+@keyframes blink {
+  50% { opacity: 0; }
+}
+
+/* Glitch brand effect */
+.brandGlitch {
+  position: relative;
+}
+
+.brandGlitch::before,
+.brandGlitch::after {
+  content: attr(data-text);
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+
+.brandGlitch::before {
+  animation: glitch1 0.3s infinite;
+  color: cyan;
+  clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
+  z-index: -1;
+}
+
+.brandGlitch::after {
+  animation: glitch2 0.3s infinite;
+  color: yellow;
+  clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
+  z-index: -1;
+}
+
+@keyframes glitch1 {
+  0%, 100% { transform: translate(0); }
+  20% { transform: translate(-2px, 2px); }
+  40% { transform: translate(2px, -2px); }
+}
+
+@keyframes glitch2 {
+  0%, 100% { transform: translate(0); }
+  20% { transform: translate(2px, -2px); }
+  40% { transform: translate(-2px, 2px); }
+}
+
+/* Brutal border variants */
+.variantHeavy {
+  border-bottom-width: 5px;
+}
+
+.variantHeavy .brand {
+  clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%);
+  padding-right: 3rem;
+}
+
+.variantDouble {
+  border-bottom: 2px solid var(--chaos-blood, #ff0040);
+  box-shadow: 0 4px 0 0 var(--chaos-blood, #ff0040);
+}

package/navigation/brutal-nav/css/index.tsx

@@ -0,0 +1,80 @@
+'use client';
+
+import { forwardRef, HTMLAttributes, ReactNode } from 'react';
+import styles from './brutal-nav.module.css';
+
+export interface BrutalNavLinkProps {
+  href: string;
+  children: ReactNode;
+  active?: boolean;
+}
+
+export interface BrutalNavStatusProps {
+  label: string;
+  value: string;
+  status?: 'online' | 'offline' | 'warning';
+}
+
+export interface BrutalNavProps extends HTMLAttributes<HTMLElement> {
+  brand: string;
+  brandGlitch?: boolean;
+  links?: BrutalNavLinkProps[];
+  statusItems?: BrutalNavStatusProps[];
+  variant?: 'default' | 'heavy' | 'double';
+  children?: ReactNode;
+}
+
+export const BrutalNav = forwardRef<HTMLElement, BrutalNavProps>(
+  ({ brand, brandGlitch, links, statusItems, variant = 'default', children, className, ...props }, ref) => {
+    const navClasses = [
+      styles.nav,
+      variant === 'heavy' && styles.variantHeavy,
+      variant === 'double' && styles.variantDouble,
+      className,
+    ].filter(Boolean).join(' ');
+
+    return (
+      <nav ref={ref} className={navClasses} {...props}>
+        <div className={styles.inner}>
+          <div className={styles.brand}>
+            {brandGlitch ? (
+              <span className={styles.brandGlitch} data-text={brand}>{brand}</span>
+            ) : brand}
+          </div>
+          
+          <div className={styles.links}>
+            {links?.map((link, i) => (
+              <a 
+                key={i} 
+                href={link.href} 
+                className={`${styles.link} ${link.active ? styles.linkActive : ''}`}
+              >
+                {link.children}
+              </a>
+            ))}
+            {children}
+          </div>
+
+          {statusItems && statusItems.length > 0 && (
+            <div className={styles.status}>
+              {statusItems.map((item, i) => (
+                <div key={i} className={styles.statusItem}>
+                  <span className={styles.statusLabel}>{item.label}</span>
+                  <span className={styles.statusOnline}>
+                    {item.status && (
+                      <span className={`${styles.dot} ${styles[`dot${item.status.charAt(0).toUpperCase() + item.status.slice(1)}`]}`} />
+                    )}
+                    <span className={styles.statusValue}>{item.value}</span>
+                  </span>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </nav>
+    );
+  }
+);
+
+BrutalNav.displayName = 'BrutalNav';
+export default BrutalNav;

package/navigation/brutal-nav/tailwind/index.tsx

@@ -0,0 +1,95 @@
+'use client';
+
+import { forwardRef, HTMLAttributes, ReactNode } from 'react';
+
+export interface BrutalNavLinkProps {
+  href: string;
+  children: ReactNode;
+  active?: boolean;
+}
+
+export interface BrutalNavStatusProps {
+  label: string;
+  value: string;
+  status?: 'online' | 'offline' | 'warning';
+}
+
+export interface BrutalNavProps extends HTMLAttributes<HTMLElement> {
+  brand: string;
+  brandGlitch?: boolean;
+  links?: BrutalNavLinkProps[];
+  statusItems?: BrutalNavStatusProps[];
+  variant?: 'default' | 'heavy' | 'double';
+  children?: ReactNode;
+}
+
+const dotClasses: Record<string, string> = {
+  online: 'bg-green-500 shadow-[0_0_10px_#00ff00]',
+  offline: 'bg-red-500',
+  warning: 'bg-amber-500 animate-pulse',
+};
+
+export const BrutalNav = forwardRef<HTMLElement, BrutalNavProps>(
+  ({ brand, brandGlitch, links, statusItems, variant = 'default', children, className, ...props }, ref) => {
+    const navClasses = `
+      fixed top-0 left-0 right-0 z-50 bg-black font-mono
+      ${variant === 'heavy' ? 'border-b-[5px] border-red-500' : ''}
+      ${variant === 'double' ? 'border-b-2 border-red-500 shadow-[0_4px_0_0_#ff0040]' : ''}
+      ${variant === 'default' ? 'border-b-[3px] border-red-500' : ''}
+      ${className || ''}
+    `;
+
+    return (
+      <nav ref={ref} className={navClasses} {...props}>
+        <div className="flex items-stretch h-[60px]">
+          <div className={`
+            bg-red-500 text-black font-display text-2xl px-8 flex items-center 
+            tracking-wider uppercase
+            ${variant === 'heavy' ? 'clip-path-[polygon(0_0,100%_0,90%_100%,0_100%)] pr-12' : ''}
+          `}>
+            {brand}
+          </div>
+          
+          <div className="flex flex-1">
+            {links?.map((link, i) => (
+              <a 
+                key={i} 
+                href={link.href} 
+                className={`
+                  flex items-center px-6 text-xs tracking-[0.15em] uppercase
+                  border-r border-white/10 transition-all
+                  ${link.active 
+                    ? 'bg-red-500/10 text-red-500 relative after:absolute after:bottom-0 after:left-0 after:right-0 after:h-[3px] after:bg-red-500' 
+                    : 'text-gray-500 hover:bg-red-500 hover:text-black'
+                  }
+                `}
+              >
+                {link.children}
+              </a>
+            ))}
+            {children}
+          </div>
+
+          {statusItems && statusItems.length > 0 && (
+            <div className="ml-auto flex items-center gap-8 px-8 bg-black/50 border-l border-white/10">
+              {statusItems.map((item, i) => (
+                <div key={i} className="flex flex-col gap-0.5">
+                  <span className="text-[0.5rem] text-gray-600 tracking-[0.2em] uppercase">{item.label}</span>
+                  <span className="flex items-center gap-2">
+                    {item.status && (
+                      <span className={`w-2 h-2 rounded-full ${dotClasses[item.status]} animate-pulse`} />
+                    )}
+                    <span className="text-xs text-red-500 font-bold">{item.value}</span>
+                  </span>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </nav>
+    );
+  }
+);
+
+BrutalNav.displayName = 'BrutalNav';
+export default BrutalNav;

package/navigation/progress-dots/css/index.tsx

@@ -0,0 +1,60 @@
+'use client';
+
+import { forwardRef, HTMLAttributes } from 'react';
+import styles from './progress-dots.module.css';
+
+export interface ProgressDotItem {
+  id: string;
+  label?: string;
+  href?: string;
+}
+
+export interface ProgressDotsProps extends HTMLAttributes<HTMLDivElement> {
+  items: ProgressDotItem[];
+  activeId?: string;
+  variant?: 'default' | 'gold' | 'minimal';
+  direction?: 'vertical' | 'horizontal';
+  showConnector?: boolean;
+  onDotClick?: (id: string) => void;
+}
+
+export const ProgressDots = forwardRef<HTMLDivElement, ProgressDotsProps>(
+  ({ items, activeId, variant = 'default', direction = 'vertical', showConnector = false, onDotClick, className, ...props }, ref) => {
+    const containerClasses = [
+      styles.container,
+      variant === 'gold' && styles.variantGold,
+      variant === 'minimal' && styles.variantMinimal,
+      direction === 'horizontal' && styles.horizontal,
+      showConnector && styles.withConnector,
+      className,
+    ].filter(Boolean).join(' ');
+
+    const handleClick = (id: string, href?: string) => {
+      if (onDotClick) {
+        onDotClick(id);
+      }
+      if (href) {
+        const el = document.querySelector(href);
+        el?.scrollIntoView({ behavior: 'smooth' });
+      }
+    };
+
+    return (
+      <div ref={ref} className={containerClasses} {...props}>
+        {items.map((item) => (
+          <button
+            key={item.id}
+            className={`${styles.dot} ${item.label ? styles.dotWithLabel : ''} ${activeId === item.id ? styles.dotActive : ''}`}
+            onClick={() => handleClick(item.id, item.href)}
+            aria-label={item.label || `Go to section ${item.id}`}
+          >
+            {item.label && <span className={styles.label}>{item.label}</span>}
+          </button>
+        ))}
+      </div>
+    );
+  }
+);
+
+ProgressDots.displayName = 'ProgressDots';
+export default ProgressDots;