fix: checkbox icon

Author: codebender828

@types/components.d.ts

@@ -1,12 +1,12 @@
 /**
- * Typescript support for @chakra-ui/vue-next2.0.0-beta.0 auto-imported
+ * Typescript support for @chakra-ui/vue-next2.0.0-beta.1 auto-imported
  * components using `unplugin-vue-components,`
  *
  * @see: https://github.com/antfu/unplugin-vue-components/#typescript
  *
  * This is a generated file. Do not edit it's contents.
  *
- * This file was generated on 2023-01-24T13:16:48.745Z
+ * This file was generated on 2023-01-26T01:35:24.938Z
  */
 
 import { ChakraProps, chakra } from "@chakra-ui/vue-system"
@@ -57,8 +57,6 @@ declare module "@vue/runtime-core" {
   /* Global component types for Volar auto-complete */
   export interface GlobalComponents {
     chakra: typeof import("@chakra-ui/vue-next")["chakra"]
-    CDarkMode: typeof import("@chakra-ui/vue-next")["CDarkMode"]
-    CLightMode: typeof import("@chakra-ui/vue-next")["CLightMode"]
     CAccordion: typeof import("@chakra-ui/vue-next")["CAccordion"]
     CAccordionButton: typeof import("@chakra-ui/vue-next")["CAccordionButton"]
     CAccordionIcon: typeof import("@chakra-ui/vue-next")["CAccordionIcon"]
@@ -79,9 +77,12 @@ declare module "@vue/runtime-core" {
     CIconButton: typeof import("@chakra-ui/vue-next")["CIconButton"]
     CCheckbox: typeof import("@chakra-ui/vue-next")["CCheckbox"]
     CCheckboxGroup: typeof import("@chakra-ui/vue-next")["CCheckboxGroup"]
+    CDarkMode: typeof import("@chakra-ui/vue-next")["CDarkMode"]
+    CLightMode: typeof import("@chakra-ui/vue-next")["CLightMode"]
     CFocusLock: typeof import("@chakra-ui/vue-next")["CFocusLock"]
     CFormErrorIcon: typeof import("@chakra-ui/vue-next")["CFormErrorIcon"]
     CFormErrorMessage: typeof import("@chakra-ui/vue-next")["CFormErrorMessage"]
+    CFormHelperText: typeof import("@chakra-ui/vue-next")["CFormHelperText"]
     CFormLabel: typeof import("@chakra-ui/vue-next")["CFormLabel"]
     CRequiredIndicator: typeof import("@chakra-ui/vue-next")["CRequiredIndicator"]
     CIcon: typeof import("@chakra-ui/vue-next")["CIcon"]
@@ -152,6 +153,7 @@ declare module "@vue/runtime-core" {
     CPortal: typeof import("@chakra-ui/vue-next")["CPortal"]
     CSkipNavContent: typeof import("@chakra-ui/vue-next")["CSkipNavContent"]
     CSkipNavLink: typeof import("@chakra-ui/vue-next")["CSkipNavLink"]
+    CSpinner: typeof import("@chakra-ui/vue-next")["CSpinner"]
     CScrollLock: typeof import("@chakra-ui/vue-next")["CScrollLock"]
     CVisuallyHidden: typeof import("@chakra-ui/vue-next")["CVisuallyHidden"]
     CVisuallyHiddenInput: typeof import("@chakra-ui/vue-next")["CVisuallyHiddenInput"]

components.d.ts

@@ -1,12 +1,12 @@
 /**
- * Typescript support for @chakra-ui/vue-next2.0.0-beta.0 auto-imported
+ * Typescript support for @chakra-ui/vue-next2.0.0-beta.1 auto-imported
  * components using `unplugin-vue-components,`
  *
  * @see: https://github.com/antfu/unplugin-vue-components/#typescript
  *
  * This is a generated file. Do not edit it's contents.
  *
- * This file was generated on 2023-01-24T13:16:48.745Z
+ * This file was generated on 2023-01-26T01:35:24.938Z
  */
 
 import { ChakraProps, chakra } from "@chakra-ui/vue-system"
@@ -55,11 +55,8 @@ type JsxComponentCustomProps = {
 
 declare module "@vue/runtime-core" {
   /* Global component types for Volar auto-complete */
-
   export interface GlobalComponents {
     chakra: typeof import("@chakra-ui/vue-next")["chakra"]
-    CDarkMode: typeof import("@chakra-ui/vue-next")["CDarkMode"]
-    CLightMode: typeof import("@chakra-ui/vue-next")["CLightMode"]
     CAccordion: typeof import("@chakra-ui/vue-next")["CAccordion"]
     CAccordionButton: typeof import("@chakra-ui/vue-next")["CAccordionButton"]
     CAccordionIcon: typeof import("@chakra-ui/vue-next")["CAccordionIcon"]
@@ -80,9 +77,12 @@ declare module "@vue/runtime-core" {
     CIconButton: typeof import("@chakra-ui/vue-next")["CIconButton"]
     CCheckbox: typeof import("@chakra-ui/vue-next")["CCheckbox"]
     CCheckboxGroup: typeof import("@chakra-ui/vue-next")["CCheckboxGroup"]
+    CDarkMode: typeof import("@chakra-ui/vue-next")["CDarkMode"]
+    CLightMode: typeof import("@chakra-ui/vue-next")["CLightMode"]
     CFocusLock: typeof import("@chakra-ui/vue-next")["CFocusLock"]
     CFormErrorIcon: typeof import("@chakra-ui/vue-next")["CFormErrorIcon"]
     CFormErrorMessage: typeof import("@chakra-ui/vue-next")["CFormErrorMessage"]
+    CFormHelperText: typeof import("@chakra-ui/vue-next")["CFormHelperText"]
     CFormLabel: typeof import("@chakra-ui/vue-next")["CFormLabel"]
     CRequiredIndicator: typeof import("@chakra-ui/vue-next")["CRequiredIndicator"]
     CIcon: typeof import("@chakra-ui/vue-next")["CIcon"]
@@ -153,6 +153,7 @@ declare module "@vue/runtime-core" {
     CPortal: typeof import("@chakra-ui/vue-next")["CPortal"]
     CSkipNavContent: typeof import("@chakra-ui/vue-next")["CSkipNavContent"]
     CSkipNavLink: typeof import("@chakra-ui/vue-next")["CSkipNavLink"]
+    CSpinner: typeof import("@chakra-ui/vue-next")["CSpinner"]
     CScrollLock: typeof import("@chakra-ui/vue-next")["CScrollLock"]
     CVisuallyHidden: typeof import("@chakra-ui/vue-next")["CVisuallyHidden"]
     CVisuallyHiddenInput: typeof import("@chakra-ui/vue-next")["CVisuallyHiddenInput"]
@@ -266,52 +267,4 @@ declare module "@vue/runtime-core" {
   }
 }
 
-declare module "vue" {
-  interface ComponentCustomProps extends ChakraProps {
-    id?: string
-    role?: string
-    tabindex?: number
-    role?: string
-    tabindex?: number | string
-    value?: unknown
-    // should be removed after Vue supported component events typing
-    // see: https://github.com/vuejs/vue-next/issues/1553
-    //      https://github.com/vuejs/vue-next/issues/3029
-    onBlur?: EventHandler
-    onOpen?: EventHandler
-    onEdit?: EventHandler
-    onLoad?: EventHandler
-    onClose?: EventHandler
-    onFocus?: EventHandler
-    onInput?: EventHandler
-    onClick?: EventHandler
-    onPress?: EventHandler
-    onCancel?: EventHandler
-    onChange?: EventHandler
-    onDelete?: EventHandler
-    onScroll?: EventHandler
-    onSubmit?: EventHandler
-    onSelect?: EventHandler
-    onConfirm?: EventHandler
-    onPreview?: EventHandler
-    onKeypress?: EventHandler
-    onTouchend?: EventHandler
-    onTouchmove?: EventHandler
-    onTouchstart?: EventHandler
-    onTouchcancel?: EventHandler
-    onMouseenter?: EventHandler
-    onMouseleave?: EventHandler
-    onMousemove?: EventHandler
-    onKeydown?: EventHandler
-    onKeyup?: EventHandler
-    onDeselect?: EventHandler
-    onClear?: EventHandler
-  }
-
-  interface HTMLAttributes {
-    onTouchmovePassive?: EventHandler
-    onTouchstartPassive?: EventHandler
-  }
-}
-
 export {}

package.json

@@ -20,7 +20,7 @@
     "prebuild": "pnpm clean",
     "build": "turbo run build --filter=!./examples/* --filter=!{./packages/test-utils}",
     "build:dev": "turbo run build:fast --filter=!./examples/* --filter=!{./packages/test-utils}",
-    "build:types": "ts-node scripts/generate-global-types.ts",
+    "build:types": "jiti scripts/generate-global-types.ts",
     "postbuild": "pnpm build:types && pnpm size",
     "start": "preconstruct watch",
     "csb:install": "pnpm && pnpm bootstrap",
@@ -53,7 +53,7 @@
     "pkg": "manypkg run",
     "pkgs:check": "manypkg check",
     "pkgs:fix": "manypkg fix",
-    "size": "echo `TODO: Analyze build sizes`",
+    "size": "echo TODO: Analyze build sizes",
     "analyze": "size-limit --why",
     "vitest": "vitest",
     "coverage": "vitest run --coverage"

packages/c-accordion/examples/allow-multiple.vue

@@ -42,5 +42,6 @@ import {
   CAccordionButton,
   CAccordionPanel,
   CAccordionIcon,
-} from "../dist"
+} from "../src"
+import { chakra } from "@chakra-ui/vue-next"
 </script>

packages/c-accordion/examples/allow-toggle.vue

@@ -42,7 +42,8 @@ import {
   CAccordionItem,
   CAccordionButton,
   CAccordionPanel,
-} from "@chakra-ui/c-accordion"
+} from "../src"
+import { chakra } from "@chakra-ui/vue-next"
 import { useToggle } from "@vueuse/core"
 const [isToggle] = useToggle(true)
 </script>

packages/c-accordion/examples/simple-accordion.vue

@@ -38,7 +38,8 @@ import {
   CAccordionItem,
   CAccordionButton,
   CAccordionPanel,
-} from "@chakra-ui/c-accordion"
+} from "../src"
+import { chakra } from "@chakra-ui/vue-next"
 import { useId, useIds } from "@chakra-ui/vue-composables"
 import { watchEffect } from "vue"
 
@@ -49,8 +50,8 @@ const data = [
 ]
 
 const id = useId()
-const idWithName = useId("with-name")
-const ids = useIds("accordion", "button", "panel", "item")
+const idWithName = useId()
+const ids = useIds(`accordion-${id}`, "button", "panel", "item")
 
 watchEffect(() => {
   console.log("id", id.value)

packages/c-accordion/tsup.config.ts

@@ -1,4 +1,5 @@
 import { defineConfig } from "tsup"
+import EsbuildPluginJSX from "unplugin-vue-jsx/esbuild"
 
 export default defineConfig({
   clean: true,
@@ -8,6 +9,12 @@ export default defineConfig({
       js: `.${format}.js`,
     }
   },
+  esbuildPlugins: [
+    // @ts-expect-error `EsbuildPluginJSX` does not extend `tsup.Plugin` type.
+    EsbuildPluginJSX({
+      include: [/.[jt]sx?$/],
+    }),
+  ],
   format: ["esm", "cjs"],
   entry: {
     "chakra-ui-c-accordion": "src/index.tsx",

packages/c-alert/tsup.config.ts

@@ -1,4 +1,5 @@
 import { defineConfig } from "tsup"
+import EsbuildPluginJSX from "unplugin-vue-jsx/esbuild"
 
 export default defineConfig({
   clean: true,
@@ -8,6 +9,12 @@ export default defineConfig({
       js: `.${format}.js`,
     }
   },
+  esbuildPlugins: [
+    // @ts-expect-error `EsbuildPluginJSX` does not extend `tsup.Plugin` type.
+    EsbuildPluginJSX({
+      include: [/.[jt]sx?$/],
+    }),
+  ],
   format: ["esm", "cjs"],
   entry: {
     "chakra-ui-c-alert": "src/index.tsx",

packages/c-avatar/examples/badge-c-avatar.vue

@@ -115,6 +115,7 @@
     </c-h-stack>
   </c-stack>
 </template>
-<script setup>
+<script setup lang="ts">
 import { CAvatar, CAvatarBadge } from "../src"
+import { chakra } from "@chakra-ui/vue-next"
 </script>

packages/c-avatar/src/c-avatar.tsx

@@ -223,29 +223,32 @@ export const CAvatar = defineComponent({
       isLoaded: computed(() => isLoaded.value),
     })
 
-    return () => (
-      <chakra.span
-        __label="avatar"
-        data-loaded={dataAttr(isLoaded.value)}
-        __css={avatarStyles.value}
-        {...attrs}
-      >
-        <CAvatarImage
-          src={props.src}
-          srcSet={props.srcSet}
-          loading={props.loading}
-          onLoad={handleLoaded}
-          onError={(e) => emit("error", e)}
-          initials={props.initials}
-          name={props.name}
-          // @ts-ignore
-          borderRadius={props.borderRadius}
-          iconLabel={props.iconLabel}
-          ignoreFallback={props.ignoreFallback}
-          {...extractedAttrs.value.imgAttrs}
-        />
-        {slots?.default?.()}
-      </chakra.span>
-    )
+    return () => {
+      console.log("render c-avatar", chakra.span)
+      return (
+        <chakra.span
+          __label="avatar"
+          data-loaded={dataAttr(isLoaded.value)}
+          __css={avatarStyles.value}
+          {...attrs}
+        >
+          <CAvatarImage
+            src={props.src}
+            srcSet={props.srcSet}
+            loading={props.loading}
+            onLoad={handleLoaded}
+            onError={(e) => emit("error", e)}
+            initials={props.initials}
+            name={props.name}
+            // @ts-ignore
+            borderRadius={props.borderRadius}
+            iconLabel={props.iconLabel}
+            ignoreFallback={props.ignoreFallback}
+            {...extractedAttrs.value.imgAttrs}
+          />
+          {slots?.default?.()}
+        </chakra.span>
+      )
+    }
   },
 }) as any as ComponentWithProps<CAvatarProps>