feat: docs, mdx, layout package

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

@@ -38,6 +38,8 @@ const CIconButton = defineComponent({
           ...props,
         },
         () => [
+          // whats the problem here?
+          // @ts-ignore
           h(CIcon, {
             name: props.icon,
           }),

packages/c-color-mode/src/color-mode-provider.ts

@@ -1,14 +1,5 @@
 import { __DEV__ } from '@chakra-ui/utils'
-import { createContext } from '@chakra-ui/vue-utils'
-import {
-  defineComponent,
-  Fragment,
-  getCurrentInstance,
-  h,
-  inject,
-  isRef,
-  ref,
-} from 'vue'
+import { inject, isRef, ref } from 'vue'
 import { ColorMode } from './color-mode.utils'
 
 export type { ColorMode }
@@ -41,3 +32,23 @@ export const useColorMode = (): ColorModeContext => {
     toggleColorMode,
   }
 }
+
+/**
+ * Change value based on color mode.
+ *
+ * @param light the light mode value
+ * @param dark the dark mode value
+ *
+ * @example
+ *
+ * ```js
+ * const Icon = useColorModeValue(MoonIcon, SunIcon)
+ * ```
+ */
+export function useColorModeValue<TLight = unknown, TDark = unknown>(
+  light: TLight,
+  dark: TDark
+) {
+  const { colorMode } = useColorMode()
+  return colorMode.value === 'dark' ? dark : light
+}

packages/core/package.json

@@ -31,7 +31,6 @@
   "dependencies": {
     "@chakra-ui/c-accordion": "0.1.0-alpha.1",
     "@chakra-ui/c-alert": "1.0.0-alpha.1",
-    "@chakra-ui/c-badge": "1.0.0-alpha.1",
     "@chakra-ui/c-button": "1.0.0-alpha.1",
     "@chakra-ui/c-close-button": "0.1.0-alpha.1",
     "@chakra-ui/c-color-mode": "0.1.0-alpha.1",

packages/core/src/index.ts

@@ -81,7 +81,6 @@ export * from '@chakra-ui/c-alert'
 
 // B
 export const CBox = chakra.div
-export * from '@chakra-ui/c-badge'
 export * from '@chakra-ui/c-button'
 
 // C

packages/layout/README.md

@@ -0,0 +1,11 @@
+# @chakra-ui/layout
+
+Chakra ui layout components that give you massive speed
+
+## Installation
+
+```sh
+yarn add @chakra-ui/layout
+# or
+npm i @chakra-ui/layout
+```

packages/layout/examples/base-badge.vue

@@ -0,0 +1,48 @@
+<template>
+  <chakra.div py="4">
+    <chakra.h3>Default Badge</chakra.h3>
+    <c-badge> New ! </c-badge>
+  </chakra.div>
+  <chakra.div py="4">
+    <chakra.h3>Outline Badges</chakra.h3>
+    <c-badge
+      v-for="(color, i) in colorSchemes"
+      :key="i"
+      :color-scheme="color"
+      variant="outline"
+      mr="2"
+    >
+      {{ color }}
+    </c-badge>
+  </chakra.div>
+  <chakra.div py="4">
+    <chakra.h3>Solid Badges</chakra.h3>
+    <c-badge
+      v-for="(color, i) in colorSchemes"
+      :key="i"
+      :color-scheme="color"
+      variant="solid"
+      mr="2"
+    >
+      {{ color }}
+    </c-badge>
+  </chakra.div>
+  <chakra.div py="4">
+    <chakra.h3>Subtle Badges</chakra.h3>
+    <c-badge
+      v-for="(color, i) in colorSchemes"
+      :key="i"
+      :color-scheme="color"
+      variant="subtle"
+      mr="2"
+    >
+      {{ color }}
+    </c-badge>
+  </chakra.div>
+</template>
+<script setup>
+import { CBadge } from '@chakra-ui/vue-layout'
+import { ref } from 'vue'
+
+const colorSchemes = ref(['gray', 'green', 'red', 'orange', 'purple', 'teal'])
+</script>

packages/layout/examples/base-link.vue

@@ -0,0 +1,13 @@
+<template>
+  <chakra.div py="4">
+    <chakra.h3>Link</chakra.h3>
+    <chakra.div py="4">
+      <!-- prettier-ignore -->
+      <c-link as="router-link" to="/" pr="4" color="blue.400" color-scheme="red">CLink with as="router-link"</c-link>
+      <c-link is-external href="/" color-scheme="red">CLink</c-link>
+    </chakra.div>
+  </chakra.div>
+</template>
+<script setup>
+import { CLink } from '@chakra-ui/vue-layout'
+</script>

packages/c-badge/package.json → packages/layout/package.json

@@ -1,7 +1,7 @@
 {
-  "name": "@chakra-ui/c-badge",
-  "description": "Chakra UI Vue | Badges are used to highlight an item s status for quick recognition component",
-  "version": "1.0.0-alpha.1",
+  "name": "@chakra-ui/vue-layout",
+  "description": "Chakra UI Vue | Chakra ui layout components that give you massive speed component",
+  "version": "0.1.0-alpha.1",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",
@@ -21,7 +21,10 @@
   "publishConfig": {
     "access": "public"
   },
-  "repository": "https://github.com/chakra-ui/chakra-ui-vue-next/tree/master/packages/c-badge",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/chakra-ui/chakra-ui-vue-next.git"
+  },
   "bugs": {
     "url": "https://github.com/chakra-ui/chakra-ui-vue-next/issues"
   },
@@ -37,14 +40,12 @@
     "watch:types": "cross-env tsc --emitDeclarationOnly --declaration --declarationDir dist/types --watch --incremental"
   },
   "dependencies": {
-    "@chakra-ui/utils": "^1.5.0",
-    "@chakra-ui/vue-system": "0.1.0-alpha.1"
-  },
-  "devDependencies": {
-    "vue": ">=3.0.5"
+    "@chakra-ui/styled-system": "^1.9.0",
+    "@chakra-ui/vue-system": "0.1.0-alpha.1",
+    "@chakra-ui/vue-utils": "0.1.0-alpha.1",
+    "@chakra-ui/vue-layout": "0.1.0-alpha.1"
   },
   "peerDependencies": {
-    "@chakra-ui/vue-system": "0.1.0-alpha.1",
-    "vue": "^3.0.5"
+    "vue": ">=3.0.5"
   }
 }

packages/c-badge/src/badge.ts → packages/layout/src/badge.ts

@@ -6,17 +6,15 @@ import {
   useStyleConfig,
 } from '@chakra-ui/vue-system'
 import { filterUndefined } from '@chakra-ui/utils'
+import { vueThemingProps } from './utils'
 
-const CBadge = defineComponent({
+export const CBadge = defineComponent({
   props: {
     as: {
       type: [Object, String] as PropType<DOMElements>,
       default: 'div',
     },
-    colorScheme: String as PropType<ThemingProps['colorScheme']>,
-    variant: String as PropType<ThemingProps['variant']>,
-    size: String as PropType<ThemingProps['size']>,
-    styleConfig: String as PropType<ThemingProps['styleConfig']>,
+    ...vueThemingProps,
   },
   setup(props, { slots, attrs }) {
     return () => {
@@ -46,5 +44,3 @@ const CBadge = defineComponent({
     }
   },
 })
-
-export default CBadge

packages/layout/src/index.ts

@@ -0,0 +1,2 @@
+export * from './link'
+export * from './badge'