diff --git a/.eslintrc.json b/.eslintrc.json index 62bfad6..70748e7 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -16,7 +16,7 @@ "ButtonPrimary": "button", "ButtonSecondary": "button", "ButtonTertiary": "button", - "Input": "input" + "InputOutlined": "input" } } }, diff --git a/src/components/Input.stories.tsx b/src/components/InputOutlined.stories.tsx similarity index 55% rename from src/components/Input.stories.tsx rename to src/components/InputOutlined.stories.tsx index f050b38..1138cd9 100644 --- a/src/components/Input.stories.tsx +++ b/src/components/InputOutlined.stories.tsx @@ -1,11 +1,11 @@ import type { Meta, StoryObj } from "@storybook/react"; import { userEvent } from "@storybook/test"; -import { Input } from "./Input"; +import { InputOutlined } from "./InputOutlined"; const meta = { - component: Input, -} satisfies Meta<typeof Input>; + component: InputOutlined, +} satisfies Meta<typeof InputOutlined>; export default meta; type Story = StoryObj<typeof meta>; @@ -23,11 +23,11 @@ export const Basic = { export const Interactivity = { render: () => ( <div className="flex flex-col items-start gap-4"> - <Input defaultValue="Focused" /> - <Input defaultValue="Invalid" aria-invalid /> - <Input value="Read-only" readOnly /> - <Input placeholder="Placeholder" /> - <Input value="Disabled" disabled /> + <InputOutlined defaultValue="Focused" /> + <InputOutlined defaultValue="Invalid" aria-invalid /> + <InputOutlined value="Read-only" readOnly /> + <InputOutlined placeholder="Placeholder" /> + <InputOutlined value="Disabled" disabled /> </div> ), play: async () => { @@ -38,9 +38,9 @@ export const Interactivity = { export const Sizes = { render: () => ( <div className="flex flex-col items-start gap-4"> - <Input size="sm" placeholder="Small" /> - <Input size="md" placeholder="Medium" /> - <Input size="lg" placeholder="Large" /> + <InputOutlined size="sm" placeholder="Small" /> + <InputOutlined size="md" placeholder="Medium" /> + <InputOutlined size="lg" placeholder="Large" /> </div> ), } satisfies Story; @@ -48,8 +48,8 @@ export const Sizes = { export const Shapes = { render: () => ( <div className="flex flex-col items-start gap-4"> - <Input shape="rectangle" placeholder="Rectangle" /> - <Input shape="pill" placeholder="Pill" /> + <InputOutlined shape="rectangle" placeholder="Rectangle" /> + <InputOutlined shape="pill" placeholder="Pill" /> </div> ), } satisfies Story; diff --git a/src/components/Input.tsx b/src/components/InputOutlined.tsx similarity index 87% rename from src/components/Input.tsx rename to src/components/InputOutlined.tsx index 122a79b..c6d71f0 100644 --- a/src/components/Input.tsx +++ b/src/components/InputOutlined.tsx @@ -3,14 +3,14 @@ import { forwardRef } from "react"; import { controlClassName } from "../utils/controlClassName"; -export interface InputProps +export interface InputOutlinedProps extends Omit<React.ComponentPropsWithRef<"input">, "size"> { size?: "sm" | "md" | "lg"; shape?: "rectangle" | "pill"; } -export const Input = forwardRef(function Input( - { size = "md", shape = "rectangle", className, ...props }: InputProps, +export const InputOutlined = forwardRef(function InputOutlined( + { size = "md", shape = "rectangle", className, ...props }: InputOutlinedProps, ref: React.ForwardedRef<HTMLInputElement>, ) { return ( diff --git a/src/docs/sample.mdx b/src/docs/sample.mdx index 352476f..db57f27 100644 --- a/src/docs/sample.mdx +++ b/src/docs/sample.mdx @@ -5,7 +5,7 @@ import { ButtonPlain } from "../components/ButtonPlain"; import { ButtonPrimary } from "../components/ButtonPrimary"; import { ButtonSecondary } from "../components/ButtonSecondary"; import { ButtonTertiary } from "../components/ButtonTertiary"; -import { Input } from "../components/Input"; +import { InputOutlined } from "../components/InputOutlined"; <Unstyled> <div className="flex flex-col gap-4 bg-ui-neutral-50 p-4 text-base text-ui-neutral-800"> @@ -15,7 +15,7 @@ import { Input } from "../components/Input"; page. Only text content updates are conveyed to screen readers, preserving focus. <div className="flex flex-wrap gap-2"> - <Input size="sm" placeholder="Placeholder" /> + <InputOutlined size="sm" placeholder="Placeholder" /> <ButtonPrimary size="sm">Ok</ButtonPrimary> </div> </div> @@ -39,15 +39,15 @@ import { Input } from "../components/Input"; </div> <div>This is just a block of text.</div> <div className="flex gap-2"> - <Input size="sm" placeholder="Placeholder" /> + <InputOutlined size="sm" placeholder="Placeholder" /> <ButtonTertiary size="sm">Submit</ButtonTertiary> </div> <div className="flex gap-2"> - <Input size="md" placeholder="Placeholder" /> + <InputOutlined size="md" placeholder="Placeholder" /> <ButtonTertiary size="md">Submit</ButtonTertiary> </div> <div className="flex gap-2"> - <Input size="lg" placeholder="Placeholder" /> + <InputOutlined size="lg" placeholder="Placeholder" /> <ButtonTertiary size="lg">Submit</ButtonTertiary> </div> </div> diff --git a/src/mod.ts b/src/mod.ts index 9242723..d63cb6c 100644 --- a/src/mod.ts +++ b/src/mod.ts @@ -12,4 +12,7 @@ export { ButtonTertiary, type ButtonTertiaryProps, } from "./components/ButtonTertiary"; -export { Input, type InputProps } from "./components/Input"; +export { + InputOutlined, + type InputOutlinedProps, +} from "./components/InputOutlined";