feat: add Label, Select, Textarea; add size variant to Input (v0.2.0)

src/components/input.tsx

@@ -1,20 +1,25 @@
 import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../lib/cn";
 
-export const Input = React.forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>(
-  ({ className, type, ...props }, ref) => (
-    <input
-      type={type}
-      ref={ref}
-      className={cn(
-        "flex h-10 w-full rounded border border-border bg-bg/40 px-3 py-2 text-sm text-text",
-        "placeholder:text-muted transition-shadow duration-base ease-out",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/60 focus-visible:border-brand/60",
-        "disabled:cursor-not-allowed disabled:opacity-50",
-        className
-      )}
-      {...props}
-    />
+const inputVariants = cva(
+  "flex w-full rounded border border-border bg-bg/40 text-text placeholder:text-muted " +
+    "transition-shadow duration-base ease-out focus-visible:outline-none focus-visible:ring-2 " +
+    "focus-visible:ring-ring/60 focus-visible:border-brand/60 disabled:cursor-not-allowed disabled:opacity-50",
+  {
+    variants: { size: { sm: "h-8 px-2.5 py-1 text-sm", md: "h-10 px-3 py-2 text-sm" } },
+    defaultVariants: { size: "md" },
+  }
+);
+
+export interface InputProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">,
+    VariantProps<typeof inputVariants> {}
+
+export const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, size, type, ...props }, ref) => (
+    <input type={type} ref={ref} className={cn(inputVariants({ size }), className)} {...props} />
   )
 );
 Input.displayName = "Input";
+export { inputVariants };