From 48df411e40216e8a93310f83a46c4c5e07c4cbbe Mon Sep 17 00:00:00 2001
From: ink-victor <171172553+ink-victor@users.noreply.github.com>
Date: Fri, 22 Nov 2024 11:00:21 -0500
Subject: [PATCH] feat: basic input

---
 src/components/Input/Input.stories.tsx | 19 +++++++++++++++++++
 src/components/Input/Input.tsx         | 24 ++++++++++++++++++++++++
 src/components/Input/index.ts          |  1 +
 src/components/index.ts                |  1 +
 4 files changed, 45 insertions(+)
 create mode 100644 src/components/Input/Input.stories.tsx
 create mode 100644 src/components/Input/Input.tsx
 create mode 100644 src/components/Input/index.ts

diff --git a/src/components/Input/Input.stories.tsx b/src/components/Input/Input.stories.tsx
new file mode 100644
index 0000000..df78ac2
--- /dev/null
+++ b/src/components/Input/Input.stories.tsx
@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Input, InputProps } from "./Input";
+
+const meta: Meta<InputProps> = {
+  title: "Components/Input",
+  component: Input,
+  tags: ["autodocs"],
+  args: {
+    placeholder: "Placeholder",
+    type: "text",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Simple: Story = {
+  args: {},
+};
diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx
new file mode 100644
index 0000000..b911c00
--- /dev/null
+++ b/src/components/Input/Input.tsx
@@ -0,0 +1,24 @@
+import React, { forwardRef } from "react";
+import { classNames, resetClasses } from "../../util/classes";
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {
+  className?: string;
+}
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <input
+        ref={ref}
+        className={classNames(
+          resetClasses,
+          "ink-w-full ink-rounded-8 ink-bg-background-container ink-p-2 ink-text-body-2",
+          "focus:ink-outline focus:ink-outline-1 ink-outline-text-on-secondary",
+          className
+        )}
+        {...props}
+      />
+    );
+  }
+);
diff --git a/src/components/Input/index.ts b/src/components/Input/index.ts
new file mode 100644
index 0000000..be66d76
--- /dev/null
+++ b/src/components/Input/index.ts
@@ -0,0 +1 @@
+export * from "./Input";
diff --git a/src/components/index.ts b/src/components/index.ts
index 38f9f7a..c5e31db 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,4 +1,5 @@
 export * from "./Button";
+export * from "./Input";
 export * from "./Modal";
 export * from "./SegmentedControl";
 export * from "./Typography";