feat(root): new version

packages/components/accordion/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @nextui-org/accordion
 
+## 0.0.0-dev-v2-20230405205125
+
+### Patch Changes
+
+- Native events exposed in all form elements
+- Updated dependencies
+  - @nextui-org/use-aria-accordion-item@0.0.0-dev-v2-20230405205125
+  - @nextui-org/framer-transitions@0.0.0-dev-v2-20230405205125
+  - @nextui-org/shared-icons@0.0.0-dev-v2-20230405205125
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230405205125
+  - @nextui-org/aria-utils@0.0.0-dev-v2-20230405205125
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230405205125
+  - @nextui-org/system@0.0.0-dev-v2-20230405205125
+  - @nextui-org/theme@0.0.0-dev-v2-20230405205125
+
+## 0.0.0-dev-v2-20230405200614
+
+### Patch Changes
+
+- Textarea component added
+- Updated dependencies
+  - @nextui-org/use-aria-accordion-item@0.0.0-dev-v2-20230405200614
+  - @nextui-org/framer-transitions@0.0.0-dev-v2-20230405200614
+  - @nextui-org/shared-icons@0.0.0-dev-v2-20230405200614
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230405200614
+  - @nextui-org/aria-utils@0.0.0-dev-v2-20230405200614
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230405200614
+  - @nextui-org/system@0.0.0-dev-v2-20230405200614
+  - @nextui-org/theme@0.0.0-dev-v2-20230405200614
+
 ## 0.0.0-dev-v2-20230405030905
 
 ### Patch Changes

packages/components/accordion/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/accordion",
-  "version": "0.0.0-dev-v2-20230405030905",
+  "version": "0.0.0-dev-v2-20230405205125",
   "description": "Collapse display a list of high-level options that can expand/collapse to reveal more information.",
   "keywords": [
     "react",

packages/components/avatar/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @nextui-org/avatar
 
+## 0.0.0-dev-v2-20230405205125
+
+### Patch Changes
+
+- Native events exposed in all form elements
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230405205125
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230405205125
+  - @nextui-org/use-image@0.0.0-dev-v2-20230405205125
+  - @nextui-org/system@0.0.0-dev-v2-20230405205125
+  - @nextui-org/theme@0.0.0-dev-v2-20230405205125
+
+## 0.0.0-dev-v2-20230405200614
+
+### Patch Changes
+
+- Textarea component added
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230405200614
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230405200614
+  - @nextui-org/use-image@0.0.0-dev-v2-20230405200614
+  - @nextui-org/system@0.0.0-dev-v2-20230405200614
+  - @nextui-org/theme@0.0.0-dev-v2-20230405200614
+
 ## 0.0.0-dev-v2-20230405030905
 
 ### Patch Changes

packages/components/avatar/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/avatar",
-  "version": "0.0.0-dev-v2-20230405030905",
+  "version": "0.0.0-dev-v2-20230405205125",
   "description": "The Avatar component is used to represent a user, and displays the profile picture, initials or fallback icon.",
   "keywords": [
     "avatar"

packages/components/badge/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @nextui-org/badge
 
+## 0.0.0-dev-v2-20230405205125
+
+### Patch Changes
+
+- Native events exposed in all form elements
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230405205125
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230405205125
+  - @nextui-org/system@0.0.0-dev-v2-20230405205125
+  - @nextui-org/theme@0.0.0-dev-v2-20230405205125
+
+## 0.0.0-dev-v2-20230405200614
+
+### Patch Changes
+
+- Textarea component added
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230405200614
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230405200614
+  - @nextui-org/system@0.0.0-dev-v2-20230405200614
+  - @nextui-org/theme@0.0.0-dev-v2-20230405200614
+
 ## 0.0.0-dev-v2-20230405030905
 
 ### Patch Changes

packages/components/badge/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/badge",
-  "version": "0.0.0-dev-v2-20230405030905",
+  "version": "0.0.0-dev-v2-20230405205125",
   "description": "Badges are used as a small numerical value or status descriptor for UI elements.",
   "keywords": [
     "badge"

packages/components/button/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @nextui-org/button
 
+## 0.0.0-dev-v2-20230405205125
+
+### Patch Changes
+
+- Native events exposed in all form elements
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230405205125
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230405205125
+  - @nextui-org/spinner@0.0.0-dev-v2-20230405205125
+  - @nextui-org/drip@0.0.0-dev-v2-20230405205125
+  - @nextui-org/system@0.0.0-dev-v2-20230405205125
+  - @nextui-org/theme@0.0.0-dev-v2-20230405205125
+
+## 0.0.0-dev-v2-20230405200614
+
+### Patch Changes
+
+- Textarea component added
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230405200614
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230405200614
+  - @nextui-org/spinner@0.0.0-dev-v2-20230405200614
+  - @nextui-org/drip@0.0.0-dev-v2-20230405200614
+  - @nextui-org/system@0.0.0-dev-v2-20230405200614
+  - @nextui-org/theme@0.0.0-dev-v2-20230405200614
+
 ## 0.0.0-dev-v2-20230405030905
 
 ### Patch Changes

packages/components/button/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/button",
-  "version": "0.0.0-dev-v2-20230405030905",
+  "version": "0.0.0-dev-v2-20230405205125",
   "description": "Buttons allow users to perform actions and choose with a single tap.",
   "keywords": [
     "button"

packages/components/card/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @nextui-org/card
 
+## 0.0.0-dev-v2-20230405205125
+
+### Patch Changes
+
+- Native events exposed in all form elements
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230405205125
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230405205125
+  - @nextui-org/drip@0.0.0-dev-v2-20230405205125
+  - @nextui-org/system@0.0.0-dev-v2-20230405205125
+  - @nextui-org/theme@0.0.0-dev-v2-20230405205125
+
+## 0.0.0-dev-v2-20230405200614
+
+### Patch Changes
+
+- Textarea component added
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230405200614
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230405200614
+  - @nextui-org/drip@0.0.0-dev-v2-20230405200614
+  - @nextui-org/system@0.0.0-dev-v2-20230405200614
+  - @nextui-org/theme@0.0.0-dev-v2-20230405200614
+
 ## 0.0.0-dev-v2-20230405030905
 
 ### Patch Changes

packages/components/card/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/card",
-  "version": "0.0.0-dev-v2-20230405030905",
+  "version": "0.0.0-dev-v2-20230405205125",
   "description": "Card is a container for text, photos, and actions in the context of a single subject.",
   "keywords": [
     "card"

packages/components/checkbox/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @nextui-org/checkbox
 
+## 0.0.0-dev-v2-20230405205125
+
+### Patch Changes
+
+- Native events exposed in all form elements
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230405205125
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230405205125
+  - @nextui-org/system@0.0.0-dev-v2-20230405205125
+  - @nextui-org/theme@0.0.0-dev-v2-20230405205125
+
+## 0.0.0-dev-v2-20230405200614
+
+### Patch Changes
+
+- Textarea component added
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230405200614
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230405200614
+  - @nextui-org/system@0.0.0-dev-v2-20230405200614
+  - @nextui-org/theme@0.0.0-dev-v2-20230405200614
+
 ## 0.0.0-dev-v2-20230405030905
 
 ### Patch Changes

packages/components/checkbox/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/checkbox",
-  "version": "0.0.0-dev-v2-20230405030905",
+  "version": "0.0.0-dev-v2-20230405205125",
   "description": "Checkboxes allow users to select multiple items from a list of individual items, or to mark one individual item as selected.",
   "keywords": [
     "checkbox"

packages/components/checkbox/src/use-checkbox.ts

@@ -8,7 +8,7 @@ import {useToggleState} from "@react-stately/toggle";
 import {checkbox} from "@nextui-org/theme";
 import {useHover} from "@react-aria/interactions";
 import {useFocusRing} from "@react-aria/focus";
-import {mergeProps} from "@react-aria/utils";
+import {chain, mergeProps} from "@react-aria/utils";
 import {useFocusableRef} from "@nextui-org/dom-utils";
 import {__DEV__, warn, clsx, dataAttr} from "@nextui-org/shared-utils";
 import {
@@ -45,6 +45,10 @@ interface Props extends HTMLNextUIProps<"label"> {
    * The icon to be displayed when the checkbox is checked.
    */
   icon?: ReactNode | ((props: CheckboxIconProps) => ReactNode);
+  /**
+   * React aria onChange event.
+   */
+  onValueChange?: AriaCheckboxProps["onChange"];
   /**
    * Classname or List of classes to change the styles of the element.
    * if `className` is passed, it will be added to the base slot.
@@ -62,8 +66,8 @@ interface Props extends HTMLNextUIProps<"label"> {
   styles?: SlotsToClasses<CheckboxSlots>;
 }
 
-export type UseCheckboxProps = Omit<Props, "defaultChecked" | "onChange"> &
+export type UseCheckboxProps = Omit<Props, "defaultChecked"> &
-  Omit<AriaCheckboxProps, keyof CheckboxVariantProps> &
+  Omit<AriaCheckboxProps, keyof CheckboxVariantProps | "onChange"> &
   Omit<CheckboxVariantProps, "isFocusVisible">;
 
 export function useCheckbox(props: UseCheckboxProps) {
@@ -93,6 +97,7 @@ export function useCheckbox(props: UseCheckboxProps) {
     styles,
     onChange,
     className,
+    onValueChange,
     ...otherProps
   } = props;
 
@@ -136,7 +141,7 @@ export function useCheckbox(props: UseCheckboxProps) {
       validationState,
       "aria-label": ariaLabel,
       "aria-labelledby": otherProps["aria-labelledby"] || labelId,
-      onChange,
+      onChange: onValueChange,
     };
   }, [
     value,
@@ -151,7 +156,7 @@ export function useCheckbox(props: UseCheckboxProps) {
     validationState,
     otherProps["aria-label"],
     otherProps["aria-labelledby"],
-    onChange,
+    onValueChange,
   ]);
 
   const {inputProps} = isInGroup
@@ -227,6 +232,7 @@ export function useCheckbox(props: UseCheckboxProps) {
     return {
       ref: inputRef,
       ...mergeProps(inputProps, focusProps),
+      onChange: chain(inputProps.onChange, onChange),
     };
   };
 

packages/components/checkbox/stories/checkbox.stories.tsx

@@ -68,7 +68,7 @@ const ControlledTemplate: ComponentStory<typeof Checkbox> = (args: CheckboxProps
 
   return (
     <div className="flex flex-col gap-2">
-      <Checkbox isSelected={selected} onChange={setSelected} {...args}>
+      <Checkbox isSelected={selected} onValueChange={setSelected} {...args}>
         Subscribe (controlled)
       </Checkbox>
       <p className="text-neutral-500">Selected: {selected ? "true" : "false"}</p>
@@ -170,7 +170,7 @@ export const CustomWithStyles = (props: CustomCheckboxProps) => {
   const checkboxProps = !isInGroup
     ? {
         isSelected,
-        onChange: setIsSelected,
+        onValueChange: setIsSelected,
       }
     : {};
 

packages/components/chip/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @nextui-org/chip
 
+## 0.0.0-dev-v2-20230405205125
+
+### Patch Changes
+
+- Native events exposed in all form elements
+- Updated dependencies
+  - @nextui-org/shared-icons@0.0.0-dev-v2-20230405205125
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230405205125
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230405205125
+  - @nextui-org/system@0.0.0-dev-v2-20230405205125
+  - @nextui-org/theme@0.0.0-dev-v2-20230405205125
+
+## 0.0.0-dev-v2-20230405200614
+
+### Patch Changes
+
+- Textarea component added
+- Updated dependencies
+  - @nextui-org/shared-icons@0.0.0-dev-v2-20230405200614
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230405200614
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230405200614
+  - @nextui-org/system@0.0.0-dev-v2-20230405200614
+  - @nextui-org/theme@0.0.0-dev-v2-20230405200614
+
 ## 0.0.0-dev-v2-20230405030905
 
 ### Patch Changes

packages/components/chip/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/chip",
-  "version": "0.0.0-dev-v2-20230405030905",
+  "version": "0.0.0-dev-v2-20230405205125",
   "description": "Chips help people enter information, make selections, filter content, or trigger actions.",
   "keywords": [
     "chip"

packages/components/code/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @nextui-org/code
 
+## 0.0.0-dev-v2-20230405205125
+
+### Patch Changes
+
+- Native events exposed in all form elements
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230405205125
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230405205125
+  - @nextui-org/system@0.0.0-dev-v2-20230405205125
+  - @nextui-org/theme@0.0.0-dev-v2-20230405205125
+
+## 0.0.0-dev-v2-20230405200614
+
+### Patch Changes
+
+- Textarea component added
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230405200614
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230405200614
+  - @nextui-org/system@0.0.0-dev-v2-20230405200614
+  - @nextui-org/theme@0.0.0-dev-v2-20230405200614
+
 ## 0.0.0-dev-v2-20230405030905
 
 ### Patch Changes

packages/components/code/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/code",
-  "version": "0.0.0-dev-v2-20230405030905",
+  "version": "0.0.0-dev-v2-20230405205125",
   "description": "Code is a component used to display inline code.",
   "keywords": [
     "code"

packages/components/drip/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @nextui-org/drip
 
+## 0.0.0-dev-v2-20230405205125
+
+### Patch Changes
+
+- Native events exposed in all form elements
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230405205125
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230405205125
+  - @nextui-org/system@0.0.0-dev-v2-20230405205125
+  - @nextui-org/theme@0.0.0-dev-v2-20230405205125
+
+## 0.0.0-dev-v2-20230405200614
+
+### Patch Changes
+
+- Textarea component added
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230405200614
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230405200614
+  - @nextui-org/system@0.0.0-dev-v2-20230405200614
+  - @nextui-org/theme@0.0.0-dev-v2-20230405200614
+
 ## 0.0.0-dev-v2-20230405030905
 
 ### Patch Changes

packages/components/drip/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/drip",
-  "version": "0.0.0-dev-v2-20230405030905",
+  "version": "0.0.0-dev-v2-20230405205125",
   "description": "A ripple effect for ensuring that the user fells the system is reacting instantaneously",
   "keywords": [
     "drip"

packages/components/input/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @nextui-org/input
 
+## 0.0.0-dev-v2-20230405205125
+
+### Patch Changes
+
+- Native events exposed in all form elements
+- Updated dependencies
+  - @nextui-org/shared-icons@0.0.0-dev-v2-20230405205125
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230405205125
+  - @nextui-org/use-aria-field@0.0.0-dev-v2-20230405205125
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230405205125
+  - @nextui-org/system@0.0.0-dev-v2-20230405205125
+  - @nextui-org/theme@0.0.0-dev-v2-20230405205125
+
+## 0.0.0-dev-v2-20230405200614
+
+### Patch Changes
+
+- Textarea component added
+- Updated dependencies
+  - @nextui-org/shared-icons@0.0.0-dev-v2-20230405200614
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230405200614
+  - @nextui-org/use-aria-field@0.0.0-dev-v2-20230405200614
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230405200614
+  - @nextui-org/system@0.0.0-dev-v2-20230405200614
+  - @nextui-org/theme@0.0.0-dev-v2-20230405200614
+
 ## 0.0.0-dev-v2-20230405030905
 
 ### Patch Changes

packages/components/input/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/input",
-  "version": "0.0.0-dev-v2-20230405030905",
+  "version": "0.0.0-dev-v2-20230405205125",
   "description": "The input component is designed for capturing user input within a text field.",
   "keywords": [
     "input"
@@ -38,15 +38,16 @@
   },
   "dependencies": {
     "@nextui-org/dom-utils": "workspace:*",
-    "@nextui-org/shared-utils": "workspace:*",
     "@nextui-org/shared-icons": "workspace:*",
+    "@nextui-org/shared-utils": "workspace:*",
     "@nextui-org/system": "workspace:*",
     "@nextui-org/theme": "workspace:*",
     "@nextui-org/use-aria-field": "workspace:*",
     "@react-aria/focus": "^3.11.0",
+    "@react-aria/interactions": "^3.14.0",
     "@react-aria/utils": "^3.15.0",
     "@react-stately/utils": "^3.6.0",
-    "@react-aria/interactions": "^3.14.0"
+    "react-textarea-autosize": "^8.4.1"
   },
   "devDependencies": {
     "@react-types/shared": "^3.15.0",

packages/components/input/src/index.ts

@@ -1,10 +1,12 @@
 import Input from "./input";
+import Textarea from "./textarea";
 
 // export types
 export type {InputProps} from "./input";
+export type {TextAreaProps} from "./textarea";
 
 // export hooks
 export {useInput} from "./use-input";
 
 // export component
-export {Input};
+export {Input, Textarea};

packages/components/input/src/input.tsx

@@ -5,7 +5,10 @@ import {useMemo} from "react";
 import {UseInputProps, useInput} from "./use-input";
 
 export interface InputProps
-  extends Omit<UseInputProps, "ref" | "isClearButtonFocusVisible" | "isLabelPlaceholder"> {}
+  extends Omit<
+    UseInputProps,
+    "ref" | "isClearButtonFocusVisible" | "isLabelPlaceholder" | "isTextarea"
+  > {}
 
 const Input = forwardRef<InputProps, "input">((props, ref) => {
   const {
@@ -59,8 +62,11 @@ const Input = forwardRef<InputProps, "input">((props, ref) => {
         {shouldLabelBeInside ? labelContent : null}
         {innerWrapper}
       </div>
-      {description && <div {...getDescriptionProps()}>{description}</div>}
+      {errorMessage ? (
-      {errorMessage && <div {...getErrorMessageProps()}>{errorMessage}</div>}
+        <div {...getErrorMessageProps()}>{errorMessage}</div>
+      ) : description ? (
+        <div {...getDescriptionProps()}>{description}</div>
+      ) : null}
     </Component>
   );
 });

packages/components/input/src/textarea.tsx

@@ -0,0 +1,103 @@
+import {forwardRef} from "@nextui-org/system";
+import {mergeProps} from "@react-aria/utils";
+import TextareaAutosize from "react-textarea-autosize";
+
+import {UseInputProps, useInput} from "./use-input";
+
+type NativeTextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+type TextareaAutoSizeStyle = Omit<
+  NonNullable<NativeTextareaProps["style"]>,
+  "maxHeight" | "minHeight"
+> & {
+  height?: number;
+};
+
+type OmittedInputProps =
+  | "isClearButtonFocusVisible"
+  | "isLabelPlaceholder"
+  | "isClearable"
+  | "isTextarea"
+  | "startContent"
+  | "endContent";
+
+export type TextareaHeightChangeMeta = {
+  rowHeight: number;
+};
+
+export interface TextAreaProps extends Omit<UseInputProps, "ref" | OmittedInputProps> {
+  /**
+   * Minimum number of rows to show for textarea
+   * @default 3
+   */
+  minRows?: number;
+  /**
+   * Maximum number of rows up to which the textarea can grow
+   * @default 6
+   */
+  maxRows?: number;
+  /**
+   * Reuse previously computed measurements when computing height of textarea.
+   * @default false
+   */
+  cacheMeasurements?: boolean;
+  /**
+   * Function invoked on textarea height change, with height as first argument.
+   * The second function argument is an object containing additional information that
+   * might be useful for custom behaviors. Current options include `{ rowHeight: number }`.
+   *
+   * @param height - The height of the textarea
+   * @param meta - Additional information about the height change
+   */
+  onHeightChange?: (height: number, meta: TextareaHeightChangeMeta) => void;
+}
+
+const Textarea = forwardRef<TextAreaProps, "textarea">(
+  (
+    {style, minRows = 3, maxRows = 8, cacheMeasurements = false, onHeightChange, ...otherProps},
+    ref,
+  ) => {
+    const {
+      Component,
+      label,
+      description,
+      shouldLabelBeOutside,
+      shouldLabelBeInside,
+      errorMessage,
+      getBaseProps,
+      getLabelProps,
+      getInputProps,
+      getInputWrapperProps,
+      getDescriptionProps,
+      getErrorMessageProps,
+    } = useInput({ref, ...otherProps, isMultiline: true});
+
+    const labelContent = <label {...getLabelProps()}>{label}</label>;
+    const inputProps = getInputProps();
+
+    return (
+      <Component {...getBaseProps()}>
+        {shouldLabelBeOutside ? labelContent : null}
+        <div {...getInputWrapperProps()}>
+          {shouldLabelBeInside ? labelContent : null}
+          <TextareaAutosize
+            {...inputProps}
+            cacheMeasurements={cacheMeasurements}
+            maxRows={maxRows}
+            minRows={minRows}
+            style={mergeProps(inputProps.style as TextareaAutoSizeStyle, style ?? {})}
+            onHeightChange={onHeightChange}
+          />
+        </div>
+        {errorMessage ? (
+          <div {...getErrorMessageProps()}>{errorMessage}</div>
+        ) : description ? (
+          <div {...getDescriptionProps()}>{description}</div>
+        ) : null}
+      </Component>
+    );
+  },
+);
+
+Textarea.displayName = "NextUI.Textarea";
+
+export default Textarea;

packages/components/input/src/use-input.ts

@@ -8,12 +8,12 @@ import {useDOMRef} from "@nextui-org/dom-utils";
 import {usePress} from "@react-aria/interactions";
 import {clsx, dataAttr} from "@nextui-org/shared-utils";
 import {useControlledState} from "@react-stately/utils";
-import {useMemo, Ref} from "react";
+import {useMemo, Ref, RefObject} from "react";
 import {chain, filterDOMProps, mergeProps} from "@react-aria/utils";
 
-import {useAriaTextField} from "./use-aria-text-field";
+import {useAriaTextField} from "./use-aria-textfield";
 
-export interface Props extends Omit<HTMLNextUIProps<"input">, "onChange"> {
+export interface Props extends HTMLNextUIProps<"input"> {
   /**
    * Ref to the DOM node.
    */
@@ -29,11 +29,6 @@ export interface Props extends Omit<HTMLNextUIProps<"input">, "onChange"> {
    * default clear button.
    */
   endContent?: React.ReactNode;
-  /**
-   * Callback fired when the value is cleared.
-   * if you pass this prop, the clear button will be shown.
-   */
-  onClear?: () => void;
   /**
    * Classname or List of classes to change the styles of the element.
    * if `className` is passed, it will be added to the base slot.
@@ -47,14 +42,23 @@ export interface Props extends Omit<HTMLNextUIProps<"input">, "onChange"> {
    *    input: "input-classes",
    *    clearButton: "clear-button-classes",
    *    description: "description-classes",
-   *    helperText: "helper-text-classes",
+   *    errorMessage: "error-message-classes",
    * }} />
    * ```
    */
   styles?: SlotsToClasses<InputSlots>;
+  /**
+   * Callback fired when the value is cleared.
+   * if you pass this prop, the clear button will be shown.
+   */
+  onClear?: () => void;
+  /**
+   * React aria onChange event.
+   */
+  onValueChange?: AriaTextFieldProps["onChange"];
 }
 
-export type UseInputProps = Props & AriaTextFieldProps & InputVariantProps;
+export type UseInputProps = Props & Omit<AriaTextFieldProps, "onChange"> & InputVariantProps;
 
 export function useInput(originalProps: UseInputProps) {
   const [props, variantProps] = mapPropsVariants(originalProps, input.variantKeys);
@@ -72,6 +76,7 @@ export function useInput(originalProps: UseInputProps) {
     endContent,
     onClear,
     onChange,
+    onValueChange,
     ...otherProps
   } = props;
 
@@ -79,8 +84,11 @@ export function useInput(originalProps: UseInputProps) {
 
   const Component = as || "div";
   const baseStyles = clsx(styles?.base, className, !!inputValue ? "is-filled" : "");
+  const isMultiline = originalProps.isMultiline;
 
-  const domRef = useDOMRef<HTMLInputElement>(ref);
+  const domRef = useDOMRef(ref) as typeof isMultiline extends "true"
+    ? RefObject<HTMLTextAreaElement>
+    : RefObject<HTMLInputElement>;
 
   const handleClear = () => {
     setInputValue(undefined);
@@ -95,8 +103,9 @@ export function useInput(originalProps: UseInputProps) {
   const {labelProps, inputProps, descriptionProps, errorMessageProps} = useAriaTextField(
     {
       ...originalProps,
+      inputElementType: isMultiline ? "textarea" : "input",
       value: inputValue,
-      onChange: chain(onChange, setInputValue),
+      onChange: chain(onValueChange, setInputValue),
     },
     domRef,
   );
@@ -115,7 +124,7 @@ export function useInput(originalProps: UseInputProps) {
 
   const isInvalid = props.validationState === "invalid";
   const labelPosition = originalProps.labelPosition || "inside";
-  const isLabelPlaceholder = !props.placeholder && labelPosition !== "outside-left";
+  const isLabelPlaceholder = !props.placeholder && labelPosition !== "outside-left" && !isMultiline;
   const isClearable = !!onClear || originalProps.isClearable;
 
   const shouldLabelBeOutside = labelPosition === "outside" || labelPosition === "outside-left";
@@ -170,6 +179,7 @@ export function useInput(originalProps: UseInputProps) {
       "data-focused": dataAttr(isFocused),
       "data-invalid": dataAttr(isInvalid),
       ...mergeProps(focusProps, inputProps, filterDOMProps(otherProps, {labelable: true}), props),
+      onChange: chain(inputProps.onChange, onChange),
     };
   };
 
@@ -235,6 +245,7 @@ export function useInput(originalProps: UseInputProps) {
     endContent,
     labelPosition,
     isClearable,
+    isInvalid,
     shouldLabelBeOutside,
     shouldLabelBeInside,
     errorMessage,

packages/components/input/stories/input.stories.tsx

@@ -123,7 +123,7 @@ const RegexValidationTemplate: ComponentStory<typeof Input> = (args: InputProps)
         placeholder="Enter your email"
         validationState={validationState}
         value={value}
-        onChange={setValue}
+        onValueChange={setValue}
       />
     </div>
   );
@@ -134,7 +134,7 @@ const ControlledTemplate: ComponentStory<typeof Input> = (args: InputProps) => {
 
   return (
     <div className="w-full flex flex-col gap-2 max-w-[240px]">
-      <Input {...args} placeholder="Enter your email" value={value} onChange={setValue} />
+      <Input {...args} placeholder="Enter your email" value={value} onValueChange={setValue} />
       <p className="text-neutral-500 text-sm">Input value: {value}</p>
     </div>
   );
@@ -434,11 +434,6 @@ const CustomWithHooksTemplate: ComponentStory<typeof Input> = (args: InputProps)
   );
 };
 
-export const Empty = Template.bind({});
-Empty.args = {
-  label: "Email",
-};
-
 export const Default = MirrorTemplate.bind({});
 Default.args = {
   ...defaultProps,

packages/components/input/stories/textarea.stories.tsx

@@ -0,0 +1,135 @@
+import React from "react";
+import {ComponentStory, ComponentMeta} from "@storybook/react";
+import {input} from "@nextui-org/theme";
+
+import {Textarea, TextAreaProps} from "../src";
+
+export default {
+  title: "Components/Textarea",
+  component: Textarea,
+  argTypes: {
+    variant: {
+      control: {
+        type: "select",
+        options: ["flat", "faded", "bordered", "underlined"],
+      },
+    },
+    color: {
+      control: {
+        type: "select",
+        options: ["neutral", "primary", "secondary", "success", "warning", "danger"],
+      },
+    },
+    radius: {
+      control: {
+        type: "select",
+        options: ["none", "base", "sm", "md", "lg", "xl", "full"],
+      },
+    },
+    size: {
+      control: {
+        type: "select",
+        options: ["xs", "sm", "md", "lg", "xl"],
+      },
+    },
+    labelPosition: {
+      control: {
+        type: "select",
+        options: ["inside", "outside", "outside-left"],
+      },
+    },
+    isDisabled: {
+      control: {
+        type: "boolean",
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className="flex items-center justify-center w-screen h-screen">
+        <Story />
+      </div>
+    ),
+  ],
+} as ComponentMeta<typeof Textarea>;
+
+const defaultProps = {
+  ...input.defaultVariants,
+  label: "Description",
+  placeholder: "Enter your description",
+};
+
+const Template: ComponentStory<typeof Textarea> = (args: TextAreaProps) => (
+  <div className="w-full max-w-[440px]">
+    <Textarea {...args} />
+  </div>
+);
+
+const MinRowsTemplate: ComponentStory<typeof Textarea> = (args: TextAreaProps) => (
+  <div className="w-full max-w-xl flex flex-row gap-4">
+    <Textarea {...args} description="Default minRows is 3" />
+    <Textarea {...args} description="minRows is 5" minRows={5} />
+    <Textarea {...args} description="minRows is 10" minRows={10} />
+  </div>
+);
+
+const MaxRowsTemplate: ComponentStory<typeof Textarea> = (args: TextAreaProps) => (
+  <div className="w-full max-w-xl flex flex-row gap-4">
+    <Textarea {...args} description="Default maxRows is 8" />
+    <Textarea {...args} description="maxRows is 5" maxRows={5} />
+    <Textarea {...args} description="maxRows is 3" maxRows={3} />
+  </div>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  ...defaultProps,
+};
+
+export const Required = Template.bind({});
+Required.args = {
+  ...defaultProps,
+  isRequired: true,
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  ...defaultProps,
+  defaultValue: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+  variant: "faded",
+  isDisabled: true,
+};
+
+export const ReadOnly = Template.bind({});
+ReadOnly.args = {
+  ...defaultProps,
+  defaultValue: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+  variant: "bordered",
+  isReadOnly: true,
+};
+
+export const MinRows = MinRowsTemplate.bind({});
+MinRows.args = {
+  ...defaultProps,
+};
+
+export const MaxRows = MaxRowsTemplate.bind({});
+MaxRows.args = {
+  ...defaultProps,
+  defaultValue:
+    "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl nec ultricies ultricies, nisl nisl aliquam nisl, eget tincidunt nunc nisl eget nisl. Nullam euismod, nisl nec ultricies ultricies, nisl nisl aliquam nisl, eget tincidunt nunc nisl eget nisl. Nullam euismod, nisl nec ultricies ultricies, nisl nisl aliquam nisl, eget tincidunt nunc nisl eget nisl. Nullam euismod, nisl nec ultricies ultricies, nisl nisl aliquam nisl, eget tincidunt nunc nisl eget nisl. Nullam euismod, nisl nec ultricies ultricies, nisl nisl aliquam nisl, eget tincidunt nunc nisl eget nisl. Nullam euismod, nisl nec ultricies ultricies, nisl nisl aliquam nisl, eget tincidunt nunc nisl eget nisl. Nullam euismod, nisl nec ultricies ultricies, nisl nisl aliquam nisl, eget tincidunt nunc nisl eget nisl. Nullam euismod, nisl nec",
+};
+
+export const WithErrorMessage = Template.bind({});
+WithErrorMessage.args = {
+  ...defaultProps,
+  errorMessage: "Please enter a valid description",
+};
+
+export const InvalidValidationState = Template.bind({});
+InvalidValidationState.args = {
+  ...defaultProps,
+  validationState: "invalid",
+  defaultValue: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+  errorMessage: "Please enter a valid description",
+};

packages/components/link/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @nextui-org/link
 
+## 0.0.0-dev-v2-20230405205125
+
+### Patch Changes
+
+- Native events exposed in all form elements
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230405205125
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230405205125
+  - @nextui-org/system@0.0.0-dev-v2-20230405205125
+  - @nextui-org/theme@0.0.0-dev-v2-20230405205125
+
+## 0.0.0-dev-v2-20230405200614
+
+### Patch Changes
+
+- Textarea component added
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230405200614
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230405200614
+  - @nextui-org/system@0.0.0-dev-v2-20230405200614
+  - @nextui-org/theme@0.0.0-dev-v2-20230405200614
+
 ## 0.0.0-dev-v2-20230405030905
 
 ### Patch Changes

packages/components/link/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/link",
-  "version": "0.0.0-dev-v2-20230405030905",
+  "version": "0.0.0-dev-v2-20230405205125",
   "description": "Links allow users to click their way from page to page. This component is styled to resemble a hyperlink and semantically renders an <a>",
   "keywords": [
     "link"

packages/components/pagination/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @nextui-org/pagination
 
+## 0.0.0-dev-v2-20230405205125
+
+### Patch Changes
+
+- Native events exposed in all form elements
+- Updated dependencies
+  - @nextui-org/shared-icons@0.0.0-dev-v2-20230405205125
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230405205125
+  - @nextui-org/use-pagination@0.0.0-dev-v2-20230405205125
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230405205125
+  - @nextui-org/system@0.0.0-dev-v2-20230405205125
+  - @nextui-org/theme@0.0.0-dev-v2-20230405205125
+
+## 0.0.0-dev-v2-20230405200614
+
+### Patch Changes
+
+- Textarea component added
+- Updated dependencies
+  - @nextui-org/shared-icons@0.0.0-dev-v2-20230405200614
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230405200614
+  - @nextui-org/use-pagination@0.0.0-dev-v2-20230405200614
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230405200614
+  - @nextui-org/system@0.0.0-dev-v2-20230405200614
+  - @nextui-org/theme@0.0.0-dev-v2-20230405200614
+
 ## 0.0.0-dev-v2-20230405030905
 
 ### Patch Changes

packages/components/pagination/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/pagination",
-  "version": "0.0.0-dev-v2-20230405030905",
+  "version": "0.0.0-dev-v2-20230405205125",
   "description": "The Pagination component allows you to display active page and navigate between multiple pages.",
   "keywords": [
     "pagination"

packages/components/progress/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @nextui-org/progress
 
+## 0.0.0-dev-v2-20230405205125
+
+### Patch Changes
+
+- Native events exposed in all form elements
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230405205125
+  - @nextui-org/use-aria-label@0.0.0-dev-v2-20230405205125
+  - @nextui-org/use-is-mounted@0.0.0-dev-v2-20230405205125
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230405205125
+  - @nextui-org/system@0.0.0-dev-v2-20230405205125
+  - @nextui-org/theme@0.0.0-dev-v2-20230405205125
+
+## 0.0.0-dev-v2-20230405200614
+
+### Patch Changes
+
+- Textarea component added
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230405200614
+  - @nextui-org/use-aria-label@0.0.0-dev-v2-20230405200614
+  - @nextui-org/use-is-mounted@0.0.0-dev-v2-20230405200614
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230405200614
+  - @nextui-org/system@0.0.0-dev-v2-20230405200614
+  - @nextui-org/theme@0.0.0-dev-v2-20230405200614
+
 ## 0.0.0-dev-v2-20230405030905
 
 ### Patch Changes

packages/components/progress/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/progress",
-  "version": "0.0.0-dev-v2-20230405030905",
+  "version": "0.0.0-dev-v2-20230405205125",
   "description": "Progress bars show either determinate or indeterminate progress of an operation over time.",
   "keywords": [
     "progress"

packages/components/radio/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @nextui-org/radio
 
+## 0.0.0-dev-v2-20230405205125
+
+### Patch Changes
+
+- Native events exposed in all form elements
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230405205125
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230405205125
+  - @nextui-org/system@0.0.0-dev-v2-20230405205125
+  - @nextui-org/theme@0.0.0-dev-v2-20230405205125
+
+## 0.0.0-dev-v2-20230405200614
+
+### Patch Changes
+
+- Textarea component added
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230405200614
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230405200614
+  - @nextui-org/system@0.0.0-dev-v2-20230405200614
+  - @nextui-org/theme@0.0.0-dev-v2-20230405200614
+
 ## 0.0.0-dev-v2-20230405030905
 
 ### Patch Changes

packages/components/radio/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/radio",
-  "version": "0.0.0-dev-v2-20230405030905",
+  "version": "0.0.0-dev-v2-20230405205125",
   "description": "Radios allow users to select a single option from a list of mutually exclusive options.",
   "keywords": [
     "radio"

packages/components/radio/src/radio-group.tsx

@@ -6,8 +6,15 @@ import {UseRadioGroupProps, useRadioGroup} from "./use-radio-group";
 export interface RadioGroupProps extends Omit<UseRadioGroupProps, "ref"> {}
 
 const RadioGroup = forwardRef<RadioGroupProps, "div">((props, ref) => {
-  const {Component, children, label, context, getGroupProps, getLabelProps, getWrapperProps} =
+  const {
-    useRadioGroup({ref, ...props});
+    Component,
+    children,
+    label,
+    context,
+    getGroupProps,
+    getLabelProps,
+    getWrapperProps,
+  } = useRadioGroup({ref, ...props});
 
   return (
     <Component {...getGroupProps()}>

packages/components/radio/src/use-radio-group.ts

@@ -14,7 +14,7 @@ import {mergeProps} from "@react-aria/utils";
 
 import {RadioProps} from "./index";
 
-interface Props extends HTMLNextUIProps<"div", AriaRadioGroupProps> {
+interface Props extends HTMLNextUIProps<"div"> {
   /**
    * Ref to the DOM node.
    */
@@ -40,10 +40,15 @@ interface Props extends HTMLNextUIProps<"div", AriaRadioGroupProps> {
    * ```
    */
   styles?: SlotsToClasses<RadioGroupSlots>;
+  /**
+   * React aria onChange event.
+   */
+  onValueChange?: AriaRadioGroupProps["onChange"];
 }
 
 export type UseRadioGroupProps = Omit<Props, "defaultChecked"> &
-  Pick<RadioProps, "color" | "size" | "radius" | "isDisabled" | "disableAnimation">;
+  Omit<AriaRadioGroupProps, "onChange"> &
+  Pick<RadioProps, "color" | "size" | "radius" | "isDisabled" | "disableAnimation" | "onChange">;
 
 export type ContextType = {
   groupState: RadioGroupState;
@@ -54,6 +59,7 @@ export type ContextType = {
   radius?: RadioProps["radius"];
   isDisabled?: RadioProps["isDisabled"];
   disableAnimation?: RadioProps["disableAnimation"];
+  onChange?: RadioProps["onChange"];
 };
 
 export function useRadioGroup(props: UseRadioGroupProps) {
@@ -72,6 +78,8 @@ export function useRadioGroup(props: UseRadioGroupProps) {
     isRequired = false,
     validationState,
     className,
+    onChange,
+    onValueChange,
     ...otherProps
   } = props;
 
@@ -85,8 +93,9 @@ export function useRadioGroup(props: UseRadioGroupProps) {
       "aria-label": typeof label === "string" ? label : otherProps["aria-label"],
       isRequired,
       orientation,
+      onChange: onValueChange,
     };
-  }, [otherProps]);
+  }, [otherProps, onValueChange]);
 
   const groupState = useRadioGroupState(otherPropsWithOrientation);
 
@@ -105,8 +114,19 @@ export function useRadioGroup(props: UseRadioGroupProps) {
       validationState,
       isDisabled,
       disableAnimation,
+      onChange,
     }),
-    [size, color, radius, groupState, isRequired, validationState, isDisabled, disableAnimation],
+    [
+      size,
+      color,
+      radius,
+      groupState,
+      isRequired,
+      validationState,
+      isDisabled,
+      disableAnimation,
+      onChange,
+    ],
   );
 
   const slots = useMemo(() => radioGroup(), []);

packages/components/radio/src/use-radio.ts

@@ -10,7 +10,7 @@ import {useRadio as useReactAriaRadio} from "@react-aria/radio";
 import {HTMLNextUIProps, PropGetter} from "@nextui-org/system";
 import {__DEV__, warn, clsx, dataAttr} from "@nextui-org/shared-utils";
 import {useDOMRef} from "@nextui-org/dom-utils";
-import {mergeProps} from "@react-aria/utils";
+import {chain, mergeProps} from "@react-aria/utils";
 
 import {useRadioGroupContext} from "./radio-group-context";
 
@@ -66,6 +66,7 @@ export function useRadio(props: UseRadioProps) {
     radius = groupContext?.radius ?? "full",
     isDisabled: isDisabledProp = groupContext?.isDisabled ?? false,
     disableAnimation = groupContext?.disableAnimation ?? false,
+    onChange = groupContext?.onChange,
     autoFocus = false,
     className,
     ...otherProps
@@ -89,10 +90,9 @@ export function useRadio(props: UseRadioProps) {
 
   const isDisabled = useMemo(() => !!isDisabledProp, [isDisabledProp]);
   const isRequired = useMemo(() => groupContext.isRequired ?? false, [groupContext.isRequired]);
-  const isInvalid = useMemo(
+  const isInvalid = useMemo(() => groupContext.validationState === "invalid", [
-    () => groupContext.validationState === "invalid",
+    groupContext.validationState,
-    [groupContext.validationState],
+  ]);
-  );
 
   const ariaRadioProps = useMemo(() => {
     const ariaLabel =
@@ -186,6 +186,7 @@ export function useRadio(props: UseRadioProps) {
       "data-invalid": dataAttr(isInvalid),
       "data-readonly": dataAttr(inputProps.readOnly),
       ...mergeProps(inputProps, focusProps),
+      onChange: chain(inputProps.onChange, onChange),
     };
   };
 

packages/components/radio/stories/radio.stories.tsx

@@ -117,7 +117,12 @@ const ControlledTemplate: ComponentStory<typeof RadioGroup> = (args: RadioGroupP
 
   return (
     <div className="flex flex-col gap-2">
-      <RadioGroup label="Select city" value={selectedItem} onChange={setSelectedItem} {...args}>
+      <RadioGroup
+        label="Select city"
+        value={selectedItem}
+        onValueChange={setSelectedItem}
+        {...args}
+      >
         <Radio value="buenos-aires">Buenos Aires</Radio>
         <Radio value="sydney">Sydney</Radio>
         <Radio value="london">London</Radio>

packages/components/snippet/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @nextui-org/snippet
 
+## 0.0.0-dev-v2-20230405205125
+
+### Patch Changes
+
+- Native events exposed in all form elements
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230405205125
+  - @nextui-org/use-clipboard@0.0.0-dev-v2-20230405205125
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230405205125
+  - @nextui-org/tooltip@0.0.0-dev-v2-20230405205125
+  - @nextui-org/system@0.0.0-dev-v2-20230405205125
+  - @nextui-org/theme@0.0.0-dev-v2-20230405205125
+
+## 0.0.0-dev-v2-20230405200614
+
+### Patch Changes
+
+- Textarea component added
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230405200614
+  - @nextui-org/use-clipboard@0.0.0-dev-v2-20230405200614
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230405200614
+  - @nextui-org/tooltip@0.0.0-dev-v2-20230405200614
+  - @nextui-org/system@0.0.0-dev-v2-20230405200614
+  - @nextui-org/theme@0.0.0-dev-v2-20230405200614
+
 ## 0.0.0-dev-v2-20230405030905
 
 ### Patch Changes

packages/components/snippet/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/snippet",
-  "version": "0.0.0-dev-v2-20230405030905",
+  "version": "0.0.0-dev-v2-20230405205125",
   "description": "Display a snippet of copyable code for the command line.",
   "keywords": [
     "snippet"

packages/components/spinner/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @nextui-org/spinner
 
+## 0.0.0-dev-v2-20230405205125
+
+### Patch Changes
+
+- Native events exposed in all form elements
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230405205125
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230405205125
+  - @nextui-org/system@0.0.0-dev-v2-20230405205125
+  - @nextui-org/theme@0.0.0-dev-v2-20230405205125
+
+## 0.0.0-dev-v2-20230405200614
+
+### Patch Changes
+
+- Textarea component added
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230405200614
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230405200614
+  - @nextui-org/system@0.0.0-dev-v2-20230405200614
+  - @nextui-org/theme@0.0.0-dev-v2-20230405200614
+
 ## 0.0.0-dev-v2-20230405030905
 
 ### Patch Changes

packages/components/spinner/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/spinner",
-  "version": "0.0.0-dev-v2-20230405030905",
+  "version": "0.0.0-dev-v2-20230405205125",
   "description": "Loaders express an unspecified wait time or display the length of a process.",
   "keywords": [
     "loading",

packages/components/switch/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @nextui-org/switch
 
+## 0.0.0-dev-v2-20230405205125
+
+### Patch Changes
+
+- Native events exposed in all form elements
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230405205125
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230405205125
+  - @nextui-org/system@0.0.0-dev-v2-20230405205125
+  - @nextui-org/theme@0.0.0-dev-v2-20230405205125
+
+## 0.0.0-dev-v2-20230405200614
+
+### Patch Changes
+
+- Textarea component added
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230405200614
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230405200614
+  - @nextui-org/system@0.0.0-dev-v2-20230405200614
+  - @nextui-org/theme@0.0.0-dev-v2-20230405200614
+
 ## 0.0.0-dev-v2-20230405030905
 
 ### Patch Changes

packages/components/switch/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/switch",
-  "version": "0.0.0-dev-v2-20230405030905",
+  "version": "0.0.0-dev-v2-20230405205125",
   "description": "A switch is similar to a checkbox, but represents on/off values as opposed to selection.",
   "keywords": [
     "switch"

packages/components/switch/src/use-switch.ts

@@ -7,7 +7,7 @@ import {ReactNode, Ref, useCallback, useId, useRef} from "react";
 import {mapPropsVariants} from "@nextui-org/system";
 import {useHover} from "@react-aria/interactions";
 import {toggle} from "@nextui-org/theme";
-import {mergeProps} from "@react-aria/utils";
+import {chain, mergeProps} from "@react-aria/utils";
 import {clsx, dataAttr} from "@nextui-org/shared-utils";
 import {useFocusableRef} from "@nextui-org/dom-utils";
 import {useSwitch as useReactAriaSwitch} from "@react-aria/switch";
@@ -64,10 +64,14 @@ interface Props extends HTMLNextUIProps<"label"> {
    * ```
    */
   styles?: SlotsToClasses<ToggleSlots>;
+  /**
+   * React aria onChange event.
+   */
+  onValueChange?: AriaSwitchProps["onChange"];
 }
 
-export type UseSwitchProps = Omit<Props, "defaultChecked" | "onChange"> &
+export type UseSwitchProps = Omit<Props, "defaultChecked"> &
-  Omit<AriaSwitchProps, keyof ToggleVariantProps> &
+  Omit<AriaSwitchProps, keyof ToggleVariantProps | "onChange"> &
   ToggleVariantProps;
 
 export function useSwitch(originalProps: UseSwitchProps) {
@@ -89,6 +93,7 @@ export function useSwitch(originalProps: UseSwitchProps) {
     className,
     styles,
     onChange,
+    onValueChange,
     ...otherProps
   } = props;
 
@@ -114,7 +119,7 @@ export function useSwitch(originalProps: UseSwitchProps) {
       isReadOnly,
       "aria-label": ariaLabel,
       "aria-labelledby": otherProps["aria-labelledby"] || labelId,
-      onChange,
+      onChange: onValueChange,
     };
   }, [
     value,
@@ -127,7 +132,7 @@ export function useSwitch(originalProps: UseSwitchProps) {
     originalProps.isDisabled,
     otherProps["aria-label"],
     otherProps["aria-labelledby"],
-    onChange,
+    onValueChange,
   ]);
 
   const state = useToggleState(ariaSwitchProps);
@@ -188,6 +193,7 @@ export function useSwitch(originalProps: UseSwitchProps) {
       ref: inputRef,
       id: inputProps.id,
       ...mergeProps(inputProps, focusProps),
+      onChange: chain(onChange, inputProps.onChange),
     };
   };
 
@@ -219,7 +225,7 @@ export function useSwitch(originalProps: UseSwitchProps) {
         includeStateProps: false,
       },
     ) =>
-      mergeProps(
+      (mergeProps(
         {
           width: "1em",
           height: "1em",
@@ -231,7 +237,7 @@ export function useSwitch(originalProps: UseSwitchProps) {
               isSelected: isSelected,
             }
           : {},
-      ) as unknown as SwitchThumbIconProps,
+      ) as unknown) as SwitchThumbIconProps,
     [slots, styles?.thumbIcon, isSelected, originalProps.disableAnimation],
   );
 

packages/components/switch/stories/switch.stories.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/display-name */
 import React from "react";
 import {ComponentStory, ComponentMeta} from "@storybook/react";
 import {toggle} from "@nextui-org/theme";
@@ -55,7 +56,7 @@ const WithIconsTemplate: ComponentStory<typeof Switch> = (args: SwitchProps) =>
         styles={{
           leftIcon: "text-white",
         }}
-        onChange={setIsSelected}
+        onValueChange={setIsSelected}
       />
       <p className="text-neutral-500">Selected: {isSelected ? "true" : "false"}</p>
     </div>
@@ -67,7 +68,7 @@ const ControlledTemplate: ComponentStory<typeof Switch> = (args: SwitchProps) =>
 
   return (
     <div className="flex flex-col gap-2">
-      <Switch {...args} isSelected={isSelected} onChange={setIsSelected} />
+      <Switch {...args} isSelected={isSelected} onValueChange={setIsSelected} />
       <p className="text-neutral-500">Selected: {isSelected ? "true" : "false"}</p>
     </div>
   );
@@ -89,7 +90,7 @@ const CustomWithStylesTemplate: ComponentStory<typeof Switch> = (args: SwitchPro
             },
           ),
         }}
-        onChange={setIsSelected}
+        onValueChange={setIsSelected}
         {...args}
       >
         <div className="flex flex-col gap-1">
@@ -105,8 +106,9 @@ const CustomWithStylesTemplate: ComponentStory<typeof Switch> = (args: SwitchPro
 };
 
 const CustomWithHooksTemplate: ComponentStory<typeof Switch> = (args: SwitchProps) => {
-  const {Component, slots, isSelected, getBaseProps, getInputProps, getWrapperProps} =
+  const {Component, slots, isSelected, getBaseProps, getInputProps, getWrapperProps} = useSwitch(
-    useSwitch(args);
+    args,
+  );
 
   return (
     <div className="flex flex-col gap-2">

packages/components/tooltip/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @nextui-org/tooltip
 
+## 0.0.0-dev-v2-20230405205125
+
+### Patch Changes
+
+- Native events exposed in all form elements
+- Updated dependencies
+  - @nextui-org/framer-transitions@0.0.0-dev-v2-20230405205125
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230405205125
+  - @nextui-org/react-utils@0.0.0-dev-v2-20230405205125
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230405205125
+  - @nextui-org/system@0.0.0-dev-v2-20230405205125
+  - @nextui-org/theme@0.0.0-dev-v2-20230405205125
+
+## 0.0.0-dev-v2-20230405200614
+
+### Patch Changes
+
+- Textarea component added
+- Updated dependencies
+  - @nextui-org/framer-transitions@0.0.0-dev-v2-20230405200614
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230405200614
+  - @nextui-org/react-utils@0.0.0-dev-v2-20230405200614
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230405200614
+  - @nextui-org/system@0.0.0-dev-v2-20230405200614
+  - @nextui-org/theme@0.0.0-dev-v2-20230405200614
+
 ## 0.0.0-dev-v2-20230405030905
 
 ### Patch Changes

packages/components/tooltip/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/tooltip",
-  "version": "0.0.0-dev-v2-20230405030905",
+  "version": "0.0.0-dev-v2-20230405205125",
   "description": "A React Component for rendering dynamically positioned Tooltips",
   "keywords": [
     "tooltip"

packages/components/user/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @nextui-org/user
 
+## 0.0.0-dev-v2-20230405205125
+
+### Patch Changes
+
+- Native events exposed in all form elements
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230405205125
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230405205125
+  - @nextui-org/avatar@0.0.0-dev-v2-20230405205125
+  - @nextui-org/system@0.0.0-dev-v2-20230405205125
+  - @nextui-org/theme@0.0.0-dev-v2-20230405205125
+
+## 0.0.0-dev-v2-20230405200614
+
+### Patch Changes
+
+- Textarea component added
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230405200614
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230405200614
+  - @nextui-org/avatar@0.0.0-dev-v2-20230405200614
+  - @nextui-org/system@0.0.0-dev-v2-20230405200614
+  - @nextui-org/theme@0.0.0-dev-v2-20230405200614
+
 ## 0.0.0-dev-v2-20230405030905
 
 ### Patch Changes

packages/components/user/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/user",
-  "version": "0.0.0-dev-v2-20230405030905",
+  "version": "0.0.0-dev-v2-20230405205125",
   "description": "Flexible User Profile Component.",
   "keywords": [
     "user"

packages/core/react/CHANGELOG.md

@@ -1,5 +1,61 @@
 # @nextui-org/react
 
+## 0.0.0-dev-v2-20230405205125
+
+### Patch Changes
+
+- Native events exposed in all form elements
+- Updated dependencies
+  - @nextui-org/pagination@0.0.0-dev-v2-20230405205125
+  - @nextui-org/accordion@0.0.0-dev-v2-20230405205125
+  - @nextui-org/checkbox@0.0.0-dev-v2-20230405205125
+  - @nextui-org/progress@0.0.0-dev-v2-20230405205125
+  - @nextui-org/snippet@0.0.0-dev-v2-20230405205125
+  - @nextui-org/spinner@0.0.0-dev-v2-20230405205125
+  - @nextui-org/tooltip@0.0.0-dev-v2-20230405205125
+  - @nextui-org/avatar@0.0.0-dev-v2-20230405205125
+  - @nextui-org/button@0.0.0-dev-v2-20230405205125
+  - @nextui-org/switch@0.0.0-dev-v2-20230405205125
+  - @nextui-org/badge@0.0.0-dev-v2-20230405205125
+  - @nextui-org/input@0.0.0-dev-v2-20230405205125
+  - @nextui-org/radio@0.0.0-dev-v2-20230405205125
+  - @nextui-org/card@0.0.0-dev-v2-20230405205125
+  - @nextui-org/chip@0.0.0-dev-v2-20230405205125
+  - @nextui-org/code@0.0.0-dev-v2-20230405205125
+  - @nextui-org/drip@0.0.0-dev-v2-20230405205125
+  - @nextui-org/link@0.0.0-dev-v2-20230405205125
+  - @nextui-org/user@0.0.0-dev-v2-20230405205125
+  - @nextui-org/system@0.0.0-dev-v2-20230405205125
+  - @nextui-org/theme@0.0.0-dev-v2-20230405205125
+
+## 0.0.0-dev-v2-20230405200614
+
+### Patch Changes
+
+- Textarea component added
+- Updated dependencies
+  - @nextui-org/pagination@0.0.0-dev-v2-20230405200614
+  - @nextui-org/accordion@0.0.0-dev-v2-20230405200614
+  - @nextui-org/checkbox@0.0.0-dev-v2-20230405200614
+  - @nextui-org/progress@0.0.0-dev-v2-20230405200614
+  - @nextui-org/snippet@0.0.0-dev-v2-20230405200614
+  - @nextui-org/spinner@0.0.0-dev-v2-20230405200614
+  - @nextui-org/tooltip@0.0.0-dev-v2-20230405200614
+  - @nextui-org/avatar@0.0.0-dev-v2-20230405200614
+  - @nextui-org/button@0.0.0-dev-v2-20230405200614
+  - @nextui-org/switch@0.0.0-dev-v2-20230405200614
+  - @nextui-org/badge@0.0.0-dev-v2-20230405200614
+  - @nextui-org/input@0.0.0-dev-v2-20230405200614
+  - @nextui-org/radio@0.0.0-dev-v2-20230405200614
+  - @nextui-org/card@0.0.0-dev-v2-20230405200614
+  - @nextui-org/chip@0.0.0-dev-v2-20230405200614
+  - @nextui-org/code@0.0.0-dev-v2-20230405200614
+  - @nextui-org/drip@0.0.0-dev-v2-20230405200614
+  - @nextui-org/link@0.0.0-dev-v2-20230405200614
+  - @nextui-org/user@0.0.0-dev-v2-20230405200614
+  - @nextui-org/system@0.0.0-dev-v2-20230405200614
+  - @nextui-org/theme@0.0.0-dev-v2-20230405200614
+
 ## 0.0.0-dev-v2-20230405030905
 
 ### Patch Changes

packages/core/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/react",
-  "version": "0.0.0-dev-v2-20230405030905",
+  "version": "0.0.0-dev-v2-20230405205125",
   "description": "🚀 Beautiful and modern React UI library.",
   "author": "Junior Garcia <jrgarciadev@gmail.com>",
   "homepage": "https://nextui.org",

packages/core/system/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @nextui-org/system
 
+## 0.0.0-dev-v2-20230405205125
+
+### Patch Changes
+
+- Native events exposed in all form elements
+
+## 0.0.0-dev-v2-20230405200614
+
+### Patch Changes
+
+- Textarea component added
+
 ## 0.0.0-dev-v2-20230405030905
 
 ### Patch Changes

packages/core/system/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/system",
-  "version": "0.0.0-dev-v2-20230405030905",
+  "version": "0.0.0-dev-v2-20230405205125",
   "description": "NextUI system primitives",
   "keywords": [
     "system"

packages/core/system/src/types.ts

@@ -35,14 +35,14 @@ export type OmitCommonProps<Target, OmitAdditionalProps extends keyof any = neve
 
 export type RightJoinProps<
   SourceProps extends object = {},
-  OverrideProps extends object = {},
+  OverrideProps extends object = {}
 > = OmitCommonProps<SourceProps, keyof OverrideProps> & OverrideProps;
 
 export type MergeWithAs<
   ComponentProps extends object,
   AsProps extends object,
   AdditionalProps extends object = {},
-  AsComponent extends As = As,
+  AsComponent extends As = As
 > = RightJoinProps<ComponentProps, AdditionalProps> &
   RightJoinProps<AsProps, AdditionalProps> & {
     as?: AsComponent;

packages/core/theme/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @nextui-org/theme
 
+## 0.0.0-dev-v2-20230405205125
+
+### Patch Changes
+
+- Native events exposed in all form elements
+
+## 0.0.0-dev-v2-20230405200614
+
+### Patch Changes
+
+- Textarea component added
+
 ## 0.0.0-dev-v2-20230405030905
 
 ### Patch Changes

packages/core/theme/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/theme",
-  "version": "0.0.0-dev-v2-20230405030905",
+  "version": "0.0.0-dev-v2-20230405205125",
   "description": "The default theme for NextUI components",
   "keywords": [
     "theme",

packages/core/theme/src/components/input.ts

@@ -9,7 +9,7 @@ import {ringClasses} from "../utils";
  *
  * @example
  * ```js
- * const {base, label, inputWrapper, input, clearButton, description, helperText} = input({...})
+ * const {base, label, inputWrapper, input, clearButton, description, errorMessage} = input({...})
  *
  * <div className={base())}>
  *  <label className={label()}>Label</label>
@@ -18,7 +18,7 @@ import {ringClasses} from "../utils";
  *    <button className={clearButton()}>Clear</button>
  *  </div>
  *  <span className={description()}>Description</span>
- *  <span className={helperText()}>Helper text</span>
+ *  <span className={errorMessage()}>Invalid input</span>
  * </div>
  * ```
  */
@@ -207,7 +207,7 @@ const input = tv({
     },
     isInvalid: {
       true: {
-        label: "text-danger",
+        label: "!text-danger",
         input: "placeholder:text-danger text-danger",
       },
     },
@@ -216,6 +216,12 @@ const input = tv({
         label: "after:content-['*'] after:text-danger after:ml-0.5",
       },
     },
+    isMultiline: {
+      true: {
+        inputWrapper: "!h-auto",
+        input: "resize-none",
+      },
+    },
     disableAnimation: {
       true: {
         inputWrapper: "transition-none",

packages/hooks/use-aria-accordion-item/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @nextui-org/use-aria-accordion-item
 
+## 0.0.0-dev-v2-20230405205125
+
+### Patch Changes
+
+- Native events exposed in all form elements
+
+## 0.0.0-dev-v2-20230405200614
+
+### Patch Changes
+
+- Textarea component added
+
 ## 0.0.0-dev-v2-20230405030905
 
 ### Patch Changes

packages/hooks/use-aria-accordion-item/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/use-aria-accordion-item",
-  "version": "0.0.0-dev-v2-20230405030905",
+  "version": "0.0.0-dev-v2-20230405205125",
   "description": "Internal impl for react aria accordion item",
   "keywords": [
     "use-aria-accordion-item"

packages/hooks/use-aria-field/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @nextui-org/use-aria-field
 
+## 0.0.0-dev-v2-20230405205125
+
+### Patch Changes
+
+- Native events exposed in all form elements
+- Updated dependencies
+  - @nextui-org/use-aria-slot-id@0.0.0-dev-v2-20230405205125
+  - @nextui-org/use-aria-label@0.0.0-dev-v2-20230405205125
+
+## 0.0.0-dev-v2-20230405200614
+
+### Patch Changes
+
+- Textarea component added
+- Updated dependencies
+  - @nextui-org/use-aria-slot-id@0.0.0-dev-v2-20230405200614
+  - @nextui-org/use-aria-label@0.0.0-dev-v2-20230405200614
+
 ## 0.0.0-dev-v2-20230405030905
 
 ### Patch Changes

packages/hooks/use-aria-field/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/use-aria-field",
-  "version": "0.0.0-dev-v2-20230405030905",
+  "version": "0.0.0-dev-v2-20230405205125",
   "description": "Based on react-aria useField hook, provides the accessibility implementation for input fields",
   "keywords": [
     "use-aria-field"

packages/hooks/use-aria-label/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @nextui-org/use-aria-label
 
+## 0.0.0-dev-v2-20230405205125
+
+### Patch Changes
+
+- Native events exposed in all form elements
+
+## 0.0.0-dev-v2-20230405200614
+
+### Patch Changes
+
+- Textarea component added
+
 ## 0.0.0-dev-v2-20230405030905
 
 ### Patch Changes

packages/hooks/use-aria-label/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/use-aria-label",
-  "version": "0.0.0-dev-v2-20230405030905",
+  "version": "0.0.0-dev-v2-20230405205125",
   "description": "Based on react-aria label hook, it provides the accessibility implementation for labels and their associated elements. Labels provide context for user inputs.",
   "keywords": [
     "use-aria-label"

packages/hooks/use-aria-slot-id/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @nextui-org/use-aria-slot-id
 
+## 0.0.0-dev-v2-20230405205125
+
+### Patch Changes
+
+- Native events exposed in all form elements
+
+## 0.0.0-dev-v2-20230405200614
+
+### Patch Changes
+
+- Textarea component added
+
 ## 0.0.0-dev-v2-20230405030905
 
 ### Patch Changes

packages/hooks/use-aria-slot-id/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/use-aria-slot-id",
-  "version": "0.0.0-dev-v2-20230405030905",
+  "version": "0.0.0-dev-v2-20230405205125",
   "description": "Based on react-aria useSlotId, used to generate an id, and after render check if that id is rendered",
   "keywords": [
     "use-aria-slot-id"

packages/hooks/use-clipboard/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @nextui-org/use-clipboard
 
+## 0.0.0-dev-v2-20230405205125
+
+### Patch Changes
+
+- Native events exposed in all form elements
+
+## 0.0.0-dev-v2-20230405200614
+
+### Patch Changes
+
+- Textarea component added
+
 ## 0.0.0-dev-v2-20230405030905
 
 ### Patch Changes

packages/hooks/use-clipboard/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/use-clipboard",
-  "version": "0.0.0-dev-v2-20230405030905",
+  "version": "0.0.0-dev-v2-20230405205125",
   "description": "Wrapper around navigator.clipboard with feedback timeout",
   "keywords": [
     "use-clipboard"

packages/hooks/use-image/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @nextui-org/use-image
 
+## 0.0.0-dev-v2-20230405205125
+
+### Patch Changes
+
+- Native events exposed in all form elements
+- Updated dependencies
+  - @nextui-org/use-safe-layout-effect@0.0.0-dev-v2-20230405205125
+
+## 0.0.0-dev-v2-20230405200614
+
+### Patch Changes
+
+- Textarea component added
+- Updated dependencies
+  - @nextui-org/use-safe-layout-effect@0.0.0-dev-v2-20230405200614
+
 ## 0.0.0-dev-v2-20230405030905
 
 ### Patch Changes

packages/hooks/use-image/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/use-image",
-  "version": "0.0.0-dev-v2-20230405030905",
+  "version": "0.0.0-dev-v2-20230405205125",
   "description": "React hook for progressing image loading",
   "keywords": [
     "use-image"

packages/hooks/use-is-mounted/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @nextui-org/use-is-mounted
 
+## 0.0.0-dev-v2-20230405205125
+
+### Patch Changes
+
+- Native events exposed in all form elements
+
+## 0.0.0-dev-v2-20230405200614
+
+### Patch Changes
+
+- Textarea component added
+
 ## 0.0.0-dev-v2-20230405030905
 
 ### Patch Changes

packages/hooks/use-is-mounted/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/use-is-mounted",
-  "version": "0.0.0-dev-v2-20230405030905",
+  "version": "0.0.0-dev-v2-20230405205125",
   "description": "This hook can be used to render client-based components or run client logic",
   "keywords": [
     "use-is-mounted"

packages/hooks/use-pagination/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @nextui-org/use-pagination
 
+## 0.0.0-dev-v2-20230405205125
+
+### Patch Changes
+
+- Native events exposed in all form elements
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230405205125
+
+## 0.0.0-dev-v2-20230405200614
+
+### Patch Changes
+
+- Textarea component added
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230405200614
+
 ## 0.0.0-dev-v2-20230405030905
 
 ### Patch Changes

packages/hooks/use-pagination/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/use-pagination",
-  "version": "0.0.0-dev-v2-20230405030905",
+  "version": "0.0.0-dev-v2-20230405205125",
   "description": "State management hook for Pagination component, it lets you manage pagination with controlled and uncontrolled state",
   "keywords": [
     "use-pagination"

packages/hooks/use-real-shape/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @nextui-org/use-real-shape
 
+## 0.0.0-dev-v2-20230405205125
+
+### Patch Changes
+
+- Native events exposed in all form elements
+- Updated dependencies
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230405205125
+
+## 0.0.0-dev-v2-20230405200614
+
+### Patch Changes
+
+- Textarea component added
+- Updated dependencies
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230405200614
+
 ## 0.0.0-dev-v2-20230405030905
 
 ### Patch Changes

packages/hooks/use-real-shape/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/use-real-shape",
-  "version": "0.0.0-dev-v2-20230405030905",
+  "version": "0.0.0-dev-v2-20230405205125",
   "description": "Hook that returns the real dimensions of an element",
   "keywords": [
     "use-real-shape"

packages/hooks/use-ref-state/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @nextui-org/use-ref-state
 
+## 0.0.0-dev-v2-20230405205125
+
+### Patch Changes
+
+- Native events exposed in all form elements
+
+## 0.0.0-dev-v2-20230405200614
+
+### Patch Changes
+
+- Textarea component added
+
 ## 0.0.0-dev-v2-20230405030905
 
 ### Patch Changes

packages/hooks/use-ref-state/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/use-ref-state",
-  "version": "0.0.0-dev-v2-20230405030905",
+  "version": "0.0.0-dev-v2-20230405205125",
   "description": "Hook for saving the state in a ref value",
   "keywords": [
     "use-ref-state"

packages/hooks/use-resize/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @nextui-org/use-resize
 
+## 0.0.0-dev-v2-20230405205125
+
+### Patch Changes
+
+- Native events exposed in all form elements
+
+## 0.0.0-dev-v2-20230405200614
+
+### Patch Changes
+
+- Textarea component added
+
 ## 0.0.0-dev-v2-20230405030905
 
 ### Patch Changes

packages/hooks/use-resize/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/use-resize",
-  "version": "0.0.0-dev-v2-20230405030905",
+  "version": "0.0.0-dev-v2-20230405205125",
   "description": "Hook that adds an event listener to the resize window event",
   "keywords": [
     "use-resize"

packages/hooks/use-safe-layout-effect/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @nextui-org/use-safe-layout-effect
 
+## 0.0.0-dev-v2-20230405205125
+
+### Patch Changes
+
+- Native events exposed in all form elements
+
+## 0.0.0-dev-v2-20230405200614
+
+### Patch Changes
+
+- Textarea component added
+
 ## 0.0.0-dev-v2-20230405030905
 
 ### Patch Changes

packages/hooks/use-safe-layout-effect/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/use-safe-layout-effect",
-  "version": "0.0.0-dev-v2-20230405030905",
+  "version": "0.0.0-dev-v2-20230405205125",
   "description": "",
   "keywords": [
     "use-safe-layout-effect"

packages/hooks/use-ssr/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @nextui-org/use-ssr
 
+## 0.0.0-dev-v2-20230405205125
+
+### Patch Changes
+
+- Native events exposed in all form elements
+
+## 0.0.0-dev-v2-20230405200614
+
+### Patch Changes
+
+- Textarea component added
+
 ## 0.0.0-dev-v2-20230405030905
 
 ### Patch Changes

packages/hooks/use-ssr/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/use-ssr",
-  "version": "0.0.0-dev-v2-20230405030905",
+  "version": "0.0.0-dev-v2-20230405205125",
   "description": "",
   "keywords": [
     "use-ssr"

packages/utilities/aria-utils/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @nextui-org/aria-utils
 
+## 0.0.0-dev-v2-20230405205125
+
+### Patch Changes
+
+- Native events exposed in all form elements
+- Updated dependencies
+  - @nextui-org/system@0.0.0-dev-v2-20230405205125
+
+## 0.0.0-dev-v2-20230405200614
+
+### Patch Changes
+
+- Textarea component added
+- Updated dependencies
+  - @nextui-org/system@0.0.0-dev-v2-20230405200614
+
 ## 0.0.0-dev-v2-20230405030905
 
 ### Patch Changes

packages/utilities/aria-utils/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/aria-utils",
-  "version": "0.0.0-dev-v2-20230405030905",
+  "version": "0.0.0-dev-v2-20230405205125",
   "description": "A package for managing @react-aria nextui utils.",
   "keywords": [
     "aria-utils"

packages/utilities/dom-utils/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @nextui-org/dom-utils
 
+## 0.0.0-dev-v2-20230405205125
+
+### Patch Changes
+
+- Native events exposed in all form elements
+
+## 0.0.0-dev-v2-20230405200614
+
+### Patch Changes
+
+- Textarea component added
+
 ## 0.0.0-dev-v2-20230405030905
 
 ### Patch Changes

packages/utilities/dom-utils/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/dom-utils",
-  "version": "0.0.0-dev-v2-20230405030905",
+  "version": "0.0.0-dev-v2-20230405205125",
   "description": "NextUI DOM Utilities",
   "keywords": [
     "dom-utils"

packages/utilities/framer-transitions/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @nextui-org/framer-transitions
 
+## 0.0.0-dev-v2-20230405205125
+
+### Patch Changes
+
+- Native events exposed in all form elements
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230405205125
+  - @nextui-org/system@0.0.0-dev-v2-20230405205125
+
+## 0.0.0-dev-v2-20230405200614
+
+### Patch Changes
+
+- Textarea component added
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230405200614
+  - @nextui-org/system@0.0.0-dev-v2-20230405200614
+
 ## 0.0.0-dev-v2-20230405030905
 
 ### Patch Changes

packages/utilities/framer-transitions/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/framer-transitions",
-  "version": "0.0.0-dev-v2-20230405030905",
+  "version": "0.0.0-dev-v2-20230405205125",
   "description": "A set of framer motion transitions for react",
   "keywords": [
     "framer-transitions"

packages/utilities/react-utils/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @nextui-org/react-utils
 
+## 0.0.0-dev-v2-20230405205125
+
+### Patch Changes
+
+- Native events exposed in all form elements
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230405205125
+  - @nextui-org/system@0.0.0-dev-v2-20230405205125
+
+## 0.0.0-dev-v2-20230405200614
+
+### Patch Changes
+
+- Textarea component added
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230405200614
+  - @nextui-org/system@0.0.0-dev-v2-20230405200614
+
 ## 0.0.0-dev-v2-20230405030905
 
 ### Patch Changes

packages/utilities/react-utils/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/react-utils",
-  "version": "0.0.0-dev-v2-20230405030905",
+  "version": "0.0.0-dev-v2-20230405205125",
   "description": "A package for sharing react components and utilities",
   "keywords": [
     "react-utils"

packages/utilities/shared-icons/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @nextui-org/shared-icons
 
+## 0.0.0-dev-v2-20230405205125
+
+### Patch Changes
+
+- Native events exposed in all form elements
+
+## 0.0.0-dev-v2-20230405200614
+
+### Patch Changes
+
+- Textarea component added
+
 ## 0.0.0-dev-v2-20230405030905
 
 ### Patch Changes

packages/utilities/shared-icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/shared-icons",
-  "version": "0.0.0-dev-v2-20230405030905",
+  "version": "0.0.0-dev-v2-20230405205125",
   "description": "Internal icons set, commonly used in the components stories",
   "keywords": [
     "icons-utils"

packages/utilities/shared-utils/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @nextui-org/shared-utils
 
+## 0.0.0-dev-v2-20230405205125
+
+### Patch Changes
+
+- Native events exposed in all form elements
+
+## 0.0.0-dev-v2-20230405200614
+
+### Patch Changes
+
+- Textarea component added
+
 ## 0.0.0-dev-v2-20230405030905
 
 ### Patch Changes

packages/utilities/shared-utils/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/shared-utils",
-  "version": "0.0.0-dev-v2-20230405030905",
+  "version": "0.0.0-dev-v2-20230405205125",
   "description": "A set of NextUI utilities",
   "keywords": [
     "system"

packages/utilities/test-utils/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @nextui-org/test-utils
 
+## 0.0.0-dev-v2-20230405205125
+
+### Patch Changes
+
+- Native events exposed in all form elements
+
+## 0.0.0-dev-v2-20230405200614
+
+### Patch Changes
+
+- Textarea component added
+
 ## 0.0.0-dev-v2-20230405030905
 
 ### Patch Changes