@srcroot/ui 1.0.1 → 1.0.4

package/README.md

@@ -1,63 +1,88 @@
 # @srcroot/ui
 
-A UI library with polymorphic, accessible React components for Next.js, Vite, and other React frameworks.
+A lightweight UI library with polymorphic, accessible React components for Next.js, Vite, and other React frameworks.
 
 ## Features
 
-- **Framework-Aware**: Automatically detects your framework (Next.js, Vite, etc.) and uses the right component variants
-- **Polymorphic**: Most components support an `as` prop (e.g., render a `Button` as an `a` tag)
+- **Framework-Aware**: Automatically detects Next.js or Vite and uses optimized component variants
+- **Polymorphic**: Most components support an `as` prop to change the underlying HTML element
 - **Accessible**: Built on standard HTML elements and WAI-ARIA patterns
 - **Copy/Paste**: Components are copied directly into your project — you own the code
 - **Styled**: Beautiful defaults using Tailwind CSS and `class-variance-authority`
-- **Multi-Platform**: Supports npm, Yarn, pnpm, Bun, and Deno
+- **Zero Runtime Dependencies**: No library bundle — just copy what you need
 
-## Quick Start
+## Install
 
-### 1. Initialize
+Initialize your project with `@srcroot/ui`:
 
 ```bash
+# npm
 npx @srcroot/ui init
+
+# yarn
+yarn dlx @srcroot/ui init
+
+# pnpm
+pnpm dlx @srcroot/ui init
+
+# bun
+bunx @srcroot/ui init
+
+# deno
+deno run -A npm:@srcroot/ui init
 ```
 
-This sets up your project with the `cn` utility, theme configuration, and creates the necessary structure.
+## Add Components
 
-### 2. Add Components
+Add components to your project:
 
 ```bash
-# Interactive mode
+# npm
 npx @srcroot/ui add
-
-# Specific components
 npx @srcroot/ui add button card input
-
-# Add all components
 npx @srcroot/ui add --all
-```
 
-Components are installed to `src/components/ui/` (or `components/ui/` depending on your structure).
+# yarn
+yarn dlx @srcroot/ui add
+yarn dlx @srcroot/ui add button card input
+yarn dlx @srcroot/ui add --all
+
+# pnpm
+pnpm dlx @srcroot/ui add
+pnpm dlx @srcroot/ui add button card input
+pnpm dlx @srcroot/ui add --all
+
+# bun
+bunx @srcroot/ui add
+bunx @srcroot/ui add button card input
+bunx @srcroot/ui add --all
+
+# deno
+deno run -A npm:@srcroot/ui add
+deno run -A npm:@srcroot/ui add button card input
+deno run -A npm:@srcroot/ui add --all
+```
 
 ## Supported Package Managers
 
 The CLI automatically detects and uses your package manager:
 
-- **npm** - `npm install`
-- **Yarn** - `yarn add`
-- **pnpm** - `pnpm add`
-- **Bun** - `bun add`
-- **Deno** - `deno add -A`
+| Manager | Command |
+|---------|---------|
+| npm | `npm install` |
+| Yarn | `yarn add` |
+| pnpm | `pnpm add` |
+| Bun | `bun add` |
+| Deno | `deno add -A` |
 
 ## Framework Detection
 
-The CLI automatically detects your framework:
-
 | Framework | Detection | Notes |
 |-----------|-----------|-------|
-| Next.js | `next.config.ts/js/mjs` or `src/app` directory | Uses `next/script` for analytics |
+| Next.js | `next.config.ts/js/mjs` or `src/app` | Uses `next/script` for analytics |
 | Vite | `vite.config.ts/js/mjs` | Uses `useEffect` for analytics, localStorage for themes |
 
-## Available Components
-
-Run `npx @srcroot/ui list` to see all available components.
+## Components
 
 ### Analytics
 - `google-analytics` - Google Analytics 4 integration
@@ -137,7 +162,7 @@ Run `npx @srcroot/ui list` to see all available components.
 - `chart` - Recharts-based chart component
 - `map` - Google Maps embed
 - `combobox` - Searchable dropdown (Command menu pattern)
-- `command` - Command menu (Cmdk-style)
+- `command` - Command menu (Cmd+k style)
 - `file-upload` - Drag-and-drop file upload
 - `hover-card` - Hover-triggered card
 - `native-select` - Native select wrapper
@@ -146,6 +171,26 @@ Run `npx @srcroot/ui list` to see all available components.
 - `whatsapp` - WhatsApp floating button
 - `floating-dock` - macOS-style floating dock
 
+## Usage
+
+```tsx
+import { Button } from "@/components/ui/button"
+import { Card, CardHeader, CardContent } from "@/components/ui/card"
+
+export default function Home() {
+  return (
+    <Card>
+      <CardHeader>Welcome</CardHeader>
+      <CardContent>
+        <Button variant="destructive" onClick={() => alert("Clicked!")}>
+          Get Started
+        </Button>
+      </CardContent>
+    </Card>
+  )
+}
+```
+
 ## Polymorphism
 
 Components accept an `as` prop to change the underlying HTML element:
@@ -156,21 +201,15 @@ Components accept an `as` prop to change the underlying HTML element:
 <Text as="h1" variant="h1">Page Title</Text>
 ```
 
-## CLI Options
+## CLI Reference
 
-```
+```bash
 npx @srcroot/ui init          Initialize project structure
 npx @srcroot/ui add [comps]   Add component(s)
 npx @srcroot/ui add --all     Add all components
 npx @srcroot/ui list          List available components
 ```
 
-## Local Development
-
-```bash
-cd examples/playground
-npm install
-npm run dev
-```
+## License
 
-Visit `http://localhost:3001` to view the component showcase.
+MIT

package/dist/index.js

@@ -971,12 +971,11 @@ var ComponentAdder = class {
     return "unknown";
   }
   transformForVite(name, content) {
-    content = content.replace(/^"use client"[;\n\r]*/m, "");
-    content = content.replace(/import\s*{\s*useTheme\s*}\s*from\s*"next-themes"\s*;?\n?/g, "");
-    content = content.replace(/import\s*{\s*ThemeProvider\s*}\s*from\s*"next-themes"\s*;?\n?/g, "");
-    content = content.replace(/import\s*{\s*cn\s*}\s*from\s*"@\/lib\/utils"\s*;?\n?/g, 'import { cn } from "../../lib/utils"\n');
-    content = content.replace(/import\s*{\s*Slot\s*}\s*from\s*"@\/components\/ui\/slot"\s*;?\n?/g, 'import { Slot } from "./slot"\n');
-    const otherUiImports = [
+    content = content.replace(/^["']use client["'];?\r?\n?/m, "");
+    content = content.replace(/import\s*\{[^}]*\}\s*from\s*["']next-themes["'];?\r?\n?/g, "");
+    content = content.replace(/import\s*\{[^}]*\}\s*from\s*["']@\/lib\/utils["'];?\r?\n?/g, 'import { cn } from "../../lib/utils"\n');
+    content = content.replace(/import\s*\{[^}]*\}\s*from\s*["']@\/components\/ui\/slot["'];?\r?\n?/g, 'import { Slot } from "./slot"\n');
+    const allComponents = [
       "accordion",
       "alert-dialog",
       "alert",
@@ -1046,9 +1045,8 @@ var ComponentAdder = class {
       "tooltip",
       "whatsapp"
     ];
-    for (const comp of otherUiImports) {
-      const regex = new RegExp(`from\\s+"@/components/ui/${comp}"`, "g");
-      content = content.replace(regex, `from "./${comp}"`);
+    for (const comp of allComponents) {
+      content = content.replace(new RegExp(`from\\s+["']@/components/ui/${comp}["']`, "g"), `from "./${comp}"`);
     }
     return content.trimStart();
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@srcroot/ui",
-  "version": "1.0.1",
+  "version": "1.0.4",
   "description": "A UI library with polymorphic, accessible React components",
   "author": "Shifaul Islam",
   "license": "MIT",