Export radio indicator (#768)

* Export indicator

* Add changeset

* Export component in index.ts

* Remove propWithBox

.changeset/curvy-owls-fry.md

@@ -0,0 +1,5 @@
+---
+"@saleor/macaw-ui": patch
+---
+
+Export radio group indicator

src/components/RadioGroup/Indicator.tsx

@@ -0,0 +1,32 @@
+import * as RadioGroup from "@radix-ui/react-radio-group";
+import { forwardRef } from "react";
+import { indicator } from "./Item.css";
+
+export interface RadioGroupIndicatorProps {
+  disabled?: boolean;
+  asChild?: boolean;
+}
+
+export const RadioGroupIndicator = forwardRef<
+  HTMLDivElement,
+  RadioGroupIndicatorProps
+>(({ disabled, asChild }, ref) => {
+  return (
+    <RadioGroup.Indicator
+      className={indicator({ disabled })}
+      asChild={asChild}
+      ref={ref}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="6"
+        height="6"
+        fill="currentColor"
+      >
+        <circle cx="3" cy="3" r="3" fill="currentColor" />
+      </svg>
+    </RadioGroup.Indicator>
+  );
+});
+
+RadioGroupIndicator.displayName = "RadioGroupIndicator";

src/components/RadioGroup/Item.tsx

@@ -3,7 +3,8 @@ import { forwardRef, ReactNode } from "react";
 
 import { Box, PropsWithBox } from "../Box";
 import { DataAttributes } from "../types";
-import { indicator, item } from "./Item.css";
+import { RadioGroupIndicator } from "./Indicator";
+import { item } from "./Item.css";
 
 export type RadioGroupItemProps = PropsWithBox<
   {
@@ -34,16 +35,7 @@ export const RadioGroupItem = forwardRef<HTMLDivElement, RadioGroupItemProps>(
         id={id}
         disabled={disabled}
       >
-        <RadioGroup.Indicator className={indicator({ disabled })} asChild>
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="6"
-            height="6"
-            fill="currentColor"
-          >
-            <circle cx="3" cy="3" r="3" fill="currentColor" />
-          </svg>
-        </RadioGroup.Indicator>
+        <RadioGroupIndicator disabled={disabled} asChild />
       </RadioGroup.Item>
       <Box
         as="label"

src/components/RadioGroup/index.ts

@@ -1,7 +1,9 @@
 import { RadioGroupRoot } from "./Group";
 import { RadioGroupItem as Item } from "./Item";
+import { RadioGroupIndicator as Indicator } from "./Indicator";
 
 export type { RadioGroupRootProps } from "./Group";
 export type { RadioGroupItemProps } from "./Item";
+export type { RadioGroupIndicatorProps } from "./Indicator";
 
-export const RadioGroup = Object.assign(RadioGroupRoot, { Item });
+export const RadioGroup = Object.assign(RadioGroupRoot, { Item, Indicator });