cooterlabs 1.0.0 → 1.0.2

package/README.md

@@ -0,0 +1,80 @@
+# CooterLabs UI Library CLI
+
+A blazingly fast, standalone CLI tool for scaffolding beautiful, accessible, and highly customizable UI components built strictly for React, Vite, and Next.js applications directly into your project via the terminal!
+
+It brings components directly to you. We do not provide a generic NPM library package to import elements from. Instead, the actual React TS/JS code is scaffolded straight into your `src/components/ui` folder, meaning you completely own the implementation, styles, and markup.
+
+## Features
+
+- **✅ Project Detection**: Auto-detects your ecosystem (Next.js App router/Pages router, Vite, Create React App).
+- **✅ TypeScript vs. JavaScript**: Installs `.tsx` component files if you use TypeScript, gracefully falling back to stripped `.jsx` components for vanilla JS environments.
+- **✅ Tailwind Awareness**: Verifies you have Tailwind appropriately installed.
+- **✅ Dependency Auto-Install**: If the component you want needs `framer-motion`, `@radix-ui/react-checkbox` or even just `clsx`, the CLI automatically resolves these dependencies silently for you.
+- **✅ Prettier Formatting**: Uses your project's Prettier settings statically against our components before file creation so the component matches your exact code-style.
+- **✅ Interactive Interface**: Employs interactive menus to let you visually pick the component you want to build inside your project.
+
+## Installation / Usage
+
+1. Open your terminal at the root of your project directory.
+2. Ensure you have `tailwind-merge` and `clsx` properly configured in a central utility path or installed manually (some components will auto-detect and install these).
+
+### Initialization (Themes & CSS Base)
+
+To swiftly set up a cohesive Tailwind theme and properly configure your base CSS file (e.g. `index.css` or `globals.css`), run:
+
+```bash
+npx cooterlabs init
+```
+
+This will give you a list of carefully curated designer themes (like `zinc`, `slate`) to apply global default variables (background, foreground, primary borders, etc.) out-of-the-box.
+
+### Adding Components
+
+Run the CLI tool without arguments to get an interactive autocomplete prompt:
+
+```bash
+npx cooterlabs add
+```
+
+If you know exactly what component you want, bypass the interactive wizard and supply the name:
+
+```bash
+# Example: Adding a Button
+npx cooterlabs add button
+
+# Example: Adding an Avatar
+npx cooterlabs add avatar
+```
+
+### Install All Components At Once
+
+Need a complete starting block? Add the `--all` flag to scaffold the entire library in one go:
+
+```bash
+npx cooterlabs add --all
+```
+
+## Available Components
+
+Currently, the CooterLabs Library ships with the following carefully designed boilerplate components:
+
+- `avatar` - An accessible React image element holding fallback identifiers.
+- `badge` - Tiny status badge elements relying on standard `variant` mappings.
+- `button` - A highly stylized native HTML button leveraging Radix UI primitives (`Slot`).
+- `card` - Content display wrappers comprising headers, footers, body content, and titles.
+- `checkbox` - Robust implementation for accessible `<input type="checkbox"/>` mappings.
+- `input` - Your standard customized HTML `<input />`.
+- `label` - An accessible Radix-backed `<label />`.
+- `textarea` - A matching multiline input variation styling perfectly with standard inputs.
+
+## How it works under-the-hood
+
+1. When you run `npx cooterlabs add [component]`, the script analyzes your filesystem looking for `pnpm-lock.yaml`, `bun.lockb`, `yarn.lock`, etc., and detects package managers.
+2. It looks for `tsconfig.json` to see if it should copy the raw `.tsx` component files or use regex parsers to strip types for a standard `.jsx` output.
+3. It recursively creates target folders, usually resolving to `src/components/ui` or `components/ui`.
+4. Formatting is applied.
+5. Child dependencies (e.g., `lucide-react`, Radix UI dependencies) required *exclusively* for that component are installed so the codebase isn't overwhelmed with useless imported libraries.
+
+## License
+
+MIT - Grab it, use it, scale it!

package/bin/index.js

@@ -29,6 +29,83 @@ const REGISTRY = {
     dependencies: ["lucide-react", "clsx", "tailwind-merge"],
     dev_dependencies: [],
   },
+  card: {
+    name: "Card",
+    dependencies: ["clsx", "tailwind-merge"],
+    dev_dependencies: [],
+  },
+  label: {
+    name: "Label",
+    dependencies: ["clsx", "tailwind-merge", "@radix-ui/react-label"],
+    dev_dependencies: [],
+  },
+  textarea: {
+    name: "Textarea",
+    dependencies: ["clsx", "tailwind-merge"],
+    dev_dependencies: [],
+  },
+  badge: {
+    name: "Badge",
+    dependencies: ["clsx", "tailwind-merge"],
+    dev_dependencies: [],
+  },
+  avatar: {
+    name: "Avatar",
+    dependencies: ["clsx", "tailwind-merge", "@radix-ui/react-avatar"],
+    dev_dependencies: [],
+  },
+  checkbox: {
+    name: "Checkbox",
+    dependencies: ["lucide-react", "clsx", "tailwind-merge"],
+    dev_dependencies: [],
+  },
+};
+
+const THEMES = {
+  zinc: `:root {
+  --background: 0 0% 100%;
+  --foreground: 240 10% 3.9%;
+  --card: 0 0% 100%;
+  --card-foreground: 240 10% 3.9%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 240 10% 3.9%;
+  --primary: 240 5.9% 10%;
+  --primary-foreground: 0 0% 98%;
+  --secondary: 240 4.8% 95.9%;
+  --secondary-foreground: 240 5.9% 10%;
+  --muted: 240 4.8% 95.9%;
+  --muted-foreground: 240 3.8% 46.1%;
+  --accent: 240 4.8% 95.9%;
+  --accent-foreground: 240 5.9% 10%;
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 0 0% 98%;
+  --border: 240 5.9% 90%;
+  --input: 240 5.9% 90%;
+  --ring: 240 10% 3.9%;
+  --radius: 0.5rem;
+}`,
+  slate: `:root {
+  --background: 0 0% 100%;
+  --foreground: 222.2 84% 4.9%;
+  --card: 0 0% 100%;
+  --card-foreground: 222.2 84% 4.9%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 222.2 84% 4.9%;
+  --primary: 222.2 47.4% 11.2%;
+  --primary-foreground: 210 40% 98%;
+  --secondary: 210 40% 96.1%;
+  --secondary-foreground: 222.2 47.4% 11.2%;
+  --muted: 210 40% 96.1%;
+  --muted-foreground: 215.4 16.3% 46.9%;
+  --accent: 210 40% 96.1%;
+  --accent-foreground: 222.2 47.4% 11.2%;
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 210 40% 98%;
+  --border: 214.3 31.8% 91.4%;
+  --input: 214.3 31.8% 91.4%;
+  --ring: 222.2 84% 4.9%;
+  --radius: 0.5rem;
+}`,
 };
 
 const templatesDir = path.join(__dirname, "../templates");
@@ -129,13 +206,20 @@ const main = async () => {
   }
 
   const args = process.argv.slice(2);
-  let command = args[0];
-  let componentName = args[1];
-
-  if (!command || command !== "add") {
-    // If command isn't provided or is entirely missing, treat the first arg as the component name
-    command = "add";
-    componentName = args[0] || "";
+  const isAll = args.includes("--all");
+  let command = "add";
+  let componentName = "";
+
+  // Parse command & componentName from args (ignoring flags)
+  const positionalArgs = args.filter((a) => !a.startsWith("--"));
+  if (positionalArgs.length > 0) {
+    if (positionalArgs[0] === "init" || positionalArgs[0] === "add") {
+      command = positionalArgs[0];
+      componentName = positionalArgs[1] || "";
+    } else {
+      command = "add";
+      componentName = positionalArgs[0];
+    }
   }
 
   let availableComponents = Object.keys(REGISTRY);
@@ -146,102 +230,183 @@ const main = async () => {
     if (dirs.length > 0) availableComponents = dirs;
   }
 
-  if (command === "add") {
-    if (!componentName) {
+  if (command === "init") {
+    const response = await prompts({
+      type: "select",
+      name: "theme",
+      message: "Which theme would you like to use?",
+      choices: Object.keys(THEMES).map((t) => ({ title: t, value: t })),
+    });
+
+    if (!response.theme) {
+      console.log(chalk.red("❌ Theme selection cancelled."));
+      process.exit(1);
+    }
+
+    const themeCSS = THEMES[response.theme];
+    let cssPath = path.join(cwd, "src", "index.css");
+
+    if (env.framework === "next") {
+      if (env.isAppDir) {
+        cssPath = fs.existsSync(path.join(cwd, "src", "app"))
+          ? path.join(cwd, "src", "app", "globals.css")
+          : path.join(cwd, "app", "globals.css");
+      } else {
+        cssPath = fs.existsSync(path.join(cwd, "src", "styles", "globals.css"))
+          ? path.join(cwd, "src", "styles", "globals.css")
+          : path.join(cwd, "styles", "globals.css");
+      }
+    } else {
+      cssPath = fs.existsSync(path.join(cwd, "src", "index.css"))
+        ? path.join(cwd, "src", "index.css")
+        : path.join(cwd, "src", "globals.css");
+    }
+
+    // Ensure dir exists
+    const cssDir = path.dirname(cssPath);
+    if (!fs.existsSync(cssDir)) {
+      fs.mkdirSync(cssDir, { recursive: true });
+    }
+
+    let cssContent = "";
+    if (fs.existsSync(cssPath)) {
+      cssContent = fs.readFileSync(cssPath, "utf-8");
+    }
+
+    const hasTailwindDirectives =
+      cssContent.includes("@tailwind base") ||
+      cssContent.includes('@import "tailwindcss');
+    if (!hasTailwindDirectives) {
+      cssContent = `@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n${cssContent}`;
+    }
+
+    if (
+      cssContent.includes(":root {") ||
+      cssContent.includes("--background:")
+    ) {
+      console.log(
+        chalk.yellow(
+          `⚠️  CSS variables may already exist in ${cssPath}. Please append them manually if needed:\n\n@layer base {\n${themeCSS}\n}\n`,
+        ),
+      );
+    } else {
+      cssContent = `${cssContent}\n@layer base {\n${themeCSS}\n}\n`;
+      fs.writeFileSync(cssPath, cssContent);
+      console.log(
+        chalk.green(`✅ Theme '${response.theme}' initialized in ${cssPath}`),
+      );
+    }
+  } else if (command === "add") {
+    let componentsToAdd = [];
+
+    if (isAll) {
+      componentsToAdd = availableComponents;
+    } else if (componentName) {
+      componentsToAdd = [componentName];
+    } else {
       const response = await prompts({
-        type: "select",
-        name: "component",
-        message: "Which component would you like to add?",
+        type: "autocompleteMultiselect",
+        name: "components",
+        message:
+          "Which components would you like to add? (Space to select, Enter to submit, or use --all flag)",
         choices: availableComponents.map((c) => ({ title: c, value: c })),
       });
-      componentName = response.component;
+      componentsToAdd = response.components || [];
     }
 
-    if (!componentName) {
-      console.log(chalk.red("❌ Operation cancelled."));
+    if (componentsToAdd.length === 0) {
+      console.log(chalk.red("❌ No components selected. Operation cancelled."));
       process.exit(1);
     }
 
-    if (!availableComponents.includes(componentName)) {
-      console.log(chalk.red(`❌ Component '${componentName}' not found.`));
+    // Check availability
+    const notFound = componentsToAdd.filter(
+      (c) => !availableComponents.includes(c),
+    );
+    if (notFound.length > 0) {
+      console.log(chalk.red(`❌ Components not found: ${notFound.join(", ")}`));
       process.exit(1);
     }
 
-    const templatePath = path.join(templatesDir, componentName);
-
     // Create target dir
     const targetDir = path.join(cwd, env.componentsDir);
     if (!fs.existsSync(targetDir)) {
       fs.mkdirSync(targetDir, { recursive: true });
     }
 
-    // Determine target path
-    const extension = env.typescript ? ".tsx" : ".jsx";
-    const componentFile = `${componentName}${extension}`;
-    const targetPath = path.join(targetDir, componentFile);
-
-    const spinner = ora(`Installing ${componentName}...`).start();
-
-    try {
-      let sourceContent = "";
-      if (fs.existsSync(templatePath)) {
-        const files = fs.readdirSync(templatePath);
-        const srcFile = files.find(
-          (f) => f.endsWith(".tsx") || f.endsWith(".jsx"),
-        );
-        if (srcFile) {
-          sourceContent = fs.readFileSync(
-            path.join(templatePath, srcFile),
-            "utf-8",
+    let allDependencies = new Set();
+
+    for (const comp of componentsToAdd) {
+      const templatePath = path.join(templatesDir, comp);
+      const extension = env.typescript ? ".tsx" : ".jsx";
+      const componentFile = `${comp}${extension}`;
+      const targetPath = path.join(targetDir, componentFile);
+
+      const spinner = ora(`Installing ${comp}...`).start();
+
+      try {
+        let sourceContent = "";
+        if (fs.existsSync(templatePath)) {
+          const files = fs.readdirSync(templatePath);
+          const srcFile = files.find(
+            (f) => f.endsWith(".tsx") || f.endsWith(".jsx"),
           );
+          if (srcFile) {
+            sourceContent = fs.readFileSync(
+              path.join(templatePath, srcFile),
+              "utf-8",
+            );
+          } else if (files.length > 0) {
+            sourceContent = fs.readFileSync(
+              path.join(templatePath, files[0]),
+              "utf-8",
+            );
+          }
         } else {
-          sourceContent = fs.readFileSync(
-            path.join(templatePath, files[0]),
-            "utf-8",
+          sourceContent = `import React from 'react';\n\nexport const ${REGISTRY[comp]?.name || "Component"} = () => { return <div>${comp}</div>; };\n`;
+        }
+
+        // Format code
+        let formattedContent = sourceContent;
+        try {
+          formattedContent = await formatFile(sourceContent, targetPath);
+        } catch (err) {
+          console.log(
+            chalk.yellow(
+              `\n⚠️  Formatting failed for ${comp}. Using original formatting.`,
+            ),
           );
         }
-      } else {
-        // Fallback or generic content simply to show it works
-        sourceContent = `import React from 'react';\n\nexport const ${REGISTRY[componentName]?.name || "Component"} = () => { return <div>${componentName}</div>; };\n`;
-      }
 
-      // Hacky TS -> JS stripping if they don't use TypeScript
-      if (!env.typescript) {
-        // Simple type stripping if needed, but omitted for stability.
-        // It's recommended to publish compiled JS if targeting non-TS,
-        // or let the user fix up the .jsx file.
-      }
+        fs.writeFileSync(targetPath, formattedContent, "utf-8");
+        spinner.succeed(`Created ${componentFile} in ${env.componentsDir}`);
 
-      // Format code
-      let formattedContent = sourceContent;
-      try {
-        formattedContent = await formatFile(sourceContent, targetPath);
+        // Track dependencies
+        const registryEntry = REGISTRY[comp];
+        if (registryEntry && registryEntry.dependencies) {
+          registryEntry.dependencies.forEach((d) => allDependencies.add(d));
+        }
       } catch (err) {
-        console.log(
-          chalk.yellow("⚠️  Formatting failed. Using original formatting."),
-        );
+        spinner.fail(`Failed to add ${comp}`);
+        console.error(chalk.red(err.message));
       }
+    }
 
-      // Write file
-      fs.writeFileSync(targetPath, formattedContent, "utf-8");
-
-      spinner.succeed(`Created ${componentFile} in ${env.componentsDir}`);
-
-      // Install dependencies
-      const registryEntry = REGISTRY[componentName];
-      if (registryEntry && registryEntry.dependencies?.length > 0) {
-        const depSpinner = ora(
-          `Installing dependencies: ${registryEntry.dependencies.join(", ")}...`,
-        ).start();
-        installDependencies(registryEntry.dependencies, env.pkgCommand);
-        depSpinner.succeed(`Installed dependencies.`);
+    if (allDependencies.size > 0) {
+      const depsArray = Array.from(allDependencies);
+      const depSpinner = ora(
+        `Installing collective dependencies: ${depsArray.join(", ")}...`,
+      ).start();
+      try {
+        installDependencies(depsArray, env.pkgCommand);
+        depSpinner.succeed(`Dependencies installed successfully.`);
+      } catch (err) {
+        depSpinner.fail(`Failed to install dependencies.`);
+        console.error(chalk.red(err.message));
       }
-
-      console.log(chalk.green(`\n✅ ${componentName} added successfully!`));
-    } catch (err) {
-      spinner.fail(`Failed to add ${componentName}`);
-      console.error(chalk.red(err.message));
     }
+
+    console.log(chalk.green(`\n✅ Finished adding components!`));
   } else {
     console.log(chalk.red(`❌ Unknown command: ${command}`));
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cooterlabs",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Component library CLI for CooterLabs apps",
   "files": [
     "bin",
@@ -19,8 +19,11 @@
   "type": "module",
   "dependencies": {
     "chalk": "^5.6.2",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.575.0",
     "ora": "^9.3.0",
     "prettier": "^3.8.1",
-    "prompts": "^2.4.2"
+    "prompts": "^2.4.2",
+    "tailwind-merge": "^3.5.0"
   }
-}
+}

package/templates/avatar/avatar.tsx

@@ -0,0 +1,52 @@
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+    return twMerge(clsx(inputs))
+}
+
+const Avatar = React.forwardRef<
+    React.ElementRef<typeof AvatarPrimitive.Root>,
+    React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+    <AvatarPrimitive.Root
+        ref={ref}
+        className={cn(
+            "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+            className
+        )}
+        {...props}
+    />
+))
+Avatar.displayName = AvatarPrimitive.Root.displayName
+
+const AvatarImage = React.forwardRef<
+    React.ElementRef<typeof AvatarPrimitive.Image>,
+    React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+    <AvatarPrimitive.Image
+        ref={ref}
+        className={cn("aspect-square h-full w-full", className)}
+        {...props}
+    />
+))
+AvatarImage.displayName = AvatarPrimitive.Image.displayName
+
+const AvatarFallback = React.forwardRef<
+    React.ElementRef<typeof AvatarPrimitive.Fallback>,
+    React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+    <AvatarPrimitive.Fallback
+        ref={ref}
+        className={cn(
+            "flex h-full w-full items-center justify-center rounded-full bg-muted",
+            className
+        )}
+        {...props}
+    />
+))
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+
+export { Avatar, AvatarImage, AvatarFallback }

package/templates/badge/badge.tsx

@@ -0,0 +1,36 @@
+import * as React from "react"
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+    return twMerge(clsx(inputs))
+}
+
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {
+    variant?: "default" | "secondary" | "destructive" | "outline"
+}
+
+const badgeVariants = {
+    default:
+        "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+    secondary:
+        "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+    destructive:
+        "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+    outline: "text-foreground",
+}
+
+function Badge({ className, variant = "default", ...props }: BadgeProps) {
+    return (
+        <div
+            className={cn(
+                "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+                badgeVariants[variant],
+                className
+            )}
+            {...props}
+        />
+    )
+}
+
+export { Badge }

package/templates/card/card.tsx

@@ -0,0 +1,89 @@
+import * as React from "react"
+
+import { cn } from "./button" // Assuming they have cn utility somewhere accessible, or we'll rewrite it to inline
+
+export function cnFallback(...classes: (string | undefined | null | false)[]) {
+    return classes.filter(Boolean).join(" ")
+}
+
+// In a real scenario you'd import 'cn' from a library or a utils file.
+// We'll provide an inline cn for fallback or rely on the user having ones installed:
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+function localCn(...inputs: ClassValue[]) {
+    return twMerge(clsx(inputs))
+}
+
+const Card = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+    <div
+        ref={ref}
+        className={localCn(
+            "rounded-xl border bg-card text-card-foreground shadow",
+            className
+        )}
+        {...props}
+    />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+    <div
+        ref={ref}
+        className={localCn("flex flex-col space-y-1.5 p-6", className)}
+        {...props}
+    />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+    HTMLParagraphElement,
+    React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+    <h3
+        ref={ref}
+        className={localCn("font-semibold leading-none tracking-tight", className)}
+        {...props}
+    />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+    HTMLParagraphElement,
+    React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+    <p
+        ref={ref}
+        className={localCn("text-sm text-muted-foreground", className)}
+        {...props}
+    />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+    <div ref={ref} className={localCn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+    <div
+        ref={ref}
+        className={localCn("flex items-center p-6 pt-0", className)}
+        {...props}
+    />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

package/templates/checkbox/checkbox.tsx

@@ -0,0 +1,32 @@
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { Check } from "lucide-react"
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+    return twMerge(clsx(inputs))
+}
+
+const Checkbox = React.forwardRef<
+    React.ElementRef<typeof CheckboxPrimitive.Root>,
+    React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+    <CheckboxPrimitive.Root
+        ref={ref}
+        className={cn(
+            "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+            className
+        )}
+        {...props}
+    >
+        <CheckboxPrimitive.Indicator
+            className={cn("flex items-center justify-center text-current")}
+        >
+            <Check className="h-4 w-4" />
+        </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }

package/templates/label/label.tsx

@@ -0,0 +1,25 @@
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+function cn(...inputs: ClassValue[]) {
+    return twMerge(clsx(inputs))
+}
+
+const Label = React.forwardRef<
+    React.ElementRef<typeof LabelPrimitive.Root>,
+    React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => (
+    <LabelPrimitive.Root
+        ref={ref}
+        className={cn(
+            "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+            className
+        )}
+        {...props}
+    />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }

package/templates/textarea/textarea.tsx

@@ -0,0 +1,28 @@
+import * as React from "react"
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+    return twMerge(clsx(inputs))
+}
+
+export interface TextareaProps
+    extends React.TextareaHTMLAttributes<HTMLTextAreaElement> { }
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+    ({ className, ...props }, ref) => {
+        return (
+            <textarea
+                className={cn(
+                    "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+                    className
+                )}
+                ref={ref}
+                {...props}
+            />
+        )
+    }
+)
+Textarea.displayName = "Textarea"
+
+export { Textarea }