feat: add InputFilled component

.eslintrc.json

@@ -16,6 +16,7 @@
         "ButtonPrimary": "button",
         "ButtonSecondary": "button",
         "ButtonTertiary": "button",
+        "InputFilled": "input",
         "InputOutlined": "input"
       }
     }

src/components/InputFilled.stories.tsx

@@ -0,0 +1,64 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { userEvent } from "@storybook/test";
+
+import { InputFilled } from "./InputFilled";
+
+const meta = {
+  component: InputFilled,
+} satisfies Meta<typeof InputFilled>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Basic = {
+  args: {
+    placeholder: "Placeholder",
+    defaultValue: "",
+    "aria-invalid": false,
+    readOnly: false,
+    disabled: false,
+  },
+} satisfies Story;
+
+export const Interactivity = {
+  args: {
+    placeholder: "Placeholder",
+  },
+  render: (args) => (
+    <div className="flex flex-col items-start gap-4">
+      <InputFilled {...args} defaultValue="Focused" />
+      <InputFilled {...args} defaultValue="Invalid" aria-invalid />
+      <InputFilled {...args} defaultValue="Read-only" readOnly />
+      <InputFilled {...args} placeholder="Placeholder" />
+      <InputFilled {...args} defaultValue="Disabled" disabled />
+    </div>
+  ),
+  play: async () => {
+    await userEvent.tab();
+  },
+} satisfies Story;
+
+export const Sizes = {
+  args: {
+    placeholder: "Placeholder",
+  },
+  render: () => (
+    <div className="flex flex-col items-start gap-4">
+      <InputFilled size="sm" placeholder="Small" />
+      <InputFilled size="md" placeholder="Medium" />
+      <InputFilled size="lg" placeholder="Large" />
+    </div>
+  ),
+} satisfies Story;
+
+export const Shapes = {
+  args: {
+    placeholder: "Placeholder",
+  },
+  render: () => (
+    <div className="flex flex-col items-start gap-4">
+      <InputFilled shape="rectangle" placeholder="Rectangle" />
+      <InputFilled shape="pill" placeholder="Pill" />
+    </div>
+  ),
+} satisfies Story;

src/components/InputFilled.tsx

@@ -0,0 +1,31 @@
+import { clsx } from "clsx/lite";
+import { forwardRef } from "react";
+
+import { controlClassName } from "../utils/controlClassName";
+
+export interface InputFilledProps
+  extends Omit<React.ComponentPropsWithRef<"input">, "size"> {
+  size?: "sm" | "md" | "lg";
+  shape?: "rectangle" | "pill";
+  placeholder: string;
+}
+
+export const InputFilled = forwardRef(function InputFilled(
+  { size = "md", shape = "rectangle", className, ...props }: InputFilledProps,
+  ref: React.ForwardedRef<HTMLInputElement>,
+) {
+  return (
+    <input
+      ref={ref}
+      className={clsx(
+        className,
+        controlClassName({ size, shape }),
+        "bg-ui-neutral-200 text-ui-neutral-950 placeholder:text-ui-neutral-600 aria-invalid:ring-2 aria-invalid:ring-inset aria-invalid:ring-ui-danger-600",
+        size === "sm" && "px-2.5",
+        size === "md" && "px-3",
+        size === "lg" && "px-4",
+      )}
+      {...props}
+    />
+  );
+});

src/mod.ts

@@ -12,6 +12,7 @@ export {
   ButtonTertiary,
   type ButtonTertiaryProps,
 } from "./components/ButtonTertiary";
+export { InputFilled, type InputFilledProps } from "./components/InputFilled";
 export {
   InputOutlined,
   type InputOutlinedProps,