feat(layout): export Box, Square, Circle with theming props

Author: koca

packages/layout/src/box.ts

@@ -3,18 +3,14 @@ import {
   DOMElements,
   SystemStyleObject,
   HTMLChakraProps,
+  DeepPartial,
+  ComponentWithProps,
 } from '@chakra-ui/vue-system'
 import { computed, defineComponent, h, PropType } from '@vue/runtime-core'
 
 export interface BoxProps extends HTMLChakraProps<'div'> {}
 
-/**
- * Box is the most abstract component on top of which other chakra
- * components are built. It renders a `div` element by default.
- *
- * @see Docs https://vue.chakra-ui.com/docs/layout/box
- */
-export const CBox = defineComponent({
+const CBoxImpl = defineComponent({
   props: {
     as: {
       type: [String, Object] as PropType<DOMElements>,
@@ -35,6 +31,14 @@ export const CBox = defineComponent({
   },
 })
 
+/**
+ * Box is the most abstract component on top of which other chakra
+ * components are built. It renders a `div` element by default.
+ *
+ * @see Docs https://vue.chakra-ui.com/docs/layout/box
+ */
+export const CBox = CBoxImpl as ComponentWithProps<DeepPartial<BoxProps>>
+
 /**
  * As a constraint, you can't pass size related props
  * Only `size` would be allowed
@@ -52,7 +56,7 @@ export interface SquareProps extends Omit<BoxProps, Omitted> {
   centerContent?: boolean
 }
 
-export const CSquare = defineComponent({
+const CSquareImpl = defineComponent({
   props: {
     size: [Object, String, Number] as PropType<SquareProps['size']>,
     centerContent: {
@@ -85,7 +89,11 @@ export const CSquare = defineComponent({
   },
 })
 
-export const CCircle = defineComponent({
+export const CSquare = CSquareImpl as ComponentWithProps<
+  DeepPartial<SquareProps>
+>
+
+const CCircleImpl = defineComponent({
   setup(_, { slots, attrs }) {
     return () => {
       return h(
@@ -100,3 +108,7 @@ export const CCircle = defineComponent({
     }
   },
 })
+
+export const CCircle = CCircleImpl as ComponentWithProps<
+  DeepPartial<SquareProps>
+>