Progress

1import { cva, type VariantProps } from 'class-variance-authority';
2import { ComponentProps } from 'react';
3 
4import { cn } from '@/lib/utils';
5 
6/*
7 * UX4G progress: height 0.5rem, border-radius full (pill), bar bg primary,
8 * transition width 0.6s ease. Sizes: xs (2px), sm (4px), md (8px), lg (16px), xl (24px).
9 * Striped uses 1rem diagonal gradient with animated variant (progress-bar-stripes 1s linear).
10 */
11const PROGRESS_BAR_VARIANTS = cva('h-full rounded-full transition-all duration-600 ease-in-out', {
12  variants: {
13    theme: {
14      primary: 'bg-primary',
15      secondary: 'bg-secondary',
16      success: 'bg-success',
17      danger: 'bg-danger',
18      warning: 'bg-warning',
19      info: 'bg-info',
20      neutral: 'bg-neutral',
21    },
22    striped: {
23      true: 'bg-[length:1rem_1rem] bg-[linear-gradient(45deg,rgba(255,255,255,.15)_25%,transparent_25%,transparent_50%,rgba(255,255,255,.15)_50%,rgba(255,255,255,.15)_75%,transparent_75%,transparent)]',
24      false: '',
25    },
26    animated: {
27      true: 'animate-[progress-bar-stripes_1s_linear_infinite]',
28      false: '',
29    },
30  },
31  defaultVariants: {
32    theme: 'primary',
33    striped: false,
34    animated: false,
35  },
36});
37 
38type TProgressSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
39 
40const PROGRESS_SIZES: Record<TProgressSize, string> = {
41  xs: 'h-0.5',
42  sm: 'h-1',
43  md: 'h-2',
44  lg: 'h-4',
45  xl: 'h-6',
46};
47 
48interface IProgressProps extends ComponentProps<'div'> {
49  value?: number;
50  max?: number;
51  size?: TProgressSize;
52  height?: string;
53  showLabel?: boolean;
54}
55 
56interface IProgressBarProps
57  extends ComponentProps<'div'>,
58    VariantProps<typeof PROGRESS_BAR_VARIANTS> {
59  value?: number;
60}
61 
62/** Progress bar track container. */
63function Progress({
64  className,
65  value = 0,
66  max = 100,
67  size = 'md',
68  height,
69  showLabel = false,
70  children,
71  ...props
72}: IProgressProps) {
73  const percentage = Math.min(Math.max((value / max) * 100, 0), 100);
74 
75  return (
76    <div
77      role='progressbar'
78      aria-valuenow={value}
79      aria-valuemin={0}
80      aria-valuemax={max}
81      className={cn(
82        'w-full overflow-hidden rounded-full bg-neutral-100',
83        !height && PROGRESS_SIZES[size],
84        className,
85      )}
86      style={height ? { height } : undefined}
87      {...props}
88    >
89      {children ?? (
90        <div
91          className={cn(
92            'bg-primary h-full rounded-full transition-all duration-600 ease-in-out',
93            showLabel &&
94// … truncated