sparkle very basic input

sparkle/src/_index.ts

@@ -46,6 +46,9 @@ export { Avatar };
 import Spinner from "./components/Spinner";
 export { Spinner };
 
+import Input from "./components/Input";
+export { Input };
+
 import {
   LogoHorizontalColor as LogoHorizontalColorLogo,
   LogoHorizontalDark as LogoHorizontalDarkLogo,

sparkle/src/components/Input.tsx

@@ -0,0 +1,38 @@
+import React, { HTMLInputTypeAttribute, InputHTMLAttributes } from "react";
+
+export interface InputProps {
+  disabled?: boolean;
+  type: HTMLInputTypeAttribute;
+  name?: string;
+  id?: string;
+  className?: string;
+  value?: InputHTMLAttributes<HTMLInputElement>["value"];
+  placeholder?: string;
+  onChange?: InputHTMLAttributes<HTMLInputElement>["onChange"];
+}
+
+const Input: React.FC<InputProps> = ({
+  disabled,
+  type,
+  name,
+  id,
+  className,
+  value,
+  placeholder,
+  onChange,
+}) => {
+  return (
+    <input
+      disabled={disabled}
+      type={type}
+      name={name}
+      id={id}
+      className={className}
+      value={value}
+      placeholder={placeholder}
+      onChange={onChange}
+    />
+  );
+};
+
+export default Input;

sparkle/src/stories/Input.stories.tsx

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+
+import { Input } from "../index_with_tw_base";
+
+const meta = {
+  title: "Atoms/Input",
+  component: Input,
+} satisfies Meta<typeof Input>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const InputExample = () => (
+  <div>
+    <Input
+      type="text"
+      placeholder="Enter your name"
+      className="border border-gray-300 rounded-md p-2"
+    />
+  </div>
+);
+
+export const ItemDefault: Story = {
+  args: {
+    type: "text",
+    placeholder: "Enter your name",
+  },
+};