circular-progress

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