acidui-core 1.0.0

package/src/components/AcidGridBox.css

@@ -0,0 +1,61 @@
+.ac-grid-box {
+    position: relative;
+    border: 1px solid var(--ac-border-muted);
+    background: var(--ac-bg);
+    padding: 1.5rem;
+}
+
+.ac-grid-inner {
+    position: relative;
+    z-index: 2;
+}
+
+.ac-ch {
+    position: absolute;
+    width: 9px;
+    height: 9px;
+    pointer-events: none;
+    z-index: 1;
+}
+
+.ac-ch::before,
+.ac-ch::after {
+    content: '';
+    position: absolute;
+    background: var(--ac-text-muted);
+}
+
+.ac-ch::before {
+    top: 4px;
+    left: 0;
+    width: 9px;
+    height: 1px;
+}
+
+.ac-ch::after {
+    top: 0;
+    left: 4px;
+    width: 1px;
+    height: 9px;
+}
+
+/* Positioning */
+.ac-ch-tl {
+    top: -5px;
+    left: -5px;
+}
+
+.ac-ch-tr {
+    top: -5px;
+    right: -5px;
+}
+
+.ac-ch-bl {
+    bottom: -5px;
+    left: -5px;
+}
+
+.ac-ch-br {
+    bottom: -5px;
+    right: -5px;
+}

package/src/components/AcidGridBox.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import clsx from 'clsx';
+import './AcidGridBox.css';
+
+export interface AcidGridBoxProps extends React.HTMLAttributes<HTMLDivElement> {
+    children?: React.ReactNode;
+    showCrosshairs?: boolean;
+}
+
+export const AcidGridBox = React.forwardRef<HTMLDivElement, AcidGridBoxProps>(
+    ({ className, showCrosshairs = true, children, ...props }, ref) => {
+        return (
+            <div className={clsx('ac-grid-box', className)} ref={ref} {...props}>
+                {showCrosshairs && (
+                    <>
+                        <div className="ac-ch ac-ch-tl" />
+                        <div className="ac-ch ac-ch-tr" />
+                        <div className="ac-ch ac-ch-bl" />
+                        <div className="ac-ch ac-ch-br" />
+                    </>
+                )}
+                <div className="ac-grid-inner">{children}</div>
+            </div>
+        );
+    }
+);

package/src/components/AcidIconBox.css

@@ -0,0 +1,42 @@
+.ac-icon-box-wrapper {
+    display: flex;
+    align-items: flex-start;
+    gap: 1.5rem;
+}
+
+.ac-icon-box {
+    flex-shrink: 0;
+    width: 48px;
+    height: 48px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--ac-surface);
+    border: 1px solid var(--ac-border-bright);
+    border-radius: 4px;
+    color: var(--ac-text-primary);
+    transition: all 0.2s;
+}
+
+.ac-icon-box-wrapper:hover .ac-icon-box {
+    border-color: var(--ac-text-secondary);
+}
+
+.ac-icon-box-content {
+    display: flex;
+    flex-direction: column;
+}
+
+.ac-icon-box-content strong {
+    font-family: var(--font-inter);
+    font-weight: 500;
+    font-size: 1.1rem;
+    margin-bottom: 0.25rem;
+    color: var(--ac-text-primary);
+}
+
+.ac-icon-box-content p {
+    color: var(--ac-text-secondary);
+    font-size: 0.9rem;
+    line-height: 1.4;
+}

package/src/components/AcidIconBox.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import clsx from 'clsx';
+import './AcidIconBox.css';
+
+export interface AcidIconBoxProps extends React.HTMLAttributes<HTMLDivElement> {
+    icon?: React.ReactNode;
+}
+
+export const AcidIconBox = React.forwardRef<HTMLDivElement, AcidIconBoxProps>(
+    ({ className, icon, children, ...props }, ref) => {
+        return (
+            <div className={clsx('ac-icon-box-wrapper', className)} ref={ref} {...props}>
+                <div className="ac-icon-box">{icon}</div>
+                <div className="ac-icon-box-content">{children}</div>
+            </div>
+        );
+    }
+);

package/src/components/AcidInput.css

@@ -0,0 +1,99 @@
+.ac-input-container {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    width: 100%;
+}
+
+.ac-input-label {
+    font-size: 0.85rem;
+    font-weight: 500;
+    text-transform: none;
+    color: var(--ac-text-secondary);
+    transition: color 0.2s;
+}
+
+.ac-input-wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+}
+
+.ac-input-prefix {
+    position: absolute;
+    left: 0.75rem;
+    color: var(--ac-text-secondary);
+    font-family: var(--font-mono);
+    pointer-events: none;
+}
+
+.ac-input-field {
+    width: 100%;
+    padding: 0.75rem 1rem;
+    background-color: var(--ac-surface);
+    border: 1px solid var(--ac-border-muted);
+    border-radius: 0;
+    color: var(--ac-text-primary);
+    font-family: var(--font-mono);
+    font-size: 0.875rem;
+    outline: none;
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    clip-path: polygon(0 0,
+            calc(100% - 8px) 0,
+            100% 8px,
+            100% 100%,
+            8px 100%,
+            0 calc(100% - 8px));
+}
+
+.ac-input-field:focus {
+    border-color: var(--ac-brand);
+    background-color: var(--ac-surface-hover);
+}
+
+.ac-input-field::placeholder {
+    color: var(--ac-text-muted);
+}
+
+/* Variants */
+.ac-input-outline {
+    background-color: transparent;
+}
+
+.ac-input-filled {
+    background-color: var(--ac-surface);
+    border-color: transparent;
+}
+
+.ac-input-filled:focus {
+    background-color: var(--ac-surface-hover);
+    border-color: var(--ac-text-primary);
+}
+
+.ac-input-terminal {
+    padding-left: 2rem;
+    background-color: var(--ac-bg);
+    border-color: var(--ac-border-muted);
+}
+
+.ac-textarea-field {
+    min-height: 120px;
+    resize: vertical;
+    line-height: 1.6;
+}
+
+.ac-input-helper {
+    font-size: 0.75rem;
+    font-family: var(--font-mono);
+    color: var(--ac-text-muted);
+    margin-top: 0.25rem;
+    display: block;
+}
+
+.ac-input-helper.error {
+    color: var(--ac-brand);
+}
+
+.ac-input-error {
+    border-color: var(--ac-brand) !important;
+}

package/src/components/AcidInput.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import clsx from 'clsx';
+import './AcidInput.css';
+
+export interface AcidInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    label?: string;
+    variant?: 'outline' | 'filled' | 'terminal';
+}
+
+export const AcidInput = React.forwardRef<HTMLInputElement, AcidInputProps>(
+    ({ className, label, variant = 'outline', placeholder, ...props }, ref) => {
+        return (
+            <div className={clsx('ac-input-container', className)}>
+                {label && <label className="ac-input-label">{label}</label>}
+                <div className="ac-input-wrapper">
+                    {variant === 'terminal' && <span className="ac-input-prefix">{'>'}</span>}
+                    <input
+                        ref={ref}
+                        className={clsx('ac-input-field', `ac-input-${variant}`)}
+                        placeholder={placeholder || " "}
+                        {...props}
+                    />
+                </div>
+            </div>
+        );
+    }
+);

package/src/components/AcidInputOtp.css

@@ -0,0 +1,57 @@
+.ac-otp-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+}
+
+.ac-otp-label {
+    font-family: var(--font-mono);
+    font-size: 0.75rem;
+    letter-spacing: 0.1em;
+    color: var(--ac-text-muted);
+    text-transform: uppercase;
+}
+
+.ac-otp-inputs {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+}
+
+.ac-otp-cell {
+    width: 48px;
+    height: 56px;
+    border: 1px solid var(--ac-border-muted);
+    background: var(--ac-surface);
+    color: var(--ac-text-primary);
+    font-family: var(--font-mono);
+    font-size: 1.5rem;
+    font-weight: 700;
+    text-align: center;
+    outline: none;
+    transition: all 0.2s ease;
+    letter-spacing: 0;
+    /* remove browser defaults */
+    -moz-appearance: textfield;
+}
+
+.ac-otp-cell::-webkit-outer-spin-button,
+.ac-otp-cell::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+}
+
+.ac-otp-cell:focus {
+    border-color: var(--ac-text-primary);
+    background: var(--ac-surface-hover);
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ac-text-primary) 10%, transparent);
+}
+
+.ac-otp-cell-filled {
+    border-color: var(--ac-brand);
+    color: var(--ac-brand);
+}
+
+.ac-otp-cell:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+}

package/src/components/AcidInputOtp.tsx

@@ -0,0 +1,102 @@
+import { useState, useRef } from 'react';
+import clsx from 'clsx';
+import './AcidInputOtp.css';
+
+export interface AcidInputOtpProps {
+    length?: number;
+    value?: string;
+    onChange?: (value: string) => void;
+    onComplete?: (value: string) => void;
+    disabled?: boolean;
+    mask?: boolean;
+    className?: string;
+    label?: string;
+}
+
+export const AcidInputOtp = ({
+    length = 6,
+    value,
+    onChange,
+    onComplete,
+    disabled = false,
+    mask = false,
+    className,
+    label
+}: AcidInputOtpProps) => {
+    const [internalValue, setInternalValue] = useState(value || '');
+    const inputRefs = useRef<Array<HTMLInputElement | null>>([]);
+    const digits = value !== undefined ? value : internalValue;
+
+    const getDigit = (index: number) => digits[index] || '';
+
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>, index: number) => {
+        if (e.key === 'Backspace') {
+            if (digits[index]) {
+                const next = digits.substring(0, index) + digits.substring(index + 1);
+                setInternalValue(next);
+                onChange?.(next);
+            } else if (index > 0) {
+                inputRefs.current[index - 1]?.focus();
+                const next = digits.substring(0, index - 1) + digits.substring(index);
+                setInternalValue(next);
+                onChange?.(next);
+            }
+        } else if (e.key === 'ArrowLeft' && index > 0) {
+            inputRefs.current[index - 1]?.focus();
+        } else if (e.key === 'ArrowRight' && index < length - 1) {
+            inputRefs.current[index + 1]?.focus();
+        }
+    };
+
+    const handleInput = (e: React.ChangeEvent<HTMLInputElement>, index: number) => {
+        const raw = e.target.value;
+        const char = raw.replace(/\D/g, '').slice(-1);
+        if (!char) return;
+
+        const arr = digits.split('');
+        arr[index] = char;
+        const next = arr.join('').substring(0, length);
+        setInternalValue(next);
+        onChange?.(next);
+
+        if (next.length === length) {
+            onComplete?.(next);
+        } else if (index < length - 1) {
+            inputRefs.current[index + 1]?.focus();
+        }
+    };
+
+    const handlePaste = (e: React.ClipboardEvent) => {
+        e.preventDefault();
+        const pasted = e.clipboardData.getData('text').replace(/\D/g, '').substring(0, length);
+        setInternalValue(pasted);
+        onChange?.(pasted);
+        if (pasted.length === length) onComplete?.(pasted);
+        const focusIndex = Math.min(pasted.length, length - 1);
+        inputRefs.current[focusIndex]?.focus();
+    };
+
+    return (
+        <div className={clsx('ac-otp-wrapper', className)}>
+            {label && <span className="ac-otp-label">{label}</span>}
+            <div className="ac-otp-inputs">
+                {Array.from({ length }).map((_, i) => (
+                    <input
+                        key={i}
+                        ref={el => { inputRefs.current[i] = el; }}
+                        className={clsx('ac-otp-cell', getDigit(i) && 'ac-otp-cell-filled')}
+                        type={mask ? 'password' : 'text'}
+                        inputMode="numeric"
+                        maxLength={1}
+                        value={mask && getDigit(i) ? '•' : getDigit(i)}
+                        onChange={(e) => handleInput(e, i)}
+                        onKeyDown={(e) => handleKeyDown(e, i)}
+                        onPaste={handlePaste}
+                        disabled={disabled}
+                        autoComplete="off"
+                    />
+                ))}
+            </div>
+        </div>
+    );
+};

package/src/components/AcidLabel.css

@@ -0,0 +1,26 @@
+.ac-label {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-family: var(--font-mono);
+    font-size: 0.7rem;
+    font-weight: 700;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+    color: var(--ac-text-secondary);
+}
+
+.ac-label-dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    flex-shrink: 0;
+}
+
+.ac-dot-brand {
+    background-color: var(--ac-brand);
+}
+
+.ac-dot-muted {
+    background-color: var(--ac-border-bright);
+}

package/src/components/AcidLabel.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import clsx from 'clsx';
+import './AcidLabel.css';
+
+export interface AcidLabelProps extends React.HTMLAttributes<HTMLSpanElement> {
+    color?: 'brand' | 'muted';
+}
+
+export const AcidLabel = React.forwardRef<HTMLSpanElement, AcidLabelProps>(
+    ({ className, color = 'brand', children, ...props }, ref) => {
+        return (
+            <span className={clsx('ac-label', className)} ref={ref} {...props}>
+                <span className={clsx('ac-label-dot', `ac-dot-${color}`)} />
+                {children}
+            </span>
+        );
+    }
+);

package/src/components/AcidLayout.css

@@ -0,0 +1,42 @@
+.ac-layout {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+    background: var(--ac-bg);
+}
+
+.ac-panel {
+    border: 1px solid var(--ac-border-muted);
+    background: rgba(0, 0, 0, 0.2);
+    display: flex;
+    flex-direction: column;
+}
+
+.ac-panel-header {
+    padding: 0.5rem 1rem;
+    border-bottom: 1px solid var(--ac-border-muted);
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    background: var(--ac-surface);
+}
+
+.ac-panel-dot {
+    width: 6px;
+    height: 6px;
+    background: var(--ac-brand);
+    border-radius: 50%;
+}
+
+.ac-panel-title {
+    font-family: var(--font-mono);
+    font-size: 0.75rem;
+    letter-spacing: 0.05em;
+    color: var(--ac-text-primary);
+    text-transform: uppercase;
+}
+
+.ac-panel-content {
+    flex: 1;
+    padding: 1.5rem;
+}

package/src/components/AcidLayout.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import clsx from 'clsx';
+import './AcidLayout.css';
+
+export interface AcidLayoutProps extends React.HTMLAttributes<HTMLDivElement> {
+    variant?: 'default' | 'industrial';
+}
+
+export const AcidLayout = ({ variant = 'default', className, children, ...props }: AcidLayoutProps) => {
+    return (
+        <div className={clsx('ac-layout', `ac-layout-${variant}`, className)} {...props}>
+            {children}
+        </div>
+    );
+};
+
+export interface AcidPanelProps extends React.HTMLAttributes<HTMLDivElement> {
+    title?: string;
+}
+
+export const AcidPanel = ({ className, children, title, ...props }: AcidPanelProps) => {
+    return (
+        <div className={clsx('ac-panel', className)} {...props}>
+            {title && (
+                <div className="ac-panel-header">
+                    <span className="ac-panel-dot" />
+                    <span className="ac-panel-title">{title}</span>
+                </div>
+            )}
+            <div className="ac-panel-content">
+                {children}
+            </div>
+        </div>
+    );
+};

package/src/components/AcidLink.css

@@ -0,0 +1,26 @@
+.ac-link {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-family: var(--font-mono);
+    font-size: 0.8rem;
+    font-weight: 700;
+    color: var(--ac-text-primary);
+    text-decoration: none;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    transition: color 0.2s ease;
+    cursor: pointer;
+}
+
+.ac-link:hover {
+    color: var(--ac-brand);
+}
+
+.ac-link-arrow {
+    transition: transform 0.2s ease;
+}
+
+.ac-link:hover .ac-link-arrow {
+    transform: translateX(4px);
+}

package/src/components/AcidLink.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import clsx from 'clsx';
+import { ArrowRight } from 'lucide-react';
+import './AcidLink.css';
+
+export interface AcidLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    children: React.ReactNode;
+}
+
+export const AcidLink = React.forwardRef<HTMLAnchorElement, AcidLinkProps>(
+    ({ className, children, ...props }, ref) => {
+        return (
+            <a className={clsx('ac-link', className)} ref={ref} {...props}>
+                <span className="ac-link-text">{children}</span>
+                <ArrowRight size={14} className="ac-link-arrow" />
+            </a>
+        );
+    }
+);

package/src/components/AcidMagicCard.css

@@ -0,0 +1,27 @@
+.ac-magic-card {
+    position: relative;
+    background: var(--ac-surface);
+    border: 1px solid var(--ac-border-muted);
+    border-radius: 12px;
+    overflow: hidden;
+    transition: border-color 0.3s;
+}
+
+.ac-magic-card:hover {
+    border-color: var(--ac-border-bright);
+}
+
+.ac-magic-glow {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    z-index: 0;
+    transition: opacity 0.5s;
+}
+
+.ac-magic-content {
+    position: relative;
+    z-index: 1;
+    height: 100%;
+    width: 100%;
+}

package/src/components/AcidMagicCard.tsx

@@ -0,0 +1,49 @@
+import React, { useRef, useState } from 'react';
+import clsx from 'clsx';
+import './AcidMagicCard.css';
+
+export interface AcidMagicCardProps {
+    children: React.ReactNode;
+    className?: string;
+    glowColor?: string;
+    style?: React.CSSProperties;
+}
+
+export const AcidMagicCard = ({
+    children,
+    className,
+    glowColor = 'rgba(244, 67, 54, 0.15)',
+    style
+}: AcidMagicCardProps) => {
+    const cardRef = useRef<HTMLDivElement>(null);
+    const [mousePos, setMousePos] = useState({ x: -1000, y: -1000 });
+
+    const handleMouseMove = (e: React.MouseEvent) => {
+        if (!cardRef.current) return;
+        const rect = cardRef.current.getBoundingClientRect();
+        setMousePos({
+            x: e.clientX - rect.left,
+            y: e.clientY - rect.top
+        });
+    };
+
+    return (
+        <div
+            ref={cardRef}
+            className={clsx('ac-magic-card', className)}
+            onMouseMove={handleMouseMove}
+            onMouseLeave={() => setMousePos({ x: -1000, y: -1000 })}
+            style={style}
+        >
+            <div
+                className="ac-magic-glow"
+                style={{
+                    background: `radial-gradient(400px circle at ${mousePos.x}px ${mousePos.y}px, ${glowColor}, transparent 40%)`
+                }}
+            />
+            <div className="ac-magic-content">
+                {children}
+            </div>
+        </div>
+    );
+};