Merge pull request #280 from chakra-ui/develop

release @chakra-ui/[email protected]
chakra-ui · Feb 27, 2023 · a25addc · a25addc
2 parents 7c452f9 + 4564d8d
commit a25addc
Show file tree

Hide file tree

Showing 87 changed files with 1,796 additions and 143 deletions.
diff --git a/.changeset/spicy-doors-heal.md b/.changeset/spicy-doors-heal.md
@@ -0,0 +1,34 @@
+---
+"@chakra-ui/vue-composables": minor
+"@chakra-ui/c-close-button": minor
+"@chakra-ui/c-form-control": minor
+"@chakra-ui/c-live-region": minor
+"@chakra-ui/c-media-query": minor
+"@chakra-ui/c-scroll-lock": minor
+"@chakra-ui/c-breadcrumb": minor
+"@chakra-ui/c-accordion": minor
+"@chakra-ui/c-pin-input": minor
+"@chakra-ui/c-checkbox": minor
+"@chakra-ui/c-skip-nav": minor
+"@chakra-ui/c-textarea": minor
+"@chakra-ui/c-spinner": minor
+"@chakra-ui/c-avatar": minor
+"@chakra-ui/c-button": minor
+"@chakra-ui/c-motion": minor
+"@chakra-ui/vue-accessibilty": minor
+"@chakra-ui/c-alert": minor
+"@chakra-ui/c-image": minor
+"@chakra-ui/c-input": minor
+"@chakra-ui/c-modal": minor
+"@chakra-ui/c-table": minor
+"@chakra-ui/c-code": minor
+"@chakra-ui/c-menu": minor
+"@chakra-ui/vue-layout": minor
+"@chakra-ui/vue-system": minor
+"@chakra-ui/c-tag": minor
+"@chakra-ui/vue-utils": minor
+"@chakra-ui/vue-next": minor
+---
+
+Create Live Region, Textarea and useBreakpoint and useBreakpointValue hooks and
+components
diff --git a/@types/components.d.ts b/@types/components.d.ts
@@ -1,12 +1,12 @@
 /**
- * Typescript support for @chakra-ui/vue-next2.1.0-beta.2 auto-imported
+ * Typescript support for @chakra-ui/vue-next2.1.0-beta.3 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-02-25T17:54:59.918Z
+ * This file was generated on 2023-02-26T20:07:20.175Z
  */
 
 import { ChakraProps, chakra } from "@chakra-ui/vue-system"
@@ -155,9 +155,19 @@ declare module "@vue/runtime-core" {
     CStack: typeof import("@chakra-ui/vue-next")["CStack"]
     CStackDivider: typeof import("@chakra-ui/vue-next")["CStackDivider"]
     CStackItem: typeof import("@chakra-ui/vue-next")["CStackItem"]
+    CTable: typeof import("@chakra-ui/vue-next")["CTable"]
+    CTableCaption: typeof import("@chakra-ui/vue-next")["CTableCaption"]
+    CTableContainer: typeof import("@chakra-ui/vue-next")["CTableContainer"]
+    CTbody: typeof import("@chakra-ui/vue-next")["CTbody"]
+    CTd: typeof import("@chakra-ui/vue-next")["CTd"]
     CText: typeof import("@chakra-ui/vue-next")["CText"]
+    CTextarea: typeof import("@chakra-ui/vue-next")["CTextarea"]
+    CTfoot: typeof import("@chakra-ui/vue-next")["CTfoot"]
+    CTh: typeof import("@chakra-ui/vue-next")["CTh"]
+    CThead: typeof import("@chakra-ui/vue-next")["CThead"]
     CThemeProvider: typeof import("@chakra-ui/vue-next")["CThemeProvider"]
     CToastContainer: typeof import("@chakra-ui/vue-next")["CToastContainer"]
+    CTr: typeof import("@chakra-ui/vue-next")["CTr"]
     CUnorderedList: typeof import("@chakra-ui/vue-next")["CUnorderedList"]
     CVStack: typeof import("@chakra-ui/vue-next")["CVStack"]
     CVisuallyHidden: typeof import("@chakra-ui/vue-next")["CVisuallyHidden"]

diff --git a/_templates/generator/component/package.json.ejs.t b/_templates/generator/component/package.json.ejs.t
@@ -5,19 +5,20 @@ to: packages/<%=h.changeCase.paramCase(name)%>/package.json
 {
   "name": "<%= '@chakra-ui/' + h.changeCase.paramCase(name)%>",
   "description": "<%= 'Chakra UI Vue | ' + h.changeCase.sentence(description) + ' component'%>",
-  "version": "0.0.0-next.0",
-  "main": "<%= 'dist/chakra-ui-' + h.changeCase.paramCase(name) + '.cjs.js' %>",
-  "module": "<%= 'dist/chakra-ui-' + h.changeCase.paramCase(name) + '.esm.js' %>",
+  "version": "0.0.0-beta.0",
   "author": "Jonathan Bakebwa <codebender828@gmail.com>",
   "homepage": "https://github.com/chakra-ui/chakra-ui-vue-next#readme",
   "license": "MIT",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "typings": "dist/index.d.ts",
   "files": [
     "dist"
   ],
   "exports": {
     ".": {
-      "require": "<%= './dist/chakra-ui-' + h.changeCase.paramCase(name) + '.cjs.js' %>",
-      "default": "<%= './dist/chakra-ui-' + h.changeCase.paramCase(name) + '.esm.js' %>"
+      "require": "./dist/index.js",
+      "default": "./dist/index.mjs"
     }
   },
   "repository": {

diff --git a/_templates/generator/component/tsup.config.ts.ejs.t b/_templates/generator/component/tsup.config.ts.ejs.t
@@ -8,20 +8,14 @@ import EsbuildPluginJSX from "unplugin-vue-jsx/esbuild"
 export default defineConfig({
   clean: true,
   target: "es2019",
-  outExtension({ format }) {
-    return {
-      js: `.${format}.js`,
-    }
-  },
   esbuildPlugins: [
-    // @ts-expect-error `EsbuildPluginJSX` does not extend `tsup.Plugin` type.
     EsbuildPluginJSX({
       include: [/.[jt]sx?$/],
-    }),
+    }) as any,
   ],
+  metafile: true,
+  external: ["lodash.mergewith"],
   format: ["esm", "cjs"],
-  entry: {
-    "<%=h.changeCase.paramCase(name)%>": "src/index.tsx",
-  },
+  entry: ["src/**/*.(ts|tsx)"],
   keepNames: true,
 })
diff --git a/_templates/generator/module/package.json.ejs.t b/_templates/generator/module/package.json.ejs.t
@@ -4,29 +4,37 @@ to: packages/<%=h.changeCase.paramCase(name)%>/package.json
 
 {
   "name": "<%= '@chakra-ui/' + h.changeCase.paramCase(name)%>",
-  "version": "0.0.0-next.0",
-  "main": "<%= 'dist/chakra-ui-' + h.changeCase.paramCase(name) + '.cjs.js' %>",
-  "module": "<%= 'dist/chakra-ui-' + h.changeCase.paramCase(name) + '.esm.js' %>",
+  "description": "<%= 'Chakra UI Vue | ' + h.changeCase.pascalCase(name) + ' module'%>",
+  "repository": "https://github.com/chakra-ui/chakra-ui-vue-next.git",
+  "author": "Jonathan Bakebwa [email protected]",
+  "version": "0.0.0-beta.0",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "typings": "dist/index.d.ts",
   "files": [
     "dist"
   ],
   "exports": {
     ".": {
-      "require": "<%= './dist/chakra-ui-' + h.changeCase.paramCase(name) + '.cjs.js' %>",
-      "default": "<%= './dist/chakra-ui-' + h.changeCase.paramCase(name) + '.esm.js' %>"
+      "require": "./dist/index.js",
+      "default": "./dist/index.mjs"
     }
   },
-  "description": "<%= 'Chakra UI Vue | ' + h.changeCase.pascalCase(name) + ' module'%>",
-  "repository": "https://github.com/chakra-ui/chakra-ui-vue-next.git",
-  "author": "Jonathan Bakebwa [email protected]",
-  "license": "MIT",
+  "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"
+  },
+  "sideEffects": false,
   "scripts": {
-    "build": "rimraf ./dist && concurrently yarn:build:*",
-    "build:esm": "cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps",
-    "build:cjs": "cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps",
-    "watch": "concurrently yarn:watch:*",
-    "watch:esm": "cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps --watch",
-    "watch:cjs": "cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps --watch",
-    "watch:types": "cross-env tsc --emitDeclarationOnly --declaration --declarationDir dist/types --watch --incremental"
+    "clean": "rimraf dist .turbo",
+    "build": "tsup && pnpm build:types",
+    "build:fast": "tsup",
+    "build:types": "tsup src --dts-only",
+    "types:check": "tsc --noEmit",
+    "dev": "tsup --watch"
   }
 }
diff --git a/_templates/generator/tooling/package.json.ejs.t b/_templates/generator/tooling/package.json.ejs.t
@@ -5,29 +5,28 @@ to: tooling/<%=h.changeCase.paramCase(name)%>/package.json
 {
   "name": "<%= '@chakra-ui/' + h.changeCase.paramCase(name)%>",
   "version": "1.0.0",
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "typings": "dist/index.d.ts",
   "files": [
     "dist"
   ],
   "exports": {
     ".": {
-      "require": "./dist/cjs/index.js",
-      "default": "./dist/esm/index.js"
+      "require": "./dist/index.js",
+      "default": "./dist/index.mjs"
     }
   },
   "description": "<%= 'Chakra UI Vue | ' + h.changeCase.pascalCase(name) + ' module'%>",
   "repository": "https://github.com/chakra-ui/chakra-ui-vue-next.git",
   "author": "Jonathan Bakebwa [email protected]",
   "license": "MIT",
   "scripts": {
-    "build": "rimraf ./dist && concurrently yarn:build:*",
-    "build:esm": "cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps",
-    "build:cjs": "cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps",
-    "build:types": "cross-env tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
-    "watch": "concurrently yarn:watch:*",
-    "watch:esm": "cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps --watch",
-    "watch:cjs": "cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps --watch",
-    "watch:types": "cross-env tsc --emitDeclarationOnly --declaration --declarationDir dist/types --watch --incremental"
+    "clean": "rimraf dist .turbo",
+    "build": "tsup && pnpm build:types",
+    "build:fast": "tsup",
+    "build:types": "tsup src --dts-only",
+    "types:check": "tsc --noEmit",
+    "dev": "tsup --watch"
   }
 }
diff --git a/components.d.ts b/components.d.ts
@@ -1,12 +1,12 @@
 /**
- * Typescript support for @chakra-ui/vue-next2.1.0-beta.2 auto-imported
+ * Typescript support for @chakra-ui/vue-next2.1.0-beta.3 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-02-25T17:54:59.918Z
+ * This file was generated on 2023-02-26T20:07:20.175Z
  */
 
 import { ChakraProps, chakra } from "@chakra-ui/vue-system"
@@ -155,9 +155,19 @@ declare module "@vue/runtime-core" {
     CStack: typeof import("@chakra-ui/vue-next")["CStack"]
     CStackDivider: typeof import("@chakra-ui/vue-next")["CStackDivider"]
     CStackItem: typeof import("@chakra-ui/vue-next")["CStackItem"]
+    CTable: typeof import("@chakra-ui/vue-next")["CTable"]
+    CTableCaption: typeof import("@chakra-ui/vue-next")["CTableCaption"]
+    CTableContainer: typeof import("@chakra-ui/vue-next")["CTableContainer"]
+    CTbody: typeof import("@chakra-ui/vue-next")["CTbody"]
+    CTd: typeof import("@chakra-ui/vue-next")["CTd"]
     CText: typeof import("@chakra-ui/vue-next")["CText"]
+    CTextarea: typeof import("@chakra-ui/vue-next")["CTextarea"]
+    CTfoot: typeof import("@chakra-ui/vue-next")["CTfoot"]
+    CTh: typeof import("@chakra-ui/vue-next")["CTh"]
+    CThead: typeof import("@chakra-ui/vue-next")["CThead"]
     CThemeProvider: typeof import("@chakra-ui/vue-next")["CThemeProvider"]
     CToastContainer: typeof import("@chakra-ui/vue-next")["CToastContainer"]
+    CTr: typeof import("@chakra-ui/vue-next")["CTr"]
     CUnorderedList: typeof import("@chakra-ui/vue-next")["CUnorderedList"]
     CVStack: typeof import("@chakra-ui/vue-next")["CVStack"]
     CVisuallyHidden: typeof import("@chakra-ui/vue-next")["CVisuallyHidden"]

diff --git a/package.json b/package.json
@@ -75,7 +75,7 @@
     "@babel/runtime": "^7.20.13",
     "@chakra-ui/anatomy": "^2.0.1",
     "@chakra-ui/nuxt-next": "workspace:*",
-    "@chakra-ui/styled-system": "2.5.1",
+    "@chakra-ui/styled-system": "2.6.1",
     "@chakra-ui/theme": "^2.2.5",
     "@chakra-ui/theme-tools": "^2.0.17",
     "@chakra-ui/theme-utils": "^2.0.6",

diff --git a/packages/c-accordion/package.json b/packages/c-accordion/package.json
@@ -32,7 +32,7 @@
     "@chakra-ui/vue-system": "workspace:*",
     "@chakra-ui/vue-utils": "workspace:*",
     "@zag-js/accordion": "0.2.11",
-    "@chakra-ui/styled-system": "2.5.1",
+    "@chakra-ui/styled-system": "2.6.1",
     "@zag-js/vue": "^0.2.9"
   },
   "peerDependencies": {

diff --git a/packages/c-alert/package.json b/packages/c-alert/package.json
@@ -25,7 +25,7 @@
     "build:types": "tsup src --dts-only"
   },
   "dependencies": {
-    "@chakra-ui/styled-system": "2.5.1",
+    "@chakra-ui/styled-system": "2.6.1",
     "@chakra-ui/c-icon": "workspace:*",
     "@chakra-ui/vue-system": "workspace:*",
     "@chakra-ui/vue-utils": "workspace:*"

diff --git a/packages/c-avatar/package.json b/packages/c-avatar/package.json
@@ -32,7 +32,7 @@
   "dependencies": {
     "@chakra-ui/c-icon": "workspace:*",
     "@chakra-ui/c-image": "workspace:*",
-    "@chakra-ui/styled-system": "2.5.1",
+    "@chakra-ui/styled-system": "2.6.1",
     "@chakra-ui/theme-tools": "^2.0.17",
     "@chakra-ui/utils": "2.0.15",
     "@chakra-ui/vue-layout": "workspace:*",

diff --git a/packages/c-breadcrumb/package.json b/packages/c-breadcrumb/package.json
@@ -33,7 +33,7 @@
     "build:types": "tsup src --dts-only"
   },
   "dependencies": {
-    "@chakra-ui/styled-system": "2.5.1",
+    "@chakra-ui/styled-system": "2.6.1",
     "@chakra-ui/utils": "2.0.15",
     "@chakra-ui/vue-system": "workspace:*",
     "@chakra-ui/vue-utils": "workspace:*"

diff --git a/packages/c-button/package.json b/packages/c-button/package.json
@@ -30,7 +30,7 @@
     "@chakra-ui/utils": "2.0.15",
     "@chakra-ui/vue-system": "workspace:*",
     "@chakra-ui/vue-utils": "workspace:*",
-    "@chakra-ui/styled-system": "2.5.1"
+    "@chakra-ui/styled-system": "2.6.1"
   },
   "peerDependencies": {
     "vue": "3.2.47"

diff --git a/packages/c-checkbox/package.json b/packages/c-checkbox/package.json
@@ -30,7 +30,7 @@
     "build:types": "tsup src --dts-only"
   },
   "dependencies": {
-    "@chakra-ui/styled-system": "2.5.1",
+    "@chakra-ui/styled-system": "2.6.1",
     "@chakra-ui/c-form-control": "workspace:*",
     "@chakra-ui/c-motion": "workspace:*",
     "@chakra-ui/utils": "2.0.15",

diff --git a/packages/c-close-button/package.json b/packages/c-close-button/package.json
@@ -34,7 +34,7 @@
   },
   "dependencies": {
     "@chakra-ui/c-icon": "workspace:*",
-    "@chakra-ui/styled-system": "2.5.1",
+    "@chakra-ui/styled-system": "2.6.1",
     "@chakra-ui/utils": "2.0.15",
     "@chakra-ui/vue-system": "workspace:*",
     "@chakra-ui/vue-utils": "workspace:*"

diff --git a/packages/c-code/package.json b/packages/c-code/package.json
@@ -33,7 +33,7 @@
     "build:types": "tsup src --dts-only"
   },
   "dependencies": {
-    "@chakra-ui/styled-system": "2.5.1",
+    "@chakra-ui/styled-system": "2.6.1",
     "@chakra-ui/utils": "2.0.15",
     "@chakra-ui/vue-system": "workspace:*",
     "@chakra-ui/vue-utils": "workspace:*"

diff --git a/packages/c-form-control/package.json b/packages/c-form-control/package.json
@@ -35,7 +35,7 @@
     "@chakra-ui/vue-composables": "workspace:*",
     "@chakra-ui/vue-system": "workspace:*",
     "@chakra-ui/vue-utils": "workspace:*",
-    "@chakra-ui/styled-system": "2.5.1",
+    "@chakra-ui/styled-system": "2.6.1",
     "csstype": "^3.1.1"
   },
   "devDependencies": {

diff --git a/packages/c-image/package.json b/packages/c-image/package.json
@@ -30,7 +30,7 @@
     "build:types": "tsup src --dts-only"
   },
   "dependencies": {
-    "@chakra-ui/styled-system": "2.5.1",
+    "@chakra-ui/styled-system": "2.6.1",
     "@chakra-ui/utils": "2.0.15",
     "@chakra-ui/vue-system": "workspace:*",
     "@chakra-ui/vue-utils": "workspace:*"

diff --git a/packages/c-input/package.json b/packages/c-input/package.json
@@ -30,7 +30,7 @@
     "build:types": "tsup src --dts-only"
   },
   "dependencies": {
-    "@chakra-ui/styled-system": "2.5.1",
+    "@chakra-ui/styled-system": "2.6.1",
     "@chakra-ui/utils": "2.0.15",
     "@chakra-ui/vue-system": "workspace:*",
     "@chakra-ui/vue-utils": "workspace:*",

diff --git a/packages/c-live-region/README.md b/packages/c-live-region/README.md
@@ -0,0 +1,14 @@
+# `@chakra-ui/c-live-region`
+
+Creates a hidden live region with dynamic content based on triggered events to be read out by the screen reader on change of the content
+
+## Installation
+
+```sh
+# with pnpm
+pnpm add @chakra-ui/c-live-region
+# or with Yarn
+yarn i @chakra-ui/c-live-region
+# or with npm
+npm i @chakra-ui/c-live-region
+```
diff --git a/packages/c-live-region/examples/simple-live-region.vue b/packages/c-live-region/examples/simple-live-region.vue
@@ -0,0 +1,9 @@
+<template>
+  <button @click="region.speak('Filtering categories was successful')">
+    Click Me
+  </button>
+</template>
+<script setup lang="ts">
+import { useLiveRegion } from "../src/use-live-region"
+const region = useLiveRegion()
+</script>
diff --git a/packages/c-live-region/index.tsx b/packages/c-live-region/index.tsx
@@ -0,0 +1 @@
+export * from "./src"