Progress

1// Base UI base progress — runs on @octanejs/base-ui's Progress.
2//
3// TWO STRUCTURAL DIFFERENCES FROM THE RADIX BASE, both verified by rendering the primitive
4// rather than inferred:
5//
6//   1. THERE IS A TRACK PART. Radix goes Root > Indicator; Base UI goes Root > Track > Indicator,
7//      and the Track is what carries the rail. Rendering an Indicator directly under Root would
8//      put it outside the element the primitive sizes against.
9//
10//   2. THE INDICATOR SIZES ITSELF. Radix leaves the fill entirely to the consumer, which is why
11//      its base ships `style={{ transform: translateX(-${100 - value}%) }}`. Base UI's Indicator
12//      already emits `width: <value>%` inline. Carrying the radix transform across would shift a
13//      correctly-sized bar sideways by the same amount again — a double offset, worst at the
14//      midpoint and invisible at 0% and 100%.
15//
16// So `value` is forwarded to the Root (which owns the aria-valuenow/valuetext contract) and NOT
17// turned into a transform.
18//
19// UNVERIFIED PROVENANCE: class strings come from this package's radix base rather than
20// transcribed from upstream's Base UI source; the rail/fill classes are split across Track and
21// Indicator to match the extra part.
22import { Progress as ProgressPrimitive } from '@octanejs/base-ui/progress';
23 
24import { cn } from '@/lib/utils';
25 
26export interface ProgressProps extends Record<string, unknown> {
27	className?: string;
28	value?: number | null;
29}
30 
31export function Progress({ className, value, ...props }: ProgressProps) @{
32	// Base UI's Root types `value` as `number | null` where shadcn's prop is optional, and null is
33	// its documented indeterminate state — so an omitted value maps to null rather than being
34	// forwarded as undefined.
35	<ProgressPrimitive.Root data-slot="progress" value={value ?? null} {...props}>
36		<ProgressPrimitive.Track
37			data-slot="progress-track"
38			className={cn('relative h-2 w-full overflow-hidden rounded-full bg-primary/20', className)}
39		>
40			<ProgressPrimitive.Indicator
41				data-slot="progress-indicator"
42				className="h-full bg-primary transition-all"
43			/>
44		</ProgressPrimitive.Track>
45	</ProgressPrimitive.Root>
46}