@thangnqdev/ui 0.2.0 → 0.2.2

package/src/data-display/Avatar.tsx

@@ -1,134 +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';
+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

@@ -1,112 +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';
+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/Chip.tsx

@@ -1,74 +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';
+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';