@thangnqdev/ui 0.1.2 → 0.2.0

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';