feat(c-radio): add group

Author: TylerAPfledderer

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

@@ -0,0 +1,66 @@
+import { PropType, defineComponent } from "vue"
+import { UseRadioGroupProps, useRadioGroup } from "./use-radio-group"
+import {
+  HTMLChakraProps,
+  ThemingProps,
+  chakra,
+  useMultiStyleConfig,
+} from "@chakra-ui/vue-system"
+import { RadioGroupProvider, RadioGroupStylesProvider } from "./radio-context"
+import { useThemingProps } from "@chakra-ui/vue-utils"
+
+export interface CRadioGroupProps
+  extends UseRadioGroupProps,
+    HTMLChakraProps<"div">,
+    Omit<ThemingProps<"Radio">, "orientation"> {}
+
+export const CRadioGroup = defineComponent({
+  name: "CRadioGroup",
+  props: {
+    dir: {
+      type: String as PropType<CRadioGroupProps["dir"]>,
+    },
+    disabled: {
+      type: Boolean as PropType<CRadioGroupProps["disabled"]>,
+    },
+    form: {
+      type: String as PropType<CRadioGroupProps["form"]>,
+    },
+    getRootNode: {
+      type: Function as PropType<CRadioGroupProps["getRootNode"]>,
+    },
+    id: {
+      type: String as PropType<CRadioGroupProps["id"]>,
+    },
+    ids: {
+      type: Object as PropType<CRadioGroupProps["ids"]>,
+    },
+    name: {
+      type: String as PropType<CRadioGroupProps["name"]>,
+    },
+    orientation: {
+      type: String as PropType<CRadioGroupProps["orientation"]>,
+    },
+    readonly: {
+      type: Boolean as PropType<CRadioGroupProps["readOnly"]>,
+    },
+  },
+  emits: ["change", "update:modelValue"],
+  setup(props, { slots, attrs }) {
+    const api = useRadioGroup(props)
+
+    const themeProps = useThemingProps(props)
+
+    const styles = useMultiStyleConfig("Radio", themeProps)
+
+    RadioGroupProvider(api)
+
+    RadioGroupStylesProvider(styles)
+
+    return () => (
+      <chakra.div __label="radio-group" {...api.value.rootProps} {...attrs}>
+        {slots.default?.(api.value)}
+      </chakra.div>
+    )
+  },
+})

packages/c-radio/src/index.ts

@@ -1 +1,2 @@
-export * from "./c-radio"
+export { CRadioGroup, type CRadioGroupProps } from "./c-radio-group"
+export { RadioGroupContext } from "./radio-context"

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

@@ -1,6 +1,8 @@
 import * as radio from "@zag-js/radio-group"
 import { createContext } from "@chakra-ui/vue-utils"
 import type { UseRadioGroupReturn } from "./use-radio-group"
+import { UnwrapRef } from "vue"
+import { createStylesContext } from "@chakra-ui/vue-system"
 
 export type RadioContext = Parameters<
   ReturnType<typeof radio.connect>["getRadioProps"]
@@ -11,10 +13,13 @@ export const [RadioProvider, useRadioContext] = createContext<RadioContext>({
   strict: true,
 })
 
-export type RadioGroupContext = radio.Context
+export type RadioGroupContext = UnwrapRef<UseRadioGroupReturn>
 
 export const [RadioGroupProvider, useRadioGroupContext] =
   createContext<UseRadioGroupReturn>({
     name: "CRadioGroupContext",
     strict: true,
   })
+
+export const [RadioGroupStylesProvider, useRadioGroupStyles] =
+  createStylesContext("CRadioGroup")

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

@@ -2,10 +2,11 @@ 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 { Optional } from "@chakra-ui/vue-utils"
 import type { RadioGroupContext } from "./radio-context"
 
-export type UseRadioGroupProps = RadioGroupContext & {
-  modelValue?: RadioGroupContext["value"]
+export type UseRadioGroupProps = Optional<radio.Context, "id"> & {
+  modelValue?: radio.Context["value"]
 }
 
 export const useRadioGroup = (props: UseRadioGroupProps) => {