@thangnqdev/ui 0.1.0

package/src/data-display/Avatar.tsx

@@ -0,0 +1,134 @@
+import React, { forwardRef, useState } from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../utils/cn';
+
+export const avatarVariants = cva(
+  'relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-[var(--ui-bg-tertiary)] select-none border border-[var(--ui-border-subtle)]',
+  {
+    variants: {
+      size: {
+        xs: 'h-6 w-6 text-[10px]',
+        sm: 'h-8 w-8 text-xs',
+        md: 'h-10 w-10 text-sm font-semibold',
+        lg: 'h-12 w-12 text-base font-semibold',
+        xl: 'h-16 w-16 text-lg font-bold',
+      },
+    },
+    defaultVariants: {
+      size: 'md',
+    },
+  }
+);
+
+export const statusVariants = cva(
+  'absolute bottom-0 right-0 rounded-full ring-2 ring-[var(--ui-bg-surface)]',
+  {
+    variants: {
+      status: {
+        online: 'bg-[var(--ui-success)]',
+        offline: 'bg-[var(--ui-text-muted)]',
+        busy: 'bg-[var(--ui-error)]',
+        away: 'bg-[var(--ui-warning)]',
+      },
+      size: {
+        xs: 'h-1.5 w-1.5',
+        sm: 'h-2 w-2',
+        md: 'h-2.5 w-2.5',
+        lg: 'h-3 w-3',
+        xl: 'h-4 w-4',
+      },
+    },
+    defaultVariants: {
+      status: 'online',
+      size: 'md',
+    },
+  }
+);
+
+export interface AvatarProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof avatarVariants> {
+  src?: string;
+  alt?: string;
+  name?: string;
+  status?: 'online' | 'offline' | 'busy' | 'away';
+}
+
+export const Avatar = forwardRef<HTMLDivElement, AvatarProps>(
+  ({ className, size = 'md', src, alt, name, status, children, ...props }, ref) => {
+    const [hasError, setHasError] = useState(false);
+
+    const getInitials = (n?: string) => {
+      if (!n) return '';
+      const parts = n.trim().split(' ');
+      if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
+      return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+    };
+
+    const initials = name ? getInitials(name) : '';
+
+    return (
+      <div ref={ref} className={cn(avatarVariants({ size }), className)} {...props}>
+        {src && !hasError ? (
+          <img
+            src={src}
+            alt={alt || name || 'Avatar'}
+            onError={() => setHasError(true)}
+            className="h-full w-full object-cover"
+          />
+        ) : initials ? (
+          <span className="font-semibold text-[var(--ui-text-secondary)]">{initials}</span>
+        ) : (
+          children || <span className="font-semibold text-[var(--ui-text-muted)]">?</span>
+        )}
+
+        {status && (
+          <span
+            aria-label={`Status: ${status}`}
+            className={cn(statusVariants({ status, size }))}
+          />
+        )}
+      </div>
+    );
+  }
+);
+Avatar.displayName = 'Avatar';
+
+export interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+  max?: number;
+  spacing?: 'tight' | 'normal';
+}
+
+export const AvatarGroup = forwardRef<HTMLDivElement, AvatarGroupProps>(
+  ({ className, max = 4, spacing = 'tight', children, ...props }, ref) => {
+    const childArray = React.Children.toArray(children);
+    const visibleChildren = childArray.slice(0, max);
+    const remainingCount = childArray.length - max;
+
+    return (
+      <div
+        ref={ref}
+        role="group"
+        className={cn(
+          'flex items-center',
+          spacing === 'tight' ? '-space-x-3' : '-space-x-1.5',
+          className
+        )}
+        {...props}
+      >
+        {visibleChildren.map((child, i) => (
+          <div key={i} className="ring-2 ring-[var(--ui-bg-surface)] rounded-full">
+            {child}
+          </div>
+        ))}
+
+        {remainingCount > 0 && (
+          <div className="relative inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-[var(--ui-bg-secondary)] border border-[var(--ui-border-default)] ring-2 ring-[var(--ui-bg-surface)] text-xs font-bold text-[var(--ui-text-secondary)] select-none">
+            +{remainingCount}
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+AvatarGroup.displayName = 'AvatarGroup';

package/src/data-display/Card.tsx

@@ -0,0 +1,112 @@
+import React, { forwardRef } from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../utils/cn';
+
+export const cardVariants = cva(
+  'relative overflow-hidden rounded-[var(--ui-radius-xl)] transition-all duration-200 border',
+  {
+    variants: {
+      variant: {
+        default:
+          'bg-[var(--ui-bg-surface)] backdrop-blur-xl border-[var(--ui-border-default)] shadow-[var(--ui-shadow-md)] text-[var(--ui-text-primary)]',
+        bordered:
+          'bg-transparent border-[var(--ui-border-strong)] text-[var(--ui-text-primary)]',
+        elevated:
+          'bg-[var(--ui-bg-surface)] backdrop-blur-2xl border-[var(--ui-border-default)] shadow-[var(--ui-shadow-xl)] hover:shadow-2xl text-[var(--ui-text-primary)]',
+        interactive:
+          'bg-[var(--ui-bg-surface)] backdrop-blur-xl border-[var(--ui-border-default)] shadow-[var(--ui-shadow-md)] hover:border-[var(--ui-primary)] cursor-pointer hover:-translate-y-1 hover:shadow-[0_12px_32px_rgba(99,102,241,0.15)] text-[var(--ui-text-primary)] active:translate-y-0',
+        glow:
+          'bg-[var(--ui-bg-surface)] backdrop-blur-xl border-indigo-500/30 shadow-[0_0_30px_rgba(99,102,241,0.12)] text-[var(--ui-text-primary)]',
+      },
+      padding: {
+        none: 'p-0',
+        sm: 'p-4 sm:p-5',
+        md: 'p-6 sm:p-7',
+        lg: 'p-8 sm:p-10',
+      },
+      specular: {
+        true: 'before:absolute before:inset-x-0 before:top-0 before:h-px before:bg-gradient-to-r before:from-transparent before:via-white/30 before:to-transparent before:pointer-events-none',
+        false: '',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      padding: 'md',
+      specular: true,
+    },
+  }
+);
+
+export interface CardProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof cardVariants> {}
+
+export const Card = forwardRef<HTMLDivElement, CardProps>(
+  ({ className, variant, padding, specular = true, children, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(cardVariants({ variant, padding, specular }), className)}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+Card.displayName = 'Card';
+
+export const CardHeader = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <div ref={ref} className={cn('flex flex-col space-y-1.5 mb-5', className)} {...props}>
+        {children}
+      </div>
+    );
+  }
+);
+CardHeader.displayName = 'CardHeader';
+
+export const CardTitle = forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <h3 ref={ref} className={cn('text-lg sm:text-xl font-bold tracking-tight text-[var(--ui-text-primary)]', className)} {...props}>
+        {children}
+      </h3>
+    );
+  }
+);
+CardTitle.displayName = 'CardTitle';
+
+export const CardDescription = forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <p ref={ref} className={cn('text-xs sm:text-sm text-[var(--ui-text-muted)] font-normal leading-relaxed', className)} {...props}>
+        {children}
+      </p>
+    );
+  }
+);
+CardDescription.displayName = 'CardDescription';
+
+export const CardContent = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <div ref={ref} className={cn('pt-0', className)} {...props}>
+        {children}
+      </div>
+    );
+  }
+);
+CardContent.displayName = 'CardContent';
+
+export const CardFooter = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <div ref={ref} className={cn('flex items-center pt-4 mt-5 border-t border-[var(--ui-border-subtle)]', className)} {...props}>
+        {children}
+      </div>
+    );
+  }
+);
+CardFooter.displayName = 'CardFooter';

package/src/data-display/Carousel.tsx

@@ -0,0 +1,130 @@
+import React, { useState, useEffect, useRef, forwardRef } from 'react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { cn } from '../utils/cn';
+
+export interface CarouselProps extends React.HTMLAttributes<HTMLDivElement> {
+  autoplay?: boolean;
+  autoplayInterval?: number;
+  loop?: boolean;
+  showArrows?: boolean;
+  showDots?: boolean;
+  children: React.ReactNode[];
+}
+
+export const Carousel = forwardRef<HTMLDivElement, CarouselProps>(
+  (
+    {
+      autoplay = false,
+      autoplayInterval = 4000,
+      loop = true,
+      showArrows = true,
+      showDots = true,
+      children,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const [currentIndex, setCurrentIndex] = useState(0);
+    const totalSlides = React.Children.count(children);
+    const timerRef = useRef<any>(null);
+
+    const nextSlide = () => {
+      setCurrentIndex((prev) => {
+        if (prev === totalSlides - 1) {
+          return loop ? 0 : prev;
+        }
+        return prev + 1;
+      });
+    };
+
+    const prevSlide = () => {
+      setCurrentIndex((prev) => {
+        if (prev === 0) {
+          return loop ? totalSlides - 1 : prev;
+        }
+        return prev - 1;
+      });
+    };
+
+    useEffect(() => {
+      if (autoplay && totalSlides > 1) {
+        timerRef.current = setInterval(nextSlide, autoplayInterval);
+        return () => clearInterval(timerRef.current);
+      }
+    }, [autoplay, autoplayInterval, totalSlides, currentIndex]);
+
+    return (
+      <div
+        ref={ref}
+        onMouseEnter={() => autoplay && clearInterval(timerRef.current)}
+        onMouseLeave={() => {
+          if (autoplay && totalSlides > 1) {
+            timerRef.current = setInterval(nextSlide, autoplayInterval);
+          }
+        }}
+        className={cn('relative w-full overflow-hidden rounded-3xl group', className)}
+        {...props}
+      >
+        {/* Slides Track */}
+        <div
+          className="flex transition-transform duration-500 ease-out"
+          style={{ transform: `translateX(-${currentIndex * 100}%)` }}
+        >
+          {React.Children.map(children, (child, idx) => (
+            <div key={idx} className="w-full flex-shrink-0">
+              {child}
+            </div>
+          ))}
+        </div>
+
+        {/* Previous Button */}
+        {showArrows && totalSlides > 1 && (
+          <button
+            type="button"
+            onClick={prevSlide}
+            disabled={!loop && currentIndex === 0}
+            className="absolute left-3 top-1/2 -translate-y-1/2 w-9 h-9 rounded-full bg-[var(--ui-bg-surface)]/80 hover:bg-[var(--ui-bg-surface)] backdrop-blur-xl border border-[var(--ui-border-default)] shadow-lg flex items-center justify-center text-[var(--ui-text-primary)] opacity-0 group-hover:opacity-100 transition-all disabled:opacity-0 cursor-pointer"
+            aria-label="Previous Slide"
+          >
+            <ChevronLeft className="w-5 h-5" />
+          </button>
+        )}
+
+        {/* Next Button */}
+        {showArrows && totalSlides > 1 && (
+          <button
+            type="button"
+            onClick={nextSlide}
+            disabled={!loop && currentIndex === totalSlides - 1}
+            className="absolute right-3 top-1/2 -translate-y-1/2 w-9 h-9 rounded-full bg-[var(--ui-bg-surface)]/80 hover:bg-[var(--ui-bg-surface)] backdrop-blur-xl border border-[var(--ui-border-default)] shadow-lg flex items-center justify-center text-[var(--ui-text-primary)] opacity-0 group-hover:opacity-100 transition-all disabled:opacity-0 cursor-pointer"
+            aria-label="Next Slide"
+          >
+            <ChevronRight className="w-5 h-5" />
+          </button>
+        )}
+
+        {/* Dots Pagination */}
+        {showDots && totalSlides > 1 && (
+          <div className="absolute bottom-4 inset-x-0 flex items-center justify-center gap-1.5 pointer-events-auto">
+            {Array.from({ length: totalSlides }).map((_, idx) => (
+              <button
+                key={idx}
+                type="button"
+                onClick={() => setCurrentIndex(idx)}
+                className={cn(
+                  'h-2 rounded-full transition-all cursor-pointer shadow-xs',
+                  currentIndex === idx
+                    ? 'w-6 bg-[var(--ui-primary)]'
+                    : 'w-2 bg-white/40 dark:bg-white/30 hover:bg-white/60'
+                )}
+                aria-label={`Go to slide ${idx + 1}`}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+Carousel.displayName = 'Carousel';

package/src/data-display/Chip.tsx

@@ -0,0 +1,74 @@
+import React, { forwardRef } from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { X } from 'lucide-react';
+import { cn } from '../utils/cn';
+
+export const chipVariants = cva(
+  'inline-flex items-center gap-1.5 rounded-full font-medium transition-colors select-none',
+  {
+    variants: {
+      variant: {
+        default: 'bg-[var(--ui-bg-tertiary)] text-[var(--ui-text-primary)] border border-[var(--ui-border-default)]',
+        primary: 'bg-[var(--ui-primary)]/15 text-[var(--ui-primary)] border border-[var(--ui-primary)]/30',
+        secondary: 'bg-[var(--ui-secondary)]/15 text-[var(--ui-secondary)] border border-[var(--ui-secondary)]/30',
+        success: 'bg-[var(--ui-success-subtle)] text-[var(--ui-success)] border border-[var(--ui-success)]/30',
+        warning: 'bg-[var(--ui-warning-subtle)] text-[var(--ui-warning)] border border-[var(--ui-warning)]/30',
+        error: 'bg-[var(--ui-error-subtle)] text-[var(--ui-error)] border border-[var(--ui-error)]/30',
+      },
+      size: {
+        sm: 'h-6 px-2.5 text-xs',
+        md: 'h-7 px-3 text-xs',
+        lg: 'h-8 px-3.5 text-sm',
+      },
+      clickable: {
+        true: 'cursor-pointer hover:opacity-80 active:scale-95',
+        false: '',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'md',
+      clickable: false,
+    },
+  }
+);
+
+export interface ChipProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof chipVariants> {
+  onRemove?: () => void;
+  icon?: React.ReactNode;
+}
+
+export const Chip = forwardRef<HTMLDivElement, ChipProps>(
+  ({ className, variant, size, clickable, onRemove, icon, children, onClick, ...props }, ref) => {
+    const isClickable = Boolean(clickable || onClick);
+
+    return (
+      <div
+        ref={ref}
+        onClick={onClick}
+        className={cn(chipVariants({ variant, size, clickable: isClickable }), className)}
+        {...props}
+      >
+        {icon && <span className="flex-shrink-0">{icon}</span>}
+        <span>{children}</span>
+        {onRemove && (
+          <button
+            type="button"
+            onClick={(e) => {
+              e.stopPropagation();
+              onRemove();
+            }}
+            aria-label="Remove chip"
+            className="p-0.5 rounded-full hover:bg-black/10 dark:hover:bg-white/10 transition-colors -mr-1"
+          >
+            <X className="w-3 h-3" />
+          </button>
+        )}
+      </div>
+    );
+  }
+);
+
+Chip.displayName = 'Chip';