feat: add form component with input support

packages/components/form/README.md

@@ -0,0 +1,24 @@
+# @nextui-org/form
+
+A Quick description of the component
+
+> This is an internal utility, not intended for public usage.
+
+## Installation
+
+```sh
+yarn add @nextui-org/form
+# or
+npm i @nextui-org/form
+```
+
+## Contribution
+
+Yes please! See the
+[contributing guidelines](https://github.com/nextui-org/nextui/blob/master/CONTRIBUTING.md)
+for details.
+
+## License
+
+This project is licensed under the terms of the
+[MIT license](https://github.com/nextui-org/nextui/blob/master/LICENSE).

packages/components/form/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@nextui-org/form",
+  "version": "2.0.0",
+  "description": "A form is a group of inputs that allows users submit data to a server and supports field validation errors.",
+  "keywords": [
+    "form"
+  ],
+  "author": "Junior Garcia <jrgarciadev@gmail.com>",
+  "homepage": "https://nextui.org",
+  "license": "MIT",
+  "main": "src/index.ts",
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/nextui-org/nextui.git",
+    "directory": "packages/components/form"
+  },
+  "bugs": {
+    "url": "https://github.com/nextui-org/nextui/issues"
+  },
+  "scripts": {
+    "build": "tsup src --dts",
+    "build:fast": "tsup src",
+    "dev": "pnpm build:fast --watch",
+    "clean": "rimraf dist .turbo",
+    "typecheck": "tsc --noEmit",
+    "prepack": "clean-package",
+    "postpack": "clean-package restore"
+  },
+  "peerDependencies": {
+    "@nextui-org/system": ">=2.0.0",
+    "@nextui-org/theme": ">=2.0.0",
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "dependencies": {
+    "@nextui-org/react-utils": "workspace:*",
+    "@nextui-org/shared-utils": "workspace:*",
+    "@nextui-org/input": "workspace:*",
+    "react-aria-components": "^1.2.1"
+  },
+  "devDependencies": {
+    "@nextui-org/system": "workspace:*",
+    "@nextui-org/theme": "workspace:*",
+    "clean-package": "2.2.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "clean-package": "../../../clean-package.config.json"
+}

packages/components/form/src/form.tsx

@@ -0,0 +1,3 @@
+export {Form} from "react-aria-components";
+export {FormContext} from "react-aria-components";
+export {useSlottedContext} from "react-aria-components";

packages/components/form/src/index.ts

@@ -0,0 +1,11 @@
+// export types
+export type {FormProps} from "react-aria-components";
+
+// export hooks
+export {useSlottedContext} from "react-aria-components";
+
+// export context
+export {FormContext} from "react-aria-components";
+
+// export component
+export {Form} from "react-aria-components";

packages/components/form/stories/form.stories.tsx

@@ -0,0 +1,65 @@
+import React from "react";
+import {Meta} from "@storybook/react";
+import {Input} from "@nextui-org/input";
+import {button} from "@nextui-org/theme";
+
+import {Form, FormProps} from "../src";
+
+export default {
+  title: "Components/Form",
+  component: Form,
+  argTypes: {
+    isDisabled: {
+      control: {
+        type: "boolean",
+      },
+    },
+    validationBehavior: {
+      control: {
+        type: "select",
+      },
+      options: ["aria", "native"],
+    },
+  },
+} as Meta<typeof Form>;
+
+const defaultProps = {};
+
+const Template = (args: FormProps) => (
+  <Form
+    {...args}
+    className="flex flex-col gap-4"
+    onSubmit={(e) => {
+      e.preventDefault();
+      alert(`Submitted value: ${e.target["input"].value}`);
+    }}
+  >
+    <Input isRequired label="Name (required)" name="input" />
+    <button className={button({className: "max-w-fit"})} type="submit">
+      Submit
+    </button>
+  </Form>
+);
+
+export const Default = {
+  render: Template,
+  args: {
+    ...defaultProps,
+  },
+};
+
+export const NativeValidation = {
+  render: Template,
+  args: {
+    ...defaultProps,
+    validationBehavior: "native",
+  },
+};
+
+export const AriaValidation = {
+  render: Template,
+  args: {
+    ...defaultProps,
+    validationBehavior: "aria",
+  },
+};

packages/components/form/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "tailwind-variants": ["../../../node_modules/tailwind-variants"]
+    },
+  },
+  "include": ["src", "index.ts"]
+}

packages/components/form/tsup.config.ts

@@ -0,0 +1,8 @@
+import {defineConfig} from "tsup";
+
+export default defineConfig({
+  clean: true,
+  target: "es2019",
+  format: ["cjs", "esm"],
+  banner: {js: '"use client";'},
+});

packages/components/input/package.json

@@ -34,12 +34,13 @@
     "postpack": "clean-package restore"
   },
   "peerDependencies": {
-    "react": ">=18",
-    "react-dom": ">=18",
+    "@nextui-org/system": ">=2.0.0",
     "@nextui-org/theme": ">=2.1.0",
-    "@nextui-org/system": ">=2.0.0"
+    "react": ">=18",
+    "react-dom": ">=18"
   },
   "dependencies": {
+    "@nextui-org/form": "workspace:*",
     "@nextui-org/react-utils": "workspace:*",
     "@nextui-org/shared-icons": "workspace:*",
     "@nextui-org/shared-utils": "workspace:*",
@@ -54,8 +55,8 @@
     "react-textarea-autosize": "^8.5.3"
   },
   "devDependencies": {
-    "@nextui-org/theme": "workspace:*",
     "@nextui-org/system": "workspace:*",
+    "@nextui-org/theme": "workspace:*",
     "clean-package": "2.2.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",

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

@@ -18,6 +18,7 @@ import {useControlledState} from "@react-stately/utils";
 import {useMemo, Ref, useCallback, useState} from "react";
 import {chain, mergeProps} from "@react-aria/utils";
 import {useTextField} from "@react-aria/textfield";
+import {FormContext, useSlottedContext} from "@nextui-org/form";
 
 export interface Props<T extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement>
   extends Omit<HTMLNextUIProps<"input">, keyof InputVariantProps> {
@@ -92,6 +93,7 @@ export function useInput<T extends HTMLInputElement | HTMLTextAreaElement = HTML
   originalProps: UseInputProps<T>,
 ) {
   const globalContext = useProviderContext();
+  const {validationBehavior: formValidationBehavior} = useSlottedContext(FormContext) || {};
 
   const [props, variantProps] = mapPropsVariants(originalProps, input.variantKeys);
 
@@ -111,7 +113,7 @@ export function useInput<T extends HTMLInputElement | HTMLTextAreaElement = HTML
     onClear,
     onChange,
     validationState,
-    validationBehavior = globalContext?.validationBehavior ?? "aria",
+    validationBehavior = formValidationBehavior ?? globalContext?.validationBehavior ?? "aria",
     innerWrapperRef: innerWrapperRefProp,
     onValueChange = () => {},
     ...otherProps