@oalacea/chaosui 0.1.0 → 0.4.0

package/components/cyber/cyber-tooltip/tailwind/index.tsx

@@ -0,0 +1,48 @@
+'use client';
+
+import { forwardRef, HTMLAttributes, useState } from 'react';
+
+export interface CyberTooltipProps extends HTMLAttributes<HTMLDivElement> {
+  content: React.ReactNode;
+  position?: 'top' | 'bottom';
+  variant?: 'cyan' | 'pink' | 'green';
+}
+
+const variantStyles = {
+  cyan: 'border-cyan-400 shadow-[0_0_10px_#00f0ff]',
+  pink: 'border-fuchsia-500 shadow-[0_0_10px_#ff00ff]',
+  green: 'border-emerald-400 shadow-[0_0_10px_#00ff88]',
+};
+
+export const CyberTooltip = forwardRef<HTMLDivElement, CyberTooltipProps>(
+  ({ children, content, position = 'top', variant = 'cyan', className = '', ...props }, ref) => {
+    const [visible, setVisible] = useState(false);
+    return (
+      <div
+        ref={ref}
+        className={`relative inline-block ${className}`}
+        onMouseEnter={() => setVisible(true)}
+        onMouseLeave={() => setVisible(false)}
+        {...props}
+      >
+        {children}
+        {visible && (
+          <div
+            className={`
+              absolute z-50 px-3 py-2
+              font-['Share_Tech_Mono',monospace] text-xs text-white whitespace-nowrap
+              bg-[#0a0a0f]/95 border ${variantStyles[variant]}
+              animate-[fadeIn_0.2s_ease-out]
+              ${position === 'top' ? 'bottom-full left-1/2 -translate-x-1/2 mb-2' : 'top-full left-1/2 -translate-x-1/2 mt-2'}
+            `}
+          >
+            {content}
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+
+CyberTooltip.displayName = 'CyberTooltip';
+export default CyberTooltip;

package/components/effects/glitch-image/css/glitch-image.module.css

@@ -0,0 +1,64 @@
+.container {
+  position: relative;
+  overflow: hidden;
+}
+
+.base {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+
+.layer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  opacity: 0;
+  mix-blend-mode: screen;
+}
+
+.red { filter: hue-rotate(-50deg) saturate(200%); }
+.blue { filter: hue-rotate(50deg) saturate(200%); }
+
+.container:hover .red {
+  opacity: 0.8;
+  animation: glitch-r 0.3s steps(2) infinite;
+}
+
+.container:hover .blue {
+  opacity: 0.8;
+  animation: glitch-b 0.3s steps(2) infinite;
+}
+
+.continuous .red {
+  opacity: 0.5;
+  animation: glitch-r 2s steps(3) infinite;
+}
+
+.continuous .blue {
+  opacity: 0.5;
+  animation: glitch-b 2s steps(3) infinite;
+}
+
+.low .layer { opacity: 0.3 !important; }
+.high .layer { opacity: 0.9 !important; }
+.high:hover .red, .high:hover .blue { animation-duration: 0.1s; }
+
+@keyframes glitch-r {
+  0% { transform: translate(0); clip-path: inset(20% 0 40% 0); }
+  25% { transform: translate(-5px, 5px); clip-path: inset(50% 0 20% 0); }
+  50% { transform: translate(5px, -5px); clip-path: inset(10% 0 60% 0); }
+  75% { transform: translate(-3px, 3px); clip-path: inset(70% 0 10% 0); }
+  100% { transform: translate(0); clip-path: inset(20% 0 40% 0); }
+}
+
+@keyframes glitch-b {
+  0% { transform: translate(0); clip-path: inset(60% 0 10% 0); }
+  25% { transform: translate(5px, -5px); clip-path: inset(20% 0 50% 0); }
+  50% { transform: translate(-5px, 5px); clip-path: inset(80% 0 5% 0); }
+  75% { transform: translate(3px, -3px); clip-path: inset(5% 0 70% 0); }
+  100% { transform: translate(0); clip-path: inset(60% 0 10% 0); }
+}

package/components/effects/glitch-image/css/index.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import { forwardRef, ImgHTMLAttributes } from 'react';
+import styles from './glitch-image.module.css';
+
+export interface GlitchImageProps extends ImgHTMLAttributes<HTMLImageElement> {
+  intensity?: 'low' | 'medium' | 'high';
+  continuous?: boolean;
+}
+
+export const GlitchImage = forwardRef<HTMLDivElement, GlitchImageProps>(
+  ({ src, alt = 'Image', intensity = 'medium', continuous = false, className, ...props }, ref) => {
+    const classes = [styles.container, styles[intensity], continuous && styles.continuous, className].filter(Boolean).join(' ');
+    return (
+      <div ref={ref} className={classes}>
+        <img src={src} alt={alt} className={styles.base} {...props} />
+        <img src={src} alt="" className={`${styles.layer} ${styles.red}`} aria-hidden="true" />
+        <img src={src} alt="" className={`${styles.layer} ${styles.blue}`} aria-hidden="true" />
+      </div>
+    );
+  }
+);
+
+GlitchImage.displayName = 'GlitchImage';
+export default GlitchImage;

package/components/effects/glitch-image/tailwind/index.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+import { forwardRef, ImgHTMLAttributes, useId } from 'react';
+
+export interface GlitchImageProps extends ImgHTMLAttributes<HTMLImageElement> {}
+
+export const GlitchImage = forwardRef<HTMLDivElement, GlitchImageProps>(
+  ({ src, alt = 'Image', className = '', ...props }, ref) => {
+    const id = useId();
+    return (
+      <>
+        <style>{`
+          @keyframes glitch-r-${id} {
+            0%, 100% { transform: translate(0); clip-path: inset(20% 0 40% 0); }
+            25% { transform: translate(-5px, 5px); clip-path: inset(50% 0 20% 0); }
+            50% { transform: translate(5px, -5px); clip-path: inset(10% 0 60% 0); }
+            75% { transform: translate(-3px, 3px); clip-path: inset(70% 0 10% 0); }
+          }
+          @keyframes glitch-b-${id} {
+            0%, 100% { transform: translate(0); clip-path: inset(60% 0 10% 0); }
+            25% { transform: translate(5px, -5px); clip-path: inset(20% 0 50% 0); }
+            50% { transform: translate(-5px, 5px); clip-path: inset(80% 0 5% 0); }
+            75% { transform: translate(3px, -3px); clip-path: inset(5% 0 70% 0); }
+          }
+        `}</style>
+        <div ref={ref} className={`relative overflow-hidden group ${className}`}>
+          <img src={src} alt={alt} className="block w-full h-auto" {...props} />
+          <img
+            src={src}
+            alt=""
+            className="absolute inset-0 w-full h-full object-cover opacity-0 mix-blend-screen group-hover:opacity-80"
+            style={{ filter: 'hue-rotate(-50deg) saturate(200%)', animation: `glitch-r-${id} 0.3s steps(2) infinite` }}
+            aria-hidden="true"
+          />
+          <img
+            src={src}
+            alt=""
+            className="absolute inset-0 w-full h-full object-cover opacity-0 mix-blend-screen group-hover:opacity-80"
+            style={{ filter: 'hue-rotate(50deg) saturate(200%)', animation: `glitch-b-${id} 0.3s steps(2) infinite` }}
+            aria-hidden="true"
+          />
+        </div>
+      </>
+    );
+  }
+);
+
+GlitchImage.displayName = 'GlitchImage';
+export default GlitchImage;

package/components/effects/glowing-border/css/glowing-border.module.css

@@ -0,0 +1,73 @@
+.container {
+  --glow-color: #00f0ff;
+  --glow-size: 10px;
+  
+  position: relative;
+  padding: 2px;
+  border-radius: 0.5rem;
+  background: var(--glow-color);
+}
+
+.cyan { --glow-color: #00f0ff; }
+.pink { --glow-color: #ff00ff; }
+.green { --glow-color: #00ff88; }
+.purple { --glow-color: #a855f7; }
+
+.rainbow {
+  background: linear-gradient(90deg, #00f0ff, #ff00ff, #00ff88, #00f0ff);
+  background-size: 300% 100%;
+}
+
+.low { --glow-size: 5px; }
+.medium { --glow-size: 10px; }
+.high { --glow-size: 20px; }
+
+.content {
+  position: relative;
+  background: hsl(var(--background, 0 0% 4%));
+  border-radius: calc(0.5rem - 2px);
+  z-index: 1;
+}
+
+/* Glow effect */
+.container::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 0.5rem;
+  background: inherit;
+  filter: blur(var(--glow-size));
+  opacity: 0.7;
+  z-index: -1;
+}
+
+/* Animation */
+.animated {
+  animation: glow-pulse 2s ease-in-out infinite;
+}
+
+.rainbow.animated {
+  animation: glow-pulse 2s ease-in-out infinite, rainbow-border 3s linear infinite;
+}
+
+@keyframes glow-pulse {
+  0%, 100% { filter: brightness(1); }
+  50% { filter: brightness(1.3); }
+}
+
+@keyframes rainbow-border {
+  0% { background-position: 0% 50%; }
+  100% { background-position: 300% 50%; }
+}
+
+.container:hover {
+  filter: brightness(1.2);
+}
+
+.container:hover::before {
+  filter: blur(calc(var(--glow-size) * 1.5));
+  opacity: 0.9;
+}

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;