@oalacea/chaosui 0.4.0 → 0.5.1

package/layout/tower-pricing/css/tower-pricing.module.css

@@ -0,0 +1,177 @@
+.tower {
+  --tower-accent: #c9a227;
+  --tower-bg: rgba(0, 0, 0, 0.6);
+  --tower-border: rgba(255, 255, 255, 0.1);
+  
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  max-width: 400px;
+}
+
+.tier {
+  position: relative;
+  padding: 2rem;
+  background: var(--tower-bg);
+  border: 1px solid var(--tower-border);
+  border-top: none;
+  transition: all 0.3s ease;
+}
+
+.tier:first-child {
+  border-top: 1px solid var(--tower-border);
+  border-radius: 4px 4px 0 0;
+}
+
+.tier:last-child {
+  border-radius: 0 0 4px 4px;
+}
+
+.tier:hover {
+  background: rgba(201, 162, 39, 0.05);
+  border-color: var(--tower-accent);
+  z-index: 1;
+}
+
+/* Featured tier */
+.featured {
+  border-color: var(--tower-accent);
+  background: rgba(201, 162, 39, 0.1);
+  transform: scale(1.02);
+  z-index: 2;
+}
+
+.featured::before {
+  content: '';
+  position: absolute;
+  left: -1px;
+  right: -1px;
+  top: -1px;
+  height: 3px;
+  background: var(--tower-accent);
+}
+
+.featuredBadge {
+  position: absolute;
+  top: -12px;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 0.25rem 1rem;
+  background: var(--tower-accent);
+  color: #000;
+  font-size: 0.65rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+}
+
+.tierHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  margin-bottom: 1rem;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid var(--tower-border);
+}
+
+.tierName {
+  font-family: 'Cinzel', serif;
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: var(--tower-accent);
+  letter-spacing: 0.1em;
+}
+
+.tierPrice {
+  display: flex;
+  align-items: baseline;
+  gap: 0.25rem;
+}
+
+.currency {
+  font-size: 1rem;
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.amount {
+  font-size: 2rem;
+  font-weight: 700;
+  color: #fff;
+}
+
+.period {
+  font-size: 0.75rem;
+  color: rgba(255, 255, 255, 0.4);
+}
+
+.tierFeatures {
+  list-style: none;
+  margin: 1rem 0;
+  padding: 0;
+}
+
+.feature {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.5rem 0;
+  font-size: 0.875rem;
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.featureIcon {
+  color: var(--tower-accent);
+  font-size: 0.75rem;
+}
+
+.tierAction {
+  margin-top: 1.5rem;
+}
+
+.actionButton {
+  width: 100%;
+  padding: 0.875rem 1.5rem;
+  background: transparent;
+  border: 1px solid var(--tower-accent);
+  color: var(--tower-accent);
+  font-family: inherit;
+  font-size: 0.8rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.15em;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.actionButton:hover {
+  background: var(--tower-accent);
+  color: #000;
+}
+
+.featured .actionButton {
+  background: var(--tower-accent);
+  color: #000;
+}
+
+.featured .actionButton:hover {
+  background: transparent;
+  color: var(--tower-accent);
+}
+
+/* Variants */
+.gold { --tower-accent: #c9a227; }
+.blood { --tower-accent: #8b1a1a; }
+.cyan { --tower-accent: #00f0ff; }
+.bone { --tower-accent: #d4c5a9; }
+
+/* Connector lines between tiers */
+.connector {
+  position: absolute;
+  left: 50%;
+  bottom: -1px;
+  transform: translateX(-50%);
+  width: 1px;
+  height: 20px;
+  background: var(--tower-accent);
+  opacity: 0.3;
+}

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/layout/void-frame/css/index.tsx

@@ -0,0 +1,60 @@
+'use client';
+
+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',
+    };
+
+    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}
+      >
+        <span className={`${styles.corner} ${styles.cornerTopLeft}`} />
+        <span className={`${styles.corner} ${styles.cornerTopRight}`} />
+        <span className={`${styles.corner} ${styles.cornerBottomLeft}`} />
+        <span className={`${styles.corner} ${styles.cornerBottomRight}`} />
+        {children}
+      </div>
+    );
+  }
+);
+
+VoidFrame.displayName = 'VoidFrame';
+export default VoidFrame;