acidui-core 1.0.0

package/src/components/AcidAlert.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import clsx from 'clsx';
+import { motion } from 'framer-motion';
+import { AlertCircle, AlertTriangle, CheckCircle, Info, X } from 'lucide-react';
+import './AcidAlert.css';
+
+export type AcidAlertVariant = 'info' | 'success' | 'warning' | 'error';
+
+export interface AcidAlertProps {
+    variant?: AcidAlertVariant;
+    title?: string;
+    children: React.ReactNode;
+    onClose?: () => void;
+    className?: string;
+    icon?: boolean;
+}
+
+const icons = {
+    info: <Info size={18} />,
+    success: <CheckCircle size={18} />,
+    warning: <AlertTriangle size={18} />,
+    error: <AlertCircle size={18} />,
+};
+
+export const AcidAlert = ({
+    variant = 'info',
+    title,
+    children,
+    onClose,
+    className,
+    icon = true
+}: AcidAlertProps) => {
+    return (
+        <motion.div
+            initial={{ opacity: 0, x: -10 }}
+            animate={{ opacity: 1, x: 0 }}
+            exit={{ opacity: 0, x: 10 }}
+            className={clsx('ac-alert', `ac-alert-${variant}`, className)}
+        >
+            {icon && <div className="ac-alert-icon">{icons[variant]}</div>}
+            <div className="ac-alert-content">
+                {title && <h5 className="ac-alert-title">{title}</h5>}
+                <div className="ac-alert-description">{children}</div>
+            </div>
+            {onClose && (
+                <button className="ac-alert-close" onClick={onClose}>
+                    <X size={16} />
+                </button>
+            )}
+        </motion.div>
+    );
+};

package/src/components/AcidAnimatedNotification.css

@@ -0,0 +1,103 @@
+.ac-notification-stack {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    z-index: 9999;
+    pointer-events: none;
+    width: 360px;
+    max-width: calc(100vw - 4rem);
+}
+
+.ac-notification {
+    position: relative;
+    display: flex;
+    gap: 16px;
+    background: rgba(0, 0, 0, 0.85);
+    backdrop-filter: blur(12px);
+    border: 1px solid var(--ac-border-muted);
+    padding: 1rem;
+    border-radius: 8px;
+    pointer-events: auto;
+    overflow: hidden;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
+}
+
+.ac-notification-icon {
+    flex-shrink: 0;
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(var(--ac-brand-rgb), 0.1);
+    border: 1px solid rgba(var(--ac-brand-rgb), 0.2);
+    border-radius: 6px;
+    color: var(--ac-brand);
+}
+
+.ac-notification-content {
+    flex: 1;
+    min-width: 0;
+}
+
+.ac-notification-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 4px;
+}
+
+.ac-notification-title {
+    font-size: 0.75rem;
+    font-weight: 700;
+    font-family: var(--font-mono);
+    color: var(--ac-text-primary);
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+}
+
+.ac-notification-time {
+    font-size: 0.6rem;
+    color: var(--ac-text-muted);
+    font-family: var(--font-mono);
+}
+
+.ac-notification-message {
+    font-size: 0.75rem;
+    color: var(--ac-text-secondary);
+    line-height: 1.4;
+    margin: 0;
+}
+
+.ac-notification-close {
+    background: transparent;
+    border: none;
+    color: var(--ac-text-muted);
+    cursor: pointer;
+    padding: 2px;
+    transition: color 0.15s;
+    height: fit-content;
+}
+
+.ac-notification-close:hover {
+    color: var(--ac-brand);
+}
+
+.ac-notification-border {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    height: 2px;
+    background: var(--ac-brand);
+    animation: ac-notification-progress 5s linear forwards;
+}
+
+@keyframes ac-notification-progress {
+    from {
+        width: 100%;
+    }
+
+    to {
+        width: 0%;
+    }
+}

package/src/components/AcidAnimatedNotification.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Bell, X } from 'lucide-react';
+import clsx from 'clsx';
+import './AcidAnimatedNotification.css';
+
+export interface AcidNotification {
+    id: string;
+    title: string;
+    message: string;
+    time?: string;
+    icon?: React.ReactNode;
+}
+
+export interface AcidAnimatedNotificationProps {
+    notifications: AcidNotification[];
+    onDismiss?: (id: string) => void;
+    className?: string;
+}
+
+export const AcidAnimatedNotification = ({
+    notifications,
+    onDismiss,
+    className
+}: AcidAnimatedNotificationProps) => {
+    return (
+        <div className={clsx('ac-notification-stack', className)}>
+            <AnimatePresence mode="popLayout">
+                {notifications.map((n) => (
+                    <motion.div
+                        key={n.id}
+                        layout
+                        initial={{ opacity: 0, x: 50, scale: 0.9 }}
+                        animate={{ opacity: 1, x: 0, scale: 1 }}
+                        exit={{ opacity: 0, scale: 0.9, transition: { duration: 0.2 } }}
+                        className="ac-notification"
+                    >
+                        <div className="ac-notification-icon">
+                            {n.icon || <Bell size={18} />}
+                        </div>
+                        <div className="ac-notification-content">
+                            <div className="ac-notification-header">
+                                <span className="ac-notification-title">{n.title}</span>
+                                {n.time && <span className="ac-notification-time">{n.time}</span>}
+                            </div>
+                            <p className="ac-notification-message">{n.message}</p>
+                        </div>
+                        {onDismiss && (
+                            <button
+                                className="ac-notification-close"
+                                onClick={() => onDismiss(n.id)}
+                            >
+                                <X size={14} />
+                            </button>
+                        )}
+                        <div className="ac-notification-border" />
+                    </motion.div>
+                ))}
+            </AnimatePresence>
+        </div>
+    );
+};

package/src/components/AcidAspectRatio.css

@@ -0,0 +1,16 @@
+.ac-aspect-ratio {
+    position: relative;
+    width: 100%;
+}
+
+.ac-aspect-ratio-content {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}

package/src/components/AcidAspectRatio.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import clsx from 'clsx';
+import './AcidAspectRatio.css';
+
+export interface AcidAspectRatioProps extends React.HTMLAttributes<HTMLDivElement> {
+    ratio?: number;
+}
+
+export const AcidAspectRatio = ({ ratio = 16 / 9, children, className, ...props }: AcidAspectRatioProps) => {
+    return (
+        <div
+            className={clsx('ac-aspect-ratio', className)}
+            style={{ paddingBottom: `${(1 / ratio) * 100}%` }}
+            {...props}
+        >
+            <div className="ac-aspect-ratio-content">
+                {children}
+            </div>
+        </div>
+    );
+};

package/src/components/AcidAuroraText.css

@@ -0,0 +1,49 @@
+.ac-aurora-text {
+    position: relative;
+    display: inline-block;
+    color: var(--ac-text-primary);
+    font-weight: 800;
+}
+
+.ac-aurora-overlay {
+    position: absolute;
+    inset: 0;
+    color: transparent;
+    -webkit-text-stroke: 0px transparent;
+    background: linear-gradient(to right,
+            #f43f5e,
+            #fb923c,
+            #facc15,
+            #4ade80,
+            #2dd4bf,
+            #3b82f6,
+            #a855f7,
+            #ec4899,
+            #f43f5e);
+    background-size: 200% auto;
+    background-clip: text;
+    -webkit-background-clip: text;
+    filter: blur(8px);
+    opacity: 0.6;
+    animation: aurora-flow 8s linear infinite;
+}
+
+.ac-aurora-low .ac-aurora-overlay {
+    filter: blur(12px);
+    opacity: 0.3;
+}
+
+.ac-aurora-high .ac-aurora-overlay {
+    filter: blur(6px);
+    opacity: 0.8;
+}
+
+@keyframes aurora-flow {
+    0% {
+        background-position: 0% center;
+    }
+
+    100% {
+        background-position: 200% center;
+    }
+}

package/src/components/AcidAuroraText.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import clsx from 'clsx';
+import './AcidAuroraText.css';
+
+export interface AcidAuroraTextProps {
+    children: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+    intensity?: 'low' | 'medium' | 'high';
+}
+
+export const AcidAuroraText = ({ children, className, style, intensity = 'medium' }: AcidAuroraTextProps) => {
+    return (
+        <span className={clsx('ac-aurora-text', `ac-aurora-${intensity}`, className)} style={style}>
+            {children}
+            <span className="ac-aurora-overlay" aria-hidden="true">{children}</span>
+        </span>
+    );
+};

package/src/components/AcidAvatar.css

@@ -0,0 +1,70 @@
+.ac-avatar {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--ac-surface);
+    border: 1px solid var(--ac-border-muted);
+    overflow: hidden;
+    flex-shrink: 0;
+}
+
+.ac-avatar-img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.ac-avatar-fallback {
+    font-family: var(--font-mono);
+    font-weight: 700;
+    color: var(--ac-text-muted);
+    font-size: 0.9rem;
+}
+
+/* Sizes */
+.ac-avatar-sm {
+    width: 32px;
+    height: 32px;
+}
+
+.ac-avatar-md {
+    width: 44px;
+    height: 44px;
+}
+
+.ac-avatar-lg {
+    width: 64px;
+    height: 64px;
+}
+
+.ac-avatar-xl {
+    width: 96px;
+    height: 96px;
+}
+
+/* Shapes */
+.ac-avatar-circle {
+    border-radius: 50%;
+}
+
+.ac-avatar-square {
+    border-radius: var(--ac-radius-sm);
+}
+
+.ac-avatar-industrial {
+    clip-path: polygon(10% 0, 100% 0, 100% 90%, 90% 100%, 0 100%, 0 10%);
+}
+
+.ac-avatar-status {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    width: 25%;
+    height: 25%;
+    background: #4caf50;
+    border: 2px solid var(--ac-bg);
+    border-radius: 50%;
+    display: none;
+    /* Optional: Toggle on if active */
+}

package/src/components/AcidAvatar.tsx

@@ -0,0 +1,32 @@
+
+import clsx from 'clsx';
+import './AcidAvatar.css';
+
+export interface AcidAvatarProps {
+    src?: string;
+    fallback?: string;
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    shape?: 'square' | 'circle' | 'industrial';
+    className?: string;
+}
+
+export const AcidAvatar = ({
+    src,
+    fallback = '?',
+    size = 'md',
+    shape = 'industrial',
+    className
+}: AcidAvatarProps) => {
+    return (
+        <div className={clsx('ac-avatar', `ac-avatar-${size}`, `ac-avatar-${shape}`, className)}>
+            {src ? (
+                <img src={src} alt="Avatar" className="ac-avatar-img" />
+            ) : (
+                <div className="ac-avatar-fallback">
+                    {fallback.substring(0, 2).toUpperCase()}
+                </div>
+            )}
+            <div className="ac-avatar-status" />
+        </div>
+    );
+};

package/src/components/AcidBadge.css

@@ -0,0 +1,54 @@
+.ac-badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-family: var(--font-mono);
+    font-weight: 700;
+    white-space: nowrap;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    border-radius: var(--ac-radius-sm);
+    transition: all 0.2s ease;
+}
+
+/* Sizes */
+.ac-badge-sm {
+    padding: 0 0.4rem;
+    font-size: 0.65rem;
+    height: 18px;
+}
+
+.ac-badge-md {
+    padding: 0 0.6rem;
+    font-size: 0.75rem;
+    height: 24px;
+}
+
+.ac-badge-lg {
+    padding: 0 0.8rem;
+    font-size: 0.85rem;
+    height: 30px;
+}
+
+/* Variants */
+.ac-badge-solid {
+    background: var(--ac-text-primary);
+    color: var(--ac-bg);
+}
+
+.ac-badge-outline {
+    background: transparent;
+    color: var(--ac-text-primary);
+    border: 1px solid var(--ac-border-bright);
+}
+
+.ac-badge-subtle {
+    background: var(--ac-surface);
+    color: var(--ac-text-secondary);
+    border: 1px solid var(--ac-border-muted);
+}
+
+.ac-badge-brand {
+    background: var(--ac-brand);
+    color: #fff;
+}

package/src/components/AcidBadge.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import clsx from 'clsx';
+import './AcidBadge.css';
+
+export interface AcidBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+    variant?: 'solid' | 'outline' | 'subtle' | 'brand';
+    size?: 'sm' | 'md' | 'lg';
+}
+
+export const AcidBadge = React.forwardRef<HTMLSpanElement, AcidBadgeProps>(
+    ({ className, variant = 'solid', size = 'md', children, ...props }, ref) => {
+        return (
+            <span
+                ref={ref}
+                className={clsx(
+                    'ac-badge',
+                    `ac-badge-${variant}`,
+                    `ac-badge-${size}`,
+                    className
+                )}
+                {...props}
+            >
+                {children}
+            </span>
+        );
+    }
+);

package/src/components/AcidBentoGrid.css

@@ -0,0 +1,98 @@
+.ac-bento-grid {
+    display: grid;
+    grid-template-columns: repeat(var(--bento-cols, 4), 1fr);
+    grid-auto-rows: minmax(160px, auto);
+    gap: 1.5rem;
+    width: 100%;
+}
+
+.ac-bento-item {
+    position: relative;
+    background: var(--ac-surface);
+    border: 1px solid var(--ac-border-muted);
+    border-radius: 12px;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.ac-bento-item:hover {
+    border-color: var(--ac-brand);
+    transform: translateY(-2px);
+    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
+}
+
+.ac-bento-content {
+    flex: 1;
+    position: relative;
+    overflow: hidden;
+}
+
+.ac-bento-footer {
+    padding: 1.25rem;
+    background: linear-gradient(to top, rgba(0, 0, 0, 0.4), transparent);
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    z-index: 1;
+}
+
+.ac-bento-icon {
+    color: var(--ac-brand);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.ac-bento-text {
+    display: flex;
+    flex-direction: column;
+}
+
+.ac-bento-title {
+    font-size: 0.875rem;
+    font-weight: 700;
+    margin: 0;
+    color: var(--ac-text-primary);
+    letter-spacing: 0.05em;
+}
+
+.ac-bento-desc {
+    font-size: 0.75rem;
+    margin: 4px 0 0 0;
+    color: var(--ac-text-muted);
+}
+
+.ac-bento-corner {
+    position: absolute;
+    top: -10px;
+    right: -10px;
+    width: 20px;
+    height: 20px;
+    background: var(--ac-brand);
+    transform: rotate(45deg);
+    opacity: 0;
+    transition: opacity 0.3s;
+}
+
+.ac-bento-item:hover .ac-bento-corner {
+    opacity: 0.5;
+}
+
+@media (max-width: 1024px) {
+    .ac-bento-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+@media (max-width: 640px) {
+    .ac-bento-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .ac-bento-item {
+        grid-column: span 1 !important;
+        grid-row: span 1 !important;
+    }
+}

package/src/components/AcidBentoGrid.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import clsx from 'clsx';
+import './AcidBentoGrid.css';
+
+export interface AcidBentoGridProps {
+    children: React.ReactNode;
+    className?: string;
+    cols?: number;
+}
+
+export const AcidBentoGrid = ({
+    children,
+    className,
+    cols = 4
+}: AcidBentoGridProps) => {
+    return (
+        <div
+            className={clsx('ac-bento-grid', className)}
+            style={{ '--bento-cols': cols } as React.CSSProperties}
+        >
+            {children}
+        </div>
+    );
+};
+
+export interface AcidBentoItemProps {
+    children?: React.ReactNode;
+    title?: string;
+    description?: string;
+    icon?: React.ReactNode;
+    className?: string;
+    colSpan?: number;
+    rowSpan?: number;
+}
+
+export const AcidBentoItem = ({
+    children,
+    title,
+    description,
+    icon,
+    className,
+    colSpan = 1,
+    rowSpan = 1
+}: AcidBentoItemProps) => {
+    return (
+        <div
+            className={clsx('ac-bento-item', className)}
+            style={{
+                gridColumn: `span ${colSpan}`,
+                gridRow: `span ${rowSpan}`
+            } as React.CSSProperties}
+        >
+            {children && (
+                <div className="ac-bento-content">
+                    {children}
+                </div>
+            )}
+            <div className="ac-bento-footer">
+                {icon && <div className="ac-bento-icon">{icon}</div>}
+                <div className="ac-bento-text">
+                    {title && <h3 className="ac-bento-title">{title}</h3>}
+                    {description && <p className="ac-bento-desc">{description}</p>}
+                </div>
+            </div>
+            <div className="ac-bento-corner" />
+        </div>
+    );
+};