@oalacea/chaosui 0.4.0 → 0.5.1

package/decorative/ornaments/css/index.tsx

@@ -0,0 +1,136 @@
+'use client';
+
+import { forwardRef, HTMLAttributes } from 'react';
+import styles from './ornaments.module.css';
+
+export const ORNAMENT_SYMBOLS = {
+  cross: '✝',
+  maltese: '✠',
+  orthodox: '☦',
+  fleurDeLis: '⚜',
+  star: '✦',
+  diamond: '◆',
+  heart: '❧',
+  leaf: '❦',
+  dagger: '†',
+  doubleDagger: '‡',
+  asterisk: '✽',
+  florette: '✿',
+  skull: '☠',
+  crown: '♔',
+  swords: '⚔',
+};
+
+export interface OrnamentsProps extends HTMLAttributes<HTMLDivElement> {
+  /** Ornament type */
+  type?: 'divider' | 'corner' | 'frame' | 'fleuron' | 'symbols';
+  /** Symbol to use */
+  symbol?: keyof typeof ORNAMENT_SYMBOLS | string;
+  /** Multiple symbols */
+  symbols?: (keyof typeof ORNAMENT_SYMBOLS | string)[];
+  /** Color variant */
+  variant?: 'gold' | 'bone' | 'blood' | 'iron';
+  /** Size */
+  size?: 'sm' | 'md' | 'lg';
+  /** Animate */
+  animated?: boolean;
+  /** Corner position (for type='corner') */
+  position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'all';
+}
+
+const getSymbol = (s: keyof typeof ORNAMENT_SYMBOLS | string): string => 
+  ORNAMENT_SYMBOLS[s as keyof typeof ORNAMENT_SYMBOLS] || s;
+
+export const Ornaments = forwardRef<HTMLDivElement, OrnamentsProps>(
+  (
+    {
+      type = 'divider',
+      symbol = 'cross',
+      symbols,
+      variant = 'gold',
+      size = 'md',
+      animated = false,
+      position = 'all',
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const baseClasses = `${styles.ornament} ${styles[variant]} ${styles[size]} ${animated ? styles.animated : ''}`;
+    const sym = getSymbol(symbol);
+
+    if (type === 'divider') {
+      return (
+        <div ref={ref} className={`${baseClasses} ${styles.divider} ${className || ''}`} {...props}>
+          <span className={styles.line} />
+          <span className={styles.symbol}>{sym}</span>
+          <span className={styles.line} />
+        </div>
+      );
+    }
+
+    if (type === 'fleuron') {
+      return (
+        <div ref={ref} className={`${baseClasses} ${className || ''}`} {...props}>
+          <span className={styles.fleuron}>{sym}</span>
+        </div>
+      );
+    }
+
+    if (type === 'symbols') {
+      const syms = symbols || ['star', 'diamond', 'star'];
+      return (
+        <div ref={ref} className={`${baseClasses} ${styles.symbols} ${className || ''}`} {...props}>
+          {syms.map((s, i) => (
+            <span key={i} className={styles.symbol}>{getSymbol(s)}</span>
+          ))}
+        </div>
+      );
+    }
+
+    if (type === 'corner') {
+      const corners = position === 'all' 
+        ? ['TopLeft', 'TopRight', 'BottomLeft', 'BottomRight']
+        : [position.split('-').map((p, i) => i === 0 ? p.charAt(0).toUpperCase() + p.slice(1) : p.charAt(0).toUpperCase() + p.slice(1)).join('')];
+
+      return (
+        <>
+          {corners.map((pos) => (
+            <div
+              key={pos}
+              ref={pos === corners[0] ? ref : undefined}
+              className={`${styles.corner} ${styles[`corner${pos}`]} ${styles[variant]} ${className || ''}`}
+              {...props}
+            >
+              <span className={styles.cornerInner}>
+                <span className={styles.cornerSymbol}>{sym}</span>
+              </span>
+            </div>
+          ))}
+        </>
+      );
+    }
+
+    if (type === 'frame') {
+      return (
+        <div ref={ref} className={`${styles.frame} ${styles[variant]} ${className || ''}`} {...props}>
+          <div className={styles.frameTop}>
+            <span className={styles.frameLine} />
+            <span className={styles.frameSymbol}>{sym}</span>
+            <span className={styles.frameLine} />
+          </div>
+          <div className={styles.frameBottom}>
+            <span className={styles.frameLine} />
+            <span className={styles.frameSymbol}>{sym}</span>
+            <span className={styles.frameLine} />
+          </div>
+        </div>
+      );
+    }
+
+    return null;
+  }
+);
+
+Ornaments.displayName = 'Ornaments';
+export default Ornaments;

package/decorative/ornaments/css/ornaments.module.css

@@ -0,0 +1,144 @@
+.ornament {
+  --ornament-color: #c9a227;
+  
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--ornament-color);
+}
+
+/* Divider style */
+.divider {
+  gap: 1rem;
+  width: 100%;
+}
+
+.line {
+  flex: 1;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, var(--ornament-color), transparent);
+}
+
+.symbol {
+  font-size: 1.25rem;
+  opacity: 0.8;
+}
+
+/* Corner ornament */
+.corner {
+  position: absolute;
+  width: 40px;
+  height: 40px;
+}
+
+.cornerTopLeft { top: 0; left: 0; }
+.cornerTopRight { top: 0; right: 0; transform: scaleX(-1); }
+.cornerBottomLeft { bottom: 0; left: 0; transform: scaleY(-1); }
+.cornerBottomRight { bottom: 0; right: 0; transform: scale(-1); }
+
+.cornerInner {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.cornerInner::before {
+  content: '';
+  position: absolute;
+  top: 8px;
+  left: 0;
+  width: 30px;
+  height: 1px;
+  background: var(--ornament-color);
+}
+
+.cornerInner::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 8px;
+  width: 1px;
+  height: 30px;
+  background: var(--ornament-color);
+}
+
+.cornerSymbol {
+  position: absolute;
+  top: 4px;
+  left: 4px;
+  font-size: 0.75rem;
+}
+
+/* Fleuron */
+.fleuron {
+  font-family: 'Times New Roman', serif;
+  font-size: 2rem;
+  opacity: 0.7;
+}
+
+/* Cross variations */
+.cross {
+  font-size: 1.5rem;
+}
+
+/* Frame ornament */
+.frame {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+.frameTop,
+.frameBottom {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.frameTop { top: -0.5em; }
+.frameBottom { bottom: -0.5em; }
+
+.frameLine {
+  width: 60px;
+  height: 1px;
+  background: var(--ornament-color);
+}
+
+.frameSymbol {
+  font-size: 0.875rem;
+}
+
+/* Variants */
+.gold { --ornament-color: #c9a227; }
+.bone { --ornament-color: #d4c5a9; }
+.blood { --ornament-color: #8b1a1a; }
+.iron { --ornament-color: #4a4a4a; }
+
+/* Common ornament symbols */
+.symbols {
+  display: flex;
+  gap: 0.5rem;
+  opacity: 0.6;
+}
+
+/* Animated */
+.animated .symbol,
+.animated .fleuron {
+  animation: ornamentPulse 3s ease-in-out infinite;
+}
+
+@keyframes ornamentPulse {
+  0%, 100% { opacity: 0.5; }
+  50% { opacity: 0.9; }
+}
+
+/* Size variants */
+.sm .symbol { font-size: 0.875rem; }
+.sm .fleuron { font-size: 1.25rem; }
+.md .symbol { font-size: 1.25rem; }
+.md .fleuron { font-size: 2rem; }
+.lg .symbol { font-size: 1.75rem; }
+.lg .fleuron { font-size: 3rem; }

package/decorative/ornaments/tailwind/index.tsx

@@ -0,0 +1,122 @@
+'use client';
+
+import { forwardRef, HTMLAttributes } from 'react';
+
+export const ORNAMENT_SYMBOLS = {
+  cross: '✝', maltese: '✠', orthodox: '☦', fleurDeLis: '⚜', star: '✦',
+  diamond: '◆', heart: '❧', leaf: '❦', dagger: '†', doubleDagger: '‡',
+  asterisk: '✽', florette: '✿', skull: '☠', crown: '♔', swords: '⚔',
+};
+
+export interface OrnamentsProps extends HTMLAttributes<HTMLDivElement> {
+  type?: 'divider' | 'corner' | 'frame' | 'fleuron' | 'symbols';
+  symbol?: keyof typeof ORNAMENT_SYMBOLS | string;
+  symbols?: (keyof typeof ORNAMENT_SYMBOLS | string)[];
+  variant?: 'gold' | 'bone' | 'blood' | 'iron';
+  size?: 'sm' | 'md' | 'lg';
+  animated?: boolean;
+  position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'all';
+}
+
+const variantColors = {
+  gold: 'text-amber-600',
+  bone: 'text-stone-400',
+  blood: 'text-red-800',
+  iron: 'text-zinc-500',
+};
+
+const sizeClasses = {
+  sm: { symbol: 'text-sm', fleuron: 'text-xl' },
+  md: { symbol: 'text-xl', fleuron: 'text-3xl' },
+  lg: { symbol: 'text-2xl', fleuron: 'text-5xl' },
+};
+
+const getSymbol = (s: keyof typeof ORNAMENT_SYMBOLS | string): string =>
+  ORNAMENT_SYMBOLS[s as keyof typeof ORNAMENT_SYMBOLS] || s;
+
+export const Ornaments = forwardRef<HTMLDivElement, OrnamentsProps>(
+  ({ type = 'divider', symbol = 'cross', symbols, variant = 'gold', size = 'md', animated = false, position = 'all', className = '', ...props }, ref) => {
+    const color = variantColors[variant];
+    const sizes = sizeClasses[size];
+    const sym = getSymbol(symbol);
+    const animClass = animated ? 'animate-pulse' : '';
+
+    if (type === 'divider') {
+      return (
+        <div ref={ref} className={`flex items-center justify-center gap-4 w-full ${color} ${className}`} {...props}>
+          <span className="flex-1 h-px bg-gradient-to-r from-transparent via-current to-transparent" />
+          <span className={`${sizes.symbol} opacity-80 ${animClass}`}>{sym}</span>
+          <span className="flex-1 h-px bg-gradient-to-l from-transparent via-current to-transparent" />
+        </div>
+      );
+    }
+
+    if (type === 'fleuron') {
+      return (
+        <div ref={ref} className={`flex items-center justify-center ${color} ${className}`} {...props}>
+          <span className={`${sizes.fleuron} opacity-70 ${animClass}`}>{sym}</span>
+        </div>
+      );
+    }
+
+    if (type === 'symbols') {
+      const syms = symbols || ['star', 'diamond', 'star'];
+      return (
+        <div ref={ref} className={`flex gap-2 opacity-60 ${color} ${className}`} {...props}>
+          {syms.map((s, i) => (
+            <span key={i} className={`${sizes.symbol} ${animClass}`}>{getSymbol(s)}</span>
+          ))}
+        </div>
+      );
+    }
+
+    if (type === 'corner') {
+      const cornerPositions = {
+        'top-left': 'top-0 left-0',
+        'top-right': 'top-0 right-0 -scale-x-100',
+        'bottom-left': 'bottom-0 left-0 -scale-y-100',
+        'bottom-right': 'bottom-0 right-0 -scale-100',
+      };
+      const corners = position === 'all' ? Object.keys(cornerPositions) : [position];
+
+      return (
+        <>
+          {corners.map((pos) => (
+            <div
+              key={pos}
+              ref={pos === corners[0] ? ref : undefined}
+              className={`absolute w-10 h-10 ${cornerPositions[pos as keyof typeof cornerPositions]} ${color} ${className}`}
+              {...props}
+            >
+              <span className="absolute top-2 left-0 w-[30px] h-px bg-current" />
+              <span className="absolute top-0 left-2 w-px h-[30px] bg-current" />
+              <span className="absolute top-1 left-1 text-xs">{sym}</span>
+            </div>
+          ))}
+        </>
+      );
+    }
+
+    if (type === 'frame') {
+      return (
+        <div ref={ref} className={`absolute inset-0 pointer-events-none ${color} ${className}`} {...props}>
+          <div className="absolute -top-[0.5em] left-1/2 -translate-x-1/2 flex items-center gap-2">
+            <span className="w-15 h-px bg-current" />
+            <span className="text-sm">{sym}</span>
+            <span className="w-15 h-px bg-current" />
+          </div>
+          <div className="absolute -bottom-[0.5em] left-1/2 -translate-x-1/2 flex items-center gap-2">
+            <span className="w-15 h-px bg-current" />
+            <span className="text-sm">{sym}</span>
+            <span className="w-15 h-px bg-current" />
+          </div>
+        </div>
+      );
+    }
+
+    return null;
+  }
+);
+
+Ornaments.displayName = 'Ornaments';
+export default Ornaments;

package/decorative/rune-symbols/css/index.tsx

@@ -0,0 +1,116 @@
+'use client';
+
+import { forwardRef, HTMLAttributes } from 'react';
+import styles from './rune-symbols.module.css';
+
+// Elder Futhark runes
+export const RUNES = {
+  fehu: 'ᚠ',      // wealth
+  uruz: 'ᚢ',      // strength
+  thurisaz: 'ᚦ',  // giant
+  ansuz: 'ᚨ',     // god
+  raidho: 'ᚱ',    // journey
+  kenaz: 'ᚲ',     // torch
+  gebo: 'ᚷ',      // gift
+  wunjo: 'ᚹ',     // joy
+  hagalaz: 'ᚺ',   // hail
+  nauthiz: 'ᚾ',   // need
+  isaz: 'ᛁ',      // ice
+  jera: 'ᛃ',      // year
+  eihwaz: 'ᛇ',    // yew
+  perthro: 'ᛈ',   // mystery
+  algiz: 'ᛉ',     // protection
+  sowilo: 'ᛊ',    // sun
+  tiwaz: 'ᛏ',     // victory
+  berkano: 'ᛒ',   // birch
+  ehwaz: 'ᛖ',     // horse
+  mannaz: 'ᛗ',    // man
+  laguz: 'ᛚ',     // water
+  ingwaz: 'ᛝ',    // fertility
+  dagaz: 'ᛞ',     // day
+  othala: 'ᛟ',    // heritage
+};
+
+export interface RuneSymbolsProps extends HTMLAttributes<HTMLDivElement> {
+  /** Runes to display (array of rune names or custom symbols) */
+  runes?: (keyof typeof RUNES | string)[];
+  /** Number of random runes to display */
+  count?: number;
+  /** Color variant */
+  variant?: 'gold' | 'blood' | 'bone' | 'iron' | 'cyan';
+  /** Animation style */
+  animation?: 'glow' | 'floating' | 'pulsing' | 'flickering' | 'none';
+  /** Layout direction */
+  direction?: 'horizontal' | 'vertical';
+  /** Size variant */
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+  /** Scattered positioning (requires parent with dimensions) */
+  scattered?: boolean;
+}
+
+const getRandomRunes = (count: number): string[] => {
+  const runeValues = Object.values(RUNES);
+  return Array.from({ length: count }, () => 
+    runeValues[Math.floor(Math.random() * runeValues.length)]
+  );
+};
+
+export const RuneSymbols = forwardRef<HTMLDivElement, RuneSymbolsProps>(
+  (
+    {
+      runes,
+      count = 6,
+      variant = 'gold',
+      animation = 'glow',
+      direction = 'horizontal',
+      size = 'md',
+      scattered = false,
+      className,
+      style,
+      ...props
+    },
+    ref
+  ) => {
+    const resolvedRunes = runes 
+      ? runes.map(r => RUNES[r as keyof typeof RUNES] || r)
+      : getRandomRunes(count);
+
+    const animationClass = animation !== 'none' ? styles[animation] : '';
+
+    return (
+      <div
+        ref={ref}
+        className={`
+          ${styles.container} 
+          ${styles[variant]} 
+          ${styles[size]}
+          ${direction === 'vertical' ? styles.vertical : ''}
+          ${scattered ? styles.scattered : ''}
+          ${animationClass}
+          ${className || ''}
+        `}
+        style={style}
+        {...props}
+      >
+        {resolvedRunes.map((rune, i) => (
+          <span
+            key={i}
+            className={styles.rune}
+            style={{
+              '--delay': `${i * 0.5}s`,
+              ...(scattered ? {
+                left: `${Math.random() * 80 + 10}%`,
+                top: `${Math.random() * 80 + 10}%`,
+              } : {}),
+            } as React.CSSProperties}
+          >
+            {rune}
+          </span>
+        ))}
+      </div>
+    );
+  }
+);
+
+RuneSymbols.displayName = 'RuneSymbols';
+export default RuneSymbols;

package/decorative/rune-symbols/css/rune-symbols.module.css

@@ -0,0 +1,116 @@
+.container {
+  --rune-color: #c9a227;
+  --rune-glow: rgba(201, 162, 39, 0.5);
+  
+  display: flex;
+  gap: 1.5rem;
+  font-size: 2rem;
+}
+
+.rune {
+  color: var(--rune-color);
+  opacity: 0.6;
+  transition: all 0.4s ease;
+  animation: runeGlow 4s ease-in-out infinite;
+  animation-delay: var(--delay, 0s);
+}
+
+.rune:hover {
+  opacity: 1;
+  text-shadow: 0 0 20px var(--rune-glow);
+  transform: scale(1.1);
+}
+
+@keyframes runeGlow {
+  0%, 100% { 
+    opacity: 0.4; 
+    text-shadow: none;
+  }
+  50% { 
+    opacity: 0.8; 
+    text-shadow: 0 0 15px var(--rune-glow);
+  }
+}
+
+/* Floating animation */
+.floating .rune {
+  animation: runeFloat 6s ease-in-out infinite;
+}
+
+@keyframes runeFloat {
+  0%, 100% { 
+    transform: translateY(0) rotate(0deg);
+    opacity: 0.4;
+  }
+  25% { 
+    transform: translateY(-10px) rotate(5deg);
+    opacity: 0.7;
+  }
+  50% { 
+    transform: translateY(0) rotate(0deg);
+    opacity: 0.5;
+  }
+  75% { 
+    transform: translateY(10px) rotate(-5deg);
+    opacity: 0.7;
+  }
+}
+
+/* Pulsing animation */
+.pulsing .rune {
+  animation: runePulse 2s ease-in-out infinite;
+}
+
+@keyframes runePulse {
+  0%, 100% { 
+    transform: scale(1);
+    opacity: 0.5;
+  }
+  50% { 
+    transform: scale(1.15);
+    opacity: 1;
+    text-shadow: 0 0 25px var(--rune-glow);
+  }
+}
+
+/* Flickering animation */
+.flickering .rune {
+  animation: runeFlicker 0.5s steps(2) infinite;
+}
+
+@keyframes runeFlicker {
+  0% { opacity: 0.3; }
+  25% { opacity: 0.8; }
+  50% { opacity: 0.5; }
+  75% { opacity: 0.9; }
+  100% { opacity: 0.3; }
+}
+
+/* Scattered positioning */
+.scattered {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.scattered .rune {
+  position: absolute;
+}
+
+/* Variants */
+.gold { --rune-color: #c9a227; --rune-glow: rgba(201, 162, 39, 0.5); }
+.blood { --rune-color: #8b1a1a; --rune-glow: rgba(139, 26, 26, 0.5); }
+.bone { --rune-color: #d4c5a9; --rune-glow: rgba(212, 197, 169, 0.5); }
+.iron { --rune-color: #4a4a4a; --rune-glow: rgba(74, 74, 74, 0.5); }
+.cyan { --rune-color: #00f0ff; --rune-glow: rgba(0, 240, 255, 0.5); }
+
+/* Vertical layout */
+.vertical {
+  flex-direction: column;
+}
+
+/* Size variants */
+.sm { font-size: 1rem; gap: 0.75rem; }
+.md { font-size: 2rem; gap: 1.5rem; }
+.lg { font-size: 3rem; gap: 2rem; }
+.xl { font-size: 4rem; gap: 3rem; }