fix: move circular-progress tv to progress (#3321)

* fix: remove circular-progress tv to progress * docs: changeset * chore(changeset): update changeset message * Update .changeset/angry-maps-serve.md --------- Co-authored-by: աӄա <[email protected]> Co-authored-by: Junior Garcia <[email protected]>
nextui-org · Nov 17, 2024 · 341b5de · 341b5de
1 parent 56e1de7
commit 341b5de
Show file tree

Hide file tree

Showing 4 changed files with 109 additions and 111 deletions.
diff --git a/.changeset/angry-maps-serve.md b/.changeset/angry-maps-serve.md
@@ -0,0 +1,5 @@
+---
+"@nextui-org/theme": patch
+---
+
+move circular-progress tv to progress
diff --git a/packages/core/theme/src/components/circular-progress.ts b/packages/core/theme/src/components/circular-progress.ts
diff --git a/packages/core/theme/src/components/index.ts b/packages/core/theme/src/components/index.ts
@@ -16,7 +16,6 @@ export * from "./pagination";
 export * from "./toggle";
 export * from "./accordion";
 export * from "./progress";
-export * from "./circular-progress";
 export * from "./input";
 export * from "./dropdown";
 export * from "./image";

diff --git a/packages/core/theme/src/components/progress.ts b/packages/core/theme/src/components/progress.ts
@@ -173,7 +173,110 @@ const progress = tv(
   },
 );
 
+/**
+ * CircularProgress **Tailwind Variants** component
+ *
+ * @example
+ * ```js
+ * const {base, svgWrapper, svg, indicator, value, label} = circularProgress({...})
+ *
+ * <div className={base()} aria-label="progress" role="progressbar" aria-valuenow={value} aria-valuemin={min} aria-valuemax={max}>
+ *   <div className={svgWrapper()}>
+ *      <svg className={svg()}>
+ *        <circle className={track()} />
+ *        <circle className={indicator()} />
+ *      </svg>
+ *      <span className={value()}>{value}</span>
+ *   </div>
+ *    <span className={label()}>{label}</span>
+ * </div>
+ * ```
+ */
+const circularProgress = tv({
+  slots: {
+    base: "flex flex-col justify-center gap-1 max-w-fit items-center",
+    label: "",
+    svgWrapper: "relative block",
+    svg: "z-0 relative overflow-hidden",
+    track: "h-full stroke-default-300/50",
+    indicator: "h-full stroke-current",
+    value: "absolute font-normal inset-0 flex items-center justify-center",
+  },
+  variants: {
+    color: {
+      default: {
+        svg: "text-default-400",
+      },
+      primary: {
+        svg: "text-primary",
+      },
+      secondary: {
+        svg: "text-secondary",
+      },
+      success: {
+        svg: "text-success",
+      },
+      warning: {
+        svg: "text-warning",
+      },
+      danger: {
+        svg: "text-danger",
+      },
+    },
+    size: {
+      sm: {
+        svg: "w-8 h-8",
+        label: "text-small",
+        value: "text-[0.5rem]",
+      },
+      md: {
+        svg: "w-10 h-10",
+        label: "text-small",
+        value: "text-[0.55rem]",
+      },
+      lg: {
+        svg: "w-12 h-12",
+        label: "text-medium",
+        value: "text-[0.6rem]",
+      },
+    },
+    isIndeterminate: {
+      true: {
+        svg: "animate-spinner-ease-spin",
+      },
+    },
+    isDisabled: {
+      true: {
+        base: "opacity-disabled cursor-not-allowed",
+      },
+    },
+    disableAnimation: {
+      true: {},
+      false: {
+        indicator: "transition-all !duration-500",
+      },
+    },
+  },
+  defaultVariants: {
+    color: "primary",
+    size: "md",
+    isDisabled: false,
+  },
+  compoundVariants: [
+    // disableAnimation && !isIndeterminate
+    {
+      disableAnimation: true,
+      isIndeterminate: false,
+      class: {
+        svg: "!transition-none motion-reduce:transition-none",
+      },
+    },
+  ],
+});
+
 export type ProgressVariantProps = VariantProps<typeof progress>;
 export type ProgressSlots = keyof ReturnType<typeof progress>;
+export type CircularProgressVariantProps = VariantProps<typeof circularProgress>;
+export type CircularProgressSlots = keyof ReturnType<typeof circularProgress>;
 
-export {progress};
+export {progress, circularProgress};