@srcroot/ui 1.0.0 → 1.0.1

package/README.md

@@ -1,146 +1,171 @@
 # @srcroot/ui
 
-A UI library with polymorphic, accessible React components.
-This library provides a collection of re-usable components that you can copy and paste into your apps.
+A UI library with polymorphic, accessible React components for Next.js, Vite, and other React frameworks.
 
 ## Features
 
-- **Polymorphic**: Most components support an `as` prop (e.g., render a `Button` as an `a` tag).
-- **Accessible**: Built on standard HTML elements and WAI-ARIA patterns.
-- **Copy/Paste**: Not a dependency you install, but code you own.
-- **Styled**: Beautiful defaults using Tailwind CSS and `class-variance-authority`.
+- **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)
+- **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
 
-## Installation
-
-This library is distributed via a CLI that initializes your project and adds components directly to your source code.
+## Quick Start
 
 ### 1. Initialize
 
-Run the `init` command to set up the necessary dependencies and structural files (like `cn` utility) in your project.
-
 ```bash
 npx @srcroot/ui init
 ```
 
-This will ask a few questions to configure your project structure (e.g., where to put components).
+This sets up your project with the `cn` utility, theme configuration, and creates the necessary structure.
 
 ### 2. Add Components
 
-Use the `add` command to install components. You can do this in three ways:
-
-**Interactive Mode:**
-Run without arguments to select components from a list.
 ```bash
+# Interactive mode
 npx @srcroot/ui add
-```
 
-**Specific Components:**
-Add one or more components by name.
-```bash
+# Specific components
 npx @srcroot/ui add button card input
-```
 
-**Add All:**
-Install every available component at once.
-```bash
+# Add all components
 npx @srcroot/ui add --all
 ```
 
-This will copy the component files to your `components/ui` directory and install any necessary peer dependencies (like `react-icons` or `clsx`).
+Components are installed to `src/components/ui/` (or `components/ui/` depending on your structure).
 
-### 3. Usage
+## Supported Package Managers
 
-Import components directly from your project folder:
+The CLI automatically detects and uses your package manager:
 
-```tsx
-import { Button } from "@/components/ui/button"
-
-export default function Home() {
-  return (
-    <Button variant="destructive" onClick={() => alert("Clicked!")}>
-      Click Me
-    </Button>
-  )
-}
-```
+- **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 |
+| 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.
+Run `npx @srcroot/ui list` to see all available components.
+
+### Analytics
+- `google-analytics` - Google Analytics 4 integration
+- `google-tag-manager` - Google Tag Manager container
+- `meta-pixel` - Meta/Facebook Pixel tracking
+- `microsoft-clarity` - Microsoft Clarity analytics
+- `tiktok-pixel` - TikTok Pixel tracking
 
 ### Core
-- `button` - Polymorphic button with variants.
-- `badge` - Status indicators.
-- `avatar` - User profile images with fallbacks.
-- `separator` - Visual divider.
-- `button-group` - Attached or spaced button sets.
+- `button` - Polymorphic button with variants
+- `badge` - Status indicators
+- `avatar` - User profile images with fallbacks
+- `separator` - Visual divider
+- `button-group` - Attached or spaced button sets
+- `slot` - Polymorphic slot for component composition
 
 ### Forms
-- `input` - Basic text input.
-- `textarea` - Multi-line text input.
-- `checkbox` - Toggle selection.
-- `radio` - Single selection from list.
-- `switch` - Toggle switch.
-- `select` - Dropdown selection.
-- `slider` - Range input.
-- `otp-input` - One-time password verification.
-- `search` - Search input with debounce support.
-- `calendar` - Date and range picker.
+- `input` - Basic text input
+- `textarea` - Multi-line text input
+- `checkbox` - Toggle selection
+- `radio` - Single selection from list
+- `switch` - Toggle switch
+- `select` - Dropdown selection
+- `slider` - Range input
+- `otp-input` - One-time password verification
+- `search` - Search input with debounce
+- `calendar` - Date and range picker
+- `date-picker` - Date selection component
+- `form-field` - Form field wrapper with label and validation
+- `input-group` - Input with attached elements
 
 ### Layout
-- `card` - Content container with header/content/footer.
-- `container` - Centered layout wrapper.
-- `aspect-ratio` - Maintain element proportions.
+- `card` - Content container with header/content/footer
+- `container` - Centered layout wrapper
+- `aspect-ratio` - Maintain element proportions
+- `resizable` - Resizable panel groups
 
 ### Data Display
-- `text` - Polymorphic typography component.
-- `label` - Accessible form label.
-- `table` - Responsive data table.
-- `accordion` - Collapsible content sections.
-- `collapsible` - Expandable panel.
-- `tabs` - Tabbed content switcher.
-- `progress` - Progress bar.
-- `skeleton` - Loading placeholder state.
-- `image` - Enhanced img with fallback and loading state.
-- `carousel` - Content slider with autoplay.
+- `text` - Polymorphic typography
+- `label` - Accessible form label
+- `table` - Responsive data table
+- `table-of-contents` - Auto-generated TOC
+- `accordion` - Collapsible content sections
+- `collapsible` - Expandable panel
+- `tabs` - Tabbed content switcher
+- `progress` - Progress bar
+- `skeleton` - Loading placeholder
+- `image` - Enhanced image with fallback
+- `carousel` - Content slider with autoplay
+- `marquee` - Scrolling marquee animation
 
 ### Feedback
-- `loading-spinner` - SVG spinner with variants.
-- `star-rating` - Interactive rating component.
-- `toast` - Transient notifications.
-- `alert` - Critical information banner.
+- `loading-spinner` - SVG spinner with variants
+- `star-rating` - Interactive rating component
+- `toast` - Transient notifications
+- `alert` - Critical information banner
+- `scroll-to-top` - Scroll to top button
+- `scroll-animation` - Scroll-triggered animations
 
 ### Overlays
-- `dialog` - Modal dialog.
-- `alert-dialog` - Modal for confirming actions.
-- `sheet` - Side-panel overlay.
-- `popover` - Content appearing over trigger.
-- `tooltip` - Hover information.
-- `dropdown-menu` - Menu for actions/navigation.
+- `dialog` - Modal dialog
+- `alert-dialog` - Modal for confirming actions
+- `sheet` - Side-panel overlay
+- `popover` - Content appearing over trigger
+- `tooltip` - Hover information
+- `dropdown-menu` - Menu for actions/navigation
+- `context-menu` - Right-click context menu
 
 ### Navigation
-- `breadcrumb` - Navigation trail.
-- `pagination` - Page navigation controls.
+- `breadcrumb` - Navigation trail
+- `pagination` - Page navigation controls
+- `sidebar` - Collapsible sidebar with navigation
+- `menubar` - Menu bar component
+
+### Specialized
+- `chatbot` - Chat interface widget
+- `chart` - Recharts-based chart component
+- `map` - Google Maps embed
+- `combobox` - Searchable dropdown (Command menu pattern)
+- `command` - Command menu (Cmdk-style)
+- `file-upload` - Drag-and-drop file upload
+- `hover-card` - Hover-triggered card
+- `native-select` - Native select wrapper
+- `patterns` - Decorative background patterns
+- `theme-switcher` - Light/dark/system theme toggle
+- `whatsapp` - WhatsApp floating button
+- `floating-dock` - macOS-style floating dock
 
 ## Polymorphism
 
-Our components accept an `as` prop to change the underlying HTML element while maintaining styles and behavior.
+Components accept an `as` prop to change the underlying HTML element:
 
 ```tsx
-// Renders as an <a> tag but looks like a button
-<Button as="a" href="/login">
-  Login
-</Button>
-
-// Renders as a specialized text variant
-<Text as="h1" variant="h1">
-  Page Title
-</Text>
+<Button as="a" href="/login">Login</Button>
+
+<Text as="h1" variant="h1">Page Title</Text>
 ```
 
-## Local Development
+## CLI Options
 
-To run the documentation/playground locally:
+```
+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
@@ -148,4 +173,4 @@ npm install
 npm run dev
 ```
 
-Visit `http://localhost:3001` to view the component showcase.
+Visit `http://localhost:3001` to view the component showcase.

package/dist/index.js

@@ -179,6 +179,7 @@ import fs3 from "fs";
 import path3 from "path";
 function getPackageManager(cwd) {
   const dir = cwd || process.cwd();
+  if (fs3.existsSync(path3.join(dir, "deno.json")) || fs3.existsSync(path3.join(dir, "deno.jsonc"))) return "deno";
   if (fs3.existsSync(path3.join(dir, "bun.lockb"))) return "bun";
   if (fs3.existsSync(path3.join(dir, "pnpm-lock.yaml"))) return "pnpm";
   if (fs3.existsSync(path3.join(dir, "yarn.lock"))) return "yarn";
@@ -189,6 +190,8 @@ function getPackageManager(cwd) {
     if (userAgent.startsWith("pnpm")) return "pnpm";
     if (userAgent.startsWith("bun")) return "bun";
   }
+  const denoAgent = process.env.DENO_ENV;
+  if (denoAgent) return "deno";
   return "npm";
 }
 
@@ -971,7 +974,81 @@ var ComponentAdder = class {
     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, "");
-    if (name === "theme-switcher") {
+    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 = [
+      "accordion",
+      "alert-dialog",
+      "alert",
+      "aspect-ratio",
+      "avatar",
+      "badge",
+      "breadcrumb",
+      "button",
+      "button-group",
+      "calendar",
+      "card",
+      "carousel",
+      "chart",
+      "chatbot",
+      "checkbox",
+      "collapsible",
+      "combobox",
+      "command",
+      "container",
+      "context-menu",
+      "date-picker",
+      "dialog",
+      "drawer",
+      "dropdown-menu",
+      "empty-state",
+      "file-upload",
+      "floating-dock",
+      "form-field",
+      "hover-card",
+      "image",
+      "input",
+      "input-group",
+      "kbd",
+      "label",
+      "loading-spinner",
+      "map",
+      "marquee",
+      "menubar",
+      "native-select",
+      "otp-input",
+      "pagination",
+      "patterns",
+      "popover",
+      "progress",
+      "radio",
+      "resizable",
+      "scroll-animation",
+      "scroll-area",
+      "scroll-to-top",
+      "search",
+      "select",
+      "separator",
+      "sheet",
+      "sidebar",
+      "skeleton",
+      "slider",
+      "star-rating",
+      "switch",
+      "table",
+      "table-of-contents",
+      "tabs",
+      "text",
+      "textarea",
+      "toast",
+      "toggle",
+      "toggle-group",
+      "tooltip",
+      "whatsapp"
+    ];
+    for (const comp of otherUiImports) {
+      const regex = new RegExp(`from\\s+"@/components/ui/${comp}"`, "g");
+      content = content.replace(regex, `from "./${comp}"`);
     }
     return content.trimStart();
   }
@@ -1072,9 +1149,23 @@ var ComponentAdder = class {
   async installPackages(packages) {
     const packageManager = getPackageManager(this.cwd);
     const spinner = ora2("Installing dependencies...").start();
-    const installCmd = packageManager === "npm" ? "install" : "add";
+    let installCmd;
+    switch (packageManager) {
+      case "deno":
+        installCmd = ["add", "-A", ...packages];
+        break;
+      case "bun":
+        installCmd = ["add", ...packages];
+        break;
+      case "pnpm":
+      case "yarn":
+        installCmd = ["add", ...packages];
+        break;
+      default:
+        installCmd = ["install", ...packages];
+    }
     try {
-      await execa2(packageManager, [installCmd, ...packages], {
+      await execa2(packageManager, installCmd, {
         cwd: this.cwd
       });
       spinner.succeed("Dependencies installed");

package/package.json

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