feat(c-radio): create context and group composable

Author: TylerAPfledderer

packages/c-radio/package.json

@@ -28,6 +28,8 @@
   },
   "dependencies": {
     "@chakra-ui/vue-system": "workspace:*",
+    "@chakra-ui/vue-composables": "workspace:*",
+    "@chakra-ui/vue-utils": "workspace:*",
     "@zag-js/radio-group": "0.7.0",
     "@zag-js/vue": "0.7.0"
   },

packages/c-radio/src/radio-context.ts

@@ -0,0 +1,20 @@
+import * as radio from "@zag-js/radio-group"
+import { createContext } from "@chakra-ui/vue-utils"
+import type { UseRadioGroupReturn } from "./use-radio-group"
+
+export type RadioContext = Parameters<
+  ReturnType<typeof radio.connect>["getRadioProps"]
+>[0]
+
+export const [RadioProvider, useRadioContext] = createContext<RadioContext>({
+  name: "CRadioContext",
+  strict: true,
+})
+
+export type RadioGroupContext = radio.Context
+
+export const [RadioGroupProvider, useRadioGroupContext] =
+  createContext<UseRadioGroupReturn>({
+    name: "CRadioGroupContext",
+    strict: true,
+  })

packages/c-radio/src/use-radio-group.tsx

@@ -0,0 +1,30 @@
+import { computed, getCurrentInstance, reactive } from "vue"
+import { normalizeProps, useMachine } from "@zag-js/vue"
+import * as radio from "@zag-js/radio-group"
+import { useId } from "@chakra-ui/vue-composables"
+import type { RadioGroupContext } from "./radio-context"
+
+export type UseRadioGroupProps = RadioGroupContext & {
+  modelValue?: RadioGroupContext["value"]
+}
+
+export const useRadioGroup = (props: UseRadioGroupProps) => {
+  const reactiveProps = reactive(props)
+  const instance = getCurrentInstance()
+
+  const [state, send] = useMachine(
+    radio.machine({
+      ...reactiveProps,
+      id: useId().value,
+      value: reactiveProps.modelValue ?? reactiveProps.value,
+      onChange(details) {
+        instance?.emit("change", details.value)
+        instance?.emit("update:modelValue", details.value)
+      },
+    })
+  )
+
+  return computed(() => radio.connect(state.value, send, normalizeProps))
+}
+
+export type UseRadioGroupReturn = ReturnType<typeof useRadioGroup>