New progress circle component

src/components/form/PasswordInput.tsx

@@ -4,7 +4,7 @@ import {IconEye, IconX} from "@tabler/icons-react";
 import {Button, ButtonProps} from "../button/Button";
 import {clearInputElement} from "./Input.utils";
 import {Flex} from "../flex/Flex";
-import {Progress} from "../progress/Progress";
+import {ProgressLinear} from "../progress/ProgressLinear";
 import {InputMessage} from "./InputMessage";
 import {ButtonGroup} from "../button-group/ButtonGroup";
 
@@ -77,7 +77,7 @@ export const PasswordInput: React.ForwardRefExoticComponent<PasswordInputProps>
         {
             usesPasswordValidation && !formValidation?.valid && (
                 <Flex mt={0.7} style={{flexDirection: "column"}}>
-                    <Progress value={strengthValue} max={100}
+                    <ProgressLinear value={strengthValue} max={100}
                               color={"linear-gradient(to right, #D90429 0%, #29BF12 100%)"}/>
                     {(() => {
                         const nextRule = ["2", "3", "4", "5", "1"].find(rule => notValidMessage.includes(rule))

src/components/progress/Progress.stories.tsx

@@ -1,29 +1,46 @@
 import {Meta} from "@storybook/react-vite";
-import {Progress} from "./Progress";
+import {ProgressLinear} from "./ProgressLinear";
+import {ProgressCircle} from "./ProgressCircle";
 import React from "react";
 import {Card} from "../card/Card";
 import {Spacing} from "../spacing/Spacing";
 import {Text} from "../text/Text";
+import {Flex} from "../flex/Flex";
 
 export default {
     title: "Progress",
-    component: Progress,
+    component: ProgressLinear,
 } as Meta
 
-export const ProgressExample = () => {
+export const Linear = () => {
     return <Card color={"primary"} w={"300px"}>
-        <Progress value={50} predictionValue={75} max={100}
-                  color={"linear-gradient(to right, #29BF12 0%, #D90429 100%)"}/>
+        <ProgressLinear value={50} predictionValue={75} max={100}
+                        color={"linear-gradient(to right, #29BF12 0%, #D90429 100%)"}/>
         <Spacing spacing={"xs"}/>
         <Text>
             You used 50% of your available workflow executions and will used 75% until its reseted.
         </Text>
         <Spacing spacing={"xl"}/>
-        <Progress value={30} max={100} color={"#70ffb2"}/>
+        <ProgressLinear value={30} max={100} color={"#70ffb2"}/>
         <Spacing spacing={"xs"}/>
         <Text>
             You used 30% of your available workflow executions and will used 120% until its reseted.
             You need to upgrade your plan to be able to execute workflows seamlessly.
         </Text>
     </Card>
-}
+}
+
+export const Circle = () => {
+    return <Card color={"primary"} w={"300px"}>
+        <Flex style={{gap: "1.5rem", alignItems: "center"}}>
+            <ProgressCircle value={50} size={64} predictionValue={75} max={100} color={"#70ffb2"}
+                            dot={<Text>50%</Text>}/>
+            <ProgressCircle value={30} size={16} max={100} color={"#70ffb2"}/>
+        </Flex>
+        <Spacing spacing={"xs"}/>
+        <Text>
+            The circle shares the same interface and design as the linear variant –
+            value, predictionValue, color and dot behave identically.
+        </Text>
+    </Card>
+}

src/components/progress/Progress.style.scss

@@ -3,7 +3,7 @@
 @use "../../styles/variables";
 
 
-.progress {
+.progress-linear {
 
   & {
     @include box.box(variables.$primary);
@@ -65,4 +65,51 @@
       background-size: calc(100% * (100 / var(--progressPrediction, 100))) 100%;
     }
   }
-}
+}
+
+.progress-circle {
+
+  & {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--size);
+    height: var(--size);
+  }
+
+  &__circle {
+    display: block;
+    width: var(--size);
+    height: var(--size);
+    transform: translateZ(0);
+  }
+
+  &__track {
+    opacity: 0.1;
+    stroke: var(--color);
+    stroke-linecap: round;
+  }
+
+  &__prediction {
+    opacity: 0.25;
+    stroke: url(#circle-stripe-overlay);
+    stroke-linecap: round;
+    z-index: 1;
+  }
+
+  &__range {
+    stroke: var(--color);
+    stroke-linecap: round;
+    z-index: 2;
+  }
+
+  &__dot {
+    position: absolute;
+    inset: 0;
+    z-index: 2;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}

src/components/progress/ProgressCircle.tsx

@@ -0,0 +1,73 @@
+import {mergeComponentProps} from "../../utils";
+import {
+    ProgressCircle as ArkProgressCircle,
+    ProgressCircleRange,
+    ProgressCircleTrack,
+    ProgressRoot,
+    ProgressRootProps
+} from "@ark-ui/react";
+import React, {CSSProperties} from "react";
+import "./Progress.style.scss"
+import {ProgressProps} from "./ProgressLinear";
+
+export type ProgressCircleProps = ProgressProps & Omit<ProgressRootProps, 'value' | 'max' | 'color'> & {
+    size?: CSSProperties['width']
+    thickness?: CSSProperties['strokeWidth']
+}
+
+export const ProgressCircle: React.FC<ProgressCircleProps> = (props) => {
+
+    const {
+        color = "white",
+        predictionValue = 0,
+        dot,
+        value,
+        max = 100,
+        size = 64,
+        thickness,
+        ...rest
+    } = props
+
+    const toLength = (value: string | number | undefined): string | number | undefined =>
+        typeof value === "number" ? `${value}px` : value
+
+    return <ProgressRoot value={value} max={max} {...mergeComponentProps('progress-circle', {
+        ...rest,
+        style: {
+            ...rest.style,
+            ['--size' as any]: toLength(size),
+            ['--thickness' as any]: thickness !== undefined ? toLength(thickness) : 'calc(var(--size) / 8)',
+            ['--color' as any]: color
+        }
+    })}>
+
+        <ArkProgressCircle className="progress-circle__circle">
+            <ProgressCircleTrack className="progress-circle__track"/>
+
+            <svg style={{position: 'absolute', width: 0, height: 0, overflow: 'hidden'}}>
+                <defs>
+                    <pattern
+                        id="circle-stripe-overlay"
+                        width="5"
+                        height="5"
+                        patternUnits="userSpaceOnUse"
+                        patternTransform="rotate(-45)"
+                    >
+                        <rect width="5" height="5" fill="var(--color)"/>
+                        <rect width="2.5" height="5" fill="rgba(0, 0, 0, 0.25)"/>
+                    </pattern>
+                </defs>
+            </svg>
+
+            <ProgressCircleRange style={{
+                ['--percent' as any]: predictionValue
+            }} className="progress-circle__prediction"/>
+
+            <ProgressCircleRange className="progress-circle__range"/>
+        </ArkProgressCircle>
+
+        <div className="progress-circle__dot">
+            {dot}
+        </div>
+    </ProgressRoot>
+}

src/components/progress/Progress.tsx → src/components/progress/ProgressLinear.tsx

@@ -3,13 +3,17 @@ import * as Radix from "@radix-ui/react-progress"
 import React, {CSSProperties} from "react";
 import "./Progress.style.scss"
 
-export type ProgressProps = ComponentProps & Radix.ProgressProps & {
+export type ProgressProps = ComponentProps & {
+    value?: number | null
+    max?: number
     color?: CSSProperties['background']
     dot?: React.ReactNode
     predictionValue?: number | null
 }
 
-export const Progress: React.FC<ProgressProps> = (props) => {
+export type ProgressLinearProps = ProgressProps & Omit<Radix.ProgressProps, 'value' | 'max' | 'color'>
+
+export const ProgressLinear: React.FC<ProgressLinearProps> = (props) => {
 
     const {color = "white", predictionValue, dot, ...rest} = props
 
@@ -19,7 +23,7 @@ export const Progress: React.FC<ProgressProps> = (props) => {
     const progressPrediction = ((Math.min(props.predictionValue ?? 0, props.max ?? 100)) / (props.max ?? 100)) * 100;
     const transformPredictionValue = `translateX(-${100 - progressPrediction}%)`;
 
-    return <Radix.Progress {...mergeComponentProps('progress', {
+    return <Radix.Progress {...mergeComponentProps('progress-linear', {
         ...rest,
         style: {
             ...rest.style,
@@ -29,7 +33,7 @@ export const Progress: React.FC<ProgressProps> = (props) => {
         }
     })}>
 
-        <div className={"progress__dot"}>
+        <div className={"progress-linear__dot"}>
             {dot}
         </div>
 
@@ -41,15 +45,15 @@ export const Progress: React.FC<ProgressProps> = (props) => {
             position: "relative",
         }}>
             <Radix.ProgressIndicator
-                className="progress__indicator"
+                className="progress-linear__indicator"
                 style={{
                     transform: transformValue
                 }}/>
             {typeof props.predictionValue === "number" && <Radix.ProgressIndicator
-                className="progress__indicator progress__indicator--prediction"
+                className="progress-linear__indicator progress-linear__indicator--prediction"
                 style={{
                     transform: transformPredictionValue
                 }}/>}
         </div>
     </Radix.Progress>
-}
+}

src/index.ts

@@ -24,7 +24,8 @@ export * from "./components/gantt/Gantt"
 export * from "./components/icon/Icon"
 export * from "./components/layout/Layout"
 export * from "./components/menu/Menu"
-export * from "./components/progress/Progress"
+export * from "./components/progress/ProgressLinear"
+export * from "./components/progress/ProgressCircle"
 export * from "./components/quote/Quote"
 export * from "./components/resizable/Resizable"
 export * from "./components/row/Row"