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 };

src/components/label.tsx

@@ -0,0 +1,9 @@
+import * as React from "react";
+import { cn } from "../lib/cn";
+
+export const Label = React.forwardRef<HTMLLabelElement, React.LabelHTMLAttributes<HTMLLabelElement>>(
+  ({ className, ...props }, ref) => (
+    <label ref={ref} className={cn("mb-1 block text-xs font-medium text-muted", className)} {...props} />
+  )
+);
+Label.displayName = "Label";

src/components/select.tsx

@@ -0,0 +1,27 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../lib/cn";
+
+const selectVariants = cva(
+  "w-full rounded border border-border bg-bg/40 text-text 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 py-1 text-sm", md: "h-10 px-3 py-2 text-sm" } },
+    defaultVariants: { size: "md" },
+  }
+);
+
+export interface SelectProps
+  extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "size">,
+    VariantProps<typeof selectVariants> {}
+
+export const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
+  ({ className, size, children, ...props }, ref) => (
+    <select ref={ref} className={cn(selectVariants({ size }), className)} {...props}>
+      {children}
+    </select>
+  )
+);
+Select.displayName = "Select";
+export { selectVariants };

src/components/textarea.tsx

@@ -0,0 +1,21 @@
+import * as React from "react";
+import { cn } from "../lib/cn";
+
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => (
+    <textarea
+      ref={ref}
+      className={cn(
+        "flex min-h-[80px] 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}
+    />
+  )
+);
+Textarea.displayName = "Textarea";