feat: add input component for ShadCN

Author: TylerAPfledderer

tailwind.config.ts

@@ -1,4 +1,5 @@
 import type { Config } from "tailwindcss"
+import plugin from "tailwindcss/plugin"
 
 const config = {
   darkMode: ["class"],
@@ -106,7 +107,24 @@ const config = {
       },
     },
   },
-  plugins: [require("tailwindcss-animate")],
+  plugins: [
+    require("tailwindcss-animate"),
+    plugin(function ({ matchVariant }) {
+      // The :not() pseudo-class. `i.e. not-[:checked]`
+      matchVariant(
+        "not",
+        (value) => {
+          return `&:not(${value})`
+        },
+        {
+          values: {
+            // not-disabled => ":not(:disabled)"
+            disabled: ":disabled",
+          },
+        }
+      )
+    }),
+  ],
 } satisfies Config
 
 export default config

tailwind/ui/Input.tsx

@@ -0,0 +1,39 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils/cn"
+
+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(inputVariants({ size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
+
+export { Input }

tailwind/ui/__stories__/Input.stories.tsx

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from "@storybook/react/*"
+
+import { VStack } from "../../../src/components/ui/flex"
+import { Input } from "../Input"
+
+const meta = {
+  title: "Atoms / Form / ShadCN Input",
+  component: Input,
+} satisfies Meta<typeof Input>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Sizes: Story = {
+  args: {
+    placeholder: "Search",
+  },
+  render: (args) => (
+    <VStack className="w-[154px]">
+      <Input {...args} />
+      <Input {...args} size="sm" />
+    </VStack>
+  ),
+}
+
+export const ElementVariations: Story = {
+  args: {
+    placeholder: "input text",
+  },
+  render: (args) => (
+    <VStack className="w-[258px] gap-4">
+      <Input {...args} autoFocus />
+      <Input {...args} disabled />
+    </VStack>
+  ),
+}