chore: fix componsnts

Author: codebender828

components.d.ts

@@ -37,6 +37,8 @@ type JsxComponentCustomProps = {
     innerHTML?: JsxNode
   }
 
+declare var chakra: typeof import("@chakra-ui/vue-next")["chakra"]
+
 declare module "@vue/runtime-core" {
   import { chakra } from "@chakra-ui/vue-next"
 

package.json

@@ -55,7 +55,7 @@
     "@babel/preset-env": "^7.15.0",
     "@babel/preset-typescript": "^7.12.7",
     "@chakra-ui/styled-system": "^1.16.0",
-    "@chakra-ui/utils": "^1.8.2",
+    "@chakra-ui/utils": "^1.9.1",
     "@changesets/changelog-github": "^0.3.0",
     "@changesets/cli": "^2.14.1",
     "@commitlint/cli": "^11.0.0",
@@ -69,7 +69,7 @@
     "@manypkg/cli": "^0.17.0",
     "@mdx-js/rollup": "^2.0.0-rc.2",
     "@popperjs/core": "^2.8.4",
-    "@preconstruct/cli": "^2.1.1",
+    "@preconstruct/cli": "^2.1.5",
     "@size-limit/file": "^5.0.3",
     "@size-limit/webpack": "^5.0.3",
     "@testing-library/jest-dom": "^5.14.1",

packages/c-breadcrumb/package.json

@@ -28,8 +28,8 @@
     "clean": "rimraf dist"
   },
   "dependencies": {
-    "@chakra-ui/styled-system": "^1.10.0",
-    "@chakra-ui/utils": "^1.8.2",
+    "@chakra-ui/styled-system": "^1.16.0",
+    "@chakra-ui/utils": "^1.9.1",
     "@chakra-ui/vue-system": "0.1.0-alpha.8",
     "@chakra-ui/vue-utils": "0.1.0-alpha.8"
   },

packages/c-breadcrumb/src/c-breadcrumb.tsx

@@ -8,7 +8,7 @@
  * @see WAI-ARIA https://www.w3.org/TR/wai-aria-practices-1.2
  */
 
-import { defineComponent, PropType, computed, cloneVNode, h, VNode } from "vue"
+import { defineComponent, PropType, computed, cloneVNode, h, VNode, DefineComponent } from "vue"
 import {
   chakra,
   HTMLChakraProps,
@@ -57,7 +57,7 @@ export interface BreadcrumbProps
  *
  * @see Docs https://next.vue.chakra-ui.com/breadcrumb
  */
-export const CBreadcrumb = defineComponent(
+export const CBreadcrumb: DefineComponent<BreadcrumbProps> = defineComponent(
   (props: BreadcrumbProps, { attrs, slots }) => {
     const themingProps = computed<ThemingProps>(() =>
       filterUndefined({
@@ -149,8 +149,11 @@ export interface BreadcrumbSeparatorProps extends HTMLChakraProps<"div"> {
  * The `CBreadcrumbSeparator` component is the separator for
  * each breacrumb item.
  */
-export const CBreadcrumbSeparator = defineComponent(
-  (props: BreadcrumbSeparatorProps, { attrs, slots }) => {
+export const CBreadcrumbSeparator = defineComponent({
+  props: {
+    spacing: CBreadcrumb.props.spacing,
+  },
+  setup(props, { attrs, slots }) {
     const styles = useStyles()
     const separatorStyles = computed<SystemStyleObject>(() => ({
       display: "flex",
@@ -169,11 +172,7 @@ export const CBreadcrumbSeparator = defineComponent(
       </chakra.span>
     )
   }
-)
-
-CBreadcrumbSeparator.props = {
-  spacing: CBreadcrumb.props.spacing,
-}
+})
 
 // @ts-ignore "name" property is typically read-only for functional components
 CBreadcrumbSeparator.name = "CBreadcrumbSeparator"
@@ -191,7 +190,7 @@ export interface BreadcrumbItemProps
   extends BreadcrumbItemOptions,
     ChakraProps {}
 
-export const CBreadcrumbItem = defineComponent(
+export const CBreadcrumbItem: DefineComponent<BreadcrumbItemProps> = defineComponent(
   (props: BreadcrumbItemProps, { attrs, slots }) => {
     const styles = useStyles()
     const itemStyles = computed<SystemStyleObject>(() => ({
@@ -227,7 +226,6 @@ export const CBreadcrumbItem = defineComponent(
         <chakra.li __label="breadcrumb__list-item" __css={itemStyles.value}>
           {children}
           {!props.isLastChild && (
-            // @ts-expect-error
             <CBreadcrumbSeparator spacing={props.spacing}>
               {() => props.separator}
             </CBreadcrumbSeparator>
@@ -261,7 +259,7 @@ export interface BreadcrumbLinkProps extends ChakraProps {
  * It renders a `span` when it matches the current link. Otherwise,
  * it renders an anchor tag.
  */
-export const CBreadcrumbLink = defineComponent(
+export const CBreadcrumbLink: DefineComponent<BreadcrumbLinkProps> = defineComponent(
   (props: BreadcrumbLinkProps, { attrs, slots }) => {
     const styles = useStyles()
 

packages/c-button/package.json

@@ -22,7 +22,7 @@
   "dependencies": {
     "@chakra-ui/c-icon": "1.0.0-alpha.8",
     "@chakra-ui/c-spinner": "1.0.0-alpha.8",
-    "@chakra-ui/utils": "^1.8.2",
+    "@chakra-ui/utils": "^1.9.1",
     "@chakra-ui/vue-system": "0.1.0-alpha.8",
     "@chakra-ui/vue-utils": "0.1.0-alpha.8"
   },

packages/c-button/src/button-group.ts

@@ -47,11 +47,13 @@ const [ButtonGroupProvider, useButtonGroup] = createContext<ButtonGroupContext>(
   }
 )
 
+// @ts-ignore
 const CButtonGroup = defineComponent({
   name: "CButtonGroup",
   props,
   setup(props, { attrs, slots }) {
     ButtonGroupProvider(
+      // @ts-ignore
       computed(() => ({
         size: props.size,
         colorScheme: props.colorScheme,

packages/c-close-button/package.json

@@ -29,8 +29,8 @@
   },
   "dependencies": {
     "@chakra-ui/c-icon": "1.0.0-alpha.8",
-    "@chakra-ui/styled-system": "^1.10.0",
-    "@chakra-ui/utils": "^1.8.2",
+    "@chakra-ui/styled-system": "^1.16.0",
+    "@chakra-ui/utils": "^1.9.1",
     "@chakra-ui/vue-system": "0.1.0-alpha.8",
     "@chakra-ui/vue-utils": "0.1.0-alpha.8"
   },

packages/c-code/package.json

@@ -28,7 +28,7 @@
     "clean": "rimraf dist"
   },
   "dependencies": {
-    "@chakra-ui/utils": "^1.8.2",
+    "@chakra-ui/utils": "^1.9.1",
     "@chakra-ui/vue-system": "0.1.0-alpha.8",
     "@chakra-ui/vue-utils": "0.1.0-alpha.8"
   },

packages/c-color-mode/package.json

@@ -27,7 +27,7 @@
     "clean": "rimraf dist"
   },
   "dependencies": {
-    "@chakra-ui/utils": "^1.8.2"
+    "@chakra-ui/utils": "^1.9.1"
   },
   "devDependencies": {
     "vue": "^3.2.29"

packages/c-focus-lock/package.json

@@ -28,7 +28,7 @@
     "clean": "rimraf dist"
   },
   "dependencies": {
-    "@chakra-ui/utils": "^1.8.2",
+    "@chakra-ui/utils": "^1.9.1",
     "@chakra-ui/vue-system": "0.1.0-alpha.8",
     "@chakra-ui/vue-utils": "0.1.0-alpha.8",
     "focus-trap": "^6.3.0"