acidui-core 1.0.0

package/src/components/AcidMagicLoader.css

@@ -0,0 +1,47 @@
+.ac-magic-loader {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.ac-loader-ring {
+    position: absolute;
+    border: 2px solid transparent;
+    border-top-color: inherit;
+    border-radius: 50%;
+}
+
+.ac-ring-outer {
+    inset: 0;
+    border-width: 2px;
+}
+
+.ac-ring-middle {
+    inset: 15%;
+    border-width: 2px;
+}
+
+.ac-ring-inner {
+    inset: 30%;
+    border-width: 2px;
+}
+
+.ac-loader-core {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    animation: ac-core-pulse 1s infinite alternate;
+}
+
+@keyframes ac-core-pulse {
+    from {
+        transform: scale(0.8);
+        opacity: 0.5;
+    }
+
+    to {
+        transform: scale(1.5);
+        opacity: 1;
+    }
+}

package/src/components/AcidMagicLoader.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import clsx from 'clsx';
+import './AcidMagicLoader.css';
+
+export interface AcidMagicLoaderProps {
+    className?: string;
+    size?: number;
+    color?: string;
+}
+
+export const AcidMagicLoader = ({
+    className,
+    size = 120,
+    color = 'var(--ac-brand)'
+}: AcidMagicLoaderProps) => {
+    return (
+        <div
+            className={clsx('ac-magic-loader', className)}
+            style={{ width: size, height: size } as React.CSSProperties}
+        >
+            <motion.div
+                className="ac-loader-ring ac-ring-outer"
+                animate={{ rotate: 360 }}
+                transition={{ duration: 3, repeat: Infinity, ease: 'linear' }}
+                style={{ borderColor: color } as React.CSSProperties}
+            />
+            <motion.div
+                className="ac-loader-ring ac-ring-middle"
+                animate={{ rotate: -360 }}
+                transition={{ duration: 2, repeat: Infinity, ease: 'linear' }}
+                style={{ borderColor: color, opacity: 0.6 } as React.CSSProperties}
+            />
+            <motion.div
+                className="ac-loader-ring ac-ring-inner"
+                animate={{ rotate: 360 }}
+                transition={{ duration: 1.5, repeat: Infinity, ease: 'linear' }}
+                style={{ borderColor: color, opacity: 0.3 } as React.CSSProperties}
+            />
+            <div className="ac-loader-core" style={{ backgroundColor: color } as React.CSSProperties} />
+        </div>
+    );
+};

package/src/components/AcidMarquee.css

@@ -0,0 +1,59 @@
+.ac-marquee-container {
+    overflow: hidden;
+    white-space: nowrap;
+    width: 100vw;
+    margin-left: calc(-50vw + 50%);
+    position: relative;
+    display: flex;
+    align-items: center;
+    border-top: 4px solid;
+    border-bottom: 4px solid;
+    background-color: var(--ac-bg);
+    padding: 1rem 0;
+    transform: rotate(-2deg) scale(1.05);
+    z-index: 10;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
+}
+
+.ac-marquee-content {
+    display: inline-flex;
+    will-change: transform;
+}
+
+.ac-marquee-text {
+    font-family: var(--font-inter);
+    font-weight: 900;
+    font-size: 4rem;
+    line-height: 1;
+    text-transform: uppercase;
+    padding: 0 2rem;
+    letter-spacing: -0.05em;
+    -webkit-text-stroke: 2px currentColor;
+    color: transparent;
+    transition: all 0.3s ease;
+}
+
+.ac-marquee-text:hover {
+    color: currentColor;
+}
+
+/* Colors */
+.ac-marquee-lime {
+    border-color: var(--ac-lime);
+    color: var(--ac-lime);
+}
+
+.ac-marquee-pink {
+    border-color: var(--ac-pink);
+    color: var(--ac-pink);
+}
+
+.ac-marquee-cyan {
+    border-color: var(--ac-cyan);
+    color: var(--ac-cyan);
+}
+
+.ac-marquee-purple {
+    border-color: var(--ac-purple);
+    color: var(--ac-purple);
+}

package/src/components/AcidMarquee.tsx

@@ -0,0 +1,28 @@
+import clsx from 'clsx';
+import { motion } from 'framer-motion';
+import './AcidMarquee.css';
+
+export interface AcidMarqueeProps {
+    text: string;
+    speed?: number;
+    direction?: 'left' | 'right';
+    className?: string;
+    color?: 'lime' | 'pink' | 'cyan' | 'purple';
+}
+
+export const AcidMarquee = ({ text, speed = 20, direction = 'left', className, color = 'lime' }: AcidMarqueeProps) => {
+    return (
+        <div className={clsx('ac-marquee-container', `ac-marquee-${color}`, className)}>
+            <motion.div
+                className="ac-marquee-content"
+                animate={{ x: direction === 'left' ? ['0%', '-50%'] : ['-50%', '0%'] }}
+                transition={{ repeat: Infinity, ease: 'linear', duration: speed }}
+            >
+                <span className="ac-marquee-text">{text}</span>
+                <span className="ac-marquee-text">{text}</span>
+                <span className="ac-marquee-text">{text}</span>
+                <span className="ac-marquee-text">{text}</span>
+            </motion.div>
+        </div>
+    );
+};

package/src/components/AcidMeter.css

@@ -0,0 +1,118 @@
+.ac-meter-control {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1rem;
+}
+
+.ac-meter-label {
+    font-family: var(--font-mono);
+    font-size: 0.65rem;
+    color: var(--ac-text-secondary);
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    transform: rotate(-90deg);
+    margin-bottom: 2rem;
+    white-space: nowrap;
+}
+
+.ac-meter-track {
+    width: 14px;
+    height: 200px;
+    background: var(--ac-border-muted);
+    border-radius: 9999px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+}
+
+.ac-meter-dot-top {
+    position: absolute;
+    top: 4px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 6px;
+    height: 6px;
+    background: var(--ac-bg);
+    border-radius: 50%;
+    z-index: 1;
+}
+
+.ac-meter-dot-bottom {
+    position: absolute;
+    bottom: 4px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 6px;
+    height: 6px;
+    background: var(--ac-bg);
+    /* Punch-hole look */
+    border-radius: 50%;
+    z-index: 3;
+}
+
+.ac-meter-fill {
+    width: 100%;
+    background: linear-gradient(to top, var(--ac-brand), #ff8a65);
+    border-radius: 9999px;
+    position: relative;
+    z-index: 2;
+}
+
+.ac-meter-fill-dot {
+    position: absolute;
+    top: 4px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 6px;
+    height: 6px;
+    background: var(--ac-bg);
+    border-radius: 50%;
+}
+
+/* Horizontal Style */
+.ac-meter-horizontal {
+    flex-direction: row;
+    width: 100%;
+    max-width: 400px;
+}
+
+.ac-meter-horizontal .ac-meter-label {
+    transform: none;
+    margin-bottom: 0;
+    margin-right: 2rem;
+    min-width: 80px;
+}
+
+.ac-meter-horizontal .ac-meter-track {
+    width: 100%;
+    height: 14px;
+    flex-direction: row;
+    justify-content: flex-start;
+}
+
+.ac-meter-horizontal .ac-meter-dot-top {
+    left: 4px;
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+.ac-meter-horizontal .ac-meter-dot-bottom {
+    right: 4px;
+    left: auto;
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+.ac-meter-horizontal .ac-meter-fill {
+    height: 100%;
+    background: linear-gradient(to right, var(--ac-brand), #ff8a65);
+}
+
+.ac-meter-horizontal .ac-meter-fill-dot {
+    right: 4px;
+    left: auto;
+    top: 50%;
+    transform: translateY(-50%);
+}

package/src/components/AcidMeter.tsx

@@ -0,0 +1,37 @@
+
+import clsx from 'clsx';
+import { motion } from 'framer-motion';
+import './AcidMeter.css';
+
+export interface AcidMeterProps {
+    value: number; // 0 to 100
+    label?: string;
+    orientation?: 'vertical' | 'horizontal';
+    className?: string;
+}
+
+export const AcidMeter = ({ value, label, orientation = 'vertical', className }: AcidMeterProps) => {
+    return (
+        <div className={clsx('ac-meter-control', `ac-meter-${orientation}`, className)}>
+            {label && <div className="ac-meter-label">{label}</div>}
+            <div className="ac-meter-track">
+                {/* Top Dot Empty */}
+                <div className="ac-meter-dot-top" />
+
+                {/* Fill element */}
+                <motion.div
+                    className="ac-meter-fill"
+                    initial={orientation === 'vertical' ? { height: 0 } : { width: 0 }}
+                    whileInView={orientation === 'vertical' ? { height: `${value}%` } : { width: `${value}%` }}
+                    viewport={{ once: true }}
+                    transition={{ duration: 1, type: "spring", bounce: 0.3 }}
+                >
+                    <div className="ac-meter-fill-dot" />
+                </motion.div>
+
+                {/* Bottom Dot Fill (anchor) */}
+                <div className="ac-meter-dot-bottom" />
+            </div>
+        </div>
+    );
+};

package/src/components/AcidNavbar.css

@@ -0,0 +1,142 @@
+.ac-navbar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 1000;
+    background: var(--ac-bg);
+    border-bottom: 2px solid var(--ac-border);
+    font-family: var(--font-mono);
+}
+
+.ac-navbar-top-bar {
+    height: 64px;
+    display: flex;
+    align-items: center;
+}
+
+.ac-navbar-inner {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+}
+
+.ac-navbar-brand {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    text-decoration: none;
+    color: var(--ac-text-primary);
+    font-weight: 700;
+    letter-spacing: -0.02em;
+}
+
+.brand-text {
+    font-size: 1.1rem;
+    display: flex;
+    align-items: baseline;
+    gap: 0.5rem;
+}
+
+.version {
+    font-size: 0.6rem;
+    color: var(--ac-brand);
+    border: 1px solid var(--ac-brand);
+    padding: 0 4px;
+    border-radius: 2px;
+}
+
+.ac-navbar-links {
+    display: flex;
+    align-items: center;
+    gap: 2rem;
+}
+
+.ac-navbar-link {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    text-decoration: none;
+    color: var(--ac-text-secondary);
+    font-size: 0.75rem;
+    font-weight: 500;
+    letter-spacing: 0.05em;
+    padding: 0.5rem 0;
+    border-bottom: 2px solid transparent;
+    transition: all 0.2s;
+}
+
+.ac-navbar-link:hover {
+    color: var(--ac-text-primary);
+}
+
+.ac-navbar-link.active {
+    color: var(--ac-brand);
+    border-bottom-color: var(--ac-brand);
+}
+
+.ac-navbar-actions {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+
+.ac-btn-icon {
+    background: var(--ac-surface);
+    border: 1px solid var(--ac-border);
+    color: var(--ac-text-primary);
+    padding: 0.5rem;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s;
+}
+
+.ac-btn-icon:hover {
+    background: var(--ac-border);
+    border-color: var(--ac-text-secondary);
+}
+
+.ac-navbar-mobile-overlay {
+    position: fixed;
+    top: 64px;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.8);
+    backdrop-filter: blur(8px);
+    z-index: 999;
+}
+
+.ac-navbar-mobile-menu {
+    background: var(--ac-bg);
+    border-bottom: 2px solid var(--ac-border);
+    padding: 2rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+}
+
+.ac-mobile-link {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    text-decoration: none;
+    color: var(--ac-text-primary);
+    font-size: 1rem;
+    font-weight: 600;
+}
+
+@media (max-width: 768px) {
+    .desktop-only {
+        display: none;
+    }
+}
+
+@media (min-width: 769px) {
+    .mobile-only {
+        display: none;
+    }
+}

package/src/components/AcidNavbar.tsx

@@ -0,0 +1,111 @@
+import React, { useState, useEffect } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import clsx from 'clsx';
+import { Menu, X, Sun, Moon, Github, Cpu, Book, Layout, Terminal } from 'lucide-react';
+import { Link, useLocation } from 'react-router-dom';
+import './AcidNavbar.css';
+
+export interface NavItem {
+    id: string;
+    name: string;
+    link: string;
+    icon?: React.ReactNode;
+}
+
+export const AcidNavbar = () => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [isDarkMode, setIsDarkMode] = useState(() => {
+        return document.documentElement.getAttribute('data-theme') !== 'light';
+    });
+    const location = useLocation();
+
+    useEffect(() => {
+        document.documentElement.setAttribute('data-theme', isDarkMode ? 'dark' : 'light');
+    }, [isDarkMode]);
+
+    const navItems: NavItem[] = [
+        { id: 'home', name: 'HOME', link: '/', icon: <Cpu size={14} /> },
+        { id: 'docs', name: 'DOCUMENTATION', link: '/docs', icon: <Book size={14} /> },
+        { id: 'components', name: 'LIBRARY', link: '/library', icon: <Layout size={14} /> },
+    ];
+
+    return (
+        <header className="ac-navbar">
+            <div className="ac-navbar-top-bar">
+                <div className="ac-container ac-navbar-inner">
+                    <div className="ac-navbar-left">
+                        <Link to="/" className="ac-navbar-brand">
+                            <Terminal className="text-brand" size={18} />
+                            <span className="brand-text">ACID_UI <span className="version">v1.2.0</span></span>
+                        </Link>
+                    </div>
+
+                    <nav className="ac-navbar-links desktop-only">
+                        {navItems.map((item) => (
+                            <Link
+                                key={item.id}
+                                to={item.link}
+                                className={clsx('ac-navbar-link', location.pathname === item.link && 'active')}
+                            >
+                                <span className="link-icon">{item.icon}</span>
+                                <span className="link-text">{item.name}</span>
+                            </Link>
+                        ))}
+                    </nav>
+
+                    <div className="ac-navbar-actions">
+                        <button
+                            className="ac-btn-icon"
+                            onClick={() => setIsDarkMode(!isDarkMode)}
+                            title="Toggle Theme"
+                        >
+                            {isDarkMode ? <Sun size={18} /> : <Moon size={18} />}
+                        </button>
+
+                        <a
+                            href="https://github.com"
+                            target="_blank"
+                            rel="noreferrer"
+                            className="ac-btn-icon desktop-only"
+                            title="GitHub Repository"
+                        >
+                            <Github size={18} />
+                        </a>
+
+                        <button
+                            className="ac-btn-icon mobile-only"
+                            onClick={() => setIsOpen(!isOpen)}
+                        >
+                            {isOpen ? <X size={20} /> : <Menu size={20} />}
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <AnimatePresence>
+                {isOpen && (
+                    <motion.div
+                        initial={{ opacity: 0, y: -10 }}
+                        animate={{ opacity: 1, y: 0 }}
+                        exit={{ opacity: 0, y: -10 }}
+                        className="ac-navbar-mobile-overlay"
+                    >
+                        <div className="ac-navbar-mobile-menu">
+                            {navItems.map((item) => (
+                                <Link
+                                    key={item.id}
+                                    to={item.link}
+                                    className="ac-mobile-link"
+                                    onClick={() => setIsOpen(false)}
+                                >
+                                    {item.icon}
+                                    <span>{item.name}</span>
+                                </Link>
+                            ))}
+                        </div>
+                    </motion.div>
+                )}
+            </AnimatePresence>
+        </header>
+    );
+};

package/src/components/AcidNavigationMenu.css

@@ -0,0 +1,47 @@
+.ac-nav-menu {
+    width: fit-content;
+}
+
+.ac-nav-list {
+    display: flex;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.ac-nav-horizontal .ac-nav-list {
+    flex-direction: row;
+    gap: 2rem;
+}
+
+.ac-nav-vertical .ac-nav-list {
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.ac-nav-link {
+    display: flex;
+    flex-direction: column;
+    text-decoration: none;
+    font-family: var(--font-mono);
+    font-size: 0.9rem;
+    color: var(--ac-text-secondary);
+    transition: color 0.2s;
+    position: relative;
+    padding: 0.5rem 0;
+}
+
+.ac-nav-link:hover {
+    color: var(--ac-text-primary);
+}
+
+.ac-nav-link.ac-active {
+    color: var(--ac-brand);
+}
+
+.ac-nav-indicator {
+    height: 2px;
+    background: var(--ac-brand);
+    width: 100%;
+    margin-top: 4px;
+}

package/src/components/AcidNavigationMenu.tsx

@@ -0,0 +1,38 @@
+import clsx from 'clsx';
+import './AcidNavigationMenu.css';
+
+export interface NavItem {
+    label: string;
+    href: string;
+    active?: boolean;
+}
+
+export interface AcidNavigationMenuProps {
+    items: NavItem[];
+    className?: string;
+    orientation?: 'horizontal' | 'vertical';
+}
+
+export const AcidNavigationMenu = ({
+    items,
+    className,
+    orientation = 'horizontal'
+}: AcidNavigationMenuProps) => {
+    return (
+        <nav className={clsx('ac-nav-menu', `ac-nav-${orientation}`, className)}>
+            <ul className="ac-nav-list">
+                {items.map((item, index) => (
+                    <li key={index} className="ac-nav-item">
+                        <a
+                            href={item.href}
+                            className={clsx('ac-nav-link', item.active && 'ac-active')}
+                        >
+                            <span className="ac-nav-label">{item.label}</span>
+                            {item.active && <div className="ac-nav-indicator" />}
+                        </a>
+                    </li>
+                ))}
+            </ul>
+        </nav>
+    );
+};