@thangnqdev/ui 0.1.0

package/src/data-display/index.ts

@@ -0,0 +1,10 @@
+export * from './Card';
+export * from './Table';
+export * from './Avatar';
+export * from './Accordion';
+export * from './Chip';
+export * from './StatCard';
+export * from './Timeline';
+export * from './DataTablePro';
+export * from './TreeView';
+export * from './Carousel';

package/src/data-display/tokens.css

@@ -0,0 +1,4 @@
+/* Data Display Tokens */
+:root {
+  --ui-avatar-ring-width: 2px;
+}

package/src/feedback/Alert.tsx

@@ -0,0 +1,80 @@
+import React, { forwardRef } from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { CheckCircle2, AlertTriangle, AlertCircle, Info, X } from 'lucide-react';
+import { cn } from '../utils/cn';
+
+export const alertVariants = cva(
+  'relative w-full rounded-[var(--ui-radius-lg)] border p-4 text-sm flex items-start gap-3.5 shadow-sm',
+  {
+    variants: {
+      status: {
+        info: 'bg-[var(--ui-info-subtle)] border-[var(--ui-info)]/30 text-[var(--ui-text-primary)] [&>svg]:text-[var(--ui-info)]',
+        success: 'bg-[var(--ui-success-subtle)] border-[var(--ui-success)]/30 text-[var(--ui-text-primary)] [&>svg]:text-[var(--ui-success)]',
+        warning: 'bg-[var(--ui-warning-subtle)] border-[var(--ui-warning)]/30 text-[var(--ui-text-primary)] [&>svg]:text-[var(--ui-warning)]',
+        error: 'bg-[var(--ui-error-subtle)] border-[var(--ui-error)]/30 text-[var(--ui-text-primary)] [&>svg]:text-[var(--ui-error)]',
+      },
+    },
+    defaultVariants: {
+      status: 'info',
+    },
+  }
+);
+
+const statusIcons = {
+  info: <Info className="w-5 h-5 flex-shrink-0" />,
+  success: <CheckCircle2 className="w-5 h-5 flex-shrink-0" />,
+  warning: <AlertTriangle className="w-5 h-5 flex-shrink-0" />,
+  error: <AlertCircle className="w-5 h-5 flex-shrink-0" />,
+};
+
+export interface AlertProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof alertVariants> {
+  icon?: React.ReactNode;
+  onClose?: () => void;
+}
+
+export const Alert = forwardRef<HTMLDivElement, AlertProps>(
+  ({ className, status = 'info', icon, onClose, children, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        role="alert"
+        className={cn(alertVariants({ status }), className)}
+        {...props}
+      >
+        {icon !== undefined ? icon : statusIcons[status || 'info']}
+        <div className="flex-1 space-y-1">{children}</div>
+        {onClose && (
+          <button
+            type="button"
+            onClick={onClose}
+            aria-label="Dismiss alert"
+            className="p-1 rounded text-[var(--ui-text-muted)] hover:text-[var(--ui-text-primary)] hover:bg-black/5 dark:hover:bg-white/5 transition-colors -mr-1 -mt-1"
+          >
+            <X className="w-4 h-4" />
+          </button>
+        )}
+      </div>
+    );
+  }
+);
+Alert.displayName = 'Alert';
+
+export const AlertTitle = forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, children, ...props }, ref) => (
+    <h5 ref={ref} className={cn('font-semibold leading-none tracking-tight text-[var(--ui-text-primary)]', className)} {...props}>
+      {children}
+    </h5>
+  )
+);
+AlertTitle.displayName = 'AlertTitle';
+
+export const AlertDescription = forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, children, ...props }, ref) => (
+    <p ref={ref} className={cn('text-xs text-[var(--ui-text-secondary)] leading-relaxed', className)} {...props}>
+      {children}
+    </p>
+  )
+);
+AlertDescription.displayName = 'AlertDescription';

package/src/feedback/EmptyState.tsx

@@ -0,0 +1,45 @@
+import React, { forwardRef } from 'react';
+import { Inbox } from 'lucide-react';
+import { cn } from '../utils/cn';
+
+export interface EmptyStateProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+  icon?: React.ReactNode;
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  action?: React.ReactNode;
+}
+
+export const EmptyState = forwardRef<HTMLDivElement, EmptyStateProps>(
+  ({ className, icon, title, description, action, children, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          'flex flex-col items-center justify-center p-8 sm:p-12 text-center rounded-[var(--ui-radius-xl)] border border-dashed border-[var(--ui-border-default)] bg-[var(--ui-bg-secondary)]/50',
+          className
+        )}
+        {...props}
+      >
+        <div className="flex items-center justify-center w-14 h-14 rounded-full bg-[var(--ui-bg-tertiary)] text-[var(--ui-text-muted)] mb-4">
+          {icon || <Inbox className="w-7 h-7 stroke-[1.5]" />}
+        </div>
+
+        <h3 className="text-base sm:text-lg font-bold text-[var(--ui-text-primary)] mb-1">
+          {title}
+        </h3>
+
+        {description && (
+          <p className="text-xs sm:text-sm text-[var(--ui-text-muted)] max-w-sm mb-6 leading-relaxed">
+            {description}
+          </p>
+        )}
+
+        {action && <div className="inline-flex items-center gap-3">{action}</div>}
+
+        {children}
+      </div>
+    );
+  }
+);
+
+EmptyState.displayName = 'EmptyState';

package/src/feedback/ProgressBar.tsx

@@ -0,0 +1,174 @@
+import React, { forwardRef, useId } from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../utils/cn';
+
+export const progressVariants = cva('w-full overflow-hidden rounded-full bg-[var(--ui-bg-tertiary)]', {
+  variants: {
+    size: {
+      sm: 'h-1.5',
+      md: 'h-2.5',
+      lg: 'h-4',
+    },
+    variant: {
+      primary: '[&>div]:bg-[var(--ui-primary)]',
+      secondary: '[&>div]:bg-[var(--ui-secondary)]',
+      success: '[&>div]:bg-[var(--ui-success)]',
+      warning: '[&>div]:bg-[var(--ui-warning)]',
+      error: '[&>div]:bg-[var(--ui-error)]',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+    variant: 'primary',
+  },
+});
+
+export interface ProgressBarProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof progressVariants> {
+  value: number;
+  max?: number;
+  showValue?: boolean;
+  striped?: boolean;
+}
+
+export const ProgressBar = forwardRef<HTMLDivElement, ProgressBarProps>(
+  ({ className, size, variant, value, max = 100, showValue = false, striped = false, ...props }, ref) => {
+    const percentage = Math.min(100, Math.max(0, (value / max) * 100));
+
+    return (
+      <div className="w-full space-y-1">
+        {showValue && (
+          <div className="flex justify-between text-xs font-semibold text-[var(--ui-text-muted)] font-mono">
+            <span>Progress</span>
+            <span>{Math.round(percentage)}%</span>
+          </div>
+        )}
+        <div
+          ref={ref}
+          role="progressbar"
+          aria-valuenow={value}
+          aria-valuemin={0}
+          aria-valuemax={max}
+          className={cn(progressVariants({ size, variant }), className)}
+          {...props}
+        >
+          <div
+            className={cn(
+              'h-full transition-all duration-300 ease-out rounded-full',
+              striped && 'bg-[length:1rem_1rem] bg-gradient-to-r from-transparent via-white/20 to-transparent animate-pulse'
+            )}
+            style={{ width: `${percentage}%` }}
+          />
+        </div>
+      </div>
+    );
+  }
+);
+ProgressBar.displayName = 'ProgressBar';
+
+export interface CircularProgressProps extends React.SVGAttributes<SVGSVGElement> {
+  value: number;
+  max?: number;
+  size?: number;
+  strokeWidth?: number;
+  showValue?: boolean;
+  variant?: 'primary' | 'success' | 'warning' | 'error' | 'purple' | 'cyan';
+  trackColor?: string;
+  glow?: boolean;
+}
+
+export const CircularProgress = forwardRef<SVGSVGElement, CircularProgressProps>(
+  (
+    {
+      className,
+      value,
+      max = 100,
+      size = 64,
+      strokeWidth = 6,
+      showValue = true,
+      variant = 'primary',
+      trackColor,
+      glow = false,
+      ...props
+    },
+    ref
+  ) => {
+    const gradId = useId().replace(/:/g, '');
+    const radius = (size - strokeWidth) / 2;
+    const circumference = radius * 2 * Math.PI;
+    const percentage = Math.min(100, Math.max(0, (value / max) * 100));
+    const strokeDashoffset = circumference - (percentage / 100) * circumference;
+
+    const gradients: Record<string, [string, string]> = {
+      primary: ['#0071e3', '#2997ff'],
+      success: ['#34c759', '#30d158'],
+      warning: ['#ff9f0a', '#ffd60a'],
+      error: ['#ff3b30', '#ff453a'],
+      purple: ['#af52de', '#bf5af2'],
+      cyan: ['#00c7be', '#30b0c7'],
+    };
+
+    const [startColor, endColor] = gradients[variant] || gradients.primary;
+
+    return (
+      <div
+        className={cn('relative inline-flex items-center justify-center select-none', glow && 'drop-shadow-md')}
+        style={{ width: size, height: size }}
+      >
+        <svg
+          ref={ref}
+          width={size}
+          height={size}
+          viewBox={`0 0 ${size} ${size}`}
+          className={cn('-rotate-90', className)}
+          {...props}
+        >
+          <defs>
+            <linearGradient id={`circle-grad-${gradId}`} x1="0%" y1="0%" x2="100%" y2="100%">
+              <stop offset="0%" stopColor={startColor} />
+              <stop offset="100%" stopColor={endColor} />
+            </linearGradient>
+          </defs>
+
+          {/* Apple Background track */}
+          <circle
+            cx={size / 2}
+            cy={size / 2}
+            r={radius}
+            stroke={trackColor || 'currentColor'}
+            strokeWidth={strokeWidth}
+            fill="none"
+            className="text-[var(--ui-border-default)]/40 dark:text-white/10 opacity-70"
+          />
+
+          {/* Apple Progress gradient stroke */}
+          <circle
+            cx={size / 2}
+            cy={size / 2}
+            r={radius}
+            stroke={`url(#circle-grad-${gradId})`}
+            strokeWidth={strokeWidth}
+            strokeDasharray={circumference}
+            strokeDashoffset={strokeDashoffset}
+            strokeLinecap="round"
+            fill="none"
+            className="transition-all duration-500 ease-out"
+          />
+        </svg>
+
+        {showValue && (
+          <div className="absolute inset-0 flex items-center justify-center leading-none">
+            <span
+              className="font-sans font-extrabold tracking-tight text-[var(--ui-text-primary)]"
+              style={{ fontSize: `${Math.max(10, Math.round(size * 0.23))}px` }}
+            >
+              {Math.round(percentage)}%
+            </span>
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+CircularProgress.displayName = 'CircularProgress';

package/src/feedback/Skeleton.tsx

@@ -0,0 +1,66 @@
+import React, { forwardRef } from 'react';
+import { cn } from '../utils/cn';
+
+export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
+  circle?: boolean;
+}
+
+export const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(
+  ({ className, circle = false, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        aria-hidden="true"
+        className={cn(
+          'animate-pulse bg-[var(--ui-bg-tertiary)]',
+          circle ? 'rounded-full' : 'rounded-[var(--ui-radius-md)]',
+          className
+        )}
+        {...props}
+      />
+    );
+  }
+);
+Skeleton.displayName = 'Skeleton';
+
+export interface SkeletonTextProps extends React.HTMLAttributes<HTMLDivElement> {
+  lines?: number;
+  gap?: 'sm' | 'md' | 'lg';
+}
+
+export const SkeletonText = forwardRef<HTMLDivElement, SkeletonTextProps>(
+  ({ className, lines = 3, gap = 'md', ...props }, ref) => {
+    const gapClass = gap === 'sm' ? 'space-y-1.5' : gap === 'lg' ? 'space-y-3' : 'space-y-2';
+
+    return (
+      <div ref={ref} aria-hidden="true" className={cn('w-full', gapClass, className)} {...props}>
+        {Array.from({ length: lines }).map((_, i) => (
+          <Skeleton
+            key={i}
+            className={cn('h-4 w-full', i === lines - 1 && 'w-4/5')}
+          />
+        ))}
+      </div>
+    );
+  }
+);
+SkeletonText.displayName = 'SkeletonText';
+
+export interface SkeletonCircleProps extends React.HTMLAttributes<HTMLDivElement> {
+  size?: number | string;
+}
+
+export const SkeletonCircle = forwardRef<HTMLDivElement, SkeletonCircleProps>(
+  ({ className, size = '2.5rem', style, ...props }, ref) => {
+    return (
+      <Skeleton
+        ref={ref}
+        circle
+        style={{ width: size, height: size, ...style }}
+        className={className}
+        {...props}
+      />
+    );
+  }
+);
+SkeletonCircle.displayName = 'SkeletonCircle';

package/src/feedback/Spinner.tsx

@@ -0,0 +1,65 @@
+import React, { forwardRef } from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../utils/cn';
+
+export const spinnerVariants = cva('animate-spin inline-block', {
+  variants: {
+    size: {
+      xs: 'w-3 h-3',
+      sm: 'w-4 h-4',
+      md: 'w-6 h-6',
+      lg: 'w-8 h-8',
+      xl: 'w-12 h-12',
+    },
+    variant: {
+      primary: 'text-[var(--ui-primary)]',
+      secondary: 'text-[var(--ui-secondary)]',
+      current: 'text-current',
+      muted: 'text-[var(--ui-text-muted)]',
+      white: 'text-white',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+    variant: 'primary',
+  },
+});
+
+export interface SpinnerProps
+  extends React.SVGAttributes<SVGSVGElement>,
+    VariantProps<typeof spinnerVariants> {
+  label?: string;
+}
+
+export const Spinner = forwardRef<SVGSVGElement, SpinnerProps>(
+  ({ className, size, variant, label = 'Loading...', ...props }, ref) => {
+    return (
+      <svg
+        ref={ref}
+        role="status"
+        aria-label={label}
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        className={cn(spinnerVariants({ size, variant }), className)}
+        {...props}
+      >
+        <circle
+          className="opacity-25"
+          cx="12"
+          cy="12"
+          r="10"
+          stroke="currentColor"
+          strokeWidth="4"
+        />
+        <path
+          className="opacity-75"
+          fill="currentColor"
+          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+        />
+      </svg>
+    );
+  }
+);
+
+Spinner.displayName = 'Spinner';

package/src/feedback/index.ts

@@ -0,0 +1,5 @@
+export * from './Spinner';
+export * from './Skeleton';
+export * from './ProgressBar';
+export * from './Alert';
+export * from './EmptyState';

package/src/feedback/tokens.css

@@ -0,0 +1,4 @@
+/* Feedback Tokens */
+:root {
+  --ui-spinner-speed: 750ms;
+}

package/src/forms/Checkbox.tsx

@@ -0,0 +1,69 @@
+import React, { forwardRef } from 'react';
+import { Check, Minus } from 'lucide-react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { useFormField } from './FormField';
+import { cn } from '../utils/cn';
+
+export const checkboxVariants = cva(
+  'peer shrink-0 rounded-[var(--ui-radius-sm)] border border-[var(--ui-border-default)] bg-[var(--ui-bg-surface)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary)] disabled:cursor-not-allowed disabled:opacity-50 transition-all cursor-pointer flex items-center justify-center text-[var(--ui-primary-fg)]',
+  {
+    variants: {
+      size: {
+        sm: 'w-4 h-4 text-xs',
+        md: 'w-5 h-5 text-sm',
+        lg: 'w-6 h-6 text-base',
+      },
+    },
+    defaultVariants: {
+      size: 'md',
+    },
+  }
+);
+
+export interface CheckboxProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>,
+    VariantProps<typeof checkboxVariants> {
+  indeterminate?: boolean;
+  label?: React.ReactNode;
+}
+
+export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
+  ({ className, size, indeterminate = false, label, checked, disabled, id, onChange, ...props }, ref) => {
+    const formField = useFormField();
+    const isDisabled = disabled ?? formField?.isDisabled ?? false;
+    const checkboxId = id || formField?.id;
+
+    return (
+      <label className={cn('inline-flex items-center gap-2 select-none cursor-pointer', isDisabled && 'cursor-not-allowed opacity-50')}>
+        <div className="relative flex items-center justify-center">
+          <input
+            ref={ref}
+            type="checkbox"
+            id={checkboxId}
+            disabled={isDisabled}
+            checked={checked}
+            onChange={onChange}
+            className="sr-only peer"
+            {...props}
+          />
+          <div
+            className={cn(
+              checkboxVariants({ size }),
+              (checked || indeterminate) && 'bg-[var(--ui-primary)] border-[var(--ui-primary)]',
+              className
+            )}
+          >
+            {indeterminate ? (
+              <Minus className="w-3.5 h-3.5 stroke-[3]" />
+            ) : (
+              checked && <Check className="w-3.5 h-3.5 stroke-[3]" />
+            )}
+          </div>
+        </div>
+        {label && <span className="text-sm font-medium text-[var(--ui-text-primary)]">{label}</span>}
+      </label>
+    );
+  }
+);
+
+Checkbox.displayName = 'Checkbox';

package/src/forms/CheckboxGroup.tsx

@@ -0,0 +1,29 @@
+import React, { forwardRef } from 'react';
+import { cn } from '../utils/cn';
+
+export interface CheckboxGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+  orientation?: 'horizontal' | 'vertical';
+  value?: string[];
+  onChange?: (value: string[]) => void;
+}
+
+export const CheckboxGroup = forwardRef<HTMLDivElement, CheckboxGroupProps>(
+  ({ className, orientation = 'vertical', children, value, onChange, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        role="group"
+        className={cn(
+          'flex gap-2',
+          orientation === 'vertical' ? 'flex-col' : 'flex-row flex-wrap items-center',
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+
+CheckboxGroup.displayName = 'CheckboxGroup';