chakra-ui / chakra-ui-vue-next

⚡️ The next most epic version of Chakra UI Vue based on Vue 3 🚀(WIP)

Build Accessible React Apps with Speed ⚡️

Chakra UI is a comprehensive library of accessible, reusable, and composable React components that streamlines the development of modern web applications and websites. The library offers a diverse range of components that can be easily combined to build complex user interfaces while adhering to accessibility best practices.

Table of contents

• 📋 Documentation
• 🚀 Features
• 📦 Installation
• 💻 Usage
• 📚 CodeSandbox Templates
• 📖 create-react-app Templates
• 📝 Contributing
• 💖 Support
• 🙌 Testimonials
• 🏆 Awards and Mentions
• ✨ Contributors
• ⚖️ License

Documentation

It's the https://chakra-ui.com website for the latest version of Chakra UI. For older versions head over here

• v1: https://v1.chakra-ui.com
• v0: https://v0.chakra-ui.com

Features

• Ease of Styling: Chakra UI contains a set of layout components like Box and Stack that make it easy to style your components by passing props. Learn more
• Flexible & composable: Chakra UI components are built on top of a React UI Primitive for endless composability.
• Accessible. Chakra UI components follow the WAI-ARIA guidelines specifications and have the right aria-* attributes.
• Dark Mode 😍: Most components in Chakra UI are dark mode compatible.

Installation

To use Chakra UI components, all you need to do is install the @chakra-ui/react package and its peer dependencies:

# with Yarn
$ yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6

# with npm
$ npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6

# with pnpm
$ pnpm add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6

# with Bun
$ bun add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6

Usage

To start using the components, please follow these steps:

1. Wrap your application with the ChakraProvider provided by @chakra-ui/react.

import { ChakraProvider } from "@chakra-ui/react"

// Do this at the root of your application
function App({ children }) {
  return <ChakraProvider>{children}</ChakraProvider>
}

Optionally, you can wrap your application with the ColorModeProvider so you can toggle between light and dark mode within your app.

2. Now you can start using components like so!:

import { Button } from "@chakra-ui/react"

function Example() {
  return <Button>I just consumed some ⚡️Chakra!</Button>
}

More guides on how to get started are available here

CodeSandbox Templates

• JavaScript Starter: https://codesandbox.io/s/chakra-ui-javascript-lzzg9
• TypeScript Starter: https://codesandbox.io/s/chakra-ui-typescript-pomi8
• NextJS TypeScript Starter: https://codesandbox.io/s/chakra-ui-next-js-typescript-kxvyr

create-react-app Templates

Check out our guide for information on how to use our official create-react-app templates.

Contributing

Feel like contributing? That's awesome! We have a contributing guide to help guide you.

Our docsite lives in a separate repo. If you're interested in contributing to the documentation, check out the docsite contribution guide.

Support Chakra UI

Organizations

Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]

Individuals

By donating $5 or more you can support the ongoing development of this project. We'll appreciate some support. Thank you to all our supporters! 🙏 [Contribute]

Testimonials

People throw React component libraries and design systems at me regularly. This might be the best one I've seen. The APIs are simple but composable and the accessibility on the couple components I looked is complete.

Great work @thesegunadebayo, really inspiring work. – Ryan Florence

Awesome new open-source component library from @thesegunadebayo. Really impressive stuff! – Colm Tuite

This is incredible work. Amazing job Segun! – Lee Robinson

Chakra UI is glorious! I love the consistent use of focus styling and the subtle animation – Guillermo ▲

Awards and Mentions

We've been extremely humbled to receive awards and mentions from the community for all the innovation and reach Chakra UI brings to the JavaScript ecosystem.

	Solution Worth Pursuing Technology Radar (2020–2021)
	The Most Impactful Contribution to the community Open Source Awards (2020)

Contributors

Thanks goes to these wonderful people

Segun Adebayo 💻 🚧 📖 💡 🎨	Tioluwani Kolawole 📖 💡 🚧	Devansh Jethmalani 💻	Adrian Aleixandre 💻 📖	Lee 📖	Kristóf Poduszló 💻 🤔 🐛 📖	Justin Hall 💻
Mark Chandler 💻 ⚠️ 📖 🚧	Folasade Agbaje 💻 🤔	Christian Nwamba 📖	Jonathan Bakebwa 📖 🤔	Alex Luong 💻 🔌	Jesco Wüster 💻	Dusty Doris 💻
Alex Lobera 💻	Tommaso De Rossi 💻	Odi 💻	Hendrik Niemann 💻	Matt Rothenberg 💻 💡	Luis Felipe Zaguini 💻	Jean 💻
Temitope Ajiboye 📖	Jonathan Kim 💻	Chris Thompson 💻	WALTER KIMARO 💻	Jack Leslie 💻	Ken-Lauren Daganio 💻	Ramon 💻
jess 📖 🔍	Ayelegun Kayode Michael 💻	Tal Williams 💻	Trevor Blades 💻 📖 🐛	Gord Lea 💻	Aggelos Arvanitakis 💻	Douglas Gabriel 💻
Martin Nordström 💻	Danny Tatom 💻	Simon Collins 💻	Santi Albo 💻 📖	PILO7980 💻	Ishimoto Koji 💻	Jeff Wen 💻
Pablo Saez 💻	Nejc Ravnik 💻	Julien Viala 💻	Sebastian Trebunak 💻 📖	Adam Plante 💻	Lúcio Rubens 💻	Jason Miazga 💻 📖
Gonzalo Pozzo 💻	Christian 💻 🚇	Christian Hagendorn 💻	Andrey Krasnov 💻	Dony Sukardi 💻	Meng 💻	Gabriele Belluardo 💻
Francois Best 💻	Tianci He 💻	Steven 💻	Baptiste Adrien 💻	Rob Bevan 💻	Tomasz 💻	徐愷 💻
David Wippel 💻	Naveen 💻	Vincent 💻	Osamah Aldoaiss 💻	Fred K. Schott 💻	Jared Palmer 💻	Austin Walela 💻
Tony Narlock 💻 📖	Thomas Maximini 💻	David Baumgold 💻	ralphilius 💻	Rahul Rangnekar 💻	Pierre Nel 💻	Pierre Grimaud 💻
Whisp R&D 💻	Makenna Smutz 💻 📖 🤔	Nelson Reitz 💻	Mohamed Nainar 📖	Mustafa Turhan 📖	Kim Røen 📖	Justin Mak 💻
Jeremy Davis 💻	Jeremy Lu 📖 💻	Ivan Dalmet 📖 💻 🔌	Dillon Curry 💻	idfunctor 💻	denkigai 💻	Aaron Adams 💻
Abdulazeez Adeshina 💻	Sandro 💻	Premkumar Shanmugam 💻	Tobias Meixner 💻	Jeremie Leblanc 💻	Kelvin Oghenerhoro 💻	David J. Felix 💻
Brody McKee 📖	Per Svensson 💻	Patrick Cason 📖	Ivo Ilić 💻	Avaneesh Tripathi 💻	balibebas 📖	Navin Moorthy 💻 📖
Tim Kindberg 📖	iodar 📖	MAO YUFENG 📖	Peng Jie 💻 📖	James Gee 💻 ⚠️ 💡	Anton 📖	Damnjan Lukovic 📖
Stanila Andrei 💻	Ekunola Ezekiel 💻	Ben Mitchinson 📖	Jess Telford 💻	Simo Aleksandrov 📖	Héricles Emanuel 💻	CodinCat 📖
Sam Dawson 🤔	hy2k 💻	Pierre Ortega 💻	Kerem Sevencan 📖	harveyhalwin 📖	Mansour benyoucef 📖	Andrew Garrison 📖
Carlos Rodrigues 📖	Dwight Watson 📖	ChasinHues 📖	Nahuel Greco 📆 🐛	Pablo Rocha 📖	Dustin Larimer 💻 🎨	Juliano Farias 📖
Joe Bell 🐛 💻	Henning Pohlmeyer 💻	Sivert Schou Olsen 📖	Andrei Lazarescu 📖	José Teixeira 🐛	Adriano Resende 📖	Victor Bastos 📖
Vincent 📖	Candice 🎨 🐛 📖	Dave Bauman 📖	TimKolberger 🐛 📖 💻	Stephane Mensah 🐛	iskanderbroere 📖	Dominik Sumer 💻
Pavel 'Strajk' Dolecek 📖	Keshav Bohra 📖	okezieuc 📖	Clayton Faria 📖	Andrew Ellis 💻 🐛 📖	Joel Gallant 🐛	Jaya Krishna Namburu 💻
Ifeoma Imoh 📖	Jason Adkison 🐛	Gauthier Rodaro 🐛	Tom Dohnal 💻	Sam Margalit 🐛	Marcus Wood 💻	Spencer Duball 📖
Jacob Arriola 📖	Kenley Jean 📖	Dennis Morello 🐛	Umar Gora 📖	Zyclotrop-j 💻	Hong Suk Woo 📖	Junho Yeo 📖
Thomas Siller ⚠️ 💻	Samuel Kauffmann 📖	Jozef Mikuláš 💻	João Victor 💻	yuichiro miyamae 📖	Gifa Eriyanto 🐛	Yuzi ⚠️ 💻
songheewon 📖	Prasanna Venkatesh T S 📖	anthowm 📖	Osama Ahmaro 🐛	Danan Wijaya 📖	electather 🐛	Shubham Kaushal 📖
Petter Sæther Moen 📖	Herman Nygaard 📖	jnmsl 📖	Mohamed Sayed 💻	Sam Poder 📖	Dominic Lee 📖 💻	Feras Aloudah 🤔
JP Ungaretti 📖	Endika Intxaurtieta 📖	Matt Wells 💻	Anant Jain 📖	Tom Chen 📖 🚇	Ernie Miranda 📖	bjoluc 📖
Sujit Pradhan 📖 💻	Abhishek Kashyap 📖	Kristian Djaković 💻	Antoniel Magalhães 💻	Griko Nibras 🤔 💻	imalbert 📖	mcha 💻 ⚠️
Hasib Hassan 📖	Jamie Rolfs 🤔 📖 💻	Surabhi Gupta 📖	Ningaro 🐛	Monae 💻	Wade McDaniel 📖	Gordon Goldbach 💻
Bhish 💻	Amilkar Munoz 📖	Samar Mohan 💻	João Paulo Rodrigues 📖	Avery Freeman 📖	Daniel Schulz 🐛 💻 📖 🤔	Michael Kilbane 💻
ngxCoder 💻	Kristofer Giltvedt Selbekk 📖	Johann Ehlers 📖 💻	Lukas Bach 💻	Lazar Nikolov 🐛	iwata 🐛 💻	Lee seung chan 💻
pomSense 💻	be-student 📖	Tatsuya Itakura 💻 🚧	Yuku Kotani 💻 🚧	Vadim Demedes 💻

(emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!

Testing supported by

License

MIT © Segun Adebayo

chakra-ui-vue-next's Issues

Add `c-progress` components

Visually indicates the current level of the progress bar.

This is a set of components denoting a linear and circular progress bar with labeling for accessibility.

See React Package Progress

There are separate files containing reusable internal components for the progress bars, such as a Shape component to help define the SVG and structure of CircleProgress

Add `c-visibility` component

Feature request

Add the Visibility component to the Vue package.

This is an existing component in the React package to control visibility of its children based on a breakpoint.

🚨Important

Depends on the useMediaQuery composable (see issue #182), so this component can not be built yet until a PR is merged and issue closed, or unless an alternative approach is given.

Update scaffold and components to tsx

For improved readability and to assist in the update of the documentation for future contributors (see Issue #168 ), there are a couple of existing components that should convert their rendering from h() to tsx.

In addition, update the component template for hygen generator to reflect this for future components that are created.

BUG: CPopper component loses reference element during HMR

Bug report

There's a weird bug I've spent a lot of time trying to figure out but haven't had much progress on yet.

When initially loading the page, the vue-popper composable hook works just fine. However during development(HMR with tie), when the template is changed where it's consumed, the referenceElement is no longer found by popperjs, even though it can be logged into the DOM.

TODO: Add reproduction

Describe the bug

To reproduce

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Minimal reproduction

Expected behavior

Screenshots

System information

• OS: [e.g. macOS, Windows]
• Browser (if applies): [e.g. Chrome, Safari]
• Version of @chakra-ui/core: [e.g. 1.0.0-rc.3]
• Version of Node.js: [e.g. 12.11.1]

Additional context

Add `usePrefersReducedMotion` composable

Retrieves the user's animation preference.

See React package usePrefersReducedMotion

🚨Important

Depends on useMediaQuery for the check. Consider this or an alternative.

Add `useQuery` composable

Feature request

Add the useQuery composable to the Vue package.

This is an existing function in the React package, currently as support for the media query components 'Show' and 'Hide' (components not yet in the Vue package).

It takes a breakpoint token value from the Chakra theme config and returns a media query string with a min-width or max-width.

Add `c-toast` component

Used to give feedback to users after an action has taken place.

See React Package Toast

Add `c-popover` component

Non-modal dialog that floats around a trigger.
It is used to display contextual information to the user, and should be paired with a clickable trigger element.

See React Package Popover

failed to start project following Setup the Project in CONTRIBUTING.md

failed to start project following Setup the Project in CONTRIBUTING.md

Describe the bug

± |develop ✓| → yarn dev
yarn run v1.22.10
$ NODE_ENV=development vite serve playground --config ./vite.config.ts
failed to load config from /home/ming/learn/js/chakra-ui/chakra-ui-vue-next/vite.config.ts
error when starting dev server:
Error: Cannot find module '/home/ming/learn/js/chakra-ui/chakra-ui-vue-next/node_modules/@chakra-ui/vue-auto-import/dist/cjs/index.js'
    at createEsmNotFoundErr (internal/modules/cjs/loader.js:912:15)
    at finalizeEsmResolution (internal/modules/cjs/loader.js:905:15)
    at resolveExports (internal/modules/cjs/loader.js:437:14)
    at Function.Module._findPath (internal/modules/cjs/loader.js:477:31)
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:872:27)
    at Function.Module._load (internal/modules/cjs/loader.js:730:27)
    at Module.require (internal/modules/cjs/loader.js:957:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (/home/ming/learn/js/chakra-ui/chakra-ui-vue-next/vite.config.ts:33:41)
    at Module._compile (internal/modules/cjs/loader.js:1068:30)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

To reproduce

1. git clone repo
2. yarn bootstrap
3. yarn dev

Additional context

i noticed that there are not dist folder in chakra-ui-vue-next/node_modules/@chakra-ui/vue-auto-import.

seems command yarn bootstrap does not aim to generate above dist folder, after i search lerna docment then run lerna run build, dist is generated there and 'yarn dev' works

Add `c-number-input` component

Component used to group the increment and decrement button spinners

See React Package NumberInput

Add `c-radio` components and composables

Used in forms when a user needs to select a single value from several options.

This is a set of components and composables, including:

• Radio to render a single radio
• RadioGroup for form control with a set of radios (using either Radio or the native element)
• useRadio and useRadioGroup that can be used instead to create custom radios.

See React Package Radio

Add `c-slider` component

Used to allow users to make selections from a range of values.

It provides context and functionality for all slider components.

See React package Slider

🚨 Important

React version uses multiple hooks. Consider building these hooks first if need be, or look at alternatives from VueUse

• usePanEvent
• useControllableState
• useCallbackRef (not needed)
• useUpdateEffect
• useSizes

Add `c-editable` component

Multi-component used for inline renaming of some text.
It appears as normal UI text but transforms into a text input field when the user clicks or focuses on it.

See React Package Editable

🚨 Important

Depends on multiple Chakra hooks and components, some currently not present in the Vue package. Consider later build.

Is this project abandoned?

I don't see a lot of activity, but I was hoping to try Chakra with Nuxt 3. Is this project still active?

feat: add `v-model` support for `chakra` factory components

Feat: add v-model support for chakra factory components

User would like to do this:

<template>
  <chakra.input type="text" v-model="input" />
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      input: "",
    };
  },
};
</script>

Is your feature request related to a problem? Please describe.

Cannot use two-way binding for components generated by chakra factory function

Reproduction

https://codesandbox.io/s/charka-input-issue-forked-9m5mw?file=/src/App.vue:0-350

Describe alternatives you've considered

Additional context

Add `c-transition` components

Component tandem used to select one item from a list of options.

See React package transitions

A couple of the transition components have already been added: CCollapse and CMotion and CAnimatePresence. Utilize those with the new transitions.

Add `c-tooltip` component

Display informative text when users hover, focus on, or tap an element.

See React package Tooltip

🚨 Important

The React component involves framer-motion components to handle the transitions, and has Portal applied.

Chakra elements seem to work with Nuxt 3 HMR only in ~20% of cases

Bug report

Describe the bug

Most of the time all styling props that I try to use (including plain style="" along with chakra's pl, mr, etc) on chakra components don't auto-refresh. That also includes components as chakra.div. I noticed that replacing chakra's nodes with native divs fixes the issue, but then I can only use the native style property to add raw css.

There's also a lot of other problems, eg duplication of nodes, stale state, etc. It's hard to say how much of that issue is on Nuxt side, given that they have other HMR tickets currently in investigation. I found it interesting that native html nodes seem to play well with it though, comparing to chakra.

To reproduce

Even although it's the frequency of occurrence is high, it doesn't reproduce with 100% prob in many exact scenarios. Subjectively it affects 80% of all edits though.

Today I started deleting files from my project until I didn't get to at least one reliable reproduction case, although sounds as I can find a high number of other cases if I go through the same steps for other elements.

1. clone https://github.com/effective-altruism-work/eawork-frontend/tree/hmr-issue
2. yarn install
3. yarn run nuxi dev
4. http://localhost:3000/
5. open app.vue and remove the line color="gray.500"
6. in console see [vite] hot updated: /app.vue, but the color stays the same
7. remove :_hover="{color: 'blue.900'}" and this particular issue with the stale color prop will be fixed

Not sure attaching a code sandbox would help, as this is a very inconsequential example of the general problem. I wonder whether anyone else managed to setup nuxt 3 with chakra in general?

System information

• OS: MacOS 12.5.1 (21G83)
• Browser: Chrome latest, but also doesn't work in latest Firefox
• Version of @chakra-ui: "@chakra-ui/vue-next": "^1.0.0-alpha.15"
• Version of Node.js: v16.16.0

Add `c-control-box` component

Mimics a checkbox or radio to allow for custom styling.

See React Package ControlBox

Missing Return Type for `useTheme()`

Bug report

Describe the bug

When chaining the return object from useTheme() I expect VSCode intellisense to present me with the following properties:

__breakpoints

__cssMaps

__cssVars

Instead, no intellisense is triggered, as only a generic type is returned.

In comparison to the React package, type assertion is used on the function return to ensure proper typing is applied.

This composable should be using WithCSSVar as the return type and supplying the generic type through it.

To reproduce

1. Import and declare the useTheme() composable (i.e. const theme = useTheme())
2. Call the theme variable and add a chain to trigger the autocomplete dropdown in VSCode of properties to select from this object.
3. Observe no proper options to select.

Expected behavior

(Minus the shown error, because it is unrelated to the issue 😅 )

System information

• OS: Windows
• Browser (if applies): N/A
• Version of @chakra-ui/core: 1.0.0-alpha.13
• Version of Node.js: [e.g. 12.11.1]

Additional context

This was discovered when building the useBreakpoint composable. In attempt to translate the hook from the React package it accesses the __breakpoint object within the useTheme() return to obtain the media data from the theme config.

Add `useCounter` composable

Provides the state and functionality to create custom counters.

See React Package useCounter

🚨 Important

In React, it relies on the useCallbackRef. However, since Vue composables only run once, consider instead the computed method on the final values if changes occur.

Example: Tweet from Devon Govett

CButton variant is not reactive

Bug report

Describe the bug

To reproduce

1. Create a variant for the Button component
2. In the template have the 'variant' prop dynamic
3. Switch to another variant name
4. See error

Minimal reproduction

https://codesandbox.io/s/charka-ui-vue-chidori-test-playground-0zl73?file=/src/App.vue

Expected behavior

I would expect the variant to change into the new variant on runtime. This does work with props like 'color'.

Additional context

It possibly has to do with the reactivity of the variant prop

TS: Declare `chakra.element` types globally for factory function components.

Feature request

Is your feature request related to a problem? Please describe.

It is currently unclear how to provide Typescript SFC support for Chakra factory components that will be auto imported. For JavaScript projects he seems to work fine however we may need to provide a solution for TS SFCs.

At the moment the solution is to declare a global namespace for Chakra UI Vue components.

In TypeScript declaration file

declare global {
  declare namespace chakra {
    import { chakra } from '@chakra-ui/vue-next'
    export const div: typeof chakra.div
  }
}

export {}

In SFC

<template>
  <chakra.div>value</chakra.div>
</template>

<script lang="ts" setup></script>

Describe the solution you'd like

Describe alternatives you've considered

Additional context

Add `c-switch` component

Component used as an alternative for the checkbox component for switching between "enabled" and "disabled" states.

See React package Switch

Look at importing the existing logic from the CCheckbox component.

c-modal: `Failed to resolve import "@vueuse/motion"` occurs due to lack of the package in dependencies

Bug report

Describe the bug

Vite fails to update dependencies because of lack of @vueuse/motion in @chakra-ui/c-modal

To reproduce

1. Clone https://github.com/AumyF/chakra-vue-next-vite-test
2. npm i
3. npx vite
4. See error
5. Once you explicitly add "@vueuse/motion" to project dependencies, this error will not occur

7:57:27 AM [vite] new dependencies found: @chakra-ui/vue-next, updating...
 > node_modules/@chakra-ui/c-modal/dist/esm/c-drawer.js:12:44: error: Could not resolve "@vueuse/motion" (mark it as external to exclude it from the bundle)
    12 │ import { MotionDirective, useMotions } from '@vueuse/motion';
       ╵                                             ~~~~~~~~~~~~~~~~

 > node_modules/@chakra-ui/c-modal/dist/esm/c-modal.js:18:44: error: Could not resolve "@vueuse/motion" (mark it as external to exclude it from the bundle)
    18 │ import { MotionDirective, useMotions } from '@vueuse/motion';
       ╵                                             ~~~~~~~~~~~~~~~~

7:57:27 AM [vite] error while updating dependencies:
Error: Build failed with 2 errors:
node_modules/@chakra-ui/c-modal/dist/esm/c-drawer.js:12:44: error: Could not resolve "@vueuse/motion" (mark it as external to exclude it from the bundle)
node_modules/@chakra-ui/c-modal/dist/esm/c-modal.js:18:44: error: Could not resolve "@vueuse/motion" (mark it as external to exclude it from the bundle)
    at failureErrorWithLog (/home/u/ghq/github.com/aumyf/chakra-vue-next-vite-test/node_modules/esbuild/lib/main.js:1449:15)
    at /home/u/ghq/github.com/aumyf/chakra-vue-next-vite-test/node_modules/esbuild/lib/main.js:1131:28
    at runOnEndCallbacks (/home/u/ghq/github.com/aumyf/chakra-vue-next-vite-test/node_modules/esbuild/lib/main.js:921:63)
    at buildResponseToResult (/home/u/ghq/github.com/aumyf/chakra-vue-next-vite-test/node_modules/esbuild/lib/main.js:1129:7)
    at /home/u/ghq/github.com/aumyf/chakra-vue-next-vite-test/node_modules/esbuild/lib/main.js:1236:14
    at /home/u/ghq/github.com/aumyf/chakra-vue-next-vite-test/node_modules/esbuild/lib/main.js:609:9
    at handleIncomingPacket (/home/u/ghq/github.com/aumyf/chakra-vue-next-vite-test/node_modules/esbuild/lib/main.js:706:9)
    at Socket.readFromStdout (/home/u/ghq/github.com/aumyf/chakra-vue-next-vite-test/node_modules/esbuild/lib/main.js:576:7)
    at Socket.emit (node:events:394:28)
    at Socket.emit (node:domain:470:12)
7:57:28 AM [vite] Internal server error: Failed to resolve import "@vueuse/motion" from "node_modules/@chakra-ui/c-modal/dist/esm/c-modal.js". Does the file exist?
  Plugin: vite:import-analysis
  File: /home/u/ghq/github.com/aumyf/chakra-vue-next-vite-test/node_modules/@chakra-ui/c-modal/dist/esm/c-modal.js
  16 |  import { CAnimatePresence, CMotion } from '@chakra-ui/c-motion';
  17 |  import { CCloseButton } from '@chakra-ui/c-close-button';
  18 |  import { MotionDirective, useMotions } from '@vueuse/motion';
     |                                               ^
  19 |  import { useModal } from './use-modal';
  20 |  import { dialogMotionPresets } from './modal-transitions';
      at formatError (/home/u/ghq/github.com/aumyf/chakra-vue-next-vite-test/node_modules/vite/dist/node/chunks/dep-c1a9de64.js:50738:46)
      at TransformContext.error (/home/u/ghq/github.com/aumyf/chakra-vue-next-vite-test/node_modules/vite/dist/node/chunks/dep-c1a9de64.js:50734:19)
      at normalizeUrl (/home/u/ghq/github.com/aumyf/chakra-vue-next-vite-test/node_modules/vite/dist/node/chunks/dep-c1a9de64.js:74223:26)
      at async TransformContext.transform (/home/u/ghq/github.com/aumyf/chakra-vue-next-vite-test/node_modules/vite/dist/node/chunks/dep-c1a9de64.js:74356:57)
      at async Object.transform (/home/u/ghq/github.com/aumyf/chakra-vue-next-vite-test/node_modules/vite/dist/node/chunks/dep-c1a9de64.js:50939:30)
      at async transformRequest (/home/u/ghq/github.com/aumyf/chakra-vue-next-vite-test/node_modules/vite/dist/node/chunks/dep-c1a9de64.js:66763:29)
      at async viteTransformMiddleware (/home/u/ghq/github.com/aumyf/chakra-vue-next-vite-test/node_modules/vite/dist/node/chunks/dep-c1a9de64.js:66904:32)
7:57:28 AM [vite] Internal server error: Failed to resolve import "@vueuse/motion" from "node_modules/@chakra-ui/c-modal/dist/esm/c-drawer.js". Does the file exist?
  Plugin: vite:import-analysis
  File: /home/u/ghq/github.com/aumyf/chakra-vue-next-vite-test/node_modules/@chakra-ui/c-modal/dist/esm/c-drawer.js
  10 |  import { chakra, useStyles, useTheme } from '@chakra-ui/vue-system';
  11 |  import { CModal, modalProps, useModalContext } from './c-modal';
  12 |  import { MotionDirective, useMotions } from '@vueuse/motion';
     |                                               ^
  13 |  import { useId } from '@chakra-ui/vue-composables';
  14 |  
      at formatError (/home/u/ghq/github.com/aumyf/chakra-vue-next-vite-test/node_modules/vite/dist/node/chunks/dep-c1a9de64.js:50738:46)
      at TransformContext.error (/home/u/ghq/github.com/aumyf/chakra-vue-next-vite-test/node_modules/vite/dist/node/chunks/dep-c1a9de64.js:50734:19)
      at normalizeUrl (/home/u/ghq/github.com/aumyf/chakra-vue-next-vite-test/node_modules/vite/dist/node/chunks/dep-c1a9de64.js:74223:26)
      at async TransformContext.transform (/home/u/ghq/github.com/aumyf/chakra-vue-next-vite-test/node_modules/vite/dist/node/chunks/dep-c1a9de64.js:74356:57)
      at async Object.transform (/home/u/ghq/github.com/aumyf/chakra-vue-next-vite-test/node_modules/vite/dist/node/chunks/dep-c1a9de64.js:50939:30)
      at async transformRequest (/home/u/ghq/github.com/aumyf/chakra-vue-next-vite-test/node_modules/vite/dist/node/chunks/dep-c1a9de64.js:66763:29)
      at async viteTransformMiddleware (/home/u/ghq/github.com/aumyf/chakra-vue-next-vite-test/node_modules/vite/dist/node/chunks/dep-c1a9de64.js:66904:32)

Minimal reproduction

https://github.com/AumyF/chakra-vue-next-vite-test

Expected behavior

Build correctly

System information

• OS: Ubuntu 20.04 on WSL (Windows 10 21H1)
• Version of @chakra-ui/core: 1.0.0-alpha.8
• Version of Node.js: 16.5.0

Add `useEventListeners` composable

Sets up callbacks for the addEventListener and removeEventListener with memoization from useCallback and useEffect.

See React Package useEventListeners

Add `c-skeleton` component set

Component set used to provide placeholder loading state of some component.

This is an alternative to some text, loading bar, spinner, etc. where the component itself is presented as a solid highlighter on load before the content is rendered.

Contains a set of components to define whether the content to be loaded is text, and avatar, solid block, etc.

See React Package Skeleton

Important

Depends on the composable usePrevious to isolate reference and change of state to the isLoaded prop. Consider building this composable first, or building a computed within the component. usePrevious is only used in this component and made available for other uses.

feat: add `as` prop type support for the `CButton` component

Feature request

Add router-link prop type support for the CButton for as polymorphic component

Update `CONTRIBUTING.md`

During the process of fixing and updating my local environment to ensure everything is working (at least in the scope of running the development playground) I noticed that the information in the CONTRIBUTING.md file does not quite line up in the successful steps I actually took.

And based on the configuration of the package as a Windows OS user, it might also be good to have a section for those specific users with suggestions on troubleshooting any issue to get their local environment working properly without compromising the package.

Current suggestions:

• Change the Setup the Project section: Fork repo > clone locally > run yarn install (installs deps and build the packages) > run yarn playground:dev (runs the Vite playground)
  • Currently, it suggests running yarn build and yarn bootstrap which seem to be unnecessary based on the scripts used in other steps.
• Mention yarn playground:dev script in Commands section
  • yarn dev currently does nothing but validate preconstruct dev and not actually boot up the playground
• Add For Windows Users section to address suggestions in ensuring the local environment in that OS operates properly
  • Ensure node version used is greater than v16.16.0
  • Use the win-node-env package to have NODE_ENV commands work in related package scripts (thank you @Shyrro for this suggestion!)
• Add link to the components-guide.md for building new package components (resides in docs/guides

Add `c-textarea` component

Chakra-charged textarea element used to enter an amount of text that's longer than a single line.

See React package Textarea

Add `c-image` component

Renders an image with support for fallbacks.

See React Package Image

Note handling of SSR (a separate Img component) and the native image element.

Add `c-select` component

Component tandem used to select one item from a list of options.

See React package Select

Add `useBreakpoint` composable

Feature request

Add the useBreakpoint composable to the Vue package.

This is an existing function from the React package to retrieve the current responsive media breakpoint. Returns the token name from the theme config.

🚨 Important

This depends on the useMediaQuery, based on the hook from the React package (See Issue #182). However, it is suggested to use the version of the composable from the VueUse library.

Add `c-table` multi-component

Multi-component used to organize and display data efficiently. It renders a <table> element by default.

See React package Table

Core: Provide types for Plugin

Bug report

Describe the bug

Currently the Chakra UI Plugin does not provide types for the plugin options. So VSCode intellisense cannot determine what to do with the plugin options.

To reproduce

1. In a new Vite project Install @chakra-ui/vue-next in stand alone package.
2. Import the plugin and begin to provide options.
3. Observe that plugin options are unavailable to intellisense

Screenshots

Burger Menu Not Working

Bug report

Burger Menu

Describe the bug

When a user clicks on the menu it's redirecting to a discord invite, ideally, it should toggle a menu with nav icons
The following code snippets comes from the inspector

 <a class="chakra-button css-9oowru" aria-label="Open menu" variant-color="gray" target="_blank" rel="noopener noreferrer" href="https://discord.gg/sq2Kp6x" icon="menu" isround="false"><!----><!----><svg class="chakra-icon css-13otjrl" focusable="false" viewBox="0 0 1024 1024"><path fill="currentColor" d="M904 160H120c-4.4 0-8 3.6-8 8v64c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-64c0-4.4-3.6-8-8-8zm0 624H120c-4.4 0-8 3.6-8 8v64c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-64c0-4.4-3.6-8-8-8zm0-312H120c-4.4 0-8 3.6-8 8v64c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-64c0-4.4-3.6-8-8-8z"></path></svg><!----></a>

To reproduce

1. Go to 'Homepage'
2. Click on 'Burger Menu'
3. Scroll down to 'to navbar contents'
4. See error

Dependency: `@chakra-ui/styled-system` depends on `react`

Bug report

Describe the bug

Currently @chakra-ui/styled-system depends on react.

The dependency graph is somewhat like this:
@chakra-ui/vue-next -> @chakra-ui/styled-system -> @chakra-ui/utils -> react

Why is this an issue:
Since we're using it in @chakra-ui/vue to prevent code duplication, it currently requires consumers to install react as a dependency as well into the project.

In order to prevent this from happening, we can split the @chakra-ui/utils into a standalone package and then moving the react utils into @chakra-ui/react-utils

Add `c-live-region` component

Handles aria attributes that programmatically expose dynamic content changes for a screen reader to detect and read out.

See React package useLiveRegion

🚨 Important

The setup of the state in the React Package uses a class to construct an instance of the live controls for each component that will use it.

In this package, it will be created as a component with at least more flexibility for render.

Add `useColorModePreference` composable

Retrieves the user's color mode preference.

See React package useColorModePreference

🚨Important

Depends on useMediaQuery for the check (See Issue #182). Consider this or an alternative.

Add `useClickable` composable

useClickable implements all the interactions of a native button
component with support for making it focusable even if it is disabled.

It can be used with both native button elements or other elements (like div).

See React Package useClickable

🚨 Important

Depends on Chakra's useEventListeners (See Issue #190). Consider using this or VueUse useEventListener.

Jest expect methods "do not exist on type `Assertion`"

Bug report

Describe the bug

Via vscode intellisense, errors are being registered for various jest expect methods stating:
Property X does not exist on type 'Assertion'.

Upon inspection of expect() via intellisense tooltip, the type signature being recognized is Chai.ExpectStatic.

So instead of toEqual, typescript is looking for equal, because it is looking at the Chai package that exists in the root node_modules

To reproduce

Occurring within VSCode

Minimal reproduction

N/A

Expected behavior

Typescript recognizing Jest methods instead of Chai

Screenshots

System information

• OS: Windows
• Browser (if applies): N/A
• Version of @chakra-ui/core: 1.0.0-alpha.13
• Version of Node.js: 16.16.0

Additional context

These errors do not effect the tests that run. However I personally use the Error Lens extension, so it highlights the line of code in red.

Add `c-menu` component

Multi-component accessible dropdown menu for common dropdown menu design patterns.
Uses roving tabIndex for focus management.

See React Package Menu

🚨 Important

Depends on multiple Chakra hooks and components, some currently not present in the Vue package. Consider later build.

CCheckBox icon not rendering correctly

Bug report

Describe the bug

The checkbox renders the raw function instead of the "checked" icon.

There are also 99+ errors in the console

To reproduce

1. Go to https://chakra-ui-vue-next-playground-2zajhe2uw-chakra-ui.vercel.app/c-checkbox/examples/simple-checkbox
2. Select the checkbox
3. If you're under Firefox, no icon is shown. If you're under Chromium based browser, you'll see a weird text. In both cases, inspecting the DOM show a rendered string instead of an icon.

Expected behavior

For the icon to show instead of the function text to print.

Screenshots

System information

• OS: All. ( Tested on Mac, Windows and Linux )
• Browser (if applies): Chromium based/FF

Additional context

Since we see the raw function string, it's probably just a double call somewhere to the render function. Instead of returning the render function, we probably return a function that return the render function which causes the string render instead of what is expected.
The errors in the console are probably unrelated, they probably come from null objects trying to access property before the component finished mounting or something like that. (It's a lead to confirm)

Add `c-tabs` component

Provides context and logic for all tabs components.

See React package Tabs

🚨 Important

The React component uses multiple Chakra hooks imported into useTabs consider these and/or adding them to the package first, or look to versions from VueUse

Github profile link is incorrect

Hello!
The link next.vue.chakra-ui.com in the github page is incorrect.
It should be https://vue.chakra-ui.com I suppose.

Thanks for your work! <3 chakra

Modal not returning focus on close by default

Bug report

Describe the bug

When opening a modal, if finalFocusRef is not specified, focus will not be returned to the element that trigerred the modal.

To reproduce

1. Clone https://github.com/Shyrro/chakra-modal-issue-repro
2. Run pnpm install and pnpm dev
3. Open your browser on dev url and click on "Open Modal" button
4. Once the modal opens, close it
5. Notice that the button does not have focus ( style of focus is border red so it's noticeable )

Minimal reproduction

Github repro : https://github.com/Shyrro/chakra-modal-issue-repro

Expected behavior

When the modal closes, it should return the focus to the button

System information

• Version of @chakra-ui/vue-next: 1.0.0-alpha.15

Add `c-stat` component

Multi-component used to display statistics.

See React package Stat

Add `useBreakpointValue` composable

Feature request

Add the useBreakpointValue composable to the Vue package.

This is an existing function from the React package to retrieve a value based on the current breakpoint from the given responsive values object.

Add `c-show` / `c-hide` components

Feature request

Add the Show and Hide components to the Vue package.

These are existing components in the React package to wrap elements that need to be shown or hidden depending on a given breakpoint.

🚨Important

Depends on the Visibility component and useQuery composable (see issues #181 and #183) so these components can not be completed until PRs have been merged and issues closed, or until an alternative approach is given.

Add `useMediaQuery` composable

Feature request

Add the useMediaQuery composable to the Vue package.

This is an existing function in the React package to track state of a given CSS media query.

Note: In the React package, it uses a hook called useEnvironment. Need to consider whether or not to also add this as a composable and use it in order to make useMediaQuery workable in these early stages of the Chakra package
See Vue's discussion on Access to Platform Specific APIs in regard to SSR with useEnvironment