fix(checkbox): improve production build for function slots

Author: codebender828

.changeset/slow-tables-compare.md

@@ -0,0 +1,46 @@
+---
+"@chakra-ui/vue-anatomy": minor
+"@chakra-ui/c-accordion": minor
+"@chakra-ui/c-alert": minor
+"@chakra-ui/c-avatar": minor
+"@chakra-ui/c-breadcrumb": minor
+"@chakra-ui/c-button": minor
+"@chakra-ui/c-checkbox": minor
+"@chakra-ui/c-close-button": minor
+"@chakra-ui/c-code": minor
+"@chakra-ui/c-color-mode": minor
+"@chakra-ui/c-flex": minor
+"@chakra-ui/c-focus-lock": minor
+"@chakra-ui/c-form-control": minor
+"@chakra-ui/c-icon": minor
+"@chakra-ui/c-image": minor
+"@chakra-ui/c-input": minor
+"@chakra-ui/c-media-query": minor
+"@chakra-ui/c-modal": minor
+"@chakra-ui/c-motion": minor
+"@chakra-ui/c-pin-input": minor
+"@chakra-ui/c-popper": minor
+"@chakra-ui/c-portal": minor
+"@chakra-ui/c-reset": minor
+"@chakra-ui/c-scroll-lock": minor
+"@chakra-ui/c-skip-nav": minor
+"@chakra-ui/c-spinner": minor
+"@chakra-ui/c-tag": minor
+"@chakra-ui/c-theme-provider": minor
+"@chakra-ui/c-visually-hidden": minor
+"@chakra-ui/vue-next": minor
+"@chakra-ui/vue-layout": minor
+"@chakra-ui/nuxt-next": minor
+"@chakra-ui/vue-styled": minor
+"@chakra-ui/vue-system": minor
+"@chakra-ui/vue-test-utils": minor
+"@chakra-ui/vue-theme": minor
+"@chakra-ui/vue-theme-tools": minor
+"@chakra-ui/vue-utils": minor
+"@chakra-ui/vue-a11y": minor
+"@chakra-ui/vue-composables": minor
+"@chakra-ui/vue-auto-import": minor
+"@chakra-ui/vue-docs": minor
+---
+
+Create Media Query, Avatar, Counter and Checkbox Components"

components.d.ts

@@ -6,7 +6,7 @@
  *
  * This is a generated file. Do not edit it's contents.
  *
- * This file was generated on 2022-10-06T19:08:38.068Z
+ * This file was generated on 2022-12-11T15:07:27.518Z
  */
 
 import { ChakraProps, chakra } from "@chakra-ui/vue-system"
@@ -86,6 +86,8 @@ declare module "@vue/runtime-core" {
     CFormLabel: typeof import("@chakra-ui/vue-next")["CFormLabel"]
     CRequiredIndicator: typeof import("@chakra-ui/vue-next")["CRequiredIndicator"]
     CIcon: typeof import("@chakra-ui/vue-next")["CIcon"]
+    CImage: typeof import("@chakra-ui/vue-next")["CImage"]
+    CImg: typeof import("@chakra-ui/vue-next")["CImg"]
     CInput: typeof import("@chakra-ui/vue-next")["CInput"]
     CInputAddon: typeof import("@chakra-ui/vue-next")["CInputAddon"]
     CInputGroup: typeof import("@chakra-ui/vue-next")["CInputGroup"]
@@ -146,6 +148,7 @@ declare module "@vue/runtime-core" {
     CCollapse: typeof import("@chakra-ui/vue-next")["CCollapse"]
     CMotion: typeof import("@chakra-ui/vue-next")["CMotion"]
     CPinInput: typeof import("@chakra-ui/vue-next")["CPinInput"]
+    CPinInputClearButton: typeof import("@chakra-ui/vue-next")["CPinInputClearButton"]
     CPinInputField: typeof import("@chakra-ui/vue-next")["CPinInputField"]
     CPortal: typeof import("@chakra-ui/vue-next")["CPortal"]
     CSkipNavContent: typeof import("@chakra-ui/vue-next")["CSkipNavContent"]

packages/c-checkbox/src/checkbox-icon.tsx

@@ -158,7 +158,7 @@ export const CheckboxIcon = defineComponent(
 
     return () => (
       <CCheckboxTransition open={props.isChecked || props.isIndeterminate}>
-        {() => <IconEl.value {...attrs} />}
+        <IconEl.value {...attrs} />
       </CCheckboxTransition>
     )
   }

packages/c-checkbox/src/checkbox.tsx

@@ -62,6 +62,8 @@ const CCheckboxControl = chakra("span", {
   },
 })
 
+console.log("CCheckboxControl", CCheckboxControl)
+
 const CLabel = chakra("label", {
   baseStyle: {
     cursor: "pointer",
@@ -176,7 +178,9 @@ export const CCheckbox: ComponentWithProps<CCheckboxProps> = defineComponent({
   },
   emits: ["change", "update:modelValue"],
   setup(props, { slots, attrs, emit }) {
-    const group = useCheckboxGroupContext(computed(() => ({} as unknown)))
+    const group = useCheckboxGroupContext(
+      computed(() => ({} as CheckboxGroupContext))
+    )
     const ownProps = computed(() => omitThemingProps(props))
     const mergedProps = computed(() => mergeWith({}, group.value, props, attrs))
     const styles = useMultiStyleConfig("Checkbox", mergedProps)
@@ -314,6 +318,8 @@ export const CCheckbox: ComponentWithProps<CCheckboxProps> = defineComponent({
       const children = getValidChildren(slots)
       const hasChildren = children.length > 0
 
+      console.log("clonedIcon", clonedIcon)
+
       return (
         <chakra.div
           sx={{
@@ -334,7 +340,7 @@ export const CCheckbox: ComponentWithProps<CCheckboxProps> = defineComponent({
                     __css={styles.value.control}
                     {...api.value.controlProps}
                   >
-                    {clonedIcon.value}
+                    {() => clonedIcon.value}
                   </CCheckboxControl>
                   {hasChildren && (
                     <chakra.span