@oalacea/chaosui 0.1.0 → 0.5.0

package/components/effects/glowing-border/css/index.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+import { forwardRef, HTMLAttributes } from 'react';
+import styles from './glowing-border.module.css';
+
+export interface GlowingBorderProps extends HTMLAttributes<HTMLDivElement> {
+  /** Neon color variant */
+  variant?: 'cyan' | 'pink' | 'green' | 'purple' | 'rainbow';
+  /** Pulse animation */
+  animated?: boolean;
+  /** Glow intensity */
+  intensity?: 'low' | 'medium' | 'high';
+}
+
+export const GlowingBorder = forwardRef<HTMLDivElement, GlowingBorderProps>(
+  (
+    {
+      children,
+      variant = 'cyan',
+      animated = true,
+      intensity = 'medium',
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const classes = [
+      styles.container,
+      styles[variant],
+      styles[intensity],
+      animated && styles.animated,
+      className,
+    ].filter(Boolean).join(' ');
+
+    return (
+      <div ref={ref} className={classes} {...props}>
+        <div className={styles.content}>{children}</div>
+      </div>
+    );
+  }
+);
+
+GlowingBorder.displayName = 'GlowingBorder';
+
+export default GlowingBorder;

package/components/effects/glowing-border/tailwind/index.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+import { forwardRef, HTMLAttributes } from 'react';
+
+export interface GlowingBorderProps extends HTMLAttributes<HTMLDivElement> {
+  variant?: 'cyan' | 'pink' | 'green' | 'purple';
+  animated?: boolean;
+}
+
+const variantStyles = {
+  cyan: 'bg-cyan-400 shadow-[0_0_15px_#00f0ff]',
+  pink: 'bg-fuchsia-500 shadow-[0_0_15px_#ff00ff]',
+  green: 'bg-emerald-400 shadow-[0_0_15px_#00ff88]',
+  purple: 'bg-purple-500 shadow-[0_0_15px_#a855f7]',
+};
+
+export const GlowingBorder = forwardRef<HTMLDivElement, GlowingBorderProps>(
+  ({ children, variant = 'cyan', animated = true, className = '', ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={`
+          relative p-0.5 rounded-lg
+          ${variantStyles[variant]}
+          ${animated ? 'animate-pulse' : ''}
+          hover:brightness-125 transition-all duration-300
+          ${className}
+        `}
+        {...props}
+      >
+        <div className="relative bg-[#0a0a0f] rounded-md">
+          {children}
+        </div>
+      </div>
+    );
+  }
+);
+
+GlowingBorder.displayName = 'GlowingBorder';
+export default GlowingBorder;

package/components/effects/screen-distortion/screen-distortion.module.css

@@ -46,14 +46,14 @@
 
 @keyframes glitch-distort-1 {
   0%, 85%, 100% { opacity: 0; clip-path: inset(0 0 100% 0); }
-  86% { opacity: 1; clip-path: inset(20% 0 60% 0); transform: translateX(var(--shift, -5px)); background: rgba(255, 0, 64, 0.1); }
+  86% { opacity: 1; clip-path: inset(20% 0 60% 0); transform: translateX(var(--shift, -5px)); background: hsl(var(--primary, 347 100% 50%) / 0.1); }
   88% { opacity: 1; clip-path: inset(50% 0 30% 0); transform: translateX(var(--shift, 5px)); }
   90% { opacity: 0; }
 }
 
 @keyframes glitch-distort-2 {
   0%, 85%, 100% { opacity: 0; clip-path: inset(0 0 100% 0); }
-  87% { opacity: 1; clip-path: inset(40% 0 40% 0); transform: translateX(var(--shift, 3px)); background: rgba(0, 255, 255, 0.1); }
+  87% { opacity: 1; clip-path: inset(40% 0 40% 0); transform: translateX(var(--shift, 3px)); background: hsl(var(--secondary, 180 100% 50%) / 0.1); }
   89% { opacity: 1; clip-path: inset(70% 0 10% 0); transform: translateX(var(--shift, -3px)); }
   91% { opacity: 0; }
 }

package/components/effects/warning-tape/index.tsx

@@ -22,8 +22,8 @@ export const WarningTape = forwardRef<HTMLDivElement, WarningTapeProps>(
   (
     {
       children,
-      bgColor = '#ff0040',
-      textColor = '#000000',
+      bgColor,
+      textColor,
       duration = 20,
       rotation = -1,
       reverse = false,
@@ -41,8 +41,8 @@ export const WarningTape = forwardRef<HTMLDivElement, WarningTapeProps>(
         ref={ref}
         className={`${styles.tape} ${className || ''}`}
         style={{
-          backgroundColor: bgColor,
-          color: textColor,
+          ...(bgColor && { backgroundColor: bgColor }),
+          ...(textColor && { color: textColor }),
           transform: `rotate(${rotation}deg) scale(1.1)`,
           ...style,
         }}

package/components/effects/warning-tape/warning-tape.module.css

@@ -7,6 +7,8 @@
   font-size: 0.75rem;
   letter-spacing: 0.1em;
   text-transform: uppercase;
+  background-color: hsl(var(--primary, 347 100% 50%));
+  color: hsl(var(--primary-foreground, 0 0% 100%));
 }
 
 .scroll {

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

@@ -0,0 +1,52 @@
+.container {
+  --grid-color: #00f0ff;
+  
+  width: 100%;
+  font-family: var(--font-mono, 'Share Tech Mono', monospace);
+  background: rgba(0, 0, 0, 0.5);
+  border: 1px solid var(--grid-color);
+  overflow: hidden;
+}
+
+.cyan { --grid-color: #00f0ff; }
+.green { --grid-color: #00ff88; }
+.amber { --grid-color: #ffaa00; }
+
+.table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.headerRow {
+  background: rgba(0, 240, 255, 0.1);
+  border-bottom: 1px solid var(--grid-color);
+}
+
+.header {
+  padding: 0.75rem 1rem;
+  font-size: 0.6875rem;
+  font-weight: 700;
+  text-align: left;
+  text-transform: uppercase;
+  letter-spacing: 0.125em;
+  color: var(--grid-color);
+}
+
+.row {
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+  transition: background 0.2s ease;
+}
+
+.striped:nth-child(even) {
+  background: rgba(255, 255, 255, 0.02);
+}
+
+.hoverable:hover {
+  background: rgba(0, 240, 255, 0.1);
+}
+
+.cell {
+  padding: 0.625rem 1rem;
+  font-size: 0.8125rem;
+  color: rgba(255, 255, 255, 0.8);
+}

package/components/layout/data-grid/css/index.tsx

@@ -0,0 +1,76 @@
+'use client';
+
+import { forwardRef, TableHTMLAttributes } from 'react';
+import styles from './data-grid.module.css';
+
+export interface DataGridColumn<T> {
+  key: keyof T;
+  header: string;
+  width?: string;
+}
+
+export interface DataGridProps<T extends Record<string, unknown>> extends Omit<TableHTMLAttributes<HTMLTableElement>, 'children'> {
+  /** Column definitions */
+  columns: DataGridColumn<T>[];
+  /** Data rows */
+  data: T[];
+  /** Color variant */
+  variant?: 'cyan' | 'green' | 'amber';
+  /** Striped rows */
+  striped?: boolean;
+  /** Hoverable rows */
+  hoverable?: boolean;
+}
+
+function DataGridInner<T extends Record<string, unknown>>(
+  {
+    columns,
+    data,
+    variant = 'cyan',
+    striped = true,
+    hoverable = true,
+    className,
+    ...props
+  }: DataGridProps<T>,
+  ref: React.ForwardedRef<HTMLTableElement>
+) {
+  return (
+    <div className={`${styles.container} ${styles[variant]} ${className || ''}`}>
+      <table ref={ref} className={styles.table} {...props}>
+        <thead>
+          <tr className={styles.headerRow}>
+            {columns.map((col) => (
+              <th 
+                key={String(col.key)} 
+                className={styles.header}
+                style={{ width: col.width }}
+              >
+                {col.header}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {data.map((row, i) => (
+            <tr 
+              key={i} 
+              className={`${styles.row} ${striped ? styles.striped : ''} ${hoverable ? styles.hoverable : ''}`}
+            >
+              {columns.map((col) => (
+                <td key={String(col.key)} className={styles.cell}>
+                  {String(row[col.key])}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+export const DataGrid = forwardRef(DataGridInner) as <T extends Record<string, unknown>>(
+  props: DataGridProps<T> & { ref?: React.ForwardedRef<HTMLTableElement> }
+) => JSX.Element;
+
+export default DataGrid;

package/components/layout/data-grid/tailwind/index.tsx

@@ -0,0 +1,74 @@
+'use client';
+
+import { forwardRef, TableHTMLAttributes } from 'react';
+
+export interface DataGridColumn<T> {
+  key: keyof T;
+  header: string;
+  width?: string;
+}
+
+export interface DataGridProps<T extends Record<string, unknown>> extends Omit<TableHTMLAttributes<HTMLTableElement>, 'children'> {
+  columns: DataGridColumn<T>[];
+  data: T[];
+  variant?: 'cyan' | 'green' | 'amber';
+  striped?: boolean;
+  hoverable?: boolean;
+}
+
+const variantStyles = {
+  cyan: { border: 'border-cyan-400', header: 'text-cyan-400 bg-cyan-400/10', hover: 'hover:bg-cyan-400/10' },
+  green: { border: 'border-emerald-400', header: 'text-emerald-400 bg-emerald-400/10', hover: 'hover:bg-emerald-400/10' },
+  amber: { border: 'border-amber-400', header: 'text-amber-400 bg-amber-400/10', hover: 'hover:bg-amber-400/10' },
+};
+
+function DataGridInner<T extends Record<string, unknown>>(
+  { columns, data, variant = 'cyan', striped = true, hoverable = true, className = '', ...props }: DataGridProps<T>,
+  ref: React.ForwardedRef<HTMLTableElement>
+) {
+  const colors = variantStyles[variant];
+  
+  return (
+    <div className={`w-full font-['Share_Tech_Mono',monospace] bg-black/50 border ${colors.border} overflow-hidden ${className}`}>
+      <table ref={ref} className="w-full border-collapse" {...props}>
+        <thead>
+          <tr className={`${colors.header} border-b ${colors.border}`}>
+            {columns.map((col) => (
+              <th
+                key={String(col.key)}
+                className="px-4 py-3 text-left text-[11px] font-bold uppercase tracking-widest"
+                style={{ width: col.width }}
+              >
+                {col.header}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {data.map((row, i) => (
+            <tr
+              key={i}
+              className={`
+                border-b border-white/5 transition-colors duration-200
+                ${striped && i % 2 === 1 ? 'bg-white/[0.02]' : ''}
+                ${hoverable ? colors.hover : ''}
+              `}
+            >
+              {columns.map((col) => (
+                <td key={String(col.key)} className="px-4 py-2.5 text-[13px] text-white/80">
+                  {String(row[col.key])}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+export const DataGrid = forwardRef(DataGridInner) as <T extends Record<string, unknown>>(
+  props: DataGridProps<T> & { ref?: React.ForwardedRef<HTMLTableElement> }
+) => JSX.Element;
+
+export default DataGrid;

package/components/layout/hologram-card/css/hologram-card.module.css

@@ -0,0 +1,102 @@
+.card {
+  --holo-color: #00f0ff;
+  --holo-bg: rgba(0, 240, 255, 0.05);
+  
+  position: relative;
+  padding: 1.5rem;
+  background: var(--holo-bg);
+  border: 1px solid var(--holo-color);
+  border-radius: 0.25rem;
+  overflow: hidden;
+}
+
+.card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: linear-gradient(90deg, transparent, var(--holo-color), transparent);
+  animation: scan-line 3s linear infinite;
+}
+
+@keyframes scan-line {
+  0% { top: 0; opacity: 1; }
+  50% { opacity: 0.5; }
+  100% { top: 100%; opacity: 1; }
+}
+
+/* Variants */
+.cyan {
+  --holo-color: #00f0ff;
+  --holo-bg: rgba(0, 240, 255, 0.05);
+}
+
+.pink {
+  --holo-color: #ff00ff;
+  --holo-bg: rgba(255, 0, 255, 0.05);
+}
+
+.green {
+  --holo-color: #00ff88;
+  --holo-bg: rgba(0, 255, 136, 0.05);
+}
+
+.purple {
+  --holo-color: #a855f7;
+  --holo-bg: rgba(168, 85, 247, 0.05);
+}
+
+.content {
+  position: relative;
+  z-index: 2;
+}
+
+.scanlines {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+    0deg,
+    transparent,
+    transparent 2px,
+    rgba(0, 0, 0, 0.1) 2px,
+    rgba(0, 0, 0, 0.1) 4px
+  );
+  pointer-events: none;
+  z-index: 3;
+}
+
+.glow {
+  position: absolute;
+  top: -50%;
+  left: -50%;
+  width: 200%;
+  height: 200%;
+  background: radial-gradient(circle, var(--holo-bg) 0%, transparent 70%);
+  opacity: 0.5;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.flicker {
+  animation: hologram-flicker 4s infinite;
+}
+
+@keyframes hologram-flicker {
+  0%, 100% { opacity: 1; }
+  92% { opacity: 1; }
+  93% { opacity: 0.8; }
+  94% { opacity: 1; }
+  95% { opacity: 0.9; }
+  96% { opacity: 1; }
+}
+
+.card:hover {
+  box-shadow: 
+    0 0 20px var(--holo-color),
+    inset 0 0 20px rgba(0, 240, 255, 0.1);
+}

package/components/layout/hologram-card/css/index.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import { forwardRef, HTMLAttributes } from 'react';
+import styles from './hologram-card.module.css';
+
+export interface HologramCardProps extends HTMLAttributes<HTMLDivElement> {
+  /** Neon color variant */
+  variant?: 'cyan' | 'pink' | 'green' | 'purple';
+  /** Show CRT scanlines */
+  scanlines?: boolean;
+  /** Flicker effect */
+  flicker?: boolean;
+}
+
+export const HologramCard = forwardRef<HTMLDivElement, HologramCardProps>(
+  (
+    {
+      children,
+      variant = 'cyan',
+      scanlines = true,
+      flicker = false,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const classes = [
+      styles.card,
+      styles[variant],
+      flicker && styles.flicker,
+      className,
+    ].filter(Boolean).join(' ');
+
+    return (
+      <div ref={ref} className={classes} {...props}>
+        <div className={styles.content}>{children}</div>
+        {scanlines && <div className={styles.scanlines} />}
+        <div className={styles.glow} />
+      </div>
+    );
+  }
+);
+
+HologramCard.displayName = 'HologramCard';
+
+export default HologramCard;

package/components/layout/hologram-card/tailwind/index.tsx

@@ -0,0 +1,61 @@
+'use client';
+
+import { forwardRef, HTMLAttributes, useId } from 'react';
+
+export interface HologramCardProps extends HTMLAttributes<HTMLDivElement> {
+  variant?: 'cyan' | 'pink' | 'green' | 'purple';
+  scanlines?: boolean;
+}
+
+const variantStyles = {
+  cyan: { border: 'border-cyan-400', bg: 'bg-cyan-400/5', glow: 'hover:shadow-[0_0_20px_#00f0ff]', color: '#00f0ff' },
+  pink: { border: 'border-fuchsia-500', bg: 'bg-fuchsia-500/5', glow: 'hover:shadow-[0_0_20px_#ff00ff]', color: '#ff00ff' },
+  green: { border: 'border-emerald-400', bg: 'bg-emerald-400/5', glow: 'hover:shadow-[0_0_20px_#00ff88]', color: '#00ff88' },
+  purple: { border: 'border-purple-500', bg: 'bg-purple-500/5', glow: 'hover:shadow-[0_0_20px_#a855f7]', color: '#a855f7' },
+};
+
+export const HologramCard = forwardRef<HTMLDivElement, HologramCardProps>(
+  ({ children, variant = 'cyan', scanlines = true, className = '', ...props }, ref) => {
+    const id = useId();
+    const styles = variantStyles[variant];
+    
+    return (
+      <>
+        <style>{`
+          @keyframes scan-${id} {
+            0% { top: 0; opacity: 1; }
+            50% { opacity: 0.5; }
+            100% { top: 100%; opacity: 1; }
+          }
+        `}</style>
+        <div
+          ref={ref}
+          className={`
+            relative p-6 rounded border ${styles.border} ${styles.bg}
+            overflow-hidden transition-shadow duration-300 ${styles.glow}
+            ${className}
+          `}
+          {...props}
+        >
+          <div
+            className="absolute left-0 right-0 h-0.5"
+            style={{
+              background: `linear-gradient(90deg, transparent, ${styles.color}, transparent)`,
+              animation: `scan-${id} 3s linear infinite`,
+            }}
+          />
+          <div className="relative z-10">{children}</div>
+          {scanlines && (
+            <div
+              className="absolute inset-0 pointer-events-none z-20"
+              style={{ background: 'repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.1) 2px, rgba(0,0,0,0.1) 4px)' }}
+            />
+          )}
+        </div>
+      </>
+    );
+  }
+);
+
+HologramCard.displayName = 'HologramCard';
+export default HologramCard;

package/components/layout/horizontal-scroll/horizontal-scroll.module.css

@@ -0,0 +1,30 @@
+.container {
+  --scroll-accent: #00f0ff;
+  --scroll-bg: rgba(0, 0, 0, 0.3);
+  --panel-gap: 2rem;
+  width: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scroll-snap-type: x mandatory;
+  scroll-behavior: smooth;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: thin;
+  scrollbar-color: var(--scroll-accent) var(--scroll-bg);
+}
+.container::-webkit-scrollbar { height: 4px; }
+.container::-webkit-scrollbar-track { background: var(--scroll-bg); }
+.container::-webkit-scrollbar-thumb { background: var(--scroll-accent); border-radius: 2px; }
+.track { display: flex; gap: var(--panel-gap); padding: 1rem 0; width: max-content; }
+.panel { flex: 0 0 auto; scroll-snap-align: start; }
+.cyan { --scroll-accent: #00f0ff; }
+.green { --scroll-accent: #00ff88; }
+.amber { --scroll-accent: #ffaa00; }
+.blood { --scroll-accent: #8b1a1a; }
+.panelFull { width: 100vw; }
+.panelLarge { width: 80vw; }
+.panelMedium { width: 60vw; }
+.panelSmall { width: 40vw; }
+.fadeEdges { mask-image: linear-gradient(90deg, transparent 0%, black 5%, black 95%, transparent 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 5%, black 95%, transparent 100%); }
+.indicators { display: flex; justify-content: center; gap: 0.5rem; margin-top: 1rem; }
+.indicator { width: 8px; height: 8px; border-radius: 50%; background: var(--scroll-bg); border: 1px solid var(--scroll-accent); cursor: pointer; transition: all 0.3s ease; }
+.indicator:hover, .indicatorActive { background: var(--scroll-accent); box-shadow: 0 0 10px var(--scroll-accent); }

package/components/layout/horizontal-scroll/index.tsx

@@ -0,0 +1,78 @@
+'use client';
+
+import { forwardRef, HTMLAttributes, ReactNode, useRef, useState, useEffect } from 'react';
+import styles from './horizontal-scroll.module.css';
+
+export interface HorizontalScrollProps extends HTMLAttributes<HTMLDivElement> {
+  children: ReactNode;
+  variant?: 'cyan' | 'green' | 'amber' | 'blood';
+  panelSize?: 'full' | 'large' | 'medium' | 'small';
+  fadeEdges?: boolean;
+  showIndicators?: boolean;
+  gap?: number;
+}
+
+export const HorizontalScroll = forwardRef<HTMLDivElement, HorizontalScrollProps>(
+  ({ children, variant = 'cyan', panelSize = 'large', fadeEdges = false, showIndicators = false, gap = 2, className, style, ...props }, ref) => {
+    const containerRef = useRef<HTMLDivElement>(null);
+    const [activeIndex, setActiveIndex] = useState(0);
+    const [panelCount, setPanelCount] = useState(0);
+
+    useEffect(() => {
+      const container = containerRef.current;
+      if (!container) return;
+      const panels = container.querySelectorAll(`.${styles.panel}`);
+      setPanelCount(panels.length);
+
+      const handleScroll = () => {
+        if (!container) return;
+        const panelWidth = container.scrollWidth / panels.length;
+        setActiveIndex(Math.round(container.scrollLeft / panelWidth));
+      };
+
+      container.addEventListener('scroll', handleScroll, { passive: true });
+      return () => container.removeEventListener('scroll', handleScroll);
+    }, [children]);
+
+    const scrollToPanel = (index: number) => {
+      const container = containerRef.current;
+      if (!container) return;
+      const panelWidth = container.scrollWidth / panelCount;
+      container.scrollTo({ left: panelWidth * index, behavior: 'smooth' });
+    };
+
+    const panelSizeClass = { full: styles.panelFull, large: styles.panelLarge, medium: styles.panelMedium, small: styles.panelSmall }[panelSize];
+
+    return (
+      <div className={className}>
+        <div
+          ref={(node) => {
+            (containerRef as React.MutableRefObject<HTMLDivElement | null>).current = node;
+            if (typeof ref === 'function') ref(node);
+            else if (ref) ref.current = node;
+          }}
+          className={`${styles.container} ${styles[variant]} ${fadeEdges ? styles.fadeEdges : ''}`}
+          style={{ '--panel-gap': `${gap}rem`, ...style } as React.CSSProperties}
+          {...props}
+        >
+          <div className={styles.track}>
+            {Array.isArray(children)
+              ? children.map((child, i) => <div key={i} className={`${styles.panel} ${panelSizeClass}`}>{child}</div>)
+              : <div className={`${styles.panel} ${panelSizeClass}`}>{children}</div>
+            }
+          </div>
+        </div>
+        {showIndicators && panelCount > 1 && (
+          <div className={styles.indicators}>
+            {Array.from({ length: panelCount }).map((_, i) => (
+              <button key={i} className={`${styles.indicator} ${i === activeIndex ? styles.indicatorActive : ''}`} onClick={() => scrollToPanel(i)} aria-label={`Go to panel ${i + 1}`} />
+            ))}
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+
+HorizontalScroll.displayName = 'HorizontalScroll';
+export default HorizontalScroll;