fix(checkbox): switch back to gen id instead of use id

Signed-off-by: Zakaria Sahmane <[email protected]>

Author: Shyrro

packages/c-checkbox/src/checkbox.tsx

@@ -25,7 +25,7 @@ import {
   ThemingProps,
   SystemProps,
 } from "@chakra-ui/styled-system"
-import { SNAO, vueThemingProps, getValidChildren } from "@chakra-ui/vue-utils"
+import { SNAO, vueThemingProps, getValidChildren, genId } from "@chakra-ui/vue-utils"
 import { HTMLChakraProps } from "@chakra-ui/vue-system"
 import * as checkbox from "@zag-js/checkbox"
 import { normalizeProps, useMachine, mergeProps } from "@zag-js/vue"
@@ -179,9 +179,9 @@ export const CCheckbox = defineComponent({
       mergedProps as CFormControlProviderContext
     )
 
-    const id = useId(props.id)
+    const id = genId()
     const [rootId, inputId, controlId, labelId] = useIds(
-      `chakra-checkbox-${id.value}`,
+      `chakra-checkbox-${id}`,
       "root",
       "input",
       "control",
@@ -221,7 +221,7 @@ export const CCheckbox = defineComponent({
     })
 
     const context = computed<checkbox.Context>(() => ({
-      id: id.value,
+      id,
       ids: {
         root: rootId.value,
         input: inputId.value,

packages/c-checkbox/tests/__snapshots__/c-checkbox.test.ts.snap

@@ -9,17 +9,17 @@ exports[`should render properly 1`] = `
       class="chakra-checkbox chakra-1tw369l"
       data-part="root"
       data-scope="checkbox"
-      for="input-chakra-checkbox-1"
-      id="root-chakra-checkbox-1"
+      for="input-chakra-checkbox-EMPTY_STRING"
+      id="root-chakra-checkbox-EMPTY_STRING"
     >
       <input
         aria-invalid="false"
-        aria-labelledby="checkbox:1:label"
+        aria-labelledby="checkbox:EMPTY_STRING:label"
         class="chakra-checkbox__input"
         data-part="input"
         data-scope="checkbox"
         defaultchecked="false"
-        id="input-chakra-checkbox-1"
+        id="input-chakra-checkbox-EMPTY_STRING"
         style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap; word-wrap: normal;"
         type="checkbox"
       />
@@ -28,7 +28,7 @@ exports[`should render properly 1`] = `
         class="chakra-checkbox__control chakra-drpdfl"
         data-part="control"
         data-scope="checkbox"
-        id="control-chakra-checkbox-1"
+        id="control-chakra-checkbox-EMPTY_STRING"
       >
         <svg
           class="chakra-1mg6af5"