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

package.json

@@ -1,13 +1,20 @@
 {
   "name": "@jason/ui-kit",
-  "version": "0.1.0",
+  "version": "0.2.0",
-  "description": "Shared design foundation — branded tokens, Tailwind preset, shadcn-style components, motion, app shell + marketing blocks. Guarded by Impeccable.",
+  "description": "Shared design foundation \u2014 branded tokens, Tailwind preset, shadcn-style components, motion, app shell + marketing blocks. Guarded by Impeccable.",
   "type": "module",
   "license": "MIT",
   "author": "Jason <jason@messagepoint.tv>",
-  "repository": { "type": "git", "url": "https://git.alwisp.com/jason/ui-kit.git" },
+  "repository": {
-  "publishConfig": { "registry": "https://git.alwisp.com/api/packages/jason/npm/" },
+    "type": "git",
-  "sideEffects": ["**/*.css"],
+    "url": "https://git.alwisp.com/jason/ui-kit.git"
+  },
+  "publishConfig": {
+    "registry": "https://git.alwisp.com/api/packages/jason/npm/"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
   "files": [
     "dist",
     "tailwind-preset.cjs",
@@ -18,7 +25,10 @@
     "README.md"
   ],
   "exports": {
-    ".": { "types": "./dist/index.d.ts", "import": "./dist/index.js" },
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
     "./preset": "./tailwind-preset.cjs",
     "./styles.css": "./src/styles/globals.css"
   },
@@ -44,7 +54,11 @@
     "sonner": "^1.7.1",
     "tailwind-merge": "^2.6.0"
   },
-  "peerDependencies": { "react": ">=18", "react-dom": ">=18", "tailwindcss": ">=3.4" },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18",
+    "tailwindcss": ">=3.4"
+  },
   "devDependencies": {
     "@types/react": "^18.3.18",
     "@types/react-dom": "^18.3.5",

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>>(
+const inputVariants = cva(
-  ({ className, type, ...props }, ref) => (
+  "flex w-full rounded border border-border bg-bg/40 text-text placeholder:text-muted " +
-    <input
+    "transition-shadow duration-base ease-out focus-visible:outline-none focus-visible:ring-2 " +
-      type={type}
+    "focus-visible:ring-ring/60 focus-visible:border-brand/60 disabled:cursor-not-allowed disabled:opacity-50",
-      ref={ref}
+  {
-      className={cn(
+    variants: { size: { sm: "h-8 px-2.5 py-1 text-sm", md: "h-10 px-3 py-2 text-sm" } },
-        "flex h-10 w-full rounded border border-border bg-bg/40 px-3 py-2 text-sm text-text",
+    defaultVariants: { size: "md" },
-        "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
+export interface InputProps
-      )}
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">,
-      {...props}
+    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";

src/index.ts

@@ -6,7 +6,10 @@ export { setTheme, toggleTheme } from "./lib/theme";
 // Primitives
 export { Button, buttonVariants, type ButtonProps } from "./components/button";
 export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "./components/card";
-export { Input } from "./components/input";
+export { Input, inputVariants, type InputProps } from "./components/input";
+export { Select, selectVariants, type SelectProps } from "./components/select";
+export { Textarea, type TextareaProps } from "./components/textarea";
+export { Label } from "./components/label";
 export { Badge, badgeVariants, type BadgeProps } from "./components/badge";
 export {
   Dialog, DialogTrigger, DialogClose, DialogContent,