chore(Radial Progress): added size and thickness props and stories (#92)

src/RadialProgress/RadialProgress.stories.tsx

@@ -8,10 +8,33 @@ export default {
   component: RadialProgress,
 } as Meta
 
-export const Default: Story<RadialProgressProps> = (args) => {
+const Template: Story<RadialProgressProps> = (args) => {
   return <RadialProgress {...args}>{args.value}%</RadialProgress>
 }
 
+export const Default = Template.bind({})
 Default.args = {
   value: 75,
 }
+
+export const CustomColor = Template.bind({})
+CustomColor.args = {
+  value: 75,
+  color: 'primary'
+}
+
+export const BackgroundColor = Template.bind({})
+BackgroundColor.args = {
+  value: 75,
+  className: 'bg-primary text-primary-content border-4 border-primary'
+}
+
+export const CustomSizeAndThickness: Story<RadialProgressProps> = (args) => {
+  return (
+    <div className='flex items-center gap-4'>
+      <RadialProgress value={70} size='12rem' thickness='2px'>70%</RadialProgress>
+      <RadialProgress value={80} size='12rem' thickness='2rem'>80%</RadialProgress>
+    </div>
+  )
+}
+CustomSizeAndThickness.args = {}

src/RadialProgress/RadialProgress.tsx

@@ -1,19 +1,42 @@
 import React, { forwardRef } from 'react'
+import clsx from 'clsx'
 import { twMerge } from 'tailwind-merge'
 
-import { IComponentBaseProps } from '../types'
+import { ComponentColor, IComponentBaseProps } from '../types'
 
 export type RadialProgressProps = React.HTMLAttributes<HTMLDivElement> &
   IComponentBaseProps & {
     value: number
+    size?: string
+    thickness?: string
+    color?: ComponentColor
   }
 
 const RadialProgress = forwardRef<HTMLDivElement, RadialProgressProps>(
-  ({ value, dataTheme, className, children, ...props }, ref): JSX.Element => {
-    const classes = twMerge('radial-progress', className)
+  ({
+    value,
+    size = '4rem',
+    thickness = '4px',
+    color,
+    dataTheme,
+    className,
+    children,
+    ...props
+  }, ref): JSX.Element => {
+    const classes = twMerge(
+      'radial-progress',
+      className,
+      clsx({
+        [`text-${color}`]: color,
+      })
+    )
 
     const displayedValue = Math.min(100, Math.max(0, value))
-    const progressStyle: Record<string, number> = { '--value': displayedValue }
+    const progressStyle: Record<string, string | number> = {
+      '--value': displayedValue,
+      '--size': size,
+      '--thickness': thickness,
+    }
 
     return (
       <div