Hello @jrgarciadev ,

There is something that makes me worried about the current behavior of the snapshot testing with the styled-jsx.

Right now, when someone clones the code and tries to run the test script a lot of the tests fail because the class identifier is switching between users and if we do any changes, it will be changed again. I think that this creates a lot of uncertainty and less chance that the test is going to alarm us if any component breaks,

I have done research about what are our possibilities to avoid the recreation of new snapshots every time and I found some options that I want to share with you.

1. styled-jsx/babel-test

You can change the babel configuration so that it uses a specific plugin in the test environment, example:

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react",
    "@babel/preset-typescript"
  ],
  "env":{
    "production": {
      "plugins": [
        "styled-jsx/babel"
      ]
    },
    "development": {
      "plugins": [
        "styled-jsx/babel"
      ]
    },
    "test": {
      "plugins": [
        "styled-jsx/babel-test"
      ]
    }
  }
  
}

With this approach the test will not use the crypted classes of styled jsx like jsx-34324, instead the classes will be resolved with the name convention that you are currently using in your styles.

Before:

<button type="button" color="default" weight="normal" class="jsx-3127238662 button ">
  <div class="jsx-3127238662">
    <span class="jsx-2775745252 icon   "><svg></svg></span>
    <div class="jsx-3127238662 text left">action</div>
  </div>
</button>

After:

<button type="button" class="button " color="default" weight="normal"><div><span class="icon"><svg></svg><style>
        .icon {
          position: absolute;
          left: var(--next-ui-button-padding);
          right: auto;
          top: 50%;
          transform: translateY(-50%);
          display: flex;
          justify-content: center;
          align-items: center;
          color: var(--next-ui-button-color);
          z-index: 1;
        }
        // etc
      </style></button>

For me this solution would still have a problem, that if you change a line in the style the tests will fail.

2. Other possible solutions

• Don't use snapshot testing, and focus testing by use case.
• Don't use styled-jsx and switch to another solution like css modules.

Describe the bug
Using the docs package as a reference, I attempted to implement a theme toggle for my website, as I found no documentation for this. Everything seems to be functional as expected, except for Card.Footer which remains with a background color of #fff.

Steps to reproduce

1. Using the latest version, implement a simple theme toggle using use-dark-mode and React.useState.
2. Import the shared theme from @nextui-org/react/cjs/theme/shared,
3. Toggle the theme.

Expected behaviour
Card.Footer changes to have the same background as the rest of the card (#111).

Screenshots

Environment / Context

• Desktop or Mobile? Desktop
• Operating System: Windows 11
• Browser and version: Firefox 94.0.1
• Device: PC

Additional info
_app.js Gist
login.js Gist
theme-toggle.js Gist

Describe the bug
When we use the dark theme with a TextArea component in the page, there is a glitch effect with the button loading.

This does not happen with InputText components.

Maybe a class conflict?

I have made a codepen accessible.

Steps to reproduce
TextArea BUG : https://codesandbox.io/s/fetch-sample-forked-re48o
Text Working : https://codesandbox.io/s/fetch-sample-forked-tgisw

Expected behaviour
There should be the same behavior when there are only InputText on the page.

Environment / Context
Dark theme
As soon as there is a TextArea present in the page

Describe the bug
I recently (~30mins ago) updated NextUI version on one of my projects to use the new Input component and get an issue with it
Next.JS throws

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Steps to reproduce

1. Create new Next.JS project and install NextUI
2. Create a page and add new Input element
3. See error

Expected behaviour
Display new Input element on the page

Screenshots

Environment / Context

• Desktop
• Operating System: Windows 10
• Chrome 93
• Device: HP Laptop 14s

Something like this

Input's onChange event doesn't get triggered when pressing space on text input; For this reason the value passed to the input doesn't register spaces.

const [productState, setProductState] = useState<ProductInterface>({
    name: "",
})


function handleChange(e:ChangeEvent<FormElement>){
    console.log(e)
    setProductState({
        ...productState,
        [e.target.name]: e.target.value
    })
}


{...}

<Grid  style={{marginTop:10}}>
   <Input labelPlaceholder="Name" width="100%"type="text" value={productState.name} onChange={handleChange} name="name"/>
</Grid>

Normally the state should be updated with the space too!
I'm on a mac book pro running Catalina, tested on Firefox and Safari if it can matter somehow

EDIT: forgot to copy value assignment on input

Describe the bug
After updating to v46 the Cumulative Layout Shift increased

Steps to reproduce

1. Go to https://nextui.org
2. The page has a blinking stage before load
3. This is happening on every entry page

Expected behaviour
The documentation page has to load without blinking

Screenshots / Videos

Environment / Context

• Desktop or Mobile?: Both
• Operating System: [e.g. iOS]: MacOS, iOS
• Browser and version [e.g. chrome 22]: Chrome Last version

Describe the bug
The "Report a bug" button is not working on the documentation site

Steps to reproduce

1. Go to 'https://nextui.org/docs/components/button'
2. Click on any of the Live editors
3. Try to click on 'Report a bug'

Expected behaviour
It should send the user to the "Issues" project section

Screenshots

Environment / Context

• Desktop or Mobile?: Desktop
• Operating System: macOS
• Browser and version: Chrome last version
• Device: MacBook Pro

Additional info
This problem could be generated by the 'display: none' in the editor.tsx

Describe the bug
Currently, the Loading component doesn't have the ARIA attributes, this will have NextUI more accessible to people with disabilities.

Expected behaviour
Add Aria Attributes to components

Additional info
References:
ARIA-Moz
ARIA-Google
Chrome extension

Describe the bug
I have an image that is much larger than the size of the Avatar component and it doesn't resize the image.

Steps to reproduce
When adding a very large image in the Avatar component

Expected behaviour
The image needs to be resized based on the size of the Avatar component.

Screenshots
Actual:

Expected:

..and the code:

Environment / Context

• Desktop or Mobile? Desktop
• Operating System: Mac OS Big Sour
• Browser and version: Chrome 95 and Safari 14
• Device: MacBook Air

Is your iteration request related to a problem?
When using createTheme the class name used by stitches will always be light-theme and dark-theme

Currently there is no way to customize this class, which is very important if you are already using a different class like light and dark together with next-themes

Describe the solution you'd like
Allow passing className to createTheme

Additional context

Hi sir, Nice work.

Since Inspiration was drawn from Vuesax, i would love to add more loading types [i.e more loading designs]

Describe the bug
Container component creates an overflow

Steps to reproduce
https://codesandbox.io/s/react-fiddle-forked-68mcz?file=/src/App.js&resolutionWidth=320&resolutionHeight=675

tabs would be great addition

something like this https://ant.design/components/tabs/

Is your iteration request related to a problem?
Currently the property color changes label and helperText color, it should be a different property for modifying helperText color

Describe the solution you'd like
Add a new property called helperTextColor: SimpleColors

Describe the bug
In docs says the Tooltip component has gradient color but when I tried and it didn't work.

Steps to reproduce

1. Import Tooltip component
2. Add "color" prop value of "gradient"
3. It will render primary color not gradient

Expected behaviour
When pass "gradient" in color prop, it should render the gradient background tooltip.

Screenshots

Environment / Context

• Desktop or Mobile? Desktop
• Operating System: macOS
• Browser and version: Chrome last version
• Device: Macbook Pro

Additional info
I think this option overrides by "tooltip/styles.ts" file

Describe the bug
When I open any component, the eslint doesn't load the current workspace configuration and gives an error because it can't find the tsconfig.

Expected behaviour
It should load the .eslintrc.json of each workspace.

Screenshots

Environment / Context

• Development environment
• Operating System: Windows 10 with WSL
• IDE: Visual Studio Code

Additional info
I have found a solution, so you can expect a PR about this soon.

Describe the bug
Sidebar isn't alphabetize. This makes it difficult to find components in Sidebar, especially as it grows and there are many more of them.

Steps to reproduce

1. See components sidebar to check it isn't alphabetize

Expected behaviour
Sidebar should be alphabetize

Describe the bug
HI.
Library need @babel/runtime and in some case it's not preinstalled, so we get an error that says could not resolve @bable/runtime.

Installing @bable/runtime fixes the error, but it should be a dependency for @nextui-org/react

Steps to reproduce

• yarn create vite
• setup a React (JS) project
• install @nextui-org/react
• run dev server

Environment / Context

• Operating System: Arch Linux
• Browser and version Chrome 96.0.4664.110

Additional info
log error:

(this will be run only when your dependencies or config have changed)
 > node_modules/@nextui-org/react/esm/index.js:3:37: error: Could not resolve "@babel/runtime/helpers/interopRequireDefault" (mark it as external to exclude it from the bundle, or surround it with try/catch to handle the failure at run-time)
    3 │ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
      ╵                                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

 > node_modules/@nextui-org/react/esm/use-current-state/index.js:3:37: error: Could not resolve "@babel/runtime/helpers/interopRequireDefault" (mark it as external to exclude it from the bundle, or surround it with try/catch to handle the failure at run-time)
    3 │ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
      ╵                                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

....

error when starting dev server:
Error: Build failed with 119 errors:
node_modules/@nextui-org/react/esm/avatar/avatar-group.js:3:37: error: Could not resolve "@babel/runtime/helpers/interopRequireDefault" (mark it as external to exclude it from the bundle, or surround it with try/catch to handle the failure at run-time)
node_modules/@nextui-org/react/esm/avatar/avatar-group.styles.js:3:37: error: Could not resolve "@babel/runtime/helpers/interopRequireDefault" (mark it as external to exclude it from the bundle, or surround it with try/catch to handle the failure at run-time)
node_modules/@nextui-org/react/esm/avatar/avatar.js:3:37: error: Could not resolve "@babel/runtime/helpers/interopRequireDefault" (mark it as external to exclude it from the bundle, or surround it with try/catch to handle the failure at run-time)
node_modules/@nextui-org/react/esm/avatar/index.js:3:37: error: Could not resolve "@babel/runtime/helpers/interopRequireDefault" (mark it as external to exclude it from the bundle, or surround it with try/catch to handle the failure at run-time)
node_modules/@nextui-org/react/esm/backdrop/backdrop.js:3:37: error: Could not resolve "@babel/runtime/helpers/interopRequireDefault" (mark it as external to exclude it from the bundle, or surround it with try/catch to handle the failure at run-time)
...
    at failureErrorWithLog (/home/rend/nextui-vite/node_modules/esbuild/lib/main.js:1493:15)
    at /home/rend/nextui-vite/node_modules/esbuild/lib/main.js:1151:28
    at runOnEndCallbacks (/home/rend/nextui-vite/node_modules/esbuild/lib/main.js:941:63)
    at buildResponseToResult (/home/rend/nextui-vite/node_modules/esbuild/lib/main.js:1149:7)
    at /home/rend/nextui-vite/node_modules/esbuild/lib/main.js:1258:14
    at /home/rend/nextui-vite/node_modules/esbuild/lib/main.js:629:9
    at handleIncomingPacket (/home/rend/nextui-vite/node_modules/esbuild/lib/main.js:726:9)
    at Socket.readFromStdout (/home/rend/nextui-vite/node_modules/esbuild/lib/main.js:596:7)
    at Socket.emit (node:events:390:28)
    at addChunk (node:internal/streams/readable:324:12)
error Command failed with exit code 1.i

Describe the bug
Currently, the Radio component doesn't have the ARIA attributes, this will have NextUI more accessible to people with disabilities.

Expected behaviour
Add Aria Attributes to components

Additional info
References:
ARIA-Moz
ARIA-Google
Chrome extension

Cannot find module '../utils/types' or its corresponding type declarations

Building for production is failing as @nextui-org is throwing the error

Steps to reproduce

1. Install the library using yarn install @nextui-org/react
2. Build for production with yarn build

Expected behaviour
The build fails with the bellow error log

yarn run v1.22.17
$ tsc && vite 
node_modules/@nextui-org/react/esm/theme/utils.d.ts:2:29 - error TS2307: Cannot find module '../utils/types' or its corresponding type declarations.

2 import { DeepPartial } from '../utils/types';
                              ~~~~~~~~~~~~~~~~


Found 1 error.

error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Screenshots

Environment / Context

• Windows 10 Pro
• Node v16.13.0
• Npm 8.1.3
• Yarn 1.22.17
• Framework React with vite

Additional info
I like this library components, if they is any workaround that would be great for me to keep the smooth development

Describe the bug
Full Screen Modal misbehaves... it open but does not come in view, until you scroll down a little

Steps to reproduce

1. Go to 'https://nextui.org/docs/components/modal#full-screen'
2. Click on 'Open Modal'

Expected behaviour
Show open Modal by default to the screen

Describe the bug
Currently, the Checkbox component doesn't have the ARIA attributes, this will have NextUI more accessible to people with disabilities.

Expected behaviour
Add Aria Attributes to components

Additional info
References:
ARIA-Moz
ARIA-Google
Chrome extension

Describe the bug
Currently, the components don't have the ARIA attributes, this will have NextUI more accessible to people with disabilities.

Expected behaviour
Add Aria Attributes to components

Additional info
References:
ARIA-Moz
ARIA-Google
Chrome extension

Something like this

Describe the bug
the avatar component should have a onClick callback

Steps to reproduce

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

Expected behaviour
I should be able to have a onClick={() => alert(“hi”)} prop working

Screenshots
If applicable, add screenshots to help explain your problem.

Environment / Context

• Mobile? Yes 👍
  -. iOS
• Browser and version safari
• Device: iPhone XR

Additional info
Add any other context about the problem here.

Describe the bug
Currently, the cursor position is not aligning with the line where it should be.

Steps to reproduce

1. Go to any page where a live editor is available. (Suppose https://nextui.org/docs/components/checkbox)
2. Click on the live editor window

Expected behaviour
The cursor position should align with the clicked line

Screenshots

Environment / Context

• All

Comment
I would like to work on that issue

Describe the bug

Hi @jrgarciadev, I'm using your lib in some projects and it works fine congrats 🎉 . However, in a project built with Vite the build show a blank page. I let you some screenshot below.

Steps to reproduce

1. Create a simple react project with Vite running this command npm init vite@latest <proyect-name>
2. Install NextUI lib (in my case it was the 1.0.1-alpha.57 version)
3. Follow this step https://nextui.org/docs/guide/getting-started#setup
4. Generate a build and serve it on a server

Expected behaviour

The app should be works perfectly

Screenshots

Installation

Error

https://reactjs.org/docs/error-decoder.html/?invariant=130&args[]=object&args[]=

Environment / Context

• Device: Desktop
• Operating System: Window 11
• Browser and version: Microsoft Edge Version 95.0.1020.40

Additional info

Idk, if I forget something let me know.

Describe the bug
Currently, the Switch component doesn't have the ARIA attributes, this will have NextUI more accessible to people with disabilities.

Expected behaviour
Add Aria Attributes to components

Additional info
References:
ARIA-Moz
ARIA-Google
Chrome extension

Describe the bug
The fields are covered with double border at focus and the black border effect at hover no longer works for all inputs

Steps to reproduce

1. Update to latest version v1.0.1-alpha.57
2. Click on an Input bordered
3. See error

Expected behaviour
Clear working hover state and focus state like in previous version v1.0.1-alpha.56

Screenshots

Environment / Context

• Desktop
• Operating System: Ubuntu
• Browser and version Chrome 93

Hi ! Congratulations for your work. I love NextUI and I think you have a very big potential.

I think a new component like navbar/sidebar should be great idea.

Something like this : https://vuesax.com/docs/components/Sidebar.html#default

You know a table with its responsive column and row added next ui flavour

Describe the bug
The clear button is over the right content

Steps to reproduce

1. Go to nextui
2. Click on 'Input > Helper Text > Last example'

Expected behaviour
The clear button must have enough space

Screenshots

https://storybook.nextui.org/?path=/story/display-tooltip--default

I can't change the dir how to component.

Describe the bug

I was initially very interested by nextui, especially the runtime performance story as compared to chakraui for example. But then I realized the website is noticeably slow. Which is confirmed by profiling:

Steps to reproduce

Profil changing pages on various CSS libraries websites:

ChakraUI is using emotion, takes ~100ms to change page (which is too slow)

Stitches is much faster, takes ~40ms to change page (better but not zero-runtime as I hoped)

But NextUI takes up to ~500ms to change page (which is very slow, and very noticeable to users)

Expected behaviour

Very fast page change

Environment / Context

• Desktop
• Operating System: MacOS
• Browser and version Chrome latest
• Device: Macbook Pro

Additional info

Maybe there is a good explanation to why things are this way, maybe there is a low hanging fruit ? I really want to consider nextui.

Describe the bug
A clear and concise description.

Steps to reproduce

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

Expected behaviour
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Environment / Context

• Desktop or Mobile?
• Operating System: [e.g. iOS]
• Browser and version [e.g. chrome 22]
• Device: [e.g. iPhone6]

Additional info
Add any other context about the problem here.

Describe the bug
Small Checkbox is not rendering well

Steps to reproduce

1. Go to '(https://nextui-demo.vercel.app/)[https://nextui-demo.vercel.app/]
2. Click on Agree to our Privacy Policy

Expected behaviour
The checkmark's left side should be a little bit up

Screenshots

Environment / Context

• Desktop or Mobile?: Desktop
• Operating System: macOS
• Browser and version: 94.0.4606.61 (Official Build) (arm64)
• Device: Macbook Pro M1

Something like this

Describe the bug
Hoverable copy and repot bug options even when are not visible in the documentation Live Code section

Expected behaviour
just should appear when the user expands the Live Code section

Screenshots

Describe the solution you'd like
Create a Pagination component for displaying active pages and navigating between multiple pages

Is your iteration request related to a problem?
Add the ability to change <Input /> background color.

Describe the solution you'd like
Currently, the <Input /> background, on light mode, is set to palette.accents_2, and on dark mode, to palette.accents_1. This works great when overlayed on a card on light mode, but on dark mode, both the card and the input take on palette.accents_1 as a background color, making them blend together.

Ideally, the input should pick either palette.background on dark mode, or palette.accents_2 in both cases, to preserve color animation on theme change, however, a quick workaround for this would be the ability to provide the background color as a prop to the <Input /> component. This is currently not possible, as it only accepts SimpleColors passed to the color attribute.

Additional context

Light Mode:

Dark Mode:

I think it will be a good addition to the current set of components
Reference: https://react-bootstrap.github.io/components/overlays/#popovers

Is your iteration request related to a problem?
I think the bordered Input is the best looking, but i don't like the elevation animation on focus

Describe the solution you'd like
Allow passing a prop like disableElevationAnimation that disables this behaviour (only on bordered and normal variants)

Additional context
This library looks awesome! really great work 🔥

Bug
When opening the full screen modal in the docs, it closes immediately

Steps to reproduce

1. Go to docs in the modals section
2. Click on open modal in full screen mode

Expected behaviour
it should open the modal, instead it just closes and does not show any error in the console.

Screenshots
I have a video

Environment / Context

• Desktop or Mobile: Desktop
• Operating System: Linux Mint 20.2
• Browser and version: Google Chrome 93.0.4577.82 (Official Build) (64-bit)
• Device: PC

Additional info
I saw that an issue with this same error was already closed but with the windows so, as it was already closed I decided to open a new one. #93

Describe the bug
Currently, the Button component doesn't have the ARIA attributes, this will have NextUI more accessible to people with disabilities.

Expected behaviour
Add Aria Attributes to components

Additional info
References:
ARIA-Moz
ARIA-Google
Chrome extension

Is your component proposal related to a problem? Please describe.
I propose updating a navbar or a sidebar as like vuesax's sidebar.

Describe the solution you'd like
A few months ago I tried for a sidebar with 100% responsiveness. Although I have done the component I'm not satisfied. That is the reason I felt it would be best for us. I'll include those links or details you need.

Describe alternatives you've considered
Have you considered iterating an existing component?
I've seen a component on Vuesax's docs. Which is forced me to write the issue.
Sidebar Component

Additional context
I've included the component's link. You may check this out.

thanks a lot to NextUI team

Describe the solution you'd like
Create a multi-line user input.

Describe alternatives you've considered
Based on existing Input