feat: add input

package.json

@@ -25,6 +25,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
+    "clsx": "^2.1.1",
     "react": "^18.3.1"
   },
   "peerDependencies": {

src/input/index.scss

@@ -0,0 +1,82 @@
+@import '../theme/variables';
+
+.fui-input {
+  position: relative;
+}
+
+.fui-input__inner {
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+  border: 1px solid $colorNeutralStroke1;
+  background-color: $colorNeutralBackground1;
+  border-bottom-color: $colorNeutralStrokeAccessible;
+  gap: $spacingHorizontalXXS;
+  border-radius: $borderRadiusMedium;
+}
+
+.fui-input__line {
+  box-sizing: border-box;
+  position: absolute;
+  left: -1px;
+  bottom: -1px;
+  right: -1px;
+  height: $borderRadiusMedium;
+  border-bottom-left-radius: $borderRadiusMedium;
+  border-bottom-right-radius: $borderRadiusMedium;
+  border-bottom: 2px solid $colorCompoundBrandStroke;
+  opacity: 0;
+}
+
+.fui-input:focus-within .fui-input__line {
+  opacity: 1;
+}
+
+.fui-input__input {
+  box-sizing: border-box;
+  min-height: 32px;
+  min-width: 0px;
+  padding: 0 $spacingHorizontalM;
+  color: $colorNeutralForeground1;
+  font-family: $fontFamilyBase;
+  font-size: $fontSizeBase300;
+  font-weight: $fontWeightRegular;
+  line-height: $lineHeightBase300;
+  background-color: transparent;
+  outline: none;
+  border: none;
+  flex: auto;
+}
+
+.fui-input--underline .fui-input__inner {
+  background-color: transparent;
+  border-top-style: none;
+  border-left-style: none;
+  border-right-style: none;
+}
+
+.fui-input--small .fui-input__input {
+  min-height: 24px;
+  font-size: $fontSizeBase200;
+  line-height: $lineHeightBase200;
+  padding-right: $spacingHorizontalS;
+  padding-left: $spacingHorizontalS;
+}
+
+.fui-input--large .fui-input__input {
+  min-height: 40px;
+  font-size: $fontSizeBase400;
+  line-height: $lineHeightBase400;
+  padding-right: calc($spacingHorizontalM + $spacingHorizontalSNudge);
+  padding-left: calc($spacingHorizontalM + $spacingHorizontalSNudge);
+}
+
+.fui-input--disabled {
+  border-color: $colorNeutralStrokeDisabled;
+  pointer-events: none;
+
+  .fui-input__input {
+    color: $colorNeutralForegroundDisabled;
+    background-color: $colorTransparentBackground;
+  }
+}

src/input/index.tsx

@@ -0,0 +1,50 @@
+import clsx from "clsx";
+import { ReactNode, useRef } from "react";
+import './index.scss';
+
+export interface InputProps {
+  className?: string;
+  contentBefore?: ReactNode;
+  contentAfter?: ReactNode;
+  placeholder?: string;
+  disabled?: boolean;
+  appearance?: "outline" | "underline";
+  size?: "small" | "medium" | "large";
+  value?: string;
+}
+
+export default function Input({
+  className,
+  contentBefore,
+  contentAfter,
+  placeholder,
+  appearance = "outline",
+  disabled = false,
+  size = "medium",
+  value
+}: InputProps) {
+  const inputRef = useRef<HTMLInputElement>(null);
+  return (
+    <div
+      className={clsx(
+        "fui-input",
+        `fui-input--${appearance}`,
+        `fui-input--${size}`,
+        disabled && "fui-input--disabled",
+        className
+      )}
+    >
+      <div className="fui-input__inner">
+        {contentBefore}
+        <input
+          ref={inputRef}
+          className="fui-input__input"
+          placeholder={placeholder}
+          value={value}
+        />
+        {contentAfter}
+      </div>
+      <div className="fui-input__line" />
+    </div>
+  );
+}

src/stories/input.stories.module.css

@@ -0,0 +1,11 @@
+.root {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  max-width: 400px;
+
+  label {
+    display: block;
+    margin-bottom: 2px;
+  }
+}

src/stories/input.stories.tsx

@@ -0,0 +1,69 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Input, { InputProps } from "../input";
+import styles from "./input.stories.module.css";
+
+const meta: Meta<InputProps> = {
+  title: "Components/Input",
+  component: Input,
+  tags: ["autodocs"],
+  render: (props) => <Input {...props} />,
+};
+
+type Story = StoryObj<InputProps>;
+
+export const Default: Story = {
+  render: (props) => (
+    <div className={styles.root}>
+      <div>
+        <label>Sample input</label>
+        <Input {...props} />
+      </div>
+    </div>
+  ),
+};
+
+export const Disabled: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story: "An input can be disabled.",
+      },
+    },
+  },
+  render: () => (
+    <div className={styles.root}>
+      <div>
+        <label>Disabled input</label>
+        <Input disabled value="disabled value" />
+      </div>
+    </div>
+  ),
+};
+
+export const Size: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story: "An input can have different sizes.",
+      },
+    },
+  },
+  render: () => (
+    <div className={styles.root}>
+      <div>
+        <label>Small input</label>
+        <Input size="small" />
+      </div>
+      <div>
+        <label>Medium input</label>
+        <Input size="medium" />
+      </div>
+      <div>
+        <label>Large input</label>
+        <Input size="large" />
+      </div>
+    </div>
+  ),
+};
+
+export default meta;