added CircularProgress to demo how to add new built-in components

Author: forman

chartlets.js/src/lib/components/CircularProgress.tsx

@@ -0,0 +1,30 @@
+import MuiCircularProgress from "@mui/material/CircularProgress";
+
+import { type ComponentState } from "@/lib/types/state/component";
+import type { ComponentProps } from "@/lib/component/Component";
+
+interface CircularProgressState extends ComponentState {
+  size?: number | string;
+  value?: number;
+  variant?: "determinate" | "indeterminate";
+}
+
+interface CircularProgressProps extends ComponentProps, CircularProgressState {}
+
+export function CircularProgress({
+  id,
+  style,
+  size,
+  value,
+  variant,
+}: CircularProgressProps) {
+  return (
+    <MuiCircularProgress
+      id={id}
+      style={style}
+      size={size}
+      value={value}
+      variant={variant}
+    />
+  );
+}

chartlets.js/src/lib/index.ts

@@ -40,13 +40,15 @@ import { registry } from "@/lib/component/Registry";
 import { Box } from "@/lib/components/Box";
 import { Button } from "@/lib/components/Button";
 import { Checkbox } from "@/lib/components/Checkbox";
+import { CircularProgress } from "@/lib/components/CircularProgress";
 import { Plot } from "@/lib/components/Plot";
 import { Select } from "@/lib/components/Select";
 import { Typography } from "@/lib/components/Typography";
 
 registry.register(Box);
 registry.register(Button);
 registry.register(Checkbox);
+registry.register(CircularProgress);
 registry.register(Plot);
 registry.register(Select);
 registry.register(Typography);