@oalacea/chaosui 0.5.0 → 0.5.1

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

@@ -0,0 +1,106 @@
+'use client';
+
+import { forwardRef, HTMLAttributes } from 'react';
+
+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;
+}
+
+const variantStyles = {
+  gold: { accent: 'text-amber-600', border: 'border-amber-600', bg: 'bg-amber-600', hoverBg: 'hover:bg-amber-600/5' },
+  blood: { accent: 'text-red-800', border: 'border-red-800', bg: 'bg-red-800', hoverBg: 'hover:bg-red-800/5' },
+  cyan: { accent: 'text-cyan-400', border: 'border-cyan-400', bg: 'bg-cyan-400', hoverBg: 'hover:bg-cyan-400/5' },
+  bone: { accent: 'text-stone-400', border: 'border-stone-400', bg: 'bg-stone-400', hoverBg: 'hover:bg-stone-400/5' },
+};
+
+export const TowerPricing = forwardRef<HTMLDivElement, TowerPricingProps>(
+  ({ tiers, variant = 'gold', showConnectors = false, className = '', ...props }, ref) => {
+    const colors = variantStyles[variant];
+
+    return (
+      <div ref={ref} className={`flex flex-col max-w-[400px] ${className}`} {...props}>
+        {tiers.map((tier, index) => (
+          <div
+            key={tier.name}
+            className={`
+              relative p-8 bg-black/60 border border-white/10 transition-all duration-300
+              ${index === 0 ? 'rounded-t border-t' : 'border-t-0'}
+              ${index === tiers.length - 1 ? 'rounded-b' : ''}
+              ${tier.featured 
+                ? `${colors.border} bg-amber-600/10 scale-[1.02] z-10` 
+                : `${colors.hoverBg} hover:${colors.border} hover:z-[1]`
+              }
+            `}
+          >
+            {tier.featured && (
+              <>
+                <div className={`absolute -top-px left-[-1px] right-[-1px] h-[3px] ${colors.bg}`} />
+                {tier.featuredLabel && (
+                  <span className={`absolute -top-3 left-1/2 -translate-x-1/2 px-4 py-1 ${colors.bg} text-black text-[0.65rem] font-bold uppercase tracking-wider`}>
+                    {tier.featuredLabel}
+                  </span>
+                )}
+              </>
+            )}
+
+            <div className="flex justify-between items-baseline mb-4 pb-4 border-b border-white/10">
+              <span className={`font-['Cinzel',serif] text-xl font-bold ${colors.accent} tracking-wider`}>
+                {tier.name}
+              </span>
+              <div className="flex items-baseline gap-1">
+                <span className="text-white/50">{tier.currency || '$'}</span>
+                <span className="text-3xl font-bold text-white">{tier.price}</span>
+                {tier.period && <span className="text-xs text-white/40">/{tier.period}</span>}
+              </div>
+            </div>
+
+            <ul className="my-4 space-y-2">
+              {tier.features.map((feature, i) => (
+                <li key={i} className="flex items-center gap-3 text-sm text-white/80">
+                  <span className={`text-xs ${colors.accent}`}>✦</span>
+                  {feature}
+                </li>
+              ))}
+            </ul>
+
+            <div className="mt-6">
+              <button
+                onClick={tier.onSelect}
+                className={`
+                  w-full py-3.5 px-6 border font-semibold text-xs uppercase tracking-[0.15em] transition-all duration-300
+                  ${tier.featured 
+                    ? `${colors.bg} ${colors.border} text-black hover:bg-transparent hover:${colors.accent}`
+                    : `bg-transparent ${colors.border} ${colors.accent} hover:${colors.bg} hover:text-black`
+                  }
+                `}
+              >
+                {tier.buttonText || 'Select'}
+              </button>
+            </div>
+
+            {showConnectors && index < tiers.length - 1 && (
+              <span className={`absolute left-1/2 -bottom-px -translate-x-1/2 w-px h-5 ${colors.bg} opacity-30`} />
+            )}
+          </div>
+        ))}
+      </div>
+    );
+  }
+);
+
+TowerPricing.displayName = 'TowerPricing';
+export default TowerPricing;

package/layout/tracklist/css/index.tsx

@@ -0,0 +1,96 @@
+'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> {
+  /** List of tracks */
+  tracks: Track[];
+  /** Color variant */
+  variant?: 'silver' | 'blood' | 'gold' | 'bone';
+  /** Show header row */
+  showHeader?: boolean;
+  /** Compact mode */
+  compact?: boolean;
+  /** Large track numbers */
+  numbered?: boolean;
+  /** Track click handler */
+  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/layout/tracklist/css/tracklist.module.css

@@ -0,0 +1,141 @@
+.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/playing state */
+.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%; }
+}
+
+/* Variants */
+.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 */
+.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 mode */
+.compact .track {
+  padding: 0.75rem 1rem;
+  gap: 1rem;
+}
+
+.compact .trackBarContainer {
+  display: none;
+}
+
+/* Numbered style */
+.numbered .trackNum {
+  font-size: 1.25rem;
+  font-family: 'Playfair Display', serif;
+  font-weight: 700;
+}

package/layout/tracklist/tailwind/index.tsx

@@ -0,0 +1,92 @@
+'use client';
+
+import { forwardRef, HTMLAttributes } from 'react';
+
+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;
+}
+
+const variantStyles = {
+  silver: { accent: 'text-gray-400', bar: 'bg-gray-400', activeBg: 'bg-gray-400/10' },
+  blood: { accent: 'text-red-800', bar: 'bg-red-800', activeBg: 'bg-red-800/20' },
+  gold: { accent: 'text-amber-600', bar: 'bg-amber-600', activeBg: 'bg-amber-600/20' },
+  bone: { accent: 'text-stone-400', bar: 'bg-stone-400', activeBg: 'bg-stone-400/20' },
+};
+
+export const Tracklist = forwardRef<HTMLDivElement, TracklistProps>(
+  ({ tracks, variant = 'silver', showHeader = false, compact = false, numbered = false, onTrackClick, className = '', ...props }, ref) => {
+    const colors = variantStyles[variant];
+
+    return (
+      <div ref={ref} className={`flex flex-col font-['Cormorant_Garamond',serif] ${className}`} {...props}>
+        {showHeader && (
+          <div className={`grid grid-cols-[auto_1fr_auto_auto] gap-6 py-3 px-6 border-b border-white/10 text-[0.65rem] uppercase tracking-[0.2em] ${colors.accent}`}>
+            <span>#</span>
+            <span>Title</span>
+            <span></span>
+            <span>Duration</span>
+          </div>
+        )}
+
+        {tracks.map((track, index) => (
+          <div
+            key={index}
+            onClick={() => onTrackClick?.(track, index)}
+            className={`
+              grid gap-6 items-center border-b border-white/5 cursor-pointer transition-all duration-300
+              hover:bg-white/5 group
+              ${compact ? 'grid-cols-[auto_1fr_auto] py-3 px-4 gap-4' : 'grid-cols-[auto_1fr_auto_auto] py-4 px-6'}
+              ${track.active ? colors.activeBg : ''}
+            `}
+          >
+            <span className={`
+              font-['Share_Tech_Mono',monospace] min-w-[2rem]
+              ${numbered ? "text-xl font-['Playfair_Display',serif] font-bold" : 'text-xs'}
+              ${track.active ? colors.accent : colors.accent}
+            `}>
+              {track.active && <span className="mr-2">▶</span>}
+              {String(track.number).padStart(2, '0')}
+            </span>
+
+            <div className="flex flex-col gap-1 overflow-hidden">
+              <span className="text-white truncate">{track.name}</span>
+              {track.artist && (
+                <span className="text-xs text-white/40 italic">{track.artist}</span>
+              )}
+            </div>
+
+            {!compact && (
+              <div className="relative w-20 h-0.5 bg-white/10 overflow-hidden">
+                <div className={`
+                  absolute left-0 top-0 h-full w-0 ${colors.bar} transition-[width] duration-500
+                  group-hover:w-full
+                  ${track.active ? 'animate-[progress_180s_linear_forwards]' : ''}
+                `} />
+              </div>
+            )}
+
+            <span className="font-['Share_Tech_Mono',monospace] text-xs text-white/50 min-w-[3rem] text-right">
+              {track.duration}
+            </span>
+          </div>
+        ))}
+      </div>
+    );
+  }
+);
+
+Tracklist.displayName = 'Tracklist';
+export default Tracklist;

package/{components/layout/void-frame → layout/void-frame/css}/index.tsx

@@ -4,20 +4,48 @@ import { forwardRef, HTMLAttributes, ReactNode } from 'react';
 import styles from './void-frame.module.css';
 
 export interface VoidFrameProps extends HTMLAttributes<HTMLDivElement> {
+  /** Frame content */
   children: ReactNode;
+  /** Color variant */
   variant?: 'gold' | 'bone' | 'blood' | 'iron' | 'cyan';
+  /** Corner style */
   cornerStyle?: 'simple' | 'extended' | 'ornate';
+  /** Add glow effect */
   glow?: boolean;
+  /** Padding size */
   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' };
+  (
+    {
+      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}>
+      <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}`} />

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

@@ -0,0 +1,141 @@
+.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 ornaments */
+.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 corners */
+.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 style - with decorative elements */
+.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;
+}
+
+/* Variants */
+.gold { --frame-color: #c9a227; }
+.bone { --frame-color: #d4c5a9; }
+.blood { --frame-color: #8b1a1a; }
+.iron { --frame-color: #4a4a4a; }
+.cyan { --frame-color: #00f0ff; }
+
+/* Glow effect */
+.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/layout/void-frame/tailwind/index.tsx

@@ -0,0 +1,64 @@
+'use client';
+
+import { forwardRef, HTMLAttributes, ReactNode } from 'react';
+
+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';
+}
+
+const variantStyles = {
+  gold: { border: 'border-amber-600', corner: 'border-amber-600', glow: 'shadow-[0_0_20px_rgba(201,162,39,0.2)]', ornament: 'text-amber-600' },
+  bone: { border: 'border-stone-400', corner: 'border-stone-400', glow: 'shadow-[0_0_20px_rgba(212,197,169,0.2)]', ornament: 'text-stone-400' },
+  blood: { border: 'border-red-800', corner: 'border-red-800', glow: 'shadow-[0_0_20px_rgba(139,26,26,0.3)]', ornament: 'text-red-800' },
+  iron: { border: 'border-zinc-600', corner: 'border-zinc-600', glow: 'shadow-[0_0_20px_rgba(74,74,74,0.2)]', ornament: 'text-zinc-600' },
+  cyan: { border: 'border-cyan-400', corner: 'border-cyan-400', glow: 'shadow-[0_0_20px_rgba(0,240,255,0.2)]', ornament: 'text-cyan-400' },
+};
+
+const paddingClasses = {
+  sm: 'p-4',
+  md: 'p-8',
+  lg: 'p-12',
+  xl: 'p-16',
+};
+
+export const VoidFrame = forwardRef<HTMLDivElement, VoidFrameProps>(
+  ({ children, variant = 'gold', cornerStyle = 'simple', glow = false, padding = 'md', className = '', ...props }, ref) => {
+    const colors = variantStyles[variant];
+    const cornerSize = cornerStyle === 'ornate' ? 'w-10 h-10' : cornerStyle === 'extended' ? 'w-[30px] h-[30px]' : 'w-5 h-5';
+
+    return (
+      <div
+        ref={ref}
+        className={`
+          relative bg-black/50 border ${colors.border} ${paddingClasses[padding]}
+          ${glow ? colors.glow : ''}
+          ${className}
+        `}
+        {...props}
+      >
+        {/* Corners */}
+        <span className={`absolute -top-px -left-px ${cornerSize} border-t-2 border-l-2 ${colors.corner}`} />
+        <span className={`absolute -top-px -right-px ${cornerSize} border-t-2 border-r-2 ${colors.corner}`} />
+        <span className={`absolute -bottom-px -left-px ${cornerSize} border-b-2 border-l-2 ${colors.corner}`} />
+        <span className={`absolute -bottom-px -right-px ${cornerSize} border-b-2 border-r-2 ${colors.corner}`} />
+
+        {/* Ornate decorations */}
+        {cornerStyle === 'ornate' && (
+          <>
+            <span className={`absolute -top-[0.5em] left-1/2 -translate-x-1/2 ${colors.ornament}`}>✦</span>
+            <span className={`absolute -bottom-[0.5em] left-1/2 -translate-x-1/2 ${colors.ornament}`}>✦</span>
+          </>
+        )}
+
+        {children}
+      </div>
+    );
+  }
+);
+
+VoidFrame.displayName = 'VoidFrame';
+export default VoidFrame;