refactor(components): rewrite form components

3 files changed, 42 insertions, 0 deletions

diff --git a/src/components/atoms/forms/form/form.test.tsx b/src/components/atoms/forms/form/form.test.tsx
new file mode 100644
index 0000000..08165f5
--- /dev/null
+++ b/src/components/atoms/forms/form/form.test.tsx
@@ -0,0 +1,13 @@
+import { render, screen } from '../../../../../tests/utils';
+import { Form } from './form';
+
+describe('Form', () => {
+  it('renders a form', () => {
+    render(
+      <Form aria-label="A form name" onSubmit={() => null}>
+        Fields
+      </Form>
+    );
+    expect(screen.getByRole('form')).toBeInTheDocument();
+  });
+});
diff --git a/src/components/atoms/forms/form/form.tsx b/src/components/atoms/forms/form/form.tsx
new file mode 100644
index 0000000..86481d2
--- /dev/null
+++ b/src/components/atoms/forms/form/form.tsx
@@ -0,0 +1,28 @@
+import {
+  type FormHTMLAttributes,
+  forwardRef,
+  type ForwardRefRenderFunction,
+} from 'react';
+
+export type FormRole = 'form' | 'search' | 'none' | 'presentation';
+
+export type FormProps = FormHTMLAttributes<HTMLFormElement> & {
+  /**
+   * An accessible role.
+   */
+  role?: FormRole;
+};
+
+const FormWithRef: ForwardRefRenderFunction<HTMLFormElement, FormProps> = (
+  { children, ...props },
+  ref
+) => (
+  <form {...props} ref={ref}>
+    {children}
+  </form>
+);
+
+/**
+ * Form component.
+ */
+export const Form = forwardRef(FormWithRef);
diff --git a/src/components/atoms/forms/form/index.ts b/src/components/atoms/forms/form/index.ts
new file mode 100644
index 0000000..698d687
--- /dev/null
+++ b/src/components/atoms/forms/form/index.ts
@@ -0,0 +1 @@
+export * from './form';