acidui-core 1.0.0

package/src/components/AcidSheet.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { X } from 'lucide-react';
+import clsx from 'clsx';
+import './AcidSheet.css';
+
+export interface AcidSheetProps {
+    isOpen: boolean;
+    onClose: () => void;
+    title?: string;
+    description?: string;
+    children: React.ReactNode;
+    side?: 'left' | 'right' | 'top' | 'bottom';
+    className?: string;
+}
+
+export const AcidSheet = ({
+    isOpen,
+    onClose,
+    title,
+    description,
+    children,
+    side = 'right',
+    className
+}: AcidSheetProps) => {
+    const slideVariants = {
+        right: { initial: { x: '100%' }, animate: { x: 0 }, exit: { x: '100%' } },
+        left: { initial: { x: '-100%' }, animate: { x: 0 }, exit: { x: '-100%' } },
+        top: { initial: { y: '-100%' }, animate: { y: 0 }, exit: { y: '-100%' } },
+        bottom: { initial: { y: '100%' }, animate: { y: 0 }, exit: { y: '100%' } },
+    };
+
+    return (
+        <AnimatePresence>
+            {isOpen && (
+                <>
+                    <motion.div
+                        initial={{ opacity: 0 }}
+                        animate={{ opacity: 1 }}
+                        exit={{ opacity: 0 }}
+                        onClick={onClose}
+                        className="ac-sheet-overlay"
+                    />
+                    <motion.div
+                        initial={slideVariants[side].initial}
+                        animate={slideVariants[side].animate}
+                        exit={slideVariants[side].exit}
+                        transition={{ type: 'spring', damping: 25, stiffness: 200 }}
+                        className={clsx('ac-sheet', `ac-sheet-${side}`, className)}
+                    >
+                        <div className="ac-sheet-header">
+                            <div className="ac-sheet-header-content">
+                                {title && <h2 className="ac-sheet-title">{title}</h2>}
+                                {description && <p className="ac-sheet-desc">{description}</p>}
+                            </div>
+                            <button className="ac-sheet-close" onClick={onClose}>
+                                <X size={20} />
+                            </button>
+                        </div>
+                        <div className="ac-sheet-content">
+                            {children}
+                        </div>
+                    </motion.div>
+                </>
+            )}
+        </AnimatePresence>
+    );
+};

package/src/components/AcidShineButton.css

@@ -0,0 +1,36 @@
+.ac-shine-btn {
+    position: relative;
+    overflow: hidden;
+    padding: 0.75rem 2rem;
+    background: #111;
+    color: var(--ac-brand);
+    border: 1px solid var(--ac-brand);
+    font-family: var(--font-mono);
+    font-weight: 700;
+    cursor: pointer;
+    border-radius: 4px;
+    transition: all 0.2s;
+}
+
+.ac-shine-btn:hover {
+    background: var(--ac-brand);
+    color: #000;
+}
+
+.ac-shine-overlay {
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 50%;
+    height: 100%;
+    background: linear-gradient(to right,
+            transparent,
+            var(--shine-color),
+            transparent);
+    transform: skewX(-25deg);
+    transition: left 0.5s;
+}
+
+.ac-shine-btn:hover .ac-shine-overlay {
+    left: 200%;
+}

package/src/components/AcidShineButton.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import clsx from 'clsx';
+import './AcidShineButton.css';
+
+export interface AcidShineButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    shineColor?: string;
+}
+
+export const AcidShineButton = ({
+    children,
+    className,
+    shineColor = 'rgba(255, 255, 255, 0.4)',
+    ...props
+}: AcidShineButtonProps) => {
+    return (
+        <button className={clsx('ac-shine-btn', className)} {...props}>
+            <span className="ac-btn-text">{children}</span>
+            <div
+                className="ac-shine-overlay"
+                style={{ '--shine-color': shineColor } as React.CSSProperties}
+            />
+        </button>
+    );
+};

package/src/components/AcidShinyText.css

@@ -0,0 +1,22 @@
+.ac-shiny-text {
+    color: rgba(255, 255, 255, 0.45);
+    background: linear-gradient(120deg,
+            rgba(255, 255, 255, 0) 40%,
+            rgba(255, 255, 255, 0.8) 50%,
+            rgba(255, 255, 255, 0) 60%);
+    background-size: 200% 100%;
+    -webkit-background-clip: text;
+    background-clip: text;
+    display: inline-block;
+    animation: shiny-scan var(--shiny-duration, 2s) linear infinite;
+}
+
+@keyframes shiny-scan {
+    0% {
+        background-position: 100% 0;
+    }
+
+    100% {
+        background-position: -100% 0;
+    }
+}

package/src/components/AcidShinyText.tsx

@@ -0,0 +1,20 @@
+import clsx from 'clsx';
+import './AcidShinyText.css';
+
+export interface AcidShinyTextProps {
+    children: string;
+    className?: string;
+    style?: React.CSSProperties;
+    speed?: number;
+}
+
+export const AcidShinyText = ({ children, className, style, speed = 2 }: AcidShinyTextProps) => {
+    return (
+        <span
+            className={clsx('ac-shiny-text', className)}
+            style={{ ...style, '--shiny-duration': `${speed}s` } as React.CSSProperties}
+        >
+            {children}
+        </span>
+    );
+};

package/src/components/AcidSidebar.css

@@ -0,0 +1,152 @@
+.sidebar-search {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.75rem 1rem;
+    margin: 1rem;
+    border: 1px solid var(--ac-border-muted);
+    border-radius: 8px;
+    background: var(--ac-surface);
+    color: var(--ac-text-muted);
+    transition: all 0.2s;
+}
+
+.sidebar-search:focus-within {
+    border-color: var(--ac-brand);
+    color: var(--ac-text-primary);
+}
+
+.sidebar-search input {
+    background: transparent;
+    border: none;
+    color: inherit;
+    font-family: var(--font-primary);
+    font-size: 0.75rem;
+    width: 100%;
+    outline: none;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+
+.ac-sidebar {
+    width: 280px;
+    flex-shrink: 0;
+    height: calc(100vh - 8rem);
+    position: sticky;
+    top: 6rem;
+    overflow-y: auto;
+    border-right: 1px solid var(--ac-border-muted);
+    padding-right: 1rem;
+}
+
+/* Custom raw scrollbar */
+.ac-sidebar::-webkit-scrollbar {
+    width: 4px;
+}
+
+.ac-sidebar::-webkit-scrollbar-track {
+    background: var(--ac-bg);
+}
+
+.ac-sidebar::-webkit-scrollbar-thumb {
+    background: var(--ac-border-muted);
+}
+
+.ac-sidebar:hover::-webkit-scrollbar-thumb {
+    background: var(--ac-lime);
+}
+
+.ac-sidebar-inner {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+    padding-bottom: 4rem;
+}
+
+.ac-sidebar-category {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+}
+
+.ac-sidebar-cat-title {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-family: var(--font-inter);
+    font-weight: 700;
+    font-size: 0.95rem;
+    color: var(--ac-text-primary);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    margin-bottom: 0.5rem;
+}
+
+.ac-sidebar-cat-icon {
+    color: var(--ac-text-secondary);
+}
+
+.ac-sidebar-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    padding-left: 1.5rem;
+    border-left: 1px solid var(--ac-border-muted);
+    margin-left: 6px;
+}
+
+.ac-sidebar-item {
+    display: flex;
+    align-items: center;
+}
+
+.ac-sidebar-link {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    text-decoration: none;
+    color: var(--ac-text-secondary);
+    font-size: 0.9rem;
+    font-weight: 500;
+    transition: all 0.2s ease;
+    position: relative;
+    width: 100%;
+}
+
+.ac-sidebar-link:hover {
+    color: var(--ac-lime);
+    transform: translateX(4px);
+}
+
+.ac-sidebar-link::before {
+    content: '';
+    position: absolute;
+    left: -1.5rem;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 8px;
+    height: 2px;
+    background: transparent;
+    transition: background 0.2s;
+}
+
+.ac-sidebar-link:hover::before {
+    background: var(--ac-lime);
+}
+
+.ac-sidebar-badge-new {
+    background: rgba(0, 240, 255, 0.1);
+    color: var(--ac-cyan);
+    border: 1px solid var(--ac-cyan);
+    font-size: 0.6rem;
+    font-family: var(--font-mono);
+    font-weight: 700;
+    padding: 0.1rem 0.3rem;
+    border-radius: var(--ac-radius-sm);
+    margin-left: auto;
+    text-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
+    box-shadow: 0 0 10px rgba(0, 240, 255, 0.2);
+}

package/src/components/AcidSidebar.tsx

@@ -0,0 +1,44 @@
+import clsx from 'clsx';
+import { ChevronRight } from 'lucide-react';
+import './AcidSidebar.css';
+
+export interface SidebarCategory {
+    title: string;
+    items: { name: string; isNew?: boolean }[];
+}
+
+export interface AcidSidebarProps {
+    categories: SidebarCategory[];
+    className?: string;
+    children?: React.ReactNode;
+}
+
+export const AcidSidebar = ({ categories, className, children }: AcidSidebarProps) => {
+    return (
+        <div className={clsx('ac-sidebar', className)}>
+            <div className="ac-sidebar-inner">
+                {children}
+                {categories.map((cat, i) => (
+                    <div key={i} className="ac-sidebar-category">
+                        <h4 className="ac-sidebar-cat-title">
+                            <ChevronRight size={14} className="ac-sidebar-cat-icon" />
+                            {cat.title}
+                        </h4>
+                        <ul className="ac-sidebar-list">
+                            {cat.items.map((item, j) => (
+                                <li key={j} className="ac-sidebar-item">
+                                    <a href={`#${item.name.replace(/\s+/g, '-').toLowerCase()}`} className="ac-sidebar-link">
+                                        {item.name}
+                                        {item.isNew && (
+                                            <span className="ac-sidebar-badge-new">NEW</span>
+                                        )}
+                                    </a>
+                                </li>
+                            ))}
+                        </ul>
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+};

package/src/components/AcidSkeleton.css

@@ -0,0 +1,61 @@
+.ac-skeleton {
+    background: var(--ac-border-muted);
+    position: relative;
+    overflow: hidden;
+    opacity: 0.8;
+}
+
+.ac-skeleton::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg,
+            transparent,
+            rgba(255, 255, 255, 0.1),
+            transparent);
+    animation: ac-skeleton-shimmer 2s infinite;
+}
+
+[data-theme='light'] .ac-skeleton::after {
+    background: linear-gradient(90deg,
+            transparent,
+            rgba(0, 0, 0, 0.05),
+            transparent);
+}
+
+.ac-skeleton-circle {
+    border-radius: 50%;
+}
+
+.ac-skeleton-rectangle {
+    border-radius: var(--ac-radius-sm);
+}
+
+.ac-skeleton-industrial {
+    clip-path: polygon(5% 0, 100% 0, 100% 95%, 95% 100%, 0 100%, 0 5%);
+}
+
+@keyframes ac-skeleton-pulse {
+
+    0%,
+    100% {
+        opacity: 1;
+    }
+
+    50% {
+        opacity: 0.5;
+    }
+}
+
+@keyframes ac-skeleton-shimmer {
+    0% {
+        transform: translateX(-100%);
+    }
+
+    100% {
+        transform: translateX(100%);
+    }
+}

package/src/components/AcidSkeleton.tsx

@@ -0,0 +1,29 @@
+
+import clsx from 'clsx';
+import './AcidSkeleton.css';
+
+export interface AcidSkeletonProps {
+    width?: string | number;
+    height?: string | number;
+    shape?: 'rectangle' | 'circle' | 'industrial';
+    className?: string;
+}
+
+export const AcidSkeleton = ({
+    width = '100%',
+    height = '1rem',
+    shape = 'rectangle',
+    className
+}: AcidSkeletonProps) => {
+    const style = {
+        width,
+        height,
+    };
+
+    return (
+        <div
+            className={clsx('ac-skeleton', `ac-skeleton-${shape}`, className)}
+            style={style}
+        />
+    );
+};

package/src/components/AcidSlider.css

@@ -0,0 +1,89 @@
+.ac-slider-container {
+    width: 100%;
+    padding: 1rem 0;
+    user-select: none;
+}
+
+.ac-slider-header {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 0.75rem;
+}
+
+.ac-slider-label {
+    font-family: var(--font-mono);
+    font-size: 0.7rem;
+    color: var(--ac-text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+
+.ac-slider-value {
+    font-family: var(--font-mono);
+    font-size: 0.85rem;
+    font-weight: 700;
+    color: var(--ac-brand);
+}
+
+.ac-slider-track-wrapper {
+    position: relative;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+}
+
+.ac-slider-track {
+    width: 100%;
+    height: 4px;
+    background: var(--ac-surface);
+    border: 1px solid var(--ac-border-muted);
+    border-radius: 2px;
+    position: relative;
+    overflow: hidden;
+}
+
+.ac-slider-fill {
+    height: 100%;
+    background: var(--ac-brand);
+}
+
+.ac-slider-thumb {
+    position: absolute;
+    width: 16px;
+    height: 16px;
+    background: var(--ac-text-primary);
+    border: 1px solid var(--ac-border-muted);
+    border-radius: 4px;
+    /* Industrial look */
+    top: 50%;
+    transform: translate(-50%, -50%);
+    pointer-events: none;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
+}
+
+.ac-slider-markers {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 0.5rem;
+}
+
+.ac-marker {
+    font-family: var(--font-mono);
+    font-size: 0.6rem;
+    color: var(--ac-text-muted);
+}
+
+.ac-slider-disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+[data-theme='light'] .ac-slider-track {
+    background: #eee;
+}
+
+[data-theme='light'] .ac-slider-thumb {
+    background: white;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}

package/src/components/AcidSlider.tsx

@@ -0,0 +1,87 @@
+import { useState, useRef } from 'react';
+import { motion } from 'framer-motion';
+import clsx from 'clsx';
+import './AcidSlider.css';
+
+export interface AcidSliderProps {
+    min?: number;
+    max?: number;
+    step?: number;
+    defaultValue?: number;
+    value?: number;
+    onChange?: (value: number) => void;
+    label?: string;
+    className?: string;
+    disabled?: boolean;
+}
+
+export const AcidSlider = ({
+    min = 0,
+    max = 100,
+    step = 1,
+    defaultValue = 0,
+    value,
+    onChange,
+    label,
+    className,
+    disabled = false
+}: AcidSliderProps) => {
+    const [internalValue, setInternalValue] = useState(defaultValue);
+    const trackRef = useRef<HTMLDivElement>(null);
+    const resolvedValue = value !== undefined ? value : internalValue;
+
+    const percentage = ((resolvedValue - min) / (max - min)) * 100;
+
+    const handleUpdate = (clientX: number) => {
+        if (disabled || !trackRef.current) return;
+        const rect = trackRef.current.getBoundingClientRect();
+        const offsetX = Math.min(Math.max(clientX - rect.left, 0), rect.width);
+        const ratio = offsetX / rect.width;
+        const rawValue = ratio * (max - min) + min;
+        const steppedValue = Math.round(rawValue / step) * step;
+        const finalValue = Math.min(Math.max(steppedValue, min), max);
+
+        setInternalValue(finalValue);
+        onChange?.(finalValue);
+    };
+
+    const onMouseDown = (e: React.MouseEvent) => {
+        handleUpdate(e.clientX);
+        const onMouseMove = (moveEvent: MouseEvent) => handleUpdate(moveEvent.clientX);
+        const onMouseUp = () => {
+            document.removeEventListener('mousemove', onMouseMove);
+            document.removeEventListener('mouseup', onMouseUp);
+        };
+        document.addEventListener('mousemove', onMouseMove);
+        document.addEventListener('mouseup', onMouseUp);
+    };
+
+    return (
+        <div className={clsx('ac-slider-container', className, disabled && 'ac-slider-disabled')}>
+            <div className="ac-slider-header">
+                {label && <span className="ac-slider-label">{label}</span>}
+                <span className="ac-slider-value">{resolvedValue}</span>
+            </div>
+
+            <div className="ac-slider-track-wrapper" ref={trackRef} onMouseDown={onMouseDown}>
+                <div className="ac-slider-track">
+                    <motion.div
+                        className="ac-slider-fill"
+                        style={{ width: `${percentage}%` }}
+                        transition={{ type: 'spring', stiffness: 400, damping: 40 }}
+                    />
+                </div>
+                <motion.div
+                    className="ac-slider-thumb"
+                    animate={{ left: `${percentage}%` }}
+                    transition={{ type: 'spring', stiffness: 500, damping: 40 }}
+                />
+            </div>
+
+            <div className="ac-slider-markers">
+                <span className="ac-marker">{min}</span>
+                <span className="ac-marker">{max}</span>
+            </div>
+        </div>
+    );
+};

package/src/components/AcidSolidCard.css

@@ -0,0 +1,55 @@
+.ac-solid-card {
+    background: #f0f0f0;
+    /* Off-white bright contrast against the pure black system */
+    color: #000;
+    border-radius: 12px;
+    padding: 2rem;
+    display: flex;
+    flex-direction: column;
+    min-height: 480px;
+}
+
+.ac-solid-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: auto;
+    /* Pushes content down */
+}
+
+/* Override AcidLabel colors specifically for light layout */
+.ac-solid-card .ac-label {
+    color: #666;
+}
+
+.ac-solid-card .ac-dot-brand {
+    background-color: var(--ac-brand);
+}
+
+.ac-solid-ghost-text {
+    font-family: var(--font-mono);
+    font-size: 0.75rem;
+    color: #777;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+}
+
+.ac-solid-content {
+    margin-top: 4rem;
+}
+
+.ac-solid-graphic {
+    margin-bottom: 1.5rem;
+    color: #111;
+}
+
+.ac-solid-title {
+    font-size: clamp(2.5rem, 5vw, 4rem);
+    font-family: var(--font-inter);
+    line-height: 1.05;
+    font-weight: 500;
+    letter-spacing: -0.04em;
+    color: #000;
+    margin-bottom: 2rem;
+    max-width: 600px;
+}