cooterlabs 1.0.0 → 1.0.1

package/README.md

@@ -0,0 +1,61 @@
+# 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).
+3. Run the CLI tool:
+
+```bash
+npx cooterlabs add
+```
+
+### Direct Component Install
+
+If you know exactly what component you want, just 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
+```
+
+## 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,41 @@ 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",
+      "@radix-ui/react-checkbox",
+    ],
+    dev_dependencies: [],
+  },
 };
 
 const templatesDir = path.join(__dirname, "../templates");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cooterlabs",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "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 }