circular-progress

1"use client";
2 
3import { mergeProps } from "@base-ui/react/merge-props";
4import { useRender } from "@base-ui/react/use-render";
5import * as React from "react";
6import { cn } from "@/lib/utils";
7 
8const CIRCULAR_PROGRESS_NAME = "CircularProgress";
9const INDICATOR_NAME = "CircularProgressIndicator";
10const TRACK_NAME = "CircularProgressTrack";
11const RANGE_NAME = "CircularProgressRange";
12const VALUE_TEXT_NAME = "CircularProgressValueText";
13 
14const DEFAULT_MAX = 100;
15 
16type ProgressState = "indeterminate" | "complete" | "loading";
17 
18function getProgressState(
19  value: number | undefined | null,
20  maxValue: number,
21): ProgressState {
22  return value == null
23    ? "indeterminate"
24    : value === maxValue
25      ? "complete"
26      : "loading";
27}
28 
29function getIsValidNumber(value: unknown): value is number {
30  return typeof value === "number" && Number.isFinite(value);
31}
32 
33function getIsValidMaxNumber(max: unknown): max is number {
34  return getIsValidNumber(max) && max > 0;
35}
36 
37function getIsValidValueNumber(
38  value: unknown,
39  min: number,
40  max: number,
41): value is number {
42  return getIsValidNumber(value) && value <= max && value >= min;
43}
44 
45function getDefaultValueText(value: number, min: number, max: number): string {
46  const percentage = max === min ? 100 : ((value - min) / (max - min)) * 100;
47  return `${Math.round(percentage)}%`;
48}
49 
50function getInvalidValueError(
51  propValue: string,
52  componentName: string,
53): string {
54  return `Invalid prop \`value\` of value \`${propValue}\` supplied to \`${componentName}\`. The \`value\` prop must be a number between \`min\` and \`max\` (inclusive), or \`null\`/\`undefined\` for indeterminate progress. The value will be clamped to the valid range.`;
55}
56 
57function getInvalidMaxError(propValue: string, componentName: string): string {
58  return `Invalid prop \`max\` of value \`${propValue}\` supplied to \`${componentName}\`. Only numbers greater than 0 are valid. Defaulting to ${DEFAULT_MAX}.`;
59}
60 
61interface CircularProgressContextValue {
62  value: number | null;
63  valueText: string | undefined;
64  max: number;
65  min: number;
66  state: ProgressState;
67  radius: number;
68  thickness: number;
69  size: number;
70  center: number;
71  circumference: number;
72  percentage: number | null;
73  valueTextId?: string;
74}
75 
76const CircularProgressContext =
77  React.createContext<CircularProgressContextValue | null>(null);
78 
79function useCircularProgressContext(consumerName: string) {
80  const context = React.useContext(CircularProgressContext);
81  if (!context) {
82// … truncated