Merge pull request #13524 from TylerAPfledderer/feat/shadcn-input

feat: add input component for ShadCN

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 default 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>
+  ),
+}