@oalacea/chaosui 0.5.0 → 0.5.1

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

@@ -0,0 +1,108 @@
+'use client';
+
+import { forwardRef, HTMLAttributes, ReactNode, useRef, useState, useEffect } from 'react';
+
+export interface HorizontalScrollProps extends HTMLAttributes<HTMLDivElement> {
+  children: ReactNode;
+  variant?: 'cyan' | 'green' | 'amber' | 'blood';
+  panelSize?: 'full' | 'large' | 'medium' | 'small';
+  fadeEdges?: boolean;
+  showIndicators?: boolean;
+  gap?: number;
+}
+
+const variantStyles = {
+  cyan: { scrollbar: 'scrollbar-thumb-cyan-400', indicator: 'border-cyan-400 hover:bg-cyan-400 hover:shadow-[0_0_10px_#00f0ff]' },
+  green: { scrollbar: 'scrollbar-thumb-emerald-400', indicator: 'border-emerald-400 hover:bg-emerald-400 hover:shadow-[0_0_10px_#00ff88]' },
+  amber: { scrollbar: 'scrollbar-thumb-amber-400', indicator: 'border-amber-400 hover:bg-amber-400 hover:shadow-[0_0_10px_#ffaa00]' },
+  blood: { scrollbar: 'scrollbar-thumb-red-800', indicator: 'border-red-800 hover:bg-red-800 hover:shadow-[0_0_10px_#8b1a1a]' },
+};
+
+const sizeClasses = {
+  full: 'w-screen',
+  large: 'w-[80vw]',
+  medium: 'w-[60vw]',
+  small: 'w-[40vw]',
+};
+
+export const HorizontalScroll = forwardRef<HTMLDivElement, HorizontalScrollProps>(
+  ({ children, variant = 'cyan', panelSize = 'large', fadeEdges = false, showIndicators = false, gap = 2, className = '', ...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('[data-panel]');
+      setPanelCount(panels.length);
+
+      const handleScroll = () => {
+        if (!container || panels.length === 0) 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 || panelCount === 0) return;
+      const panelWidth = container.scrollWidth / panelCount;
+      container.scrollTo({ left: panelWidth * index, behavior: 'smooth' });
+    };
+
+    const colors = variantStyles[variant];
+
+    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={`
+            w-full overflow-x-auto overflow-y-hidden snap-x snap-mandatory scroll-smooth
+            scrollbar-thin scrollbar-track-black/30 ${colors.scrollbar}
+            ${fadeEdges ? '[mask-image:linear-gradient(90deg,transparent_0%,black_5%,black_95%,transparent_100%)]' : ''}
+          `}
+          {...props}
+        >
+          <div className="flex w-max" style={{ gap: `${gap}rem`, padding: '1rem 0' }}>
+            {Array.isArray(children)
+              ? children.map((child, i) => (
+                  <div key={i} data-panel className={`flex-none snap-start ${sizeClasses[panelSize]}`}>
+                    {child}
+                  </div>
+                ))
+              : <div data-panel className={`flex-none snap-start ${sizeClasses[panelSize]}`}>{children}</div>
+            }
+          </div>
+        </div>
+
+        {showIndicators && panelCount > 1 && (
+          <div className="flex justify-center gap-2 mt-4">
+            {Array.from({ length: panelCount }).map((_, i) => (
+              <button
+                key={i}
+                className={`
+                  w-2 h-2 rounded-full bg-black/30 border transition-all duration-300
+                  ${colors.indicator}
+                  ${i === activeIndex ? `${variant === 'cyan' ? 'bg-cyan-400 shadow-[0_0_10px_#00f0ff]' : variant === 'green' ? 'bg-emerald-400 shadow-[0_0_10px_#00ff88]' : variant === 'amber' ? 'bg-amber-400 shadow-[0_0_10px_#ffaa00]' : 'bg-red-800 shadow-[0_0_10px_#8b1a1a]'}` : ''}
+                `}
+                onClick={() => scrollToPanel(i)}
+                aria-label={`Go to panel ${i + 1}`}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+
+HorizontalScroll.displayName = 'HorizontalScroll';
+export default HorizontalScroll;

package/layout/spec-grid/css/index.tsx

@@ -0,0 +1,103 @@
+'use client';
+
+import { forwardRef, HTMLAttributes } from 'react';
+import styles from './spec-grid.module.css';
+
+export interface SpecItem {
+  label: string;
+  value: string | number;
+  unit?: string;
+  description?: string;
+  icon?: string;
+  highlighted?: boolean;
+}
+
+export interface SpecGridProps extends HTMLAttributes<HTMLDivElement> {
+  /** Spec items */
+  specs: SpecItem[];
+  /** Color variant */
+  variant?: 'cyan' | 'green' | 'amber' | 'blood';
+  /** Grid columns */
+  columns?: number;
+  /** Show terminal header */
+  showHeader?: boolean;
+  /** Header title */
+  headerTitle?: string;
+  /** Compact mode */
+  compact?: boolean;
+  /** Striped rows */
+  striped?: boolean;
+}
+
+export const SpecGrid = forwardRef<HTMLDivElement, SpecGridProps>(
+  (
+    {
+      specs,
+      variant = 'cyan',
+      columns,
+      showHeader = false,
+      headerTitle = 'SYSTEM SPECS',
+      compact = false,
+      striped = false,
+      className,
+      style,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <div
+        ref={ref}
+        className={`
+          ${styles.grid} 
+          ${styles[variant]} 
+          ${compact ? styles.compact : ''} 
+          ${striped ? styles.striped : ''} 
+          ${className || ''}
+        `}
+        style={{
+          gridTemplateColumns: columns ? `repeat(${columns}, 1fr)` : undefined,
+          ...style,
+        }}
+        {...props}
+      >
+        {showHeader && (
+          <div className={styles.header}>
+            <span>{headerTitle}</span>
+            <div className={styles.headerDots}>
+              <span className={styles.dot} />
+              <span className={styles.dot} />
+              <span className={styles.dot} />
+            </div>
+          </div>
+        )}
+
+        {specs.map((spec, index) => (
+          <div
+            key={index}
+            className={`
+              ${styles.item} 
+              ${spec.icon ? styles.hasIcon : ''} 
+              ${spec.highlighted ? styles.highlighted : ''}
+            `}
+          >
+            {spec.icon && <span className={styles.icon}>{spec.icon}</span>}
+            <div className={styles.content}>
+              <span className={styles.label}>{spec.label}</span>
+              <span className={styles.value}>
+                {spec.value}
+                {spec.unit && <span className={styles.unit}>{spec.unit}</span>}
+              </span>
+              {spec.description && (
+                <span className={styles.description}>{spec.description}</span>
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+    );
+  }
+);
+
+SpecGrid.displayName = 'SpecGrid';
+export default SpecGrid;

package/layout/spec-grid/css/spec-grid.module.css

@@ -0,0 +1,125 @@
+.grid {
+  --spec-accent: #00f0ff;
+  --spec-bg: rgba(0, 0, 0, 0.5);
+  --spec-border: rgba(255, 255, 255, 0.1);
+  
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 1px;
+  background: var(--spec-border);
+  border: 1px solid var(--spec-border);
+  font-family: 'Share Tech Mono', monospace;
+}
+
+.item {
+  padding: 1.5rem;
+  background: var(--spec-bg);
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  transition: all 0.3s ease;
+}
+
+.item:hover {
+  background: rgba(0, 240, 255, 0.05);
+}
+
+.label {
+  font-size: 0.65rem;
+  text-transform: uppercase;
+  letter-spacing: 0.2em;
+  color: var(--spec-accent);
+  opacity: 0.8;
+}
+
+.value {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: #fff;
+  line-height: 1.2;
+}
+
+.unit {
+  font-size: 0.75rem;
+  color: rgba(255, 255, 255, 0.4);
+  margin-left: 0.25rem;
+}
+
+.description {
+  font-size: 0.75rem;
+  color: rgba(255, 255, 255, 0.5);
+  margin-top: 0.5rem;
+}
+
+/* With icons */
+.hasIcon {
+  flex-direction: row;
+  align-items: flex-start;
+  gap: 1rem;
+}
+
+.icon {
+  font-size: 1.5rem;
+  color: var(--spec-accent);
+  opacity: 0.6;
+}
+
+.content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+/* Highlight important specs */
+.highlighted {
+  background: rgba(0, 240, 255, 0.1);
+  border-left: 2px solid var(--spec-accent);
+}
+
+/* Terminal style header */
+.header {
+  grid-column: 1 / -1;
+  padding: 0.75rem 1.5rem;
+  background: var(--spec-accent);
+  color: #000;
+  font-size: 0.7rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.2em;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.headerDots {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.3);
+}
+
+/* Variants */
+.cyan { --spec-accent: #00f0ff; }
+.green { --spec-accent: #00ff88; }
+.amber { --spec-accent: #ffaa00; }
+.blood { --spec-accent: #8b1a1a; }
+
+/* Compact mode */
+.compact .item {
+  padding: 1rem;
+}
+
+.compact .value {
+  font-size: 1.25rem;
+}
+
+/* Striped */
+.striped .item:nth-child(even) {
+  background: rgba(255, 255, 255, 0.02);
+}

package/layout/spec-grid/tailwind/index.tsx

@@ -0,0 +1,91 @@
+'use client';
+
+import { forwardRef, HTMLAttributes } from 'react';
+
+export interface SpecItem {
+  label: string;
+  value: string | number;
+  unit?: string;
+  description?: string;
+  icon?: string;
+  highlighted?: boolean;
+}
+
+export interface SpecGridProps extends HTMLAttributes<HTMLDivElement> {
+  specs: SpecItem[];
+  variant?: 'cyan' | 'green' | 'amber' | 'blood';
+  columns?: number;
+  showHeader?: boolean;
+  headerTitle?: string;
+  compact?: boolean;
+  striped?: boolean;
+}
+
+const variantStyles = {
+  cyan: { accent: 'text-cyan-400', headerBg: 'bg-cyan-400', hoverBg: 'hover:bg-cyan-400/5', borderHighlight: 'border-l-cyan-400' },
+  green: { accent: 'text-emerald-400', headerBg: 'bg-emerald-400', hoverBg: 'hover:bg-emerald-400/5', borderHighlight: 'border-l-emerald-400' },
+  amber: { accent: 'text-amber-400', headerBg: 'bg-amber-400', hoverBg: 'hover:bg-amber-400/5', borderHighlight: 'border-l-amber-400' },
+  blood: { accent: 'text-red-800', headerBg: 'bg-red-800', hoverBg: 'hover:bg-red-800/5', borderHighlight: 'border-l-red-800' },
+};
+
+export const SpecGrid = forwardRef<HTMLDivElement, SpecGridProps>(
+  ({ specs, variant = 'cyan', columns, showHeader = false, headerTitle = 'SYSTEM SPECS', compact = false, striped = false, className = '', style, ...props }, ref) => {
+    const colors = variantStyles[variant];
+    const gridCols = columns ? { gridTemplateColumns: `repeat(${columns}, 1fr)` } : {};
+
+    return (
+      <div
+        ref={ref}
+        className={`
+          grid auto-rows-auto gap-px border border-white/10 bg-white/10
+          font-['Share_Tech_Mono',monospace]
+          ${!columns ? 'grid-cols-[repeat(auto-fit,minmax(200px,1fr))]' : ''}
+          ${className}
+        `}
+        style={{ ...gridCols, ...style }}
+        {...props}
+      >
+        {showHeader && (
+          <div className={`col-span-full py-3 px-6 ${colors.headerBg} text-black text-[0.7rem] font-bold uppercase tracking-[0.2em] flex justify-between items-center`}>
+            <span>{headerTitle}</span>
+            <div className="flex gap-2">
+              <span className="w-2 h-2 rounded-full bg-black/30" />
+              <span className="w-2 h-2 rounded-full bg-black/30" />
+              <span className="w-2 h-2 rounded-full bg-black/30" />
+            </div>
+          </div>
+        )}
+
+        {specs.map((spec, index) => (
+          <div
+            key={index}
+            className={`
+              ${compact ? 'p-4' : 'p-6'} bg-black/50 flex gap-4 transition-all duration-300
+              ${colors.hoverBg}
+              ${spec.icon ? 'flex-row items-start' : 'flex-col gap-2'}
+              ${spec.highlighted ? `bg-cyan-400/10 border-l-2 ${colors.borderHighlight}` : ''}
+              ${striped && index % 2 === 1 ? 'bg-white/[0.02]' : ''}
+            `}
+          >
+            {spec.icon && <span className={`text-2xl ${colors.accent} opacity-60`}>{spec.icon}</span>}
+            <div className="flex flex-col gap-1 flex-1">
+              <span className={`text-[0.65rem] uppercase tracking-[0.2em] ${colors.accent} opacity-80`}>
+                {spec.label}
+              </span>
+              <span className={`${compact ? 'text-xl' : 'text-2xl'} font-bold text-white leading-tight`}>
+                {spec.value}
+                {spec.unit && <span className="text-xs text-white/40 ml-1">{spec.unit}</span>}
+              </span>
+              {spec.description && (
+                <span className="text-xs text-white/50 mt-2">{spec.description}</span>
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+    );
+  }
+);
+
+SpecGrid.displayName = 'SpecGrid';
+export default SpecGrid;

package/{components/layout/tower-pricing → layout/tower-pricing/css}/index.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { forwardRef, HTMLAttributes } from 'react';
+import { forwardRef, HTMLAttributes, ReactNode } from 'react';
 import styles from './tower-pricing.module.css';
 
 export interface PricingTier {
@@ -16,18 +16,40 @@ export interface PricingTier {
 }
 
 export interface TowerPricingProps extends HTMLAttributes<HTMLDivElement> {
+  /** Pricing tiers */
   tiers: PricingTier[];
+  /** Color variant */
   variant?: 'gold' | 'blood' | 'cyan' | 'bone';
+  /** Show connectors between tiers */
   showConnectors?: boolean;
 }
 
 export const TowerPricing = forwardRef<HTMLDivElement, TowerPricingProps>(
-  ({ tiers, variant = 'gold', showConnectors = false, className, ...props }, ref) => {
+  (
+    {
+      tiers,
+      variant = 'gold',
+      showConnectors = false,
+      className,
+      ...props
+    },
+    ref
+  ) => {
     return (
-      <div ref={ref} className={`${styles.tower} ${styles[variant]} ${className || ''}`} {...props}>
+      <div
+        ref={ref}
+        className={`${styles.tower} ${styles[variant]} ${className || ''}`}
+        {...props}
+      >
         {tiers.map((tier, index) => (
-          <div key={tier.name} className={`${styles.tier} ${tier.featured ? styles.featured : ''}`}>
-            {tier.featured && tier.featuredLabel && <span className={styles.featuredBadge}>{tier.featuredLabel}</span>}
+          <div
+            key={tier.name}
+            className={`${styles.tier} ${tier.featured ? styles.featured : ''}`}
+          >
+            {tier.featured && tier.featuredLabel && (
+              <span className={styles.featuredBadge}>{tier.featuredLabel}</span>
+            )}
+            
             <div className={styles.tierHeader}>
               <span className={styles.tierName}>{tier.name}</span>
               <div className={styles.tierPrice}>
@@ -36,15 +58,28 @@ export const TowerPricing = forwardRef<HTMLDivElement, TowerPricingProps>(
                 {tier.period && <span className={styles.period}>/{tier.period}</span>}
               </div>
             </div>
+
             <ul className={styles.tierFeatures}>
               {tier.features.map((feature, i) => (
-                <li key={i} className={styles.feature}><span className={styles.featureIcon}>✦</span>{feature}</li>
+                <li key={i} className={styles.feature}>
+                  <span className={styles.featureIcon}>✦</span>
+                  {feature}
+                </li>
               ))}
             </ul>
+
             <div className={styles.tierAction}>
-              <button className={styles.actionButton} onClick={tier.onSelect}>{tier.buttonText || 'Select'}</button>
+              <button
+                className={styles.actionButton}
+                onClick={tier.onSelect}
+              >
+                {tier.buttonText || 'Select'}
+              </button>
             </div>
-            {showConnectors && index < tiers.length - 1 && <span className={styles.connector} />}
+
+            {showConnectors && index < tiers.length - 1 && (
+              <span className={styles.connector} />
+            )}
           </div>
         ))}
       </div>

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;
+}