acidui-core 1.0.0

package/src/components/AcidTooltip.css

@@ -0,0 +1,81 @@
+.ac-tooltip-wrapper {
+    position: relative;
+    display: inline-flex;
+}
+
+.ac-tooltip {
+    position: absolute;
+    background: var(--ac-surface);
+    border: 1px solid var(--ac-border-bright);
+    padding: 0.5rem 0.75rem;
+    border-radius: var(--ac-radius-sm);
+    z-index: 1100;
+    pointer-events: none;
+    font-family: var(--font-mono);
+    font-size: 0.75rem;
+    color: var(--ac-text-primary);
+    white-space: nowrap;
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
+}
+
+.ac-tooltip-arrow {
+    position: absolute;
+    width: 8px;
+    height: 8px;
+    background: var(--ac-surface);
+    border: 1px solid var(--ac-border-bright);
+    transform: rotate(45deg);
+}
+
+/* Positions */
+.ac-tooltip-top {
+    bottom: calc(100% + 10px);
+    left: 50%;
+}
+
+.ac-tooltip-top .ac-tooltip-arrow {
+    bottom: -5px;
+    left: 50%;
+    transform: translateX(-50%) rotate(45deg);
+    border-top: none;
+    border-left: none;
+}
+
+.ac-tooltip-bottom {
+    top: calc(100% + 10px);
+    left: 50%;
+}
+
+.ac-tooltip-bottom .ac-tooltip-arrow {
+    top: -5px;
+    left: 50%;
+    transform: translateX(-50%) rotate(45deg);
+    border-bottom: none;
+    border-right: none;
+}
+
+.ac-tooltip-left {
+    right: calc(100% + 10px);
+    top: 50%;
+}
+
+.ac-tooltip-left .ac-tooltip-arrow {
+    right: -5px;
+    top: 50%;
+    transform: translateY(-50%) rotate(45deg);
+    border-bottom: none;
+    border-left: none;
+}
+
+.ac-tooltip-right {
+    left: calc(100% + 10px);
+    top: 50%;
+}
+
+.ac-tooltip-right .ac-tooltip-arrow {
+    left: -5px;
+    top: 50%;
+    transform: translateY(-50%) rotate(45deg);
+    border-top: none;
+    border-right: none;
+}

package/src/components/AcidTooltip.tsx

@@ -0,0 +1,44 @@
+import React, { useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import clsx from 'clsx';
+import './AcidTooltip.css';
+
+export interface AcidTooltipProps {
+    content: React.ReactNode;
+    children: React.ReactNode;
+    position?: 'top' | 'bottom' | 'left' | 'right';
+    className?: string;
+}
+
+export const AcidTooltip = ({
+    content,
+    children,
+    position = 'top',
+    className
+}: AcidTooltipProps) => {
+    const [isVisible, setIsVisible] = useState(false);
+
+    return (
+        <div
+            className="ac-tooltip-wrapper"
+            onMouseEnter={() => setIsVisible(true)}
+            onMouseLeave={() => setIsVisible(false)}
+        >
+            {children}
+            <AnimatePresence>
+                {isVisible && (
+                    <motion.div
+                        initial={{ opacity: 0, scale: 0.95, x: (position === 'top' || position === 'bottom') ? '-50%' : 0, y: (position === 'left' || position === 'right') ? '-50%' : 0 }}
+                        animate={{ opacity: 1, scale: 1, x: (position === 'top' || position === 'bottom') ? '-50%' : 0, y: (position === 'left' || position === 'right') ? '-50%' : 0 }}
+                        exit={{ opacity: 0, scale: 0.95 }}
+                        transition={{ duration: 0.1 }}
+                        className={clsx('ac-tooltip', `ac-tooltip-${position}`, className)}
+                    >
+                        {content}
+                        <div className="ac-tooltip-arrow" />
+                    </motion.div>
+                )}
+            </AnimatePresence>
+        </div>
+    );
+};

package/src/components/AcidTopLoader.css

@@ -0,0 +1,24 @@
+.ac-top-loader-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    z-index: 99999;
+    pointer-events: none;
+    overflow: hidden;
+}
+
+.ac-top-loader-bar {
+    height: 100%;
+    box-shadow: 0 0 10px rgba(var(--ac-brand-rgb), 0.5);
+}
+
+.ac-top-loader-glow {
+    position: absolute;
+    right: 0;
+    top: 0;
+    height: 100%;
+    width: 100px;
+    filter: blur(8px);
+    opacity: 0.8;
+}

package/src/components/AcidTopLoader.tsx

@@ -0,0 +1,61 @@
+import { useEffect, useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import './AcidTopLoader.css';
+
+export interface AcidTopLoaderProps {
+    visible?: boolean;
+    color?: string;
+    height?: number;
+    speed?: number;
+}
+
+export const AcidTopLoader = ({
+    visible = false,
+    color = 'var(--ac-brand)',
+    height = 3,
+    speed = 0.5
+}: AcidTopLoaderProps) => {
+    const [progress, setProgress] = useState(0);
+
+    useEffect(() => {
+        let timer: ReturnType<typeof setInterval>;
+        if (visible) {
+            const resetTimer = setTimeout(() => setProgress(0), 0);
+            timer = setInterval(() => {
+                setProgress(prev => {
+                    if (prev >= 90) return prev;
+                    return prev + (Math.random() * 5);
+                });
+            }, 300);
+            return () => {
+                clearTimeout(resetTimer);
+                clearInterval(timer);
+            };
+        } else {
+            setProgress(100);
+        }
+    }, [visible]);
+
+    return (
+        <AnimatePresence>
+            {visible && (
+                <motion.div
+                    initial={{ opacity: 0 }}
+                    animate={{ opacity: 1 }}
+                    exit={{ opacity: 0, transition: { delay: 0.2 } }}
+                    className="ac-top-loader-container"
+                    style={{ height }}
+                >
+                    <motion.div
+                        className="ac-top-loader-bar"
+                        style={{ background: color }}
+                        initial={{ width: '0%' }}
+                        animate={{ width: `${progress}%` }}
+                        transition={{ duration: speed }}
+                    />
+                    <div className="ac-top-loader-glow" style={{ backgroundColor: color }} />
+                </motion.div>
+            )}
+        </AnimatePresence>
+    );
+};

package/src/components/AcidTopStickyBar.css

@@ -0,0 +1,99 @@
+.ac-sticky-bar {
+    position: sticky;
+    top: 0;
+    left: 0;
+    width: 100%;
+    z-index: 1000;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.5rem 1.5rem;
+    background: var(--ac-surface);
+    border-bottom: 1px solid var(--ac-border-muted);
+    backdrop-filter: blur(8px);
+    overflow: hidden;
+}
+
+.ac-sticky-bar-info {
+    border-bottom-color: var(--ac-brand);
+}
+
+.ac-sticky-bar-warning {
+    border-bottom-color: #ffbd2e;
+}
+
+.ac-sticky-bar-error {
+    border-bottom-color: #ff5f56;
+}
+
+.ac-sticky-bar-content {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.ac-sticky-bar-icon {
+    color: var(--ac-brand);
+}
+
+.ac-sticky-bar-info .ac-sticky-bar-icon {
+    color: var(--ac-brand);
+}
+
+.ac-sticky-bar-warning .ac-sticky-bar-icon {
+    color: #ffbd2e;
+}
+
+.ac-sticky-bar-error .ac-sticky-bar-icon {
+    color: #ff5f56;
+}
+
+.ac-sticky-bar-text {
+    font-size: 0.75rem;
+    font-family: var(--font-mono);
+    color: var(--ac-text-primary);
+    letter-spacing: 0.02em;
+}
+
+.ac-sticky-bar-close {
+    background: transparent;
+    border: none;
+    color: var(--ac-text-muted);
+    cursor: pointer;
+    padding: 4px;
+    transition: color 0.15s;
+    display: flex;
+    align-items: center;
+}
+
+.ac-sticky-bar-close:hover {
+    color: var(--ac-brand);
+}
+
+.ac-sticky-bar-scanline {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 1px;
+    background: rgba(var(--ac-brand-rgb), 0.2);
+    box-shadow: 0 0 10px var(--ac-brand);
+    animation: ac-sticky-scan 3s linear infinite;
+    pointer-events: none;
+}
+
+@keyframes ac-sticky-scan {
+    from {
+        transform: translateY(-10px);
+        opacity: 0;
+    }
+
+    50% {
+        opacity: 0.5;
+    }
+
+    to {
+        transform: translateY(50px);
+        opacity: 0;
+    }
+}

package/src/components/AcidTopStickyBar.tsx

@@ -0,0 +1,51 @@
+import { useState } from 'react';
+import { motion } from 'framer-motion';
+import { AlertCircle, X } from 'lucide-react';
+import clsx from 'clsx';
+import './AcidTopStickyBar.css';
+
+export interface AcidTopStickyBarProps {
+    message: string;
+    type?: 'info' | 'warning' | 'error';
+    onClose?: () => void;
+    className?: string;
+}
+
+export const AcidTopStickyBar = ({
+    message,
+    type = 'info',
+    onClose,
+    className
+}: AcidTopStickyBarProps) => {
+    const [isVisible, setIsVisible] = useState(true);
+
+    if (!isVisible) return null;
+
+    const Icon = type === 'error' ? AlertCircle : AlertCircle; // Simplified for now
+
+    return (
+        <motion.div
+            initial={{ y: -50, opacity: 0 }}
+            animate={{ y: 0, opacity: 1 }}
+            exit={{ y: -50, opacity: 0 }}
+            className={clsx('ac-sticky-bar', `ac-sticky-bar-${type}`, className)}
+        >
+            <div className="ac-sticky-bar-content">
+                <Icon size={14} className="ac-sticky-bar-icon" />
+                <span className="ac-sticky-bar-text">{message}</span>
+            </div>
+            {onClose && (
+                <button
+                    className="ac-sticky-bar-close"
+                    onClick={() => {
+                        setIsVisible(false);
+                        onClose();
+                    }}
+                >
+                    <X size={14} />
+                </button>
+            )}
+            <div className="ac-sticky-bar-scanline" />
+        </motion.div>
+    );
+};

package/src/components/AcidTrialButton.css

@@ -0,0 +1,55 @@
+.ac-trial-btn {
+    position: relative;
+    background: #fff;
+    color: #000;
+    border: none;
+    padding: 0.75rem 2rem;
+    border-radius: 8px;
+    cursor: pointer;
+    font-family: var(--font-mono);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 2px;
+    transition: transform 0.2s, box-shadow 0.2s;
+    box-shadow: 0 4px 14px rgba(255, 255, 255, 0.1);
+}
+
+.ac-trial-btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.2);
+}
+
+.ac-trial-main {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-weight: 800;
+    font-size: 1rem;
+}
+
+.ac-trial-secondary {
+    font-size: 0.6rem;
+    opacity: 0.6;
+    font-weight: 500;
+    letter-spacing: 0.1em;
+}
+
+.ac-trial-icon {
+    color: #f59e0b;
+}
+
+.ac-trial-glow {
+    position: absolute;
+    inset: -2px;
+    background: linear-gradient(45deg, #f59e0b, #ef4444, #3b82f6);
+    border-radius: inherit;
+    z-index: -1;
+    opacity: 0;
+    transition: opacity 0.3s;
+    filter: blur(8px);
+}
+
+.ac-trial-btn:hover .ac-trial-glow {
+    opacity: 0.4;
+}

package/src/components/AcidTrialButton.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import clsx from 'clsx';
+import { Sparkles } from 'lucide-react';
+import './AcidTrialButton.css';
+
+export interface AcidTrialButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    secondaryText?: string;
+}
+
+export const AcidTrialButton = ({
+    children,
+    className,
+    secondaryText = 'NO_CREDIT_CARD_REQUIRED',
+    ...props
+}: AcidTrialButtonProps) => {
+    return (
+        <button className={clsx('ac-trial-btn', className)} {...props}>
+            <div className="ac-trial-main">
+                <Sparkles size={16} className="ac-trial-icon" />
+                <span>{children}</span>
+            </div>
+            {secondaryText && <span className="ac-trial-secondary">{secondaryText}</span>}
+            <div className="ac-trial-glow" />
+        </button>
+    );
+};

package/src/components/AcidTrustedUsers.css

@@ -0,0 +1,59 @@
+.ac-trusted-container {
+    width: 100%;
+    padding: 3rem 0;
+}
+
+.ac-trusted-header {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+    margin-bottom: 3rem;
+}
+
+.ac-trusted-line {
+    flex: 1;
+    height: 1px;
+    background: var(--ac-border-muted);
+}
+
+.ac-trusted-title {
+    font-size: 0.65rem;
+    font-family: var(--font-mono);
+    color: var(--ac-text-muted);
+    letter-spacing: 0.2em;
+    white-space: nowrap;
+}
+
+.ac-trusted-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+    gap: 2rem;
+    align-items: center;
+}
+
+.ac-trusted-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 12px;
+    filter: grayscale(100%);
+    opacity: 0.6;
+    transition: all 0.3s;
+    cursor: default;
+}
+
+.ac-trusted-item:hover {
+    opacity: 1;
+}
+
+.ac-trusted-logo {
+    font-size: 2rem;
+    color: var(--ac-text-primary);
+}
+
+.ac-trusted-name {
+    font-size: 0.6rem;
+    font-family: var(--font-mono);
+    color: var(--ac-text-muted);
+    text-transform: uppercase;
+}

package/src/components/AcidTrustedUsers.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import clsx from 'clsx';
+import './AcidTrustedUsers.css';
+
+export interface TrustedUser {
+    id: string;
+    logo: React.ReactNode;
+    name: string;
+}
+
+export interface AcidTrustedUsersProps {
+    users: TrustedUser[];
+    title?: string;
+    className?: string;
+}
+
+export const AcidTrustedUsers = ({
+    users,
+    title = "TRUSTED_NODES",
+    className
+}: AcidTrustedUsersProps) => {
+    return (
+        <div className={clsx('ac-trusted-container', className)}>
+            <div className="ac-trusted-header">
+                <div className="ac-trusted-line" />
+                <span className="ac-trusted-title">{title}</span>
+                <div className="ac-trusted-line" />
+            </div>
+            <div className="ac-trusted-grid">
+                {users.map((user) => (
+                    <motion.div
+                        key={user.id}
+                        whileHover={{ scale: 1.05, filter: 'grayscale(0%)' }}
+                        className="ac-trusted-item"
+                    >
+                        <div className="ac-trusted-logo">
+                            {user.logo}
+                        </div>
+                        <span className="ac-trusted-name">{user.name}</span>
+                    </motion.div>
+                ))}
+            </div>
+        </div>
+    );
+};

package/src/components/AcidTypewriterInput.css

@@ -0,0 +1,37 @@
+.ac-typewriter-input-wrap {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    width: 100%;
+}
+
+.ac-typewriter-label {
+    font-family: var(--font-mono);
+    font-size: 0.8rem;
+    color: var(--ac-brand);
+    letter-spacing: 0.1em;
+}
+
+.ac-cursor {
+    animation: cursor-blink 1s step-end infinite;
+}
+
+.ac-typewriter-field {
+    background: #000;
+    border: 1px solid var(--ac-border-muted);
+    padding: 0.75rem 1rem;
+    color: white;
+    font-family: var(--font-mono);
+    outline: none;
+    transition: border-color 0.2s;
+}
+
+.ac-typewriter-field:focus {
+    border-color: var(--ac-brand);
+}
+
+@keyframes cursor-blink {
+    50% {
+        opacity: 0;
+    }
+}

package/src/components/AcidTypewriterInput.tsx

@@ -0,0 +1,31 @@
+import React, { useState, useEffect } from 'react';
+import clsx from 'clsx';
+import './AcidTypewriterInput.css';
+
+export interface AcidTypewriterInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    label: string;
+    typingSpeed?: number;
+}
+
+export const AcidTypewriterInput = ({ label, typingSpeed = 100, className, ...props }: AcidTypewriterInputProps) => {
+    const [displayText, setDisplayText] = useState('');
+
+    useEffect(() => {
+        let i = 0;
+        const interval = setInterval(() => {
+            setDisplayText(label.slice(0, i + 1));
+            i++;
+            if (i >= label.length) clearInterval(interval);
+        }, typingSpeed);
+        return () => clearInterval(interval);
+    }, [label, typingSpeed]);
+
+    return (
+        <div className={clsx('ac-typewriter-input-wrap', className)}>
+            <label className="ac-typewriter-label">
+                {displayText}<span className="ac-cursor">_</span>
+            </label>
+            <input className="ac-typewriter-field" {...props} />
+        </div>
+    );
+};

package/src/components/AcidTypingText.tsx

@@ -0,0 +1,32 @@
+import { useState, useEffect } from 'react';
+import clsx from 'clsx';
+
+export interface AcidTypingTextProps {
+    text: string;
+    speed?: number;
+    className?: string;
+    onComplete?: () => void;
+}
+
+export const AcidTypingText = ({ text, speed = 50, className, onComplete }: AcidTypingTextProps) => {
+    const [displayed, setDisplayed] = useState('');
+
+    useEffect(() => {
+        let i = 0;
+        const timer = setInterval(() => {
+            setDisplayed(text.slice(0, i + 1));
+            i++;
+            if (i >= text.length) {
+                clearInterval(timer);
+                if (onComplete) onComplete();
+            }
+        }, speed);
+        return () => clearInterval(timer);
+    }, [text, speed, onComplete]);
+
+    return (
+        <span className={clsx('ac-typing-text', className)}>
+            {displayed}<span className="ac-typing-cursor" style={{ visibility: displayed.length < text.length ? 'visible' : 'hidden' }}>|</span>
+        </span>
+    );
+};

package/src/components/AcidVideoText.css

@@ -0,0 +1,35 @@
+.ac-video-text-container {
+    position: relative;
+    width: 100%;
+    height: 300px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #000;
+    overflow: hidden;
+}
+
+.ac-video-text-bg {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    z-index: 1;
+}
+
+.ac-video-text-mask {
+    position: relative;
+    z-index: 2;
+    font-size: 8rem;
+    font-weight: 900;
+    margin: 0;
+    text-transform: uppercase;
+    color: #000;
+    background: #fff;
+    mix-blend-mode: screen;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}