Progress

1"use client";
2 
3import "./progress.css";
4import { Progress as BaseProgress } from "@base-ui/react/progress";
5import type React from "react";
6import { cn } from "tailwind-variants";
7 
8import { ProgressContext, useProgressContext } from "./progress.context";
9import { progressVariants, type ProgressVariants } from "./progress.variants";
10 
11export type ProgressProps = ProgressVariants & React.ComponentProps<typeof BaseProgress.Root>;
12 
13export const ProgressRoot = ({ children, className, size, ...props }: ProgressProps) => {
14  const slots = progressVariants({ size });
15 
16  return (
17    <ProgressContext.Provider value={{ slots }}>
18      <BaseProgress.Root className={cn(slots.root(), className)} {...props}>
19        {children}
20      </BaseProgress.Root>
21    </ProgressContext.Provider>
22  );
23};
24 
25export type ProgressTrackProps = React.ComponentProps<typeof BaseProgress.Track>;
26 
27export const ProgressTrack = ({ className, ...props }: ProgressTrackProps) => {
28  const { slots } = useProgressContext();
29  return <BaseProgress.Track className={cn(slots.track(), className)} {...props} />;
30};
31 
32export type ProgressIndicatorProps = React.ComponentProps<typeof BaseProgress.Indicator>;
33 
34export const ProgressIndicator = ({ className, ...props }: ProgressIndicatorProps) => {
35  const { slots } = useProgressContext();
36  return <BaseProgress.Indicator className={cn(slots.indicator(), className)} {...props} />;
37};
38 
39export type ProgressLabelProps = React.ComponentProps<typeof BaseProgress.Label>;
40 
41export const ProgressLabel = ({ className, ...props }: ProgressLabelProps) => {
42  const { slots } = useProgressContext();
43  return <BaseProgress.Label className={cn(slots.label(), className)} {...props} />;
44};
45 
46export type ProgressValueProps = React.ComponentProps<typeof BaseProgress.Value>;
47 
48export const ProgressValue = ({ className, ...props }: ProgressValueProps) => {
49  const { slots } = useProgressContext();
50  return <BaseProgress.Value className={cn(slots.value(), className)} {...props} />;
51};