Merge pull request #30 from inkonchain/feat/basic-input

feat: basic input

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: {},
+};

src/components/Input/Input.tsx

@@ -0,0 +1,23 @@
+import React, { forwardRef } from "react";
+import { classNames } 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(
+          "ink:w-full ink:font-default ink:rounded-8 ink:bg-background-container ink:p-2 ink:text-body-2 ink:text-text-default",
+          "focus:ink:outline focus:ink:outline-1 ink:outline-text-on-secondary",
+          className
+        )}
+        {...props}
+      />
+    );
+  }
+);

src/components/Input/index.ts

@@ -0,0 +1 @@
+export * from "./Input";

src/components/index.ts

@@ -1,4 +1,5 @@
 export * from "./Button";
+export * from "./Input";
 export * from "./Modal";
 export * from "./SegmentedControl";
 export * from "./Typography";