feat(circular-progress): api improved

packages/components/progress/src/use-circular-progress.ts

@@ -53,7 +53,7 @@ export function useCircularProgress(originalProps: UseCircularProgressProps) {
     styles,
     label,
     valueLabel,
-    value = 0,
+    value = undefined,
     minValue = 0,
     maxValue = 100,
     showValueLabel = false,
@@ -73,7 +73,8 @@ export function useCircularProgress(originalProps: UseCircularProgressProps) {
     delay: 100,
   });
 
-  const isIndeterminate = originalProps.isIndeterminate;
+  // default isIndeterminate to true
+  const isIndeterminate = (originalProps.isIndeterminate ?? true) && value === undefined;
 
   const {progressBarProps, labelProps} = useAriaProgress({
     id,
@@ -92,8 +93,9 @@ export function useCircularProgress(originalProps: UseCircularProgressProps) {
     () =>
       circularProgress({
         ...variantProps,
+        isIndeterminate,
       }),
-    [...Object.values(variantProps)],
+    [isIndeterminate, ...Object.values(variantProps)],
   );
 
   const selfMounted = originalProps.disableAnimation ? true : isMounted;
@@ -103,11 +105,18 @@ export function useCircularProgress(originalProps: UseCircularProgressProps) {
   const radius = 16 - strokeWidth;
   const circumference = 2 * radius * Math.PI;
 
-  const percentage = !selfMounted
+  const percentage = useMemo(() => {
-    ? 0
+    if (!selfMounted) {
-    : isIndeterminate
+      return 0;
-    ? 0.25
+    }
-    : (value - minValue) / (maxValue - minValue);
+
+    if (isIndeterminate) {
+      return 0.25;
+    }
+
+    return value ? (value - minValue) / (maxValue - minValue) : 0;
+  }, [selfMounted, value, minValue, maxValue, isIndeterminate]);
+
   const offset = circumference - percentage * circumference;
 
   const getProgressBarProps = useCallback<PropGetter>(

packages/components/progress/stories/circular-progress.stories.tsx

@@ -30,7 +30,6 @@ export default {
 
 const defaultProps = {
   ...circularProgress.defaultVariants,
-  value: 70,
 };
 
 const Template: ComponentStory<typeof CircularProgress> = (args: CircularProgressProps) => (
@@ -43,7 +42,7 @@ const IntervalTemplate: ComponentStory<typeof CircularProgress> = (args: Circula
   React.useEffect(() => {
     const interval = setInterval(() => {
       setValue((v) => (v >= 100 ? 0 : v + 10));
-    }, 800);
+    }, 500);
 
     return () => clearInterval(interval);
   }, []);
@@ -67,6 +66,7 @@ export const WithValueLabel = IntervalTemplate.bind({});
 WithValueLabel.args = {
   ...defaultProps,
   size: "lg",
+  value: 70,
   color: "secondary",
   showValueLabel: true,
 };
@@ -76,13 +76,8 @@ WithValueFormatting.args = {
   ...defaultProps,
   label: "Loading...",
   size: "xl",
+  value: 70,
   color: "warning",
   showValueLabel: true,
   formatOptions: {style: "unit", unit: "kilometer"},
 };
-
-export const Indeterminate = Template.bind({});
-Indeterminate.args = {
-  ...defaultProps,
-  isIndeterminate: true,
-};

packages/components/progress/stories/progress.stories.tsx

@@ -51,7 +51,7 @@ const IntervalTemplate: ComponentStory<typeof Progress> = (args: ProgressProps)
   React.useEffect(() => {
     const interval = setInterval(() => {
       setValue((v) => (v >= 100 ? 0 : v + 10));
-    }, 800);
+    }, 500);
 
     return () => clearInterval(interval);
   }, []);

packages/core/theme/src/components/circular-progress.ts

@@ -27,7 +27,7 @@ const circularProgress = tv({
     svgWrapper: "relative block",
     svg: "z-0 relative overflow-hidden",
     circle: "h-full stroke-current",
-    value: "absolute font-normal top-0 left-0 w-full h-full flex items-center justify-center",
+    value: "absolute font-normal inset-0 flex items-center justify-center",
   },
   variants: {
     color: {
@@ -64,16 +64,16 @@ const circularProgress = tv({
       md: {
         svg: "w-10 h-10",
         label: "text-sm",
-        value: "text-[0.6rem]",
+        value: "text-[0.55rem]",
       },
       lg: {
         svg: "w-12 h-12",
         label: "text-base",
-        value: "text-xs",
+        value: "text-[0.6rem]",
       },
       xl: {
         svg: "w-14 h-14",
-        label: "text-lg",
+        label: "text-base",
         value: "text-xs",
       },
     },
@@ -97,7 +97,6 @@ const circularProgress = tv({
   defaultVariants: {
     color: "primary",
     size: "md",
-    isIndeterminate: false,
     isDisabled: false,
     disableAnimation: false,
   },

packages/storybook/.storybook/preview.js

@@ -1,14 +1,17 @@
 import React from "react";
-import addons from "@storybook/addons";
 import {themes} from "@storybook/theming";
 import Style from "./style";
+import {Analytics} from "@vercel/analytics/react";
 
 export const decorators = [
   (Story) => (
-    <div className="bg-dark">
+    <>
-      <Style />
+      <div className="bg-dark">
-      <Story />
+        <Style />
-    </div>
+        <Story />
+      </div>
+      <Analytics />
+    </>
   ),
 ];
 
@@ -17,7 +20,7 @@ export const parameters = {
   options: {
     storySort: {
       method: "alphabetical",
-      order:["Foundations", "Components"],
+      order: ["Foundations", "Components"],
     },
   },
   controls: {

packages/storybook/.storybook/welcome.stories.mdx

@@ -136,5 +136,5 @@ import {link, button} from "@nextui-org/theme";
 <br />
 
 <div class="block text-xs text-neutral-400">
-  Last updated on <time datetime="2023-03-07">March 30, 2023</time>
+  Last updated on <time datetime="2023-03-07">April 01, 2023</time>
 </div>

packages/storybook/package.json

@@ -35,6 +35,7 @@
   },
   "dependencies": {
     "@nextui-org/theme": "workspace:*",
+    "@vercel/analytics": "^0.1.6",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },

pnpm-lock.yaml

@@ -890,9 +890,6 @@ importers:
 
   packages/components/progress:
     dependencies:
-      '@nextui-org/aria-utils':
-        specifier: workspace:*
-        version: link:../../utilities/aria-utils
       '@nextui-org/dom-utils':
         specifier: workspace:*
         version: link:../../utilities/dom-utils
@@ -1081,9 +1078,6 @@ importers:
 
   packages/components/tooltip:
     dependencies:
-      '@nextui-org/aria-utils':
-        specifier: workspace:*
-        version: link:../../utilities/aria-utils
       '@nextui-org/dom-utils':
         specifier: workspace:*
         version: link:../../utilities/dom-utils
@@ -1446,6 +1440,9 @@ importers:
       '@nextui-org/theme':
         specifier: workspace:*
         version: link:../core/theme
+      '@vercel/analytics':
+        specifier: ^0.1.6
+        version: 0.1.6(react@18.2.0)
       react:
         specifier: ^18.2.0
         version: 18.2.0