refactor(input): move component and story file from tailwind folder

Author: TylerAPfledderer

src/components/MeetupList.tsx

@@ -11,9 +11,8 @@ import { trackCustomEvent } from "@/lib/utils/matomo"
 
 import meetups from "@/data/community-meetups.json"
 
-import Input from "../../tailwind/ui/Input"
-
 import { Flex } from "./ui/flex"
+import Input from "./ui/input"
 import InlineLink, { BaseLink } from "./ui/Link"
 
 export interface Meetup {

src/components/Staking/WithdrawalCredentials.tsx

@@ -7,10 +7,10 @@ import Translation from "@/components/Translation"
 
 import { trackCustomEvent } from "@/lib/utils/matomo"
 
-import Input from "../../../tailwind/ui/Input"
 import { Alert, AlertContent } from "../ui/alert"
 import { Button } from "../ui/buttons/Button"
 import { Flex } from "../ui/flex"
+import Input from "../ui/input"
 import { Spinner } from "../ui/spinner"
 
 interface Validator {

tailwind/ui/__stories__/Input.stories.tsx renamed to src/components/ui/__stories__/Input.stories.tsx

@@ -1,10 +1,10 @@
 import type { Meta, StoryObj } from "@storybook/react/*"
 
-import { VStack } from "../../../src/components/ui/flex"
-import Input from "../Input"
+import { VStack } from "../flex"
+import Input from "../input"
 
 const meta = {
-  title: "Atoms / Form / ShadCN Input",
+  title: "Atoms / Form / Input",
   component: Input,
 } satisfies Meta<typeof Input>
 

src/components/ui/input.tsx

@@ -1,16 +1,33 @@
 import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
 
 import { cn } from "@/lib/utils/cn"
 
-const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
-  ({ className, type, ...props }, ref) => {
+const inputVariants = cva(
+  "rounded border border-body placeholder:text-disabled hover:not-disabled:border-primary-hover focus-visible:outline focus-visible:outline-primary-hover focus-visible:outline-[3px] focus-visible:-outline-offset-2 disabled:cursor-not-allowed disabled:border-disabled bg-background",
+  {
+    variants: {
+      size: {
+        md: "p-2",
+        sm: "p-1 text-sm",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  }
+)
+
+export interface InputProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">,
+    VariantProps<typeof inputVariants> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, size, ...props }, ref) => {
     return (
       <input
         type={type}
-        className={cn(
-          "border-input file:text-foreground placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-          className
-        )}
+        className={cn(inputVariants({ size, className }))}
         ref={ref}
         {...props}
       />
@@ -19,4 +36,4 @@ const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
 )
 Input.displayName = "Input"
 
-export { Input }
+export default Input