@oalacea/chaosui 0.1.0 → 0.5.0

package/components/layout/spec-grid/index.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import { forwardRef, HTMLAttributes } from 'react';
+import styles from './spec-grid.module.css';
+
+export interface SpecItem {
+  label: string;
+  value: string | number;
+  unit?: string;
+  description?: string;
+  icon?: string;
+  highlighted?: boolean;
+}
+
+export interface SpecGridProps extends HTMLAttributes<HTMLDivElement> {
+  specs: SpecItem[];
+  variant?: 'cyan' | 'green' | 'amber' | 'blood';
+  columns?: number;
+  showHeader?: boolean;
+  headerTitle?: string;
+  compact?: boolean;
+  striped?: boolean;
+}
+
+export const SpecGrid = forwardRef<HTMLDivElement, SpecGridProps>(
+  ({ specs, variant = 'cyan', columns, showHeader = false, headerTitle = 'SYSTEM SPECS', compact = false, striped = false, className, style, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={`${styles.grid} ${styles[variant]} ${compact ? styles.compact : ''} ${striped ? styles.striped : ''} ${className || ''}`}
+        style={{ gridTemplateColumns: columns ? `repeat(${columns}, 1fr)` : undefined, ...style }}
+        {...props}
+      >
+        {showHeader && (
+          <div className={styles.header}>
+            <span>{headerTitle}</span>
+            <div className={styles.headerDots}><span className={styles.dot} /><span className={styles.dot} /><span className={styles.dot} /></div>
+          </div>
+        )}
+        {specs.map((spec, index) => (
+          <div key={index} className={`${styles.item} ${spec.icon ? styles.hasIcon : ''} ${spec.highlighted ? styles.highlighted : ''}`}>
+            {spec.icon && <span className={styles.icon}>{spec.icon}</span>}
+            <div className={styles.content}>
+              <span className={styles.label}>{spec.label}</span>
+              <span className={styles.value}>{spec.value}{spec.unit && <span className={styles.unit}>{spec.unit}</span>}</span>
+              {spec.description && <span className={styles.description}>{spec.description}</span>}
+            </div>
+          </div>
+        ))}
+      </div>
+    );
+  }
+);
+
+SpecGrid.displayName = 'SpecGrid';
+export default SpecGrid;

package/components/layout/spec-grid/spec-grid.module.css

@@ -0,0 +1,21 @@
+.grid { --spec-accent: #00f0ff; --spec-bg: rgba(0, 0, 0, 0.5); --spec-border: rgba(255, 255, 255, 0.1); display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1px; background: var(--spec-border); border: 1px solid var(--spec-border); font-family: 'Share Tech Mono', monospace; }
+.item { padding: 1.5rem; background: var(--spec-bg); display: flex; flex-direction: column; gap: 0.5rem; transition: all 0.3s ease; }
+.item:hover { background: rgba(0, 240, 255, 0.05); }
+.label { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--spec-accent); opacity: 0.8; }
+.value { font-size: 1.5rem; font-weight: 700; color: #fff; line-height: 1.2; }
+.unit { font-size: 0.75rem; color: rgba(255, 255, 255, 0.4); margin-left: 0.25rem; }
+.description { font-size: 0.75rem; color: rgba(255, 255, 255, 0.5); margin-top: 0.5rem; }
+.hasIcon { flex-direction: row; align-items: flex-start; gap: 1rem; }
+.icon { font-size: 1.5rem; color: var(--spec-accent); opacity: 0.6; }
+.content { flex: 1; display: flex; flex-direction: column; gap: 0.25rem; }
+.highlighted { background: rgba(0, 240, 255, 0.1); border-left: 2px solid var(--spec-accent); }
+.header { grid-column: 1 / -1; padding: 0.75rem 1.5rem; background: var(--spec-accent); color: #000; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; display: flex; justify-content: space-between; align-items: center; }
+.headerDots { display: flex; gap: 0.5rem; }
+.dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(0, 0, 0, 0.3); }
+.cyan { --spec-accent: #00f0ff; }
+.green { --spec-accent: #00ff88; }
+.amber { --spec-accent: #ffaa00; }
+.blood { --spec-accent: #8b1a1a; }
+.compact .item { padding: 1rem; }
+.compact .value { font-size: 1.25rem; }
+.striped .item:nth-child(even) { background: rgba(255, 255, 255, 0.02); }

package/components/layout/tower-pricing/index.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import { forwardRef, HTMLAttributes } from 'react';
+import styles from './tower-pricing.module.css';
+
+export interface PricingTier {
+  name: string;
+  price: number | string;
+  currency?: string;
+  period?: string;
+  features: string[];
+  featured?: boolean;
+  featuredLabel?: string;
+  buttonText?: string;
+  onSelect?: () => void;
+}
+
+export interface TowerPricingProps extends HTMLAttributes<HTMLDivElement> {
+  tiers: PricingTier[];
+  variant?: 'gold' | 'blood' | 'cyan' | 'bone';
+  showConnectors?: boolean;
+}
+
+export const TowerPricing = forwardRef<HTMLDivElement, TowerPricingProps>(
+  ({ tiers, variant = 'gold', showConnectors = false, className, ...props }, ref) => {
+    return (
+      <div ref={ref} className={`${styles.tower} ${styles[variant]} ${className || ''}`} {...props}>
+        {tiers.map((tier, index) => (
+          <div key={tier.name} className={`${styles.tier} ${tier.featured ? styles.featured : ''}`}>
+            {tier.featured && tier.featuredLabel && <span className={styles.featuredBadge}>{tier.featuredLabel}</span>}
+            <div className={styles.tierHeader}>
+              <span className={styles.tierName}>{tier.name}</span>
+              <div className={styles.tierPrice}>
+                <span className={styles.currency}>{tier.currency || '$'}</span>
+                <span className={styles.amount}>{tier.price}</span>
+                {tier.period && <span className={styles.period}>/{tier.period}</span>}
+              </div>
+            </div>
+            <ul className={styles.tierFeatures}>
+              {tier.features.map((feature, i) => (
+                <li key={i} className={styles.feature}><span className={styles.featureIcon}>✦</span>{feature}</li>
+              ))}
+            </ul>
+            <div className={styles.tierAction}>
+              <button className={styles.actionButton} onClick={tier.onSelect}>{tier.buttonText || 'Select'}</button>
+            </div>
+            {showConnectors && index < tiers.length - 1 && <span className={styles.connector} />}
+          </div>
+        ))}
+      </div>
+    );
+  }
+);
+
+TowerPricing.displayName = 'TowerPricing';
+export default TowerPricing;

package/components/layout/tower-pricing/tower-pricing.module.css

@@ -0,0 +1,27 @@
+.tower { --tower-accent: #c9a227; --tower-bg: rgba(0, 0, 0, 0.6); --tower-border: rgba(255, 255, 255, 0.1); display: flex; flex-direction: column; gap: 0; max-width: 400px; }
+.tier { position: relative; padding: 2rem; background: var(--tower-bg); border: 1px solid var(--tower-border); border-top: none; transition: all 0.3s ease; }
+.tier:first-child { border-top: 1px solid var(--tower-border); border-radius: 4px 4px 0 0; }
+.tier:last-child { border-radius: 0 0 4px 4px; }
+.tier:hover { background: rgba(201, 162, 39, 0.05); border-color: var(--tower-accent); z-index: 1; }
+.featured { border-color: var(--tower-accent); background: rgba(201, 162, 39, 0.1); transform: scale(1.02); z-index: 2; }
+.featured::before { content: ''; position: absolute; left: -1px; right: -1px; top: -1px; height: 3px; background: var(--tower-accent); }
+.featuredBadge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); padding: 0.25rem 1rem; background: var(--tower-accent); color: #000; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; }
+.tierHeader { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--tower-border); }
+.tierName { font-family: 'Cinzel', serif; font-size: 1.25rem; font-weight: 700; color: var(--tower-accent); letter-spacing: 0.1em; }
+.tierPrice { display: flex; align-items: baseline; gap: 0.25rem; }
+.currency { font-size: 1rem; color: rgba(255, 255, 255, 0.5); }
+.amount { font-size: 2rem; font-weight: 700; color: #fff; }
+.period { font-size: 0.75rem; color: rgba(255, 255, 255, 0.4); }
+.tierFeatures { list-style: none; margin: 1rem 0; padding: 0; }
+.feature { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0; font-size: 0.875rem; color: rgba(255, 255, 255, 0.8); }
+.featureIcon { color: var(--tower-accent); font-size: 0.75rem; }
+.tierAction { margin-top: 1.5rem; }
+.actionButton { width: 100%; padding: 0.875rem 1.5rem; background: transparent; border: 1px solid var(--tower-accent); color: var(--tower-accent); font-family: inherit; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.15em; cursor: pointer; transition: all 0.3s ease; }
+.actionButton:hover { background: var(--tower-accent); color: #000; }
+.featured .actionButton { background: var(--tower-accent); color: #000; }
+.featured .actionButton:hover { background: transparent; color: var(--tower-accent); }
+.gold { --tower-accent: #c9a227; }
+.blood { --tower-accent: #8b1a1a; }
+.cyan { --tower-accent: #00f0ff; }
+.bone { --tower-accent: #d4c5a9; }
+.connector { position: absolute; left: 50%; bottom: -1px; transform: translateX(-50%); width: 1px; height: 20px; background: var(--tower-accent); opacity: 0.3; }

package/components/layout/tracklist/index.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+import { forwardRef, HTMLAttributes } from 'react';
+import styles from './tracklist.module.css';
+
+export interface Track {
+  number: number | string;
+  name: string;
+  artist?: string;
+  duration: string;
+  active?: boolean;
+}
+
+export interface TracklistProps extends HTMLAttributes<HTMLDivElement> {
+  tracks: Track[];
+  variant?: 'silver' | 'blood' | 'gold' | 'bone';
+  showHeader?: boolean;
+  compact?: boolean;
+  numbered?: boolean;
+  onTrackClick?: (track: Track, index: number) => void;
+}
+
+export const Tracklist = forwardRef<HTMLDivElement, TracklistProps>(
+  ({ tracks, variant = 'silver', showHeader = false, compact = false, numbered = false, onTrackClick, className, ...props }, ref) => {
+    return (
+      <div ref={ref} className={`${styles.tracklist} ${styles[variant]} ${compact ? styles.compact : ''} ${numbered ? styles.numbered : ''} ${className || ''}`} {...props}>
+        {showHeader && <div className={styles.header}><span>#</span><span>Title</span><span></span><span>Duration</span></div>}
+        {tracks.map((track, index) => (
+          <div key={index} className={`${styles.track} ${track.active ? styles.active : ''}`} onClick={() => onTrackClick?.(track, index)}>
+            <span className={styles.trackNum}>{String(track.number).padStart(2, '0')}</span>
+            <div className={styles.trackInfo}>
+              <span className={styles.trackName}>{track.name}</span>
+              {track.artist && <span className={styles.trackArtist}>{track.artist}</span>}
+            </div>
+            {!compact && <div className={styles.trackBarContainer}><div className={styles.trackBar} /></div>}
+            <span className={styles.trackDuration}>{track.duration}</span>
+          </div>
+        ))}
+      </div>
+    );
+  }
+);
+
+Tracklist.displayName = 'Tracklist';
+export default Tracklist;

package/components/layout/tracklist/tracklist.module.css

@@ -0,0 +1,24 @@
+.tracklist { --track-accent: #888; --track-hover: rgba(255, 255, 255, 0.05); --track-active: rgba(139, 26, 26, 0.2); display: flex; flex-direction: column; font-family: 'Cormorant Garamond', serif; }
+.track { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 1.5rem; padding: 1rem 1.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.05); cursor: pointer; transition: all 0.3s ease; }
+.track:hover { background: var(--track-hover); }
+.track:hover .trackBar { width: 100%; }
+.trackNum { font-family: 'Share Tech Mono', monospace; font-size: 0.75rem; color: var(--track-accent); min-width: 2rem; }
+.trackInfo { display: flex; flex-direction: column; gap: 0.25rem; overflow: hidden; }
+.trackName { font-size: 1rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.trackArtist { font-size: 0.75rem; color: rgba(255, 255, 255, 0.4); font-style: italic; }
+.trackBarContainer { position: relative; width: 80px; height: 2px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
+.trackBar { position: absolute; left: 0; top: 0; height: 100%; width: 0; background: var(--track-accent); transition: width 0.6s ease; }
+.trackDuration { font-family: 'Share Tech Mono', monospace; font-size: 0.75rem; color: rgba(255, 255, 255, 0.5); min-width: 3rem; text-align: right; }
+.active { background: var(--track-active); }
+.active .trackNum { color: #8b1a1a; }
+.active .trackNum::before { content: '▶'; margin-right: 0.5rem; }
+.active .trackBar { animation: progress 180s linear forwards; }
+@keyframes progress { from { width: 0; } to { width: 100%; } }
+.silver { --track-accent: #888; }
+.blood { --track-accent: #8b1a1a; --track-active: rgba(139, 26, 26, 0.2); }
+.gold { --track-accent: #c9a227; --track-active: rgba(201, 162, 39, 0.2); }
+.bone { --track-accent: #d4c5a9; --track-active: rgba(212, 197, 169, 0.2); }
+.header { display: grid; grid-template-columns: auto 1fr auto auto; gap: 1.5rem; padding: 0.75rem 1.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--track-accent); }
+.compact .track { padding: 0.75rem 1rem; gap: 1rem; }
+.compact .trackBarContainer { display: none; }
+.numbered .trackNum { font-size: 1.25rem; font-family: 'Playfair Display', serif; font-weight: 700; }

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

@@ -0,0 +1,32 @@
+'use client';
+
+import { forwardRef, HTMLAttributes, ReactNode } from 'react';
+import styles from './void-frame.module.css';
+
+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';
+}
+
+export const VoidFrame = forwardRef<HTMLDivElement, VoidFrameProps>(
+  ({ children, variant = 'gold', cornerStyle = 'simple', glow = false, padding = 'md', className, style, ...props }, ref) => {
+    const paddingSizes = { sm: '1rem', md: '2rem', lg: '3rem', xl: '4rem' };
+    const cornerStyleClass = cornerStyle === 'extended' ? styles.extended : cornerStyle === 'ornate' ? styles.ornate : '';
+
+    return (
+      <div ref={ref} className={`${styles.frame} ${styles[variant]} ${cornerStyleClass} ${glow ? styles.glow : ''} ${className || ''}`} style={{ padding: paddingSizes[padding], ...style }} {...props}>
+        <span className={`${styles.corner} ${styles.cornerTopLeft}`} />
+        <span className={`${styles.corner} ${styles.cornerTopRight}`} />
+        <span className={`${styles.corner} ${styles.cornerBottomLeft}`} />
+        <span className={`${styles.corner} ${styles.cornerBottomRight}`} />
+        {children}
+      </div>
+    );
+  }
+);
+
+VoidFrame.displayName = 'VoidFrame';
+export default VoidFrame;

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

@@ -0,0 +1,38 @@
+.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 { 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 .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 .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; }
+.gold { --frame-color: #c9a227; }
+.bone { --frame-color: #d4c5a9; }
+.blood { --frame-color: #8b1a1a; }
+.iron { --frame-color: #4a4a4a; }
+.cyan { --frame-color: #00f0ff; }
+.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/components/navigation/brutal-nav/brutal-nav.module.css

@@ -0,0 +1,85 @@
+/* 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 {
+  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; } }
+
+.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/components/navigation/brutal-nav/index.tsx

@@ -0,0 +1,71 @@
+'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;
+  links?: BrutalNavLinkProps[];
+  statusItems?: BrutalNavStatusProps[];
+  variant?: 'default' | 'heavy' | 'double';
+  children?: ReactNode;
+}
+
+export const BrutalNav = forwardRef<HTMLElement, BrutalNavProps>(
+  ({ brand, 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}>{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/components/navigation/hexagon-menu/css/hexagon-menu.module.css

@@ -0,0 +1,55 @@
+.menu {
+  --hex-color: #00f0ff;
+  --hex-size: 5rem;
+  --hex-offset: 2.5rem;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  justify-content: center;
+}
+
+.cyan { --hex-color: #00f0ff; }
+.pink { --hex-color: #ff00ff; }
+.green { --hex-color: #00ff88; }
+.purple { --hex-color: #a855f7; }
+
+.sm { --hex-size: 3.75rem; --hex-offset: 1.875rem; }
+.md { --hex-size: 5rem; --hex-offset: 2.5rem; }
+.lg { --hex-size: 6.25rem; --hex-offset: 3.125rem; }
+
+.item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: var(--hex-size);
+  height: calc(var(--hex-size) * 1.1547);
+  padding: 0.5rem;
+  background: rgba(0, 0, 0, 0.6);
+  border: 2px solid var(--hex-color);
+  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.item:hover {
+  background: rgba(0, 240, 255, 0.2);
+  box-shadow: 0 0 20px var(--hex-color);
+  transform: scale(1.1);
+}
+
+.icon {
+  font-size: calc(var(--hex-size) / 3);
+  color: var(--hex-color);
+  margin-bottom: 0.25rem;
+}
+
+.label {
+  font-family: var(--font-display, 'Orbitron', sans-serif);
+  font-size: 0.5625rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.0625em;
+  color: rgba(255, 255, 255, 0.9);
+  text-align: center;
+}

package/components/navigation/hexagon-menu/css/index.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import { forwardRef, HTMLAttributes } from 'react';
+import styles from './hexagon-menu.module.css';
+
+export interface HexagonMenuItem {
+  id: string;
+  label: string;
+  icon?: React.ReactNode;
+  onClick?: () => void;
+}
+
+export interface HexagonMenuProps extends HTMLAttributes<HTMLElement> {
+  items: HexagonMenuItem[];
+  variant?: 'cyan' | 'pink' | 'green' | 'purple';
+  size?: 'sm' | 'md' | 'lg';
+}
+
+export const HexagonMenu = forwardRef<HTMLElement, HexagonMenuProps>(
+  ({ items, variant = 'cyan', size = 'md', className, ...props }, ref) => {
+    return (
+      <nav ref={ref} className={`${styles.menu} ${styles[variant]} ${styles[size]} ${className || ''}`} {...props}>
+        {items.map((item, i) => (
+          <button key={item.id} className={styles.item} onClick={item.onClick} style={{ marginTop: i % 2 === 1 ? 'var(--hex-offset)' : 0 }}>
+            {item.icon && <span className={styles.icon}>{item.icon}</span>}
+            <span className={styles.label}>{item.label}</span>
+          </button>
+        ))}
+      </nav>
+    );
+  }
+);
+
+HexagonMenu.displayName = 'HexagonMenu';
+export default HexagonMenu;

package/components/navigation/hexagon-menu/tailwind/index.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+import { forwardRef, HTMLAttributes } from 'react';
+
+export interface HexagonMenuItem {
+  id: string;
+  label: string;
+  icon?: React.ReactNode;
+  onClick?: () => void;
+}
+
+export interface HexagonMenuProps extends HTMLAttributes<HTMLElement> {
+  items: HexagonMenuItem[];
+  variant?: 'cyan' | 'pink' | 'green' | 'purple';
+}
+
+const variantStyles = {
+  cyan: { border: 'border-cyan-400', hover: 'hover:bg-cyan-400/20 hover:shadow-[0_0_20px_#00f0ff]', icon: 'text-cyan-400' },
+  pink: { border: 'border-fuchsia-500', hover: 'hover:bg-fuchsia-500/20 hover:shadow-[0_0_20px_#ff00ff]', icon: 'text-fuchsia-500' },
+  green: { border: 'border-emerald-400', hover: 'hover:bg-emerald-400/20 hover:shadow-[0_0_20px_#00ff88]', icon: 'text-emerald-400' },
+  purple: { border: 'border-purple-500', hover: 'hover:bg-purple-500/20 hover:shadow-[0_0_20px_#a855f7]', icon: 'text-purple-500' },
+};
+
+export const HexagonMenu = forwardRef<HTMLElement, HexagonMenuProps>(
+  ({ items, variant = 'cyan', className = '', ...props }, ref) => {
+    const colors = variantStyles[variant];
+    return (
+      <nav ref={ref} className={`flex flex-wrap gap-2 justify-center ${className}`} {...props}>
+        {items.map((item, i) => (
+          <button
+            key={item.id}
+            className={`
+              flex flex-col items-center justify-center w-20 h-[92px] p-2
+              bg-black/60 border-2 ${colors.border}
+              transition-all duration-300 cursor-pointer
+              ${colors.hover} hover:scale-110 active:scale-105
+            `}
+            style={{ clipPath: 'polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)', marginTop: i % 2 === 1 ? '40px' : '0' }}
+            onClick={item.onClick}
+          >
+            {item.icon && <span className={`text-2xl ${colors.icon} mb-1`}>{item.icon}</span>}
+            <span className="font-['Orbitron',sans-serif] text-[9px] font-semibold uppercase tracking-wide text-white/90 text-center">
+              {item.label}
+            </span>
+          </button>
+        ))}
+      </nav>
+    );
+  }
+);
+
+HexagonMenu.displayName = 'HexagonMenu';
+export default HexagonMenu;

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

@@ -0,0 +1,55 @@
+'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) document.querySelector(href)?.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;