@oalacea/chaosui 0.5.0 → 0.5.1

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

@@ -1,38 +0,0 @@
-.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

@@ -1,85 +0,0 @@
-/* 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/hexagon-menu/css/hexagon-menu.module.css

@@ -1,55 +0,0 @@
-.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

@@ -1,35 +0,0 @@
-'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

@@ -1,53 +0,0 @@
-'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;