feat: added Circular Progress

Author: dhavalveera

apps/web/content/docs/components/progress.mdx

@@ -43,6 +43,18 @@ Set your own custom colors for the progress bar component by using the `color` p
 
 <Example name="progress.colors" />
 
+## Circular Progress
+
+Use this Circular progress example to show a progress bar where you can set the progress rate using the `progress` prop from React which should be a number from 1 to 100.
+
+<Example name="progress.circular" />
+
+## Circular Progress With Text
+
+Use this Circular progress example to show a progress bar with a label. You can set the label text using the `textLabel` prop and the progress text using the `labelText` prop.
+
+<Example name="progress.circularWithText" />
+
 ## Theme
 
 To learn more about how to customize the appearance of components, please see the [Theme docs](/docs/customize/theme).

apps/web/examples/progress/index.ts

@@ -1,3 +1,5 @@
+export { circularProgress } from "./progress.circular";
+export { circularProgressWithText } from "./progress.circularWithText";
 export { colors } from "./progress.colors";
 export { positioning } from "./progress.positioning";
 export { root } from "./progress.root";

apps/web/examples/progress/progress.circular.tsx

@@ -0,0 +1,42 @@
+import { Progress } from "flowbite-react";
+import { type CodeData } from "~/components/code-demo";
+
+const code = `
+"use client";
+
+import { Progress } from "flowbite-react";
+
+export function Component() {
+  return <Progress.Circular progress={45} />;
+}
+`;
+
+const codeRSC = `
+import { Progress } from "flowbite-react";
+
+export function Component() {
+  return <Progress.Circular progress={45} />;
+}
+`;
+
+export function Component() {
+  return <Progress.Circular progress={45} />;
+}
+
+export const circularProgress: CodeData = {
+  type: "single",
+  code: [
+    {
+      fileName: "client",
+      language: "tsx",
+      code,
+    },
+    {
+      fileName: "server",
+      language: "tsx",
+      code: codeRSC,
+    },
+  ],
+  githubSlug: "progress/progress.circular.tsx",
+  component: <Component />,
+};

apps/web/examples/progress/progress.circularWithText.tsx

@@ -0,0 +1,42 @@
+import { Progress } from "flowbite-react";
+import { type CodeData } from "~/components/code-demo";
+
+const code = `
+"use client";
+
+import { Progress } from "flowbite-react";
+
+export function Component() {
+  return <Progress.Circular progress={45} textLabel="45%" />;
+}
+`;
+
+const codeRSC = `
+import { Progress } from "flowbite-react";
+
+export function Component() {
+  return <Progress.Circular progress={45} textLabel="45%" />;
+}
+`;
+
+export function Component() {
+  return <Progress.Circular progress={45} textLabel="45%" />;
+}
+
+export const circularProgressWithText: CodeData = {
+  type: "single",
+  code: [
+    {
+      fileName: "client",
+      language: "tsx",
+      code,
+    },
+    {
+      fileName: "server",
+      language: "tsx",
+      code: codeRSC,
+    },
+  ],
+  githubSlug: "progress/progress.circularWithText.tsx",
+  component: <Component />,
+};

packages/ui/src/components/Progress/CircularProgress.stories.tsx

@@ -0,0 +1,31 @@
+import type { Meta, StoryFn } from "@storybook/react";
+import type { CircularProgressProps } from "./ProgressCircular";
+import { CircularProgress } from "./ProgressCircular";
+
+export default {
+  title: "Components/Circular Progress",
+  component: CircularProgress,
+  decorators: [
+    (Story): JSX.Element => (
+      <div className="flex w-1/2 flex-col">
+        <Story />
+      </div>
+    ),
+  ],
+} as Meta;
+
+const CircularTemplate: StoryFn<CircularProgressProps> = (args) => <CircularProgress {...args} />;
+
+export const CircularProgressBar = CircularTemplate.bind({});
+CircularProgressBar.storyName = "Circular Progress";
+CircularProgressBar.args = {
+  progress: 25,
+};
+
+export const CircularProgressBarWithText = CircularTemplate.bind({});
+CircularProgressBarWithText.storyName = "Circular Progress With Text";
+CircularProgressBarWithText.args = {
+  progress: 25,
+  labelText: true,
+  textLabel: "25%",
+};

packages/ui/src/components/Progress/Progress.tsx

@@ -5,13 +5,16 @@ import { mergeDeep } from "../../helpers/merge-deep";
 import { getTheme } from "../../theme-store";
 import type { DeepPartial, DynamicStringEnumKeysOf } from "../../types";
 import type { FlowbiteColors, FlowbiteSizes } from "../Flowbite";
+import type { FlowbiteCircularProgressTheme } from "./ProgressCircular";
+import { CircularProgress } from "./ProgressCircular";
 
 export interface FlowbiteProgressTheme {
   base: string;
   label: string;
   bar: string;
   color: ProgressColor;
   size: ProgressSizes;
+  circular: FlowbiteCircularProgressTheme;
 }
 
 export interface ProgressColor
@@ -37,7 +40,7 @@ export interface ProgressProps extends ComponentProps<"div"> {
   theme?: DeepPartial<FlowbiteProgressTheme>;
 }
 
-export const Progress: FC<ProgressProps> = ({
+const ProgressComponent: FC<ProgressProps> = ({
   className,
   color = "cyan",
   labelProgress = false,
@@ -83,4 +86,8 @@ export const Progress: FC<ProgressProps> = ({
   );
 };
 
-Progress.displayName = "Progress";
+ProgressComponent.displayName = "Progress";
+
+export const Progress = Object.assign(ProgressComponent, {
+  Circular: CircularProgress,
+});

packages/ui/src/components/Progress/ProgressCircular.tsx

@@ -0,0 +1,88 @@
+import type { ComponentProps, FC } from "react";
+import { useId } from "react";
+import { twMerge } from "tailwind-merge";
+import { mergeDeep } from "../../helpers/merge-deep";
+import { getTheme } from "../../theme-store";
+import type { DeepPartial } from "../../types";
+import type { FlowbiteColors } from "../Flowbite";
+
+export interface FlowbiteCircularProgressTheme {
+  base: string;
+  bar: string;
+  label: {
+    base: string;
+    text: string;
+    textColor: CircularProgressColor;
+  };
+  color: {
+    bgColor: string;
+    barColor: CircularProgressColor;
+  };
+}
+
+export interface CircularProgressColor
+  extends Pick<
+    FlowbiteColors,
+    "dark" | "blue" | "red" | "green" | "yellow" | "indigo" | "purple" | "cyan" | "gray" | "lime" | "pink" | "teal"
+  > {
+  [key: string]: string;
+}
+
+export interface CircularProgressProps extends ComponentProps<"div"> {
+  labelText?: boolean;
+  progress: number;
+  textLabel?: string;
+  theme?: DeepPartial<FlowbiteCircularProgressTheme>;
+}
+
+export const CircularProgress: FC<CircularProgressProps> = ({
+  className,
+  color = "cyan",
+  labelText = false,
+  progress,
+  textLabel = "65%",
+  theme: customTheme = {},
+  ...props
+}) => {
+  const id = useId();
+  const theme = mergeDeep(getTheme().progress.circular, customTheme);
+
+  // Calculate the circumference of the Circle
+  const circumference = 2 * Math.PI * 16;
+
+  // Calculate the stroke-dashoffset
+  const offset = circumference * (1 - progress / 100);
+
+  return (
+    <div id={id} aria-valuenow={progress} role="progressbar" {...props}>
+      <div className={twMerge(theme.base, className)}>
+        <svg className={theme.bar} viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
+          <circle cx="18" cy="18" r="16" fill="none" className={theme.color.bgColor} strokeWidth="2" />
+
+          <circle
+            cx="18"
+            cy="18"
+            r="16"
+            fill="none"
+            className={theme.color.barColor[color]}
+            strokeWidth="2"
+            strokeDasharray="100"
+            strokeDashoffset={offset}
+            strokeLinecap="round"
+          />
+        </svg>
+
+        {labelText && textLabel ? (
+          <div className={theme.label.base}>
+            <span
+              data-testid="flowbite-circular-progress-label"
+              className={twMerge(theme.label.text, theme.label.textColor[color])}
+            >
+              {textLabel}
+            </span>
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+};

packages/ui/src/components/Progress/theme.ts

@@ -25,4 +25,43 @@ export const progressTheme: FlowbiteProgressTheme = createTheme({
     lg: "h-4",
     xl: "h-6",
   },
+  circular: {
+    base: "relative size-40",
+    bar: "size-full -rotate-90",
+    color: {
+      barColor: {
+        dark: "stroke-current text-gray-600 dark:text-gray-300",
+        blue: "stroke-current text-blue-600",
+        red: "stroke-current text-red-600 dark:text-red-500",
+        green: "stroke-current text-green-600 dark:text-green-500",
+        yellow: "stroke-current text-yellow-400",
+        indigo: "stroke-current text-indigo-600 dark:text-indigo-500",
+        purple: "stroke-current text-purple-600 dark:text-purple-500",
+        cyan: "stroke-current text-cyan-600",
+        gray: "stroke-current text-gray-500",
+        lime: "stroke-current text-lime-600",
+        pink: "stroke-current text-pink-500",
+        teal: "stroke-current text-teal-600",
+      },
+      bgColor: "stroke-current text-gray-200 dark:text-neutral-700",
+    },
+    label: {
+      base: "absolute start-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform",
+      text: "text-center text-2xl font-bold",
+      textColor: {
+        dark: "text-gray-600 dark:text-gray-300",
+        blue: "text-blue-600",
+        red: "text-red-600 dark:text-red-500",
+        green: "text-green-600 dark:text-green-500",
+        yellow: "text-yellow-400",
+        indigo: "text-indigo-600 dark:text-indigo-500",
+        purple: "text-purple-600 dark:text-purple-500",
+        cyan: "text-cyan-600",
+        gray: "text-gray-500",
+        lime: "text-lime-600",
+        pink: "text-pink-500",
+        teal: "text-teal-600",
+      },
+    },
+  },
 });