@thangnqdev/ui 0.1.0

package/src/forms/FileUpload.tsx

@@ -0,0 +1,222 @@
+import React, { forwardRef, useState, useRef } from 'react';
+import { UploadCloud, File, FileText, Image as ImageIcon, X, CheckCircle2, AlertCircle } from 'lucide-react';
+import { cn } from '../utils/cn';
+import { ProgressBar } from '../feedback/ProgressBar';
+import { Button } from '../buttons/Button';
+
+export interface UploadedFile {
+  id: string;
+  file: File;
+  name: string;
+  size: number;
+  type: string;
+  progress?: number;
+  status?: 'pending' | 'uploading' | 'completed' | 'error';
+  previewUrl?: string;
+  errorMessage?: string;
+}
+
+export interface FileUploadProps {
+  accept?: string;
+  maxSizeMB?: number;
+  multiple?: boolean;
+  maxFiles?: number;
+  disabled?: boolean;
+  onFilesSelected?: (files: File[]) => void;
+  onFileRemove?: (fileId: string) => void;
+  className?: string;
+  label?: string;
+  description?: string;
+}
+
+export function formatFileSize(bytes: number): string {
+  if (bytes === 0) return '0 B';
+  const k = 1024;
+  const sizes = ['B', 'KB', 'MB', 'GB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(1))} ${sizes[i]}`;
+}
+
+export const FileUpload = forwardRef<HTMLDivElement, FileUploadProps>(
+  (
+    {
+      accept,
+      maxSizeMB = 10,
+      multiple = true,
+      maxFiles = 5,
+      disabled = false,
+      onFilesSelected,
+      onFileRemove,
+      className,
+      label = 'Drag & drop files here, or browse',
+      description = 'Supports images, documents, and media up to 10MB',
+    },
+    ref
+  ) => {
+    const [isDragOver, setIsDragOver] = useState(false);
+    const [fileList, setFileList] = useState<UploadedFile[]>([]);
+    const inputRef = useRef<HTMLInputElement | null>(null);
+
+    const processFiles = (incoming: FileList | null) => {
+      if (!incoming) return;
+
+      const validFiles: File[] = [];
+      const newUploaded: UploadedFile[] = [];
+
+      Array.from(incoming).forEach((file) => {
+        if (fileList.length + newUploaded.length >= maxFiles) return;
+
+        const isOversized = file.size > maxSizeMB * 1024 * 1024;
+        const fileObj: UploadedFile = {
+          id: `${file.name}-${Date.now()}-${Math.random()}`,
+          file,
+          name: file.name,
+          size: file.size,
+          type: file.type,
+          progress: isOversized ? 0 : 100,
+          status: isOversized ? 'error' : 'completed',
+          errorMessage: isOversized ? `File exceeds ${maxSizeMB}MB limit` : undefined,
+          previewUrl: file.type.startsWith('image/') ? URL.createObjectURL(file) : undefined,
+        };
+
+        newUploaded.push(fileObj);
+        if (!isOversized) validFiles.push(file);
+      });
+
+      setFileList((prev) => [...prev, ...newUploaded]);
+      if (validFiles.length > 0) {
+        onFilesSelected?.(validFiles);
+      }
+    };
+
+    const handleDragOver = (e: React.DragEvent) => {
+      e.preventDefault();
+      if (!disabled) setIsDragOver(true);
+    };
+
+    const handleDragLeave = (e: React.DragEvent) => {
+      e.preventDefault();
+      setIsDragOver(false);
+    };
+
+    const handleDrop = (e: React.DragEvent) => {
+      e.preventDefault();
+      setIsDragOver(false);
+      if (disabled) return;
+      processFiles(e.dataTransfer.files);
+    };
+
+    const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      processFiles(e.target.files);
+      if (inputRef.current) inputRef.current.value = '';
+    };
+
+    const removeFile = (id: string) => {
+      setFileList((prev) => prev.filter((f) => f.id !== id));
+      onFileRemove?.(id);
+    };
+
+    return (
+      <div ref={ref} className={cn('w-full space-y-4', className)}>
+        {/* Dropzone Box */}
+        <div
+          onDragOver={handleDragOver}
+          onDragLeave={handleDragLeave}
+          onDrop={handleDrop}
+          onClick={() => !disabled && inputRef.current?.click()}
+          className={cn(
+            'relative rounded-2xl p-6 sm:p-8 text-center border-2 border-dashed transition-all cursor-pointer flex flex-col items-center justify-center gap-3 select-none',
+            disabled
+              ? 'opacity-50 cursor-not-allowed border-[var(--ui-border-subtle)] bg-[var(--ui-bg-secondary)]/30'
+              : isDragOver
+              ? 'border-[var(--ui-primary)] bg-[var(--ui-primary)]/10 shadow-lg shadow-blue-500/20 scale-[0.99]'
+              : 'border-[var(--ui-border-default)] hover:border-[var(--ui-border-strong)] bg-[var(--ui-bg-surface)]/60 hover:bg-[var(--ui-bg-secondary)]'
+          )}
+        >
+          <input
+            ref={inputRef}
+            type="file"
+            accept={accept}
+            multiple={multiple}
+            disabled={disabled}
+            onChange={handleFileChange}
+            className="hidden"
+          />
+
+          <div className="w-12 h-12 rounded-2xl bg-[var(--ui-primary)]/15 text-[var(--ui-primary)] flex items-center justify-center shadow-inner">
+            <UploadCloud className="w-6 h-6" />
+          </div>
+
+          <div className="space-y-1">
+            <h4 className="text-sm font-bold text-[var(--ui-text-primary)]">{label}</h4>
+            <p className="text-xs text-[var(--ui-text-muted)]">{description}</p>
+          </div>
+
+          <Button size="xs" variant="outline" className="rounded-full px-4 mt-1 pointer-events-none">
+            Browse Files
+          </Button>
+        </div>
+
+        {/* Uploaded Files List */}
+        {fileList.length > 0 && (
+          <div className="space-y-2">
+            <span className="text-xs font-mono font-bold text-[var(--ui-text-muted)] uppercase tracking-wider">
+              Files ({fileList.length}/{maxFiles})
+            </span>
+
+            <div className="space-y-2">
+              {fileList.map((item) => (
+                <div
+                  key={item.id}
+                  className="p-3 rounded-2xl bg-[var(--ui-bg-surface)] border border-[var(--ui-border-default)] flex items-center justify-between gap-3 shadow-xs animate-in fade-in duration-200"
+                >
+                  <div className="flex items-center gap-3 truncate">
+                    {item.previewUrl ? (
+                      <img
+                        src={item.previewUrl}
+                        alt={item.name}
+                        className="w-10 h-10 rounded-xl object-cover border border-[var(--ui-border-subtle)] shrink-0"
+                      />
+                    ) : (
+                      <div className="w-10 h-10 rounded-xl bg-[var(--ui-bg-tertiary)] flex items-center justify-center text-[var(--ui-text-muted)] shrink-0">
+                        {item.type.includes('pdf') ? <FileText className="w-5 h-5" /> : <File className="w-5 h-5" />}
+                      </div>
+                    )}
+
+                    <div className="truncate space-y-0.5">
+                      <span className="text-xs font-semibold text-[var(--ui-text-primary)] block truncate">
+                        {item.name}
+                      </span>
+                      <div className="flex items-center gap-2 text-[11px] text-[var(--ui-text-muted)] font-mono">
+                        <span>{formatFileSize(item.size)}</span>
+                        {item.status === 'completed' && (
+                          <span className="text-emerald-500 font-semibold flex items-center gap-0.5">
+                            <CheckCircle2 className="w-3 h-3" /> Ready
+                          </span>
+                        )}
+                        {item.status === 'error' && (
+                          <span className="text-rose-500 font-semibold flex items-center gap-0.5">
+                            <AlertCircle className="w-3 h-3" /> {item.errorMessage}
+                          </span>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+
+                  <button
+                    type="button"
+                    onClick={() => removeFile(item.id)}
+                    className="p-1.5 rounded-full hover:bg-[var(--ui-bg-tertiary)] text-[var(--ui-text-muted)] hover:text-rose-500 transition-colors"
+                  >
+                    <X className="w-4 h-4" />
+                  </button>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+FileUpload.displayName = 'FileUpload';

package/src/forms/FormField.tsx

@@ -0,0 +1,115 @@
+import React, { createContext, useContext, useId, forwardRef } from 'react';
+import { cn } from '../utils/cn';
+import { Label, LabelProps } from '../typography/Label';
+
+interface FormFieldContextValue {
+  id: string;
+  labelId: string;
+  descriptionId: string;
+  errorId: string;
+  isRequired?: boolean;
+  isInvalid?: boolean;
+  isDisabled?: boolean;
+}
+
+const FormFieldContext = createContext<FormFieldContextValue | null>(null);
+
+export function useFormField() {
+  const context = useContext(FormFieldContext);
+  return context;
+}
+
+export interface FormFieldProps extends React.HTMLAttributes<HTMLDivElement> {
+  isRequired?: boolean;
+  isInvalid?: boolean;
+  isDisabled?: boolean;
+}
+
+export const FormField = forwardRef<HTMLDivElement, FormFieldProps>(
+  ({ className, isRequired, isInvalid, isDisabled, children, ...props }, ref) => {
+    const generatedId = useId();
+    const id = props.id || generatedId;
+    const labelId = `${id}-label`;
+    const descriptionId = `${id}-description`;
+    const errorId = `${id}-error`;
+
+    return (
+      <FormFieldContext.Provider
+        value={{
+          id,
+          labelId,
+          descriptionId,
+          errorId,
+          isRequired,
+          isInvalid,
+          isDisabled,
+        }}
+      >
+        <div ref={ref} className={cn('space-y-1.5 w-full', className)} {...props}>
+          {children}
+        </div>
+      </FormFieldContext.Provider>
+    );
+  }
+);
+FormField.displayName = 'FormField';
+
+export const FormLabel = forwardRef<HTMLLabelElement, LabelProps>(
+  ({ className, required, children, ...props }, ref) => {
+    const context = useFormField();
+    const isRequired = required ?? context?.isRequired;
+    const isError = context?.isInvalid;
+
+    return (
+      <Label
+        ref={ref}
+        id={context?.labelId}
+        htmlFor={context?.id}
+        required={isRequired}
+        error={isError}
+        className={className}
+        {...props}
+      >
+        {children}
+      </Label>
+    );
+  }
+);
+FormLabel.displayName = 'FormLabel';
+
+export const FormHelperText = forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, children, ...props }, ref) => {
+    const context = useFormField();
+    return (
+      <p
+        ref={ref}
+        id={context?.descriptionId}
+        className={cn('text-xs text-[var(--ui-text-muted)]', className)}
+        {...props}
+      >
+        {children}
+      </p>
+    );
+  }
+);
+FormHelperText.displayName = 'FormHelperText';
+
+export const FormErrorMessage = forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, children, ...props }, ref) => {
+    const context = useFormField();
+    if (!context?.isInvalid && !children) return null;
+
+    return (
+      <p
+        ref={ref}
+        id={context?.errorId}
+        role="alert"
+        className={cn('text-xs font-medium text-[var(--ui-error)]', className)}
+        {...props}
+      >
+        {children}
+      </p>
+    );
+  }
+);
+FormErrorMessage.displayName = 'FormErrorMessage';

package/src/forms/Input.tsx

@@ -0,0 +1,151 @@
+import React, { forwardRef, useState } from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { X } from 'lucide-react';
+import { useFormField } from './FormField';
+import { cn } from '../utils/cn';
+
+export const inputVariants = cva(
+  'w-full rounded-[var(--ui-radius-md)] border bg-[var(--ui-bg-surface)]/70 backdrop-blur-md text-[var(--ui-text-primary)] placeholder:text-[var(--ui-text-muted)] transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary)]/70 focus-visible:border-[var(--ui-primary)] focus-visible:shadow-[0_0_16px_rgba(99,102,241,0.2)] disabled:cursor-not-allowed disabled:opacity-50 shadow-inner',
+  {
+    variants: {
+      size: {
+        sm: 'h-8 px-2.5 text-xs',
+        md: 'h-10 px-3.5 text-sm',
+        lg: 'h-12 px-4 text-base',
+      },
+      variant: {
+        default: 'border-[var(--ui-border-default)] hover:border-[var(--ui-border-strong)]',
+        filled: 'bg-[var(--ui-bg-secondary)] border-transparent hover:bg-[var(--ui-bg-tertiary)]',
+      },
+      isInvalid: {
+        true: 'border-[var(--ui-error)] focus-visible:ring-[var(--ui-error)]/70 focus-visible:shadow-[0_0_16px_rgba(244,63,94,0.25)]',
+        false: '',
+      },
+    },
+    defaultVariants: {
+      size: 'md',
+      variant: 'default',
+      isInvalid: false,
+    },
+  }
+);
+
+export interface InputProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>,
+    VariantProps<typeof inputVariants> {
+  prefixIcon?: React.ReactNode;
+  suffixIcon?: React.ReactNode;
+  clearable?: boolean;
+  onClear?: () => void;
+}
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(
+  (
+    {
+      className,
+      type = 'text',
+      size,
+      variant,
+      isInvalid: customInvalid,
+      prefixIcon,
+      suffixIcon,
+      clearable,
+      onClear,
+      value,
+      onChange,
+      disabled,
+      id,
+      ...props
+    },
+    ref
+  ) => {
+    const formField = useFormField();
+    const isInvalid = customInvalid ?? formField?.isInvalid ?? false;
+    const isDisabled = disabled ?? formField?.isDisabled ?? false;
+    const inputId = id || formField?.id;
+
+    const isControlled = value !== undefined;
+    const [uncontrolledVal, setUncontrolledVal] = useState(
+      props.defaultValue !== undefined ? String(props.defaultValue) : ''
+    );
+    const innerRef = React.useRef<HTMLInputElement | null>(null);
+
+    const handleRef = (node: HTMLInputElement | null) => {
+      innerRef.current = node;
+      if (typeof ref === 'function') {
+        ref(node);
+      } else if (ref) {
+        (ref as React.MutableRefObject<HTMLInputElement | null>).current = node;
+      }
+    };
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (!isControlled) {
+        setUncontrolledVal(e.target.value);
+      }
+      onChange?.(e);
+    };
+
+    const handleClear = () => {
+      if (!isControlled && innerRef.current) {
+        innerRef.current.value = '';
+        setUncontrolledVal('');
+        const event = new Event('input', { bubbles: true });
+        innerRef.current.dispatchEvent(event);
+      }
+      onClear?.();
+    };
+
+    const hasValue = isControlled
+      ? Boolean(value)
+      : Boolean(uncontrolledVal || innerRef.current?.value);
+
+    return (
+      <div className="relative w-full flex items-center">
+        {prefixIcon && (
+          <div className="absolute left-3 flex items-center pointer-events-none text-[var(--ui-text-muted)]">
+            {prefixIcon}
+          </div>
+        )}
+
+        <input
+          ref={handleRef}
+          id={inputId}
+          type={type}
+          disabled={isDisabled}
+          {...(isControlled ? { value } : {})}
+          onChange={handleChange}
+          aria-invalid={isInvalid}
+          aria-describedby={
+            isInvalid
+              ? formField?.errorId
+              : formField?.descriptionId || undefined
+          }
+          className={cn(
+            inputVariants({ size, variant, isInvalid }),
+            prefixIcon && 'pl-9',
+            (suffixIcon || (clearable && hasValue)) && 'pr-9',
+            className
+          )}
+          {...props}
+        />
+
+        <div className="absolute right-3 flex items-center gap-1 text-[var(--ui-text-muted)]">
+          {clearable && hasValue && !isDisabled && (
+            <button
+              type="button"
+              onClick={handleClear}
+              className="p-0.5 rounded-full hover:bg-[var(--ui-bg-tertiary)] hover:text-[var(--ui-text-primary)] transition-colors"
+              aria-label="Clear input"
+            >
+              <X className="w-3.5 h-3.5" />
+            </button>
+          )}
+          {suffixIcon && <span className="pointer-events-none flex items-center">{suffixIcon}</span>}
+        </div>
+      </div>
+    );
+  }
+);
+
+Input.displayName = 'Input';

package/src/forms/MaskedInput.tsx

@@ -0,0 +1,97 @@
+import React, { forwardRef, useState, useEffect } from 'react';
+import { cn } from '../utils/cn';
+
+export interface MaskedInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'defaultValue'> {
+  mask: string; // e.g. '(###) ###-####' or '#### #### #### ####'
+  maskChar?: string; // default '#'
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (unmasked: string, formatted: string) => void;
+  prefixIcon?: React.ReactNode;
+  suffixIcon?: React.ReactNode;
+}
+
+export function applyMask(rawVal: string, mask: string, maskChar = '#'): { formatted: string; unmasked: string } {
+  const digitsOnly = rawVal.replace(/\D/g, '');
+  if (!digitsOnly) return { formatted: '', unmasked: '' };
+  let formatted = '';
+  let digitIndex = 0;
+
+  for (let i = 0; i < mask.length; i++) {
+    const char = mask[i];
+    if (char === maskChar) {
+      if (digitIndex < digitsOnly.length) {
+        formatted += digitsOnly[digitIndex++];
+      } else {
+        break;
+      }
+    } else {
+      if (digitIndex < digitsOnly.length) {
+        formatted += char;
+      }
+    }
+  }
+
+  return { formatted, unmasked: digitsOnly };
+}
+
+export const MaskedInput = forwardRef<HTMLInputElement, MaskedInputProps>(
+  (
+    {
+      mask,
+      maskChar = '#',
+      value: controlledVal,
+      defaultValue = '',
+      onValueChange,
+      prefixIcon,
+      suffixIcon,
+      disabled = false,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const [internalVal, setInternalVal] = useState<string>(
+      applyMask(defaultValue, mask, maskChar).formatted
+    );
+    const displayValue = controlledVal !== undefined ? applyMask(controlledVal, mask, maskChar).formatted : internalVal;
+
+    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      const { formatted, unmasked } = applyMask(e.target.value, mask, maskChar);
+      setInternalVal(formatted);
+      onValueChange?.(unmasked, formatted);
+    };
+
+    return (
+      <div className={cn('relative w-full flex items-center', className)}>
+        {prefixIcon && (
+          <div className="absolute left-3.5 flex items-center pointer-events-none text-[var(--ui-text-muted)]">
+            {prefixIcon}
+          </div>
+        )}
+
+        <input
+          ref={ref}
+          type="text"
+          value={displayValue}
+          disabled={disabled}
+          onChange={handleInputChange}
+          className={cn(
+            'w-full h-10 rounded-[var(--ui-radius-md)] border border-[var(--ui-border-default)] hover:border-[var(--ui-border-strong)] bg-[var(--ui-bg-surface)] px-3.5 font-mono text-sm text-[var(--ui-text-primary)] transition-all shadow-inner focus:outline-none focus:ring-2 focus:ring-[var(--ui-primary)]/50',
+            prefixIcon && 'pl-9',
+            suffixIcon && 'pr-9',
+            disabled && 'opacity-50 cursor-not-allowed'
+          )}
+          {...props}
+        />
+
+        {suffixIcon && (
+          <div className="absolute right-3.5 flex items-center pointer-events-none text-[var(--ui-text-muted)]">
+            {suffixIcon}
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+MaskedInput.displayName = 'MaskedInput';