feat(c-radio): add radio

Author: TylerAPfledderer

packages/c-radio/package.json

@@ -31,7 +31,8 @@
     "@chakra-ui/vue-composables": "workspace:*",
     "@chakra-ui/vue-utils": "workspace:*",
     "@zag-js/radio-group": "0.7.0",
-    "@zag-js/vue": "0.7.0"
+    "@zag-js/vue": "0.7.0",
+    "@chakra-ui/styled-system": "2.9.0"
   },
   "devDependencies": {
     "vue": "^3.2.37"

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

@@ -7,7 +7,7 @@ import {
   useMultiStyleConfig,
 } from "@chakra-ui/vue-system"
 import { RadioGroupProvider, RadioGroupStylesProvider } from "./radio-context"
-import { useThemingProps } from "@chakra-ui/vue-utils"
+import { useThemingProps, vueThemingProps } from "@chakra-ui/vue-utils"
 
 export interface CRadioGroupProps
   extends UseRadioGroupProps,
@@ -44,6 +44,7 @@ export const CRadioGroup = defineComponent({
     readonly: {
       type: Boolean as PropType<CRadioGroupProps["readOnly"]>,
     },
+    ...vueThemingProps,
   },
   emits: ["change", "update:modelValue"],
   setup(props, { slots, attrs }) {

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

@@ -8,26 +8,126 @@
  * @see WAI-ARIA https://www.w3.org/TR/wai-aria-practices-1.2
  */
 
-import { defineComponent, h, Fragment, PropType } from "vue"
+import {
+  computed,
+  defineComponent,
+  h,
+  InputHTMLAttributes,
+  isVNode,
+  mergeProps,
+  PropType,
+  reactive,
+} from "vue"
 import {
   chakra,
-  DOMElements,
+  HTMLChakraProps,
+  type ThemingProps,
+  type StyleResolverProps,
+  useMultiStyleConfig,
 } from "@chakra-ui/vue-system"
+import * as VS from "@chakra-ui/vue-system"
+import { SNAO, vueThemingProps } from "@chakra-ui/vue-utils"
+import { RadioContext, useRadioGroupContext } from "./radio-context"
 
-export interface CRadioProps {}
+export interface CRadioProps
+  extends Omit<HTMLChakraProps<"label">, keyof RadioContext>,
+    ThemingProps<"Radio">,
+    RadioContext {
+  /**
+   * The spacing between the checkbox and its label text
+   * @default 0.5rem
+   * @type SystemProps["marginLeft"]
+   */
+  spacing?: StyleResolverProps["marginLeft"]
+  /**
+   * Additional props to be forwarded to the `input` element
+   */
+  inputProps?: InputHTMLAttributes
+}
 
 export const CRadio = defineComponent({
-    props: {
-      as: {
-        type: [Object, String] as PropType<DOMElements>,
-        default: "div",
-      },
+  props: {
+    value: {
+      type: String as PropType<CRadioProps["value"]>,
+      required: true,
+    },
+    disabled: {
+      type: Boolean as PropType<CRadioProps["disabled"]>,
+    },
+    invalid: {
+      type: Boolean as PropType<CRadioProps["invalid"]>,
+    },
+    readOnly: {
+      type: Boolean as PropType<CRadioProps["readOnly"]>,
     },
-    setup(props, { slots, attrs }) {
-      return () => (
-        <chakra.div as={props.as} {...attrs}>
-          {slots}
-        </chakra.div>
-      )
+    spacing: {
+      type: SNAO as PropType<CRadioProps["spacing"]>,
     },
-  })
+    ...vueThemingProps,
+  },
+  setup(props, { slots, attrs }) {
+    const groupApi = useRadioGroupContext()
+
+    const styleAttrs = computed(() => mergeProps(props, groupApi.value, attrs))
+
+    const styles = useMultiStyleConfig("Radio", styleAttrs)
+
+    const radioProps = reactive({
+      value: props.value,
+      disabled: props.disabled,
+      invalid: props.invalid,
+      readOnly: props.readOnly,
+    })
+
+    const inputProps = computed(() => {
+      const apiInputProps = groupApi.value.getRadioInputProps(radioProps)
+      const apiInputState = groupApi.value.getRadioState(radioProps)
+
+      return {
+        ...apiInputProps,
+        modelValue: apiInputState.isChecked,
+      }
+    })
+
+    const labelStyles = computed(() => ({
+      userSelect: "none",
+      marginStart: props.spacing,
+      ...styles.value.label,
+    }))
+
+    const controlStyles = computed(() => ({
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      flexShrink: 0,
+      ...styles.value.control,
+    }))
+
+    const RadioLabel = computed(() => {
+      return isVNode(slots.default) ? (
+        <chakra.span
+          __label="radio__label"
+          {...groupApi.value.getRadioLabelProps(radioProps)}
+        >
+          {slots.default?.()}
+        </chakra.span>
+      ) : null
+    })
+
+    return () => (
+      <chakra.label {...groupApi.value.getRadioProps(radioProps)} {...attrs}>
+        <chakra.input
+          __label="radio__input"
+          {...inputProps.value}
+          __css={labelStyles.value}
+        />
+        <chakra.span
+          __label="radio__control"
+          {...groupApi.value.getRadioControlProps(radioProps)}
+          __css={controlStyles.value}
+        />
+        {RadioLabel.value}
+      </chakra.label>
+    )
+  },
+})

packages/c-radio/src/index.ts

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

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

@@ -1,8 +1,10 @@
+import * as CSS from "csstype"
 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"
+import * as VS from "@chakra-ui/vue-system"
 
 export type RadioContext = Parameters<
   ReturnType<typeof radio.connect>["getRadioProps"]